/* ============================================================
   MUIRWAVE DESIGN SYSTEM — DOCUMENTATION CHROME
   Wrapper styles for the style-guide site itself. Not part of
   the shipping system (that lives in system.css). Kept separate
   so the canonical file stays copy-paste clean.
   ============================================================ */

body {
  background-image: var(--grad-storm);
  background-attachment: fixed;
  min-height: 100vh;
}

/* film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: overlay;
}

/* ---- Shell: sticky rail + content ----
   `minmax(0, 1fr)` and not `1fr`: a bare `1fr` track is `minmax(auto, 1fr)`, and
   that `auto` floor is the item's MIN-CONTENT size — so one un-shrinkable
   descendant anywhere in the page (the widest .spec table, a long .code line)
   silently widens the whole column past the viewport and the entire document
   scrolls sideways. `minmax(0, …)` pins the track to the space actually
   available; the `min-width: 0` on .content stops the grid ITEM being blown out
   the same way (grid items also default to a min-content automatic minimum).
   Anything genuinely wider than the column is a scroll container in its own
   right (.spec, .code) and scrolls inside itself. */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,19,33,0.85), rgba(5,10,18,0.7));
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  padding: 28px 0 20px; z-index: 50;
}
.rail-brand { padding: 0 26px 24px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rail-brand .mark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--brass-hi); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.rail-brand .mark .rune { color: var(--brass); font-size: 27px; }
.rail-brand .sub { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fog); margin-top: 10px; }
.rail-section { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); padding: 18px 26px 6px; }
.rail a.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 26px; font-size: 12px; letter-spacing: 0.06em;
  color: var(--foam); text-decoration: none;
  border-left: 2px solid transparent; transition: all 0.2s;
}
.rail a.nav-link:hover { color: var(--ice); background: rgba(79,209,224,0.06); border-left-color: var(--squall); }
.rail a.nav-link.active { color: var(--ice); border-left-color: var(--brass-hi); background: rgba(208,168,80,0.08); }
/* Nav glyphs sit beside 12px labels, but a geometric glyph (◆ ≋ ∿ ▧) carries far
   less ink than a letterform at the same point size, so a "matching" 11px read as
   a speck. Sized up and centred in a fixed column so every label still starts on
   the same x. Same reasoning drives .sect-toggle and the rail search glyph in
   app.js — icon sizes across the guide are set on optical weight, not on the
   type size they sit next to. */
.rail a.nav-link .glyph {
  font-family: var(--font-display); font-size: 16px; line-height: 1;
  color: var(--brass); width: 22px; text-align: center; flex: none;
}
.rail-foot { margin-top: auto; padding: 16px 26px 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 9px; color: var(--fog); letter-spacing: 0.1em; line-height: 1.8; }
.rail-foot .ok { color: var(--ok); }

@media (max-width: 920px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* `overflow: visible` deliberately undoes the desktop rail's `overflow-y: auto`.
     Stacked, the rail is a sticky full-height scroller; wrapped into a row it is
     a plain wrapping nav, and leaving the scroll container in place gives the
     nav its own private sideways scrollbar the moment a row is one pixel over. */
  .rail { position: static; height: auto; overflow: visible; min-width: 0; flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 4px 8px; align-items: center; }
  .rail-brand { padding: 0 14px 0 0; border-bottom: none; border-right: 1px solid var(--line); margin: 0 8px 0 0; }
  .rail-section, .rail-foot { display: none; }
  .rail a.nav-link { padding: 6px 12px; border-left: none; border-bottom: 2px solid transparent; }
  .rail a.nav-link.active { border-bottom-color: var(--brass-hi); border-left-color: transparent; }
  /* The injected search box (assets/app.js) is a fixed-intrinsic-width <input>;
     as an inline flex item it cannot shrink and it half-fills a row. Give it its
     own full-width row instead. Two classes to out-specify app.js's own sheet,
     which is injected into <head> after this file. */
  .rail .rail-filter { flex: 1 0 100%; margin: 4px 0 2px; }
}

