/* ============================================================
   NEPSE DECODE — Design System v1
   One language for every page. Private Ledger direction:
   Fraunces + Inter, cream paper, deep green, restrained gold.
   No gradients, no shadows-as-design, no gimmicks.
   Mobile-first: designed at 390px, enhanced for desktop.
   ============================================================ */

:root {
  /* ---- Paper & ink ---- */
  --paper: #FAF7F0;
  --paper-deep: #F3EEE2;
  --card: #FFFFFF;
  --ink: #1B1A17;
  --ink-soft: #4A463D;
  --muted: #6F6A5E;
  --hairline: #E7DFCE;
  --hairline-soft: #F0EAD9;

  /* ---- Brand ---- */
  --green-950: #0A2E22;
  --green-900: #0B3D2E;
  --green-700: #14543F;
  --green-100: #E3EFE7;
  --gold: #B98F3E;
  --gold-soft: #F5EBD3;

  /* ---- Data ---- */
  --up: #177245;
  --up-bg: #E6F2EA;
  --down: #B3372A;
  --down-bg: #FBEDEA;

  /* ---- Type ---- */
  --serif: "Spectral", "Noto Serif Devanagari", Georgia, serif; /* Fraunces retired — one serif story: Spectral (Wave A) */
  --sans: "Inter", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;

  /* ---- Shape ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Space (4px base) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px;
}

/* ---- Reset for suite scope ---- */
.nd, .nd *, .nd *::before, .nd *::after { box-sizing: border-box; margin: 0; padding: 0; }

.nd {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.nd img { max-width: 100%; display: block; }
.nd a { color: inherit; }
.nd ul, .nd ol { list-style: none; }
.nd button { font: inherit; }

/* ---- Numbers: always tabular, never jumping ---- */
.nd .num, .nd td, .nd .stat-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   GRID — mobile-first
   390px: single column. ≥900px: 12-col, 8+4 for hero.
   ============================================================ */
.nd-wrap {
  width: min(1200px, 100% - 32px);
  margin: 0 auto;
}
.nd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .nd-grid { grid-template-columns: repeat(12, 1fr); gap: var(--s6); }
  .nd-main { grid-column: span 8; }
  .nd-rail { grid-column: span 4; }
  .nd-full { grid-column: 1 / -1; }
  .nd-half { grid-column: span 6; }
  .nd-third { grid-column: span 4; }
}

/* ============================================================
   TYPE SCALE — every size has a job
   ============================================================ */
.nd-display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.nd-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.nd-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nd-h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0;
}
.nd-kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
}
.nd-kicker.gold { color: var(--gold); }
.nd-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44ch;
}
.nd-body-sm { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.nd-caption {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================
   SECTION HEADERS — kicker + headline + optional link
   One pattern everywhere. No exceptions.
   ============================================================ */
.nd-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
}
.nd-section-head h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.01em; }
.nd-section-head .nd-kicker { display: block; margin-bottom: var(--s1); }
.nd-section-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
  white-space: nowrap;
}
.nd-section-link:hover { text-decoration: underline; }

/* ============================================================
   CARDS — one language
   White on cream, 1px hairline, 12px radius, 20px padding.
   Color is earned: only for data (up/down) or brand moments.
   ============================================================ */
.nd-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s5);
}
.nd-card.flush { padding: 0; overflow: hidden; }
.nd-card.tint { background: var(--paper-deep); }

/* Market hero card — deep green, the brand moment */
.nd-hero-card {
  background: var(--green-950);
  color: #F5F1E6;
  border-radius: var(--r-lg);
  padding: var(--s6);
  position: relative;
  overflow: hidden;
}
.nd-hero-card .nd-kicker { color: var(--gold); }
.nd-hero-card .nd-caption { color: rgba(245, 241, 230, 0.62); }

/* ============================================================
   STAT ROWS — compact figures, label above, value below
   ============================================================ */
