/* ==========================================================================
   Kit shell – documentation layout shared by the four LATENT kit pages
   (kit/foundations.html, elements.html, components.html, system.html).

   Link it after main.css and before the page stylesheet:
     <link rel="stylesheet" href="../assets/css/main.css">
     <link rel="stylesheet" href="../assets/css/components/kit-shell.css">
     <link rel="stylesheet" href="../assets/css/pages/kit-<page>.css">
   Behaviour: assets/js/components/kit-shell.js

   Markup skeleton
   ---------------
   <div class="kit-shell">
     <aside class="kit-sidebar">
       <a class="kit-brand" href="foundations.html#k00">
         <span class="kit-brand__name">LATENT</span>
         <span class="kit-brand__meta">UI Kit for AI · v0.1 · Sep 2026</span>
       </a>
       <button class="kit-search" type="button" data-command-palette-open>      (optional)
         Jump to… <span class="kit-search__kbd">⌘K</span></button>
       <nav class="kit-nav" aria-label="Kit" data-kit-nav>
         <div class="kit-nav__group">
           <span class="kit-nav__heading">START</span>
           <a class="kit-nav__link" href="#k00" aria-current="page">
             <span class="kit-nav__id">K00</span>Cover &amp; Index</a>
           …
         </div>
       </nav>
     </aside>
     <main class="kit-main" id="main">
       <div class="kit-topbar">…</div>          (optional, mobile only < 900px)
       <section class="kit-section" id="k01" data-kit-spy>
         <p class="kit-kicker">K01 · PRINCIPLES</p>
         <h2 class="kit-title">…</h2>
         <p class="kit-lead">…</p>
         <h3 class="kit-subhead">…</h3>
         <p class="kit-note">…</p>
       </section>
     </main>
   </div>

   Classes
   -------
   Layout      .kit-shell (272px sidebar + fluid main; one column < 900px,
               sidebar hidden) · .kit-main · --kit-pad-x (fluid side padding)
   Sidebar     .kit-sidebar · .kit-brand(__name|__meta) · .kit-search(__kbd)
               .kit-nav · .kit-nav--compact (30px rows, wider ids – K05+ page)
               .kit-nav__group · __heading · __link · __id · __tag
               (--kit-nav-id-width, default 26px, sets the id column)
               Active link = [aria-current="page"] (set in HTML, or by the
               scroll-spy in kit-shell.js)
   Mobile bar  .kit-topbar · __brand · __button   (visible < 900px only)
   Toolbar     .kit-toolbar · __title · __controls   sticky bar at the top of
               <main> (K07/K08) holding .kit-segmented switches
               .kit-segmented > button[role=radio][aria-checked]
               (+ data-kit-switch="theme|density" and data-value="…" → the
               JS writes data-theme / data-density on [data-kit-scope])
   Chapters    .kit-section  (anchor chapter, 1px hairline between chapters)
               .kit-section--closing (large bottom space, last chapter)
               .kit-block    (lighter section rhythm used by K07/K08)
               .kit-block--intro · .kit-block--closing
   Headings    .kit-kicker (mono “K02 · COLOR & TOKENS”) · .kit-title (h1/h2)
               .kit-lead · .kit-subhead (h3, gap above via --kit-subhead-gap)
               .kit-note (small intro line under a subhead) · .kit-heading
               (34px block title, K07/K08) · .kit-code (inline token name)
   Doc blocks  .kit-panel (white specimen card) · .kit-panel--tight
               .kit-panel__label (mono caption at the top of a panel)
               .kit-frame (bordered, horizontally scrollable frame for wide
               matrices/tables) · .kit-frame--sm (10px radius)
               .kit-spec-table (token/spec table inside a .kit-frame)
               .kit-swatch-dot (16px colour chip, colour via --swatch)
               .kit-verdict--do / --dont (“✓ Do” / “× Don’t” labels)
               .kit-status-shape--operational / --degraded / --outage
               (circle / square / triangle status marks)
   Palette     .command-palette--kit (narrower list layout for the kit ⌘K
               palette) · .kit-palette__id · .kit-palette__tag
   ========================================================================== */

/* Layout ------------------------------------------------------------------ */
.kit-shell {
  --kit-pad-x: clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

.kit-main {
  min-width: 0;
}

@media (max-width: 899.98px) {
  .kit-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sidebar ----------------------------------------------------------------- */
.kit-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  overflow: auto;
  padding: 24px 16px 32px;
  border-right: 1px solid var(--hairline);
  background: var(--surface-2);
}

@media (max-width: 899.98px) {
  .kit-sidebar {
    display: none;
  }
}

.kit-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
  text-decoration: none;
}

.kit-brand__name {
  font: 600 22px/1 var(--font-serif);
  letter-spacing: .02em;
}

.kit-brand__meta {
  font: 400 11px/1 var(--font-mono);
  color: var(--ink-3);
}

/* "Jump to… ⌘K" button (opens the page's command palette) */
.kit-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-3);
  font: 400 14px/1 var(--font-sans);
}

.kit-search__kbd {
  padding: 3px 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font: 500 11px/1 var(--font-mono);
}

