/* ===========================================================
   Inventors Stylesheet — Shell
   Theme-neutral, thesis-neutral base.
   Provides: font loading, resets, focus defaults, shell layout,
   theme variable hooks.
   =========================================================== */

/* ---- Font loading (single import, all five families) ----
   Each thesis activates the subset it uses via its tokens. */
@import url('https://fonts.googleapis.com/css2?family=Khand:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

/* ---- Reset (minimal, opinionated) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button {
  font: inherit; color: inherit; background: none;
  border: 0; padding: 0; cursor: pointer;
}
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ---- Skip link ----
   The first stop of every keyboard journey. It must be off-screen at rest, still TABBABLE at
   rest (unlike the closed nav drawer, which is visibility:hidden in portal-nav.css precisely so
   it is NOT tabbable — the skip link is the one deliberate exception), and unmistakable the
   instant it takes focus, including under forced colours.

   Measured on the live portal 2026-07-28 (finding 019fa79d-024a), Poland org, four routes at
   1500x900 and 915x412:
   - the reveal was `transition: top 120ms ease`. At the instant of focus the box was still at
     its rest position — top -40, bottom -5.16 — on every route, both viewports and both colour
     modes, so the first Tab press looked like it did nothing at all. The reveal is now
     instantaneous: no transition on the offset.
   - once revealed, the only thing separating the link from the page was
     `background: var(--surface)` — the SAME colour as the page behind it — plus the global
     :focus-visible box-shadow. Forced colours repaints the background as Canvas and drops
     box-shadow entirely, which left focused, on-screen, invisible text furniture. The border
     and the forced-colours outline below are what survive that; never let the reveal rest on a
     background alone.
   - `top: -40px` was a guess at the box height, which measures 34.84px: 5px of the link already
     hung inside the viewport at rest, and a larger text size would show more. Hiding by a
     percentage translate of the box's own height is exact at any size. */
.skip-link {
  position: absolute; top: 8px; left: 8px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  color: var(--ink, #000);
  border: 2px solid currentColor;
  border-radius: var(--radius-md, 6px);
  z-index: 1000;
  /* Off-screen at rest, by its own height plus the top offset — never a hardcoded guess. */
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus {
  transform: none;
  box-shadow: var(--shadow-focus);
}
/* Forced colours keeps borders and outlines and discards box-shadow, so the house focus
   treatment degrades to a system-coloured outline rather than to nothing. */
@media (forced-colors: active) {
  .skip-link { border-color: LinkText; }
  .skip-link:focus { outline: 3px solid Highlight; outline-offset: 2px; }
  /* The skip link's DESTINATION needs the same rescue (019fb4ee). `<main id="main">` carries
     tabindex="-1" in the shells so the link actually moves focus; the arrival is then drawn by the
     house `:focus-visible` rule below, which is `box-shadow` — and forced colours drops box-shadow,
     exactly as it does for the link itself. Without this the keyboard user is silently teleported.
     Keyed on :focus-visible, never :focus, so a mouse press on the content never draws a rectangle
     round the whole page. Inset offset because .portal-content is a scroll container: an outset
     outline would be clipped. */
  main[tabindex="-1"]:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* ---- Top bar (shared frame; thesis tokens paint over it) ---- */
.shell-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 16px;
  background: var(--shell-bar-bg, var(--surface, rgba(255,255,255,0.92)));
  border-bottom: 1px solid var(--border, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.shell-bar__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, 'Khand'), sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: 0.02em;
}
.shell-bar__brand-mark { width: 24px; height: 24px; }
.shell-bar__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.shell-bar__theme {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  color: var(--ink-muted, rgba(0,0,0,0.6));
  transition: background 120ms ease, color 120ms ease;
}
.shell-bar__theme:hover {
  background: var(--shell-pill-hover, rgba(0,0,0,0.06));
  color: var(--ink, #000);
}
.shell-bar__theme svg { width: 16px; height: 16px; }

/* ---- Page container ---- */
.shell-main { min-height: calc(100vh - 48px); }

/* ---- Per-page footer (cross-thesis deep links) ---- */
.shell-foot {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding: 32px 24px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  font-size: 13px;
  color: var(--ink-muted, rgba(0,0,0,0.6));
}

/* ---- Reduced motion respect (global override) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Focus defaults ---- */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0,184,237,0.32));
  border-radius: var(--radius-md, 6px);
}
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0,184,237,0.32));
}

/* ---- Selection ---- */
::selection {
  background: var(--brand-cyan, #00B8ED);
  color: #fff;
}