/* ================================================================
   SOLON KIT V2 — the refinement layer
   Source: Claude Design project "Solon Kit v2" (solon-kit-v2/solon-v2.css),
   integrated with two deviations, both marked [SITE-FIX] below:
     1) the kit styled `.site-header`; the real class is `.site-head`;
     2) the kit's §7 theme-crossfade re-declared `transition` on
        a.course-card, which would have overridden §4's hover lift.
   Everything else is verbatim. Loaded AFTER course.css / site.css.
   Pure CSS: no markup changes, no new fonts, colours only from tokens.
   ================================================================ */

/* ----------------------------------------------------------------
   0 · TOKENS  (course.css AND site.css :root blocks)
   ---------------------------------------------------------------- */
:root {
  --wash: rgba(15, 20, 28, .45);            /* mobile nav overlay   */
  --shadow-lift: 0 2px 6px rgba(29,42,58,.08), 0 16px 40px rgba(29,42,58,.14);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wash: rgba(0, 0, 0, .55);
          --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5); }
}
:root[data-theme="light"] { color-scheme: light;
  --wash: rgba(15, 20, 28, .45);
  --shadow-lift: 0 2px 6px rgba(29,42,58,.08), 0 16px 40px rgba(29,42,58,.14); }
:root[data-theme="dark"]  { color-scheme: dark;
  --wash: rgba(0, 0, 0, .55);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5); }

/* ----------------------------------------------------------------
   1 · TYPOGRAPHY & READING RHYTHM  (course.css _base)
   ---------------------------------------------------------------- */
h1 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.35rem); text-wrap: balance; }
h2 { font-size: clamp(1.3rem, 1.16rem + .5vw, 1.5rem); text-wrap: balance; }
p, li, .lede, figcaption { text-wrap: pretty; }
.lede { font-size: clamp(1.1rem, 1.02rem + .3vw, 1.18rem); }

.sec-n, .pno, .lno, .clause-no, .spa-toc .n, .quiz-opt .l, .sb-ch .n {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent-soft); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

[id] { scroll-margin-top: 28px; }
@media (max-width: 980px) { [id] { scroll-margin-top: 76px; } }

/* ----------------------------------------------------------------
   2 · GRID, SPACING, MEASURE  (course.css shell)
   ---------------------------------------------------------------- */
.content { padding: 56px clamp(22px, 5vw, 48px) 96px; }
.content > p, .content > ul, .content > ol,
.content > h2, .content > h3,
.content > .ch-header, .content > .box {
  max-width: 680px;
}

/* [SITE-FIX 3] one column, one left edge. course.css gives .box, figures, tables,
   clause cards and the edition-home panels their own `margin: … 0`, which beat the
   centring rule above: boxes and figures hugged the left of the page while the
   paragraphs sat centred 160px further right, and the quiz sat somewhere between.
   Now every block on a page shares the text column. Reading pages (a .ch-header:
   chapters, glossary, exam) use the 680px measure, about 75 characters a line;
   documents and edition homes keep 760px, which the hanging clause numbers need.
   Only the side margins change; vertical rhythm stays as course.css set it. */
.layout .content > * { margin-left: auto; margin-right: auto; max-width: 760px; }
.layout .content:has(> .ch-header) > * { max-width: 680px; }
/* the widest tables (eight-column cap tables in Venture) need a little less side
   padding to fit that measure without a sideways scroll */
table.tbl th:nth-last-child(n+7), table.tbl th:nth-last-child(n+7) ~ th,
table.tbl td:nth-last-child(n+7), table.tbl td:nth-last-child(n+7) ~ td { padding-left: 9px; padding-right: 9px; }

.ch-header { margin-bottom: 40px; }
.ch-header .lede { margin-bottom: .9em; }

.box { padding: 18px 22px 15px; border-radius: 0 14px 14px 0; }

/* ----------------------------------------------------------------
   3 · SIDEBAR & NAVIGATION  (course.css)
   ---------------------------------------------------------------- */
a.sb-ch {
  padding: 8px 12px;
  transition: background .15s ease, color .15s ease;
}
a.sb-ch .n { font-size: 11.5px; }
a.sb-extra { transition: border-color .15s ease; }
button.th-btn { transition: border-color .15s ease, color .15s ease, background .15s ease; }

.menu-btn {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 980px) {
  #sidebar {
    width: min(320px, 86vw);
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
    box-shadow: var(--shadow-lift);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  body.nav-open .sb-overlay {
    background: var(--wash);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  a.sb-ch { padding: 11px 12px; }
  a.sb-extra { padding: 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar { transition: none; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------
   4 · CATALOGUE & COURSE CARDS  (site.css)
   ---------------------------------------------------------------- */
.hero { padding: 48px 0 30px; }
.hero h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3rem); }

.btn {
  padding: 12px 26px;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow); }

.grid { gap: 18px; }
a.course-card {
  padding: 22px 24px 18px; gap: 10px;
  /* [SITE-FIX 2] colour props folded in here so §7's crossfade does not
     override the lift — one transition list, both jobs */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease,
              background-color .25s ease, color .25s ease;
}
a.course-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
a.course-card:active { transform: translateY(0); }
.course-card h3 { font-size: 1.12rem; }
.course-card .meta { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  a.course-card, .btn { transition: none; }
  a.course-card:hover, .btn:hover { transform: none; }
}

/* platform header becomes shelf-stable on scroll (site.css)
   [SITE-FIX 1] the kit said .site-header; the site's class is .site-head */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
}

/* ----------------------------------------------------------------
   5 · QUIZ  (course.css)
   ---------------------------------------------------------------- */
button.quiz-opt {
  padding: 14px 16px; border-radius: 14px; min-height: 48px;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
button.quiz-opt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
button.quiz-opt:active:not(:disabled) { transform: scale(.99); }
.quiz-bar { height: 5px; }
.quiz-explain { border-left: 3px solid var(--line); }
.quiz-explain:has(.verdict.ok) { border-left-color: var(--ok); }
.quiz-explain:has(.verdict.no) { border-left-color: var(--bad); }

/* ----------------------------------------------------------------
   6 · DOCUMENTS  (course.css)
   ---------------------------------------------------------------- */
.spa { font-variant-numeric: tabular-nums; }
.spa-toc a { padding: 5px 0; transition: color .15s ease; }
.spa-toc a:hover { color: var(--accent-2); }
.clause-card .clause-link { transition: color .15s ease, background .15s ease; }
.clause-card .clause-link:hover { background: var(--paper-2); }
.spa :target { scroll-margin-top: 28px; }

/* ----------------------------------------------------------------
   7 · THEME SWITCH POLISH  (course.css)
   [SITE-FIX 2] a.course-card removed from this list — its crossfade
   lives in §4's combined transition instead.
   ---------------------------------------------------------------- */
body, #sidebar, .quiz-card, .box, .clause-card, table.tbl {
  transition-property: background-color, border-color, color;
  transition-duration: .25s;
  transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  body, #sidebar, .quiz-card, .box, .clause-card, table.tbl { transition: none; }
}

/* ----------------------------------------------------------------
   8 · CARD ICONS  (edition homes; drawn by tools/card_icons.py)
   Line icons replace the emoji and font glyphs the cards used to wear.
   ---------------------------------------------------------------- */
.res-cards .ic { display: block; line-height: 0; color: var(--accent); }
.res-cards .ic svg { width: 30px; height: 30px; }