/* VOLURR NEWS · THE TERMINAL LAYER — the markets across the top, the tape in the middle.
 *
 * WHAT THIS IS. The news section rendered the way a desk reads it: the MARKETS as the primary
 * navigation (a row of desks, each with the number of stories it holds), a dense time-ordered tape
 * whose rows lead with how much a story matters, a rail for the secondary filters, and a column
 * that is the market's pulse until a story is chosen and that story's provenance once one is.
 * (2026-09-25 — the desk terminal; the three-column terminal of 2026-08-23 before it.)
 *
 * IT BRINGS NO PALETTE. Every colour is a base.css / tokens.css token, whose own comment calls the
 * app theme an "institutional terminal — graphite + deep navy + premium gold". A news-only palette
 * would be a second theme to keep in step forever, and this page would drift the first time the app
 * moved.
 *
 * THE COLOUR LAW, KEPT EXACTLY. `--up` and `--down` mean a MEASURED PRICE DIRECTION and nothing
 * else — they appear on a return_pct that came out of news_reaction and nowhere on this page
 * besides. Importance is rendered as WEIGHT and as the brand's own two accents — crimson for
 * critical, amber for high — never as a red-for-bad / green-for-good scale. Domains get a
 * categorical hue ramp drawn deliberately from blues, violets, ambers and cyans, so that no
 * category can ever be mistaken for a direction.
 *
 * SEVERITY NEVER RELIES ON COLOUR. Every state carries its word — "Critical", "High",
 * "Independently confirmed". Remove every colour from this stylesheet and the page still says the
 * same things, which is the test.
 */

/* ── THE LIGHT THEME'S MUTED INK ──────────────────────────────────────────────────────────────
   MEASURED 2026-09-03 on a light boot at 1536×864: 28 text nodes under 4.5:1, every one of them
   the app's --muted (#6b7185) on this page's ground — the window pills, the section eyebrows, the
   facet counts, the age under every timestamp. base.css solved --muted for its own white card
   (4.85:1); this terminal draws that ink on --bg (4.25:1) and on card2 (4.44:1), which is where
   the rail and the tools live. Scoped to the shell, light only: #5f6578 measures 5.80 on white,
   5.31 on card2 and 5.09 on the page ground. The dark value already passes everywhere (4.58–5.22)
   and is not touched. */
html[data-theme=light] .ngt{--muted:#5f6578; --muted2:#5f6578}

/* ── SHELL ──────────────────────────────────────────────────────────────────────────────────── */
.ngt{
  --rail:200px; --detail:324px; --hair:1px solid var(--line);
  /* [2026-08-26] The Arabic faces are appended so the browser resolves PER CHARACTER: digits and
     tickers keep the monospace exactly as authored, and any Arabic-script codepoint falls to the
     first family that can draw it. MEASURED before: 70 elements on this page carried Kurdish text
     under this token and every one of them was drawn by the OS fallback, because not one family
     in the list has Arabic coverage. Vazirmatn measures 13/13 on the Kurdish-specific letters;
     IBM Plex Sans Arabic is the LOCAL, preloaded guarantee behind it. */
  --mono:var(--volurr-font-mono-terminal);   /* WAVE 0 alias - byte-identical; keeps 'Cascadia Mono', which U+25AA on the tape proves is reachable */
  --tick:.34s cubic-bezier(.22,1,.36,1);

  /* A TYPE SCALE, BECAUSE TWENTY LOOSE NUMBERS ARE NOT A DESIGN. Six steps, each with a job.
     THE FLOOR IS 11px (MEASURED 2026-09-03, owner: «everything 100% correct — measurements»).
     At 1536×864 the tape drew 171 nodes at 9.5px and 215 of 427 under 11px. On the owner's 125%
     Windows screen a 9.5px glyph is 12 physical pixels: the density read as noise, not as a
     terminal. Each tier keeps its job; the steps stay one voice apart. */
  --t-micro:11px;    /* column heads, state words — the terminal's smallest voice */
  --t-xs:11px;       /* counts, denominators */
  --t-s:12px;        /* mono data cells */
  --t-m:12.5px;      /* body: facet labels, claims, prose */
  --t-lg:14.5px;     /* the headline in the tape — the size the page is read at */
  --t-xl:18px;       /* the headline in the detail column — a real display step */
  --sp1:4px; --sp2:7px; --sp3:10px; --sp4:14px;

  /* IMPORTANCE, IN THE BRAND'S TWO ACCENTS AND ONE NEUTRAL (2026-09-25). Crimson is the brand and
     the page's own "attention"; amber is the one non-crimson UI accent tokens.css declares (UI and
     border tier — a spine, never a text colour); medium is ink at a third. None is green or red. */
  --imp-critical:var(--gold);
  --imp-high:var(--amber,#e8a33d);
  --imp-medium:color-mix(in srgb, var(--txt) 34%, transparent);

  /* SURFACE, MEASURED IN THE THEME'S OWN INK. Every derived tone is mixed from --txt, so it is a
     light film on a dark theme and a dark film on a light one without a second palette to keep. */
  --film:color-mix(in srgb, var(--txt) 3%, transparent);
  --film2:color-mix(in srgb, var(--txt) 6%, transparent);
  --edge:inset 0 1px 0 color-mix(in srgb, var(--txt) 7%, transparent);
  --lift:0 1px 0 color-mix(in srgb, var(--bg) 70%, transparent),
         0 4px 14px color-mix(in srgb, #000 22%, transparent);
  --ring:0 0 0 2px color-mix(in srgb, var(--gold) 50%, transparent);
  --sel-bg:color-mix(in srgb, var(--gold) 9%, transparent);
  /* GLASS AND DEPTH. The sticky chrome goes translucent with a backdrop blur, so the tape is felt
     sliding UNDER the instrument's frame instead of being cut off by an opaque bar. 88% of the
     card, not less: the effective surface under the text barely moves, so every contrast ratio
     measured against the solid card still holds. Solid card stays as the fallback. */
  --glass:color-mix(in srgb, var(--card) 88%, transparent);
  --depth:0 6px 10px -8px color-mix(in srgb, #000 55%, transparent);
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr) var(--detail);
  grid-template-rows:auto auto auto minmax(0,1fr);
  grid-template-areas:"top top top" "desk desk desk" "brk brk brk" "rail main detail";
  /* THE TERMINAL OWNS A VIEWPORT, NOT A DOCUMENT. `height:100%` resolves against a parent that
     has no height of its own, so the shell grew to CONTENT height — measured 4,330px — and the
     internal scroll on `.ngt-list` never engaged. `--ngt-off` is the shell's own distance from the
     top of the viewport, measured at runtime by ngtFit() rather than hard-coded. */
  gap:9px; height:calc(100dvh - var(--ngt-off, 0px)); max-height:calc(100dvh - var(--ngt-off, 0px));
  min-height:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--txt) 2%, var(--bg)), var(--bg) 140px);
  /* Tabular figures so a column of numbers is a column; slashed zero because on this page a zero
     count and a letter O appear in the same mono cell. */
  font-feature-settings:"tnum" 1,"zero" 1,"cv02" 1;
  scrollbar-color:color-mix(in srgb, var(--txt) 18%, transparent) transparent;
}
.ngt-top{grid-area:top} .ngt-desks{grid-area:desk} .ngt-break{grid-area:brk}
.ngt-rail{grid-area:rail} .ngt-main{grid-area:main} .ngt-detail{grid-area:detail}