.kit-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kit-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kit-nav__heading {
  padding: 0 8px 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* Grid: id column + label (+ optional tag). The row is centred in the
   32px link, id and label share its top edge. */
.kit-nav__link {
  display: grid;
  grid-template-columns: var(--kit-nav-id-width, 26px) minmax(0, 1fr) auto;
  align-content: center;
  align-items: start;
  column-gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 400 14px/1.2 var(--font-sans);
  text-decoration: none;
}

.kit-nav__link[aria-current="page"] {
  background: var(--surface-sunken);
  font-weight: 600;
}

.kit-nav__id {
  font: 400 11px/1.6 var(--font-mono);
  color: var(--ink-3);
}

/* Optional status tag on the right ("next", "soon") */
.kit-nav__tag {
  align-self: center;
  font: 400 10px/1 var(--font-mono);
  color: var(--ink-3);
}

.kit-nav--compact {
  --kit-nav-id-width: 30px;
}

.kit-nav--compact .kit-nav__link {
  min-height: 30px;
}

/* Mobile top bar (replaces the sidebar below 900px) ------------------------ */
.kit-topbar {
  display: none;
}

@media (max-width: 899.98px) {
  .kit-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 57px; /* 56px + 1px border */
    padding: 0 20px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
  }
}

.kit-topbar__brand {
  font: 600 18px/1 var(--font-serif);
}

.kit-topbar__button {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1 var(--font-sans);
  white-space: nowrap;
}

/* Sticky toolbar with theme / density switches (K07, K08) ------------------ */
.kit-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--kit-pad-x);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
}

.kit-toolbar__title {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--machine-ink);
}

.kit-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Segmented switch: <div class="kit-segmented" role="radiogroup">
                       <button role="radio" aria-checked="true">Paper</button> */
.kit-segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.kit-segmented > button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
}

.kit-segmented > button[aria-checked="true"] {
  background: var(--ink);
  color: var(--canvas);
}

/* Chapters ------------------------------------------------------------------ */
.kit-section {
  padding: clamp(48px, 7vw, 96px) var(--kit-pad-x);
}

.kit-section + .kit-section {
  border-top: 1px solid var(--hairline);
}

.kit-section--closing {
  padding-bottom: clamp(96px, 10vw, 160px);
}

.kit-block {
  padding: clamp(48px, 6vw, 80px) var(--kit-pad-x) 0;
}

.kit-block--intro {
  padding-top: clamp(40px, 6vw, 80px);
}

.kit-block--closing {
  padding-bottom: clamp(96px, 10vw, 160px);
}

/* Headings ------------------------------------------------------------------ */
.kit-kicker {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--machine-ink);
}

.kit-title {
  max-width: 900px;
  margin-top: 24px;
  font: 400 clamp(40px, 5vw, 72px)/1.02 var(--font-serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.kit-lead {
  max-width: 680px;
  margin-top: 24px;
  font: 400 18px/1.6 var(--font-sans);
  color: var(--ink-2);
  text-wrap: pretty;
}

.kit-subhead {
  margin-top: var(--kit-subhead-gap, 72px);
  font: 400 30px/1.2 var(--font-serif);
}

.kit-note {
  max-width: 640px;
  margin-top: 8px;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-2);
}

.kit-heading {
  font: 400 34px/1.2 var(--font-serif);
}

.kit-code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  font: 400 14px var(--font-mono);
}

/* Doc blocks ------------------------------------------------------------------ */
.kit-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.kit-panel--tight {
  gap: 14px;
  padding: 18px;
}

.kit-panel__label {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.kit-frame {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.kit-frame--sm {
  border-radius: var(--radius-control);
}

.kit-spec-table {
  width: 100%;
  min-width: 640px;
  font: 400 13px/1.3 var(--font-mono);
}

.kit-spec-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-3);
  font-weight: 500;
  text-align: left;
}

.kit-spec-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--surface-sunken);
}

.kit-swatch-dot {
  flex: none;
  width: 18px;  /* 16px + border */
  height: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  background: var(--swatch);
}

.kit-verdict--do,
.kit-verdict--dont {
  font-weight: 600;
}

.kit-verdict--do { color: var(--success); }
.kit-verdict--dont { color: var(--error); }

/* Status shapes: shape + colour, so states survive grayscale */
.kit-status-shape--operational {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-600);
}

.kit-status-shape--degraded {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #B07A12;
}

.kit-status-shape--outage {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #B42323;
  border-left: 5px solid transparent;
}

/* Kit command palette (list with ids and tags) --------------------------------- */
.command-palette--kit .command-palette__dialog {
  max-width: 560px;
}

.command-palette--kit .command-palette__bar {
  height: 57px; /* 56px + 1px border */
}

.command-palette--kit .command-palette__list {
  max-height: 380px;
}

.command-palette--kit .command-palette__item {
  justify-content: flex-start;
  padding: 10px 12px;
}

.command-palette--kit .command-palette__label {
  flex: 1;
}

.kit-palette__id {
  width: 30px;
  font: 400 12px/1 var(--font-mono);
  color: var(--machine-ink);
}

.kit-palette__tag {
  font: 400 11px/1 var(--font-mono);
  color: var(--ink-3);
}