/* PROJECT MAGNETO — APP NEXT · "Your Magneto" home (DO-02; design work copy, never deployed from here)
   Composes AROUND the OSINT band (map/map.css + map/map.js are untouched). Palette = this app's tokens
   (index.html :root / html.light) + the map's --om-* tokens. Colour only from tokens; glow on DATA only (never on chrome);
   logical properties everywhere (the page mirrors in Hebrew; figures and charts do not).
   Motion: transform/opacity only, emil-design-eng's curves verbatim, UI < 300 ms, drawers 250–500 ms, no infinite loops. */
:root {
  --hm-gap: 16px; --hm-pad: 16px; --hm-r: 14px;
  --hm-hd-h: 52px;
  --hm-sit-h: 0px;
  --hm-line: color-mix(in srgb, var(--border-default) 38%, transparent);
  --hm-card: var(--bg-surface);
  --hm-tile: color-mix(in srgb, var(--bg-elevated) 42%, transparent);
  --hm-crit-bg: color-mix(in srgb, var(--down) 15%, var(--bg-surface));
  --hm-crit-line: color-mix(in srgb, var(--down) 55%, transparent);
  --hm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hm-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
html.light {
  --hm-tile: color-mix(in srgb, var(--bg-deeper) 38%, var(--bg-surface));
  --hm-crit-bg: color-mix(in srgb, var(--down) 9%, var(--bg-surface));
}
/* NEXT-FEED (2026-11-03): THE RED SCALE, three tiers kept apart on purpose.
     EXTREME CRITICAL INTEREST  = a solid red row (MGCard .mgx, shell/shell.css) — untouched
   > a FRESH High/Critical alert in the Critical-now rail = a strong tint (the rail owns it; --hm-crit-bg above is the existing strong step)
   > an OSINT row in the feed = the faint, permanent tint below (+ a 2px accent). A CRITICAL OSINT row keeps its own, stronger .crit paint.
   The other tiers may reference these three variables; the "Cerebro OSINT" pill and the interest chips are not restyled. */
:root { --hm-osint-bg: color-mix(in srgb, var(--down) 8%, var(--bg-surface)); --hm-osint-bar: var(--down); --hm-osint-bar-w: 2px; }
html.light { --hm-osint-bg: color-mix(in srgb, var(--down) 6%, var(--bg-surface)); }
@media (max-width: 720px) { :root { --hm-hd-h: 56px; --hm-gap: 14px; } }

.hm :focus-visible, .hm-layer :focus-visible, .hm-hd :focus-visible { border-radius: 8px; }
/* the .btn / chip rules set display, which beats the UA [hidden]; make hidden mean hidden */
.hm [hidden], .hm-layer [hidden], .hd [hidden] { display: none !important; }
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; letter-spacing: -0.01em; }
.hm-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-ico.fill { fill: currentColor; stroke: none; }
[dir="rtl"] .hm-ico.flip { transform: scaleX(-1); }

