/* ==========================================================================
   layout.css — Siberforge shared header, two-tier nav, footer.
   Loaded after tokens.css on every dashboard page. The landing page (/index.html)
   uses its own editorial nav and bypasses these rules.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}

/* ==========================================================================
   Sticky header (.sf-top mirrors legacy .top)
   ========================================================================== */
.sf-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(19, 23, 28, 0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: box-shadow var(--t-slow) var(--ease-out), background var(--t-slow) var(--ease-out);
}
.sf-top.scrolled {
  background: rgba(19, 23, 28, 0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.4);
}
:root[data-theme="light"] .sf-top {
  background: rgba(255, 255, 255, 0.85);
}
:root[data-theme="light"] .sf-top.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.05);
}

.sf-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sf-home-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  transition: color var(--t-med), background-color var(--t-med);
}
.sf-home-link:hover {
  color: var(--accent);
  background: var(--panel-2);
}

.sf-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--text);
}
.sf-brand-eyes {
  width: 36px;
  height: 16px;
  flex: 0 0 36px;
}
.sf-mark .sf-siber { color: var(--text); }
.sf-mark .sf-forge { color: var(--brand-red); }
.sf-sub {
  color: var(--muted);
  margin-left: 14px;
  font-size: 13px;
}

.sf-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.sf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: background-color var(--t-slow);
}
.sf-dot.live  { background: var(--green); box-shadow: 0 0 8px rgba(62, 207, 142, .7); }
.sf-dot.stale { background: var(--accent); }
.sf-dot.error { background: var(--red); }

/* Legacy class compatibility — pages that still reference these get the same look.
   Allows incremental migration: a page can drop its inline header and still have
   any leftover .top / .dot / .brand selectors render correctly. */
.top         { /* alias of .sf-top */ }
.brand .mark { /* alias of .sf-mark */ }

/* ==========================================================================
   Two-tier deep-dive nav (.sf-nav)
   Tier 1: section-tabs (Markets / Macro / Regional / AI / Supply Chain / Tools & Data)
   Tier 2: section-pages — sub-pages within active section
   ========================================================================== */
.sf-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: sticky;
  top: 53px;
  z-index: var(--z-nav);
  font-size: var(--fs-sm);
}

.sf-nav-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 24px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.sf-nav-tab {
  color: var(--muted);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-med), border-color var(--t-med);
  white-space: nowrap;
}
.sf-nav-tab:hover { color: var(--text); }
.sf-nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sf-nav-tabs .theme-toggle { margin-left: auto; }

.sf-nav-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 10px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.sf-nav-label {
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  margin-right: 14px;
  white-space: nowrap;
}

.sf-nav-section-label {
  color: var(--accent);
  letter-spacing: 1.0px;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-md);
  background: rgba(247, 167, 0, 0.08);
  border: 1px solid rgba(247, 167, 0, 0.22);
  margin: 0 6px 0 2px;
  white-space: nowrap;
}

.sf-nav-link {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--t-med), background-color var(--t-med), border-color var(--t-med);
  font-size: var(--fs-sm);
}
.sf-nav-link:hover {
  color: var(--text);
  background: var(--panel-2);
}
.sf-nav-link.active {
  color: var(--accent);
  background: rgba(247, 167, 0, 0.10);
  border-color: rgba(247, 167, 0, 0.30);
  font-weight: 600;
}

/* Master/sub grouping (used by Macro Regime section) */
.sf-nav-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.sf-nav-group--master {
  background: rgba(247, 167, 0, 0.05);
  border: 1px solid rgba(247, 167, 0, 0.18);
  border-radius: var(--r-lg);
  padding: 3px 6px;
}
.sf-nav-link--master {
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(247, 167, 0, 0.14);
  border: 1px solid rgba(247, 167, 0, 0.40);
  color: var(--accent);
  font-size: 12.5px;
  padding: 6px 14px;
}
.sf-nav-link--master:hover {
  background: rgba(247, 167, 0, 0.22);
  color: var(--accent);
}
.sf-nav-link--master.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.sf-nav-tree {
  color: rgba(247, 167, 0, 0.55);
  font-size: 14px;
  font-weight: 700;
  margin: 0 2px;
  user-select: none;
}
.sf-nav-link--sub {
  font-size: 11.5px;
  color: var(--muted);
}
.sf-nav-link--sub.active {
  color: var(--accent);
  background: rgba(247, 167, 0, 0.12);
  border-color: rgba(247, 167, 0, 0.32);
  font-weight: 700;
}
.sf-nav-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 8px;
}

