/* ai.heart — shell.css
 *
 * ONE masthead and ONE footer for the whole estate. Written 2026-08-09, when
 * two properties on one domain — the React root and the /assess/ instrument —
 * were found to have no navigation between them at all: the root claimed a
 * paired Governance-Delta and a SHA-256 chain, and did not link to the only
 * page that measures either. This file is the chrome that joins them.
 *
 * THE BRIDGE, and the reason this file has no palette of its own.
 * There are two token systems live on this domain and both are legitimate:
 *
 *   theme.css   --bg --panel --txt --mut --acc      the estate, since 2026-08-04
 *   assess.css  --bg --surface --ink --dim --gold   the instrument, finer, oklch
 *
 * A third palette would be the exact mistake being repaired. So every colour
 * here resolves through a fallback chain — instrument token first, estate token
 * next, literal last:
 *
 *   var(--ink, var(--txt, #E8E6DF))
 *
 * The shell therefore takes the colour of whatever page it lands on, and a page
 * that defines neither still renders. Do not add a --sh-* colour that names a
 * hex directly; add it to the chain.
 *
 * CLASS CONTRACT — stable, other sessions build against it.
 *   .aih-mast      the fixed masthead
 *   .mast-in         its row.  DELIBERATELY the estate's existing name, not a
 *                    new one, so navmenu.js (which queries .mast-in) and
 *                    responsive.css (which already sizes it at 320px) keep
 *                    working with no change on either side.
 *   .aih-brand       the wordmark, always a link home
 *   .nav             the links.  Also the estate's existing name, for the same
 *                    reason — navmenu.js reads its <a>s to build the phone menu.
 *   .aih-acts        where the theme toggle and nav button sit
 *   .aih-foot        the footer, .aih-foot-in its row
 *   .aih-crumb       the one-line "you are here", optional
 *
 * Nothing here loops, per the calm-surface canon. The only transition is a
 * 120ms colour change on hover, which is a response to a press-adjacent
 * gesture rather than motion of its own.
 */

