/* NatGas Central · shared components (A1-04; port of proto/css/components.css, round 5, 2 Oct 2026). The markup comes from
   the PHP (inc/ngc-ui.php, inc/ngc-chrome.php) and Python (ngc_web/ui.py) ports of NGC.ui; class names are unchanged.
   Every class here starts with `n-`. Pages never restyle `n-` classes globally; a page variant is scoped under its own root
   class, e.g. `.hm .n-panel { ... }`. Left out on purpose (prototype only): the Prototype controls (#ngc-demo, .n-demo*,
   .n-fab*), .n-protobox*, build chips and notes (.n-build*, .n-buildnote), the card-frame stand-in (.n-cardframe*), the
   #kit page, .n-stub, the Discord demo toast and the paywall blur (.n-paywalled: the real paywall is a dialog over an
   empty frame, never over blurred content). Added for the real site (end of file): the two colour modes printed side by
   side (BUILD_SPEC §1.14), native <dialog> modals, and .n-btn--touch-phone (§1.15).
   Canonical copy: child-theme/assets/css/ngc-components.css (synced into ngc_web/static/shared/ by tools/sync_web_assets.py). */

/* ================= chrome: status strip ================= */
.n-strip { height: var(--strip-h); background: var(--surface); border-bottom: 1px solid var(--hair-soft); font-size: 13px; }
.n-strip__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.n-strip__items { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
.n-strip__item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; }
.n-strip__k { color: var(--t3); }
.n-strip__v { color: var(--t1); font-weight: 500; }
.n-strip__t { color: var(--t3); }
.n-strip__item--dim .n-strip__v { color: var(--t2); }
.n-strip__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--t3); align-self: center; flex: none; }
.n-strip__late { color: var(--warn); }
.n-vrule { width: 1px; height: 14px; background: var(--line); flex: none; }
.n-strip__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; font-size: 14px; font-weight: 500; color: var(--accent); white-space: nowrap; }
@media (max-width: 1099px) { .n-strip__item--eia .n-strip__extra { display: none; } }
@media (max-width: 699px) {
  .n-strip__in { gap: 12px; }
  .n-strip__item--eia, .n-strip__items .n-vrule { display: none; }
}

/* ================= chrome: desktop nav ================= */
/* round 5 integration (2 Oct): pinned at every width, like the phone/tablet header, so the nav is one move away mid-page and at the
   bottom of every site page on a computer too (it was only reachable at the top). --pin-h below carries its height to the modules. */
.n-nav { height: var(--nav-h); background: var(--ground); border-bottom: 1px solid var(--hair-soft); position: sticky; top: 0; z-index: 30; }
.n-nav__in { height: 100%; display: flex; align-items: center; gap: 48px; }
.n-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--t1); white-space: nowrap; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; min-height: 44px; }
.n-wordmark:hover { color: var(--t1); }
.n-wordmark svg path { fill: var(--brand); }
.n-nav__links { display: flex; align-items: center; gap: 28px; height: 100%; }
.n-nav__link { display: flex; align-items: center; height: 100%; padding-top: 2px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--t2); white-space: nowrap; }
.n-nav__link:hover { color: var(--t1); }
.n-nav__link[aria-current="page"] { color: var(--t1); border-bottom-color: var(--accent); }
.n-nav__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.n-nav__login { font-size: 14px; font-weight: 500; color: var(--t1); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.n-nav__login:hover { color: var(--accent); }
.n-nav__account { display: inline-flex; align-items: center; gap: 8px; height: var(--nav-h); padding-top: 2px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--t1); white-space: nowrap; }
.n-nav__account[aria-current="page"] { border-bottom-color: var(--accent); }
.n-nav__account svg { color: var(--t2); }
@media (max-width: 1099px) { .n-nav { display: none; } }

/* ================= chrome: phone/tablet header, pinned (round 5, SPEC5 C2) ================= */
/* html[data-chrome] is set by core on every render: site | checkout | report | bare. --pin-h = the pinned bar's height on site and
   checkout pages at every width (the phone/tablet header, the desktop nav, the checkout bar; 0 on the report and bare pages, which
   set their own offsets): module sticky elements use top: calc(var(--pin-h, 0px) + <gap>). */
:root { --pin-h: 0px; }
html[data-chrome="site"], html[data-chrome="checkout"] { --pin-h: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
html[data-chrome="site"], html[data-chrome="checkout"] { scroll-padding-top: calc(var(--pin-h) + 12px); }   /* WCAG 2.4.11: focus never lands under the bar */
.n-mhead { display: none; position: sticky; top: 0; z-index: 30; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--ground); border-bottom: 1px solid var(--hair-soft); }
.n-mhead__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.n-mhead__right { display: flex; align-items: center; gap: 8px; flex: none; }
.n-mhead__links { display: none; }
@media (max-width: 1099px) { .n-mhead { display: block; } }
@media (min-width: 700px) and (max-width: 1099px) {
  .n-mhead__links { display: flex; align-items: center; gap: 20px; margin-left: 24px; margin-right: auto; min-width: 0; }
  .n-mhead__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--t2); white-space: nowrap; }
  .n-mhead__links a:hover { color: var(--t1); }
  .n-mhead__links a[aria-current="page"] { color: var(--t1); }
}
/* 700–899: the first three links; 900–1099: every link of the desktop nav (wide.md 1) */
@media (min-width: 700px) and (max-width: 899px) { .n-mhead__links a:nth-child(n+4) { display: none; } }
@media (min-width: 700px) and (max-width: 799px) { .n-mhead__links { gap: 14px; margin-left: 8px; } }   /* member links + Latest report fit at 700 */
@media (min-width: 900px) and (max-width: 1099px) { .n-mhead__links { gap: 18px; } }
@media (max-width: 699px) { .n-mhead .n-wordmark span { font-size: 15px; } }

/* ================= the menu: one native <dialog id="ngc-menu-sheet"> (round 5, SPEC5 C3) =================
   phones: a bottom sheet (like the site's other phone dialogs); ≥ 700 px: a 380 px panel from the right. */
html.n-scroll-lock { overflow: hidden; scrollbar-gutter: stable; }
html.n-scroll-lock body { overflow: visible; }          /* keeps the viewport the scroller, so sticky bars stay put behind the backdrop */
.n-sheet { margin: 0; padding: 0; border: 0; max-width: none; color: var(--t1); background: var(--raised); box-shadow: var(--shadow);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; font-family: var(--sans); font-size: 16px; line-height: 1.5; }
.n-sheet:not([open]) { display: none; }
.n-sheet::backdrop { background: rgba(5, 7, 9, 0.72); background: var(--scrim, rgba(5, 7, 9, 0.72)); }
.n-sheet:focus { outline: none; }
.n-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-h);
  padding: 0 var(--gutter); background: var(--raised); border-bottom: 1px solid var(--hair); }
