/* ============================================================================
   Ripple Reference — the reading-page layer
   ----------------------------------------------------------------------------
   Built 2026-09-20. Dan, on the Core pages' Toolbag tile: "all the additional
   links down under references ... those links are like dead."

   He was right. The five glossary pages, tip.html and tips-and-tricks.html all
   went through the "Blank all pages except home" pass (a3926d6) and came out the
   other side with their stylesheets gone -- no <style>, no <link> -- while every
   class name stayed in the markup. They rendered as raw unstyled HTML referring
   to rules that no longer existed anywhere. Not a design problem. Dead pages.

   WHY THIS IS A SECOND SHARED FILE AND NOT MORE INLINE <style>
   ripple-core.css already owns the tokens, the woven plaid ground, .tile and
   .topbar -- everything shared between the Core pages and the three dashboards.
   It closes with: "Anything reskinned after this should link here rather than
   copy from here." These pages do exactly that. What ripple-core.css does not
   have is a READING layout: long-form prose, metric tables, callouts, a rung
   strip. Rather than paste that into seven pages (which is how four design
   generations drifted apart unnoticed in the first place), it lives here once.

   Load order on every reference page:
       ripple-core.css      -> tokens, plaid, .tile, .topbar
       ripple-reference.css -> this file: the card, prose, tables, callouts

   Tier: Touch of Grey. These pages describe both stations, so they cannot wear
   a station color -- Purple Haze means DIN6, Scarlet Begonias means DII5.
   ============================================================================ */

/* Space Mono is declared here, not in ripple-core.css, because the three
   dashboards that link that file already declare it inline. Paths resolve
   against THIS stylesheet's location (assets/), not against the page. */
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
}

:root{
  --ink:#231F20; --sub:#5c7185;
  --good:#1f9d55; --warn:#b07d18; --bad:#b3261e;
  --font-data:'Space Mono','SFMono-Regular',Menlo,monospace;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; min-width:0; }
html{ -webkit-text-size-adjust:100%; }
html,body{
  margin:0; padding:0; min-height:100%;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- the card ----------
   Problem Solver's signature move, carried over from the Core pages: one
   full-bleed rounded card inset 10px so the plaid ground shows around it.
   min-height, not a locked 100dvh -- these pages scroll. */
.ref-card{
  position:relative;
  min-height:calc(100dvh - 20px);
  margin:10px;
  padding:18px 20px 30px;
  border-radius:26px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(var(--accent-rgb),.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -14px rgba(13,27,42,.3), inset 0 1px 0 rgba(255,255,255,.4);
  overflow:hidden;
}
@supports not (min-height: 100dvh){ .ref-card{ min-height:calc(100vh - 20px); } }
.ref-inner{ position:relative; max-width:760px; margin:0 auto; }

/* ---------- header cluster ----------
   Same construction as the Core pages' brand lockup: home mark, then the
   stacked main line / thin rule / sub-label, tightest at the top. */
.ref-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; }
.ref-home{
  display:inline-flex; align-items:center; flex:none;
  min-height:44px; padding:10px 8px; margin:-10px 0 -10px -8px;
  line-height:0; border-radius:12px; text-decoration:none;
  transition:transform .12s ease, opacity .12s ease;
}
.ref-home img{ width:88px; height:auto; display:block; }
.ref-home:hover{ opacity:.72; }
.ref-home:active{ transform:scale(.93); }
.ref-home:focus-visible{ outline:2px solid rgba(var(--accent-rgb),.55); outline-offset:2px; }
.ref-brand{ margin-left:auto; text-align:right; padding-top:2px; }
.ref-brand-main{
  font-family:var(--font-data); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
}
.ref-brand-line{ height:1px; background:rgba(var(--accent-rgb),.28); margin:5px 0 4px auto; width:100%; }
.ref-brand-tag{
  font-family:var(--font-data); font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:lowercase; color:var(--accent2);
}

/* ---------- title block ---------- */
.ref-kicker{
  font-family:var(--font-data); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent2);
  margin-bottom:8px;
}
h1.ref-title{
  margin:0 0 10px; font-size:31px; line-height:1.12; font-weight:800;
  letter-spacing:-.015em; color:var(--ink);
}
.ref-standfirst{ margin:0 0 4px; font-size:16px; line-height:1.55; color:var(--sub); }
.ref-rule{ height:1px; background:rgba(var(--accent-rgb),.22); margin:22px 0; }