/* EVERY CONTROL IN HERE ANSWERS TO ONE RING. Declared once, on the shell, so a control added
   later inherits it instead of being forgotten. */
.ngt :focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px}
.ngt .ngt-row:focus-visible{box-shadow:var(--ring) inset; border-radius:0}

/* PRESS. One rule for every control in here: it gives a pixel when pushed. Instant feedback, not
   an animation — reduced-motion has nothing to object to and nothing loops. */
.ngt button:active:not(:disabled){transform:translateY(1px)}

/* Micro-label: the terminal's smallest voice. Used for every section head, so the eye learns one
   rule instead of six. */
.ngt-mi{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}
/* Latin tracking is Latin-only — joined Arabic/Kurdish script shreds under letter-spacing */
html[dir="rtl"] .ngt-mi{letter-spacing:0}

.ngt ::-webkit-scrollbar{width:9px; height:9px}
.ngt ::-webkit-scrollbar-track{background:transparent}
.ngt ::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--txt) 15%, transparent);
  border-radius:8px; border:2.5px solid transparent; background-clip:content-box;
}
.ngt ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--txt) 26%, transparent);
  border:2.5px solid transparent; background-clip:content-box}

/* ── TOP STATUS STRIP ───────────────────────────────────────────────────────────────────────── */
/* THE COMMAND BAR [2026-08-24, owner: «شريط كثير مو حلو — تغير 100% ستايل متقدم»]. FOUR
   INSTRUMENT CLUSTERS on one surface: brand+title, a segmented tab control, an inset telemetry
   capsule, and a bordered control group — all of it mixed from the theme's own ink. */
.ngt-top{
  display:flex; align-items:center; gap:10px; padding:0 var(--sp3); height:48px;
  border:var(--hair); border-radius:var(--r2);
  background:linear-gradient(180deg, color-mix(in srgb, var(--txt) 5%, var(--card)), var(--card) 70%);
  box-shadow:var(--edge), 0 10px 22px -14px color-mix(in srgb, #000 55%, transparent);
  position:relative; z-index:3;
}
/* THE SIGNATURE. One hairline of brand under the status strip, faded symmetrically to nothing —
   symmetric on purpose, because a gradient that starts at one physical edge starts at the WRONG
   edge in one of this platform's two directions. */
.ngt-top::after{
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 4%,
             color-mix(in srgb, var(--gold) 42%, transparent) 50%, transparent 96%);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ngt-dh,.ngt-tools{
    background:var(--glass);
    -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
  }
  .ngt-top{
    background:linear-gradient(180deg, color-mix(in srgb, var(--txt) 6%, var(--glass)), var(--glass) 70%);
    -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
  }
}
.ngt-brand{
  display:inline-flex; align-items:center;
  font:800 12.5px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--txt);
  white-space:nowrap;
}
.ngt-brand b{color:var(--gold); font-weight:800}
.ngt-brand i{
  font:600 var(--t-s)/1 var(--mono); font-style:normal; letter-spacing:.07em; color:var(--txt2);
  margin-inline-start:10px; padding-inline-start:10px; border-inline-start:var(--hair);
}
html[dir="rtl"] .ngt-brand i{letter-spacing:0}
.ngt-tabs{
  display:flex; gap:2px; margin-inline-start:2px; padding:2px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  border:var(--hair); border-radius:8px;
  box-shadow:inset 0 1px 2px color-mix(in srgb, #000 10%, transparent);
}
.ngt-tabs .ngt-tab{padding:5px 11px; border-radius:6px}
.ngt-tab{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  /* --txt2, not --muted: measured 4.24:1 idle on the light theme's tabs-well. 7.38 / 10.59 now. */
  color:var(--txt2); background:none; border:0; padding:7px 10px; border-radius:4px;
  cursor:pointer; position:relative; transition:color var(--tick),background var(--tick);
}
html[dir="rtl"] .ngt-tab{letter-spacing:0}
.ngt-tab:hover{color:var(--txt); background:var(--film)}
/* the active tab is a RAISED KEY inside the well, with the brand score inside the key, so hover
   and selected can never impersonate each other */
.ngt-tab[aria-selected="true"]{color:var(--txt); background:var(--card);
  box-shadow:var(--edge), var(--depth)}
.ngt-tab[aria-selected="true"]::after{
  content:""; position:absolute; inset-inline:10px; bottom:2px; height:2px;
  background:var(--gold); border-radius:1px;
}
.ngt-status{
  font:600 var(--t-xs)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); opacity:0; transition:opacity var(--tick); white-space:nowrap;
}
.ngt-status.on{opacity:1; color:var(--txt2)}
@media (prefers-reduced-motion:reduce){.ngt-status{transition:none}}

.ngt-stats{
  display:flex; align-items:stretch; gap:0; margin-inline-start:auto;
  border:var(--hair); border-radius:8px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow:inset 0 1px 3px color-mix(in srgb, #000 12%, transparent);
}
.ngt-stats:empty{display:none}
.ngt-stat{display:flex; align-items:baseline; gap:6px; white-space:nowrap; padding:6px 11px}
.ngt-stat .ngt-mi{color:var(--txt2)}
.ngt-stat + .ngt-stat{border-inline-start:var(--hair)}
.ngt-stat b{font:700 var(--t-s)/1 var(--mono); color:var(--txt); letter-spacing:.02em}
/* A degraded feed is a WORD plus a marker, never a colour on its own — mixed 62% toward ink it
   keeps the brand hue and clears the bar in BOTH themes (6.7:1 dark, 9.5:1 light). */
.ngt-stat.warn b{color:color-mix(in srgb, var(--gold) 62%, var(--txt))}
/* NOT --up: this dot is the transport, and green on a page of market news reads as a direction. */
.ngt-dot{width:6px; height:6px; border-radius:50%; background:var(--txt2); flex:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--txt) 10%, transparent)}
.ngt-dot.live{animation:ngtPulse 2.4s ease-in-out infinite}
.ngt-dot.off{background:var(--muted); animation:none}
@keyframes ngtPulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 color-mix(in srgb, var(--txt2) 35%, transparent)}
  50%{opacity:.4; box-shadow:0 0 0 4px transparent}
}
@media (prefers-reduced-motion:reduce){.ngt-dot.live{animation:none}}

/* ── THE DESKS — the markets as the page's navigation (2026-09-25) ──────────────────────────── */
/* A ROW OF KEYS, NOT A MENU. Every market is one press away and says how much it holds; the chosen
   one is a raised key with the brand score, exactly the selection language of the tabs above. The
   bar scrolls sideways under a finger rather than wrapping into a second row of chrome. */
.ngt-desks{
  min-width:0; border:var(--hair); border-radius:var(--r2); background:var(--card);
  box-shadow:var(--edge); position:relative; z-index:2;
}
/* NO SCROLL SNAP: a trackpad turns one swipe into dozens of small wheel steps, and snapping after
   each would pull the bar back to the tab it started on. */
.ngt-desks-in{
  display:flex; gap:3px; padding:4px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.ngt-desks-in::-webkit-scrollbar{display:none}
/* the side that has more fades out (ngtDeskEdges); a side at its end stays sharp */
.ngt-desks-in[data-more-end]{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent)}
.ngt-desks-in[data-more-start]{
  -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent)}
.ngt-desks-in[data-more-start][data-more-end]{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent)}
/* in a right-to-left bar the END is on the left */
html[dir="rtl"] .ngt-desks-in[data-more-end]{
  -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent)}
