/* ===========================================================================
   page.css—the shared shell from the CAC write-up (cac.aidanleather.com).
   One dark plane. A hairline separates the sidebar from the body. Box spacing
   is on an 8px grid (4s and 8s). Radii come from one tight scale.
   =========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 48px; --s9: 56px; --s10: 64px;

  --measure: 44rem;
  --gutter: clamp(16px, 4vw, 56px);
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --bar-fill: var(--color-10);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* pretty by default (kills last-line orphans on paragraphs, list items,
     captions, table cells); headings override with balance below. Inherited,
     so it reaches child spans without per-element rules. */
  text-wrap: pretty;
}

/* ── Page-load fade-in ───────────────────────────────────────
   A gentle, staggered opacity fade so the page settles in on load
   instead of snapping/juddering as fonts and JS modules mount.
   Opacity only—no transforms—so there's no layout shift and no new
   stacking context on the tall main column.

   Only runs on the FIRST view of a page in a session: an inline head
   script adds `.aw-intro` to <html> once, so reloads and back/forward
   (assets already cached) render instantly. Off under reduced-motion.
   `both` holds each region invisible until its delay (no flash). */
@media (prefers-reduced-motion: no-preference) {
  .aw-intro .topbar,
  .aw-intro .sidebar,
  .aw-intro .main {
    animation: aw-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .aw-intro .topbar  { animation-delay: 0ms; }
  .aw-intro .sidebar { animation-delay: 40ms; }
  .aw-intro .main    { animation-delay: 80ms; }
}

@keyframes aw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.skip-link {
  position: fixed; left: var(--s3); top: -48px; z-index: 200;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--s2) var(--s4); transition: top var(--transition);
}
.skip-link:focus { top: var(--s3); }

/* ── Header ─────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter) 0 var(--s4);
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.logo {
  display: inline-flex; width: 28px; height: 28px; padding: 0; border: none;
  border-radius: var(--radius-pill); cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, oklch(0.32 0 0), transparent 55%),
    radial-gradient(circle at 70% 74%, oklch(0.08 0 0), transparent 60%),
    oklch(0.17 0 0);
  transition: filter var(--transition);
}
.logo:hover { filter: brightness(1.25); }
.logo:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* Light-mode orb: same top-left lit sphere, inverted to a pale neutral so it
   sits on the near-white plane instead of punching a black hole in it. The
   inset hairline keeps its edge legible against the 0.988 background. */
:root[data-theme="light"] .logo {
  background:
    radial-gradient(circle at 32% 28%, oklch(1 0 0), transparent 55%),
    radial-gradient(circle at 70% 74%, oklch(0.70 0 0), transparent 60%),
    oklch(0.86 0 0);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
}
:root[data-theme="light"] .logo:hover { filter: brightness(0.97); }

/* Theme toggle: transparent, sits at the sidebar foot. */
.theme-toggle {
  display: inline-flex; gap: var(--s1); padding: var(--s1);
  border-radius: var(--radius-pill); background: transparent;
}
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border: none; background: none;
  color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}
.theme-toggle button:hover { color: var(--text); background: var(--bg-hover); }
.theme-toggle button.is-active { color: var(--text); background: var(--bg-active); }
.theme-toggle button:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* ── Layout ─────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

/* ── Sidebar (app nav) with the dividing line (no ball) ─────── */
.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  padding: var(--s4) var(--s3);
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; color: var(--text-tertiary);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.nav-item:hover { color: var(--text); background: var(--bg-hover); }
.nav-item.is-active { color: var(--text); background: var(--bg-active); }
.nav-item:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: -2px; }
.nav-item--soon { color: var(--text-disabled); cursor: default; }
.nav-item--soon:hover { color: var(--text-disabled); background: none; }
.soon-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--accent-blue-text); background: var(--btn-blue);
  border: 1px solid var(--btn-blue-border);
  padding: 2px var(--s2); border-radius: var(--radius-sm); white-space: nowrap;
}
/* "New" — the skill is live. Green (measured) reads as available, vs the blue
   "coming soon" it replaces. */
.new-chip {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  color: var(--grade-measured-text); background: var(--grade-measured-bg);
  border: 1px solid var(--grade-border);
  padding: 2px var(--s2); border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-sep { height: 1px; background: var(--border-light); margin: var(--s2) var(--s3); }
.sidebar-foot { margin-top: auto; padding-top: var(--s4); }

/* ── Main ───────────────────────────────────────────────────── */
.main { min-width: 0; padding: 0 var(--gutter); }
.column { max-width: var(--measure); margin: 0 auto; padding: var(--s4) 0 var(--s10); }
/* Sections flow on whitespace + clear headings, oklch.fyi-style—no rule between
   every one. A hairline is opt-in (.section--rule), reserved for the shifts
   between movements (self-report, brand, conclusion, the dataset appendix), so a
   rule always signals a real change of subject rather than mere spacing.
   Below the rule gets +8px over above it: the line-height under the previous
   paragraph inflates the top gap, so unequal padding reads optically even. */
.section { padding: var(--s5) 0; }
/* One rule on the whole page: under the hero, closing the title block off from
   the article. Everything below is structured by headings alone—h2 for the major
   beats, h3 for the sub-levers—so the body reads on hierarchy, not on rules. */
.intro {
  border-top: 1px solid var(--border-light);
  padding: var(--s6) 0 var(--s5);
}
/* Opt-in divider, reused only for the dataset appendix at the very bottom—it
   sits below the conclusion + sign-off, so a rule marks it as reference matter. */
.section--rule {
  border-top: 1px solid var(--border-light);
  padding-top: var(--s6);
}
/* modules sit flush to the section padding at a section's edges (no doubled gap) */
.section > .module:first-child { margin-top: 0; }
.section > .module:last-child { margin-bottom: 0; }

/* ── Prose ──────────────────────────────────────────────────── */
p { color: var(--text-secondary); line-height: 1.5; }
.section { scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }
.section > p { margin-bottom: var(--s3); font-size: 15px; }
.section > p:last-child { margin-bottom: 0; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-tertiary); }
a:hover { text-decoration-color: var(--text); }