/* ---- Content ---- */
.content { padding: 0 0 80px; max-width: 1080px; min-width: 0; }
.page-head { padding: 72px 48px 40px; border-bottom: 1px dashed var(--line); }
.page-head .eyebrow { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-head .eyebrow::before { content: ""; height: 1px; width: 38px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.page-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; color: var(--brass-hi); margin: 0 0 22px; letter-spacing: 0.015em; text-shadow: var(--glow-brass); }
.page-head .lede { font-size: 18px; line-height: 1.7; color: var(--ice); max-width: 720px; margin: 0; text-wrap: pretty; }
.page-head .lede em { color: var(--brass-hi); font-style: italic; }
/* The h1 clamp floor is 40px, which is wider than a 375px column can hold for a
   long single word — "Troubleshooting" alone overran by 46px and scrolled the
   whole page sideways, because a word that cannot fit has nowhere to break.
   Drop the floor on phones (this curve meets the 6vw desktop curve exactly at
   700px, so nothing jumps at the breakpoint), and keep break-word as the
   backstop for any future title longer than the ones shipping today. */
@media (max-width: 700px) {
  .page-head { padding: 56px 22px 32px; }
  .page-head h1 { font-size: clamp(30px, 8vw, 42px); overflow-wrap: break-word; }
}

.sect { padding: 56px 48px; border-bottom: 1px solid rgba(176,141,87,0.1); }
@media (max-width: 700px) { .sect { padding: 44px 22px; } }
.sect-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.sect-num { font-family: var(--font-display); font-size: 14px; color: var(--brass); letter-spacing: 0.22em; }
.sect-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); color: var(--ice); margin: 0; letter-spacing: 0.015em; }
.sect-lede { font-size: 16px; line-height: 1.75; color: var(--foam); max-width: 720px; margin: 0 0 32px; text-wrap: pretty; }
.sect-lede strong { color: var(--ice); font-weight: 500; }
.sub-title { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ice); letter-spacing: 0.04em; margin: 40px 0 16px; text-transform: uppercase; }
.sub-title:first-child { margin-top: 0; }

/* ---- Live demo frame ---- */
.demo {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 10px, transparent 10px 20px),
    rgba(5,10,18,0.4);
  padding: 36px 32px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  position: relative;
}
.demo.col { flex-direction: column; align-items: stretch; }
.demo.center { justify-content: center; }
.demo-label {
  position: absolute; top: 10px; right: 14px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em;
  color: var(--fog); text-transform: uppercase;
}

/* ---- Code block ---- */
.code {
  margin: 0; border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: rgba(5,10,18,0.75);
  padding: 18px 20px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  color: var(--foam); letter-spacing: 0.02em;
  overflow-x: auto; white-space: pre;
}
.demo + .code { border-radius: 0 0 var(--r-md) var(--r-md); margin-top: -1px; }
.demo:has(+ .code) { border-radius: var(--r-md) var(--r-md) 0 0; }
.code .c { color: var(--brass); }       /* comment */
.code .k { color: var(--squall); }       /* tag / keyword */
.code .a { color: var(--brass-hi); }     /* attr */
.code .s { color: var(--ok); }           /* string */

/* code-only block (no demo above) */
.code.solo { border-radius: var(--r-md); border-top: 1px solid var(--line); }

/* ---- Spec table ---- */
.spec { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 0; }
.spec th, .spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(176,141,87,0.12); vertical-align: top; }
.spec th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.spec td { color: var(--foam); }
.spec td.tok { font-family: var(--font-mono); font-size: 12px; color: var(--brass-hi); white-space: nowrap; }
/* .val cells often carry prose/long tokens — wrap (break anywhere as a last
   resort) instead of forcing table overflow on narrow screens. */
.spec td.val { font-family: var(--font-mono); font-size: 12px; color: var(--ice); overflow-wrap: anywhere; }
.spec tr:hover td { background: rgba(11,19,33,0.35); }
/* Narrow screens: the table scrolls horizontally rather than squeezing
   columns until text wraps a-letter-at-a-time. */
@media (max-width: 700px) {
  .spec { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec td, .spec th { min-width: 110px; }
  .spec td.tok { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- Swatch grid ---- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: rgba(11,19,33,0.4); }
.swatch .chip-fill { height: 76px; border-bottom: 1px solid var(--line); }
.swatch .meta { padding: 11px 13px; }
.swatch .nm { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ice); }
.swatch .vr { font-family: var(--font-mono); font-size: 10px; color: var(--brass-hi); margin-top: 3px; }
.swatch .hx { font-family: var(--font-mono); font-size: 10px; color: var(--fog); letter-spacing: 0.05em; }
.swatch .use { font-size: 11px; color: var(--foam); margin-top: 7px; line-height: 1.45; }

/* ---- Do / Don't ---- */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 700px) { .dodont { grid-template-columns: 1fr; } }
.dd { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; background: rgba(11,19,33,0.4); }
.dd.do  { border-left: 3px solid var(--ok); }
.dd.dont{ border-left: 3px solid var(--danger); }
.dd .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dd.do .lbl { color: var(--ok); }
.dd.dont .lbl { color: var(--danger); }
.dd ul { margin: 0; padding-left: 18px; }
.dd li { font-size: 13.5px; color: var(--foam); line-height: 1.7; margin-bottom: 6px; }
.dd li:last-child { margin-bottom: 0; }

