/* GENERATED by scripts/sync_shared.py from portfolio-analyzer's static/public.css. Do not edit here: change the private repo and re-run the script. */
/* The public Macro page (macrolyzed/public). Phone first; a few
   rules widen it for a desktop. Everything is under a .macro-, .brief-,
   .modal- or .chat- prefix so it can be included in app.css unchanged when
   the private page adopts the design. */

:root {
  --macro-good: #1a7d44;              /* 5.2:1 on white; #1f8a4c fell just short of 4.5 */
  --macro-bad: #c9372c;
  --ind-high: #2a78d6;
  --ind-low: #eb6834;
}
[data-bs-theme="dark"] {
  --macro-good: #3fbf73;
  --macro-bad: #f0665a;
  --ind-high: #3987e5;
  --ind-low: #d95926;
}

.macro-body { background: var(--bs-body-bg); }
.macro-container { max-width: 80rem; padding-left: 16px; padding-right: 16px; }
.macro-header { border-bottom: 1px solid var(--bs-border-color); padding: 0.6rem 0; margin-bottom: 1rem; }
.macro-brand { font-weight: 700; text-decoration: none; color: var(--bs-body-color); letter-spacing: 0.01em; }
.macro-data-through { font-size: 0.8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.macro-main { padding-bottom: 5rem; }
.macro-footer { font-size: 0.75rem; color: var(--bs-secondary-color); padding: 1rem 16px 2rem; }

/* The brief. */
.brief { margin-bottom: 1.25rem; }
.brief-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.brief-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.brief-dates { font-size: 0.78rem; color: var(--bs-secondary-color); }
.brief-headline { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0 0.5rem; line-height: 1.35; }
.brief-points > summary { cursor: pointer; font-size: 0.85rem; color: var(--bs-secondary-color); margin-bottom: 0.4rem; }
.brief-point { padding: 0.5rem 0; border-top: 1px solid var(--bs-border-color); }
.brief-point-headline { font-weight: 600; font-size: 0.95rem; }
.brief-bullets { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }
.brief-bullets strong { font-weight: inherit; }
.brief-bullets > li + li { margin-top: 0.2rem; }
.brief-caveat { color: var(--bs-secondary-color); }
.brief-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }
.brief-sources { font-size: 0.75rem; margin-top: 0.3rem; }

/* Controls: pills, all links. */
.macro-controls { margin-bottom: 0.75rem; }
.macro-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.4rem; }
.macro-pills-label { font-size: 0.75rem; color: var(--bs-secondary-color); margin-right: 0.15rem; }
.macro-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.8rem; line-height: 1.2;
  border: 1px solid var(--bs-border-color); color: var(--bs-body-color); text-decoration: none;
  background: var(--bs-body-bg); white-space: nowrap;
}
.macro-pill:hover { border-color: var(--bs-secondary-color); color: var(--bs-body-color); }
.macro-pill.active { background: var(--bs-body-color); color: var(--bs-body-bg); border-color: var(--bs-body-color); }
.macro-pill.disabled { opacity: 0.45; pointer-events: none; }

/* Settings: segmented controls, visibly not filters. */
.macro-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.2rem; }
.macro-setting { display: inline-flex; align-items: center; gap: 0.5rem; }
.macro-setting:last-child { margin-left: auto; }
.macro-setting-label { font-size: 0.75rem; color: var(--bs-secondary-color); }
.macro-seg { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: 0.4rem; overflow: hidden; background: var(--bs-body-bg); }
.macro-seg-item {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem;
  font-size: 0.8rem; color: var(--bs-body-color); text-decoration: none; white-space: nowrap;
  /* Some segments are buttons: without these they keep the browser's own
     grey face and border (a shaded "Full" in dark mode, found 2026-10-09). */
  background: transparent; border: 0; border-left: 1px solid var(--bs-border-color);
  font-family: inherit; line-height: inherit; cursor: pointer;
}
.macro-seg-item:first-child { border-left: 0; }
.macro-seg-item:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.macro-seg-item.active { background: var(--bs-body-color); color: var(--bs-body-bg); }

/* The theme switch in the header. */
.macro-switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--bs-secondary-color); cursor: pointer; }
.macro-switch .form-check-input { cursor: pointer; margin: 0; }

/* Theme cards and indicator rows. */
/* Themes stacked, one full-width card each; the indicators inside a card
   flow into columns on a wider screen, so a theme reads top to bottom
   (headline, takeaway, its rows) and two themes never sit ragged side by
   side. */