html[dir="rtl"] .ngt-desks-in[data-more-start]{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent)}
html[dir="rtl"] .ngt-desks-in[data-more-start][data-more-end]{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent)}
.ngt-desk{
  flex:none; display:inline-flex; align-items:center; gap:7px; min-height:36px;
  padding:0 12px; border:0; border-radius:8px; background:none; cursor:pointer;
  font-weight:600; font-size:var(--t-m); line-height:1; font-family:inherit; color:var(--txt2); white-space:nowrap; position:relative;
  scroll-snap-align:start; transition:color var(--tick),background var(--tick);
}
.ngt-desk:hover{color:var(--txt); background:var(--film)}
.ngt-desk i{width:7px; height:7px; border-radius:50%; background:var(--dom,var(--muted)); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dom, transparent) 18%, transparent)}
.ngt-desk b{
  font:700 var(--t-xs)/1 var(--mono); color:var(--muted); letter-spacing:.02em;
  padding:3px 6px; border-radius:6px; background:var(--film2);
}
.ngt-desk[aria-selected="true"]{color:var(--txt); background:var(--card2);
  box-shadow:var(--edge), var(--depth)}
.ngt-desk[aria-selected="true"] b{color:var(--txt); background:color-mix(in srgb, var(--gold) 16%, transparent)}
.ngt-desk[aria-selected="true"]::after{
  content:""; position:absolute; inset-inline:12px; bottom:3px; height:2px;
  background:var(--gold); border-radius:1px;
}
/* A desk with nothing in the window stays pressable and says 0 — quieter, never hidden, because a
   missing tab reads as a missing market. */
.ngt-desk[data-empty="1"]{color:var(--muted)}
.ngt-desk[data-empty="1"] i{opacity:.45}

/* ── BREAKING STRIP ─────────────────────────────────────────────────────────────────────────── */
.ngt-break{
  display:flex; align-items:center; gap:0; height:36px; padding:0 var(--sp4); overflow:hidden;
  border:var(--hair); border-inline-start:3px solid var(--gold2); border-radius:var(--r2);
  background:var(--card); box-shadow:var(--depth); position:relative; z-index:2;
}
.ngt-break-tag{
  font:700 var(--t-micro)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  /* --gold2, NOT --gold: white on the brand crimson measures 4.27:1; the darker brand token clears
     AA in both themes and carries the same identity. */
  color:#fff; background:var(--gold2); padding:5px var(--sp2); border-radius:3px; flex:none;
  margin-inline-end:var(--sp4);
  box-shadow:0 1px 5px color-mix(in srgb, var(--gold2) 45%, transparent);
}
html[dir="rtl"] .ngt-break-tag{letter-spacing:0}
.ngt-break-in{display:flex; align-items:center; gap:0; min-width:0; overflow:hidden; flex:1}
/* THE TAPE. One track, the story set twice, travelling exactly one set-width so the restart frame
   is identical to the start frame. It PAUSES under the pointer and under any focus inside it. */
.ngt-bk-track{display:flex; align-items:center; width:max-content;
  animation:ngtTape var(--tick-secs,30s) linear infinite}
.ngt-bk-set{display:flex; align-items:center; flex:none}
.ngt-break:hover .ngt-bk-track,
.ngt-break:focus-within .ngt-bk-track{animation-play-state:paused}
@keyframes ngtTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] .ngt-bk-track{animation-name:ngtTapeRtl}
@keyframes ngtTapeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .ngt-bk-track{animation:none}
  .ngt-bk-set[aria-hidden="true"]{display:none}
  .ngt-break-in{overflow-x:auto; scrollbar-width:none}
  .ngt-break-in::-webkit-scrollbar{display:none}
}
.ngt-bk{
  display:flex; align-items:baseline; gap:7px; min-width:0; padding:0 14px; cursor:pointer;
  border-inline-start:var(--hair); background:none; border-block:0; border-inline-end:0;
  text-align:start;
}
.ngt-bk-set .ngt-bk:first-child{border-inline-start:0; padding-inline-start:0}
.ngt-bk time{font:600 var(--t-xs)/1 var(--mono); color:var(--muted); flex:none}
.ngt-bk span{
  font-size:var(--t-m); color:var(--txt2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; transition:color var(--tick);
}
.ngt-bk:hover span{color:var(--txt)}
/* a quiet tape says it is quiet, in the calm voice, and never scrolls a sentence past */
.ngt-bk-none{font-size:var(--t-m); color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
#v-news .ngt-bk-pub{text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted2,var(--muted));opacity:.8;margin-inline-start:8px;
  white-space:nowrap;flex:none}

/* ── LEFT RAIL — the secondary filters ──────────────────────────────────────────────────────── */
.ngt-rail{
  background:var(--cardgrad); border:var(--hair); border-radius:var(--r2);
  box-shadow:var(--lift); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding-bottom:var(--sp4); scrollbar-width:thin;
}
.ngt-sec{padding:12px var(--sp3) var(--sp1)}
.ngt-sec + .ngt-sec{border-top:var(--hair); margin-top:var(--sp3)}
.ngt-rail-h{padding-bottom:0}
/* the drawer's own way out (ngtRailHtml), shown only where the rail IS a drawer */
.ngt-rail-top{display:none}
.ngt-rail-h + .ngt-sec{border-top:0; margin-top:0}

/* A DIMENSION IS A DISCLOSURE, because ten of them opened at once is 190 buttons. <details> and
   not a scripted accordion: it opens without JavaScript, it is a real toggle to a screen reader,
   and the browser's own find-in-page opens it to reveal a match. */
details.ngt-sec > summary{
  display:flex; align-items:baseline; gap:6px; cursor:pointer; list-style:none;
  padding:2px 0; margin-bottom:var(--sp2); border-radius:4px;
}
details.ngt-sec > summary::-webkit-details-marker{display:none}
details.ngt-sec > summary::before{
  content:""; flex:none; width:0; height:0; margin-inline-end:2px;
  border-inline-start:4px solid currentColor; border-block:3.5px solid transparent;
  transition:transform var(--tick); transform-origin:30% 50%;
}
details.ngt-sec[open] > summary::before{transform:rotate(90deg)}
html[dir="rtl"] details.ngt-sec > summary::before{transform:scaleX(-1)}
html[dir="rtl"] details.ngt-sec[open] > summary::before{transform:scaleX(-1) rotate(90deg)}
details.ngt-sec > summary:hover{color:var(--txt2); background:var(--film)}
@media (prefers-reduced-motion:reduce){details.ngt-sec > summary::before{transition:none}}
.ngt-facets{max-height:216px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}

/* THE FILTERS THAT ARE ON, at the top of the rail, every chip its own off switch. */
.ngt-active{padding-top:var(--sp3)}
.ngt-chips{display:flex; flex-wrap:wrap; gap:var(--sp1)}
.ngt-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font:600 var(--t-xs)/1 var(--mono); letter-spacing:.03em;
  color:var(--txt); background:var(--sel-bg); border:1px solid var(--gold);
  border-radius:4px; padding:5px 6px; cursor:pointer; text-align:start;
  transition:background var(--tick);
}
.ngt-chip:hover{background:var(--film2)}
.ngt-chip s{text-decoration:none; font-size:12px; line-height:1; color:var(--muted); flex:none}
.ngt-chip:hover s{color:var(--txt)}
.ngt-chip.clear{background:none; border-color:var(--line); color:var(--txt2)}
.ngt-chip.clear:hover{border-color:var(--txt2); color:var(--txt)}
.ngt-sec > .ngt-mi{display:flex; align-items:baseline; gap:6px; margin-bottom:7px}
.ngt-sec > .ngt-mi > .ngt-fc{margin-inline-start:auto}