:root {
  --sh-h: 54px;                 /* masthead height — pages offset by this */
  --sh-max: 1180px;             /* the row's own measure, wider than prose */
  --sh-ink:   var(--ink,   var(--txt,  #E8E6DF));
  --sh-dim:   var(--dim,   var(--mut,  rgba(232,230,223,.62)));
  /* --sh-faint is measured at 3.08:1 on the dark ground and 2.77:1 on the
     light one. Both fail WCAG AA for text, so it is used ONLY for non-text
     marks — the breadcrumb separator glyph. Every actual sentence in this
     shell uses --sh-dim (6.32:1 dark). This was nearly shipped the other way
     round, with the footer's honesty note about the broken audit chain set in
     the least readable colour on the page. An honest statement rendered
     unreadable is not honesty. */
  --sh-faint: var(--faint, rgba(232,230,223,.38));
  --sh-gold:  var(--gold,  var(--acc,  #D4A853));
  --sh-line:  var(--line,  rgba(212,168,83,.22));
  --sh-bg:    var(--bg,    #0A0F1A);
}

/* ── the masthead ─────────────────────────────────────────────────────────
   Fixed, because on a long story page the way back to the instrument should
   never be a scroll away. Translucent over the page's own ground so the silk
   and the starfield both read through it; a solid bar would flatten both. */
.aih-mast {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  block-size: var(--sh-h);
  /* Opaque FIRST, translucent second. The order is the whole safety net.
     An @supports query on backdrop-filter is not enough on its own: Safari
     16.0–16.1 has backdrop-filter but NOT color-mix, so the query does not
     fire, the color-mix declaration is invalid and discarded, and the bar
     falls back to transparent — white-on-starfield, unreadable. A plain
     declaration underneath means the worst case is a solid bar, which is
     merely plainer, not broken. Legibility is not a progressive enhancement. */
  background: var(--sh-bg);
  background: color-mix(in srgb, var(--sh-bg) 78%, transparent);
  border-block-end: 1px solid var(--sh-line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

/* And without backdrop-filter at all, the translucency has nothing behind it
   doing the separating work, so go fully opaque. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .aih-mast { background: var(--sh-bg); }
}

.aih-mast .mast-in {
  max-inline-size: var(--sh-max);
  margin-inline: auto;
  block-size: 100%;
  padding-inline: clamp(14px, 3vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 30px);
}

/* ── the wordmark ─────────────────────────────────────────────────────── */
.aih-brand {
  flex: 0 0 auto;
  font: 600 15px/1 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  letter-spacing: .01em;
  color: var(--sh-ink);
  text-decoration: none;
  white-space: nowrap;
}
.aih-brand .aih-dot { color: var(--sh-gold); }
.aih-brand:hover { color: var(--sh-gold); }
/* Every focusable thing in the shell shows the same gold ring. A link that is
   focusable but shows nothing is a keyboard trap you cannot see. */
.aih-brand:focus-visible,
.aih-crumb a:focus-visible,
.aih-proof:focus-visible {
  outline: 2px solid var(--sh-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── the links ────────────────────────────────────────────────────────────
   The current page is marked with aria-current, and that is what draws the
   gold underline — never a class set by hand, which is how a nav ends up
   claiming you are somewhere you are not. */
.aih-mast .nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 22px);
  margin-inline-start: auto;
}
.aih-mast .nav a {
  position: relative;
  font: 500 13.5px/1 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  letter-spacing: .012em;
  color: var(--sh-dim);
  text-decoration: none;
  padding-block: 8px;
  white-space: nowrap;
  transition: color 120ms ease;
}
.aih-mast .nav a:hover,
.aih-mast .nav a:focus-visible { color: var(--sh-ink); }
.aih-mast .nav a[aria-current="page"] { color: var(--sh-ink); }
.aih-mast .nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1.5px;
  background: var(--sh-gold);
}
.aih-mast .nav a:focus-visible {
  outline: 2px solid var(--sh-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Below the tablet breakpoint the estate's navmenu.js takes over: it reads
   these same <a>s and builds the phone panel, so hiding the row here loses
   nothing. The band matches --bp-tablet in responsive.css exactly. */
@media (max-width: 1023px) {
  .aih-mast .nav { display: none; }
}

.aih-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 4px;
}

/* ── the phone menu button ────────────────────────────────────────────────
   navmenu.js creates .nav-toggle, but every rule that styles it lives in
   responsive.css — which most of this estate does not load. On the home page
   that shipped as a white default <button>, full size, visible at 1440px,
   directly beside the wordmark. A shared component that depends on a
   stylesheet it does not name is not shared; it is a trap. So the shell
   carries the button's own rules. responsive.css declares the same thing for
   the pages that do load it, and the two agree — same breakpoint, same
   hidden-by-default. */
.aih-mast .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  border: 1px solid var(--sh-line);
  border-radius: 9px;
  background: transparent;
  color: var(--sh-dim);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
@media (max-width: 1023px) {
  .aih-mast .nav-toggle { display: inline-flex; }
}
.aih-mast .nav-toggle:hover,
.aih-mast .nav-toggle.on { color: var(--sh-gold); border-color: var(--sh-gold); }
.aih-mast .nav-toggle:focus-visible {
  outline: 2px solid var(--sh-gold);
  outline-offset: 2px;
}

/* theme.css fixes its own button to the viewport corner, which collides with
   a fixed masthead. Inside the shell it becomes part of the row instead. */
.aih-mast .aih-theme,
.aih-acts .aih-theme {
  position: static;
  inset: auto;
  min-height: 34px;
  padding-inline: 11px;
}

/* ── the body offset ──────────────────────────────────────────────────────
   Applied by shell.js to <html>, not asked of each page, so no page can
   forget it and hide its own first heading under the bar. */
html.aih-shelled body { padding-block-start: var(--sh-h); }

/* ── you are here ─────────────────────────────────────────────────────────
   One quiet line under the masthead. Used where a page is the proof of a
   claim made somewhere else, so the reader can see what it belongs to. */
.aih-crumb {
  max-inline-size: var(--sh-max);
  margin: 0 auto;
  padding: 10px clamp(14px, 3vw, 26px) 0;
  font: 400 12px/1.5 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sh-dim);
}
.aih-crumb a { color: var(--sh-dim); text-decoration: none; }
.aih-crumb a:hover { color: var(--sh-gold); }
.aih-crumb .sep { opacity: .5; padding-inline: 6px; }

/* ── the footer ───────────────────────────────────────────────────────────
   Deliberately plain. It carries the honest line about what is and is not
   verified, because the last thing on the page should not be a slogan. */
.aih-foot {
  margin-block-start: clamp(48px, 8vw, 96px);
  border-block-start: 1px solid var(--sh-line);
  background: var(--sh-bg);                                   /* opaque first */
  background: color-mix(in srgb, var(--sh-bg) 92%, transparent);
}
.aih-foot-in {
  max-inline-size: var(--sh-max);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 40px) clamp(14px, 3vw, 26px);
  display: grid;
  gap: 20px 40px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  font: 400 13px/1.65 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  color: var(--sh-dim);
}
.aih-foot h2 {
  margin: 0 0 8px;
  font: 600 11px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sh-dim);
}
.aih-foot ul { list-style: none; margin: 0; padding: 0; }
.aih-foot li + li { margin-block-start: 2px; }
.aih-foot a {
  display: inline-block;
  color: var(--sh-dim);
  text-decoration: none;
  /* WCAG 2.2 SC 2.5.8 wants 24px; a thumb wants more. The masthead links are
     display:none below 1023px and the phone gets navmenu's panel instead, so
     the footer is the one place on a phone where these links are actually
     touched. They are sized for a thumb here rather than assumed to be. */
  min-block-size: 30px;
  padding-block: 5px;
}
.aih-foot a:hover, .aih-foot a:focus-visible { color: var(--sh-gold); }
.aih-foot a:focus-visible {
  outline: 2px solid var(--sh-gold);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The most important paragraph in the shell: what is not verified. It is set
   at --sh-dim, not --sh-faint, for the reason recorded at the token. */
.aih-foot-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--sh-line);
  font-size: 12.5px;
  color: var(--sh-dim);
  max-inline-size: 68ch;
}

/* ── the claim link ───────────────────────────────────────────────────────
   The whole point of the merge, as a component. Any sentence on any page that
   makes a measurable claim wraps the claim in this and points at the page that
   proves it. A dotted gold underline reads as a citation rather than a button,
   which is the correct register: it is evidence, not a call to action. */
.aih-proof {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px dotted var(--sh-gold);
  padding-block-end: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.aih-proof::after {
  content: "\00A0\2197";                    /* north-east arrow, non-breaking */
  font-size: .82em;
  color: var(--sh-gold);
  vertical-align: baseline;
}
.aih-proof:hover,
.aih-proof:focus-visible {
  color: var(--sh-gold);
  border-block-end-style: solid;
}

/* ── print ────────────────────────────────────────────────────────────────
   An evaluator prints the page into the assessment file. The chrome is not
   evidence and should not consume a sheet. */
@media print {
  .aih-mast, .aih-foot, .aih-crumb { display: none !important; }
  html.aih-shelled body { padding-block-start: 0; }
}