/* ═══════════════════════════════════════════════════════════════════════
   QuantKraft — site layout layer, loaded by every page

   The site is laid out portrait-first: a menu button instead of a link bar,
   one-row section switchers, readings as full-width rows, wide tables as one
   card per row. It began as the phone mirror and replaced the desktop layout,
   so a single set of pages serves every screen.

   Linked last in <head> (tests/validate_pages.py checks it), so it overrides
   slds-theme.css and each page's own inline <style> at equal specificity.
   The rules are deliberately unconditional: no desktop/phone split to keep
   in step. Companion script: site.js.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --slds-gutter: 0.875rem;
  --m-safe-l: env(safe-area-inset-left, 0px);
  --m-safe-r: env(safe-area-inset-right, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-nav-h: 54px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-size: 15px; line-height: 1.55;
  padding-left: var(--m-safe-l); padding-right: var(--m-safe-r);
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(1, 118, 211, 0.12);
}
body.m-lock { overflow: hidden; }

img, video, iframe, canvas { max-width: 100%; }
img { height: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
p, li, dd { overflow-wrap: break-word; }

/* iOS zooms the page when a focused field is under 16px. */
input, select, textarea { font-size: 16px !important; }

/* No hover on a touchscreen: the lift effects stick after a tap. */
@media (hover: none) {
  a:hover, .kard:hover, .signal-tile:hover, .pill-link:hover { transform: none !important; }
}

/* ── NAV: brand + menu button; the links live in the drawer ─────────────── */
nav {
  height: var(--m-nav-h);
  padding: 0 calc(var(--slds-gutter) + var(--m-safe-r)) 0 calc(var(--slds-gutter) + var(--m-safe-l));
  gap: 12px;
}
nav .nav-brand { font-size: 17px; flex-shrink: 0; }
nav .nav-links { display: none !important; }

.m-burger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; margin-right: -6px;
  font: 600 14px/1 var(--slds-font); color: var(--slds-text);
  background: var(--slds-surface); border: 1px solid var(--slds-border-strong);
  border-radius: 20px; cursor: pointer;
}
.m-burger-icon { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 1px; transition: background 0.15s; }
.m-burger-icon::before, .m-burger-icon::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 2px;
  background: currentColor; border-radius: 1px; transition: transform 0.15s;
}
.m-burger-icon::before { top: -5px; }
.m-burger-icon::after  { top: 5px; }
.m-burger[aria-expanded="true"] .m-burger-icon { background: transparent; }
.m-burger[aria-expanded="true"] .m-burger-icon::before { transform: translateY(5px) rotate(45deg); }
.m-burger[aria-expanded="true"] .m-burger-icon::after  { transform: translateY(-5px) rotate(-45deg); }

.m-backdrop {
  position: fixed; inset: var(--m-nav-h) 0 0 0; z-index: 290;
  background: rgba(0, 0, 0, 0.32); opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}
.m-drawer {
  position: fixed; top: var(--m-nav-h); left: 0; right: 0; z-index: 295;
  max-height: calc(100vh - var(--m-nav-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--slds-surface); border-bottom: 1px solid var(--slds-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px calc(var(--slds-gutter) + var(--m-safe-r)) calc(14px + var(--m-safe-b)) calc(var(--slds-gutter) + var(--m-safe-l));
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform 0.15s, opacity 0.15s, visibility 0.15s;
}
@supports (max-height: 100dvh) { .m-drawer { max-height: calc(100dvh - var(--m-nav-h)); } }
body.m-menu-open .m-drawer { transform: none; opacity: 1; visibility: visible; }
body.m-menu-open .m-backdrop { opacity: 1; visibility: visible; }

.m-drawer ul { list-style: none; margin: 0; padding: 0; }
.m-drawer a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 4px;
  font-size: 16px; color: var(--slds-text); text-decoration: none;
  border-bottom: 1px solid var(--slds-border);
}
.m-drawer a::after { content: '›'; font-size: 20px; color: var(--slds-text-weaker); }
.m-drawer a.active { color: var(--slds-brand); font-weight: 600; }
.m-drawer-group {
  margin: 18px 0 2px; padding: 0 4px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--slds-text-weaker);
}

/* ── SECTION SWITCHER: one row in place of each page's tab strip ─────────
   The desktop strips are sticky, so wrapped into chips they pinned two or
   three rows (~150px) over the content for the whole scroll. site.js hides
   the strip and puts this 44px bar in its place: ‹ previous, the current
   section (tap for the full list), next ›. The original buttons stay in the
   DOM and are clicked on the user's behalf, so each page's own tab logic,
   hash links (#tab3) and footer stamps keep working. */