.ngt-facet{
  display:flex; align-items:center; gap:var(--sp2); width:100%; min-height:36px; padding:5px 8px;
  border-radius:4px; background:none; border:0; cursor:pointer; text-align:start; position:relative;
  transition:background var(--tick), padding-inline-start var(--tick);
}
.ngt-facet:hover{background:var(--film); padding-inline-start:12px}
@media (prefers-reduced-motion:reduce){.ngt-facet{transition:background var(--tick)}
  .ngt-facet:hover{padding-inline-start:8px}}
/* An active filter and a hovered one must never be the same fill: a brand spine and full weight. */
.ngt-facet[aria-pressed="true"]{background:var(--sel-bg)}
.ngt-facet[aria-pressed="true"]::after{
  content:""; position:absolute; inset-block:3px; inset-inline-start:0; width:2px;
  border-radius:1px; background:var(--gold);
}
.ngt-facet[aria-pressed="true"] .ngt-fl{color:var(--txt); font-weight:600}
.ngt-fl{
  /* MEASURED: 13 facet labels were cut with an ellipsis at 128px. A category name is what the
     reader filters BY; a cut one is a guess. It wraps now. */
  flex:1; min-width:0; font-size:var(--t-m); color:var(--txt2); white-space:normal;
  overflow:visible; line-height:1.3; transition:color var(--tick);
}
.ngt-fc{font:600 var(--t-xs)/1 var(--mono); color:var(--muted); flex:none; letter-spacing:.02em}

/* ── CENTER ─────────────────────────────────────────────────────────────────────────────────── */
.ngt-main{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--cardgrad); border:var(--hair); border-radius:var(--r2);
  box-shadow:var(--lift); overflow:hidden; position:relative;
}
.ngt-tools{
  display:flex; align-items:center; gap:var(--sp2); padding:8px var(--sp3); border-bottom:var(--hair);
  flex-wrap:wrap; background:var(--card); box-shadow:var(--edge), var(--depth); position:relative; z-index:2;
}
.ngt-search{flex:1 1 220px; min-width:160px; position:relative}
.ngt-search input{
  width:100%; height:36px; padding:0 var(--sp3); font-size:var(--t-m); color:var(--txt);
  background:var(--bg2); border:1px solid var(--line); border-radius:8px; outline:none;
  transition:border-color var(--tick),background var(--tick);
}
.ngt-search input:hover{border-color:color-mix(in srgb,var(--txt) 16%,var(--line))}
.ngt-search input:focus-visible{border-color:var(--gold); background:var(--bg)}
.ngt-search input::placeholder{color:var(--muted)}
.ngt-ctl2{display:flex; align-items:center; gap:var(--sp2); flex-wrap:wrap}
.ngt-count{font:600 var(--t-xs)/1 var(--mono); color:var(--muted); margin-inline-start:auto; white-space:nowrap}

/* A SEGMENTED CONTROL: one well, the chosen value a raised key with the brand score — the same
   physics as the tabs and the desks, so the whole page speaks one selection language. */
.ngt-seg{
  display:inline-flex; gap:2px; padding:2px; border:var(--hair); border-radius:8px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow:inset 0 1px 2px color-mix(in srgb, #000 10%, transparent);
}
.ngt-seg button{
  font:600 var(--t-xs)/1 var(--mono); color:var(--txt2); background:none; border:0; border-radius:6px;
  padding:0 9px; min-height:30px; cursor:pointer; white-space:nowrap; position:relative;
  transition:color var(--tick),background var(--tick),box-shadow var(--tick);
}
.ngt-seg button:hover{color:var(--txt); background:var(--film)}
.ngt-seg button[aria-checked="true"]{color:var(--txt); background:var(--card); box-shadow:var(--edge), var(--depth)}
.ngt-seg button[aria-checked="true"]::after{
  content:""; position:absolute; inset-inline:8px; bottom:3px; height:2px; background:var(--gold); border-radius:1px;
}

/* ── THE TAPE ─────────────────────────────────────────────────────────────────────────────────── */
.ngt-list{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  max-height:none; border:0; border-radius:0; background:transparent}

/* A ROW READS TOP TO BOTTOM (2026-09-25): the time in its own column, then importance, market,
   event and the instruments on one line, the headline, and who published it. The four fixed
   columns it replaces left the headline 25.6px wide inside the app shell at a 1280 desk. */
.ngt-row{
  display:grid; grid-template-columns:54px minmax(0,1fr); grid-template-areas:"day day" "t hl";
  column-gap:12px; padding:10px 14px 11px; min-height:56px;
  border-bottom:var(--hair); cursor:pointer; position:relative; transition:background var(--tick);
  background:none; width:100%; text-align:start;
}
.ngt-row > .ngt-t{grid-area:t}
.ngt-row > .ngt-hl{grid-area:hl; min-width:0}
/* THE SPINE CARRIES THE IMPORTANCE. A column of rows can be scanned for what matters without a
   word read; the word is still on the row (.ngt-imp) for anyone the colour does not reach. */
.ngt-row::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:transparent; transition:width var(--tick);
}
.ngt-row[data-lv="MEDIUM"]::before{background:var(--imp-medium)}
.ngt-row[data-lv="HIGH"]::before{background:var(--imp-high)}
.ngt-row[data-lv="CRITICAL"]::before{background:var(--imp-critical); width:4px;
  box-shadow:0 0 10px color-mix(in srgb, var(--imp-critical) 45%, transparent)}
.ngt-row[data-lv="CRITICAL"]{background:color-mix(in srgb, var(--gold) 4%, transparent)}
.ngt-row:hover{background:var(--film2)}
.ngt-row:hover .ngt-t time{color:var(--txt)}
/* THE SELECTED ROW is the one the detail column is describing, and it wins against the band and
   the hover: brand tint plus the brand spine — two signals, one of them not colour. */
.ngt-row[aria-current="true"],
.ngt-row[aria-current="true"]:hover{background:var(--sel-bg)}
.ngt-row[aria-current="true"]::before{background:var(--gold); width:4px}

/* A NEW DAY OPENS WITH ITS NAME — inside the first row of the day, spanning the row. An OPAQUE band
   on purpose: it is painted over the row's importance spine, and a film would let the spine of the
   story below run up through the date. */
.ngt-day{
  grid-area:day; display:flex; align-items:center; gap:10px; margin:-10px -14px 10px;
  padding:7px 14px; background:color-mix(in srgb, var(--txt) 4%, var(--card)); border-bottom:var(--hair);
  font:700 var(--t-micro)/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--txt2);
  position:relative;
}
html[dir="rtl"] .ngt-day{letter-spacing:0}
.ngt-day::after{content:""; flex:1; height:1px; background:var(--line)}

/* The clock column. Tabular figures, so 09:04 and 11:47 occupy the same width. */
.ngt-t{padding-top:1px}
.ngt-t time{display:block; font:700 var(--t-s)/1.25 var(--mono); color:var(--txt2);
  font-variant-numeric:tabular-nums; transition:color var(--tick)}