.n-sheet__close { border-color: var(--line); }
.n-sheet__nav { display: flex; flex-direction: column; padding: 4px var(--gutter) 0; }
.n-sheet__nav--acct { padding-top: 0; }
.n-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--hair-soft); font-size: 16px; font-weight: 500; color: var(--t1); text-decoration: none; }
.n-sheet__row:hover { color: var(--t1); background: var(--surface); }
.n-sheet__row[aria-current="page"], .n-sheet__row[aria-current="true"] { color: var(--accent); font-weight: 600; }
.n-sheet__row svg { color: var(--t3); flex: none; }
.n-sheet__row:focus-visible, .n-sheet__tile:focus-visible { outline-offset: -2px; }
.n-sheet__row--btn { width: 100%; margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--hair-soft); border-radius: 0; text-align: left; font: inherit; font-size: 16px; font-weight: 500; color: var(--t1); cursor: pointer; }
.n-sheet__row--sub { font-size: 15px; min-height: 44px; }
.n-sheet__rl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.n-sheet__rl svg { color: var(--t2); }
.n-sheet__who { padding: 16px var(--gutter) 0; font-size: 13px; color: var(--t3); }
.n-sheet__cta { padding: 20px var(--gutter) 24px; }
/* the page's own group ("This report", "On this page") */
.n-sheet__grp { padding: 14px var(--gutter) 12px; border-bottom: 1px solid var(--hair); }
.n-sheet__grpt { margin: 0 0 10px; font-weight: 500; }
.n-sheet__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.n-sheet__tile { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--t1); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; }
.n-sheet__tile:hover { background: var(--hair-soft); color: var(--t1); }
.n-sheet__tile[aria-current], .n-sheet__tile[aria-pressed="true"] { border-color: var(--accent); }
.n-sheet__tile svg { color: var(--t2); flex: none; }
.n-sheet__tl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.n-sheet__tt { overflow-wrap: anywhere; }
.n-sheet__tm { font-size: 12px; font-weight: 400; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-sheet__list { display: flex; flex-direction: column; }
.n-sheet__list .n-sheet__row:last-child { border-bottom: 0; }
@keyframes n-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 699px) {
  .n-sheet { position: fixed; inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - 24px); border-top: 1px solid var(--line); border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .n-sheet[open] { animation: n-sheet-up .16s ease-out; }
  .n-sheet__head { border-radius: 12px 12px 0 0; }
  .n-sheet__cta { padding-bottom: 20px; }
}
@media (min-width: 700px) {
  .n-sheet { position: fixed; inset: 0 0 0 auto; width: 380px; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-left: 1px solid var(--line); border-radius: 0; }
  /* with a classic (mouse) scrollbar the page keeps its scrollbar lane while the menu is open (scrollbar-gutter: stable), so nothing
     jumps; the panel sits just left of that lane. Touch and overlay scrollbars have no lane. */
  .n-sheet__head { padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 24px; }   /* keeps ✕ where ☰ was on tablets (wide.md 2) */
  .n-sheet__nav, .n-sheet__cta, .n-sheet__who, .n-sheet__grp { padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 1100px) { .n-sheet__head { padding-right: 24px; } }
@media (prefers-reduced-motion: reduce) { .n-sheet[open] { animation: none; } }

/* ================= chrome: checkout header (round 5, SPEC5 C4: Back at every width, pinned at every width) ================= */
.n-chead { height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--ground); border-bottom: 1px solid var(--hair-soft); }
.n-chead__in { height: var(--nav-h); display: flex; align-items: center; gap: 16px; }
.n-chead__title { font-size: 14px; font-weight: 500; color: var(--t1); }
.n-chead__secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); white-space: nowrap; margin-left: auto; }
.n-chead__back { min-height: 44px; }
.n-chead { position: sticky; top: 0; z-index: 30; }   /* round 5 integration: pinned on computers too, so Back is always one click */
@media (max-width: 699px) {
  .n-chead__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .n-chead .n-chead__title, .n-chead .n-vrule { display: none; }
  .n-chead__back { grid-column: 1; grid-row: 1; justify-self: start; }
  .n-chead .n-wordmark { grid-column: 2; grid-row: 1; justify-content: center; min-width: 44px; }
  .n-chead .n-wordmark span { display: none; }                  /* mark only on phones; the link keeps its "NatGas Central home" name */
  .n-chead__secure { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}

/* ================= chrome: footer ================= */
.n-footer { background: var(--ground); border-top: 1px solid var(--hair); padding: 56px 0 40px; margin-top: auto; }
.n-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.n-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
.n-footer__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.n-footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.n-footer__links { display: flex; flex-direction: column; gap: 10px; }
.n-footer__links > a, .n-footer__links > span { font-size: 14px; color: var(--t2); }
.n-footer__links > a:hover { color: var(--t1); }
/* round 5: Log out and the email address are buttons styled as the column's links */
.n-footer__links > .n-footer__btn { display: inline-flex; align-self: flex-start; align-items: center; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--t2); text-align: left; cursor: pointer; }
.n-footer__links > .n-footer__btn:hover { color: var(--t1); text-decoration: none; }
.n-footer__note { margin-left: 6px; font-size: 12px; color: var(--t3); white-space: nowrap; }
.n-footer__sources { margin-top: 28px; font-size: 12px; line-height: 1.6; color: var(--t3); max-width: 1040px; }
.n-footer__bottom { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.n-footer__legal-text { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--t3); }
.n-footer__legal { display: flex; gap: 20px; white-space: nowrap; }
.n-footer__legal a { font-size: 13px; color: var(--t3); }
.n-footer__legal a:hover { color: var(--t1); }
.n-footer--slim { padding: 24px 0 32px; }
.n-footer--slim .n-footer__bottom { margin: 0; padding: 0; border: 0; align-items: center; }
@media (max-width: 1099px) {
  .n-footer__brand, .n-footer__cols { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .n-footer { padding: 28px 0 20px; }
  .n-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 16px; }
  .n-footer__col--contact { grid-column: 1 / -1; }
  .n-footer__links { gap: 0; }
  .n-footer__links > a, .n-footer__links > span, .n-footer__links > .n-footer__btn { min-height: 44px; display: flex; align-items: center; font-size: 15px; }
  .n-footer__bottom { flex-direction: column; gap: 8px; }
  .n-footer__legal { flex-wrap: wrap; column-gap: 20px; }
  .n-footer__legal a { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
}

/* ================= buttons ================= */
.n-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; background: transparent; color: var(--t1); transition: background-color .12s, border-color .12s, color .12s; }
.n-btn:hover { text-decoration: none; }
.n-btn--md { height: 40px; padding: 0 16px; font-size: 14px; }
.n-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.n-btn--xs { height: 32px; padding: 0 10px; font-size: 13px; }
.n-btn--touch { height: 44px; padding: 0 16px; font-size: 15px; }
.n-btn--primary { background: var(--fill); border-color: var(--fill); color: var(--on-fill); font-weight: 600; }
.n-btn--primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); color: var(--on-fill); }
.n-btn--secondary { border-color: var(--control); color: var(--t1); }
.n-btn--secondary:hover { border-color: var(--t2); background: var(--raised); color: var(--t1); }
.n-btn--destructive { border-color: var(--danger); color: var(--danger); }
.n-btn--destructive:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.n-btn--ghost { height: auto; min-height: 36px; padding: 0; border: 0; color: var(--accent); background: transparent; }
.n-btn--ghost:hover { color: var(--accent-hover); }
.n-btn--ghost.n-btn--touch { min-height: 44px; }
.n-btn--full { width: 100%; }
.n-btn[disabled], .n-btn[aria-disabled="true"] { background: transparent; border-color: var(--hair); color: var(--control); cursor: not-allowed; font-weight: 500; }
.n-btn--ghost[disabled], .n-btn--ghost[aria-disabled="true"] { border: 0; }
.n-btn svg { flex: none; }
.n-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--t1); }
.n-iconbtn:hover { background: var(--raised); color: var(--t1); }
.n-iconbtn--sm { width: 36px; height: 36px; }
.n-iconbtn--bare { border-color: transparent; }
.n-iconbtn[disabled] { color: var(--control); cursor: not-allowed; background: transparent; }
.n-btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 699px) { .n-btnrow--stack { flex-direction: column; align-items: stretch; } .n-btnrow--stack .n-btn { width: 100%; } }

/* ================= chips ================= */
.n-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: var(--raised); color: var(--t2); border: 1px solid var(--hair); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; flex: none; }
.n-chip--info { background: var(--accent-quiet); color: var(--accent); border-color: var(--accent-quiet); }
.n-chip--outline { background: transparent; color: var(--t2); border-color: var(--line); }
.n-chip--ai, .n-chip--sample { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; }
.n-chip--ai { height: 18px; padding: 0 5px; color: var(--t2); border-color: var(--line); }
.n-chip--sample { color: var(--accent); border-color: var(--accent); padding: 0 7px; }
.n-chip--late { background: transparent; color: var(--warn); border-color: var(--warn); }
.n-chip__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--t3); flex: none; }
.n-chip--status { color: var(--t1); }
.n-chip--ok .n-chip__dot { background: var(--ok); }
.n-chip--danger .n-chip__dot { background: var(--danger); }
.n-chip--warn .n-chip__dot { background: var(--warn); }
.n-chip--accent .n-chip__dot { background: var(--accent); }

/* ================= glyphs, deltas, calls ================= */
.n-glyph { display: inline-block; flex: none; }
.n-callword { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; color: var(--t1); }
.n-delta { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--t2); }
.n-delta--up { color: var(--up); } .n-delta--down { color: var(--down); }
.n-delta__basis { color: var(--t3); }

/* ================= section header, panel, kpi ================= */
.n-shead { display: flex; flex-direction: column; gap: 12px; }
.n-shead__desc { font-size: 16px; line-height: 1.6; color: var(--t2); max-width: 600px; text-wrap: pretty; }
.n-shead--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.n-shead--split > .n-shead__main { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 16px; }
.n-shead--split > .n-shead__desc { grid-column: 7 / span 6; }
@media (max-width: 1099px) { .n-shead--split { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } }

.n-panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.n-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.n-panel__title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--t1); }
.n-panel__title svg { color: var(--t2); }
.n-panel__body { padding: 20px 22px; min-width: 0; }
.n-panel__body--flush { padding: 0; }
.n-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 22px; border-top: 1px solid var(--hair); flex-wrap: wrap; font-size: 13px; color: var(--t3); }
@media (max-width: 699px) {
  .n-panel__head, .n-panel__foot { padding-left: 16px; padding-right: 16px; }
  .n-panel__body { padding: 16px; }
  .n-panel__body--flush { padding: 0; }
}