.m-tabs-src { display: none !important; }
.m-sect {
  position: sticky; top: var(--m-nav-h); z-index: 150;
  display: flex; align-items: stretch; height: 44px;
  margin: 10px 0 0; background: var(--slds-surface);
  border-top: 1px solid var(--slds-border); border-bottom: 1px solid var(--slds-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: top 0.2s ease;
}
.m-sect.m-sect-inline { position: relative; top: auto; margin: 10px var(--slds-gutter) 0; border: 1px solid var(--slds-border); border-radius: 10px; }
.m-sect button {
  font: inherit; color: var(--slds-text); background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-sect-step { flex: 0 0 44px; font-size: 22px !important; line-height: 1; color: var(--slds-brand) !important; }
.m-sect-step:disabled { color: var(--slds-border-strong) !important; cursor: default; }
.m-sect-cur {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-left: 1px solid var(--slds-border) !important; border-right: 1px solid var(--slds-border) !important;
  padding: 0 8px !important;
}
.m-sect-label { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sect-count { flex-shrink: 0; font-family: var(--slds-font-mono); font-size: 12px; color: var(--slds-text-weaker); }
.m-sect-caret { flex-shrink: 0; font-size: 11px; color: var(--slds-text-weaker); }

.m-sheet-backdrop {
  position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
}
.m-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
  max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--slds-surface); border-radius: 14px 14px 0 0;
  padding: 8px calc(var(--slds-gutter) + var(--m-safe-r)) calc(12px + var(--m-safe-b)) calc(var(--slds-gutter) + var(--m-safe-l));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(100%); transition: transform 0.2s ease;
}
.m-sheet-open .m-sheet-backdrop { opacity: 1; visibility: visible; }
.m-sheet-open .m-sheet { transform: none; }
.m-sheet-title {
  padding: 8px 4px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--slds-text-weaker);
}
.m-sheet button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 4px;
  font: 16px/1.3 var(--slds-font); color: var(--slds-text); text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--slds-border); cursor: pointer;
}
.m-sheet button:last-child { border-bottom: 0; }
.m-sheet button[aria-current="true"] { color: var(--slds-brand); font-weight: 600; }
.m-sheet button[aria-current="true"]::after { content: '✓'; margin-left: auto; }

/* ── AUTO-HIDING HEADER: scrolling down hides the nav, scrolling up brings
   it back; the section switcher slides up to the top edge meanwhile. ──── */
nav { transition: transform 0.2s ease; }
body.m-nav-hidden nav { transform: translateY(-100%); }
body.m-nav-hidden .m-sect { top: 0; }