.nd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}
@media (min-width: 640px) { .nd-stats.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.nd-stat .stat-l {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.nd-stat .stat-v {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.nd-stat .stat-s { font-size: 0.8rem; color: var(--muted); }

/* ============================================================
   CHANGE PILLS — red/green only where change is shown
   ============================================================ */
.nd-chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.nd-chg.up { color: var(--up); }
.nd-chg.down { color: var(--down); }
.nd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.nd-pill.live { background: var(--up-bg); color: var(--up); }
.nd-pill.closed { background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--hairline); }
.nd-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nd-pill.live .dot { animation: nd-pulse 1.6s ease-in-out infinite; }
@keyframes nd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   FRESHNESS — one pattern: "as of X · 15-min delayed"
   ============================================================ */
.nd-fresh {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.78rem;
  color: var(--muted);
}
.nd-fresh::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ============================================================
   MOVER ROWS — symbol, name, price, change. Nothing else.
   ============================================================ */
.nd-movers { display: flex; flex-direction: column; }
.nd-mover {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline-soft);
  text-decoration: none;
}
.nd-mover:last-child { border-bottom: 0; }
.nd-mover .m-sym { font-weight: 700; font-size: 0.92rem; }
.nd-mover .m-name { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-mover .m-price { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.nd-mover .m-chg { font-size: 0.82rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.nd-mover .m-chg.up { color: var(--up); }
.nd-mover .m-chg.down { color: var(--down); }

/* ============================================================
   NEWS LIST — headline-first, compact, scannable
   ============================================================ */
.nd-news { display: flex; flex-direction: column; }
.nd-news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline-soft);
  text-decoration: none;
}
.nd-news-item:last-child { border-bottom: 0; }
.nd-news-item .n-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.nd-news-item .n-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.nd-news-item:hover .n-title { color: var(--green-700); }
.nd-news-item .n-meta { font-size: 0.78rem; color: var(--muted); }

/* ============================================================
   TABS — underline style, one pattern
   ============================================================ */
.nd-tabs {
  display: flex;
  gap: var(--s6);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s5);
  overflow-x: auto;
}
.nd-tab {
  background: none;
  border: 0;
  padding: var(--s3) 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.nd-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green-900); }

/* ============================================================
   BUTTONS — two kinds only
   ============================================================ */
.nd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.nd-btn.primary { background: var(--green-900); color: #fff; }
.nd-btn.primary:hover { background: var(--green-700); }
.nd-btn.ghost { background: transparent; color: var(--green-900); border-color: var(--green-900); }
.nd-btn.ghost:hover { background: var(--green-100); }

/* ============================================================
   PAGE SCAFFOLD — sidebar + content (desktop), top nav (mobile)
   ============================================================ */
.nd-shell { display: block; }
@media (min-width: 1024px) {
  .nd-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
}
.nd-side {
  display: none;
}
@media (min-width: 1024px) {
  .nd-side {
    display: block;
    border-right: 1px solid var(--hairline);
    padding: var(--s6) var(--s5);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--paper);
  }
}
.nd-side .brand {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem;
  text-decoration: none; margin-bottom: var(--s8);
}
.nd-nav { display: flex; flex-direction: column; gap: 2px; }
.nd-nav .nav-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin: var(--s5) 0 var(--s2);
}
.nd-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.nd-nav a:hover { background: var(--paper-deep); color: var(--ink); }
.nd-nav a.active { background: var(--gold-soft); color: var(--ink); font-weight: 700; }

/* Mobile top bar */
.nd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
@media (min-width: 1024px) { .nd-topbar { display: none; } }
.nd-topbar .brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; display: flex; align-items: center; gap: var(--s2);
}
/* Mobile pill nav — horizontal scroll */
.nd-mobilenav {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 57px;
  z-index: 49;
  /* D35: scrollbar is intentionally visible (a11y); the right-edge fade
     signals that more tools lie beyond the fold. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
@media (min-width: 1024px) { .nd-mobilenav { display: none; } }
.nd-mobilenav a {
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink-soft);
  text-decoration: none;
}
.nd-mobilenav a.active { background: var(--green-900); color: #fff; border-color: var(--green-900); }

.nd-content { min-width: 0; padding: var(--s6) 0 var(--s16); }
@media (min-width: 1024px) { .nd-content { padding: var(--s8) 0 var(--s16); } }

/* Page hero — compact, not a billboard */
.nd-pagehero { margin-bottom: var(--s8); }
.nd-pagehero .nd-kicker { margin-bottom: var(--s2); }
.nd-pagehero .nd-h1 { margin-bottom: var(--s3); max-width: 18ch; }
.nd-pagehero .nd-lede { margin-bottom: var(--s4); }

/* Footer */
.nd-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--s10) 0 var(--s8);
  margin-top: var(--s16);
}
.nd-footer .nd-caption { max-width: 60ch; }

/* Suite footer (.foot): disclaimer card + credit row. Shared by all suite
   pages; lives here so pages loading only the design system get it too. */
.foot{border-top:1px solid var(--hairline);padding:48px 0 56px;color:var(--muted);
  font-size:13.5px;background:var(--paper)}