.ngt-t i{display:block; font-style:normal; font:500 var(--t-micro)/1.2 var(--mono); color:var(--muted); margin-top:3px}

.ngt-l1{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; min-height:18px}
/* Importance as WEIGHT: a marker count plus the word, in the level's own accent. */
.ngt-imp{display:inline-flex; align-items:center; gap:3px; font:700 var(--t-micro)/1 var(--mono);
  color:var(--txt2); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
html[dir="rtl"] .ngt-imp{letter-spacing:0}
.ngt-imp s{width:4px; height:10px; border-radius:1px; background:var(--imp-medium); text-decoration:none; flex:none}
.ngt-imp[data-lv="HIGH"] s{background:var(--imp-high)}
.ngt-imp[data-lv="CRITICAL"]{color:var(--txt)}
.ngt-imp[data-lv="CRITICAL"] s{background:var(--imp-critical)}
.ngt-imp + .ngt-dom::before,.ngt-imp + .ngt-et::before,.ngt-dom + .ngt-et::before{
  content:"·"; color:var(--muted); margin-inline-end:6px}
.ngt-dom{
  display:inline-flex; align-items:center; gap:5px;
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--dom,var(--txt2)); white-space:nowrap;
}
html[dir="rtl"] .ngt-dom{letter-spacing:0}
.ngt-et{font-size:var(--t-xs); color:var(--muted); white-space:nowrap}
/* THE INSTRUMENTS THE HEADLINE NAMES, each a key to its chart. Pushed to the far end of the line
   so the reading line stays importance -> market -> event. */
.ngt-syms{display:inline-flex; gap:4px; margin-inline-start:auto; flex-wrap:wrap}
.ngt-sym{
  font:700 var(--t-micro)/1 var(--mono); letter-spacing:.03em; color:var(--txt2); background:var(--card2);
  border:1px solid var(--line); border-radius:5px; padding:4px 6px; white-space:nowrap; cursor:pointer;
  position:relative; transition:color var(--tick),border-color var(--tick),background var(--tick);
}
.ngt-sym:hover{color:var(--txt); border-color:color-mix(in srgb, var(--gold) 55%, var(--line));
  background:var(--sel-bg)}