/* ── LAYOUT: one column, tighter cards ─────────────────────────────────── */
.slds-grid--2, .slds-grid--3, .slds-grid--4, .picture-grid { grid-template-columns: 1fr !important; }
.signal-tiles { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.card, .hero-card, .briefing, .matrix-card, .map-card, .verdict-card, .synthesis-card { padding-left: 14px !important; padding-right: 14px !important; }
.card, .kard, .chart-box, .stat-cell, .interp-box, .explainer-box { min-width: 0; }
h1 { overflow-wrap: break-word; }
.hero h1, .page-header h1, .slds-page-header h1 { font-size: 22px !important; }
/* Pillar headers: a title card and four summary tiles came to ~300px before
   any section content. Same information, about half the height. */
.hero-card { padding-top: 12px !important; padding-bottom: 12px !important; }
.signal-tile { padding: 9px 11px !important; }
.signal-tile .sig-name { margin-bottom: 3px; font-size: 12px; }
.signal-tile .sig-value { font-size: 20px !important; margin-bottom: 4px; }
.signal-tile .sig-badge { margin-bottom: 4px; }
.signal-tile .sig-meaning { font-size: 12px; line-height: 1.35; }

/* Larger touch targets for buttons and pills. */
.btn, .slds-button { min-height: 42px; }
.pill-link { padding: 6px 12px; font-size: 13px; }
summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
select { min-height: 40px; }

/* ── TABLES: scroll inside their own box, never the page ─────────────── */
.m-scroll, .table-scroll, .tbl-scroll, .table-wrap, .scroll-x {
  overflow-x: auto; max-width: 100%;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.m-scroll { margin: 0 0 4px; background:
  linear-gradient(to right, var(--slds-surface) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
  linear-gradient(to left, var(--slds-surface) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left center / 10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 10px 100% no-repeat scroll;
}
table th, table td { padding-top: 7px; padding-bottom: 7px; }

/* Stacked tables (site.js adds .m-stack to any table of four or more
   columns): one card per row, first cell as the title, the other cells as
   label-over-value pairs, two per line. Cell colours (heat maps, up/down)
   are the page's own and carry through. */
table.m-stack { display: block; width: 100% !important; min-width: 0 !important; border: 0 !important; }
table.m-stack thead, table.m-stack .m-head-row, table.m-stack colgroup { display: none !important; }
table.m-stack tbody, table.m-stack tfoot { display: block; }
table.m-stack caption { display: block; text-align: left; margin-bottom: 8px; }
table.m-stack tr {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  margin: 0 0 8px; padding: 10px 12px;
  background: var(--slds-surface); border: 1px solid var(--slds-border); border-radius: 10px;
}
table.m-stack tr:hover { background: var(--slds-surface); }
table.m-stack td, table.m-stack th {
  display: block; min-width: 0; width: auto !important; max-width: none !important;
  padding: 0 !important; border: 0 !important; text-align: left !important;
  white-space: normal !important; overflow-wrap: break-word; font-size: 14px;
  position: static !important;
}
table.m-stack td::before, table.m-stack th::before {
  content: attr(data-label); display: block; margin-bottom: 1px;
  font: 600 11.5px/1.3 var(--slds-font); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--slds-text-weaker);
}
table.m-stack td[data-label=""]::before, table.m-stack th[data-label=""]::before { content: none; }
table.m-stack tr > :first-child { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--slds-text); }
table.m-stack tr > :first-child::before { content: none; }
table.m-stack .m-span { grid-column: 1 / -1; }
table.m-stack tr.m-rank > :first-child { font-size: 12px; font-weight: 600; color: var(--slds-text-weaker); font-family: var(--slds-font-mono); }
table.m-stack tr.m-rank > :nth-child(2) { grid-column: 1 / -1; font-size: 15px; font-weight: 600; margin-top: -6px; }
table.m-stack tr.m-rank > :nth-child(2)::before { content: none; }
table.m-stack [class*="badge"], table.m-stack [class*="pill"], table.m-stack [class*="chip"] { white-space: nowrap; }
table.m-stack td:empty { display: none; }

/* A four- or five-column table that fits once its padding is trimmed. */
table.m-tight th, table.m-tight td { padding-left: 4px !important; padding-right: 4px !important; }
table.m-tight th { font-family: var(--slds-font) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 11px !important; white-space: normal !important; }
table.m-tight td { white-space: normal !important; }
table.m-tight th, table.m-tight td { -webkit-hyphens: auto; hyphens: auto; }
table.m-tight { margin-left: -6px; margin-right: -6px; width: calc(100% + 12px) !important; max-width: none; }
/* Inside a box that scrolls sideways the bleed is clipped and takes the first
   and last letters of each row with it, so there the table stays in its box. */
table.m-tight.m-nobleed { margin-left: 0; margin-right: 0; width: 100% !important; }

/* "Current readings" stat cells: two per row instead of one card per line. */
.stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.stat-cell { padding: 11px 12px !important; }
.stat-cell .stat-value { font-size: 22px !important; }

/* Side-by-side text columns squeezed at phone width (site.js adds .m-col). */
.m-col { flex-direction: column !important; flex-wrap: nowrap !important; grid-template-columns: 1fr !important; align-items: stretch !important; }
.m-col > * { max-width: 100% !important; width: auto !important; flex: 0 0 auto !important; }

/* ── READINGS: the homepage's linked pills become full-width coloured rows ──
   label and value on one line, the reading's meaning under it, a status
   stripe on the left. */
.brief-pills { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.brief-pills .pill-link, .pill-link {
  display: grid !important; grid-template-columns: 1fr auto 14px; align-items: baseline;
  column-gap: 10px; row-gap: 2px; width: 100%; max-width: 100%; margin: 0 !important;
  padding: 10px 10px 10px 12px !important; border: 0 !important; border-left: 4px solid var(--slds-border-strong) !important;
  border-radius: 8px !important; font-size: 14px !important; line-height: 1.35;
  box-shadow: none !important; transform: none !important;
}
.pill-link .pl-label { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--slds-text); }
.pill-link .pl-val   { grid-column: 2; grid-row: 1; text-align: right; font-size: 15px; white-space: nowrap; }
.pill-link .pl-desc  { grid-column: 1 / 3; grid-row: 2; font-size: 13px; opacity: 1 !important; color: var(--slds-text-weak); }
.pill-link .pl-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 20px; opacity: 0.5; }
.pill-link.p-good { border-left-color: var(--slds-success) !important; }
.pill-link.p-warn { border-left-color: var(--slds-warning-fg) !important; }
.pill-link.p-bad  { border-left-color: var(--slds-error) !important; }
.brief-line { padding: 14px 0 !important; }
.brief-text { font-size: 15px !important; }

/* Regime bands (Normal / Flat / Inverted …): one segmented row of three, the
   current regime filled, instead of three stacked full-width rows. */
.regime-pills { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px !important; }
.regime-pills .pill {
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 3px; min-width: 0; padding: 8px 8px !important; font-size: 13px !important; -webkit-hyphens: auto; hyphens: auto; line-height: 1.25;
  border-radius: 8px !important; text-align: left;
}
.regime-pills .pill .pill-th { margin: 0 !important; font-size: 11.5px !important; white-space: normal; overflow-wrap: anywhere; }
.regime-pills .pill.active { font-weight: 700; }
.regime-pills.m-col { grid-auto-flow: row; grid-template-columns: 1fr !important; }
.regime-pills.m-col .pill { font-size: 14px !important; }

/* Week in Review: the verdict tag sits above its paragraph, not beside it. */
.rv-verdict { flex-direction: column; gap: 10px; }
.rv-kpis { grid-template-columns: 1fr 1fr !important; }
.rv-trip { grid-template-columns: 1fr !important; }
.rv-body { padding: 4px 16px 18px !important; }
.rv-body p, .rv-body li { font-size: 16px; }
.rv-fig-cap { font-size: 13px; }
.rv-canvas { height: 260px; } .rv-canvas.tall { height: 300px; }
table.rv-tbl.m-stack tr { grid-template-columns: 1fr 1fr 1fr; }

/* ── FOOTER: stacked, clear of the home indicator ──────────────────────── */
.footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: calc(18px + var(--m-safe-b)); }
.footer-links { gap: 20px; }
.footer-links a, .footer-stamp { font-size: 13px; }
.footer-links a { display: inline-block; padding: 6px 0; }

