/* summary.css — the forecast page's "Forecast summary" panel (182).
 *
 * Built on the AI briefing card's grammar (assistant.css) so the two cards read as siblings: the same 3 px accent
 * whisper along the top, the same 24 px spark, the same small-caps section labels (.ai-track-t), the same bordered
 * #fbfcff blocks (.ai-body / .ai-evnote), the same pills (.ai-pill bull / bear / neut) and the same muted footnote
 * (.ai-foot). Everything sits on the page tokens (--card, --ink, --muted, --line, --accent, --accent2); the few tints
 * assistant.css hard-codes are local tokens here with a dark set under html[data-theme="dark"] (the ads.css pattern), so
 * a future dark theme flips the panel without touching this file. No fonts of its own, no external assets: the two
 * glyphs are inline SVG masks that take the text colour. One numeric style: tabular figures, primary values 15 px,
 * secondary 12.5 px, never wrapped mid-number (a value that does not fit beside its label drops under it, right-aligned).
 */

.side.fs{
  --fs-block:#fbfcff; --fs-block-line:#e2e6f2; --fs-sub:#45506a; --fs-foot:#9aa3b8; --fs-track:#e7eaf3;
  --fs-band:rgba(99,102,241,.16); --fs-band-line:rgba(99,102,241,.38);
  --fs-bull-bg:#e8f9f1; --fs-bull-ink:#0f7b53; --fs-bull-line:#b6ebd4;
  --fs-bear-bg:#fdecef; --fs-bear-ink:#b3213c; --fs-bear-line:#f8c9d3;
  --fs-neut-bg:#eef1f8; --fs-neut-ink:#4a5570; --fs-neut-line:#dde2ee;
  position:relative;overflow:hidden;padding:20px 22px 18px;
}
html[data-theme="dark"] .side.fs{
  --fs-block:#171c30; --fs-block-line:#2a3252; --fs-sub:#c3c9e6; --fs-foot:#8d97bf; --fs-track:#2a3252;
  --fs-band:rgba(139,140,255,.22); --fs-band-line:rgba(139,140,255,.5);
  --fs-bull-bg:#11302a; --fs-bull-ink:#5fe3b1; --fs-bull-line:#1d4d40;
  --fs-bear-bg:#3a1a24; --fs-bear-ink:#ff8aa3; --fs-bear-line:#5c2634;
  --fs-neut-bg:#222a45; --fs-neut-ink:#c3c9e6; --fs-neut-line:#343d60;
}
.side.fs::before{             /* the same whisper of accent along the top as the AI card */
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 72%);
}