.foot .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.foot .disclaimer{background:var(--ivory,#faf7ef);border:1px solid var(--hairline);
  border-left:3px solid var(--gold,#b98a2f);border-radius:12px;padding:20px 24px;margin-bottom:32px;
  font-size:13px;line-height:1.6;max-width:100%}
.foot .disclaimer strong{color:var(--ink)}
.foot .row{display:flex;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;align-items:center}
.foot .credit{font-size:13px}
.foot .credit a{color:var(--ink);font-weight:600;text-decoration:none}
.foot .credit a:hover{text-decoration:underline}
.foot .links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot .links a{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.foot .links a:hover{color:var(--ink)}
@media (max-width:640px){
  .foot{padding:36px 0 44px}
  .foot .row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   LANDING MOVER ROWS (ah-*) — generated by nepse-alpha inline JS
   ============================================================ */
.ah-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
  text-decoration: none;
  color: inherit;
}
.ah-row > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.ah-sym { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.ah-row .nm {
  font-size: 0.78rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-ltp { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ah-chg { font-size: 0.82rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-chg.up { color: var(--up); }
.ah-chg.down { color: var(--down); }

/* ============================================================
   SCREENER RSI/MOVER LISTS (w1-*) — generated by nepse-wave1.js
   ============================================================ */
.w1-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.w1-tab {
  border: 1px solid var(--hairline); background: var(--paper); border-radius: 999px;
  padding: 9px 18px; font-size: 0.85rem; font-weight: 700; color: var(--muted);
  cursor: pointer; font-family: var(--sans);
}
.w1-tab:hover { border-color: var(--gold); color: var(--ink); }
.w1-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.w1-panel { padding: 12px 2px 2px; }
.w1-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; padding: 0; }
@media (max-width: 760px) { .w1-list { grid-template-columns: 1fr; } }
.w1-item {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--hairline-soft); font-size: 14px;
  min-width: 0;
}
.w1-item > * { min-width: 0; }
.w1-item .w1-sub:last-child { overflow: hidden; text-overflow: ellipsis; }
.w1-item .sc-sym { min-width: 78px; font-weight: 700; text-decoration: none; }
.w1-item .w1-sub:first-of-type {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px; color: var(--muted); font-size: 12.5px;
}
.w1-num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.w1-note { font-size: 0.8rem; color: var(--muted); margin: 10px 2px 0; max-width: 80ch; line-height: 1.6; }

/* ============================================================
   QUARTERLY COMPARISON TABLE (stock pages)
   ============================================================ */
.qcomp-wrap { margin-top: var(--s8); }
.qcomp-wrap h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 var(--s2); }
.qcomp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fff; }
.qcomp { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 640px; }
.qcomp th, .qcomp td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.qcomp thead th { background: var(--paper-deep, #f5f1e8); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; }
.qcomp th.q-part, .qcomp td.q-part { text-align: left; font-weight: 600; color: var(--ink); position: sticky; left: 0; background: #fff; z-index: 1; }
.qcomp thead th.q-part { background: var(--paper-deep, #f5f1e8); z-index: 2; }
.qcomp tbody tr:hover td { background: var(--paper); }
.qcomp tbody tr:hover td.q-part { background: var(--paper); }
.qcomp td.q-diff, .qcomp th.q-diff { background: rgba(30, 122, 68, 0.04); }
.qcomp .q-diff-sub { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--muted); margin-top: 2px; }
.qcomp .q-up { color: var(--up, #1E7A44); font-weight: 600; }
.qcomp .q-dn { color: var(--down, #B23A2E); font-weight: 600; }
.qcomp .q-flat { color: var(--muted); }
.qcomp-src { margin-top: var(--s3); font-size: 0.78rem; }
.qpeer-wrap { margin-top: var(--s8); }
.qpeer-wrap h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 var(--s2); }
.qpeer { min-width: 520px; }
@media (max-width: 640px) {
  .qcomp { font-size: 0.8rem; min-width: 560px; }
  .qcomp th, .qcomp td { padding: 8px 10px; }
}

/* Suite nav: nested signal-system links under "Chart & signals" */
.nav-sub{display:flex;flex-direction:column;margin:-2px 0 2px 14px;border-left:2px solid var(--hairline);padding-left:10px}
.nd-nav .nav-sub a,.rail-links .nav-sub a{font-size:.85rem;padding:5px 10px;color:var(--ink-soft)}
.nav-sub a:hover{color:var(--green-900)}
.nav-sub a.active{background:var(--gold-soft);color:var(--ink);font-weight:700}
.nd-mobilenav .nav-sub{flex-direction:row;margin:0;border:none;padding:0}
.nd-mobilenav .nav-sub a{font-size:.85rem;opacity:.85}

/* ==========================================================================
   Responsive + breathing-room safety net (2026-10-01, branch feature/responsive-autoupdate)
   ADDITIVE ONLY — no color, font, or luxury-theme restyling. Owner's bar:
   generous spacing everywhere (pages never feel crowded); swift, lag-free
   loading. Dark-mode agent: no [data-theme] regions touched here.
   ========================================================================== */

/* 1. Page-level horizontal-scroll guard (small screens). `clip` — not `hidden`
   — so position:sticky elements keep working. Kills the classic "page slides
   sideways" breakage from one wide injected block. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
}

/* 2. Touch-sized tap targets for the interactive controls that appear across
   the NEPSE tools (tone tabs, period pills, view tabs, sortable headers). */
@media (max-width: 760px) {
  .tone-tabs button,
  #viewTabs button,
  #periodBar button,
  .kind-tab,
  th.sortable { min-height: 44px; }
}

/* 3. Tables breathe on small screens: keep the scroll-wrapper pattern, never
   squash columns. Cell padding stays generous so dense data tables remain
   readable on a phone. */
@media (max-width: 640px) {
  .tbl-scroll, .scrollx, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { padding: 10px 12px; }
}

/* 4. Section rhythm: a minimum vertical beat between major blocks on small
   screens, so stacked content never feels crowded. Applies only where the
   page uses plain <section> blocks without their own spacing. */
@media (max-width: 760px) {
  main > section + section { margin-top: var(--s8, 32px); }
}

/* ==========================================================================
   TRACK D — UX & accessibility (2026-10-01)
   Skip link, screen-reader utility, global focus ring, standardized
   table-scroll wrapper. Additive only.
   ========================================================================== */

/* D32 — Skip link: first tab stop, jumps to <main id="main">.
   Same pattern as the blog; colors are token-driven so dark mode
   (theme.css FAMILY 3 remap) adapts automatically. */
.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 5000;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; text-decoration: none;
  transform: translateY(-70px);
  transition: transform .25s ease;
}
.skip-link:focus { transform: none; }

/* D34 — screen-reader-only text (e.g. table <caption>s the design hides) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* D33 — global keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  :focus {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
}

/* D34 — standardized horizontal-scroll wrapper for data tables.
   Replaces the per-page .nd-tscroll / .sc-table-wrap / .sx-table-wrap /
   .pf-table-wrap names (renamed in HTML + page stylesheets). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sf{border-top:1px solid var(--hairline,#E7DFCE);margin-top:64px;background:var(--paper,#FAF8F2);color:var(--ink-soft,#4A463C);font-family:var(--sans,Inter,system-ui,-apple-system,"Segoe UI",sans-serif)}
.sf-inner{max-width:1200px;margin:0 auto;padding:56px 24px 30px}
.sf-top{display:flex;gap:18px;align-items:flex-start;margin-bottom:42px}
.sf-mark{width:46px;height:46px;border-radius:12px;flex:none;box-shadow:0 2px 10px rgba(11,61,46,.12)}
.sf-name{font-weight:700;font-size:1.06rem;color:var(--ink,#1C1A15);margin:2px 0 8px;letter-spacing:.01em}
.sf-mission{margin:0;max-width:62ch;line-height:1.75;font-size:.92rem;color:var(--ink-soft,#4A463C)}
.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin-bottom:42px}
.sf-col h3{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#8A8474);margin:0 0 16px;font-weight:700}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sf-col a{color:var(--ink-soft,#4A463C);text-decoration:none;font-size:.92rem;line-height:1.5}
.sf-col a:hover{color:var(--green-900,#0B3D2E);text-decoration:underline}
.sf-note{border-top:1px solid var(--hairline,#E7DFCE);padding-top:26px;font-size:.85rem;line-height:1.75;color:var(--muted,#8A8474);max-width:88ch;margin:0}
.sf-note strong{color:var(--ink-soft,#4A463C)}
.sf-bottom{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline,#E7DFCE);font-size:.85rem;color:var(--muted,#8A8474)}
.sf-bottom a{color:var(--ink-soft,#4A463C);text-decoration:none;font-weight:600}
.sf-bottom a:hover{color:var(--green-900,#0B3D2E);text-decoration:underline}
.sf-social{display:flex;gap:16px;align-items:center}
@media(max-width:820px){.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
@media(max-width:520px){.sf-inner{padding:44px 20px 26px}.sf-top{margin-bottom:34px}.sf-cols{margin-bottom:34px}}