.n-kpis { display: grid; gap: 1px; background: var(--hair); }
.n-kpi { background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.n-kpi__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.n-kpi__label { font-size: 13px; font-weight: 500; color: var(--t2); line-height: 1.35; }
.n-kpi__labels { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.n-kpi__sub { font-size: 12px; font-weight: 400; color: var(--t3); line-height: 1.35; }
.n-kpi__code { font-family: var(--mono); font-size: 12px; color: var(--t3); letter-spacing: 0.02em; }
.n-kpi__value { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.n-kpi__num { font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; color: var(--t1); font-variant-numeric: tabular-nums; }
.n-kpi__unit { font-size: 14px; color: var(--t3); }
.n-kpi__lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--t2); font-variant-numeric: tabular-nums; }
.n-kpi__lines span + span { color: var(--t3); }
@media (max-width: 699px) {
  .n-kpi { padding: 14px 16px; }
  .n-kpi__num { font-size: 24px; }
}

/* ================= metric rows (key/value list) ================= */
.n-kv { display: flex; flex-direction: column; }
.n-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 36px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); }
.n-kv--dense .n-kv__row { min-height: 32px; padding: 6px 0; }
.n-kv__k { font-size: 13px; color: var(--t2); min-width: 0; }
.n-kv__v { font-size: 14px; color: var(--t1); font-variant-numeric: tabular-nums; text-align: right; }
.n-kv__sub { display: block; font-size: 12px; color: var(--t3); }
.n-kv--stack .n-kv__row { flex-direction: column; align-items: flex-start; gap: 2px; }
.n-kv--stack .n-kv__v { text-align: left; }

/* ================= tables ================= */
.n-tablewrap { width: 100%; }
.n-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.n-table th, .n-table td { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--hair-soft); font-size: 14px; color: var(--t1); text-align: right; vertical-align: middle; white-space: nowrap; }
.n-table thead th { height: 36px; background: var(--raised); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--t2); line-height: 1.25; }
.n-table--plain thead th { background: transparent; color: var(--t3); height: 32px; }
.n-table tbody th { font-weight: 500; }
.n-table .n-l { text-align: left; } .n-table .n-c { text-align: center; } .n-table .n-r { text-align: right; }
.n-table--compact th, .n-table--compact td { height: 36px; }
.n-table--wrap td, .n-table--wrap th { white-space: normal; }
.n-table tr.n-table__group th { height: 32px; background: var(--raised); border-bottom: 1px solid var(--hair-soft); font-size: 12px; font-weight: 500; color: var(--t2); text-align: left; }
.n-table tfoot td, .n-table tr.n-table__total td { border-top: 1px solid var(--line); font-weight: 600; }
.n-table tbody tr.n-table__hl th, .n-table tbody tr.n-table__hl td { background: var(--raised); }
.n-table caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: 12px; color: var(--t3); }
.n-table .n-sub { display: block; font-size: 12px; color: var(--t3); font-weight: 400; }
@media (max-width: 699px) { .n-table th, .n-table td { padding: 0 10px; font-size: 13px; } }

/* ================= call table (word first, then strength band, number small) ================= */
.n-calls { display: flex; flex-direction: column; }
.n-calls__head, .n-calls__row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1.3fr); column-gap: 16px; align-items: center; }
.n-calls--compact .n-calls__head, .n-calls--compact .n-calls__row { grid-template-columns: minmax(130px, 1.3fr) minmax(110px, 1fr) minmax(130px, 1.3fr); }
.n-calls__head { min-height: 32px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--t3); }
.n-calls__row { min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); color: var(--t1); }
a.n-calls__row:hover { background: var(--raised); color: var(--t1); }
.n-calls__h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n-calls__hl { font-size: 14px; font-weight: 600; color: var(--t1); }
.n-calls__period { font-family: var(--mono); font-size: 12px; color: var(--t3); letter-spacing: 0.02em; }
.n-calls__strength { font-size: 14px; color: var(--t2); white-space: nowrap; }
.n-calls__num { font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; margin-left: 4px; }
.n-calls__chg { font-size: 14px; color: var(--t2); font-variant-numeric: tabular-nums; }
.n-calls__chg strong { color: var(--t1); font-weight: 600; }
.n-calls__key { padding-top: 10px; font-size: 12px; line-height: 1.5; color: var(--t3); }
.n-calls__missing { padding: 14px 0; font-size: 14px; color: var(--t2); }
@media (max-width: 699px) {
  .n-calls__head { display: none; }
  .n-calls__row, .n-calls--compact .n-calls__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "h strength" "chg chg"; row-gap: 2px; min-height: 56px; }
  .n-calls__h { grid-area: h; }
  .n-calls__call { grid-area: call; justify-self: end; }
  .n-calls__strength { grid-area: strength; justify-self: end; font-size: 13px; }
  .n-calls__chg { grid-area: chg; font-size: 13px; }
  .n-calls__chg:empty { display: none; }
}

/* ================= since list ================= */
.n-since { display: flex; flex-direction: column; gap: 10px; }
.n-since__list { display: flex; flex-direction: column; }
.n-since__item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair-soft); font-size: 15px; line-height: 1.5; color: var(--t1); }
.n-since__item::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--t3); flex: none; transform: translateY(-2px); }
.n-since__item--quiet { color: var(--t2); }
.n-since__revised { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--t3); }
.n-since__revised svg { margin-top: 2px; color: var(--t3); }

/* ================= accordion (details/summary) ================= */
.n-acc { border-top: 1px solid var(--hair-soft); }
.n-acc--first { border-top: 0; }
.n-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--t1); }
.n-acc > summary:hover { color: var(--accent); }
.n-acc > summary .n-acc__chev { transition: transform .15s; color: var(--t2); }
.n-acc[open] > summary .n-acc__chev { transform: rotate(180deg); }
.n-acc__body { padding: 0 0 16px; }
.n-acc--faq { border-top: 1px solid var(--hair); }
.n-acc--faq > summary { min-height: 56px; padding: 12px 0; font-size: 16px; }
.n-acc--faq .n-acc__body { padding: 0 0 20px; max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--t2); }
@media (max-width: 699px) { .n-acc--faq > summary { min-height: 52px; font-size: 15px; } .n-acc--faq .n-acc__body { font-size: 15px; } }

/* ================= tabs + segmented ================= */
.n-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.n-tabs::-webkit-scrollbar { display: none; }
.n-tab { display: flex; align-items: center; height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; font-weight: 500; color: var(--t2); white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; }
.n-tab:hover { color: var(--t1); }
.n-tab[aria-selected="true"], .n-tab[aria-current="page"] { color: var(--t1); border-bottom-color: var(--accent); }
@media (max-width: 699px) { .n-tabs { gap: 20px; } .n-tab { font-size: 14px; } }

.n-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; align-self: flex-start; }
.n-seg__b { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--t2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.n-seg__b:hover { color: var(--t1); }
.n-seg__b[aria-pressed="true"] { background: var(--accent-quiet); color: var(--accent); }
.n-seg__b[disabled] { color: var(--control); cursor: not-allowed; }
@media (max-width: 699px) { .n-seg { padding: 1px; } .n-seg__b { height: 44px; padding: 0 12px; font-size: 14px; } }

/* ================= legend, caption, note ================= */
.n-legend { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; }
.n-legend__i { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); white-space: nowrap; }
.n-legend__v { color: var(--t1); font-weight: 500; font-variant-numeric: tabular-nums; }
.n-legend__sw { width: 18px; height: 8px; flex: none; }
.n-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--t3); }
.n-note svg { margin-top: 1px; }

/* ================= notices ================= */
.n-notice { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; color: var(--t1); }
.n-notice svg { margin-top: 2px; flex: none; color: var(--t2); }
.n-notice--error svg { color: var(--t1); }
.n-notice__body { flex: 1 1 auto; min-width: 0; }
.n-noticerow { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--t1); }
.n-noticerow > svg { color: var(--t2); }
.n-noticerow__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 699px) { .n-noticerow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 8px; padding: 12px 14px; } .n-noticerow > svg { margin-top: 2px; } .n-noticerow > .n-chip { grid-column: 2; justify-self: start; } }