@media (max-width: 1100px) {
  .sf-nav-group--master { padding: 2px 4px; }
  .sf-nav-tree { display: none; }
}
@media (max-width: 800px) {
  .sf-top { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  .sf-sub { display: none; }
  .sf-status { flex-wrap: wrap; }
  .sf-nav-tabs { gap: 12px; row-gap: 2px; padding: 6px 12px; flex-wrap: wrap; }
  .sf-nav-tab  { font-size: 10.5px; letter-spacing: 1px; }
  .sf-nav-pages { padding: 8px 12px; }
  .sf-nav-label { display: none; }
  .sf-nav-link { padding: 5px 8px; font-size: 11px; }
  .sf-nav-link--master { padding: 5px 10px; font-size: 11.5px; }
  .sf-nav-link--sub { font-size: 11px; }
  .sf-nav-divider { margin: 0 4px; height: 16px; }
  .sf-nav-group { flex-wrap: wrap; row-gap: 4px; }
  main { padding: 16px 12px; }
  select { max-width: 100%; }
}

/* ==========================================================================
   Theme toggle button (used inside header status row OR section tabs)
   ========================================================================== */
.theme-toggle {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 9px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  margin-left: 8px;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ==========================================================================
   Page chrome — main, h1, eyebrow shared by every dashboard page
   ========================================================================== */
main {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.page-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.page-sub {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 820px;
}
.eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(247, 167, 0, 0.14);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}
:root[data-theme="light"] .eyebrow {
  background: rgba(181, 103, 0, 0.14);
}

/* Screen-reader-only utility (page h1 on dashboard pages whose visible
   title lives in the shared header chrome) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Tab dropdown menus
   Every top tab exposes its full contents on hover/focus, so you can see
   what is inside another section without leaving the page you are on.
   Suppressed below 800px, where the second-tier row already wraps into view.
   ========================================================================== */
.sf-tab-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sf-tab-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 7px;
  min-width: 290px;
  max-width: 380px;
  padding: 10px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility var(--t-med);
}
.sf-tab-wrap:hover .sf-tab-menu,
.sf-tab-wrap:focus-within .sf-tab-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sf-menu-group + .sf-menu-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.sf-menu-heading {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 16px 5px;
}
.sf-menu-link {
  display: block;
  padding: 6px 16px;
  text-decoration: none;
  --lit: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.sf-menu-link:hover {
  background: var(--panel-2);
  --lit: var(--accent);
}
.sf-menu-name {
  display: block;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.sf-menu-meta {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 1px;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.sf-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.sf-crumb {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background-color var(--t-fast);
}
a.sf-crumb:hover {
  color: var(--text);
  background: var(--panel-2);
}
.sf-crumb--current {
  color: var(--text);
  font-weight: 600;
}
.sf-crumb-sep {
  color: var(--line);
  padding: 0 2px;
}

/* ==========================================================================
   Global search -- header button + overlay
   ========================================================================== */
.sf-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  padding: 4px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color var(--t-med), color var(--t-med);
}
.sf-search-btn:hover { border-color: var(--accent); color: var(--text); }
.sf-search-icon { font-size: 12px; line-height: 1; }
.sf-search-btn kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
}

body.sf-search-open { overflow: hidden; }

.sf-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(4, 6, 9, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
}
.sf-search-overlay[hidden] { display: none; }
:root[data-theme="light"] .sf-search-overlay { background: rgba(30, 38, 48, 0.4); }

.sf-search-panel {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sf-search-input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.sf-search-input:focus { outline: none; }
.sf-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 2px;
}
.sf-search-input::placeholder { color: var(--muted); }

.sf-search-results {
  max-height: 52vh;
  overflow-y: auto;
}
.sf-search-hit {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "section label" "section meta";
  gap: 0 12px;
  padding: 9px 18px;
  text-decoration: none;
  --lit: transparent;
}
.sf-search-hit.active,
.sf-search-hit:hover {
  background: var(--panel-2);
  --lit: var(--accent);
}
.sf-hit-section {
  grid-area: section;
  align-self: center;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: right;
}
.sf-hit-label { grid-area: label; color: var(--text); font-size: 13px; font-weight: 600; }
.sf-hit-meta  { grid-area: meta;  color: var(--muted); font-size: 11px; line-height: 1.4; }
.sf-search-empty { padding: 20px 18px; color: var(--muted); font-size: 12.5px; }

.sf-search-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 10.5px;
}
.sf-search-foot kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 4px;
  margin-right: 3px;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.sf-search-foot a { margin-left: auto; color: var(--accent); text-decoration: none; }
.sf-search-foot a:hover { text-decoration: underline; }

/* ==========================================================================
   Hub child lists -- appended to section landings (data-page-hub="true")
   so the path down never depends on the nav row alone.
   ========================================================================== */
.sf-hub-children {
  margin: 40px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.sf-hub-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text);
}
.sf-hub-group + .sf-hub-group { margin-top: 20px; }
.sf-hub-heading {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.sf-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.sf-hub-card {
  display: block;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--t-med), transform var(--t-med) var(--ease-out);
}
.sf-hub-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.sf-hub-name { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.sf-hub-meta { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 800px) {
  .sf-tab-menu { display: none; }
  .sf-crumbs { padding: 7px 12px; font-size: 11px; }
  .sf-search-text { display: none; }
  .sf-search-btn kbd { display: none; }
  .sf-search-btn { margin-right: 8px; padding: 4px 7px; }
  .sf-search-overlay { padding: 6vh 12px 12px; }
  .sf-search-hit {
    grid-template-columns: 1fr;
    grid-template-areas: "section" "label" "meta";
  }
  .sf-hit-section { text-align: left; }
  .sf-hub-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Skip link -- first tab stop on every page.
   ========================================================================== */
.sf-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: calc(var(--z-modal) + 1);
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.sf-skip:focus { top: 8px; }

/* ==========================================================================
   Freshness pills (SF_FRESH.badge). Age is measured against the wall clock.
   ========================================================================== */
.sf-fresh {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: help;
}
.sf-fresh--fresh   { color: var(--green);  border-color: var(--green);  background: transparent; }
.sf-fresh--aging   { color: var(--stale);  border-color: var(--stale);  background: var(--stale-bg); }
.sf-fresh--stale   { color: var(--red);    border-color: var(--red);    background: transparent; }
.sf-fresh--unknown { color: var(--muted);  border-color: var(--line);   background: transparent; }

/* Page-level staleness / archive banner. Deliberately loud: this is the
   site admitting something rather than hiding it. */
.sf-notice {
  margin: 0 0 var(--sp-4);
  padding: 12px 16px;
  border: 1px solid var(--stale);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--stale-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.sf-notice strong {
  display: block;
  color: var(--stale);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sf-notice--archived { border-color: var(--red); }
.sf-notice--archived strong { color: var(--red); }
.sf-notice a { color: var(--accent); }

/* Methodology disclosure -- collapsed by default, one click to the anchors. */
.sf-method {
  margin: var(--sp-4) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: var(--fs-xs);
}
.sf-method > summary {
  cursor: pointer;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
}
.sf-method > summary::-webkit-details-marker { display: none; }
.sf-method > summary::before { content: '\203A '; color: var(--accent); font-weight: 800; }
.sf-method[open] > summary::before { content: '\2304 '; }
.sf-method > summary:hover { color: var(--text); }
.sf-method-body { padding: 0 12px 12px; color: var(--muted); line-height: 1.6; }
.sf-method-body table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.sf-method-body th,
.sf-method-body td { text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); }
.sf-method-body th { color: var(--text); font-weight: 600; }
.sf-method-body code { font-family: var(--font-mono); color: var(--text); }

/* ==========================================================================
   "See also" -- curated cross-section links on leaf pages.
   ========================================================================== */
.sf-seealso {
  margin: var(--sp-8) auto 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
}
.sf-seealso-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.sf-seealso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2);
}
.sf-seealso-card {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  text-decoration: none;
  transition: border-color var(--t-med);
}
.sf-seealso-card:hover { border-color: var(--accent); }
.sf-seealso-name { display: block; color: var(--text); font-size: 12.5px; font-weight: 600; }
.sf-seealso-meta { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 2px; }
.sf-seealso-where {
  display: inline-block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   Mobile: collapse the second-tier nav behind a toggle instead of letting it
   wrap into a permanent multi-row band above the fold.
   ========================================================================== */
.sf-nav-more {
  display: none;
  width: 100%;
  margin: 0;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.sf-nav-more:hover { color: var(--text); }
.sf-nav-more-caret { color: var(--accent); }

@media (max-width: 800px) {
  .sf-nav-more { display: block; }
  .sf-nav-pages { display: none; }
  .sf-nav[data-pages-open="true"] .sf-nav-pages { display: flex; }
  /* Touch targets: WCAG 2.5.8 wants >= 24px; these computed to ~22px. */
  .theme-toggle,
  .sf-search-btn { padding: 7px 10px; min-height: 32px; }
  .sf-seealso-grid { grid-template-columns: 1fr; }
}

/* Chart honesty note -- printed under dual-axis charts. */
.axis-caveat {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  font-style: italic;
  max-width: 82ch;
}

/* Backtest: net-of-cost rows, visually separated from the gross block. */
.bt-net-row td { border-top: 1px solid var(--accent); color: var(--text); }
.bt-net-row td:first-child { color: var(--accent); font-weight: 600; }

/* Tooltip: narrative context lagging the live value. */
.tt-asof-warn { color: var(--stale); font-weight: 600; cursor: help; }

/* ==========================================================================
   Runtime <main> wrapper (layout.js ensureMain) -- neutral, so pages that
   carry their own content container are not double-padded. Blocks layout.js
   injects get the standard content gutter.
   ========================================================================== */
main.sf-main { padding: 0; max-width: none; margin: 0; }
main.sf-main > .sf-hub-children,
main.sf-main > .sf-seealso {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  main.sf-main { padding: 0; }
  main.sf-main > .sf-hub-children,
  main.sf-main > .sf-seealso { padding-left: 16px; padding-right: 16px; }
}

/* Nav groups wrap at every width: a long group must never widen the page. */
.sf-nav-group { flex-wrap: wrap; min-width: 0; }
.sf-nav-pages--picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-nav-picker { display: inline-flex; align-items: center; gap: 8px; }
.sf-nav-picker select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 6px);
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  min-height: 28px;
}