/* head — the AI card's head, one line */
.fs-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.side.fs .fs-head h3{font-size:14px;font-weight:700;letter-spacing:.2px;margin:0;min-width:0}
.fs-spark{
  width:24px;height:24px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.32);
}
.fs-spark svg{width:13px;height:13px;display:block}
.fs-when{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* blocks — bordered, like .ai-body / .ai-evnote */
.fs-block{border:1px solid var(--fs-block-line);border-radius:12px;background:var(--fs-block);padding:8px 11px 9px;margin-top:8px}
.fs-block:first-of-type{margin-top:0}
.fs-label{
  display:flex;align-items:baseline;gap:8px;margin:0 0 3px;
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
}
.fs-label small{font-size:11px;font-weight:600;letter-spacing:.1px;text-transform:none;opacity:.85}

/* rows — label left, value right; a value that does not fit drops under the label, never wraps inside */
.fs-grid{display:flex;flex-direction:column}
.fs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;padding:5px 0;border-top:1px solid var(--line)}
.fs-row:first-child{border-top:0;padding-top:2px}
.fs-row:last-child{padding-bottom:2px}
.fs-k{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.35;min-width:0;display:inline-flex;align-items:center;gap:5px}
.fs-v{
  margin-left:auto;min-width:0;text-align:right;line-height:1.35;white-space:nowrap;
  font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:7px;
}
.fs-v.fs-sec{font-size:12.5px;font-weight:600;color:var(--fs-sub);letter-spacing:0}
.fs-v.fs-dim{color:var(--muted)}
.fs-row.help{cursor:help}
.fs-k.help::after{             /* a quiet "i" after a label that carries a tooltip (replaces the dotted underline) */
  content:"";width:11px;height:11px;flex:0 0 auto;opacity:.5;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='5.1' r='1'/%3E%3Crect x='7.2' y='7' width='1.6' height='4.6' rx='.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='5.1' r='1'/%3E%3Crect x='7.2' y='7' width='1.6' height='4.6' rx='.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.side.fs .live-dot{margin-left:0}

/* pills — .ai-pill, the AI card's colours: up (bull), dn (bear), flat (neut), none (no reading) */
.fs-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;line-height:1.3;border:1px solid transparent;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.fs-pill.up{background:var(--fs-bull-bg);color:var(--fs-bull-ink);border-color:var(--fs-bull-line)}
.fs-pill.dn{background:var(--fs-bear-bg);color:var(--fs-bear-ink);border-color:var(--fs-bear-line)}
.fs-pill.flat{background:var(--fs-neut-bg);color:var(--fs-neut-ink);border-color:var(--fs-neut-line)}
.fs-pill.none{background:transparent;color:var(--muted);border-color:var(--line)}
.fs-pill[hidden]{display:none}

/* the range bar — anchor, expected close and the 80% end interval on one scale */
.fs-bar{margin:4px 0 1px}
.fs-bar[hidden]{display:none}
.fs-bar-track{position:relative;height:10px;border-radius:999px;background:var(--fs-track);margin:8px 7px 0}
.fs-bar-band{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--fs-band);box-shadow:inset 0 0 0 1px var(--fs-band-line)}
.fs-bar-anchor{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;border-radius:1px;background:var(--muted)}
.fs-bar-close{
  position:absolute;top:-2px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card);box-shadow:0 1px 4px rgba(99,102,241,.45);
}
.fs-bar-scale{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.fs-bar-scale span{white-space:nowrap}
.fs-bar-key{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:5px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.fs-bar-key span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fs-bar-key b{font-weight:700;color:var(--fs-sub)}
.fs-bar-key i{display:inline-block;flex:0 0 auto}
.fs-bar-key .k-anchor{width:2px;height:11px;background:var(--muted);border-radius:1px}
.fs-bar-key .k-close{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fs-bar-key .k-band{width:14px;height:8px;border-radius:999px;background:var(--fs-band);box-shadow:inset 0 0 0 1px var(--fs-band-line)}

/* "Reaches within 48 h" — a 2×2 mini table: level / 48 h / 24 h for the move up and down */
.fs-reach{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.fs-reach[hidden]{display:none}
.fs-reach-t{width:100%;border-collapse:collapse;table-layout:fixed}
.fs-reach-t col.c-h{width:52px}
.fs-reach-t th{
  padding:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--muted);
  text-align:right;white-space:nowrap;vertical-align:bottom;
}
.fs-reach-t th:first-child{text-align:left;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none}
.fs-reach-t td{
  padding:4px 0 3px;border-top:1px dashed var(--line);text-align:right;white-space:nowrap;
  font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}
.fs-reach-t td:first-child{text-align:left;font-size:12.5px;font-weight:600;color:var(--fs-sub);overflow:hidden;text-overflow:ellipsis}
.fs-reach-t td:first-child b{display:inline-block;min-width:46px;margin-right:8px;font-weight:800;color:var(--ink)}
.fs-reach-t td:first-child b.up{color:var(--fs-bull-ink)}
.fs-reach-t td:first-child b.dn{color:var(--fs-bear-ink)}

/* the footnote — .ai-foot with an info glyph; the text is set with textContent, the glyph is a pseudo-element */
.fs-foot{
  display:flex;gap:7px;align-items:flex-start;margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:10.8px;line-height:1.6;color:var(--fs-foot);
}
.fs-foot::before{
  content:"";flex:0 0 auto;width:13px;height:13px;margin-top:2px;background:currentColor;opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='5.1' r='1'/%3E%3Crect x='7.2' y='7' width='1.6' height='4.6' rx='.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='5.1' r='1'/%3E%3Crect x='7.2' y='7' width='1.6' height='4.6' rx='.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* narrow screens — the board is one column under 1040 px; the panel keeps its grammar at phone width */
@media(max-width:1040px){
  .side.fs{padding:18px 20px 16px}
}
@media(max-width:700px){
  .side.fs{padding:16px 15px 14px}
  .fs-block{padding:8px 10px 8px}
  .fs-v{font-size:14.5px}
  .fs-when{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .side.fs *,.side.fs *::before{transition:none !important;animation:none !important}
}

/* 189: upsell cards for plans without the AI briefing (market theme teaser under the chart + briefing card) */
.up-card{position:relative;overflow:hidden;padding:18px 22px}
.up-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),transparent 72%)}
.up-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.up-head h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.up-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;font-size:15px}
.up-lock{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);background:rgba(99,91,255,.08);border:1px solid rgba(99,91,255,.18);padding:3px 10px;border-radius:999px;white-space:nowrap}
.up-teaser{font-size:15px;font-weight:700;color:var(--ink);margin:2px 0 10px;line-height:1.45}
.up-blur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px;filter:blur(2.5px);opacity:.75;user-select:none}
.up-blur div{padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:#fbfcff}
.up-blur b{display:block;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:#7c88a1;margin-bottom:6px}
.up-blur span{display:block;height:8px;border-radius:4px;background:#dfe5f1;margin:5px 0}.up-blur span+span{width:70%}
.up-x{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:#45506a}
.up-cta{display:inline-block;font-weight:700;font-size:14px;color:#fff;background:var(--accent);padding:9px 16px;border-radius:10px;text-decoration:none}
.up-cta:hover{filter:brightness(1.06)}
.up-theme .up-cta{align-self:flex-start;width:max-content;max-width:100%}
.up-ai{margin-top:20px}.up-row{display:flex;align-items:center;gap:18px}.up-row .up-x{margin:0;flex:1}
.board > .up-theme{margin:0;grid-column:1;min-width:0}
@media(min-width:1041px){
  /* 200: the chart card keeps the first row and stretches with it (the chart grows, style.css), the teaser takes the
     second row at its own height; the summary spans both, so the cards end on one line */
  .board:has(> .up-theme){grid-template-rows:1fr auto}
  .board:has(> .up-theme) > #summary{grid-column:2;grid-row:1 / span 2;align-self:stretch}
  .board > .up-theme{grid-row:2;align-self:start}
}
@media(max-width:620px){.up-row{flex-direction:column;align-items:flex-start}.up-blur{grid-template-columns:1fr}.up-card{padding:15px}}