.ngt-hl h3{
  margin:0; font-size:var(--t-lg); font-weight:600; line-height:1.45; color:var(--txt);
  letter-spacing:-.006em; text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
html[dir="rtl"] .ngt-hl h3{letter-spacing:0; line-height:1.6}
.ngt-row[data-lv="CRITICAL"] .ngt-hl h3{font-weight:700}
.ngt-meta{display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap}
.ngt-pubn{font-weight:600; font-size:var(--t-xs); line-height:1; font-family:inherit; color:var(--muted); white-space:nowrap}
.ngt-tag{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.04em;
  color:var(--txt2); white-space:nowrap; background:var(--film);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:4px; padding:3px 6px;
}
.ngt-tag.up{color:var(--txt2); border:1px solid var(--line); border-radius:3px; padding:2px 4px}
/* confirmation BEYOND one source is the rarer, informative case, so it is the one that stands out
   — in ink, never in green */
.ngt-tag[data-conf="INDEPENDENTLY_CONFIRMED"],.ngt-tag[data-conf="PRIMARY_SOURCE_CONFIRMED"]{
  color:var(--txt); border-color:color-mix(in srgb, var(--txt) 30%, var(--line))}
.ngt-tag[data-conf="CONFLICTING"]{border-style:dashed}
.ngt-mv{border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}

/* COMPACT: one headline line and no meta line — the tape a desk leaves open on a second screen. */
.ngt[data-density="compact"] .ngt-row{padding:6px 14px 7px; min-height:40px}
.ngt[data-density="compact"] .ngt-day{margin:-6px -14px 7px}
.ngt[data-density="compact"] .ngt-hl h3{font-size:13px; -webkit-line-clamp:1; line-clamp:1}
.ngt[data-density="compact"] .ngt-meta{display:none}
.ngt[data-density="compact"] .ngt-l1{margin-bottom:2px}

/* Reaction curve row in the detail column (the one place a sparkline is drawn). */
.ngt-rx{display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0}
.ngt-rx svg{display:block; flex:none; overflow:visible;
  filter:drop-shadow(0 1px 1.5px color-mix(in srgb, #000 35%, transparent))}
.ngt-pct{font:600 var(--t-m)/1 var(--mono); letter-spacing:-.01em}
.ngt-pct.up{color:var(--up)} .ngt-pct.down{color:var(--down)} .ngt-pct.flat{color:var(--flat)}
/* A SENTENCE IS NOT A LABEL. Longhands, because `font: … inherit` is invalid and was dropped. */
.ngt-note{
  font-family:inherit; font-size:var(--t-m); font-weight:400; line-height:1.55;
  letter-spacing:0; text-transform:none; color:var(--muted);
  text-align:start; white-space:normal; margin:0 0 var(--sp3);
}

/* ── RIGHT COLUMN — the pulse, or one story's provenance ─────────────────────────────────────── */
.ngt-detail{
  background:var(--cardgrad); border:var(--hair); border-radius:var(--r2);
  box-shadow:var(--lift); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin;
}
.ngt-dh{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:0 var(--sp4);
  border-bottom:var(--hair); position:sticky; top:0; background:var(--card); z-index:2;
  box-shadow:var(--edge), 0 6px 10px -8px color-mix(in srgb,#000 55%,transparent);
}
.ngt-db{padding:var(--sp4)}
.ngt-db + .ngt-db{border-top:var(--hair)}
.ngt-db > .ngt-mi{display:flex; align-items:center; gap:6px; margin-bottom:10px}
.ngt-db > .ngt-mi::before{
  content:""; width:3px; height:3px; border-radius:50%; background:var(--gold); flex:none;
}
.ngt-dt{
  margin:var(--sp2) 0 var(--sp3); font-size:var(--t-xl); font-weight:650; line-height:1.4;
  color:var(--txt); letter-spacing:-.01em; text-wrap:balance;
}
html[dir="rtl"] .ngt-dt{letter-spacing:0; line-height:1.6}

/* The story's two first actions, under its headline. */
.ngt-dact{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--sp3)}
.ngt-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px;
  font-weight:600; font-size:var(--t-s); line-height:1; font-family:inherit; color:var(--txt); text-decoration:none; cursor:pointer;
  background:var(--card2); border:1px solid var(--line); border-radius:8px;
  transition:border-color var(--tick),background var(--tick);
}
.ngt-btn:hover{border-color:color-mix(in srgb, var(--gold) 50%, var(--line))}
.ngt-btn svg{flex:none}
.ngt-btn:disabled{opacity:.55; cursor:progress}
/* THE PRIMARY ACTION wears the brand's deep crimson with white ink: 4.27:1 on --gold failed AA,
   --gold2 clears it in both themes (the same measurement the breaking tag made). */
.ngt-btn.pri{color:#fff; background:var(--gold2); border-color:var(--gold2)}
.ngt-btn.pri:hover{background:color-mix(in srgb, var(--gold2) 88%, #000)}

.ngt-insl{display:flex; flex-direction:column; gap:6px}
.ngt-insr{display:flex; align-items:center; gap:8px}
.ngt-insr i{font-style:normal; font-size:var(--t-xs); color:var(--muted)}

/* Provenance, not a trust score. */
.ngt-prov{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden}
.ngt-pv{background:var(--card); padding:7px 8px; transition:background var(--tick)}
.ngt-pv:hover{background:var(--card2)}
.ngt-pv i{display:block; font:600 var(--t-micro)/1 var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); font-style:normal}
html[dir="rtl"] .ngt-pv i{letter-spacing:0}
.ngt-pv b{display:block; margin-top:4px; font:600 var(--t-s)/1.25 var(--mono); color:var(--txt2);
  word-break:break-word}

/* The source thread: who said it, when, and in what role. */
.ngt-thr{display:flex; flex-direction:column; gap:7px}
.ngt-tr{display:grid; grid-template-columns:72px 30px 1fr auto; align-items:center; gap:7px}
.ngt-tr b{font:600 var(--t-xs)/1 var(--mono); color:var(--txt2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.ngt-tr i{font:500 var(--t-micro)/1 var(--mono); color:var(--muted); font-style:normal}
.ngt-bar{height:2px; border-radius:1px; background:var(--card2); overflow:hidden}
.ngt-bar s{display:block; height:100%; inline-size:var(--w,0%); background:var(--gold); opacity:.7;
  text-decoration:none; transition:inline-size .5s cubic-bezier(.22,1,.36,1)}
.ngt-tr em{font:600 var(--t-micro)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-style:normal}
#v-news .ngt-thr .ngt-pub{display:inline-flex;align-items:center;gap:4px;font-weight:700;
  color:inherit;text-decoration:none;min-width:0}
#v-news .ngt-thr .ngt-pub:hover{text-decoration:underline}
#v-news .ngt-thr .ngt-pub svg{width:10px;height:10px;opacity:.6;flex:none}

.ngt-inst{width:100%; border-collapse:collapse; font:600 var(--t-xs)/1 var(--mono)}
.ngt-inst th{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-align:end; padding:0 0 6px;
}
.ngt-inst th:first-child{text-align:start}
.ngt-inst td{padding:5px 0; border-top:var(--hair); text-align:end; color:var(--txt2)}
.ngt-inst td:first-child{text-align:start; color:var(--txt)}
.ngt-inst td.up{color:var(--up)} .ngt-inst td.down{color:var(--down)}
.ngt-inst td.na{color:var(--muted); opacity:.55}

/* ══ HOW UNUSUAL WAS THE MOVE — §51: the STATUS leads, so an observation that overlaps other events
   is read as confounded before its number is read. */
#v-news .ngt-attr{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 9px;
  border:1px solid var(--line);border-radius:7px;background:var(--film)}
#v-news .ngt-attr-st{flex:none;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:4px;background:var(--film2);color:var(--muted);white-space:nowrap}
#v-news .ngt-attr-st[data-st="CLEAN"]{background:rgba(0,208,132,.14);color:var(--up,#0a7f52)}
#v-news .ngt-attr-st[data-st="CONFOUNDED"],
#v-news .ngt-attr-st[data-st="OVERLAPPING_EVENTS"]{background:rgba(245,165,36,.14);color:var(--med,#8a5a06)}
#v-news .ngt-attr-l{min-width:0;font-size:12px;line-height:1.45;color:var(--txt)}
#v-news .ngt-attr-l b{font-variant-numeric:tabular-nums}
#v-news .ngt-attr-l i{display:block;font-style:normal;font-size:11px;color:var(--muted2,var(--muted));margin-top:2px}

/* ── THE PULSE (2026-09-25) ─────────────────────────────────────────────────────────────────── */
/* FLOW BY DESK: one bar per market, its length the market's share of the busiest one, in the
   market's own hue at low strength behind ink text — a luminance bar, never a direction colour. */
.ngt-flow{display:flex; flex-direction:column; gap:3px}
.ngt-pf{
  display:flex; align-items:center; gap:8px; min-height:30px; padding:0 9px; border:0; border-radius:6px;
  background:var(--film); cursor:pointer; position:relative; isolation:isolate; overflow:hidden;
  font-weight:600; font-size:var(--t-s); line-height:1; font-family:inherit; color:var(--txt2); text-align:start;
  transition:color var(--tick),box-shadow var(--tick);
}
.ngt-pf::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; z-index:-1;
  inline-size:var(--pct,0%); background:color-mix(in srgb, var(--dom, var(--muted)) 22%, transparent);
  border-inline-end:2px solid color-mix(in srgb, var(--dom, var(--muted)) 70%, transparent);
  transition:inline-size .5s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.ngt-pf::before{transition:none}}
.ngt-pf span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ngt-pf b{font:700 var(--t-s)/1 var(--mono); color:var(--txt)}
.ngt-pf:hover{color:var(--txt); box-shadow:inset 0 0 0 1px var(--line)}

.ngt-implv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
.ngt-il{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:8px 7px; min-height:58px;
  border:1px solid var(--line); border-radius:7px; background:var(--card); text-align:start;
  font-weight:600; font-size:var(--t-micro); line-height:1.2; font-family:inherit; color:var(--muted);
}
button.ngt-il{cursor:pointer; transition:border-color var(--tick),background var(--tick)}
button.ngt-il:hover{border-color:color-mix(in srgb, var(--gold) 45%, var(--line)); background:var(--card2)}
.ngt-il i{width:16px; height:3px; border-radius:2px; background:var(--imp-medium)}
.ngt-il[data-lv="HIGH"] i{background:var(--imp-high)}
.ngt-il[data-lv="CRITICAL"] i{background:var(--imp-critical)}
/* the threshold that is on: brand edge and tint, the same two signals the selected row carries */
button.ngt-il[aria-pressed="true"]{border-color:var(--gold); background:var(--sel-bg); color:var(--txt2)}
.ngt-il span{overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap}
.ngt-il b{font:700 var(--t-lg)/1 var(--mono); color:var(--txt)}
.ngt-imprest{margin:8px 0 0; font-size:var(--t-xs); color:var(--muted)}
.ngt-imprest b{font:600 var(--t-xs)/1 var(--mono); color:var(--txt2)}

/* THE NEXT HIGH-IMPACT EVENTS: time + day, currency, name, countdown; the numbers under it. */
.ngt-ev{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:baseline;
  column-gap:8px; row-gap:3px; padding:7px 0; border-bottom:var(--hair)}
.ngt-ev:last-of-type{border-bottom:0}
.ngt-ev time{font:700 var(--t-s)/1.2 var(--mono); color:var(--txt)}
.ngt-ev time i{display:block; font-weight:500; font-size:var(--t-micro); line-height:1.2; font-family:inherit; color:var(--muted); font-style:normal; margin-top:2px}
.ngt-ccy{font:700 var(--t-micro)/1 var(--mono); color:var(--txt2); background:var(--card2);
  border:1px solid var(--line); border-radius:4px; padding:3px 5px}
.ngt-evn{font-size:var(--t-s); color:var(--txt); line-height:1.35; min-width:0; overflow-wrap:anywhere}
.ngt-evc{font:600 var(--t-micro)/1 var(--mono); color:var(--muted); white-space:nowrap}
.ngt-evv{grid-column:3 / -1; font-size:var(--t-xs); color:var(--muted)}
.ngt-evv b{font:600 var(--t-xs)/1 var(--mono); color:var(--txt2)}
.ngt-src-note{margin:8px 0 0; font-size:var(--t-xs); color:var(--muted); line-height:1.5}
.ngt-lnk{background:none; border:0; padding:0; font:inherit; color:var(--txt2); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer}
.ngt-lnk:hover{color:var(--txt)}

.ngt-srcs{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.ngt-srcs b{font:700 var(--t-lg)/1 var(--mono); color:var(--txt)}
.ngt-srcs > span{font-size:var(--t-s); color:var(--txt2)}
.ngt-srcs i{flex-basis:100%; font-style:normal; font-size:var(--t-xs); color:var(--muted)}

/* ── EMPTY / ERROR — the same voice as everything else ──────────────────────────────────────── */
.ngt-empty{padding:48px 20px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center}
.ngt-empty b{display:block; font-size:var(--t-lg); color:var(--txt2); font-weight:600}
.ngt-empty span{display:block; font-size:var(--t-m); color:var(--muted); line-height:1.6; max-width:38ch}
/* The list arrives rather than appearing: a 120ms fade, once — never a staggered cascade. */
.ngt-list{animation:ngtIn .12s ease-out both}
@keyframes ngtIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ngt-list{animation:none}}
.ngt-skel{height:44px; border-bottom:var(--hair); position:relative;
  background:linear-gradient(90deg,transparent,var(--card),transparent);
  background-size:200% 100%; animation:ngtSk 1.25s ease-in-out infinite}
.ngt-skel::before,.ngt-skel::after{
  content:""; position:absolute; top:14px; height:8px; border-radius:4px; background:var(--film2);
}
.ngt-skel::before{inset-inline-start:10px; width:44px}
.ngt-skel::after{inset-inline-start:118px; width:46%}
@keyframes ngtSk{0%{background-position:180% 0}100%{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.ngt-skel{animation:none; background:var(--card)}}

/* THE NEW-STORIES PILL floats over the tape's first row instead of pushing the tape down (§18:
   arrival never moves what the reader is reading). It keeps its place in the column and cancels its
   own height with a negative margin, so it sits under the tools bar at every width - one line on a
   desk, two on a phone - with no measured offset and no transform for the press rule to replace.
   The fixed height is what makes the cancel exact: 8 + 30 - 38 = 0. */
#v-news .ngt-main .ng-newpill{
  position:relative; z-index:4; align-self:center; flex:none; white-space:nowrap;
  height:30px; padding:0 16px; margin:8px 0 -38px; line-height:1;
  background:var(--gold2); font-weight:700;
}

/* THE DOMAIN RAMP WAS DRAWN FOR A DARK BACKGROUND. Those pastels measure 16:1 on graphite and
   2.94:1 on white, so the domain label failed AA for every light-theme reader. The one ramp is
   darkened toward ink where the surface is light — blue stays blue — 55%, measured against the
   lightest hue in the ramp. */
:root[data-theme="light"] .ngt-dom,
:root[data-theme="light"] .ngt-pf{
  --dom-ink:color-mix(in srgb, var(--dom, var(--txt2)) 55%, #000);
}
:root[data-theme="light"] .ngt-dom{color:var(--dom-ink)}

/* ── RESPONSIVE — the columns fold in the order a reader can spare them ─────────────────────── */
/* CONTAINER QUERIES, NOT VIEWPORT QUERIES: the terminal never gets the viewport — base.css offsets
   .main by the app's own side rail (218px measured; 62 collapsed; 0 hidden) — so it folds at the
   width it actually has. 1180 − 218 = 962, and 900 − 218 = 682. */
#v-news{container-type:inline-size}
/* THE FILTERS KEY EXISTS WHERE THE RAIL IS A DRAWER, AND ONLY THERE. Scoped to (1,2,0) because
   `#v-news .ngt-tab:has(svg)` (1,1,1) sets every icon key inline-flex: measured 2026-09-25, the
   key showed on a 1536 px desk, where the rail is on screen and the key toggled nothing (law 8). */
#v-news .ngt-tools .ngt-railbtn{display:none}
/* ...and the pulse key where the right column is a drawer: below the 962 fold nothing else
   opens it, so without this key the pulse is unreachable on a tablet or a phone. */
#v-news .ngt-tools .ngt-pulsebtn{display:none}
/* THE hidden ATTRIBUTE DECIDES WHETHER A CONTROL EXISTS. The same rule beat the browser's own
   [hidden]{display:none}: the pulse column showed a close key with nothing to close. */
#v-news .ngt [hidden]{display:none !important}
@container (max-width:1180px){
  .ngt{--rail:184px; --detail:300px}
}
@container (max-width:962px){
  .ngt{grid-template-columns:var(--rail) minmax(0,1fr);
    grid-template-areas:"top top" "desk desk" "brk brk" "rail main"}
  .ngt-detail{position:fixed; inset-block:0; inset-inline-end:0; width:min(360px,92vw); z-index:60;
    border-radius:0; transform:translateX(100%); transition:transform var(--tick);
    box-shadow:var(--shadow)}
  html[dir="rtl"] .ngt-detail{transform:translateX(-100%)}
  .ngt-detail.on,html[dir="rtl"] .ngt-detail.on{transform:none}
  /* A DRAWER PARKED OFF-CANVAS IS STILL PART OF THE PAGE: `clip`, not `hidden`, so the tape keeps
     its own vertical scrolling. news-chrome.css clips `.view` itself on this view. */
  #v-news{overflow-x:clip}
  #v-news .ngt-tools .ngt-pulsebtn{display:inline-flex; align-items:center; justify-content:center}
}
@container (max-width:682px){
  .ngt{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "desk" "brk" "main"; gap:7px}
  .ngt-rail{position:fixed; inset-block:0; inset-inline-start:0; width:min(290px,86vw); z-index:60;
    border-radius:0; transform:translateX(-100%); transition:transform var(--tick);
    box-shadow:var(--shadow)}
  html[dir="rtl"] .ngt-rail{transform:translateX(100%)}
  .ngt-rail.on,html[dir="rtl"] .ngt-rail.on{transform:none}
  .ngt-rail .ngt-rail-h{display:none}      /* the drawer's own title says it */
  .ngt-rail-top{display:flex; align-items:center; justify-content:space-between; gap:8px;
    position:sticky; top:0; z-index:3; padding:6px 8px 6px 12px; background:var(--card);
    border-bottom:var(--hair); box-shadow:var(--depth)}
  /* the filters key exists where the rail is a drawer, and only there — on a desk the rail is on
     screen and a key that toggles nothing visible would be a button that does nothing (law 8) */
  #v-news .ngt-tools .ngt-railbtn{display:inline-flex; align-items:center; justify-content:center}
  .ngt-row{grid-template-columns:44px minmax(0,1fr); column-gap:9px; padding:10px 12px}
  .ngt-day{margin:-10px -12px 9px; padding:7px 12px}
  .ngt-hl h3{-webkit-line-clamp:3; line-clamp:3; font-size:14px}
  .ngt-syms{margin-inline-start:0; flex-basis:100%}
  .ngt-tools{padding:7px 9px}
  .ngt-search{flex-basis:100%}
  /* THE CONTROLS WRAP, THEY DO NOT SCROLL. Scrolled sideways with the scrollbar hidden, the
     density key sat at x 440 on a 390 px phone - there, and unseen (probe, 2026-09-26). */
  .ngt-ctl2{flex:1 1 auto; flex-wrap:wrap; row-gap:6px}
  .ngt-count{margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){.ngt-detail,.ngt-rail{transition:none}}

/* ══ THE 44px FLOOR ═══════════════════════════════════════════════════════════════════════════
   MEASURED 2026-09-03 at 1536×864: 202 controls under 44px with no extended target. The owner
   works this page on a laptop trackpad, where a 20px key is the same mis-click as on a phone.
   Rows that STACK take real height; controls that sit in a strip keep their drawn box and extend
   an invisible target, so the bar's rhythm does not change. */
.ngt-seg button,.ngt-bk,.ngt-sym{position:relative}
.ngt-seg button::before,.ngt-bk::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; height:44px; pointer-events:auto;
}
/* THE TABS AND THE LANGUAGE KEYS SIT IN A WELL THAT CLIPS, so an extended target cannot leave the
   well — they take real height instead. */
.ngt-tab{min-height:40px} .ngt-lang{min-height:40px}
.ngt-desk{min-height:40px}

@media (pointer:coarse){
  .ngt-facet,.ngt-tab,.ngt-desk,.ngt-seg button,
  .ngt-lang,.ngt-ico,.ngt-pf,.ngt-btn{min-height:44px}
  .ngt-ico{width:auto; min-width:44px}
  .ngt-lang,.ngt-ico{display:inline-flex; align-items:center; justify-content:center}
  .ngt-break{height:auto; min-height:44px}
  .ngt-bk{min-height:44px; align-items:center}
  .ngt-row{min-height:64px}
  .ngt-chip{min-height:44px}
  #v-news .ngt-thr .ngt-pub{min-height:44px}
  #v-news .ngt .ng-more{min-height:44px}
  /* THE INSTRUMENT CHIPS SIT IN A LINE OF TEXT, so they keep their drawn box and extend an
     invisible 44 px target - the rule every strip control in this file follows. Measured at 390
     wide under a coarse pointer (2026-09-26): 31 px drawn, which a thumb misses. */
  .ngt-sym{padding:6px 8px}
  .ngt-sym::before{content:""; position:absolute; left:-2px; right:-2px; top:50%; height:44px;
    transform:translateY(-50%)}
}

/* ── HEADER CONTROLS ────────────────────────────────────────────────────────────────────────── */
/* Language, full screen, theme, sound and Telegram. They sit in the header because
   news-chrome.css hides the app's own controls on this view. Never inside a menu on desktop. */
.ngt-controls{
  display:flex; align-items:center; gap:5px; margin-inline-start:8px;
  padding-inline-start:12px; border-inline-start:var(--hair); flex:none;
}
.ngt-ctl{
  display:flex; gap:2px; padding:2px;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  border:var(--hair); border-radius:8px;
  box-shadow:inset 0 1px 2px color-mix(in srgb, #000 10%, transparent);
}
.ngt-lang{
  font:600 var(--t-micro)/1 var(--mono); letter-spacing:.06em; color:var(--txt2); background:none;
  border:0; border-radius:6px; padding:5px 7px; cursor:pointer; min-width:26px;
  transition:color var(--tick),background var(--tick),box-shadow var(--tick);
}
.ngt-lang:hover{color:var(--txt)}
.ngt-lang[aria-pressed="true"]{color:var(--txt); background:var(--card);
  box-shadow:var(--edge), var(--depth)}
.ngt-ico{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; color:var(--txt2); background:var(--film); border:var(--hair); border-radius:8px;
  cursor:pointer; transition:color var(--tick),border-color var(--tick),background var(--tick);
}
.ngt-ico svg{display:block}
.ngt-ico:hover{color:var(--txt); background:var(--film2);
  border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}
.ngt-ico[aria-pressed="true"]{color:color-mix(in srgb, var(--gold) 62%, var(--txt));
  background:var(--sel-bg); border-color:color-mix(in srgb, var(--gold) 35%, var(--line))}
.ngt-ico:disabled{opacity:.4; cursor:not-allowed}
.ngt-lang:focus-visible,.ngt-ico:focus-visible{outline:1px solid var(--gold); outline-offset:1px}
.ngt-tools .ngt-ico{width:34px; height:34px}

/* ── VOLURR AI ──────────────────────────────────────────────────────────────────────────────── */
/* An institutional read-out, not a chat transcript. A section with no claims is not rendered. */
.ngt-ai-actions{display:flex; gap:6px; align-items:center; margin-bottom:8px}
.ngt-ai-actions button{cursor:pointer}
.ngt-ai-actions button:disabled{opacity:.55; cursor:progress}
.ngt-ai-sec{margin-bottom:var(--sp4)}
.ngt-ai-sec + .ngt-ai-sec{border-top:var(--hair); padding-top:var(--sp3)}
.ngt-ai-sec > .ngt-mi{display:block; margin-bottom:var(--sp2)}
.ngt-claim{margin:0 0 var(--sp2); font-size:var(--t-m); line-height:1.65; color:var(--txt2); text-wrap:pretty}
.ngt-claim code,.ngt-claim var{
  font:600 var(--t-s)/1 var(--mono); font-style:normal; direction:ltr; unicode-bidi:isolate;
  color:var(--txt); background:var(--film2); border-radius:3px; padding:2px 4px;
}
/* The claim TYPE is the point of the panel: a fact, a measurement and an inference are three
   different kinds of statement and the reader is entitled to see which is which. */
.ngt-claim-t{
  display:inline-block; font:600 var(--t-micro)/1 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); background:var(--card2);
  border:1px solid var(--line); border-radius:3px; padding:3px 5px; margin-inline-end:var(--sp2);
  vertical-align:1px;
}
.ngt-claim-t[data-t="MEASURED"]{color:var(--txt2)}
.ngt-claim-t[data-t="UNVERIFIED"]{opacity:.75}
.ngt-ai-state{display:flex; align-items:center; gap:7px; font-size:var(--t-m); line-height:1.5;
  color:var(--muted); padding:8px 0}
.ngt-ai-state[data-state="ERROR"],.ngt-ai-state[data-state="AUTH_REQUIRED"]{color:var(--txt2)}
.ngt-ai-state button{margin-inline-start:auto; flex:none}

/* In fullscreen the terminal IS the viewport, so the runtime offset is zero. */
.ngt:fullscreen{height:100dvh; max-height:100dvh; border:0; border-radius:0}
/* THE STATUS STRIP WAS A ONE-LINE ROW THAT SIMPLY RAN OUT OF PAGE (measured at 375 in Kurdish:
   the language switcher, full screen and theme were clipped at x -444). So the strip wraps: line
   one keeps what must be reachable, line two carries the readouts, scrollable rather than clipped. */
@container (max-width:682px){
  .ngt-top{height:auto; min-height:32px; flex-wrap:wrap; padding-block:5px; gap:8px; row-gap:4px}
  .ngt-brand{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
  .ngt-brand i{display:none}
  .ngt-tabs{margin-inline-start:0; flex:none}
  .ngt-controls{margin-inline-start:auto; gap:2px}
  .ngt-lang{padding:5px 4px; min-width:20px}
  .ngt-stats{order:9; flex:1 0 100%; margin-inline-start:0; gap:14px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
  .ngt-stats::-webkit-scrollbar{display:none}
}

/* [2026-08-24] the last device-font controls under the header are inline SVG from the one ngtIcon
   family; an svg is not sized by font, so the keys centre it explicitly. */
#v-news .ngt-tab svg,#v-news .ng-more svg,#v-news .ng-src svg{display:block;flex:none}
#v-news .ngt-tab:has(svg),#v-news .ng-more:has(svg){display:inline-flex;align-items:center;justify-content:center}
#v-news .ng-src{display:inline-flex;align-items:center;gap:5px}
#v-news .ng-src svg{width:11px;height:11px;opacity:.7}