.macro-themes { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.macro-rows { display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) {
  .macro-rows { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
@media (min-width: 1400px) {
  .macro-rows { grid-template-columns: 1fr 1fr 1fr; }
}

/* The first rows fill whole grid lines and a "+N more" tile closes the
   last one: 3 rows + tile on a phone, 5 + tile on a desktop, 8 + tile on
   a wide screen (macro_view.SHOWN). The server says which sizes need a
   tile (over-phone / over-desktop / over-wide); each size hides the rows
   past its count until the tile is pressed, which adds .open. The count
   shown in the tile is the one for the current size. */
.only-phone, .only-desktop, .only-wide { display: none; }
.macro-rows.over-phone:not(.open) > .macro-row:not(.macro-more-tile):nth-child(n+4) { display: none; }
.macro-rows:not(.over-phone) > .macro-more-tile { display: none; }
.over-phone .only-phone { display: inline; }
@media (min-width: 992px) {
  .macro-rows.over-phone:not(.open) > .macro-row:not(.macro-more-tile):nth-child(n+4) { display: grid; }
  .macro-rows.over-desktop:not(.open) > .macro-row:not(.macro-more-tile):nth-child(n+6) { display: none; }
  .macro-rows:not(.over-phone) > .macro-more-tile, .macro-rows > .macro-more-tile { display: none; }
  .macro-rows.over-desktop > .macro-more-tile { display: flex; }
  .over-phone .only-phone { display: none; }
  .over-desktop .only-desktop { display: inline; }
}
@media (min-width: 1400px) {
  .macro-rows.over-desktop:not(.open) > .macro-row:not(.macro-more-tile):nth-child(n+6) { display: grid; }
  .macro-rows.over-wide:not(.open) > .macro-row:not(.macro-more-tile):nth-child(n+9) { display: none; }
  .macro-rows.over-desktop > .macro-more-tile { display: none; }
  .macro-rows.over-wide > .macro-more-tile { display: flex; }
  .over-desktop .only-desktop { display: none; }
  .over-wide .only-wide { display: inline; }
}
.macro-more-tile {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 600; color: var(--bs-primary);
  background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); border-radius: 0.4rem;
  min-height: 5.5rem; margin-top: 0.5rem; cursor: pointer;
}
.macro-more-tile:hover { background: var(--bs-secondary-bg); }
.macro-rows.open > .macro-more-tile .macro-more-count { display: none; }
.macro-rows:not(.open) > .macro-more-tile .macro-more-fewer { display: none; }
.macro-rows.open > .macro-more-tile { min-height: 2.5rem; font-size: 0.85rem; font-weight: 500; }
.macro-theme { padding: 0 0.75rem 0.4rem; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-body-bg); overflow: hidden; }
/* The theme's header is a dark band across the card, the same band the
   table's header wears, so themes read as separate blocks. */
.macro-theme-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin: 0 -0.75rem 0.5rem; padding: 0.5rem 0.75rem;
  background: #111; color: #fff;
}
[data-bs-theme="dark"] .macro-theme-head { background: #000; border-bottom: 1px solid var(--bs-border-color); }
.macro-theme-title { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: 0.01em; }
.macro-theme-title a { color: inherit; text-decoration: none; }
.macro-theme-chart { font-size: 0.78rem; color: #cfd8ff; }
.macro-theme-chart:hover { color: #fff; }
.macro-theme-takeaway { margin: 0.3rem 0 0.35rem; font-size: 0.875rem; }
.macro-theme-takeaway > summary { cursor: pointer; font-weight: 600; line-height: 1.3; }
.macro-theme-takeaway[open] > summary { margin-bottom: 0.25rem; }
.macro-more > summary { cursor: pointer; font-size: 0.8rem; color: var(--bs-secondary-color); padding: 0.4rem 0 0.2rem; }

.macro-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name figures" "spark spark";
  gap: 0.1rem 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--bs-border-color);
  color: inherit; text-decoration: none;
}
.macro-row:hover { background: var(--bs-tertiary-bg); color: inherit; }
.macro-row-name { grid-area: name; min-width: 0; }
.macro-row .macro-name { display: block; font-weight: 600; font-size: 0.925rem; line-height: 1.25; }
.macro-row .macro-period { display: block; font-size: 0.72rem; color: var(--bs-secondary-color); }
.macro-row-figures { grid-area: figures; text-align: right; white-space: nowrap; }
.macro-row .macro-latest { display: block; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.macro-row .macro-chg { display: block; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.macro-table .macro-period { font-size: 0.8rem; color: var(--bs-secondary-color); }
.macro-table .macro-latest { font-weight: 700; }
.macro-chg-label, .macro-vs-label { font-size: 0.68rem; color: var(--bs-secondary-color); font-weight: 400; }
.macro-arrow { font-size: 0.65rem; vertical-align: 0.1em; }
.tone-good { color: var(--macro-good); }
.tone-bad { color: var(--macro-bad); }
.tone-neutral { color: inherit; }
.macro-row-spark { grid-area: spark; display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin-top: 0.15rem; }
/* The SVG is drawn 320 wide and stretched to the row (preserveAspectRatio
   none, set by macro_view); non-scaling strokes keep the line the same
   weight whatever the stretch. */
.macro-row-spark .sparkline { flex: 1 1 auto; width: 100%; height: 40px; min-width: 0; color: var(--bs-body-color); opacity: 0.8; }
.macro-row-spark .sparkline polyline, .macro-row-spark .sparkline line { vector-effect: non-scaling-stroke; }
.macro-table-spark .sparkline polyline, .macro-table-spark .sparkline line { vector-effect: non-scaling-stroke; }
.macro-vs {
  flex: 0 0 auto; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}

/* Level shading: the row's own percentile, blue high and orange low, in
   eleven steps so no inline style is needed. */
.ind-heat.ind-high.heat-10 { background-color: rgba(42,120,214,0.55); } .ind-heat.ind-high.heat-9 { background-color: rgba(42,120,214,0.49); }
.ind-heat.ind-high.heat-8 { background-color: rgba(42,120,214,0.44); } .ind-heat.ind-high.heat-7 { background-color: rgba(42,120,214,0.38); }
.ind-heat.ind-high.heat-6 { background-color: rgba(42,120,214,0.33); } .ind-heat.ind-high.heat-5 { background-color: rgba(42,120,214,0.27); }
.ind-heat.ind-high.heat-4 { background-color: rgba(42,120,214,0.22); } .ind-heat.ind-high.heat-3 { background-color: rgba(42,120,214,0.16); }
.ind-heat.ind-high.heat-2 { background-color: rgba(42,120,214,0.11); } .ind-heat.ind-high.heat-1 { background-color: rgba(42,120,214,0.05); }
.ind-heat.ind-low.heat-10 { background-color: rgba(235,104,52,0.55); } .ind-heat.ind-low.heat-9 { background-color: rgba(235,104,52,0.49); }
.ind-heat.ind-low.heat-8 { background-color: rgba(235,104,52,0.44); } .ind-heat.ind-low.heat-7 { background-color: rgba(235,104,52,0.38); }
.ind-heat.ind-low.heat-6 { background-color: rgba(235,104,52,0.33); } .ind-heat.ind-low.heat-5 { background-color: rgba(235,104,52,0.27); }
.ind-heat.ind-low.heat-4 { background-color: rgba(235,104,52,0.22); } .ind-heat.ind-low.heat-3 { background-color: rgba(235,104,52,0.16); }
.ind-heat.ind-low.heat-2 { background-color: rgba(235,104,52,0.11); } .ind-heat.ind-low.heat-1 { background-color: rgba(235,104,52,0.05); }
.ind-heat.heat-0 { background-color: var(--bs-tertiary-bg); }

.macro-notes { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.75rem; }

/* The desktop table. No scroll box of its own (a scroll container would
   pin the sticky header to the box, not the page); the header sticks to
   the top of the window on a dark band. */
.macro-table-wrap { overflow: visible; }
.macro-table { font-size: 0.875rem; }
.macro-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #111; color: #fff; border-bottom: 0;
}
[data-bs-theme="dark"] .macro-table thead th { background: #000; }
.macro-table td, .macro-table th { font-variant-numeric: tabular-nums; }
.macro-table-theme { display: block; font-size: 0.72rem; color: var(--bs-secondary-color); }
.macro-table-spark { width: 12rem; }
.macro-table-spark .sparkline { width: 11rem; height: 28px; color: var(--bs-body-color); opacity: 0.8; }
.macro-table-takeaway { width: 26rem; max-width: 26rem; vertical-align: top; font-size: 0.8rem; line-height: 1.35; border-left: 1px solid var(--bs-border-color); }
.macro-table-takeaway .macro-theme-takeaway { margin: 0; font-size: inherit; }
.macro-table-takeaway .brief-bullets { font-size: 0.78rem; }
.macro-table tr.macro-table-theme-start > td { border-top: 2px solid var(--bs-border-color); }

/* The modal. */
.modal-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.modal-pill-change { font-size: 0.72rem; color: inherit; opacity: 0.8; }
.macro-pill-smooth { margin-left: auto; }
.modal-chart-box { position: relative; height: 42vh; min-height: 14rem; }
.modal-chart-note { font-size: 0.75rem; color: var(--bs-secondary-color); margin: 0.4rem 0 0.6rem; }
.modal-with { font-size: 0.8rem; color: var(--bs-secondary-color); margin: -0.25rem 0 0.5rem; }
.modal-reading { font-size: 0.95rem; margin-bottom: 0.4rem; }
.modal-compare { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.75rem; }
.modal-add { width: auto; max-width: 14rem; font-size: 0.8rem; padding-top: 0.2rem; padding-bottom: 0.2rem; border-radius: 999px; }
.modal-guide { margin-bottom: 0.75rem; }
.modal-guide p { font-size: 0.9rem; margin: 0; line-height: 1.45; color: var(--bs-body-color); }
.modal-series-note { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 0.5rem !important; }
.modal-ask { margin-top: 1rem; }
/* Bootstrap keeps its light-mode blue on a dark background (3.4:1); its own
   dark-mode text blue reads at 6.4:1. */
[data-bs-theme="dark"] .modal-ask .btn-outline-primary {
  --bs-btn-color: #6ea8fe; --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-bg: #6ea8fe; --bs-btn-hover-border-color: #6ea8fe; --bs-btn-hover-color: #212529;
}

/* The assistant. */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1040;
  border: 0; border-radius: 999px; padding: 0.85rem 1.4rem; font-weight: 700; font-size: 1rem;
  background: var(--bs-primary); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  white-space: nowrap;
}
@media (min-width: 992px) {
  .chat-fab { right: 24px; bottom: 24px; padding: 1rem 1.6rem; font-size: 1.05rem; }
}
.chat-panel { width: 100%; max-width: 100%; }
@media (min-width: 992px) {
  .chat-panel { width: 400px; max-width: 400px; }
}
.chat-body { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.5rem; }
.chat-thread { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.chat-thread:empty { flex: 1 1 auto; }
.chat-msg { max-width: 92%; padding: 0.5rem 0.7rem; border-radius: 0.75rem; font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap; }
.chat-msg-user { align-self: flex-end; background: var(--bs-primary); color: #fff; border-bottom-right-radius: 0.2rem; }
.chat-msg-assistant { align-self: flex-start; background: var(--bs-tertiary-bg); border-bottom-left-radius: 0.2rem; }
.chat-msg-system { align-self: center; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 0.8rem; text-align: center; }
.chat-suggestions { display: flex; flex-direction: column; gap: 0.35rem; }
.chat-hint { font-size: 0.75rem; color: var(--bs-secondary-color); margin: 0; }
.chat-suggestion { text-align: left; font-size: 0.85rem; padding: 0.45rem 0.7rem; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-body-bg); color: var(--bs-body-color); }
.chat-suggestion:hover { background: var(--bs-tertiary-bg); }
.chat-form { display: flex; gap: 0.4rem; align-items: flex-end; position: sticky; bottom: 0; background: var(--bs-body-bg); padding-top: 0.25rem; }
.chat-form textarea { resize: none; font-size: 0.9rem; }
.chat-foot { font-size: 0.75rem; text-align: right; }

/* Working: three pulsing dots in the answer's bubble until the first
   words arrive, and a busy Send button. */
.chat-dots { display: inline-flex; gap: 0.25rem; align-items: center; height: 1.2em; }
.chat-dots span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--bs-secondary-color); opacity: 0.4; animation: chat-pulse 1.2s infinite ease-in-out; }
.chat-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-pulse { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.chat-send-busy { display: none; width: 0.9rem; height: 0.9rem; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; animation: chat-spin 0.8s linear infinite; }
#chatSend.busy .chat-send-label { display: none; }
#chatSend.busy .chat-send-busy { display: inline-block; }
@keyframes chat-spin { to { transform: rotate(360deg); } }

/* A rating under an answer. */
.chat-rate { display: flex; gap: 0.35rem; align-self: flex-start; margin-top: -0.25rem; }
.chat-rate button { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.5rem; }
.chat-rate button.chosen { background: var(--bs-body-color); color: var(--bs-body-bg); border-color: var(--bs-body-color); }
.chat-msg-feedback { align-self: flex-end; background: var(--bs-secondary-bg); color: var(--bs-body-color); border-bottom-right-radius: 0.2rem; }

/* Cloudflare's check in the chat panel: shown only when it needs a click. */
.chat-turnstile { margin: 0.25rem 0 0.5rem; min-height: 0; }