/* ---------- prose ---------- */
.ref-inner h2{
  margin:34px 0 12px; font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
}
.ref-inner h3{ margin:24px 0 8px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.ref-inner p{ margin:0 0 13px; font-size:15px; line-height:1.62; }
.ref-inner ul, .ref-inner ol{ margin:0 0 13px; padding-left:20px; }
.ref-inner li{ font-size:15px; line-height:1.6; margin-bottom:7px; }
.ref-inner a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
.ref-inner a:hover{ opacity:.7; }
.ref-inner strong{ font-weight:700; }
.ref-inner code, .num{
  font-family:var(--font-data); font-size:.9em; font-weight:700;
  background:rgba(255,255,255,.66); border:1px solid rgba(var(--accent-rgb),.16);
  border-radius:5px; padding:1px 5px; white-space:nowrap;
}

/* ---------- tables ----------
   Wrapped in .tw so a wide table scrolls itself instead of the page. */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px;
  border:1px solid rgba(var(--accent-rgb),.16); border-radius:14px;
  background:rgba(255,255,255,.5); }
table.ref{ width:100%; border-collapse:collapse; font-size:14px; min-width:460px; }
table.ref th{
  text-align:left; padding:10px 13px; font-family:var(--font-data);
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-ink); border-bottom:1px solid rgba(var(--accent-rgb),.22);
  white-space:nowrap; background:rgba(255,255,255,.4);
}
table.ref td{ padding:10px 13px; vertical-align:top; line-height:1.5;
  border-bottom:1px solid rgba(var(--accent-rgb),.1); }
table.ref tr:last-child td{ border-bottom:none; }
table.ref td.mono{ font-family:var(--font-data); font-size:13px; font-weight:700; white-space:nowrap; }

/* verdict colouring -- the same three outcomes rules.py returns */
.v-out{ color:var(--bad); font-weight:700; }
.v-flag{ color:var(--warn); font-weight:700; }
.v-ok{ color:var(--good); font-weight:700; }
.v-none{ color:var(--accent2); font-weight:700; }

/* ---------- callouts ---------- */
.note{
  margin:0 0 16px; padding:13px 15px; border-radius:14px; font-size:14.5px; line-height:1.55;
  background:rgba(255,255,255,.55); border:1px solid rgba(var(--accent-rgb),.18);
  border-left:3px solid rgba(var(--accent-rgb),.5);
}
.note.warn{ border-left-color:var(--warn); background:rgba(255,250,238,.72); }
.note.stop{ border-left-color:var(--bad); background:rgba(255,244,243,.75); }
.note .nh{
  display:block; font-family:var(--font-data); font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px;
}
.note.warn .nh{ color:var(--warn); }
.note.stop .nh{ color:var(--bad); }

/* ---------- the rung strip ----------
   Where this page's numbers sit in the ladder. Ten rungs, this page's lit. */
.rungs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.rung{
  font-family:var(--font-data); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:5px 10px; border-radius:999px; text-decoration:none; color:var(--accent2);
  background:rgba(255,255,255,.45); border:1px solid rgba(var(--accent-rgb),.14);
}
a.rung:hover{ background:rgba(255,255,255,.8); }
.rung.on{ color:#fff; background:var(--accent-ink); border-color:var(--accent-ink); }

/* ---------- chips / cross-links ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 6px; }
.chips a{
  font-size:11px; font-weight:700; letter-spacing:.03em; text-decoration:none;
  padding:6px 12px; border-radius:999px; color:var(--accent-ink);
  background:rgba(255,255,255,.55); border:1px solid rgba(var(--accent-rgb),.18);
}
.chips a:hover{ background:rgba(255,255,255,.85); }

/* ---------- footer ---------- */
.ref-foot{ margin-top:38px; padding-top:16px; border-top:1px solid rgba(var(--accent-rgb),.18);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ref-src{ font-size:12px; line-height:1.6; color:var(--accent2); max-width:460px; }
.ref-src b{ font-family:var(--font-data); font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink);
  display:block; margin-bottom:4px; }
.fc{ text-align:right; flex:none; }
.fc-label{ display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent2); }
.fc-divider{ display:block; height:1px; background:rgba(var(--accent-rgb),.28); margin:4px 0 3px; }
.fc-brand{ display:block; font-family:var(--font-data); font-size:11px; font-weight:700;
  letter-spacing:.04em; color:var(--accent-ink); }

@media (max-width:560px){
  .ref-card{ padding:16px 15px 26px; border-radius:22px; }
  h1.ref-title{ font-size:25px; }
  .ref-standfirst{ font-size:15px; }
  .ref-home img{ width:76px; }
}