/* Signal callouts stack into a column on a phone; their desktop `flex: 1 1
   220px` then becomes a 220px minimum *height*, leaving a tall empty box. */
.explainer-signals > *, .explainer-signal { flex: 0 0 auto !important; }

/* ── TAGS: pill clusters become plain running text ──────────────────────
   A wrap of rounded chips reads as a ragged block on a phone. The same words
   as one line of text, separated by middots, read faster and take less room. */
.chips { display: block !important; line-height: 1.7; }
.chips .chip, .rv-card-tags .rv-tag {
  display: inline !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--slds-text) !important; font-weight: 400 !important;
}
.chips .chip + .chip::before, .rv-card-tags .rv-tag + .rv-tag::before {
  content: '·'; margin: 0 7px; color: var(--slds-text-weaker); font-weight: 400;
}
.rv-card-tags { display: block !important; margin-top: 10px; }
.rv-card-tags .rv-tag { font-size: 13px !important; color: var(--slds-text-weak) !important; }
.rv-card-tags .rv-tag:first-child {
  display: block !important; margin-bottom: 4px !important; padding-left: 9px !important;
  border-left: 3px solid var(--slds-warning-fg) !important;
  font-weight: 600 !important; color: var(--slds-text) !important;
}
.rv-card-tags .rv-tag:first-child + .rv-tag::before { content: none; }

/* ── WIDE LAYOUT: opt-in desktop reading ─────────────────────────────────
   A page that sets <html data-layout="wide"> keeps everything above on a
   phone, and from 1024px up shows its own tab strip (pinned under the nav)
   instead of the one-row switcher. site.js keeps tables as tables while they
   fit; a table that still has to stack lays its values out across the width
   rather than two to a line. Pages without the attribute are unchanged. */
@media (min-width: 1024px) {
  html[data-layout="wide"] { --slds-gutter: 1.5rem; }
  html[data-layout="wide"] .m-sect { display: none !important; }
  html[data-layout="wide"] .maintabs.m-tabs-src {
    display: flex !important; position: sticky; top: var(--m-nav-h); z-index: 150;
    background: var(--slds-bg); transition: top 0.2s ease;
  }
  html[data-layout="wide"] body.m-nav-hidden .maintabs.m-tabs-src { top: 0; }
  html[data-layout="wide"] table.m-stack tr { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  html[data-layout="wide"] .footer-inner { flex-direction: row; align-items: center; }
}