/* ================= forms ================= */
.n-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.n-label { font-size: 13px; font-weight: 500; color: var(--t2); }
.n-label__opt { color: var(--t3); font-weight: 400; }
.n-input, .n-select, .n-textarea { width: 100%; height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--control); background: var(--raised); color: var(--t1); font-size: 15px; font-family: var(--sans); }
.n-textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.n-input::placeholder, .n-textarea::placeholder { color: var(--t3); }
.n-input:focus-visible, .n-select:focus-visible, .n-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.n-input[aria-invalid="true"] { border-color: var(--down); }
.n-input[readonly] { background: var(--surface); color: var(--t2); }
.n-selectwrap, .n-pwwrap { position: relative; }
.n-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.n-selectwrap > svg { position: absolute; right: 12px; top: 14px; pointer-events: none; color: var(--t2); }
.n-pwwrap .n-input { padding-right: 52px; }
.n-pwwrap > button { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--t2); }
.n-help { font-size: 12px; line-height: 1.5; color: var(--t3); }
.n-err { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t1); }
.n-err svg { color: var(--down); }
.n-check, .n-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--t1); cursor: pointer; }
.n-check input, .n-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--fill); flex: none; cursor: pointer; }
.n-radio__text { display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.n-radio__desc { font-size: 13px; font-weight: 400; color: var(--t3); }
.n-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; min-width: 0; }
.n-fieldset > legend { padding: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--t2); }
.n-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.n-formgrid > .n-span2 { grid-column: 1 / -1; }
@media (max-width: 699px) { .n-formgrid { grid-template-columns: minmax(0, 1fr); } }

/* ================= plan line (dashboard/degree days: only when action is needed) ================= */
.n-planline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--t1); font-variant-numeric: tabular-nums; }
.n-planline__text { color: var(--t2); }

/* ================= sparkline ================= */
.n-spark { display: inline-block; vertical-align: middle; overflow: visible; }

/* ================= modal + paywall ================= */
.n-modal-root { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.n-modal-scrim { position: absolute; inset: 0; background: var(--scrim); }
.n-modal { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.n-modal--wide { max-width: 640px; }
.n-modal__icon { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--t1); }
.n-modal__title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.n-modal__msg { font-size: 15px; line-height: 1.6; color: var(--t1); }
.n-modal__sub { font-size: 14px; line-height: 1.6; color: var(--t2); }
.n-modal__btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.n-modal__extra { padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--t3); }
.n-modal__close { position: absolute; top: 12px; right: 12px; }
@media (max-width: 699px) {
  .n-modal-root { align-items: flex-end; padding: 0; }
  .n-modal { max-width: none; border-radius: 12px 12px 0 0; padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); }
  .n-modal__btns .n-btn { flex: 1 1 100%; }
}

/* ================= toast ================= */
.n-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + var(--ngc-bottom-bar)); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.n-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; color: var(--t1); }
.n-toast svg { color: var(--t2); margin-top: 2px; }

/* ================= empty states / 404 (ui.empty) ================= */
.n-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); }
.n-empty svg { color: var(--t2); }
.n-empty__title { font-size: 18px; font-weight: 600; }
.n-empty__text { font-size: 15px; line-height: 1.6; color: var(--t2); max-width: 620px; }


/* ================= inline icons + chart container ================= */
.n-inline-icon, .n-link svg, .n-footer__note svg, .n-strip__link svg { display: inline-block; vertical-align: -2px; }
.n-link { display: inline-flex; align-items: center; gap: 6px; }
.n-chart { position: relative; width: 100%; min-width: 0; }
.n-chart > canvas { display: block; width: 100% !important; }

/* ================= report building blocks (NGC.ui.reportSection / exhibit / rangeSeg / chartBox) ================= */
.n-chart { height: var(--h, 240px); }
@media (max-width: 699px) { .n-chart { height: var(--hp, 180px); } }
.n-range { display: flex; align-items: center; gap: 12px; flex: none; }
.n-range__b { height: 24px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid transparent; font-size: 12px; font-weight: 500; color: var(--t3); white-space: nowrap; }
.n-range__b:hover { color: var(--t1); }
.n-range__b[aria-pressed="true"] { color: var(--t1); font-weight: 600; border-bottom-color: var(--accent); }
@media (max-width: 699px) { .n-range { gap: 4px; overflow-x: auto; max-width: 100%; } .n-range__b { height: 44px; padding: 0 10px; font-size: 14px; } }
.n-ex { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.n-ex__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.n-ex__lead { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.n-ex__title { font-size: 13px; font-weight: 600; color: var(--t1); }
.n-rsec { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; row-gap: 20px; padding: 56px 0; border-top: 1px solid var(--hair); }
.n-rsec__railin { position: sticky; top: var(--rsec-sticky, 104px); display: flex; flex-direction: column; gap: 12px; }
.n-rsec__top { display: flex; align-items: baseline; gap: 12px; }
.n-rsec__num { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--t2); flex: none; }
.n-rsec__title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.n-rsec__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.n-rsec__reading { font-size: 15px; line-height: 1.5; color: var(--t1); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.n-rsec__more { border-top: 0; }
.n-rsec__ex { min-width: 0; }
.n-rsec__na { display: flex; align-items: center; gap: 10px; min-height: 120px; padding: 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); font-size: 14px; color: var(--t2); }
@media (min-width: 700px) and (max-width: 1099px) { .n-rsec { grid-template-columns: 220px minmax(0, 1fr); column-gap: 28px; } .n-rsec__title { font-size: 19px; } }
@media (max-width: 699px) {
  .n-rsec { grid-template-columns: minmax(0, 1fr); padding: 36px 0; }
  .n-rsec__railin { position: static; }
  .n-rsec__title { font-size: 19px; }
}

/* ================= round-3 integration: shared pieces lifted from the modules ================= */

/* glossary explainers: ui.term (the word itself is the button) and ui.q (a small "?"); both open the one bubble (#ngc-tip) */
.n-term { position: relative; display: inline; margin: 0; padding: 0; background: none; border: 0; border-radius: 2px; font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; line-height: inherit;
  cursor: help; text-decoration: underline dotted var(--t3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.n-term:hover, .n-term[aria-expanded="true"] { color: var(--t1); text-decoration-color: var(--accent); }
.n-term::after { content: ""; position: absolute; inset: -8px -4px; }
.n-q { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1; color: var(--t3); vertical-align: 1px; flex: none; letter-spacing: 0; text-transform: none; cursor: help; }
.n-q::after { content: ""; position: absolute; inset: -14px; }
.n-q:hover, .n-q[aria-expanded="true"] { color: var(--t1); border-color: var(--t3); }
.n-tip { position: absolute; z-index: 70; width: 300px; max-width: calc(100vw - 16px); padding: 10px 12px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  font-family: var(--sans); text-align: left; letter-spacing: 0; text-transform: none; white-space: normal; }
.n-tip:empty { display: none; }
.n-tip__t { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--t1); }
.n-tip__b { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--t2); text-wrap: pretty; }

/* disclosure menu (NGC.menu.open): one floating role=menu anchored to its trigger */
.n-menu { position: absolute; z-index: 70; width: 300px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.n-menu[hidden] { display: none; }
.n-menu__h { padding: 6px 10px 4px; font-size: 12px; color: var(--t3); }
.n-menu__i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; background: transparent; border: 0; border-radius: var(--r-sm); text-align: left; color: var(--t1); font: inherit; }
.n-menu__i:hover, .n-menu__i:focus-visible { background: var(--hair); color: var(--t1); }
.n-menu__i:focus-visible { outline-offset: -2px; }
.n-menu__i[aria-current] { background: var(--accent-quiet); }
.n-menu__i > svg { color: var(--t2); }
.n-menu__l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.n-menu__t { font-size: 14px; font-weight: 500; }
.n-menu__d { font-size: 12px; color: var(--t3); }
.n-menu__s { font-size: 12px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n-menu__n { padding: 6px 10px 8px; font-size: 12px; line-height: 1.45; color: var(--t3); }
@media (max-width: 699px) { .n-menu__i { min-height: 52px; } }

/* members-only lock token (withheld sample figures) */
.n-lock { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--raised);
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 18px; color: var(--t3); white-space: nowrap; vertical-align: 1px; font-style: normal; letter-spacing: 0; text-transform: none; }
.n-lock svg { color: var(--t3); }
.n-lock--icon { position: relative; padding: 2px 6px; }

/* status word with a dot, no chip border (table cells, detail rows) */
.n-statusdot { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.n-statusdot > span:first-child { width: 6px; height: 6px; border-radius: 999px; background: var(--t3); flex: none; }
.n-statusdot--ok > span:first-child { background: var(--ok); }
.n-statusdot--danger > span:first-child { background: var(--danger); }
.n-statusdot--warn > span:first-child { background: var(--warn); }
.n-statusdot--accent > span:first-child { background: var(--accent); }

/* the weekly post's five-word house view: dot + word, square swatch, grouped key (one drawing on every page) */
.n-bword { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--t1); white-space: nowrap; }
.n-bword--strong { font-weight: 600; }
.n-bdot { flex: none; }
.n-bsw { display: block; box-sizing: border-box; width: 12px; height: 12px; flex: none; border-radius: 2px; }
.n-bsw--pressuring { background: var(--down); }
.n-bsw--cautious { background: color-mix(in srgb, var(--down) 55%, transparent); border: 1.5px solid var(--down); }
.n-bsw--balanced { background: transparent; border: 1.5px solid var(--t3); }
.n-bsw--supportive { background: color-mix(in srgb, var(--up) 55%, transparent); border: 1.5px solid var(--up); }
.n-bsw--constructive { background: var(--up); }
.n-bkey { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.n-bkey__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.n-bkey__row dt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--t1); }
.n-bkey__row dt span:last-child { margin-left: 4px; }
.n-bkey__row dd { font-size: 12px; color: var(--t3); white-space: nowrap; }
.n-bkey--compact { gap: 0; border-top: 1px solid var(--hair-soft); }
.n-bkey--compact .n-bkey__row { align-items: center; min-height: 36px; border-bottom: 1px solid var(--hair-soft); }