h2 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 700; color: var(--text); margin-bottom: var(--s3); text-wrap: balance; }
/* h3: a subordinate lever inside an h2 movement. Same weight, smaller, quieter
   colour, with clear air above it so the step down from h2 reads. */
h3 { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--text-secondary); margin: var(--s6) 0 var(--s2); text-wrap: balance; }

/* intro (first-person) — carries a top divider like the sections */
.intro p { font-size: 16px; line-height: 1.55; color: var(--text-secondary); margin-bottom: var(--s4); }
.intro p:last-child { margin-bottom: 0; }
.intro strong { color: var(--text); font-variant-numeric: tabular-nums; }

.deflist { margin: 0 0 var(--s3); }
.deflist dt { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: var(--s1); }
.deflist dd { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--s5); }
.deflist dd:last-child { margin-bottom: 0; }

.rulelist { list-style: none; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.rulelist li { font-size: 15px; line-height: 1.45; color: var(--text-secondary); padding-left: var(--s4); position: relative; }
.rulelist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); }

.grade-key { list-style: none; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.grade-key li { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* inline worked figures in prose (filled by app.js) */
[data-report] { color: var(--text); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }

/* rules table: a subtle grey card, no outer top/bottom rules—just faint row
   hairlines inside for legibility */
.rules-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  margin: var(--s5) 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rules-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-light); }
.rules-table td { font-size: 14px; line-height: 1.45; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.rules-table tr:last-child td { border-bottom: none; }
.rules-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.rules-table td:last-child { color: var(--text-secondary); }

/* ── Hero (centred, roomy) ──────────────────────────────────── */
.hero { text-align: center; padding: var(--s10) 0 var(--s8); }
.badge {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  padding: var(--s1) var(--s3); border: 1px solid var(--border);
  border-radius: var(--radius-pill); margin-bottom: var(--s5);
}
.hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 600;
  color: var(--text); margin-bottom: var(--s5); text-wrap: balance;
}
.lede { font-size: 18px; line-height: 1.4; color: var(--text-secondary); max-width: 34rem; margin: 0 auto; text-wrap: balance; }
.byline-avatar {
  display: block; width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 40px;
  background: #fff url("../img/aidan.png?v=1") no-repeat center 42%;
  background-size: 132%;
  border: 1px solid var(--border);
}

/* ── Module shell ───────────────────────────────────────────── */
.module {
  margin: var(--s7) 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: var(--s5);
}
#explorer { scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }
.module-fallback { font-size: 14px; color: var(--text-tertiary); }
.module-head { margin-bottom: var(--s4); }
.module-title { font-size: 15px; font-weight: 700; color: var(--text); }
.module-sub { font-size: 13px; color: var(--text-tertiary); margin-top: var(--s1); line-height: 1.45; }


.colophon { font-size: 13px; color: var(--text-tertiary); margin-top: var(--s5); }
.signoff { margin-top: var(--s5); font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.signoff a { font-weight: 600; }

/* ── Dataset viewer (multi-sheet spreadsheet) ───────────────── */
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--s3); width: fit-content; }
.sheet-tab { border: none; background: none; cursor: pointer; font: 500 12.5px var(--font); color: var(--text-tertiary); padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--transition), background var(--transition); }
.sheet-tab:hover { color: var(--text); }
.sheet-tab.is-active { color: var(--text); background: var(--pill-active-bg); }
.sheet-tab:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }
.sheet-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: var(--s2); }
.sheet-scroll { overflow-x: auto; overflow-y: auto; max-height: 340px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sheet-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.sheet-table th, .sheet-table td { text-align: left; padding: 6px 10px; font-size: 12px; white-space: nowrap; border-bottom: 1px solid var(--border-light); }
.sheet-table th { position: sticky; top: 0; background: var(--bg-elevated); color: var(--text-tertiary); font-weight: 600; z-index: 1; }
.sheet-table td { color: var(--text-secondary); }
.sheet-table td.num { text-align: right; }
.sheet-table tr:last-child td { border-bottom: none; }
.sheet-table tbody tr:hover td { background: var(--bg-hover); }


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: var(--topbar-h); height: auto;
    padding: var(--s2) var(--gutter);
    border-right: none; border-bottom: 1px solid var(--border-light);
    z-index: 40; flex-direction: row; align-items: center;
  }
  .nav { flex-direction: row; gap: var(--s1); overflow-x: auto; min-width: 0; flex: 1 1 auto; -ms-overflow-style: none; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-sep { display: none; }
  .nav-item .nav-ico { display: none; }
  .sidebar-foot { margin-top: 0; margin-left: auto; padding-top: 0; padding-left: var(--s3); flex-shrink: 0; }
}