/* The site's header and footer (November 2026 home page, concept B), worn by
   every page that has been moved onto it: the home page, the blog and the
   position size calculator. The markup comes from one place,
   home-2026/partials/site-header.html and site-footer.html (scripts/build-home.js
   renders them into index.html; chrome() hands them to build-blog.js and
   apply-chrome.js), and these are its only rules.

   Load order: after every other stylesheet on the blog and the calculator,
   where landing.css sets its own --bg, --text, --accent and a few element
   rules; before home-2026.css on the home page.

   Tokens are scoped to the chrome (.top, .foot, .skip) so that the blog's and
   the calculator's own content keeps landing.css's colours. Their values are
   the home page's :root tokens; scripts/site-chrome.test.js holds them equal.

   Light is the default for every visitor, whatever the system setting; dark
   only from the visitor's own choice (data-theme="dark" on <html>, set by
   theme.js). Nothing here reads the system's colour-scheme setting. */

/* ---------- Tokens: light (default) ---------- */
.top, .foot, .skip {
  --bg: #ffffff; --panel: #f6f7f9; --panel-2: #eef0f3;
  --line: #e2e6ec; --line-2: #d2d8e0; --field-line: #8a93a0;
  --text: #131722; --muted: #5d6675; --faint: #646d7c;
  --accent: #1a64d4; --accent-fill: #1a64d4; --accent-hover: #1557bb;
  --shadow: 0 16px 48px rgba(19, 23, 34, .12);
  --radius-sm: 2px; --radius: 4px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 32px; --maxw: 1248px; --header-h: 60px;
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] :is(.top, .foot, .skip) {
  --bg: #0a0d12; --panel: #0f131a; --panel-2: #141922;
  --line: #1e2530; --line-2: #2a3240; --field-line: #626b78;
  --text: #dfe4ea; --muted: #8b95a2; --faint: #808a97;
  --accent: #2f8cff; --accent-fill: #1c6be0; --accent-hover: #1a5fc8;
  --shadow: 0 16px 48px rgba(0, 0, 0, .5);
}

/* ---------- Base, inside the chrome ----------
   What the home page's body and element rules give the chrome, restated at
   zero specificity (:where) so every rule below still wins. On the home page
   these change nothing; on the other pages they undo what landing.css sets
   for every element: svg { fill: none; stroke: currentColor } (it would
   outline the mark and the wordmark), a { text-decoration: none } (the
   footer's Risk and Terms links are underlined), p { line-height: 1.58 }. */
:where(.top, .foot, .skip) { font: 400 15px/1.6 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; color: var(--text); }
:where(.top, .foot) svg { display: block; max-width: 100%; fill: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; }
:where(.top, .foot) a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
:where(.top, .foot) a:hover { text-decoration-color: var(--accent); }
:where(.top, .foot) p { line-height: inherit; }
:where(.top, .foot) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Shared utilities ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--accent-fill); color: #fff; padding: 10px 14px; border-radius: var(--radius); font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
:lang(ar) .mono, [lang="ar"].mono { letter-spacing: 0; text-transform: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
/* width: auto and line-height: inherit undo landing.css's .brand (fit-content)
   and .brand span (line-height: 1) on the other pages. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; min-height: 44px; width: auto; }
.brand .mark { width: 26px; height: 24px; }
.brand .wordmark { height: 15px; width: 75px; color: var(--text); flex: none; }
.brand .prod { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-inline-start: 10px; border-inline-start: 1px solid var(--line-2); line-height: inherit; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav > a, .nav button.link { color: var(--muted); text-decoration: none; font: 500 14px/1 var(--font); padding: 10px; border-radius: var(--radius); background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.nav > a:hover, .nav button.link:hover, .nav button.link[aria-expanded="true"] { color: var(--text); background: var(--panel-2); }
.legal { position: relative; }
.legal-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 260px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; margin: 0; list-style: none; }
.legal-menu[hidden] { display: none; }
.legal-menu a { display: flex; align-items: center; width: 100%; padding: 10px 12px; color: var(--text); min-height: 44px; text-decoration: none; border-radius: var(--radius-sm); }
.legal-menu a:hover, .legal-menu a:focus-visible { background: var(--panel-2); }
.tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--text); border-color: var(--field-line); }
.icon-btn[aria-pressed="true"] svg { transform: rotate(180deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); font: 500 14px/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--field-line); background: var(--panel-2); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.is-disabled { opacity: .45; }
.mnav { display: none; }

/* ---------- Footer ---------- */
/* Its own ground: on the calculator the page behind it is landing.css's grey. */
.foot { border-top: 1px solid var(--line); padding-block: 56px 32px; background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 3fr 3fr; gap: 24px; }
/* line-height, max-width and text-wrap are what the home page's h2 rule
   gives these headings; restated so they hold where that rule does not. */
.foot .fh { margin: 0 0 12px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot ul a { text-decoration: none; color: var(--text); font-size: 14px; display: inline-flex; min-height: 36px; align-items: center; }
.foot ul a:hover { color: var(--accent); }
.foot .about { color: var(--muted); font-size: 14px; margin: 14px 0 0; max-width: 36ch; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-base .disc a { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav .hide-md { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .top, .foot, .skip { --gutter: 16px; }
  .nav { display: none; }
  .mnav { display: block; margin-inline-start: auto; position: relative; }
  .mnav summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius); font-weight: 500; font-size: 14px; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto; list-style: none; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
  .mnav li a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; text-decoration: none; border-radius: var(--radius-sm); }
  .mnav li a:hover { background: var(--panel-2); }
  .mnav li.h { padding: 10px 12px 4px; color: var(--faint); }
  .brand .prod { display: none; }
  .top .wrap { gap: 10px; }
  .tools .btn { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: 1fr; }
}