/* legend extras (ui.legend styles band / fill / hatch, a text-only item, and a tail after the value) */
.n-legend__sw--fill { width: 14px; height: 10px; border-radius: 2px; flex: none; background: var(--s1); opacity: var(--surplus-opacity); box-shadow: inset 0 0 0 1px var(--s1); }
.n-legend__sw--hatch { position: relative; width: 14px; height: 10px; border-radius: 2px; flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.n-legend__sw--hatch::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--hatch-color) 0 1px, transparent 1px 4px); opacity: var(--hatch-opacity); }
.n-legend__sw--band { position: relative; width: 14px; height: 10px; border-radius: 2px; flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.n-legend__sw--band::before { content: ""; position: absolute; inset: 0; background: var(--band-color); opacity: calc(var(--band-opacity) * 2.5); }
.n-legend__i--text { gap: 0; }
.n-legend__i--text .n-legend__v { margin-left: 6px; }

/* table header with a second line (ui.table cols[].sub) */
.n-table thead th .n-th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--t3); }

/* password strength slot and field errors (ui.password after / error) */
.n-field .n-err svg { flex: none; }
.n-select[aria-invalid="true"] { border-color: var(--down); }
a.n-seg__b { text-decoration: none; }
.n-seg__b[aria-current="page"] { background: var(--accent-quiet); color: var(--accent); }

/* =====================================================================================================
   ROUND 4 CORE (work4/SPEC4.md §3): outlook widget, price-impact colours, readouts, In brief, normals, chart key
   ===================================================================================================== */

/* ---------- the outlook widget (ui.outlookWidget): container-sized, never viewport-sized ---------- */
.n-ow { --ow-under: var(--ground); container-type: inline-size; container-name: n-ow; color: var(--t1); min-width: 0; }
.n-panel .n-ow, .n-ow--oncard { --ow-under: var(--surface); }
.n-ow__link { display: block; color: inherit; text-decoration: none; }
a.n-owm__row:hover, a.n-owd__cell:hover, a.n-owc__item:hover { background: var(--raised); color: inherit; }
.n-ow__h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n-ow__hl { font-size: 14px; font-weight: 600; color: var(--t1); line-height: 1.3; }
.n-ow__period { font-family: var(--mono); font-size: 12px; color: var(--t3); letter-spacing: .02em; line-height: 1.3; }
.n-ow__word { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; white-space: nowrap; }
.n-ow__word--bear { color: var(--down); } .n-ow__word--bull { color: var(--up); } .n-ow__word--neu { color: var(--t2); }
.n-ow__sep { color: var(--t3); font-weight: 400; }
.n-ow__num { font-variant-numeric: tabular-nums; }
.n-ow__glyph { flex: none; }
.n-owg--bear { fill: var(--down); } .n-owg--bull { fill: var(--up); } .n-owg--neu { fill: var(--t2); }
.n-ow__band { display: block; font-size: 13px; color: var(--t2); line-height: 1.35; }
.n-ow__chg { display: block; font-size: 13px; color: var(--t2); line-height: 1.4; font-variant-numeric: tabular-nums; }
.n-ow__chg strong, .n-calls__chg strong { color: var(--t1); font-weight: 600; }
.n-ow__chip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: 3px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--t1); margin-right: 2px; vertical-align: 1px; white-space: nowrap; }
.n-ow__key { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--t3); max-width: 900px; }
.n-ow__key b { color: var(--t2); font-weight: 500; }
.n-ow__key-s { display: none; }
.n-ow__key--short .n-ow__key-s { display: inline; }
.n-ow__ksw { display: inline-block; vertical-align: -1px; }
/* final r4: the caption's ring also prints outside a widget (How to read, How page), where --ow-under is unset and the fill fell back to
   black, so the "hollow ring" drew solid on light; the fallback keeps it hollow */
.n-ow-ghost { fill: var(--ow-under, none); stroke: var(--t3); stroke-width: 1.5; }
.n-ow-ghostline { stroke: var(--t3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.n-ow--sm .n-ow__word { font-size: 15px; }
.n-ow--sm .n-ow__word .n-ow__glyph { width: 10px; height: 10px; }
.n-ow--sm .n-ow__band, .n-ow--sm .n-ow__chg { font-size: 12.5px; }
.n-ow--sm .n-ow__key { margin-top: 10px; }
@container n-ow (max-width: 420px) { .n-ow__key-l { display: none; } .n-ow__key-s { display: inline; } }
/* missing outlook: dashes + the sentence, no graphics */
.n-ow__mrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); }
.n-ow__mdash { color: var(--t3); font-size: 15px; }
.n-ow__missing { padding: 14px 0 0; font-size: 14px; color: var(--t2); }

/* Meter (default): one bear <-> bull track per horizon; positions are % of the track (x = 50 + 50p) */
.n-owm__head, .n-owm__row { display: grid; grid-template-columns: minmax(150px, 1.05fr) minmax(220px, 2fr) minmax(150px, 1fr) minmax(170px, 1.2fr); column-gap: 28px; align-items: center; }
.n-ow--nochg .n-owm__head, .n-ow--nochg .n-owm__row { grid-template-columns: minmax(150px, 1.05fr) minmax(220px, 2fr) minmax(150px, 1fr); }
.n-owm__head { min-height: 30px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--t3); }
.n-owm__scale { display: flex; justify-content: space-between; align-items: center; }
.n-owm__scale span, .n-owm__phscale span { display: inline-flex; align-items: center; gap: 5px; }
.n-owm__row { position: relative; padding: 14px 0 13px; border-bottom: 1px solid var(--hair-soft); }
.n-owm__call { display: flex; flex-direction: column; gap: 2px; }
.n-owm__meter, .n-owm__chg { display: block; min-width: 0; }
.n-owm__phscale { display: none; }
.n-owm-track { position: relative; height: 26px; }
.n-owm-zone { position: absolute; top: 9px; height: 8px; }
.n-owm-zone--bear { left: 0; width: calc(33.333% - 1px); background: var(--down); opacity: var(--ow-zone-dir); border-radius: 4px 0 0 4px; }
.n-owm-zone--neu { left: calc(33.333% + 1px); width: calc(33.333% - 2px); background: var(--t3); opacity: var(--ow-zone-neu); }
.n-owm-zone--bull { left: calc(66.667% + 1px); right: 0; background: var(--up); opacity: var(--ow-zone-dir); border-radius: 0 4px 4px 0; }
.n-owm-fill { position: absolute; top: 9px; height: 8px; }
.n-owm-fill--bear { background: var(--down); border-radius: 4px 0 0 4px; }
.n-owm-fill--bull { background: var(--up); border-radius: 0 4px 4px 0; }
.n-owm-tick { position: absolute; top: 19px; width: 1px; height: 5px; background: var(--t3); opacity: .7; transform: translateX(-.5px); }
.n-owm-mid { position: absolute; top: 5px; left: 50%; width: 1px; height: 16px; background: var(--t3); opacity: .55; }
.n-owm-ghost { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1.5px solid var(--t3); background: var(--ow-under); box-sizing: border-box; }
.n-owm-dot { position: absolute; top: 5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--ow-under); box-sizing: border-box; }
.n-owm-dot--bear { background: var(--down); } .n-owm-dot--bull { background: var(--up); } .n-owm-dot--neu { background: var(--t2); }
.n-owm-move { position: absolute; top: 2px; height: 0; border-top: 1.5px solid var(--t3); }
.n-owm-move::after { content: ""; position: absolute; top: -4.5px; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.n-owm-move--r::after { right: -1px; border-left: 6px solid var(--t3); }
.n-owm-move--l::after { left: -1px; border-right: 6px solid var(--t3); }
@container n-ow (max-width: 780px) {
  .n-owm__head { display: none; }
  .n-owm__phscale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t3); padding: 0 0 6px; border-bottom: 1px solid var(--line); }
  .n-owm__row, .n-ow--nochg .n-owm__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "m m" "chg chg"; row-gap: 4px; padding: 12px 0 11px; }
  .n-owm__h { grid-area: h; } .n-owm__call { grid-area: call; align-items: flex-end; text-align: right; } .n-owm__meter { grid-area: m; margin-top: 2px; } .n-owm__chg { grid-area: chg; }
  .n-owm .n-ow__band { font-size: 12.5px; }
}
.n-ow--sm .n-owm__head { display: none; }
.n-ow--sm .n-owm__phscale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t3); padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.n-ow--sm .n-owm__row, .n-ow--sm.n-ow--nochg .n-owm__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "m m" "chg chg"; row-gap: 4px; padding: 12px 0 11px; }
.n-ow--sm .n-owm__h { grid-area: h; } .n-ow--sm .n-owm__call { grid-area: call; align-items: flex-end; text-align: right; } .n-ow--sm .n-owm__meter { grid-area: m; margin-top: 2px; } .n-ow--sm .n-owm__chg { grid-area: chg; }