/* ---- Type specimen rows ---- */
.spec-row { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.spec-row .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fog); text-transform: uppercase; line-height: 1.7; }
.spec-row .lbl b { color: var(--brass-hi); font-weight: 500; display: block; }
@media (max-width: 600px) { .spec-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---- Callout ---- */
.note {
  border-left: 3px solid var(--brass); padding: 4px 0 4px 20px; margin: 24px 0;
  font-size: 14px; color: var(--foam); line-height: 1.7;
}
.note b { color: var(--brass-hi); font-weight: 500; }
.note.audit { border-left-color: var(--squall); }
.note.audit b { color: var(--squall); }

/* ---- Pillar cards (home) ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; background: var(--grad-surface);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: var(--shadow-card); }
.pillar .n { font-family: var(--font-mono); font-size: 11px; color: var(--brass); letter-spacing: 0.22em; }
.pillar h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--brass-hi); margin: 14px 0 12px; letter-spacing: 0.02em; }
.pillar p { font-size: 14px; color: var(--foam); line-height: 1.65; margin: 0 0 18px; }
.pillar .go { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--squall); text-transform: uppercase; }

/* ============================================================
   USER-GUIDE ADDITIONS (extends the design-system docs chrome)
   ============================================================ */

/* ---- Numbered step list ---- */
.steps { counter-reset: step; margin: 8px 0 0; padding: 0; list-style: none; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 26px 52px; margin: 0;
  border-left: 1px solid var(--line); margin-left: 15px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.steps > li::before {
  content: counter(step); position: absolute; left: -15px; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-surface); border: 1px solid var(--brass);
  color: var(--brass-hi); font-family: var(--font-display); font-weight: 600;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.steps .step-title { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ice); margin: 2px 0 6px; }
.steps .step-body { font-size: 14.5px; color: var(--foam); line-height: 1.7; }
.steps .step-body b { color: var(--ice); font-weight: 500; }

/* ---- Figure frame (screenshots / diagrams) ---- */
.figure { margin: 26px 0; }
.figure .frame {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(5,10,18,0.5); overflow: hidden;
}
.figure img, .figure svg { display: block; width: 100%; height: auto; }
.figure .placeholder {
  aspect-ratio: 16 / 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 30px;
  background:
    repeating-linear-gradient(45deg, rgba(208,168,80,0.03) 0 12px, transparent 12px 24px),
    rgba(11,19,33,0.4);
}
.figure .placeholder .ic { font-family: var(--font-display); font-size: 30px; color: var(--brass); opacity: 0.7; }
.figure .placeholder .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog); }
.figure .placeholder .desc { font-size: 13px; color: var(--foam); max-width: 380px; line-height: 1.5; }
.figure figcaption { font-size: 12.5px; color: var(--fog); margin-top: 10px; line-height: 1.55; padding-left: 2px; }
.figure figcaption b { color: var(--brass-hi); font-weight: 500; }
/* Portrait screenshots (e.g. the tall Impact panel, shot on iPad Pro to fit
   the full hearing-group table + soft-start ramp in one frame) would stretch
   to the whole column width and tower over the landscape figures. Cap the
   frame to a tablet-in-portrait width and centre it so it reads as one panel,
   not a page-length banner. On mobile the column is already narrower than the
   cap, so this is a no-op there. */
.figure.portrait .frame { max-width: 660px; margin-inline: auto; }
.figure.portrait figcaption { max-width: 660px; margin-inline: auto; }

/* ---- Inline UI-control reference ---- */
.uiref {
  font-family: var(--font-body); font-weight: 500; font-size: 0.92em;
  color: var(--brass-hi); border: 1px solid rgba(208,168,80,0.35);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap;
  background: rgba(208,168,80,0.06);
}

/* ---- FAQ / concept Q blocks ---- */
.qa { border-top: 1px solid var(--line); padding: 22px 0; }
.qa:first-of-type { border-top: none; }
.qa .q { font-family: var(--font-body); font-weight: 600; font-size: 16.5px; color: var(--ice); margin: 0 0 8px; }
.qa .a { font-size: 14.5px; color: var(--foam); line-height: 1.75; margin: 0; }
.qa .a b { color: var(--ice); font-weight: 500; }