/* ── the page-level title row (always first; the band sits right under it) ───────────────────────────── */
.hm-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: var(--hm-hd-h); padding: 8px var(--gutter) 0; }
.hm-h1 { margin: 0; line-height: 1.05; font-weight: 800; letter-spacing: 0; color: inherit; }
.hm-wm { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.hm-wm-1 { font-family: 'Inter', var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--text-tertiary); }
.hm-wm-2 { font-family: 'Inter', var(--font-sans); font-size: 15px; font-weight: 800; letter-spacing: .24em; color: var(--mark-ink); }
.hm-wm-2 b { font-weight: 800; background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.light .hm-wm-2 b { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }
.hm-sample { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent) inset; white-space: nowrap; }
.hm-sample i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hm-sample .fig { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--warn); }
/* K: under a live session the same chip reads LIVE (green; amber when the last read is stale) */
.hm-sample.is-live { color: var(--up); background: var(--up-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 45%, transparent) inset; }
.hm-sample.is-live .fig { color: var(--up); }
.hm-sample.is-live.is-stale { color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent) inset; }
.hm-sample.is-live.is-stale .fig { color: var(--warn); }
.hm-sample .hm-st { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hm-hint { flex: 1 1 260px; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.hm-hd-act { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
/* "Done" (pressed) — specificity above index.html's .btn.gold:hover, which is declared later and would paint accent on accent */
.hm-hd .btn.gold[aria-pressed="true"], .hm-hd .btn.gold[aria-pressed="true"]:hover { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.hm-hd .btn.gold[aria-pressed="true"]:hover { background: var(--accent-2); }
.hm-hd .btn:active, .hm .btn:active { transform: scale(.97); }
@media (max-width: 720px) {
  .hm-hd { padding-top: 8px; row-gap: 4px; }
  .hm-hd .btn { height: 40px; }
  .hm-hint { order: 5; flex-basis: 100%; padding-bottom: 6px; }
}
/* the band's own expand rule fills "canvas − header"; the title row now sits above it, so subtract it too (the band itself is unchanged) */
.omap.is-expanded .om-band { height: calc(100dvh - var(--header-h) - var(--hm-hd-h) - var(--hm-sit-h, 0px) - 24px); }
@media (max-width: 720px) { .omap.is-expanded .om-band { height: calc(100dvh - var(--header-h) - var(--hm-hd-h) - var(--hm-sit-h, 0px) - 8px); } }

/* ── the one situation row, directly under Cerebro OSINT and above the map ─ */
.hm-sit-slot:empty { display: none; }
.hm-sit { --sit-ink: #1a1408; --sit-fill: #E8B04A; --sit-wash: rgba(232, 176, 74, .16); --sit-line: rgba(232, 176, 74, .72);
  display: flex; align-items: stretch; gap: 0; margin: 10px var(--gutter) 0; border-radius: 12px; overflow: hidden;
  background: var(--sit-wash); box-shadow: 0 0 0 1px var(--sit-line); }
.hm-sit.is-critical { --sit-ink: #fff7f6; --sit-fill: #E11D2E; --sit-wash: rgba(225, 29, 46, .18); --sit-line: rgba(225, 29, 46, .8); }
html.light .hm-sit.is-critical { --sit-fill: #9F1239; --sit-wash: rgba(159, 18, 57, .10); --sit-line: rgba(159, 18, 57, .55); --sit-ink: #fff7f6; }
.hm-sit-k { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--sit-fill); color: var(--sit-ink);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hm-sit-lamp { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 28%, transparent); }
.hm-sit-main { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; padding-inline-end: 10px; }
.hm-sit-b { flex: 1 1 auto; min-width: 0; padding: 10px 0 11px 14px; }
/* the mark's own plate: navy field, aurora ring, aurora word — the header wordmark, as a control */
.hm-sit-ack { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  background: linear-gradient(#071426, #071426) padding-box, var(--aurora) border-box;
  color: #f6e3b0; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(4, 12, 24, .28); }
.hm-sit-ack span { background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hm-sit-ack:hover { background: linear-gradient(#102444, #102444) padding-box, var(--aurora) border-box; }
.hm-sit-ack:active { transform: scale(.97); }
.hm-sit-ack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-sit-t { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; letter-spacing: -0.011em; color: var(--text-primary); }
.hm-sit-m { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hm-sit-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px var(--gutter) 0; }
.hm-sit-lab-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.hm-sit-lab-s { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hm-sit-lab-b { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 0 0 1px var(--border-default); }
.hm-sit-lab-b[aria-pressed="true"] { color: var(--text-primary); background: var(--bg-elevated); box-shadow: 0 0 0 1px var(--border-strong); }
.hm-sit-note { flex: 1 1 220px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-tertiary); }
/* the EXTREME banner (packet NEXT): the newest broadcast EXTREME CRITICAL INTEREST card not yet acknowledged on this device.
   Solid red like the EXTREME row (shell/shell.css --mgx-*), the chip carries the lane, the headline opens the card on the map. */
.hm-xb { display: flex; flex-direction: column; gap: 8px; margin: 10px var(--gutter) 0; padding: 12px 14px; border-radius: 12px;
  background: var(--mgx-fill, #8E0B1E); color: var(--mgx-ink, #FFF7F6); box-shadow: 0 0 0 2px var(--mgx-line, #FF6B7A) inset, 0 10px 26px rgba(80, 4, 16, .35); }
.hm-xb-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hm-xb-t { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mgx-ink, #FFF7F6); }
.hm-xb-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-xb-h { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: 15px; font-weight: 800; line-height: 1.35; letter-spacing: -0.011em; color: var(--mgx-ink, #FFF7F6); }
.hm-xb-h:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-xb-h:focus-visible { outline: 2px solid var(--mgx-ink, #FFF7F6); outline-offset: 2px; border-radius: 6px; }
.hm-xb .hm-sit-ack:focus-visible { outline-color: var(--mgx-ink, #FFF7F6); }
@media (max-width: 720px) {
  .hm-sit { flex-direction: column; }
  .hm-sit-k { min-height: 36px; }
  .hm-sit-main { width: 100%; }
  .hm-sit-ack { height: 36px; }
  .hm-sit-lab-b { height: 36px; }
  .hm-xb-main { flex-direction: column; align-items: stretch; }
  .hm-xb-ack { align-self: flex-start; }
}

/* ── the composable canvas: a flex-wrap 12-column flow; each widget grows to fill its row ─────────────── */
.home { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hm-gap); padding: 0 var(--gutter) 40px; }
.wg { --span: 12; position: relative; min-width: min(100%, 320px);
  flex: 1 1 calc((100% - 11 * var(--hm-gap)) * var(--span) / 12 + (var(--span) - 1) * var(--hm-gap)); }
.home > .wg:first-child:not(.wg-map) { margin-top: 12px; }
/* the band is full-bleed to the gutters: it keeps its own padding (map.css .omap), so the wrapper grows into the home's padding */
.wg-map { flex: none; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(var(--gutter) * -1); min-width: 0; }
.wg[data-on="0"] { display: none; }
@media (max-width: 720px) { .wg:not(.wg-map) { flex-basis: 100%; min-width: 0; } }

/* edit mode: every widget carries a bar (on/off · up · down); its body is inert and dimmed */
.wg-bar { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px; padding-inline-start: 12px; margin-bottom: 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-surface)); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.home.is-editing .wg-bar { display: flex; }
.wg-map .wg-bar { margin-inline: var(--gutter); margin-top: 12px; margin-bottom: 0; }
.wg-bar .nm { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-bar .st { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.wg-bar .mvb { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset;
  transition: color 140ms ease, background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.wg-bar .mvb:active:not([aria-disabled="true"]) { transform: scale(.94); }
.wg-bar .mvb[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) { .wg-bar .mvb:hover:not([aria-disabled="true"]) { color: var(--text-primary); background: var(--bg-hover); } }
.sw { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); box-shadow: 0 0 0 1px var(--border-default) inset;
  transition: background-color 160ms ease, box-shadow 160ms ease; }
.sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); transition: transform 160ms var(--hm-ease-out), background-color 160ms ease; }
.sw[aria-checked="true"] { background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.sw[aria-checked="true"]::after { background: var(--accent); transform: translateX(16px); }
[dir="rtl"] .sw[aria-checked="true"]::after { transform: translateX(-16px); }
.home.is-editing .wg { outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 5px; border-radius: 12px; }
.home.is-editing .wg-map { outline: 0; }
.home.is-editing .wg-body { opacity: .8; pointer-events: none; user-select: none; }   /* .8, not lower: dimmed text must still clear 4.5:1 */
.home.is-editing .wg[data-on="0"] { display: block; flex-basis: 100%; }
.home.is-editing .wg[data-on="0"] .wg-body { display: none; }
.home.is-editing .wg[data-on="0"] .wg-bar { background: transparent; box-shadow: 0 0 0 1px var(--border-subtle) inset; border: 0; }
.home.is-editing .wg[data-on="0"] .wg-bar .nm { color: var(--text-secondary); font-weight: 600; }
.hm-empty { flex: 1 1 100%; padding: 36px 20px; text-align: center; border-radius: var(--hm-r); box-shadow: 0 0 0 1px var(--border-subtle) inset; color: var(--text-secondary); }
.hm-empty strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
.hm-empty[hidden] { display: none; }

/* ── a widget card ───────────────────────────────────────────────────────────────────────────────────── */
.wg-card { border-radius: var(--hm-r); background: var(--hm-card); box-shadow: 0 0 0 1px var(--hm-line) inset; padding: var(--hm-pad); min-width: 0; }
.wg-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; min-height: 28px; }
.wg-h h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; color: var(--text-primary); }
.wg-h .meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-tertiary); }
.wg-h .meta .hm-ico { width: 13px; height: 13px; }
.wg-h .sp { flex: 1 1 0; }
.wg-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary);
  box-shadow: 0 0 0 1px var(--border-subtle) inset; transition: color 140ms ease, background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.wg-link:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .wg-link:hover { color: var(--text-primary); background: var(--bg-hover); } }

/* chips (the app's anatomy, same look as the band's drawer) */
.hm-int { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.hm-int.a1 { color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.hm-int.a2 { color: var(--info); background: var(--info-bg); }
.hm-int.a3 { color: var(--warn); background: var(--warn-bg); }
.hm-int.a4 { color: var(--down); background: var(--down-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 50%, transparent) inset; letter-spacing: .04em; }
.hm-dir { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset; white-space: nowrap; }
.hm-dir.bullish { color: var(--up); box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 45%, transparent) inset; background: var(--up-bg); }
.hm-dir.bearish { color: var(--down); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 45%, transparent) inset; background: var(--down-bg); }
.hm-dir.crit { color: var(--on-crit, var(--bg-deeper)); background: var(--down); box-shadow: none; letter-spacing: .04em; }
html.light .hm-dir.crit { --on-crit: #FFFCF8; }
.hm-dir .hm-ico { width: 11px; height: 11px; }
.hm-fam { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--info); background: var(--info-bg); white-space: nowrap; }
.hm-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.hm-tag.warn { color: var(--warn); background: var(--warn-bg); }
.hm-tag.crit { color: var(--down); background: var(--down-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 45%, transparent) inset; }
.hm-tag.you { color: var(--accent); background: var(--accent-bg); }
.hm-tag.live { color: var(--up); background: var(--up-bg); }
/* "SAMPLE · backend in Phase 3": the tag plus the words that say why */
.hm-chipn { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.hm-sn { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text-secondary); }
.hm-tag .hm-ico { width: 11px; height: 11px; }
.hm-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset; white-space: nowrap; }
.hm-badge .hm-ico { width: 13px; height: 13px; }
.hm-star { width: 12px; height: 12px; color: var(--accent); flex: none; }

/* generated marks: initials in a token-coloured disc (never a real logo) */
.mk { --mk-c: var(--info); flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--font-sans); letter-spacing: .02em; color: var(--text-primary);
  background: color-mix(in srgb, var(--mk-c) 24%, var(--bg-elevated)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk-c) 55%, transparent) inset; unicode-bidi: isolate; direction: ltr; }
.mk.m1 { --mk-c: var(--accent); } .mk.m2 { --mk-c: var(--up); } .mk.m3 { --mk-c: var(--warn); }
.mk.glyph .hm-ico { width: 16px; height: 16px; }
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.25px var(--text-tertiary) inset; }
.pips i.on { background: var(--text-primary); box-shadow: none; }

/* ── TODAY ───────────────────────────────────────────────────────────────────────────────────────────── */
.td-leg { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-secondary); }
.td-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.td-strip { display: flex; gap: 8px; overflow-x: auto; margin: -2px; padding: 2px 2px 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; list-style: none; }
/* 75% of the old card. The column does not shrink: a narrower box reflowed the title and the card grew taller. zoom keeps the old line breaks and paints the whole card smaller. 176px is the old filled width at the review size. */
.td-strip > li { display: flex; flex: 0 0 auto; min-width: 0; scroll-snap-align: start; zoom: 0.75; }
.td-strip > li.td-now { zoom: 1; flex: none; width: 2px; max-width: 2px; margin-inline: 3px; border-radius: 2px; background: var(--accent); opacity: .85; }
.td-strip > li:not(.td-now) > .ev { width: 176px; }
.ev { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 7px; text-align: start; padding: 12px; border-radius: 12px; background: var(--hm-tile); box-shadow: 0 0 0 1px var(--border-subtle) inset;
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 120ms var(--hm-ease-out); }
.ev:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .ev:hover { background: var(--bg-hover); box-shadow: 0 0 0 1px var(--border-default) inset; } }
.ev[data-tier="3"] { box-shadow: 0 0 0 1px var(--border-strong) inset; }
.ev[data-tier="3"] .ev-t { font-size: 15px; }
.ev-r1 { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ev-r1 .sym { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--text-primary); direction: ltr; unicode-bidi: isolate; }
.ev-r1 .sp { flex: 1; }
.ev-t { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--text-primary); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ev-s { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.ev-pv { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.ev-pv .fig { font-size: 12px; color: var(--text-primary); font-weight: 600; }
.hm-none { padding: 18px 4px 6px; font-size: 12.5px; color: var(--text-secondary); }
.ev-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.ev-st { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-secondary); padding-top: 7px; border-top: 1px solid var(--hm-line); }
.ev-st .fig, .ev-st .figx { font-size: 11.5px; color: var(--text-primary); font-weight: 600; }
.figx { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ev-cd { display: inline-flex; align-items: center; gap: 5px; }
.ev-cd .hm-ico { width: 13px; height: 13px; }
.ev.done .ev-t { color: var(--text-secondary); }
@media (max-width: 720px) {
  .td-strip { margin-inline: calc(var(--hm-pad) * -1); padding-inline: var(--hm-pad); scroll-padding-inline: var(--hm-pad); }
  .td-strip > li:not(.td-now) > .ev { width: min(76vw, 260px); }
}

/* ── MARKET PULSE (derived numbers only: change %, direction, never a price) ──────────────────────────── */
.pl-c { container-type: inline-size; container-name: pl; }
.pl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pl-z h3 { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 10px; }
@container pl (min-width: 900px) {
  .pl { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 0; }
  .pl-z { padding-inline: 20px; }
  .pl-z:first-child { padding-inline-start: 0; }
  .pl-z:last-child { padding-inline-end: 0; }
  .pl-z + .pl-z { border-inline-start: 1px solid var(--hm-line); }
}
.pl-reg { display: flex; align-items: center; gap: 10px; }
.pl-reg b { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: var(--text-primary); }
.pl-reg.down { color: var(--down); } .pl-reg.up { color: var(--up); } .pl-reg.flat { color: var(--warn); }
.pl-reg .hm-ico { width: 18px; height: 18px; }
.pl-reg.down b, .pl-reg.up b, .pl-reg.flat b { color: inherit; }
.pl-br { margin-top: 14px; }
.pl-br .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 7px; }
.pl-br .row .fig { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pl-bar { direction: ltr; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--down) 42%, transparent); }
.pl-bar i { display: block; height: 100%; background: var(--up); border-radius: 4px 0 0 4px; }
.pl-secs { list-style: none; display: grid; gap: 4px; }
.pl-sec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; }
.pl-sec .nm { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sec a.nm { text-decoration: none; color: inherit; }
.pl-sec .nm small { display: block; font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.pl-div { direction: ltr; position: relative; height: 10px; }
.pl-div::before { content: ""; position: absolute; inset-block: -3px; inset-inline-start: 50%; width: 1px; background: var(--border-default); }
.pl-div i { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.pl-div i.up { left: 50%; background: var(--up); border-radius: 0 3px 3px 0; }
.pl-div i.dn { right: 50%; background: var(--down); border-radius: 3px 0 0 3px; }
.pl-chg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; justify-content: flex-end; min-width: 70px; }
.pl-chg.up { color: var(--up); } .pl-chg.dn { color: var(--down); }
.pl-chg .hm-ico { width: 10px; height: 10px; }
.pl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pl-tile { padding: 11px 12px; border-radius: 10px; background: var(--hm-tile); box-shadow: 0 0 0 1px var(--border-subtle) inset; min-width: 0; }
.pl-tile .cd { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pl-tile .cd b { font: 700 11.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--text-primary); }
.pl-tile .cd small { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tile .v { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 21px; font-weight: 700; line-height: 1; }
.pl-tile .v.up { color: var(--up); } .pl-tile .v.dn { color: var(--down); } .pl-tile .v.flat { color: var(--text-secondary); }
.pl-tile .v .hm-ico { width: 12px; height: 12px; }
.pl-note { margin-top: 12px; font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }

/* Sector boxes + the market bar. Same structure as the classic radar, painted with this UI's tokens.
   The gauge spans both rows. A box is a short name, a signed percent, and a breadth bar.
   Phone: one swipe row. The market bar is one wrapping line under the strip. */
.sx-strip { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.sx-strip.sx-fit { display: grid; grid-template-rows: auto auto; gap: 6px; align-items: stretch; }
.sx-gauge { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 108px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--hm-tile); }
.sx-gauge b { font-size: 13px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.sx-gauge small { font-size: 10px; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.sx-gauge.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.sx-gauge.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.sx-gauge.flat { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.sx-gauge.pending { color: var(--text-tertiary); }
.sx-gbr { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text-tertiary) 22%, transparent); margin-top: 2px; }
.sx-gbr i { display: block; height: 100%; background: currentColor; }
button.sx-box { appearance: none; font: inherit; text-align: start; cursor: pointer; width: 100%; }
.sx-box { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 7px 6px 8px;
  border-radius: 8px; text-decoration: none; color: inherit; background: var(--hm-tile); border: 1px solid var(--border-subtle); }
.sx-box.up { border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.sx-box.down { border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.sx-box.flat { border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.sx-nm { font-size: 10px; font-weight: 650; line-height: 1.2; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-val { font: 700 12px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sx-val.up { color: var(--up); } .sx-val.down { color: var(--down); } .sx-val.flat { color: var(--text-primary); }
.sx-br { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text-tertiary) 18%, transparent); }
.sx-br i { display: block; height: 100%; border-radius: 2px; }
.sx-br i.up { background: var(--up); } .sx-br i.down { background: var(--down); } .sx-br i.flat { background: var(--warn); }
a.sx-mp { text-decoration: none; color: inherit; cursor: pointer; }
.sx-mp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; padding: 10px 12px;
  border-radius: 10px; background: var(--hm-tile); border: 1px solid var(--border-subtle); }
.sx-mp.up { border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.sx-mp.down { border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.sx-mp.flat { border-color: color-mix(in srgb, var(--warn) 36%, transparent); }
.sx-mp.pending { color: var(--text-tertiary); }
.sx-mpt { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--text-secondary); white-space: nowrap; }
.sx-tape { font-size: 9px; font-weight: 800; letter-spacing: .05em; border-radius: 999px; padding: 2px 7px; border: 1px solid; }
.sx-tape.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.sx-tape.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.sx-tape.flat { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.sx-split { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sx-split .up { color: var(--up); } .sx-split .down { color: var(--down); }
.sx-split .arr { font-size: 8px; margin-inline: 2px; }
.sx-split .net { font-family: var(--font-mono); font-size: 11px; }
.sx-split .net.up, .sx-st .v.up { color: var(--up); }
.sx-split .net.down, .sx-st .v.down { color: var(--down); }
.sx-split .net.flat, .sx-st .v.flat { color: var(--warn); }
.sx-mpbar { flex: 1 1 140px; min-width: 96px; max-width: 240px; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--down) 50%, transparent); }
.sx-mpbar i { display: block; height: 100%; background: var(--up); }
.sx-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; min-width: 0; }
.sx-st .k { color: var(--text-tertiary); }
.sx-st .v { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.sx-mini { flex: 1 1 36px; min-width: 28px; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text-tertiary) 18%, transparent); }
.sx-mini i { display: block; height: 100%; background: var(--accent, var(--up)); }
.sx-minirow { flex: 1 1 150px; max-width: 220px; }
.sx-tag { font-size: 8px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 1px 6px; border: 1px solid; }
.sx-tag.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.sx-tag.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.sx-tag.flat { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.sx-note { font-size: 12px; font-weight: 650; color: var(--text-tertiary); }
@media (max-width: 720px) {
  .sx-strip, .sx-strip.sx-fit { display: flex; overflow-x: auto; grid-template-columns: none !important; padding-bottom: 4px; }
  .sx-gauge { grid-row: auto; flex: 0 0 132px; }
  .sx-box { flex: 0 0 84px; }
}

/* ── YOUR FEED (the app's card anatomy: Ticker · source | Signal type | Interest level | Direction | Why it hit the radar | Time) ── */
.fd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 11.5px; color: var(--text-tertiary); }
.fd-sub b { font-weight: 600; color: var(--text-secondary); margin-inline-end: 2px; }
.fd { container-type: inline-size; container-name: fd; }
.fd-list { list-style: none; display: grid; gap: 8px; }
.fd-head { display: none; }
.fd-row { position: relative; display: grid; gap: 8px 14px; padding: 12px 14px; border-radius: 12px; background: transparent; box-shadow: 0 0 0 1px var(--border-subtle) inset;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto auto auto; grid-template-areas: "tk sig int dir time" "why why why why why"; align-items: start; }
.fd-row.crit { background: var(--hm-crit-bg); box-shadow: 0 0 0 1px var(--hm-crit-line) inset; }
/* on the red row the chips keep their ring but not their own tint: a tint on a tint dropped them to 4.45:1 */
.fd-row.crit .hm-int.a4, .fd-row.crit .hm-tag.crit { background: transparent; }
.fd-row.hit { box-shadow: 0 0 0 2px var(--accent) inset; transition: box-shadow 200ms ease; }
.fd-row.crit::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--down); }
[dir="rtl"] .fd-row.crit::before { border-radius: 3px 0 0 3px; }
/* NEXT-FEED: an OSINT row — the faint tier of the red scale (tokens at the top of this file) */
.fd-row[data-fam="osint"]:not(.crit):not(.mgx) { background: var(--hm-osint-bg); }
.fd-row[data-fam="osint"]:not(.crit):not(.mgx)::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 0; width: var(--hm-osint-bar-w); border-radius: 0 2px 2px 0; background: var(--hm-osint-bar); }
[dir="rtl"] .fd-row[data-fam="osint"]:not(.crit):not(.mgx)::before { border-radius: 2px 0 0 2px; }
.c-tk { grid-area: tk; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }   /* flex-start = the INLINE start: left in English, right in Hebrew */
.c-tk .tk-g { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; direction: ltr; }   /* D2: symbol and company are one LTR group, so both start on the same edge */
.c-tk .sym { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.1 var(--font-mono); color: var(--text-primary); direction: ltr; unicode-bidi: isolate; }
.c-tk .hm-badge { align-self: flex-start; }
.c-tk .co { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-tk .fx { font-size: 11px; color: var(--text-tertiary); }
.c-sig { grid-area: sig; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.c-sig .kd { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.c-sig .sc { font-size: 11px; color: var(--text-tertiary); }
.c-sig .r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-int { grid-area: int; } .c-dir { grid-area: dir; }
.c-time { grid-area: time; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; white-space: nowrap; }
.c-time .fig { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.c-time small { font-size: 11px; color: var(--text-tertiary); }
.c-why { grid-area: why; min-width: 0; }
.fd-h { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.fd-h button { text-align: start; display: block; width: 100%; padding: 2px 0; border-radius: 6px; color: inherit; font: inherit; }
.fd-h button:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.fd-why { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-row.open .fd-why { display: block; -webkit-line-clamp: unset; }
.fd-more { margin-top: 8px; display: none; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-tertiary); }
.fd-row.open .fd-more { display: flex; }
.fd-pin { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.fd-en { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--border-subtle) inset; margin-inline-start: 6px; vertical-align: 1px; }
.fd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); }

/* How a feed alert opens. A preference, so the selected side is a raised chip, not a primary button. */
.fd-open { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.fd-open-k { font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.fd-open-s { display: inline-flex; align-items: center; padding: 2px; border-radius: 9px; background: var(--hm-tile); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.fd-open-s button { height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.fd-open-s button[aria-pressed="true"] { color: var(--text-primary); background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-default) inset; }
@media (hover: hover) and (pointer: fine) { .fd-open-s button:hover { color: var(--text-primary); } }
/* NEXT-FEED (2026-11-03): the feed filter — the classic's chip row in this app's own chips (the mode is the same segmented control as "Open") */
.fd-filter { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.fd-fm { display: inline-flex; align-items: center; flex: none; padding: 2px; border-radius: 9px; background: var(--hm-tile); box-shadow: 0 0 0 1px var(--border-subtle) inset; }
.fd-fm button { height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.fd-fm button[aria-pressed="true"] { color: var(--text-primary); background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-default) inset; }
.fd-locks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fd-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset; white-space: nowrap; }
.fd-chip .fig { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.fd-chip.is-sel { color: var(--text-primary); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.fd-chip.is-sel .fig { color: var(--text-secondary); }
.fd-chip.is-hid { color: var(--text-tertiary); background: transparent; }
.fd-chip.is-hid .fd-cl { text-decoration: line-through; text-decoration-thickness: 1px; }
.fd-chip.is-lock { color: var(--text-tertiary); background: color-mix(in srgb, var(--text-tertiary) 11%, transparent); cursor: not-allowed; }
.fd-chip.is-lock .hm-ico { width: 12px; height: 12px; }
.fd-chip[aria-disabled="true"]:not(.is-lock) { cursor: not-allowed; opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .fd-fm button:hover, .fd-chip:not(.is-lock):hover { color: var(--text-primary); }
  .fd-chip:not(.is-lock):not(.is-sel):hover { background: var(--bg-hover); }
}
.fd.is-ticket .fd-row { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .fd.is-ticket .fd-row:hover { background: var(--bg-hover); }
  .fd.is-ticket .fd-row.crit:hover { background: var(--hm-crit-bg); }
  .fd.is-ticket .fd-row[data-fam="osint"]:not(.crit):not(.mgx):hover { background: var(--hm-osint-bg); }   /* NEXT-FEED: the tint survives the hover */
}
.fd-row.is-reading, .fd.is-ticket .fd-row.is-reading:hover { box-shadow: 0 0 0 2px var(--accent) inset; }
.fd-row.crit.is-reading, .fd.is-ticket .fd-row.crit.is-reading:hover { box-shadow: 0 0 0 2px var(--down) inset; }

/* The alert card. Same drawer as Today: a side panel on the desk, a sheet on the phone. */
.hm-drawer.hm-tk { overflow: hidden; }
.hm-drawer.hm-tk::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); pointer-events: none; }
.hm-drawer.hm-tk.crit::before { background: var(--down); }
@media (min-width: 721px) { .hm-drawer.hm-tk { width: min(480px, calc(100vw - 24px)); } }
.hm-drawer.hm-pulse { overflow: hidden; }
@media (min-width: 721px) { .hm-drawer.hm-pulse { width: min(720px, calc(100vw - 24px)); } }
.sc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.sc-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--hm-tile); border: 1px solid var(--border-subtle); }
.sc-stat span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.sc-stat b { font: 700 14px/1.2 var(--font-mono); color: var(--text-primary); }
.sc-stat b.up { color: var(--up); } .sc-stat b.down { color: var(--down); } .sc-stat b.flat { color: var(--text-primary); }
.sc-all, .sc-back { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--hm-tile); color: inherit; font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.sc-back { justify-content: flex-start; color: var(--accent); }
.sc-count { font: 700 12px/1.2 var(--font-mono); color: var(--text-secondary); }
.sc-cap { margin: 4px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.sc-head, .sc-cat { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(72px, .9fr) minmax(52px, .6fr) minmax(64px, .6fr); gap: 8px; align-items: center; }
.sc-head { padding: 0 8px 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.sc-head span:not(:first-child), .sc-cat .sc-buy, .sc-cat .sc-n, .sc-cat .sc-g { text-align: end; }
.sc-cat { width: 100%; margin: 0 0 2px; padding: 8px; border-radius: 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; }
button.sc-cat { cursor: pointer; }
.sc-cat .sc-nm { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: normal; }
.sc-cat .sc-buy, .sc-cat .sc-n, .sc-cat .sc-g { font: 600 12px/1.2 var(--font-mono); color: var(--text-secondary); }
.sc-cat .sc-g.up { color: var(--up); } .sc-cat .sc-g.down { color: var(--down); }
.sc-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.sc-sub b { font-size: 15px; }
.sc-sub span { font-size: 12px; color: var(--text-secondary); }
.sc-head-n { grid-template-columns: 72px minmax(0, 1fr) 72px; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sc-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.sc-row:nth-child(odd) { background: color-mix(in srgb, var(--bg-elevated) 40%, transparent); }
.sc-sym { font: 700 12px/1.2 var(--font-mono); color: var(--text-primary); text-decoration: none; direction: ltr; unicode-bidi: isolate; }
a.sc-sym:hover { text-decoration: underline; }
.sc-co { min-width: 0; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.sc-chg { font: 700 12px/1.2 var(--font-mono); text-align: end; direction: ltr; unicode-bidi: isolate; }
.sc-chg.up { color: var(--up); } .sc-chg.down { color: var(--down); } .sc-chg.flat { color: var(--text-secondary); }
.sc-note, .sc-none { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
@media (hover: hover) and (pointer: fine) {
  button.sx-box:hover, a.sx-mp:hover, button.sc-cat:hover, .sc-all:hover, .sc-back:hover { background: var(--bg-hover); }
}
@media (max-width: 720px) { .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-drawer.hm-tk .hm-ph .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-eye { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.tk-sym { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.tk-tkr { font: 800 22px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--text-primary); direction: ltr; unicode-bidi: isolate; }
.tk-co { font-size: 13.5px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; }
.tk-sec { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); }
.tk-h { margin-top: 12px; font-size: 18px; line-height: 1.35; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); overflow-wrap: anywhere; outline: none; }
.tk-h .hm-tag, .tk-h .fd-en { vertical-align: 2px; margin-inline-end: 8px; }
.tk-h:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }
.tk-chips { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-dirw { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.tk-basis { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.tk-basis b { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-inline-end: 6px; }
.tk-prose { font-size: 14.5px; line-height: 1.65; color: var(--text-primary); }
.tk-prose p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.tk-prose p + p { margin-top: .85em; }
.tk-note { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); overflow-wrap: anywhere; }
.tk-lk { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-lk a.hm-badge { color: var(--text-secondary); text-decoration: none; }
.tk-act { margin-top: 18px; }
.tk-go { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-primary); text-decoration: none; background: var(--hm-tile); box-shadow: 0 0 0 1px var(--border-default) inset; }
@media (hover: hover) and (pointer: fine) {
  .tk-go:hover { background: var(--bg-hover); }
  .tk-lk a.hm-badge:hover { color: var(--text-primary); background: var(--bg-hover); }
}
@container fd (min-width: 1000px) {
  .fd-head { display: grid; grid-template-columns: 150px 170px 130px 100px minmax(0, 1fr) 96px; gap: 14px; padding: 0 14px 8px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
  .fd-row { grid-template-columns: 150px 170px 130px 100px minmax(0, 1fr) 96px; grid-template-areas: "tk sig int dir why time"; align-items: start; }
}
@container fd (max-width: 560px) {
  .fd-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tk time" "sig sig" "int dir" "why why"; gap: 8px 10px; padding: 11px 12px; }
  .c-dir { justify-self: end; }
  .c-tk .fx { display: none; }
  .c-sig { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .c-sig .r1 { display: contents; }
}

/* ── TOWN SQUARE + HEZI (posts) ─────────────────────────────────────────────────────────────────────── */
.sq-posts { display: grid; gap: 12px; }
.sq-post { padding: 14px; border-radius: 12px; box-shadow: 0 0 0 1px var(--border-subtle) inset; background: var(--hm-tile); }
.sq-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sq-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sq-who b { font-size: 13px; font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sq-who small { font-size: 11.5px; color: var(--text-tertiary); }
.sq-hd .sp { flex: 1; }
.sq-he { font-family: 'Heebo', var(--font-sans); font-size: 15.5px; line-height: 1.65; color: var(--text-primary); white-space: pre-line; overflow-wrap: anywhere; text-align: start; unicode-bidi: plaintext; }
.sq-he p { margin: 0; white-space: pre-line; }
.sq-he p + p { margin-block-start: .85em; }
.sq-en { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.sq-clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.sq-gist { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--info) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 28%, transparent) inset; direction: ltr; text-align: left; }
.sq-gist[hidden] { display: none; }
.sq-gist .lb { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--info); margin-bottom: 5px; }
.sq-gist p { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.sq-gist small { display: block; margin-top: 6px; font-size: 10.5px; color: var(--text-tertiary); }
html[dir="rtl"] .hm [dir="auto"], html[dir="rtl"] .hm-layer [dir="auto"], html[dir="rtl"] .fd-h button, html[dir="rtl"] .sq-facts, html[dir="rtl"] .sq-base, html[dir="rtl"] .sq-en, html[dir="rtl"] .sq-gist { text-align: right; }
html[dir="rtl"] .sq-gist .lb { justify-content: flex-end; }
.sq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sq-ft { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--text-tertiary); }
.sq-ft .sp { flex: 1; }
.sq-ft span.s { display: inline-flex; align-items: center; gap: 5px; }
.sq-ft .hm-ico { width: 14px; height: 14px; }
.sq-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary); box-shadow: 0 0 0 1px var(--border-subtle) inset; transition: color 140ms ease, background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.sq-btn:active { transform: scale(.97); }
.sq-btn[aria-expanded="true"] { color: var(--info); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 50%, transparent) inset; background: var(--info-bg); }
@media (hover: hover) and (pointer: fine) { .sq-btn:hover { color: var(--text-primary); background: var(--bg-hover); } }
.sq-call { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: var(--hm-card); box-shadow: 0 0 0 1px var(--border-default) inset; font-size: 12px; color: var(--text-secondary); }
.sq-call > span, .sq-call .sq-base { unicode-bidi: isolate; }
.sq-call .lb { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.sq-facts { color: var(--text-secondary); }
.sq-grade { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sq-grade.hit { color: var(--up); background: var(--up-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 45%, transparent) inset; }
.sq-grade.miss { color: var(--down); background: var(--down-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 45%, transparent) inset; }
.sq-grade.open { color: var(--info); background: var(--info-bg); }
.sq-grade .hm-ico { width: 12px; height: 12px; }
.sq-base { flex-basis: 100%; font-size: 11.5px; color: var(--text-tertiary); }
.hz-card { display: flex; flex-direction: column; gap: 0; height: 100%; }
.hz-card .sq-post { flex: 0 0 auto; }
.hz-card .sq-he { font-size: 18px; line-height: 1.7; }
.hz-card .hm-strip { margin-top: auto; padding-top: 14px; }
.wg-hz { align-self: stretch; display: flex; flex-direction: column; }
.wg-hz .wg-body { flex: 1; display: flex; flex-direction: column; }
.wg-hz .wg-card { flex: 1; display: flex; flex-direction: column; }
.wg-hz .wg-bar { flex: none; }
.hm-strip { margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--text-tertiary); }
.hm-strip b { color: var(--down); font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-inline-end: 6px; }

/* ── NOTIFICATIONS (widget + the centre share these rows) ──────────────────────────────────────────── */
.nt-list { list-style: none; display: grid; gap: 4px; }
.nt { position: relative; display: block; width: 100%; text-align: start; padding: 10px 10px; padding-inline-start: 26px; border-radius: 10px; transition: background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.nt:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) { .nt:hover { background: var(--bg-hover); } }
.nt .dot { position: absolute; inset-inline-start: 9px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.nt[data-read="1"] .dot { background: transparent; box-shadow: 0 0 0 1.5px var(--border-default) inset; }
.nt-top { display: flex; align-items: flex-start; gap: 8px; }
.nt-ti { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.nt[data-read="1"] .nt-ti { font-weight: 500; color: var(--text-secondary); }
.nt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 11px; color: var(--text-tertiary); }
.nt-meta .fig { font-size: 11px; color: var(--text-secondary); }
.nt-why { margin-top: 7px; padding: 7px 9px; border-radius: 8px; background: color-mix(in srgb, var(--bg-elevated) 38%, transparent); box-shadow: 0 0 0 1px var(--border-subtle) inset; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11.5px; line-height: 1.45; }
.nt-why .k { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 1px; }
.nt-why .v { color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.nt-why .lead { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 2px; }

/* ── the bell in the header ─────────────────────────────────────────────────────────────────────────── */
.hd .bell { position: relative; }
.hd .bell[aria-expanded="true"] { color: var(--text-primary); background: var(--bg-hover); box-shadow: 0 0 0 1px var(--border-default) inset; }
.bell-n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 800 10px/18px var(--font-mono); text-align: center; box-shadow: 0 0 0 2px var(--bg-deeper); pointer-events: none; direction: ltr; }
html.light .bell-n { box-shadow: 0 0 0 2px var(--bg-surface); }
.bell-n[hidden] { display: none; }

/* ── overlays: the event drawer (modal; bottom sheet on the phone) and the notification centre ─────────── */
.hm-layer { position: relative; z-index: 60; }
.hm-scrim { position: fixed; inset: 0; z-index: 55; touch-action: none; background: color-mix(in srgb, var(--bg-deeper) 58%, transparent); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; }
.hm-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 250ms ease, visibility 0s; }
.hm-drawer, .hm-nc { position: fixed; z-index: 60; display: flex; flex-direction: column; color: var(--text-primary); border-radius: 14px;
  background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 24px 60px rgba(0, 0, 0, .45); visibility: hidden; }
html.light .hm-drawer, html.light .hm-nc { box-shadow: 0 0 0 1px var(--border-subtle) inset, 0 24px 60px rgba(2, 29, 67, .16); }
.hm-drawer { top: calc(var(--header-h) + 12px); bottom: 12px; inset-inline-end: 12px; width: min(420px, calc(100vw - 24px));
  transform: translateX(calc(100% + 24px)); transition: transform 250ms var(--hm-ease-out), visibility 0s linear 250ms; }
[dir="rtl"] .hm-drawer { transform: translateX(calc(-100% - 24px)); }
.hm-drawer.is-open { transform: none; visibility: visible; transition: transform 500ms var(--hm-ease-drawer), visibility 0s; }
.hm-nc { top: calc(var(--header-h) - 2px); width: min(408px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header-h) - 14px); left: auto; right: 12px;
  opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: 100% 0; transition: opacity 120ms ease, transform 120ms var(--hm-ease-out), visibility 0s linear 120ms; }
[dir="rtl"] .hm-nc { transform-origin: 0 0; }
.hm-nc.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 150ms var(--hm-ease-out), transform 150ms var(--hm-ease-out), visibility 0s; }
.hm-ph { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--hm-line); flex: none; }
[dir="rtl"] .hm-ph { padding: 12px 16px 10px 12px; }
.hm-ph .sp { flex: 1; }
.hm-ph.hm-ph2, [dir="rtl"] .hm-ph.hm-ph2 { flex-direction: column; align-items: stretch; gap: 2px; padding-block: 8px 8px; }
.hm-ph.hm-ph2 { padding-inline: 16px 10px; }
[dir="rtl"] .hm-ph.hm-ph2 { padding-inline: 10px 16px; }
.hm-ph-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-ph-r .sp { flex: 1; }
.hm-ph-sub { margin-top: -4px; flex-wrap: wrap; row-gap: 2px; }   /* wraps only when the live chip adds its words */
.hm-ph-sub .hm-textbtn { margin-inline-end: -2px; }
.hm-ph h2, .hm-ph .meta, .hm-ph .hm-tag, .hm-ph .hm-textbtn { white-space: nowrap; }
.hm-ph h2 { font-size: 14px; font-weight: 700; }
.hm-ph .meta { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.hm-x { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--text-secondary); transition: color 140ms ease, background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.hm-x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .hm-x:hover { color: var(--text-primary); background: var(--bg-hover); } }
.hm-pb { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 14px 16px 18px; min-height: 0; }
.hm-pf { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--hm-line); }
.hm-handle { display: none; }
.hm-nc .hm-pb { padding: 8px 8px 10px; }
.hm-nc .hm-pf { padding: 9px 14px 11px; }
.hm-textbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--info); transition: background-color 140ms ease, transform 120ms var(--hm-ease-out); }
.hm-textbtn:active { transform: scale(.97); }
.hm-textbtn[aria-disabled="true"] { color: var(--text-tertiary); opacity: .5; cursor: not-allowed; }
.hm-textbtn[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) and (pointer: fine) { .hm-textbtn:hover:not([aria-disabled="true"]) { background: var(--bg-hover); } }

/* drawer content */
.dr-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dr-title { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.dr-title h2 { font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; outline: none; overflow-wrap: anywhere; }
.dr-title h2:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }
.dr-title .sym { display: block; margin-top: 3px; font: 700 12px/1 var(--font-mono); color: var(--text-secondary); direction: ltr; unicode-bidi: isolate; }
.dr-when { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.dr-when .fig { color: var(--text-primary); font-weight: 600; }
.dr-you { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-blk { margin-top: 15px; }
.dr-blk h3 { font-size: 11px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 8px; }
.dr-kv { display: grid; grid-template-columns: minmax(100px, auto) 1fr; gap: 9px 14px; align-items: baseline; }
.dr-kv dt { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.dr-kv dd { font-size: 13px; color: var(--text-primary); min-width: 0; }
.dr-kv dd small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-tertiary); }
.dr-kv dd > span { font-weight: 600; }
.dr-kv dd > span .fig { font-weight: 600; }
.dr-fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dr-fig b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.dr-fig span { font-size: 12px; color: var(--text-secondary); }
.dr-basis { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 8px; }
.dr-chart { direction: ltr; display: block; width: 100%; height: auto; margin-top: 4px; }
.ch-band { fill: color-mix(in srgb, var(--info) 15%, transparent); }
.ch-edge { stroke: color-mix(in srgb, var(--info) 60%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-zero { stroke: var(--border-strong); stroke-width: 1; }
.ch-bar.up { fill: var(--up); } .ch-bar.dn { fill: var(--down); }
.ch-lab { fill: var(--text-secondary); font: 600 10.5px var(--font-mono); letter-spacing: -.01em; }
.ch-val { fill: var(--text-primary); font: 700 10.5px var(--font-mono); letter-spacing: -.02em; }
.dr-legend { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-tertiary); }
.dr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dr-legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; background: color-mix(in srgb, var(--info) 28%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 55%, transparent) inset; }
.dr-calls { padding: 14px; border-radius: 12px; border: 1px dashed var(--border-default); display: grid; gap: 10px; }
.dr-calls .ln { display: flex; align-items: center; gap: 10px; }
.dr-calls .ln i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border-default) 40%, transparent); flex: 1; }
.dr-calls .ln i.s { flex: 0 0 56px; }
.dr-calls p { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.dr-calls p b { display: block; font-size: 13px; color: var(--text-primary); margin-bottom: 2px; }

/* the page's own risk block (the band's drawer carries the same words; EN/HE copied from the band's dictionary) */
.hm-foot { flex: 1 1 100%; margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--down) 7%, var(--bg-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 38%, transparent) inset; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.hm-foot b { color: var(--down); font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-inline-end: 8px; }
.hm-risk { font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); }
.hm-risk b { color: var(--down); font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-inline-end: 6px; }

/* ── the phone: sheets, not side drawers ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hm-drawer, .hm-nc { top: auto; bottom: 0; inset-inline: 0; left: 0; right: 0; width: auto; max-height: calc(100dvh - var(--header-h) - 10px); border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom); opacity: 1; transform-origin: 50% 100%; }
  .hm-drawer { height: auto; transform: translateY(105%); }
  [dir="rtl"] .hm-drawer { transform: translateY(105%); }
  .hm-nc { transform: translateY(105%); }
  [dir="rtl"] .hm-nc { transform: translateY(105%); }
  .hm-drawer.is-open, .hm-nc.is-open { transform: translateY(var(--sheet-dy, 0px)); }
  .hm-drawer.dragging, .hm-nc.dragging { transition: none !important; }
  .hm-handle { display: block; position: absolute; top: 6px; inset-inline-start: 50%; width: 40px; height: 4px; margin-inline-start: -20px; border-radius: 4px; background: var(--border-default); }
  .hm-ph { padding-top: 18px; cursor: grab; touch-action: none; }
  .hm-ph.hm-ph2, [dir="rtl"] .hm-ph.hm-ph2 { padding-top: 20px; gap: 0; }
  .hm-ph-sub { margin-top: -2px; }
  .hm-x { width: 40px; height: 40px; }
  .hm-textbtn { height: 40px; }
  .fd-open-s button { height: 36px; padding: 0 12px; }
  .fd-fm button { height: 36px; padding: 0 12px; }   /* NEXT-FEED */
  .fd-chip { height: 36px; padding: 0 12px; }
  .fd-filter, .fd-locks { gap: 8px; }
  .tk-go { height: 44px; }
  .sq-btn { height: 40px; }
  .wg-link { height: 40px; }
  .wg-bar .mvb { width: 40px; height: 40px; }
}
@media (max-width: 900px) { .pl-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) auto; } }

/* reduced motion: gentler, not zero — opacity only, no travel, no loops */
@media (prefers-reduced-motion: reduce) {
  .hm-drawer, .hm-drawer.is-open, .hm-nc, .hm-nc.is-open { transition: opacity 180ms ease, visibility 0s; }
  .hm-drawer { transform: none; opacity: 0; }
  [dir="rtl"] .hm-drawer { transform: none; }
  .hm-drawer.is-open { opacity: 1; }
  .hm-nc { transform: none; }
  .hm-scrim, .hm-scrim.is-open { transition: opacity 180ms ease, visibility 0s; }
  .sw::after, .ev, .fd-row, .nt, .wg-link, .sq-btn, .hm-x, .wg-bar .mvb, .hm-textbtn { transition-property: opacity, background-color, color, box-shadow; }
  .ev:active, .nt:active, .wg-link:active, .sq-btn:active, .hm-x:active, .wg-bar .mvb:active, .hm-textbtn:active, .hm-hd .btn:active, .hm .btn:active { transform: none; }
  @media (max-width: 720px) {
    .hm-drawer, [dir="rtl"] .hm-drawer, .hm-nc, [dir="rtl"] .hm-nc { transform: translateY(var(--sheet-dy, 0px)); opacity: 0; }
    .hm-drawer.is-open, .hm-nc.is-open { opacity: 1; }
  }
}

/* ── focus: always visible. index.html's global ring is a box-shadow that every later box-shadow (.btn, .sw, .ev[data-tier], …) overrides, so
   the ring is drawn here as an outline instead (outline never competes with the controls' own inset rings) ───────────────────────────────── */
.hm :focus-visible, .hm-layer :focus-visible, .hm-hd :focus-visible, .hd button:focus-visible, .hd a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
.hm .sw:focus-visible { box-shadow: none; }
.fd-h button:focus-visible { outline-offset: 1px; }
.hm-nc .nt:focus-visible, .hm-drawer .hm-pb:focus-visible { outline-offset: -2px; }

/* EVENT CARDS stage 1: lifecycle states on the Today strip. Green = --up tokens on an unpressed RESULT card only; the RESULT tag keeps it from reading as "price up". */
.hm-tag.res { color: var(--up); background: var(--up-bg); }
.hm-tag.res.calm { color: var(--text-secondary); background: transparent; box-shadow: 0 0 0 1px var(--hm-line) inset; }
.ev.lc-resolved.green { background: var(--up-bg); box-shadow: 0 0 0 1px var(--up) inset; }
.ev.lc-resolved .ev-t, .ev.lc-unresolved .ev-t { color: var(--text-primary); }
.ev-cd.lc-amber { color: var(--warn); font-weight: 700; }
.ev-pend { color: var(--text-tertiary); font-size: 11px; text-align: end; }
.ev-pv.ev-res { color: var(--text-primary); overflow-wrap: anywhere; }
.ev-warn { display: flex; gap: 5px; align-items: flex-start; font-size: 11px; line-height: 1.35; color: var(--warn); }
.ev-warn .hm-ico { width: 12px; height: 12px; flex: none; margin-top: 1px; }

/* EVENT CARDS 1b: Result + Our read inside the event drawer */
.rd-res .rd-line { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 10px; }
.rd-fig { margin-bottom: 8px; padding-top: 8px; border-top: 1px solid var(--hm-line); }
.rd-fig dd .fig { font-variant-numeric: tabular-nums; }
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rd-card { display: grid; gap: 3px; width: 100%; text-align: start; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 10px 11px; border-radius: 10px; box-shadow: 0 0 0 1px var(--hm-line) inset; }
.rd-card:hover { background: var(--surface-2, rgba(127,127,127,.08)); }
.rd-card:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }
.rd-t .fig { font-size: 11px; color: var(--text-tertiary); }
.rd-h { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.rd-b { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
/* G2: the "and N more that day" line */
.rd-more { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text-tertiary); }