/* Dial: one quiet half-dial per horizon (viewBox 0 0 200 122; the live report's needle angle) */
.n-owd__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-owd__cell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 20px 6px; border-left: 1px solid var(--hair); }
.n-owd__cell:first-child { border-left: 0; }
.n-owd__h { align-items: center; }
.n-owd__dial { display: block; width: 100%; max-width: 232px; margin: 10px 0 8px; }
.n-owd__svg { display: block; width: 100%; height: auto; }
.n-owd__txt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.n-owd__txt .n-ow__chg { margin-top: 4px; max-width: 260px; }
.n-owd-zone, .n-owd-fill { fill: none; stroke-width: 10; }
.n-owd-zone--bear { stroke: var(--down); stroke-opacity: var(--ow-zone-dir); }
.n-owd-zone--neu { stroke: var(--t3); stroke-opacity: var(--ow-zone-neu); }
.n-owd-zone--bull { stroke: var(--up); stroke-opacity: var(--ow-zone-dir); }
.n-owd-fill--bear { stroke: var(--down); } .n-owd-fill--bull { stroke: var(--up); }
.n-owd-tick { stroke: var(--t3); stroke-width: 1; }
.n-owd-ghost { stroke: var(--t3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.n-owd-needle { stroke: var(--t1); stroke-width: 2; stroke-linecap: round; }
.n-owd-hub { fill: var(--t1); }
.n-owd-mark { stroke: var(--ow-under); stroke-width: 2.5; }
.n-owd-mark--bear { fill: var(--down); } .n-owd-mark--bull { fill: var(--up); } .n-owd-mark--neu { fill: var(--t2); }
.n-owd-lab { font-family: var(--sans); font-size: 10.5px; fill: var(--t3); }
@container n-ow (max-width: 620px) {
  .n-owd__grid { grid-template-columns: 1fr; }
  .n-owd__cell { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "dial h" "dial txt"; column-gap: 14px; align-items: start; text-align: left; padding: 12px 0; border-left: 0; border-top: 1px solid var(--hair-soft); }
  .n-owd__cell:first-child { border-top: 0; padding-top: 2px; }
  .n-owd__h { grid-area: h; align-items: flex-start; } .n-owd__dial { grid-area: dial; margin: 2px 0 0; max-width: none; } .n-owd__txt { grid-area: txt; align-items: flex-start; gap: 1px; margin-top: 3px; }
  .n-owd__txt .n-ow__chg { margin-top: 3px; }
  .n-owd-lab { display: none; }
}
.n-ow--sm .n-owd__grid { grid-template-columns: 1fr; }
.n-ow--sm .n-owd__cell { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "dial h" "dial txt"; column-gap: 12px; align-items: start; text-align: left; padding: 10px 0; border-left: 0; border-top: 1px solid var(--hair-soft); }
.n-ow--sm .n-owd__cell:first-child { border-top: 0; padding-top: 2px; }
.n-ow--sm .n-owd__h { grid-area: h; align-items: flex-start; } .n-ow--sm .n-owd__dial { grid-area: dial; margin: 2px 0 0; max-width: none; } .n-ow--sm .n-owd__txt { grid-area: txt; align-items: flex-start; gap: 1px; margin-top: 3px; }
.n-ow--sm .n-owd-lab { display: none; }

/* Curve: the three horizons as one line, today solid, the last report dotted (two viewBoxes: wide 640 / narrow 340; sm 300) */
.n-owc__wrap { display: grid; grid-template-columns: minmax(0, 640px) minmax(260px, 1fr); column-gap: 40px; align-items: start; }
.n-owc__svg { display: block; width: 100%; height: auto; }
.n-owc__svg--narrow { display: none; }
.n-owc__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--t2); margin-top: 6px; }
.n-owc__legend span { display: inline-flex; align-items: center; gap: 7px; }
.n-owc__list { display: flex; flex-direction: column; }
.n-owc__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "chg chg"; column-gap: 12px; row-gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.n-owc__item:first-child { padding-top: 2px; }
.n-owc__h { grid-area: h; } .n-owc__call { grid-area: call; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .n-owc__chg { grid-area: chg; }
.n-owc-band--bull { fill: var(--up); fill-opacity: var(--ow-plot-dir); }
.n-owc-band--neu { fill: var(--t3); fill-opacity: var(--ow-plot-neu); }
.n-owc-band--bear { fill: var(--down); fill-opacity: var(--ow-plot-dir); }
.n-owc-edge { stroke: var(--t3); stroke-opacity: .35; stroke-dasharray: 1 3; }
.n-owc-mid { stroke: var(--t3); stroke-opacity: .55; }
.n-owc-last { fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.n-owc-today { fill: none; stroke: var(--t2); stroke-width: 2; stroke-linejoin: round; }
.n-owc-todaydot { fill: var(--t2); }
.n-owc-pt { stroke: var(--ow-under); stroke-width: 2.5; }
.n-owc-pt--bear { fill: var(--down); } .n-owc-pt--bull { fill: var(--up); } .n-owc-pt--neu { fill: var(--t2); }
.n-owc__svg text { font-family: var(--sans); }
.n-owc-ax { font-size: 11px; fill: var(--t3); } .n-owc-ax--dir { font-weight: 500; }
.n-owc-x { font-size: 12px; fill: var(--t2); font-weight: 500; }
.n-owc-xp { font-family: var(--mono); font-size: 10.5px; fill: var(--t3); }
.n-owc__svg--narrow .n-owc-ax { font-size: 11.5px; } .n-owc__svg--narrow .n-owc-x { font-size: 12.5px; }
.n-owc__svg--sm .n-owc-ax { font-size: 12px; } .n-owc__svg--sm .n-owc-x { font-size: 12.5px; } .n-owc__svg--sm .n-owc-xp { font-size: 11.5px; }
.n-owc-v { font-size: 12.5px; font-weight: 600; fill: var(--t1); paint-order: stroke; stroke: var(--ow-under); stroke-width: 4px; stroke-linejoin: round; }
@container n-ow (max-width: 820px) { .n-owc__wrap { grid-template-columns: 1fr; } .n-owc__list { margin-top: 14px; } }
@container n-ow (max-width: 480px) {
  .n-owc__svg--wide { display: none; } .n-owc__svg--narrow { display: block; }
  .n-owc__h .n-ow__period { display: none; } .n-owc__item { padding: 9px 0; }
}
.n-ow--sm .n-owc__wrap { grid-template-columns: 1fr; }
.n-ow--sm .n-owc__list { margin-top: 12px; }
.n-ow--sm .n-owc__h .n-ow__period { display: none; }
.n-ow--sm .n-owc__item { padding: 9px 0; }

/* ---------- price-impact colours (ui.delta with a key, ui.colourLegend, ui.colourSwitch, ui.colourHelp) ---------- */
.n-c { white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-c--sup, .n-c--up { color: var(--up); }
.n-c--pre, .n-c--down { color: var(--down); }
.n-c--flat { color: var(--t2); }
.n-c--wb { display: inline-block; }
.n-c__w { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; letter-spacing: 0; }
.n-c__w--inline { display: inline; }
.n-c--flat .n-c__w { color: var(--t3); }
.n-clegend { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--t2); }
.n-clegend__t { color: var(--t2); }
.n-clegend__g { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: inherit; row-gap: 4px; flex: none; max-width: 100%; }   /* the three swatches move to the next line together */
.n-clegend__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.n-clegend__sw { width: 8px; height: 8px; border-radius: 1px; flex: none; }
.n-clegend__sw--up { background: var(--up); } .n-clegend__sw--down { background: var(--down); } .n-clegend__sw--flat { background: var(--t3); }
.n-clegend__help { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.n-clegend__help:hover { color: var(--accent-hover); }
.n-clegend--compact { font-size: 11.5px; column-gap: 12px; }
.n-cswitch { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n-cswitch__l { font-size: 12.5px; color: var(--t3); }
.n-chelp p { font-size: 14px; line-height: 1.6; color: var(--t2); margin: 0 0 10px; text-wrap: pretty; }
.n-chelp__asof { font-size: 13px !important; color: var(--t3) !important; }
.n-ddkey__s { font-weight: 600; color: var(--t2); }   /* the + / − in ui.ddKey (the degree-day key line) */
@media (max-width: 699px) { .n-clegend { font-size: 12px; } .n-clegend__help { min-height: 32px; } }

/* ---------- readouts (ui.readout): the degree-day pattern in report rails ---------- */
.n-ro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.n-ro__l { margin: 0; line-height: 1.3; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.n-ro__g { white-space: nowrap; }
.n-ro__w { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.n-ro__n { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; }
.n-ro__sep { color: var(--t3); font-weight: 400; }
.n-ro__u { font-size: 14px; color: var(--t2); }
.n-ro__t { font-size: 14px; color: var(--t2); white-space: nowrap; }
.n-ro--sup .n-ro__w, .n-ro--sup .n-ro__n, .n-ro--up .n-ro__w, .n-ro--up .n-ro__n { color: var(--up); }
.n-ro--pre .n-ro__w, .n-ro--pre .n-ro__n, .n-ro--down .n-ro__w, .n-ro--down .n-ro__n { color: var(--down); }
.n-ro--flat .n-ro__w { color: var(--t2); } .n-ro--flat .n-ro__n { color: var(--t2); }
.n-ro--none .n-ro__w, .n-ro--none .n-ro__n { color: var(--t1); }
.n-ro__b { margin: 0; font-size: 13px; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.n-ro__s { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--t1); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.n-ro--sm .n-ro__w { font-size: 16px; } .n-ro--sm .n-ro__n { font-size: 17px; }
.n-ro--lg .n-ro__w { font-size: 24px; } .n-ro--lg .n-ro__n { font-size: 28px; }
.n-ro .n-lock { vertical-align: 2px; }
.n-rsec__readout { min-width: 0; }
@media (max-width: 699px) { .n-ro__w { font-size: 17px; } .n-ro__n { font-size: 19px; } .n-ro__u, .n-ro__t { font-size: 13px; } }

/* ---------- In brief (ui.brief) ---------- */
.n-brief { display: flex; flex-direction: column; gap: 8px; }
.n-brief .n-overline { margin: 0; }
.n-brief__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.n-brief__i { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--t1); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.n-brief__i::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 1px; background: var(--t3); }
.n-brief__go { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: 2px; color: var(--t3); vertical-align: -2px; }
.n-brief__go::after { content: ""; position: absolute; inset: -12px -10px; }
.n-brief__go:hover { color: var(--accent); }

/* ---------- normals: legend swatch, chart key ---------- */
.n-legend__ref { stroke: var(--ref); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.01 4.6; }
.n-legend__i--ref .n-legend__v { color: var(--ref); }
.n-ckey { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 24px; }
.n-ckey__i { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--t2); }
.n-ckey__i strong { display: block; color: var(--t1); font-weight: 600; font-size: 13.5px; }
.n-ckey__sw { margin-top: 4px; overflow: visible; }
.n-ckey--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; }
.n-ckey--compact .n-ckey__i { font-size: 12.5px; line-height: 1.45; }
.n-ckey--compact .n-ckey__i strong { font-size: 13px; }
.n-ckey-meas { stroke: var(--s1); stroke-width: 2; stroke-linecap: round; }
.n-ckey-ref { stroke: var(--ref); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.01 5; }
.n-ckey-proj { stroke: var(--s1); stroke-width: 2; stroke-dasharray: 6 4; }
.n-ckey-cmp { stroke: var(--cmp2); stroke-width: 1.25; }
.n-ckey-smooth { stroke: var(--s1); stroke-opacity: 0.55; stroke-width: 1.25; }
.n-ckey-above { fill: var(--s1); fill-opacity: .35; }
.n-ckey-hatchline { stroke: var(--hatch-color); stroke-width: 1.2; }

/* the plain-table style inside the widget follows the widget's width too (ui.callTable itself stays viewport-based elsewhere) */
@container n-ow (max-width: 640px) {
  .n-ow--table .n-calls__head { display: none; }
  .n-ow--table .n-calls__row, .n-ow--table .n-calls--compact .n-calls__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "h strength" "chg chg"; row-gap: 2px; min-height: 56px; }
  .n-ow--table .n-calls__h { grid-area: h; } .n-ow--table .n-calls__call { grid-area: call; justify-self: end; }
  .n-ow--table .n-calls__strength { grid-area: strength; justify-self: end; font-size: 13px; } .n-ow--table .n-calls__chg { grid-area: chg; font-size: 13px; }
  .n-ow--table .n-calls__chg:empty { display: none; }
}
.n-ow--sm.n-ow--table .n-calls__head { display: none; }
.n-ow--sm.n-ow--table .n-calls__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h call" "h strength" "chg chg"; row-gap: 2px; min-height: 56px; }
.n-ow--sm.n-ow--table .n-calls__h { grid-area: h; } .n-ow--sm.n-ow--table .n-calls__call { grid-area: call; justify-self: end; }
.n-ow--sm.n-ow--table .n-calls__strength { grid-area: strength; justify-self: end; font-size: 13px; } .n-ow--sm.n-ow--table .n-calls__chg { grid-area: chg; font-size: 13px; }
.n-ow--sm.n-ow--table .n-calls__chg:empty { display: none; }

/* =====================================================================================================
   ROUND 5 CORE (work5/SPEC5.md §3): scroll hints, links, focus, phone polish, tablet sections, print
   ===================================================================================================== */

/* ---------- ui.link {block}, ui.email ---------- */
.n-link--block { display: inline-flex; align-items: center; }
.n-email { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--accent); cursor: pointer; text-align: left; }
.n-email:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- scroll hints (SPEC5 C5): a 32 px fade on the side that has more to see; core keeps data-more in step ---------- */
[data-scroll-x][data-more~="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
[data-scroll-x][data-more~="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
[data-scroll-x][data-more~="start"][data-more~="end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* ---------- keyboard focus (SPEC5 C7) ---------- */
.n-owm__row.n-ow__link { padding-inline: 8px; margin-inline: -8px; }     /* the focus ring no longer touches "Next 1–3 months" */

/* ---------- headings balance (SPEC5 C9, small_screen L2) ---------- */
.n-overline, .n-h1, .n-h2, .n-h3, .n-kpi__head { text-wrap: balance; }

/* ---------- explanation line length (SPEC5 C10, wide.md 12) ---------- */
.n-ow__key, .n-note { max-width: 88ch; }

/* ---------- report sections at 700–939 (SPEC5 C10, wide.md 5): the rail above the chart, in two columns; charts full width ---------- */
@media (min-width: 700px) and (max-width: 939px) {
  .n-rsec { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .n-rsec__railin { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 12px; align-items: start; }
  .n-rsec__top, .n-rsec__chips, .n-rsec__readout, .n-rsec__reading { grid-column: 1; }
  .n-rsec__railin > .n-kv { grid-column: 2; grid-row: 1 / span 4; }
  .n-rsec__railin > .n-rsec__more { grid-column: 2; }
}

/* ---------- phones (SPEC5 C9): readouts, tap sizes, inputs, the dialog's close button, a 12 px floor ---------- */
@media (max-width: 699px) {
  /* readouts: the word on line 1, the signed number on line 2, every time (small_screen M5) */
  .n-ro--md .n-ro__sep, .n-ro--lg .n-ro__sep { display: none; }
  .n-ro--md .n-ro__g, .n-ro--lg .n-ro__g { display: block; }
  /* tap targets (small_screen M7) */
  .n-btn--md, .n-btn--sm { height: 44px; }
  .n-btn--ghost { height: auto; min-height: 44px; }
  .n-modal__btns .n-btn { height: 48px; }
  .n-modal__extra .n-link { min-height: 44px; display: inline-flex; align-items: center; }
  .n-clegend__help { min-height: 44px; }
  .n-link--block { min-height: 44px; }
  dt > .n-term::after, .n-kpi .n-term::after { inset: -12px -6px; }
  /* iOS no longer zooms into a form box (small_screen M9) */
  .n-input, .n-select, .n-textarea { font-size: 16px; }
  /* the dialog's close button stays visible while its content scrolls (small_screen M13) */
  .n-modal > .n-modal__close { position: sticky; top: -12px; z-index: 2; align-self: flex-end; flex: none; margin: -12px -4px -46px 0; background: var(--raised); border-radius: var(--r-sm); }
  .n-modal > .n-modal__close ~ .n-modal__title { padding-right: 40px; }
  /* a 12 px floor for small text (small_screen L1) */
  .n-owm__phscale, .n-ow--sm .n-owm__phscale, .n-ow__chip, .n-c__w, .n-chip--ai, .n-chip--sample { font-size: 12px; }
}

/* ---------- print (SPEC5 C11, wide.md 14; tested in work5/wide/print_fix.css). Report and post selectors live in their modules.
   Paper only. Every rule skips html.ngc-pdf, the generator's PDF render (BUILD_SPEC §4.7): Chromium applies print media inside
   page.pdf(), and that PDF must keep the screen layout it was measured in (one continuous 1400 px page) and the reader's theme
   (a dark PDF stays dark). The :where() guard adds no specificity, so on paper each rule weighs exactly what the prototype's did.
   The A4 page is a NAMED page for the same reason: an @page rule cannot be scoped by a class, and a bare one turns the PDF's
   1400 px landscape page into a portrait page with the content reflowed at ~700 px. ---------- */
@media print {
  @page ngc-paper { size: A4; margin: 14mm 12mm; }
  :where(html:not(.ngc-pdf)) body { page: ngc-paper; }
  html:where(:not(.ngc-pdf)), :where(html:not(.ngc-pdf)) body { background: #fff !important; }
  :where(html:not(.ngc-pdf)) body { padding-bottom: 0 !important; }
  :where(html:not(.ngc-pdf)) .n-strip, :where(html:not(.ngc-pdf)) .n-nav, :where(html:not(.ngc-pdf)) .n-mhead, :where(html:not(.ngc-pdf)) .n-chead, :where(html:not(.ngc-pdf)) #ngc-toasts, :where(html:not(.ngc-pdf)) #ngc-overlay, :where(html:not(.ngc-pdf)) #ngc-tip,
  :where(html:not(.ngc-pdf)) #ngc-menu, :where(html:not(.ngc-pdf)) .n-skip, :where(html:not(.ngc-pdf)) .n-footer__top, :where(html:not(.ngc-pdf)) .n-footer__sources, :where(html:not(.ngc-pdf)) .n-range, :where(html:not(.ngc-pdf)) .n-cswitch,
  :where(html:not(.ngc-pdf)) .n-q, :where(html:not(.ngc-pdf)) .n-brief__go, :where(html:not(.ngc-pdf)) .n-menubtn, :where(html:not(.ngc-pdf)) .n-clegend__help { display: none !important; }
  :where(html:not(.ngc-pdf)) .n-rsec__railin { position: static !important; }
  :where(html:not(.ngc-pdf)) .n-owm-zone, :where(html:not(.ngc-pdf)) .n-owm-fill, :where(html:not(.ngc-pdf)) .n-owm-dot, :where(html:not(.ngc-pdf)) .n-owm-mid, :where(html:not(.ngc-pdf)) .n-owm-tick, :where(html:not(.ngc-pdf)) .n-owm-ghost,
  :where(html:not(.ngc-pdf)) .n-bsw, :where(html:not(.ngc-pdf)) .n-clegend__sw, :where(html:not(.ngc-pdf)) .n-legend__sw, :where(html:not(.ngc-pdf)) .n-strip__dot, :where(html:not(.ngc-pdf)) .n-chip__dot,
  :where(html:not(.ngc-pdf)) .n-statusdot > span:first-child { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :where(html:not(.ngc-pdf)) .n-rsec { padding: 20px 0; }
  :where(html:not(.ngc-pdf)) .n-ex, :where(html:not(.ngc-pdf)) .n-chart, :where(html:not(.ngc-pdf)) table, :where(html:not(.ngc-pdf)) .n-owm__row, :where(html:not(.ngc-pdf)) figure { break-inside: avoid; }
  :where(html:not(.ngc-pdf)) h1, :where(html:not(.ngc-pdf)) h2, :where(html:not(.ngc-pdf)) h3, :where(html:not(.ngc-pdf)) .n-rsec__top { break-after: avoid; }
  :where(html:not(.ngc-pdf)) [data-scroll-x] { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; }
  /* charts keep their drawn shape on the narrower page (the canvas scales with its own aspect ratio) */
  :where(html:not(.ngc-pdf)) .n-chart { height: auto !important; }
  :where(html:not(.ngc-pdf)) .n-chart > canvas { height: auto !important; }
  :where(html:not(.ngc-pdf)) .n-term { text-decoration: none; }
  :where(html:not(.ngc-pdf)) a[href] { text-decoration: none; }
}

/* =====================================================================================================
   REAL-SITE ADDITIONS (not in the prototype, which re-rendered the whole page on every change)
   ===================================================================================================== */

/* ---------- the two colour modes, printed side by side (BUILD_SPEC §1.14) ----------
   <html data-colour-mode="impact|direction">: the inline head script sets it from localStorage.ngc_colour_mode before the first
   paint and NGC.colourMode (ngc-core.js) changes it on the reader's switch; a missing attribute counts as impact (the default).
   A coloured value carries both tones: data-ci="sup|pre|flat|up|down|none" (Price impact) and data-cd="up|down|flat|none" (Up / down).
   data-ci is up/down for a price: impact.classify colours a price by its own direction in BOTH modes (green up, red down), so
   in Price impact mode a price delta takes "up"/"down" where any other measure takes "sup"/"pre" (BUILD_SPEC Appendix G item 16).
   These rules give it the prototype's .n-c--<tone> colour for the active mode; "none" stays uncoloured. SVG marks take the colour
   through currentColor. A readout carries the pair on .n-ro (its word and number inherit, as with .n-ro--<tone>).
   A word or sentence that depends on the mode is printed twice, .n-cm--impact and .n-cm--direction; the other mode's copy is
   display:none, so screen readers skip it as well. */
html:not([data-colour-mode="direction"]) [data-ci="sup"], html:not([data-colour-mode="direction"]) [data-ci="up"], html[data-colour-mode="direction"] [data-cd="up"] { color: var(--up); }
html:not([data-colour-mode="direction"]) [data-ci="pre"], html:not([data-colour-mode="direction"]) [data-ci="down"], html[data-colour-mode="direction"] [data-cd="down"] { color: var(--down); }
html:not([data-colour-mode="direction"]) [data-ci="flat"], html[data-colour-mode="direction"] [data-cd="flat"] { color: var(--t2); }
html:not([data-colour-mode="direction"]) [data-ci="flat"] .n-c__w { color: var(--t3); }
html:not([data-colour-mode="direction"]) .n-cm--direction, html[data-colour-mode="direction"] .n-cm--impact { display: none !important; }

/* ---------- touch-size buttons on phones only (BUILD_SPEC §1.15): one md button that is the prototype's "touch" size ≤ 699 px ---------- */
@media (max-width: 699px) {
  .n-btn--touch-phone { height: 44px; padding: 0 16px; font-size: 15px; }
  .n-btn--ghost.n-btn--touch-phone { height: auto; min-height: 44px; padding: 0; }
}

/* ---------- dialogs: native <dialog class="n-modal-root"> (NGC.modal, the paywall, confirms) ----------
   showModal() gives the focus trap, Esc, the inert page and ::backdrop (= the prototype's .n-modal-scrim). The dialog fills the
   viewport and centres its .n-modal box exactly as the prototype's .n-modal-root did (phones: a bottom sheet); a click on the
   dialog outside the box closes a dismissable dialog. A server-printed dialog with data-ngc-open is opened by ngc-core.js on
   load (showModal); printed with the open attribute as well, it still shows without JavaScript (with the scrim, below). */
dialog.n-modal-root { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; color: var(--t1); overflow: hidden; }
dialog.n-modal-root:not([open]) { display: none; }
dialog.n-modal-root::backdrop { background: rgba(5, 7, 9, 0.72); background: var(--scrim, rgba(5, 7, 9, 0.72)); }
dialog.n-modal-root:focus { outline: none; }
dialog.n-modal-root[open]:not(:modal) { background: rgba(5, 7, 9, 0.72); background: var(--scrim, rgba(5, 7, 9, 0.72)); }

/* ---------- plan line action on phones (§0.1 rule 10, Phase 3): "Reactivate" or "Renew by paying again" is a 44 px tap target;
   the negative margin keeps the line exactly as tall as the prototype's text link ---------- */
@media (max-width: 699px) {
  .n-planline .n-link { min-height: 44px; margin-block: -12px; }
}

/* ---------- live boxes (ngc-site.js, BUILD_SPEC §1.7): the prototype left a hidden fact out of the page; cached public pages print
   it `hidden` instead (the status strip's "Latest report" item and its rule once the newest report is 3+ days old, Home's latest
   lines) so /status can bring it back. Hidden means not shown, whatever display the component gives it: .n-strip__item's
   inline-flex beat the browser's own [hidden] rule and visitors kept seeing the stale item (edge test, 6 Oct). ---------- */
[data-ngc-live-box][hidden] { display: none !important; }