/* 2026-05-05 nav state evolution (multiple iterations):
     - .guide-logo + .nav-btn now inherit white from .onDrk parent
     - active pills (top + bottom) flip to white text on light brand-shade bg
     - font-weight on .nav-btn dropped (inherits from parent)
   Touch-edit comment to nudge SFTP watcher when batch edits don't all upload. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html {
  min-height:100%;
}
/* 2026-05-07: mount stays bgless; the canvas comes from #bg-layer + html + body
   (and the .sg-contact-bg ::before image for onMix). Stops the JS from writing
   inline `background: rgb(252,252,252) !important` etc. onto the mount on every
   context switch — the mountain image was being masked on onMix and onDrk had a
   hardcoded gray that ignored brand bg overrides. */
/* THE MOUNT CARRIES THE SITE'S BASE TYPE.
   2026-08-23: /ops/style-guide renders this guide INSIDE .opsdash, whose own
   font-family (Roboto) is inherited by every unstyled descendant — so the
   guide's paragraphs, list items and table cells came out Roboto while the
   site itself is HypatiaSans. The guide has to show the SITE, never its host.
   An inherited value loses to any declaration here, so one rule settles it.
   --font1Family is the site canon: `body, html { font-family: var(--font1Family) }`
   in sst-styles.css. Family ONLY — sizes still come from the site's own rules. */
#tl-style-guide-mount {
  background:none !important;
  font-family:var(--font1Family, var(--font2Family, inherit));
}
body {
  /* FAMILY token, not the `font` shorthand. --fontPrimary is
     "400 normal 100%/1.3 'HypatiaSans', …" — a full shorthand, which is invalid
     as a font-family value, so this declaration was being dropped outright and
     had never done anything. --font1Family is the family-only token. */
  font-family:var(--font1Family, var(--font2Family, inherit));
  /* NO font-size HERE, AND DO NOT RE-ADD ONE. 2026-08-31 05:52 MDT: this line was
     `font-size:14px`, and on the three sites where this sheet loads AFTER the site's
     own sheet it beat `body,html{font-size:var(--FontSize)}` — same specificity, later
     wins. Measured on the live guides: cololamb 14px vs its own 16px, epic4portal 14 vs
     16.16, mongooseyouthsports 14 vs 16.48; goepic4 / epic4contests / sweetwatercreek
     and all five sst-hfnav sites were already unaffected (hfnav declares it !important).
     So one shared guide reported two different base sizes, and .form-label — 85% of body,
     section 15 — rendered 11.9px on ColoradoLamb against 16.456px on TurnerLee. The guide
     has to show the SITE, exactly as the #tl-style-guide-mount note above says: family is
     pinned here, SIZES COME FROM THE SITE'S OWN RULES. Removing the declaration is the fix;
     restating it as var(--FontSize) is not, because --FontSize is in rem and html already
     carries it, so a second application compounds (turnerlee 17.6px root -> 19.36px body). */
  background:transparent !important;
  color:rgba(0,0,0,.85);
  transition:color .3s;
  min-height:100vh;
  position:relative;
  z-index:0;
}

/* Match /en/contact background treatment for Style Guide onMix context */
body.sg-contact-bg::before {
  content:"";
  position:fixed;
  inset:0;
  background:url("/img/all/bg_default.png?width=2400") center center / cover no-repeat;
  z-index:-3;
  pointer-events:none;
}
body.sg-contact-bg::after {
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, 0.60);
  z-index:-2;
  pointer-events:none;
}
@media (max-width:767.98px) {
  body.sg-contact-bg::before { background-position:20% center; }
}
body.sg-contact-bg #bg-layer {
  background:transparent !important;
}
/* 2026-05-12: host-agnostic onMix fallback.
   Some site templates suppress body pseudo-layer rendering, so also paint the
   mountain directly onto #bg-layer whenever the On Mix context pill is active. */
body:has(.nav-btn.ctx-mx.active) #bg-layer {
  background:
    linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
    url("https://turnerlee.com/img/all/bg_default.png?width=2400") center center / cover no-repeat fixed !important;
}

/* ── CSS VARS updated by JS ──────────────────────────────────────── */
:root {
  --txt:      rgba(0,0,0,.85);
  /* --txt-s IS THE READING INK FOR THE RIGHT COLUMN, and it exists because
     --txt-m was doing that job and could not. Craig, 2026-08-24: "I honestly
     can't read any of this. It's so small and hard to read."
     Measured: the whole meta column was 11px at rgba(0,0,0,.4) — about 2.9:1 on
     white, which fails WCAG AA at ANY size and is being asked to carry the only
     text in this guide an agent has to act on. .68 is ~7.4:1. --txt-m stays
     what it always was, for things that really are secondary. */
  --txt-s:    rgba(0,0,0,.68);
  --txt-m:    rgba(0,0,0,.4);
  --txt-mm:   rgba(0,0,0,.25);
  --bdr:      rgba(0,0,0,.09);
}

/* ── STICKY HEADER ─────────────────────────────────────────────── */
/* Break the header out of whatever container the CMS template puts us in.
   width:100vw + margin-left:calc(50% - 50vw) escapes any centered container
   reliably at all viewport widths — no box-shadow/clip-path tricks needed
   once the element is already true viewport width. */
.guide-header {
  display:flex;flex-direction:column;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  box-sizing:border-box;
  /* On Light, JS sets body to dark ink; .nav-btn uses color:inherit — without this,
     SETTINGS / BG / context pills read as black on the dark color1xd / color2d bars. */
  color: rgba(255, 255, 255, 0.92);
}

.guide-header-row {
  width:100%;
}
.guide-header-row--top  { background:var(--color1xd, #001a3e); }
.guide-header-row--bottom {
  background:var(--color2d, #8a7a3a);
  box-sizing:border-box;
  /* Row 2 is a sibling of <header.guide-header> in template (not nested inside it),
     so it does not inherit .guide-header's light ink. On Light → body gets dark text;
     without this, SETTINGS / brand pills / BG labels inherit black on color2d. */
  color: rgba(255, 255, 255, 0.92);
  /* edge-to-edge breakout while in normal flow (matches .guide-header pattern):
     the bar is a child of .tl-sg-root which is inside .container, so 100vw +
     negative margin paints the brown band full viewport width. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
}
.guide-header-row--bottom.is-stuck {
  position:fixed;
  top:var(--site-nav-h, 0px);
  left:0;
  right:0;
  z-index:1500;
  /* in fixed mode, left:0/right:0 already span the viewport — reset breakout
     so margin doesn't push the bar offscreen */
  width:auto;
  max-width:none;
  margin-left:0;
}
.guide-row-spacer { width:100%; height:0; display:none; }
.guide-row-spacer.is-active { display:block; }
/* Inner wrapper constrains content to standard container width */
.guide-header-row-inner {
  max-width:1400px;
  margin:0 auto;
  padding:10px 40px;
  display:flex;align-items:center;flex-wrap:wrap;
  row-gap:6px;column-gap:12px;
}
.guide-header-row--bottom .guide-header-row-inner {
  padding-top:8px;padding-bottom:8px;
}
/* "STYLE GUIDE" label — color intentionally OMITTED so it inherits the
   onDrk cascade default (rgba(255,255,255,.92)) from .guide-header-row--top.onDrk.
   Light text on dark header is the right "reversed" pattern. */
.guide-logo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  /* margin-right: 16px; */
  flex-shrink: 0;
}

/* ── NAV ─────────────────────────────────────────────────────────── */
/* Cluster groups a .guide-logo label with its adjacent .nav-group so the
   label can't wrap away from its buttons. Clusters themselves can wrap
   to a new line within .guide-header-row-inner when the row is narrow.
   If a single cluster runs out of space, it scrolls horizontally — the
   scrollbar is hidden across browsers (Webkit / Firefox / IE/Edge).
   Touch devices get native momentum scroll. Desktop users get a
   grab-and-drag handler wired up in style-guide.js (setupDragScroll). */
.nav-cluster {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  flex-shrink: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / legacy Edge */
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
  cursor: grab;
  user-select: none;           /* prevent text-selection during drag */
}
.nav-cluster::-webkit-scrollbar { display: none; }  /* Chrome / Safari */
.nav-cluster.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;       /* disable smooth-scroll while dragging */
}

.nav-group {
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  row-gap:6px;
}
.nav-pages { flex-shrink:0; }
.nav-ctxs  { flex-shrink:0; }
/* Override site nav-compressing rules inside .guide-header by using
   role="navigation" divs (same reason the tracker nav uses div+role).

   Color rules below use the TLC color SYSTEM tokens (color, shades, flex,
   reversed) instead of opacity-on-white, so each state stays brand-aware
   and legible against the dark color1xd / color2d header backgrounds. */
.nav-btn {
  /* mirror btn btn-color1 btn-xxs sizing exactly */
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 12px;border-radius:4px;border:none;cursor:pointer;
  font-size:11px;
  /* font-weight intentionally NOT set — inherits from parent */
  letter-spacing:.1em;text-transform:uppercase;
  font-family:inherit;transition:background .2s,color .2s,border-color .2s,opacity .2s;
  white-space:nowrap;text-decoration:none !important;
  /* default: ghost/transparent until active class is added */
  background:transparent;
  /* `color: inherit` is required — without it, <button> elements default to
     UA `buttontext` (black), which would break the .onDrk parent's white
     cascade and render text invisible on the dark header bg. */
  color:inherit;
  opacity:.85;
}
.nav-btn:hover,
.nav-btn:focus { text-decoration:none !important; opacity:1; }

/* Row 1 — page nav (bg: --color1xd, extra-dark color1) */
.guide-header-row--top .nav-btn:hover {
  background:rgba(255,255,255,.1);
  /* color inherits white from onDrk */
}
.guide-header-row--top .nav-btn.pg-active {
  /* Active pill: lightest color1 shade bg + WHITE text — high contrast on
     the bright cyan fill, matches signed-in chrome elsewhere on the site. */
  background:var(--color1xl);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  opacity:1;
}

/* Row 2 — context nav (bg: --color2d, dark color2) */
.guide-header-row--bottom .nav-btn:hover {
  background:rgba(255,255,255,.12);
  /* color inherits white from onDrk */
}
.guide-header-row--bottom .nav-btn.active {
  /* Active pill: lightest color2 shade bg + WHITE text. */
  background:var(--color2xl);
  color:#fff;
  border:1px solid transparent;
  opacity:1;
}
@media (max-width:600px){
  .guide-header-row-inner { padding:8px 14px; }
  .nav-btn { padding:3px 9px;font-size:10px;letter-spacing:.07em; }
}

/* ── MAIN CONTENT CANVAS ── standard Bootstrap container; no viewport escape */

/* ── CTX BANNER (removed 2026-05-05 per Craig — context state is reflected in
       the On Light/Dark/Mix nav, no banner needed) ── */

/* ── PAGES ────────────────────────────────────────────────────────── */
.page { display:none; }
.page.active { display:block; }

/* ── COLORS PAGE ─────────────────────────────────────────────────── */
.colors-page { padding:0 0 80px; }

.color-group {
  padding:28px 0;
  border-bottom:1px solid var(--bdr);
  transition:border-color .3s;
}
.color-group:last-child { border-bottom:none; }

/* Group header */
.cg-header {
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:18px;
}
.cg-num  { font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-m); }
.cg-name { font-size:22px;font-weight:700;color:var(--txt);margin-left:2px; }
.cg-base { font-size:13px;font-family:inherit;color:var(--txt-m);margin-left:auto; }
.cg-placeholder { font-size:11px;font-style:italic;color:var(--txt-mm); }

/* ctx var label */
.cg-ctx-var {
  font-size:12px;font-weight:700;font-family:inherit;letter-spacing:.06em;
  margin-bottom:16px;color:var(--txt-m);
}

/* ── COLOR GROUP BODY — two-column layout ────────────────────────── */
.cg-body {
  display:flex;
  gap:32px;
  align-items:flex-start;
}
.cg-left  { flex:1;min-width:0; }
.cg-right { flex:1;min-width:0; }
@media(max-width:760px) { .cg-body { flex-direction:column; } }

/* ── HERO CALLOUT (base color, full left-column width) ─────────────── */
.cg-hero {
  width:100%;height:90px;border-radius:6px;
  display:flex;align-items:center;gap:18px;
  padding:0 24px;
  transition:background .3s;
}
.cg-hero-hex  { font-size:26px;font-weight:700;font-family:inherit;letter-spacing:.02em; }
.cg-hero-meta { display:flex;flex-direction:column;gap:3px; }
.cg-hero-rgb  { font-size:12px;font-family:inherit;opacity:.75; }
.cg-hero-name { font-size:12px;font-weight:600;opacity:.55;letter-spacing:.06em;text-transform:uppercase; }

/* ── LIGHT / DARK SHADE ROWS — flank the hero ───────────────────────── */
.cg-light-row {
  display: flex;
  gap: 6px;
  margin-bottom: 9px;
  align-items: flex-end;
}
.cg-dark-row {
  display:flex;gap:6px;margin-top:8px;
  align-items:flex-start;
}

/* ── INDIVIDUAL CHIP — swatch block ABOVE, text BELOW ───────────────── */
.chip-wrap {
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  align-items:stretch;
}
.chip-meta {
  display:flex;flex-direction:column;align-items:center;
  gap:3px;overflow:hidden;
  /* padding direction set inline per row type */
}
.chip {
  width:100%;height:90px;border-radius:4px;
  transition:background .3s;flex-shrink:0;
}

/* ── CHIP TEXT — larger + darker for readability ─────────────────── */
/* .chip-lbl removed 2026-05-05 per Craig — label now lives in chip-raw position. */
.chip-hex {
  font-size: 100%;
  /* font-weight: 600; */
  font-family: inherit;
  text-align: center;
  /* color: var(--txt); */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s ease;
}
.chip-hex:hover { opacity: .75; }
.chip-hex.is-copied { opacity: 1; }
/* Hero hex (the big swatch overlay) — same click-to-copy affordance */
.cg-hero-hex {
  cursor: pointer;
  user-select: none;
  transition: opacity .15s ease;
}
.cg-hero-hex:hover { opacity: .85; }
.chip-var {
  font-size: 90%;
  /* font-weight: 700; */
  font-family: inherit;
  text-align: center;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.chip-raw {
  font-size: 60%;
  font-family: inherit;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt-m);
  cursor: default;
}
/* 2026-05-06: chip-raw now hosts BOTH the css-var name and the shade label on
   one line. Var name keeps the darker --txt color (was chip-var); label keeps
   the lighter --txt-m color it had as a standalone chip-raw row. Same font-size
   for both so the line reads as a single label group. */
.chip-raw-var { color: var(--txt); }
.chip-raw-lbl { color: var(--txt-m); }
.chip-bug  {
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#ff4d4d;background:rgba(255,77,77,.12);
  border:1px solid rgba(255,77,77,.4);border-radius:3px;padding:1px 5px;
}

/* ── OPACITY STRIP — fills right column ─────────────────────────── */
.op-heading {
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-m);margin-bottom:10px;
}
.op-rows-wrap { display:flex;flex-direction:column;gap:6px; }
.op-break { height:8px; } /* visual separator between ctx row and base/flex rows */
.op-row-group { display:flex;align-items:stretch;gap:6px; }
.op-row-lbl {
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--txt-mm);width:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;padding-right:4px;
}
.op-row  { display:flex;gap:4px;flex-wrap:nowrap;flex:1; }
.op-wrap { display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0; }
.op-chip { width:100%;height:64px;border-radius:4px;transition:background .3s; }
.op-pct  { font-size:10px;text-align:center;color:var(--txt-m); }

/* ── ATTENTION SWATCH — below opacity in right column ────────────── */
.attn-swatch {
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.attn-chip {
  width:52px;height:52px;border-radius:6px;
}
.attn-label {
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-mm);
}

/* ── COLOR CONTEXT SWATCHES — row of 5 mini chips below attention ──── */
.ctx-swatches {
  margin-top:12px;margin-left:32px;
  display:flex;gap:4px;flex-wrap:wrap;
}
.ctx-swatch {
  width:52px;height:52px;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.ctx-swatch-lbl {
  font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;
}

/* ═══════════════════════════════════════════════════════════════════
   STYLE GUIDE
   ═══════════════════════════════════════════════════════════════════ */
.sg-page { padding:48px 0 80px; }
.sg-wrapper { max-width:none;width:100%;margin:0 auto; }

/* ───────────────────────────────────────────────────────────────────
   QUICK-LINKS SIDEBAR + 3-COL CONTENT BREAK-OUT
   ─────────────────────────────────────────────────────────────────
   Layout architecture:
   • The title section (.sg-section-full) stays in normal flow inside
     the site's framework container (typically 1400px wide on TLC sites).
     This keeps the page header aligned with the nav above it.
   • Below the title, the 3-col content area lives in `.sg-content-3col`,
     which BREAKS OUT of the site container and spans up to 1800px wide
     (or the viewport, whichever is smaller).
   • The break-out uses the classic 100vw + translateX trick — works
     regardless of how narrow the parent container is.
   • Inside the break-out, a 2-col grid: 220px sticky quicklinks aside,
     1fr main content. On mobile (≤991px) it stacks and the aside
     becomes a floating drawer.
   • Injected by style-guide.js on any .page that has 2+ labeled sections.
   ─────────────────────────────────────────────────────────────────── */

/* The break-out container — escapes the parent's width constraint (v1.004) */
.sg-content-3col {
  /* Step 1: span the full viewport width */
  width: 100vw;
  /* Step 2: shift left so the element starts at viewport-left */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Step 3: cap inner content via max-width on inner (handled by padding) */
  max-width: 1800px;

  /* Internal padding so content doesn't touch viewport edge on wide screens */
  padding: 0 1.5rem;
  margin-top: 1.5rem;

  /* The 2-col grid layout */
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 2.5rem;
  align-items: start;
}

/* All section children (now inside .sg-content-3col, not .sg-wrapper) sit in col 2 */
.sg-content-3col > .sg-section { grid-column: 2; }
/* Colors page: #colorGroups (.colors-page) also sits in col 2 alongside the aside. */
.sg-content-3col > .colors-page { grid-column: 2; }

/* Quicklinks aside — sticky in col 1 on lg+. Requires the host master
   page NOT to have overflow:hidden on any ancestor of .tl-sg-root, since
   that becomes the sticky scroll container and prevents pinning. NO
   max-height / overflow-y so the nav doesn't get its own scrollbar. */
.sg-content-3col > .sg-quicklinks {
  grid-column: 1;
  grid-row: 1 / span 999;
  position: sticky;
  top: calc(var(--site-nav-h, 0px) + 80px);
  align-self: start;
  z-index: 5;
}

.sg-quicklinks-inner { padding: .25rem 0 1rem; }
.sg-quicklinks-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-m, #6b7280);
  margin: 0 .5rem .65rem;
  opacity: .75;
}
.sg-quicklinks-list { list-style: none; padding: 0; margin: 0; }
.sg-quicklinks-list li { margin: 0; padding: 0; }
.sg-quicklinks-list a {
  /* 2-col layout: number | 4px | name. Number column is fixed-width so
     numbers right-align and ALL names start at the same X across every
     row — no wrap on the number, name wraps within its own column if
     ever needed (current names all fit on one line). */
  display: flex;
  align-items: baseline;
  column-gap: 4px;
  padding: 3px 12px;
  font-size: 70%;
  line-height: 1.3;
  /* color: var(--txt); */
  text-decoration: none;
  /* border-radius: 3px; */
  border-left: 2px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sg-quicklinks-list a > .sg-ql-num {
  flex: 0 0 auto;
  width: 3ch;            /* 3 chars — "1" through "99" AND letter suffixes ("11a",
                            "7c"), which are how a section joins a specific
                            neighbour without renumbering everything after it.
                            At 2ch "11a" ran into the name: "11aTable with…". */
  text-align: right;
  white-space: nowrap;
}
.sg-quicklinks-list a > .sg-ql-name {
  flex: 1 1 auto;
  min-width: 0;
}
.sg-quicklinks-list a:hover {
  background: rgba(0,0,0,.04);
  border-left-color: var(--color2, #c9b481);
  color: var(--color1, #002554);
}
.sg-quicklinks-list a.is-active {
  background: rgba(0,0,0,.06);
  border-left-color: var(--color1, #002554);
  color: var(--color1xl, #002554);
  /* font-weight: 600; */
}

/* On-dark/on-mix context — softer hover backgrounds */
[id^="page-"].onDrk .sg-quicklinks-list a:hover,
[id^="page-"].onMix .sg-quicklinks-list a:hover { background: rgba(255,255,255,.06); }
[id^="page-"].onDrk .sg-quicklinks-list a.is-active,
[id^="page-"].onMix .sg-quicklinks-list a.is-active { background: rgba(255,255,255,.10); }

/* Anchor scroll-margin so jumps clear the sticky page-nav + on-light bar */
.sg-section { scroll-margin-top: calc(var(--site-nav-h, 0px) + 100px); }

/* Mobile drawer pieces — hidden on desktop */
.sg-quicklinks-close,
.sg-quicklinks-toggle { display: none; }

/* Desktop collapse/expand toggle — currently hidden on lg+ per Craig:
   the sidenav stays expanded by default. Mobile (<992px) uses the
   floating drawer toggle instead, so this button is not displayed
   anywhere right now. Markup stays so we can re-enable easily. */
.sg-quicklinks-collapse { display: none; }
.sg-quicklinks-inner { position: relative; }

/* ── Mobile (≤991.98px): stack, then collapse to drawer button on scroll ── */
@media (max-width: 991.98px) {
  /* Cancel the desktop break-out on mobile — let the 3-col container live
     inside the parent so it doesn't push the page horizontally past viewport. */
  .sg-content-3col {
    display: block;
    width: 100%;
    max-width: none;
    position: static;
    left: 0;
    transform: none;
    padding: 0;
    margin-top: 0;
  }
  .sg-content-3col > .sg-quicklinks {
    position: static;
    grid-row: auto;
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,.04);
    border: 1px solid var(--bdr, rgba(0,0,0,.08));
    border-radius: 6px;
    max-height: none;
    overflow: visible;
  }
  .sg-content-3col > .sg-section { grid-column: auto; }

  /* Once user has scrolled past the inline list, hide it and show toggle button */
  body.sg-quicklinks-scrolled .sg-content-3col > .sg-quicklinks {
    display: none;
  }
  body.sg-quicklinks-scrolled .sg-quicklinks-toggle {
    display: flex;
    position: fixed;
    left: -2px;
    top: calc(var(--site-nav-h, 0px) + 90px);
    width: 30px;
    height: 50px;
    background: var(--white4, #002554);
    color: var(--color1);
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    z-index: 150;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
  .sg-quicklinks-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }

  /* Expanded overlay state — toggle is clicked, drawer covers content */
  body.sg-quicklinks-open .sg-content-3col > .sg-quicklinks {
    display: block;
    position: fixed;
    top: calc(var(--site-nav-h, 0px) + 70px);
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: var(--bg, #fff);
    box-shadow: 0 4px 28px rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.5rem;
    z-index: 200;
    overflow-y: auto;
    margin: 0;
  }
  body.sg-quicklinks-open .sg-quicklinks-close {
    display: flex;
    position: absolute;
    top: 9px;
    right: 10px;
    width: 46px;
    height: 46px;
    background: transparent;
    /* border: 1px solid var(--bdr, rgba(0, 0, 0, .15)); */
    border-radius: 50%;
    color: var(--AttentionColor);
    font-size: 34px;
    /* line-height: 1; */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 200;
  }
  /* Hide toggle button when drawer is open (close button takes over) */
  body.sg-quicklinks-open .sg-quicklinks-toggle { display: none; }
}
.sg-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  /* border-bottom: 1px solid var(--bdr); */
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 2rem;
  align-items: start;
  grid-auto-flow: row dense;
}
.sg-section:last-child { border-bottom:none; }
/* Full-width override — single column, no right notes column. */
.sg-section.sg-section-full {
  grid-template-columns: 1fr;
}
.sg-section.sg-section-full > * { grid-column: 1; }
/* Title-section centering — high specificity to beat per-site h1 overrides
   (e.g., TurnerLee's t_tlc-styles.css sets h1 { text-align: left }, which
   blocks the inline text-align:center on the parent from reaching the H1
   via inheritance). The doubled .sg-page-title.sg-page-title + html body
   prefix gives this rule specificity (0,3,2) which exceeds typical site
   stylesheet patterns. Without this, the same SST template renders centered
   on some sites and left-aligned on others.

   KEYED ON .sg-page-title, NOT .sg-section-full. See the "ONE CLASS, TWO
   MEANINGS" note further down this sheet: .sg-section-full is BOTH the page
   title block AND "this component needs the whole width". Centering every
   full-width component was the second half of that same bug — it reached
   Layouts §10 (harmless there, its cells center by flex) and would have
   centered the ops ribbon and the app bar the moment they went full width.
   2026-08-30. */
html body .sg-section.sg-page-title.sg-page-title,
html body .sg-section.sg-page-title.sg-page-title > h1,
html body .sg-section.sg-page-title.sg-page-title > h2,
html body .sg-section.sg-page-title.sg-page-title > h3,
html body .sg-section.sg-page-title.sg-page-title > p {
  text-align: center !important;
}
/* All section content lives in column 1 by default. */
.sg-section > * { grid-column: 1; min-width: 0; }
/* .sg-notes opts into col 2 spanning the section's available right column. */
.sg-section > .sg-notes {
  grid-column: 2;
  grid-row: 2 / span 99;
  align-self: start;
  font-size: .85rem;
  color: var(--txt);
  line-height: 1.5;
  padding: 1rem 1.25rem;
  background: rgba(0,0,0,0.04);
  border-left: 3px solid var(--color2);
  border-radius: 0 4px 4px 0;
  margin: 15px 0 0 0;
}
.sg-section > .sg-notes p { margin: 0 0 .6rem;color: var(--txt); }
.sg-section > .sg-notes p:last-child { margin-bottom: 0; }
.sg-section > .sg-notes code.sg-code { font-size: 12px; }
/* .sg-pair-main / .sg-pair-meta — alternating row pairs that share a row.
   Used in Section 2 (Headings) where each H1–H6 sample needs its own
   computed-style meta on the right.
   Each main+meta pair occupies the same grid row — the meta lands in
   the section's right column without an inner grid. */
.sg-section .sg-pair-main {
  grid-column: 1;
  margin-top: 1.25rem;
  padding-bottom: 1rem;
}
.sg-section .sg-pair-main h1,
.sg-section .sg-pair-main h2,
.sg-section .sg-pair-main h3,
.sg-section .sg-pair-main h4,
.sg-section .sg-pair-main h5,
.sg-section .sg-pair-main h6 { margin: .25rem 0 0 0; }
.sg-section .sg-pair-meta {
  grid-column: 2;
  align-self: start;
  /* PROSE IN THE PROSE FACE, 14px, readable ink. This column was 11px
     monospace at 40% black — the worst combination available for the one thing
     in the guide that has to be read and acted on. Code inside it still gets
     the mono face from .sg-code, which is where mono belongs. */
  font-size: 14px;
  color: var(--txt-s);
  line-height: 1.55;
  /* PROSE DOES NOT BREAK MID-WORD. This cell was `word-break:break-all`, which
     was right when it held nothing but class strings and computed readouts —
     and became the single worst thing on the page the moment the four-question
     rewrite put real sentences in it. Craig, 2026-08-25: "this page is jacked
     up". Measured on the live Buttons section: "bright semantic on /ops, /port
     al", "Bran d-numbered". The break-all stays where it belongs, on the code
     spans and on the .sg-meta readout below. */
  word-break: normal;
  overflow-wrap: anywhere;
  margin-top: 1.25rem;
  padding-bottom: 1rem;
}
/* Long class strings and file paths still have to be breakable — they are the
   one thing in this column with no spaces in them. */
.sg-section .sg-pair-meta code,
.sg-section .sg-pair-meta .sg-code { word-break: break-all; }
.sg-section .sg-pair-meta .tag-sm { display:block;margin-bottom:.35rem; }
.sg-section .sg-pair-meta .sg-meta {
  margin-top: .35rem;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
@media (max-width: 767.98px) {
  .sg-section { grid-template-columns: 1fr; }
  .sg-section > .sg-notes { grid-column: 1;grid-row: auto; }
}

/* Per-row pattern — content on left (~2/3), meta/notes on right (~1/3).
   Used for individual heading samples, font samples, individual demos
   that benefit from inline side-by-side meta. */
.sg-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: end;
  margin-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--bdr);
}
.sg-row:first-of-type { margin-top: 1rem; }
.sg-row:last-of-type { border-bottom: none; }
.sg-row-main { min-width: 0; }
.sg-row-main h1,
.sg-row-main h2,
.sg-row-main h3,
.sg-row-main h4,
.sg-row-main h5,
.sg-row-main h6 { margin: .25rem 0 0 0; }
.sg-row-main p { margin: .25rem 0 0 0; }
.sg-row-meta {
  font-family: 'SF Mono','Fira Code','Consolas',monospace;
  font-size: 11px;
  color: var(--txt-m);
  line-height: 1.5;
  word-break: break-all;
  align-self: end;
  padding-bottom: .5rem;
}
.sg-row-meta .tag-sm,
.sg-row-meta .sg-label--muted { display:block;margin-bottom:.35rem; }
.sg-row-meta .sg-meta {
  margin-top: .35rem;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* On narrow viewports collapse the section grid to a single column.
   .sg-pair-meta drops below its paired .sg-pair-main, .sg-notes drops
   below all content. Threshold raised to 991.98 (lg) — the right column
   gets unusably narrow below that. */
@media (max-width: 991.98px) {
  .sg-row { grid-template-columns: 1fr; }
  .sg-section {
    grid-template-columns: 1fr;
  }
  .sg-section > .sg-notes {
    grid-column: 1;
    grid-row: auto;
  }
  .sg-section > .sg-pair-main,
  .sg-section > .sg-pair-meta {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ── ICONS PAGE — grid of icon cells with name labels ────────────── */
.sg-icon-cell {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1rem .5rem;
  border:1px solid var(--bdr);
  border-radius:6px;
  background:var(--flexwhite03,rgba(0,0,0,.03));
  transition:background .15s ease;
}
.sg-icon-cell:hover { background:var(--flexwhite07,rgba(0,0,0,.07)); }
/* ICON GRID — scoped to the COMPONENT, not to a page. These rules were
   #page-icons-scoped; the Icons tab was removed 2026-08-23 (Craig: "Icons should
   be part of the Web CSS at bottom, remove ICONS tab entirely") and the set moved
   into Web CSS section 15, at which point every one of them stopped matching.
   The ID was only ever there for specificity, and each declaration already
   carries !important, so the class alone does the same job anywhere the
   component is used. Icon ink follows each host's --color1. */
.sg-icon-cell {
  color: var(--color1) !important;
}
.sg-icon-cell i,
.sg-icon-cell svg,
.sg-icon-cell .fa,
.sg-icon-cell .fas,
.sg-icon-cell .far,
.sg-icon-cell .fab,
.sg-icon-cell .svg-inline--fa {
  font-size: 1.5rem !important;
  color: var(--color1) !important;
  margin-bottom: .5rem !important;
}
.sg-icon-cell svg path,
.sg-icon-cell .svg-inline--fa path {
  fill: var(--color1) !important;
}
/* Optional per-cell dark/mix preview tiles — light ink (same intent as the page-level .onDrk / .onMix contexts). */
.sg-icon-cell.onDrk,
.sg-icon-cell.onDrk i,
.sg-icon-cell.onDrk svg,
.sg-icon-cell.onDrk .fa,
.sg-icon-cell.onDrk .fas,
.sg-icon-cell.onDrk .far,
.sg-icon-cell.onDrk .fab,
.sg-icon-cell.onDrk .svg-inline--fa,
.sg-icon-cell.onMix,
.sg-icon-cell.onMix i,
.sg-icon-cell.onMix svg,
.sg-icon-cell.onMix .fa,
.sg-icon-cell.onMix .fas,
.sg-icon-cell.onMix .far,
.sg-icon-cell.onMix .fab,
.sg-icon-cell.onMix .svg-inline--fa {
  color: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important;
}
.sg-icon-cell.onDrk svg path,
.sg-icon-cell.onDrk .svg-inline--fa path,
.sg-icon-cell.onMix svg path,
.sg-icon-cell.onMix .svg-inline--fa path {
  fill: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important;
}
/* Dark/mix page contexts — light ink so icons stay visible on dark page chrome */
.onDrk .sg-icon-cell,
.onDrk .sg-icon-cell i,
.onDrk .sg-icon-cell svg,
.onDrk .sg-icon-cell .svg-inline--fa { color: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important; }
.onDrk .sg-icon-cell svg path,
.onDrk .sg-icon-cell .svg-inline--fa path { fill: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important; }
.onMix .sg-icon-cell,
.onMix .sg-icon-cell i,
.onMix .sg-icon-cell svg,
.onMix .sg-icon-cell .svg-inline--fa { color: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important; }
.onMix .sg-icon-cell svg path,
.onMix .sg-icon-cell .svg-inline--fa path { fill: var(--flexwhite, rgba(255, 255, 255, 0.92)) !important; }
.sg-icon-cell span {
  font-family:'SF Mono','Fira Code','Consolas',monospace;
  font-size:.75rem;color:var(--txt-m);
  text-align:center;word-break:break-all;
}
/* On narrow screens collapse to single column */
@media (max-width: 767.98px) {
  .sg-section {
    grid-template-columns: 1fr;
  }
  .sg-section > .sg-notes {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}
.sg-label {
  /* Color is intentionally OMITTED so the onDrk class on each .sg-label lets
     the brand color system resolve text color contextually for the dark
     --color2 background. */
  display:block;font-family:monospace!important;font-size:13px!important;
  font-weight:600!important;background:var(--color2)!important;
  padding:3px 10px!important;border-radius:3px!important;margin-bottom:.6rem!important;
  letter-spacing:.5px;text-transform:uppercase;
  /* STATED, NOT INHERITED. Craig, 2026-08-30: "header should always be
     left-aligned on header." The label declared no text-align at all, so it
     took whatever an ancestor happened to say — which is how every full-width
     section's header came up centered under the old .sg-section-full centering
     rule. One declaration here and no ancestor can move it again. */
  text-align:left!important;
}
/* Stretch the bar across the section's 2-col grid (above .sg-notes), so it
   reaches the right edge of the container instead of capping at col 1. */
.sg-section > .sg-label { grid-column: 1 / -1; }
.sg-label--muted { background:#94a3b8!important; }
.sg-meta { font-family:'SF Mono','Fira Code','Consolas',monospace!important;font-size:13px!important;color:#475569!important;margin-top:.25rem;line-height:1.6!important; }
.sg-swatches{display:flex;flex-wrap:wrap;gap:1rem;}
.sg-swatch{width:120px;text-align:center;}
.sg-swatch-color{width:120px;height:80px;border-radius:8px;border:1px solid rgba(0,0,0,.1);margin-bottom:.4rem;}
.sg-swatch-label{font-family:monospace!important;font-size:13px!important;color:#475569!important;}
.sg-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
@media(max-width:640px){.sg-grid{grid-template-columns:1fr;}}
.sg-code{font-family:monospace!important;font-size:14px!important;background:#f1f5f9!important;padding:1px 6px!important;border-radius:3px!important;color:#334155!important;}
.sg-form-group{margin-bottom:2rem;padding:1.5rem;border-radius:8px;border:1px solid var(--bdr);}

/* ── SELF-CONTAINED TOGGLE SWITCH (renders without Bootstrap) ─── */
.form-switch { display:flex!important;align-items:center!important;gap:10px!important;padding-left:0!important;margin:6px 0!important; }
.form-switch .form-check-input {
  -webkit-appearance:none!important;appearance:none!important;
  width:2.75em!important;height:1.4em!important;flex-shrink:0!important;
  border-radius:2em!important;border:1px solid rgba(0,0,0,.2)!important;
  background-color:#cdd0d5!important;cursor:pointer!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:left 3px center!important;
  background-size:1.1em 1.1em!important;
  margin:0!important;padding:0!important;
  transition:background-color .2s,background-position .2s;
}
.form-switch .form-check-input:checked {
  background-color:var(--color1,#333)!important;border-color:var(--color1,#333)!important;
  background-position:right 3px center!important;
}
.form-switch .form-check-label { font-size:14px;cursor:pointer;user-select:none; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE PATTERN LIBRARY  (distilled from Mudcup production work)
   All colors use Elevated CSS vars. Breakpoints match Bootstrap 5.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Breakpoint reference ─────────────────────────────────────────────
   xs : <576px      (very small phones: <340 fine-tune band)
   sm : 576–767.98  (phones)
   md : 768–1199.98 (tablets / small laptops)
   lg : ≥1200       (desktop)
   + portrait/touch override for tablets held vertically
   ─────────────────────────────────────────────────────────────────── */
.bp-demo { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem; }
.bp-demo .bp-chip {
  display:inline-flex;align-items:center;gap:6px;
  padding:.4rem .75rem;border-radius:5px;
  border:1px solid var(--bdr);
  background:rgba(0,0,0,.04);
  font-family:monospace;font-size:12px;color:var(--txt);
}
.bp-demo .bp-chip::before {
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--color3,#888);
}
/* Active chip: bg = --color2 (a dark navy in this brand). Treat the chip's
   own context as onDrk — text and dot indicator force #fff so the label
   stays readable regardless of which mode the host page is in. The brand
   on-color tokens (--onLt_flexcolor2 etc.) are emitted as empty strings,
   which makes var() declarations invalid; #fff is the simple safe choice. */
.bp-demo .bp-chip.bp-active { background:var(--color2);color:#fff;border-color:var(--color2); }
.bp-demo .bp-chip.bp-active::before { background:#fff; }
/* Light up only the currently-active breakpoint (Bootstrap 5 values) */
@media (max-width:575.98px) { .bp-xs { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
@media (min-width:576px) and (max-width:767.98px)  { .bp-sm { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
@media (min-width:768px) and (max-width:991.98px)  { .bp-md { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
@media (min-width:992px) and (max-width:1199.98px) { .bp-lg { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
@media (min-width:1200px) and (max-width:1399.98px) { .bp-xl { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
@media (min-width:1400px) { .bp-xxl { background:var(--color2)!important;color:#fff!important;border-color:var(--color2)!important; } }
/* Active chip dot color: white dot reads against color2 too */
@media (max-width:575.98px)                         { .bp-xs::before  { background:#fff!important; } }
@media (min-width:576px) and (max-width:767.98px)  { .bp-sm::before  { background:#fff!important; } }
@media (min-width:768px) and (max-width:991.98px)  { .bp-md::before  { background:#fff!important; } }
@media (min-width:992px) and (max-width:1199.98px) { .bp-lg::before  { background:#fff!important; } }
@media (min-width:1200px) and (max-width:1399.98px){ .bp-xl::before  { background:#fff!important; } }
@media (min-width:1400px)                          { .bp-xxl::before { background:#fff!important; } }

/* ── RESPONSIVE CARD PATTERN ─────────────────────────────────────────
   Battle-tested from Mudcup leaderboards.
   XS : stacked grid (1fr)
   MD : 2-col grid (1fr auto) — name+pills | score+indicator
   LG : inline flex row — name → pills → indicator → score
   Uses display:contents on wrapper rows to unwrap children into grid.
   ─────────────────────────────────────────────────────────────────── */
.rc-card {
  background:rgba(0,0,0,.04);
  border:1px solid var(--bdr);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:12px;
}
.rc-main {
  display:flex;align-items:flex-start;
  padding:10px 12px;gap:10px;
}
.rc-rank {
  flex:0 0 auto;min-width:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:900;font-size:1.8rem;
  color:var(--color1);
}
.rc-content {
  flex:1;min-width:0;
  display:grid;grid-template-columns:1fr;gap:8px;
}
.rc-name {
  font-family:inherit;font-weight:700;font-size:1.3rem;letter-spacing:.05em;
  color:var(--txt);
  padding:.4rem .6rem;border-radius:4px;
  background:rgba(0,0,0,.05);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rc-score-gb {
  display:flex;gap:6px;
}
.rc-score, .rc-gb {
  padding:.3rem .5rem;border-radius:4px;
  background:rgba(0,0,0,.05);
  font-family:inherit;font-weight:800;font-size:1.4rem;
  color:var(--txt);text-align:center;min-width:48px;
}
.rc-gb { color:var(--txt-m); }
.rc-indicator {
  display:flex;gap:4px;align-items:center;
  padding:.3rem .5rem;border-radius:4px;
  background:rgba(0,0,0,.05);
  font-size:.72rem;color:var(--txt-m);
}
/* MD: 2-col grid */
@media (min-width:768px) and (max-width:1199.98px) {
  .rc-main { padding:10px 16px;gap:14px; }
  .rc-rank { min-width:42px;font-size:2.2rem; }
  .rc-content { grid-template-columns:1fr auto;column-gap:16px;row-gap:8px; }
  .rc-name-row { display:contents; }
  .rc-pills-row { display:contents; }
  .rc-name { grid-column:1;grid-row:1; }
  .rc-score-gb { grid-column:2;grid-row:1; }
  .rc-pills { grid-column:1;grid-row:2;width:100%; }
  .rc-indicator { grid-column:2;grid-row:2; }
}
/* LG: inline flex */
@media (min-width:1200px) {
  .rc-main { align-items:center;gap:16px; }
  .rc-rank { min-width:42px;font-size:2.4rem; }
  .rc-content { display:flex;flex-direction:row;gap:16px;align-items:center; }
  .rc-name-row, .rc-pills-row { display:contents; }
  .rc-name { order:1;flex:1 1 140px;min-width:140px;max-width:220px;font-size:1.75rem; }
  .rc-pills { order:2;flex:3 1 0;width:auto; }
  .rc-indicator { order:3;flex:0 0 auto;min-width:140px; }
  .rc-score-gb { order:4;flex:0 0 auto; }
  .rc-score, .rc-gb { font-size:2rem; }
}

/* ── ENTRY PILLS — flex row with breakpoint-specific wrap ────────────
   XS : flex-wrap wrap, 3 across (calc(33.33% - 4px))
   MD : flex-wrap nowrap, width:100%
   LG : flex-wrap nowrap, flex:1 1 0 (equal stretch)
   ─────────────────────────────────────────────────────────────────── */
.rc-pills {
  display:flex;flex-wrap:wrap;gap:6px;min-width:0;
}
.rc-pill {
  flex:0 0 calc(33.33% - 4px);min-width:0;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  overflow:hidden;
}
.rc-pill-label {
  font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  text-align:center;color:var(--txt-m);
  padding:.2rem .3rem;border-radius:3px;
  background:rgba(0,0,0,.04);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rc-pill-score {
  font-family:inherit;font-weight:800;font-size:1.4rem;
  text-align:center;color:var(--txt);
  padding:.25rem .3rem;border-radius:3px;
  background:rgba(0,0,0,.05);
}
@media (min-width:768px) {
  .rc-pills { flex-wrap:nowrap;gap:8px;width:100%; }
  .rc-pill { flex:1 1 0; }
  .rc-pill-label { font-size:.72rem; }
  .rc-pill-score { font-size:1.8rem; }
}
@media (min-width:1200px) {
  .rc-pills { justify-content:stretch; }
  .rc-pill { flex:1 1 0;min-width:60px; }
}

/* ── STANDINGS-ONLY COMPACT MODE ─────────────────────────────────────
   body.standings-only or wrapper.standings-only hides expanded detail
   and collapses cards to one-line rank|name|score|gb.
   Used when page needs the list but not the drill-down.
   ─────────────────────────────────────────────────────────────────── */
.standings-only .rc-pills,
.standings-only .rc-indicator,
.standings-only .rc-detail { display:none!important; }
.standings-only .rc-main { padding:6px 12px;gap:10px;align-items:center; }
.standings-only .rc-content { display:flex!important;flex-direction:row!important;gap:8px!important;grid-template-columns:initial!important; }
.standings-only .rc-name-row,
.standings-only .rc-pills-row { display:contents!important; }
.standings-only .rc-name { flex:1 1 0!important;width:auto!important; }
.standings-only .rc-score-gb { flex:0 0 auto!important; }

/* ── PORTRAIT + TOUCH OVERRIDE ───────────────────────────────────────
   Forces the xs stacked layout on tablets held vertically.
   Critical: without this, portrait iPads render as md (two-col) and
   cramped details suffer. hover:none + pointer:coarse = touch device.
   ─────────────────────────────────────────────────────────────────── */
@media (orientation:portrait) and (hover:none) and (pointer:coarse) {
  .rc-main { align-items:stretch!important; }
  .rc-content { display:grid!important;grid-template-columns:1fr!important;gap:8px!important; }
  .rc-name-row, .rc-pills-row { display:contents!important; }
  .rc-name { order:initial!important;flex:initial!important;width:auto!important;max-width:none!important;min-width:0!important; }
  .rc-pills { order:initial!important;flex:initial!important;width:100%!important;flex-wrap:wrap!important; }
  .rc-pill { flex:0 0 calc(33.33% - 4px)!important; }
  .rc-indicator { order:initial!important;flex:initial!important; }
  .rc-score-gb { order:initial!important;flex:initial!important; }
}

/* DataTable rules (.partner-table-wrapper, .sticky-col-left, etc.) live in
   t_tlc-styles.css under DATATABLE FRAMEWORK. Style-guide page only needs
   to scope the body font down for the demo since the page font is huge. */
.sg-page .partner-table-wrapper table.dataTable {
  font-size: 14px;
}

/* DataTables sort icon overrides moved to per-site Custom_css/t_tlc-custom.css
   (site-wide on EMP, fixes any DataTable on the site, not just style-guide). */

/* ── MODAL PATTERN ───────────────────────────────────────────────────
   Header / body / footer / backdrop using Elevated vars.
   Not Bootstrap-coupled — demo of positioning + structure only.
   ─────────────────────────────────────────────────────────────────── */
.sg-modal-backdrop {
  position:relative;background:rgba(0,0,0,.55);
  padding:2rem 1rem;border-radius:8px;
}
.sg-modal {
  max-width:480px;margin:0 auto;
  /* 20px — one radius for every modal, taken from the primaries (Modals 4/5).
     Craig, 2026-08-24: "rounded corners should match, and all be base on
     primary modals". This was the outlier at 8px. */
  background:#fff;border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
  /* positioning context for the shared .tlc-modal-close */
  position:relative;
}
.sg-modal-header {
  /* 62px right, not 1.25rem — the close button is absolute now and nothing
     else reserves its lane. 12 + 40 + 10. */
  padding:1rem 62px 1rem 1.25rem;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--color1);color:#fff;
}
/* Force readable text on the colored header bg — h3 default --H3Color from
   the host theme would otherwise win and resolve to a same-family blue. */
.sg-modal-header h3 { margin:0;font-size:1.1rem;font-weight:700;letter-spacing:.04em;color:#fff!important; }
/* .sg-modal-close is the shared .tlc-modal-close now —
   shared/modals/v1/modal-close.css. It sits on the --color1 header band, so
   that file sets the white ink on .sg-modal itself. Nothing to declare here. */

/* ── onDrk / onMix as element-level helpers ───────────────────────────
   When a chip/header/badge sits on a colored bg (var(--color1) etc.),
   adding class="onDrk" or "onMix" to the SAME element as a colored-bg
   utility makes its own text + nested headings/links/spans resolve to
   readable white. Scoped via `:not([id^="page-"])` so the page-level
   .onDrk rules (which set their own coloring) are NOT touched. */
.sg-page .onDrk:not([id^="page-"]),
.sg-page .onDrk:not([id^="page-"]) > h1,
.sg-page .onDrk:not([id^="page-"]) > h2,
.sg-page .onDrk:not([id^="page-"]) > h3,
.sg-page .onDrk:not([id^="page-"]) > h4,
.sg-page .onDrk:not([id^="page-"]) > h5,
.sg-page .onDrk:not([id^="page-"]) > h6,
.sg-page .onDrk:not([id^="page-"]) > p,
.sg-page .onDrk:not([id^="page-"]) > span,
.sg-page .onMix:not([id^="page-"]),
.sg-page .onMix:not([id^="page-"]) > h1,
.sg-page .onMix:not([id^="page-"]) > h2,
.sg-page .onMix:not([id^="page-"]) > h3,
.sg-page .onMix:not([id^="page-"]) > h4,
.sg-page .onMix:not([id^="page-"]) > h5,
.sg-page .onMix:not([id^="page-"]) > h6,
.sg-page .onMix:not([id^="page-"]) > p,
.sg-page .onMix:not([id^="page-"]) > span {
  color:#fff !important;
}
.sg-modal-body { padding:1.25rem;color:#333;font-size:.95rem;line-height:1.5; }
.sg-modal-footer {
  padding:.75rem 1.25rem;border-top:1px solid var(--bdr);
  display:flex;gap:.5rem;justify-content:flex-end;
  background:#f8f8f8;
}

/* ── DATEPICKER — match real Elevated form-page rendering ────────────
   Form inputs on Elevated are sized 1.25rem font / 4.5rem height /
   4.5rem line-height. Match that here, hide the native browser
   calendar-picker icon (which would otherwise duplicate ours), and
   force the icon panel into the right edge.
   ─────────────────────────────────────────────────────────────────── */
.sg-page .sg-dp-demo .datepicker-input,
.sg-page .datepicker-input { position:relative!important;display:block!important; }
.sg-page .sg-dp-demo .datepicker-input .form-control,
.sg-page .datepicker-input .form-control {
  font-size:1.25rem!important;
  height:4.5rem!important;
  line-height:4.5rem!important;
  padding:0 .75rem!important;
  padding-right:55px!important;  /* clear the 45px icon panel */
  color:#212529!important;
  background:#fff!important;
  border:1px solid rgba(0,0,0,.25)!important;
  border-radius:.25rem!important;
  width:100%!important;
}
/* Hide the browser's native calendar-picker icon — we provide our own */
.sg-page .sg-dp-demo .datepicker-input input[type="date"]::-webkit-calendar-picker-indicator,
.sg-page .sg-dp-demo .datepicker-input input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.sg-page .datepicker-input input[type="date"]::-webkit-calendar-picker-indicator,
.sg-page .datepicker-input input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity:0;
  position:absolute;right:0;width:55px;height:100%;
  cursor:pointer;
}
.sg-page .sg-dp-demo .datepicker-input input[type="date"]::-webkit-inner-spin-button,
.sg-page .sg-dp-demo .datepicker-input input[type="date"]::-webkit-clear-button,
.sg-page .datepicker-input input[type="date"]::-webkit-inner-spin-button,
.sg-page .datepicker-input input[type="date"]::-webkit-clear-button { display:none; }

.sg-page .sg-dp-demo .datepicker-input__icon,
.sg-page .datepicker-input__icon {
  position:absolute!important;
  top:0!important;
  right:0!important;
  height:100%!important;
  width:45px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background-color:var(--color1)!important;
  background-image:none!important;
  color:var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92)))!important;
  font-size:1.25rem!important;
  line-height:1.5!important;
  border-radius:0 .25rem .25rem 0!important;
  pointer-events:none!important;
  z-index:1!important;
}
.sg-page .sg-dp-demo .datepicker-input__icon svg,
.sg-page .datepicker-input__icon svg {
  width:1.1em!important;height:1.1em!important;color:var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92)))!important;
}
.sg-page .sg-dp-demo .datepicker-input__icon i,
.sg-page .datepicker-input__icon i {
  color:var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92)))!important;
}
.sg-page .sg-dp-demo .datepicker-input__icon svg path,
.sg-page .datepicker-input__icon svg path { fill:var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92)))!important; }
.sg-page .sg-dp-demo label.color1 {
  color:var(--color1)!important;font-weight:700;font-size:1.05rem!important;
  display:flex!important;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.5rem!important;
}
.sg-page .sg-dp-demo .btn-clear {
  background:#fff!important;border:1px solid var(--color1)!important;
  color:var(--color1)!important;font-size:.65rem!important;padding:.15rem .5rem!important;
  border-radius:3px!important;letter-spacing:.06em!important;line-height:1.2!important;
  text-transform:uppercase;
}
.sg-page .sg-code-block {
  background:#1e293b!important;color:#e2e8f0!important;
  font-family:'SF Mono','Fira Code','Consolas',monospace!important;
  font-size:11px!important;line-height:1.5!important;
  padding:.75rem 1rem!important;border-radius:6px!important;
  overflow-x:auto!important;margin:.5rem 0 0 0!important;
  white-space:pre!important;
}
.sg-page .sg-code-block code {
  background:transparent!important;color:inherit!important;
  font-family:inherit!important;font-size:inherit!important;padding:0!important;
}

/* ── COLOR PICKER — fill the swatch edge-to-edge (kill default padding) ── */
.sg-page input[type="color"].form-control-color {
  padding: 0 !important;
  height: 56px !important;
  width: 80px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid var(--bdr) !important;
}
.sg-page input[type="color"].form-control-color::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.sg-page input[type="color"].form-control-color::-webkit-color-swatch {
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.sg-page input[type="color"].form-control-color::-moz-color-swatch {
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Section labels — use --color1 (which reverses per context). When that
   resolves to white (reversed-mode brand only), the original intent was
   gray-on-white. But on most brands --color1 is a saturated hex, so the
   pill renders as a saturated color and the gray text became unreadable
   (Craig flagged 2026-05-07 on TurnerLee Portal — pill = #00A0FF, text = #666).
   2026-05-07: text now defaults to white (works on saturated colors AND
   on reversed-white pills since the page bg shows through the white pill,
   making the white text visible against the dark page bg via the bleed). */
[id^="page-"].onDrk .sg-label,
#page-guide.onDrk .sg-label {
  background: var(--color1, #fff) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
[id^="page-"].onMix .sg-label,
#page-guide.onMix .sg-label {
  background: var(--color1, #fff) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* tag-sm subsection labels — readable on any bg */
[id^="page-"].onDrk .tag-sm,
[id^="page-"].onMix .tag-sm,
#page-guide.onDrk .tag-sm,
#page-guide.onMix .tag-sm {
  color: var(--color2) !important;
}

/* Breakpoint chips — visible default + active states on dark/mix */
[id^="page-"].onDrk .bp-demo .bp-chip,
[id^="page-"].onMix .bp-demo .bp-chip,
#page-guide.onDrk .bp-demo .bp-chip,
#page-guide.onMix .bp-demo .bp-chip {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
@media (max-width:575.98px){
  [id^="page-"].onDrk .bp-demo .bp-chip.bp-xs,
  [id^="page-"].onMix .bp-demo .bp-chip.bp-xs,
  #page-guide.onDrk .bp-demo .bp-chip.bp-xs,
  #page-guide.onMix .bp-demo .bp-chip.bp-xs {
    background: var(--color2) !important;
    color: var(--color1) !important;
    border-color: var(--color2) !important;
  }
}

/* Bootstrap buttons on dark/mix — text needs to be readable */
[id^="page-"].onDrk .btn.btn-light,
[id^="page-"].onMix .btn.btn-light,
#page-guide.onDrk .btn.btn-light,
#page-guide.onMix .btn.btn-light {
  background-color: rgba(255,255,255,0.92) !important;
  color: #1a1a1a !important;
}
/* btn-secondary on dark/mix — bg is --color2 (reverses to white), text
   falls back to page bg color so it's not white-on-white. */
[id^="page-"].onDrk .btn.btn-secondary,
#page-guide.onDrk .btn.btn-secondary {
  color: #1a1a1a !important;
}
[id^="page-"].onMix .btn.btn-secondary,
#page-guide.onMix .btn.btn-secondary {
  color: #666666 !important;
}

/* ── REVERSE-OUT FALLBACK on dark/mix for everything else that uses
   brand colors as bg + brand colors as text. When --color1/--color2 reverse
   to white, text falls back to the page bg color. */

/* Badges — pin to exact button background colors. Also strip the default
   MDB/Bootstrap box-shadow on .badge — TLC badges sit flush, not floating. */
.badge { -webkit-box-shadow: none !important; box-shadow: none !important; }
.badge.bg-primary   { background-color: var(--color1) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--color2) !important; color: #fff !important; }
.badge.bg-success   { background-color: var(--bs-success, #00b52b) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--bs-danger, #e60000) !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--bs-warning, #ffd700) !important; color: #fff !important; }
.badge.bg-info      { background-color: #38c0f2 !important; color: #fff !important; }
[id^="page-"].onDrk .badge.bg-primary,
[id^="page-"].onDrk .badge.bg-secondary,
#page-guide.onDrk .badge.bg-primary,
#page-guide.onDrk .badge.bg-secondary {
  color: #1a1a1a !important;
}
[id^="page-"].onMix .badge.bg-primary,
[id^="page-"].onMix .badge.bg-secondary,
#page-guide.onMix .badge.bg-primary,
#page-guide.onMix .badge.bg-secondary {
  color: #666666 !important;
}

/* Alerts */
[id^="page-"].onDrk .alert.alert-primary,
[id^="page-"].onDrk .alert.alert-secondary,
#page-guide.onDrk .alert.alert-primary,
#page-guide.onDrk .alert.alert-secondary {
  color: #1a1a1a !important;
}
[id^="page-"].onMix .alert.alert-primary,
[id^="page-"].onMix .alert.alert-secondary,
#page-guide.onMix .alert.alert-primary,
#page-guide.onMix .alert.alert-secondary {
  color: #666666 !important;
}

/* Modal header — uses --color1 bg, when reversed needs dark text */
[id^="page-"].onDrk .sg-modal-header,
#page-guide.onDrk .sg-modal-header {
  background: var(--color1, #fff) !important;
  color: #1a1a1a !important;
}
[id^="page-"].onMix .sg-modal-header,
#page-guide.onMix .sg-modal-header {
  background: var(--color1, #fff) !important;
  color: #666666 !important;
}
/* THE MODAL HEADER BAND DOES NOT FOLLOW THE PAGE BG TOGGLE, so neither should
   its ink. This block used to force the h3 and the close button to #1a1a1a on
   ON DARK and #666 on ON MIX — inherited from the guide's generic "the page went
   dark, invert the text" sweep. But .sg-modal-header is always background:
   var(--color1); it is blue on all three settings. The result was near-black
   text and a near-black close glyph on a blue band whenever the toggle left ON
   LIGHT. Removed 2026-08-24 with the close-button unification; the h3 keeps its
   own `color:#fff!important` above, and the close ink comes from
   --tlc-modal-close-ink set on .sg-modal in shared/modals/v1/modal-close.css.
   Do not reinstate: an element on its own painted band is not on the page bg. */

/* Datepicker .btn-clear — uses dark blue bg + white text on light, both
   reverse on dark/mix → fallback to page bg for text. */
[id^="page-"].onDrk .btn.btn-clear,
[id^="page-"].onDrk .btn-clear,
#page-guide.onDrk .btn.btn-clear,
#page-guide.onDrk .btn-clear {
  color: #1a1a1a !important;
}
[id^="page-"].onMix .btn.btn-clear,
[id^="page-"].onMix .btn-clear,
#page-guide.onMix .btn.btn-clear,
#page-guide.onMix .btn-clear {
  color: #666666 !important;
}

/* Bootstrap toggle switch label text on dark/mix — must be readable */
#page-guide.onDrk .form-check.form-switch label.form-check-label,
#page-guide.onMix .form-check.form-switch label.form-check-label,
[id^="page-"].onDrk .form-check.form-switch label.form-check-label,
[id^="page-"].onMix .form-check.form-switch label.form-check-label {
  color: rgba(255,255,255,0.92) !important;
}

/* Toggle button labels (.btn-check + .btn) — when checked, white bg from
   --color2; when unchecked, white-ish text. Force readable text always. */
#page-guide.onDrk .btn-check + .btn,
#page-guide.onMix .btn-check + .btn,
[id^="page-"].onDrk .btn-check + .btn,
[id^="page-"].onMix .btn-check + .btn {
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
/* Toggle button checked state — uses --color1 (reverses to white in
   dark/mix). Text falls back to page bg color so it's not white-on-white. */
#page-guide.onDrk .btn-check:checked + .btn,
[id^="page-"].onDrk .btn-check:checked + .btn {
  background-color: var(--color1, #fff) !important;
  color: #1a1a1a !important;
  border-color: var(--color1, #fff) !important;
}
#page-guide.onMix .btn-check:checked + .btn,
[id^="page-"].onMix .btn-check:checked + .btn {
  background-color: var(--color1, #fff) !important;
  color: #666666 !important;
  border-color: var(--color1, #fff) !important;
}

/* Group Button Toggles (.btn-toggle-group) on dark/mix — 2026-07-29.
   The component's three states are now all solid brand fills with white
   text (off = primary cut with black, on = primary, hover = primary hover),
   so they stay legible on a dark or mix page bg with no re-coloring — the
   old translucent-white resting fill and light borders are gone. All these
   rules do is re-assert the on-light values, because the generic
   .btn-check + .btn dark/mix rules above would otherwise repaint the
   labels' color and border. Extra .btn-toggle-group class wins on
   specificity. */
#page-guide.onDrk .btn-toggle-group .btn-check + .btn,
#page-guide.onMix .btn-toggle-group .btn-check + .btn,
[id^="page-"].onDrk .btn-toggle-group .btn-check + .btn,
[id^="page-"].onMix .btn-toggle-group .btn-check + .btn {
  background-color: var(--tg-off, color-mix(in srgb, var(--PrimaryButtonColor, var(--color1, #0079c1)), black 38%)) !important;
  border: 0 !important;
  color: var(--tg-text, var(--PrimaryButtonTextColor, #fff)) !important;
}
#page-guide.onDrk .btn-toggle-group .btn-check:checked + .btn,
#page-guide.onDrk .btn-toggle-group .btn-check:active + .btn,
#page-guide.onMix .btn-toggle-group .btn-check:checked + .btn,
#page-guide.onMix .btn-toggle-group .btn-check:active + .btn,
[id^="page-"].onDrk .btn-toggle-group .btn-check:checked + .btn,
[id^="page-"].onDrk .btn-toggle-group .btn-check:active + .btn,
[id^="page-"].onMix .btn-toggle-group .btn-check:checked + .btn,
[id^="page-"].onMix .btn-toggle-group .btn-check:active + .btn {
  background-color: var(--tg-on, var(--PrimaryButtonColor, var(--color1, #0079c1))) !important;
  color: var(--tg-text, var(--PrimaryButtonTextColor, #fff)) !important;
}
#page-guide.onDrk .btn-toggle-group .btn-check:not(:checked) + .btn:hover,
#page-guide.onMix .btn-toggle-group .btn-check:not(:checked) + .btn:hover,
[id^="page-"].onDrk .btn-toggle-group .btn-check:not(:checked) + .btn:hover,
[id^="page-"].onMix .btn-toggle-group .btn-check:not(:checked) + .btn:hover {
  background-color: var(--tg-hover, var(--PrimaryButtonHoverColor, var(--color1xl, #0094ec))) !important;
  color: var(--tg-text, var(--PrimaryButtonTextColor, #fff)) !important;
}

/* CSS-vars / stylesheets monospace blocks — readable text on dark/mix */
[id^="page-"].onDrk #sg-css-vars,
[id^="page-"].onDrk #sg-stylesheets,
[id^="page-"].onMix #sg-css-vars,
[id^="page-"].onMix #sg-stylesheets,
#page-guide.onDrk #sg-css-vars,
#page-guide.onDrk #sg-stylesheets,
#page-guide.onMix #sg-css-vars,
#page-guide.onMix #sg-stylesheets {
  background: rgba(0,0,0,0.25) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ── DARK / MIX CONTEXT OVERRIDES for style-guide demos ─────────────
   Every hardcoded light surface in this file needs a dark counterpart
   so On Dark and On Mix tabs render readable. Inputs, modal, file
   button, code blocks, datepicker, big toggle, etc.
   ─────────────────────────────────────────────────────────────────── */
/* All inputs on dark/mix get a subtle warm-tan tint (color2 at low alpha)
   so they sit visibly on the dark page background without going pure black. */
#page-guide.onDrk input.form-control,
#page-guide.onDrk textarea.form-control,
#page-guide.onDrk select.form-select,
#page-guide.onMix input.form-control,
#page-guide.onMix textarea.form-control,
#page-guide.onMix select.form-select,
[id^="page-"].onDrk input.form-control,
[id^="page-"].onDrk textarea.form-control,
[id^="page-"].onDrk select.form-select,
[id^="page-"].onMix input.form-control,
[id^="page-"].onMix textarea.form-control,
[id^="page-"].onMix select.form-select {
  background-color: var(--flexwhite07, rgba(255,255,255,0.07)) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
/* onMix input default bg override (Craig request: var(--flexwhite4)) */
#page-guide.onMix input.form-control,
#page-guide.onMix textarea.form-control,
#page-guide.onMix select.form-select,
[id^="page-"].onMix input.form-control,
[id^="page-"].onMix textarea.form-control,
[id^="page-"].onMix select.form-select {
  background-color: var(--flexwhite4, rgba(255,255,255,0.40)) !important;
}
[id^="page-"].onDrk .form-floating > label,
[id^="page-"].onMix .form-floating > label {
  color: rgba(255,255,255,0.65) !important;
}
[id^="page-"].onDrk .sg-modal,
[id^="page-"].onMix .sg-modal {
  background: #1e1e1e !important;
}
[id^="page-"].onDrk .sg-modal-body,
[id^="page-"].onMix .sg-modal-body { color: rgba(255,255,255,0.85) !important; }
[id^="page-"].onDrk .sg-modal-footer,
[id^="page-"].onMix .sg-modal-footer { background: #2a2a2a !important; }
[id^="page-"].onDrk .sg-code,
[id^="page-"].onMix .sg-code {
  background: #2a2a2a !important;
  color: #e2e8f0 !important;
}
/* Code blocks already dark — leave as-is on dark contexts (good contrast) */
[id^="page-"].onDrk input.sg-file-input::file-selector-button,
[id^="page-"].onDrk input.sg-file-input::-webkit-file-upload-button,
[id^="page-"].onMix input.sg-file-input::file-selector-button,
[id^="page-"].onMix input.sg-file-input::-webkit-file-upload-button {
  background: #3a3a3a;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.2);
}
[id^="page-"].onDrk .sg-form-group,
[id^="page-"].onMix .sg-form-group {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
[id^="page-"].onDrk .rc-card,
[id^="page-"].onMix .rc-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
[id^="page-"].onDrk .rc-name,
[id^="page-"].onDrk .rc-score,
[id^="page-"].onDrk .rc-gb,
[id^="page-"].onDrk .rc-pill-score,
[id^="page-"].onMix .rc-name,
[id^="page-"].onMix .rc-score,
[id^="page-"].onMix .rc-gb,
[id^="page-"].onMix .rc-pill-score {
  background: rgba(255,255,255,0.07);
}
[id^="page-"].onDrk .bp-demo .bp-chip,
[id^="page-"].onMix .bp-demo .bp-chip {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
[id^="page-"].onDrk pre,
[id^="page-"].onDrk code,
[id^="page-"].onMix pre,
[id^="page-"].onMix code {
  background: #2a2a2a;
  color: #e2e8f0;
}
/* Big toggle switch off-state needs lighter track on dark bg */
[id^="page-"].onDrk .sg-bigswitch-demo .switch .slider,
[id^="page-"].onMix .sg-bigswitch-demo .switch .slider { background: #555; }
/* Color swatches table cells — section 22 css-var/stylesheets list */
[id^="page-"].onDrk #sg-css-vars,
[id^="page-"].onDrk #sg-stylesheets,
[id^="page-"].onMix #sg-css-vars,
[id^="page-"].onMix #sg-stylesheets {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
/* Datepicker on dark/mix — input matches the select above it (dark face),
   calendar icon keeps default style (bg color1 + icon reverse/on-color).
   Specificity bumped with #page-guide ID. */
#page-guide.onDrk .sg-dp-demo .datepicker-input .form-control,
#page-guide.onMix .sg-dp-demo .datepicker-input .form-control,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input .form-control,
[id^="page-"].onMix .sg-dp-demo .datepicker-input .form-control {
  background-color: var(--flexwhite07, rgba(255,255,255,0.07)) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
#page-guide.onMix .sg-dp-demo .datepicker-input .form-control,
[id^="page-"].onMix .sg-dp-demo .datepicker-input .form-control {
  background-color: var(--flexwhite4, rgba(255,255,255,0.40)) !important;
}
#page-guide.onDrk .sg-dp-demo .datepicker-input__icon,
#page-guide.onMix .sg-dp-demo .datepicker-input__icon,
[id^="page-"].onDrk .datepicker-input__icon,
[id^="page-"].onMix .datepicker-input__icon,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon,
#page-guide.onDrk .datepicker-input__icon,
#page-guide.onMix .datepicker-input__icon,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon {
  background-color: var(--color1) !important;
  color: var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92))) !important;
}
#page-guide.onDrk .sg-dp-demo .datepicker-input__icon svg,
#page-guide.onMix .sg-dp-demo .datepicker-input__icon svg,
[id^="page-"].onDrk .datepicker-input__icon svg,
[id^="page-"].onMix .datepicker-input__icon svg,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon svg,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon svg,
#page-guide.onDrk .datepicker-input__icon svg,
#page-guide.onMix .datepicker-input__icon svg,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon svg,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon svg {
  color: var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92))) !important;
}
#page-guide.onDrk .sg-dp-demo .datepicker-input__icon i,
#page-guide.onMix .sg-dp-demo .datepicker-input__icon i,
#page-guide.onDrk .datepicker-input__icon i,
#page-guide.onMix .datepicker-input__icon i,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon i,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon i,
[id^="page-"].onDrk .datepicker-input__icon i,
[id^="page-"].onMix .datepicker-input__icon i {
  color: var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92))) !important;
}
#page-guide.onDrk .sg-dp-demo .datepicker-input__icon svg path,
#page-guide.onMix .sg-dp-demo .datepicker-input__icon svg path,
[id^="page-"].onDrk .datepicker-input__icon svg path,
[id^="page-"].onMix .datepicker-input__icon svg path,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon svg path,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon svg path,
#page-guide.onDrk .datepicker-input__icon svg path,
#page-guide.onMix .datepicker-input__icon svg path,
[id^="page-"].onDrk .sg-dp-demo .datepicker-input__icon svg path,
[id^="page-"].onMix .sg-dp-demo .datepicker-input__icon svg path {
  fill: var(--sg-icon-on-color1, var(--flexwhite, rgba(255,255,255,0.92))) !important;
}
#page-guide.onDrk .sg-dp-demo .btn-clear,
#page-guide.onMix .sg-dp-demo .btn-clear,
[id^="page-"].onDrk .sg-dp-demo .btn-clear,
[id^="page-"].onMix .sg-dp-demo .btn-clear {
  background-color: var(--flexwhite07, rgba(255,255,255,0.07)) !important;
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
#page-guide.onDrk .sg-dp-demo label.color1,
#page-guide.onMix .sg-dp-demo label.color1,
[id^="page-"].onDrk .sg-dp-demo label.color1,
[id^="page-"].onMix .sg-dp-demo label.color1 {
  color: var(--color2) !important;
}

/* ── FILE INPUT — make native picker button readable at the style guide's body font ── */
.sg-page input.sg-file-input { font-size:.95rem!important;padding:.5rem!important;height:auto!important;line-height:1.4!important; }
.sg-page input.sg-file-input::file-selector-button,
.sg-page input.sg-file-input::-webkit-file-upload-button {
  font-size:.9rem;font-weight:600;
  padding:.5rem 1rem;margin-right:.75rem;
  background:#e5e7eb;color:#1f2937;
  border:1px solid #cbd5e1;border-radius:4px;
  cursor:pointer;
}
.sg-page input.sg-file-input::file-selector-button:hover,
.sg-page input.sg-file-input::-webkit-file-upload-button:hover {
  background:#d1d5db;
}

/* ── BOOTSTRAP TOGGLE SWITCH — self-contained for style guide demo ───
   Renders a pill-shaped track + sliding circle thumb regardless of any
   global checkbox styling on the host page. Visible in section 12.
   ─────────────────────────────────────────────────────────────────── */
.sg-page .form-check.form-switch {
	display: block !important;
	min-height: 1.5rem !important;
	padding-left: 2.75em !important;
	margin-bottom: .5rem !important;
	position: relative !important;
}
.sg-page .form-check.form-switch input.form-check-input {
	position: absolute !important;
	top: .25em !important;
	left: 0 !important;
	float: none !important;
	width: 2.5em !important;
	height: 1.25em !important;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: rgba(0,0,0,.25) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	background-size: contain !important;
	border: 1px solid rgba(0,0,0,.25) !important;
	border-radius: 2em !important;
	cursor: pointer !important;
	transition: background-color .15s ease, background-position .15s ease !important;
	box-shadow: none !important;
}
.sg-page .form-check.form-switch input.form-check-input::before,
.sg-page .form-check.form-switch input.form-check-input::after,
.sg-page .form-check.form-switch input.form-check-input + label::before,
.sg-page .form-check.form-switch input.form-check-input + label::after {
	display: none !important;
	content: none !important;
}
.sg-page .form-check.form-switch input.form-check-input:checked {
	background-color: var(--color1) !important;
	border-color: var(--color1) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
	background-position: right center !important;
}
.sg-page .form-check.form-switch input.form-check-input:disabled {
	pointer-events: none !important;
	opacity: .5 !important;
}
.sg-page .form-check.form-switch label.form-check-label {
	padding: 2px 0 0 .5em !important;
	margin: 0 !important;
	font-size: 1rem !important;
	line-height: 1.25 !important;
	min-height: 0 !important;
	display: inline-block !important;
	cursor: pointer;
}
/* Bootstrap toggle on dark/mix — lighter track + brand-color2 checked
   pill. Specificity bumped with #page-guide ID so it beats both the
   style-guide base rule and t_tlc-styles.css `!important` rules. */
#page-guide.onDrk .form-check.form-switch input.form-check-input,
#page-guide.onMix .form-check.form-switch input.form-check-input,
[id^="page-"].onDrk .form-check.form-switch input.form-check-input,
[id^="page-"].onMix .form-check.form-switch input.form-check-input {
	background-color: rgba(255,255,255,0.18) !important;
	border-color: rgba(255,255,255,0.3) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.92%29'/%3e%3c/svg%3e") !important;
}
/* Toggle checked state — track uses --color1 (reverses to white in dark/mix),
   thumb falls back to page bg color so it's visible on the white track. */
#page-guide.onDrk .form-check.form-switch input.form-check-input:checked,
[id^="page-"].onDrk .form-check.form-switch input.form-check-input:checked {
	background-color: var(--color1, #fff) !important;
	border-color: var(--color1, #fff) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1a1a'/%3e%3c/svg%3e") !important;
}
#page-guide.onMix .form-check.form-switch input.form-check-input:checked,
[id^="page-"].onMix .form-check.form-switch input.form-check-input:checked {
	background-color: var(--color1, #fff) !important;
	border-color: var(--color1, #fff) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23666666'/%3e%3c/svg%3e") !important;
}
#page-guide.onDrk .form-check.form-switch label.form-check-label,
#page-guide.onMix .form-check.form-switch label.form-check-label,
[id^="page-"].onDrk .form-check.form-switch label.form-check-label,
[id^="page-"].onMix .form-check.form-switch label.form-check-label {
	color: rgba(255,255,255,0.92) !important;
}

/* ── TOGGLE BUTTON LABELS (.btn-check + .btn) — proper edge padding ──
   .btn-xxs uses % padding which collapses on narrow buttons. Override the
   HORIZONTAL axis only — 2026-07-29. The old `padding: 12px 20px` plus
   `line-height: 1` also replaced the vertical rhythm, which left a toggle
   label 36.8px tall beside a 44.8px .btn-xxs button. Vertical padding and
   line-height now come from the size class, so a toggle label and a button
   of the same size class are the same height. */
.sg-page .btn-check + .btn {
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-size: .8rem !important;
}
/* Dark / mix — checked-state coloring switches to color2 so it's visible
   on the dark page background. Off-state borders also lighten. */
#page-guide.onDrk .btn-check + .btn,
#page-guide.onMix .btn-check + .btn,
[id^="page-"].onDrk .btn-check + .btn,
[id^="page-"].onMix .btn-check + .btn {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
}
/* outline-primary + outline-secondary checked state on dark/mix —
   uses --color1 (reverses to white) with text falling back to page bg color. */
#page-guide.onDrk .btn-check:checked + .btn-outline-primary,
#page-guide.onDrk .btn-check:checked + .btn-outline-secondary,
[id^="page-"].onDrk .btn-check:checked + .btn-outline-primary,
[id^="page-"].onDrk .btn-check:checked + .btn-outline-secondary {
  background-color: var(--color1, #fff) !important;
  color: #1a1a1a !important;
  border-color: var(--color1, #fff) !important;
}
#page-guide.onMix .btn-check:checked + .btn-outline-primary,
#page-guide.onMix .btn-check:checked + .btn-outline-secondary,
[id^="page-"].onMix .btn-check:checked + .btn-outline-primary,
[id^="page-"].onMix .btn-check:checked + .btn-outline-secondary {
  background-color: var(--color1, #fff) !important;
  color: #666666 !important;
  border-color: var(--color1, #fff) !important;
}

/* ── BIG TOGGLE SWITCH (EPIC4 Contest pattern) ───────────────────────
   120×67px pill-shaped toggle, green-on-checked with check-circle icon.
   Self-contained so the demo works whether or not the host site CSS
   already defines .switch / .slider rules.
   ─────────────────────────────────────────────────────────────────── */
.sg-bigswitch-demo .switch input[type="checkbox"] { display:none; }
.sg-bigswitch-demo .switch {
  position:relative;display:inline-block;
  width:120px;height:67px;cursor:pointer;
}
.sg-bigswitch-demo .switch .slider {
  position:absolute;inset:0;background:#ccc;
  border-radius:34px;transition:background .2s;
}
.sg-bigswitch-demo .switch .slider::before {
  content:"";position:absolute;
  width:53px;height:53px;left:7px;top:7px;
  background:#fff;border-radius:50%;
  transition:transform .2s;z-index:1;
}
.sg-bigswitch-demo .switch .slider .off-text {
  position:absolute;top:50%;right:19px;
  transform:translateY(-50%);
  font:bold .672rem/1 sans-serif;color:#777;
  z-index:0;transition:opacity .2s;
}
.sg-bigswitch-demo .switch .slider .on-icon {
  display:none;position:absolute;top:50%;left:19px;
  transform:translateY(-50%);
  font-size:1.44rem;color:#05b148;width:1.44rem;height:1.44rem;
  z-index:0;
}
.sg-bigswitch-demo .switch input:checked + .slider { background:#04D158; }
.sg-bigswitch-demo .switch input:checked + .slider::before { transform:translateX(53px); }
.sg-bigswitch-demo .switch input:checked + .slider .off-text { display:none; }
.sg-bigswitch-demo .switch input:checked + .slider .on-icon { display:block; }

/* ── TYPOGRAPHY SCALE (% based, no px targets) ───────────────────────
   Samples only — sizes are whatever the theme actually resolves.
   Auto-populated by JS from computed styles.
   ─────────────────────────────────────────────────────────────────── */
.ts-row {
  display:grid;grid-template-columns:80px 1fr 120px;gap:1rem;
  padding:.75rem 0;border-bottom:1px dashed var(--bdr);align-items:baseline;
}
.ts-row:last-child { border-bottom:none; }
.ts-row .ts-tag {
  font-family:monospace;font-size:11px;font-weight:700;
  color:var(--color1);letter-spacing:.1em;text-transform:uppercase;
}
.ts-row .ts-sample { color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis; }
.ts-row .ts-meta {
  font-family:monospace;font-size:11px;color:var(--txt-m);text-align:right;
}
/* btn-outline-dark: handled by t_tlc-styles.css with --black8 token */

/* ═══════════════════════════════════════════════════════════════════
   EMBEDDED IN /ops  (html.sg-in-ops — set by graftOpsNav in style-guide.js)
   ═══════════════════════════════════════════════════════════════════
   On an /ops page the host already carries the breadcrumb, the eyebrow and an
   <h1>Style Guide</h1>, and the grafted Pages ribbon already says which page of
   the guide you are on. The guide's own centered per-page title then repeated
   both facts and pushed the first real component about 300px down the screen.

   Craig, 2026-08-23: "We already had a header, and we have a three column layout
   for the guide itself."

   So the standalone title block stands down here, and only here. Off /ops the
   guide is the whole page and needs its own title, so nothing below applies. */
/* THE PAGE TITLE, NOT EVERY FULL-WIDTH SECTION. `.sg-section-full` does two jobs
   in this template — it is the per-page title block AND it is "this component
   needs the whole width, no meta column". Hiding the class hid the Tracker
   Scoreboard along with the titles, and the Combo Box page came up with one
   component on it. Craig, 2026-08-23: "We just lost the responsive combo boxes
   that we use on all Form Trackers. Where did it go?"
   One class, two meanings — so the title blocks carry their own name. */
html.sg-in-ops .sg-section.sg-page-title { display: none; }
html.sg-in-ops .sg-page { padding-top: 0; }
html.sg-in-ops .sg-content-3col { margin-top: 0; }


/* ═══════════════════════════════════════════════════════════════════
   DEMO FURNITURE (added 2026-08-23 with Web CSS 16-23 and Layouts 8-9)
   ═══════════════════════════════════════════════════════════════════
   Presentation for the demos themselves — scales, stages, skeletons. NONE of
   this is a component: nothing outside this guide may use an .sg-* class. The
   components on show are always the real ones from their own stylesheet. */

.sg-scale { display:flex; flex-direction:column; gap:7px; }
.sg-scale-row { display:flex; align-items:center; gap:12px; font-size:12px; line-height:1; }
.sg-scale-n { width:3ch; text-align:right; font-weight:700; opacity:.85; font-variant-numeric:tabular-nums; }
.sg-scale-bar { height:14px; border-radius:2px; background:var(--color1,#0079c1); flex:0 0 auto; }
.sg-scale-use { opacity:.65; }

.sg-swatch-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.sg-radius-chip, .sg-elev-chip {
  width:74px; height:74px; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:7px; background:#fff; border:1px solid var(--bdr,rgba(0,0,0,.10));
}
.sg-elev-chip { border:none; border-radius:var(--RadiusBrand,6px); }
.sg-radius-chip span, .sg-elev-chip span {
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.6;
}

.sg-motion-grid { display:flex; flex-direction:column; gap:12px; }
.sg-motion-cell { display:flex; align-items:center; gap:12px; font-size:12px; }
.sg-motion-cell b { width:5ch; font-variant-numeric:tabular-nums; }
.sg-motion-cell span:last-child { opacity:.65; }
.sg-motion-dot { width:22px; height:22px; border-radius:50%; background:var(--color1,#0079c1); flex:0 0 auto; }
.sg-motion-cell:hover .sg-motion-dot { transform:translateX(120px); }

.sg-load-stage {
  display:flex; align-items:center; justify-content:center; min-height:120px;
  background:var(--flexwhite03,rgba(0,0,0,.03)); border-radius:var(--RadiusBrand,6px);
}
/* Sized in px, never rem: a rem value does not survive a move between sites,
   because the destination's root font-size may differ. And it is a plain
   circle, not a rotating square — a rotating square's bounding box swells to
   1.414x at 45deg and cannot be measured reliably. */
/* 26px, doubled 2026-08-23 on Craig's call: at 13px it read as a speck beside
   19px type and nobody could tell it was turning. The button is inline-flex so
   the ring is CENTERED against the label rather than sitting on a guessed
   vertical-align offset — a value that has to be re-guessed every time the type
   scale moves. gap replaces the old margin-right for the same reason. */
.sg-btn-busy { display:inline-flex; align-items:center; gap:10px; }
/* .sg-btn-spin IS A BOX NOW, NOT AN ANIMATION. It was a hand-rolled border ring
   on its own @keyframes sgSpin at .7s — a third spinner in an estate that has
   one, invented here and shipped nowhere else. Craig, 2026-08-24, on the inline
   one: "that one is animated very different."

   What it still does is the job only it can do: reserve 26px so the button does
   not change size when its label is swapped. A control that resizes while it is
   being pressed throws the click away — mousedown and mouseup land on different
   geometry. The thing turning inside it is the real .preloader-wrapper. */
.sg-btn-spin {
  display:inline-flex; align-items:center; justify-content:center;
  /* 40px — what `.preloader-wrapper.small` actually measures here (2.25rem
     against a 17.6px root, not the 36 the name implies). The box exists to
     RESERVE width so the button cannot resize when its label is swapped; it is
     not a size the spinner is squeezed into. */
  width:40px; height:40px; flex:0 0 auto;
}
/* AND IT HAS TO BE WHITE, AND IT HAS TO FIT. Craig, 2026-08-25: "[the] button was
   supposed to have the in-line spinner in all white happening inside of the button.
   It used to be there."
   Measured on the live page before this: the ring painted rgb(0,121,193) — the
   brand blue — on a brand-blue button, so the only part you could see was the
   sliver hanging outside the 26px box, because MDB's `.preloader-wrapper.small` is
   36px and out-specified the 26px set here at equal weight. Both halves are fixed
   at (0,3,0) so neither depends on which sheet loaded last. Scoped to this demo:
   the estate's own spinners keep their brand ink. */
/* DO NOT TOUCH THE SPINNER'S OWN GEOMETRY. Craig, 2026-08-25: "the spinner is all
   out of whack inside the saving button." Two attempts to make it smaller both
   produced a ragged speck instead of a ring — first by forcing the wrapper to
   30px, then by scaling it. MDB builds the arcs from clippers that are
   percentages of the wrapper, a border that is an absolute 3px, and rotations
   supplied by the animation; change the box it computes against and the arcs stop
   meeting. The rule now is the same one the two working inline spinners on this
   page follow: leave `.preloader-wrapper.small` exactly as MDB draws it and size
   the RESERVE BOX to match. Measured on this page: 39.6px, because `.small` is
   2.25rem and this page's root is 17.6. */
/* THE LAYER NEEDED `.spinner-primary-color-only`, AND THAT IS THE WHOLE BUG.
   Measured in Craig's own browser, not a probe: the busy button's
   `.spinner-layer` computed `animation-name: none` and `opacity: 0`, while the two
   inline spinners on the same page — markup `spinner-layer
   spinner-primary-color-only` — ran `fill-unfill-rotate` at opacity 1. MDB hangs
   the fill animation off the COLOR class, so a bare `.spinner-layer` is a spinner
   that never becomes visible in any browser. Fixed in the markup; the ink is
   forced white here because the class it now carries paints the brand blue, and
   this one sits on a brand-blue button. */
.sg-btn-spin .circle-clipper .circle,
.sg-btn-spin .gap-patch .circle { border-color:#fff !important; }
/* AND THE LAYER HAS TO START AT THE WRAPPER'S ORIGIN. Measured against the two
   working spinners on this same page: theirs compute `left:0`, this one computed
   `left:19.8px` — exactly half its own width — so the whole ring sat half outside
   its box and all you ever saw was the sliver at the right edge. MDB only ever
   sets `position:absolute; width:100%`, leaving `left:auto`, which resolves to the
   element's STATIC position — and this demo is built from <span>s inside a
   <button> (a <div> is not phrasing content), so that static position lands in the
   middle of an inline formatting context instead of at 0 the way the <div>-based
   spinners do. Pinning the offsets is what makes the span version draw the same
   ring as the div version. */
.sg-btn-spin .spinner-layer { left:0 !important; right:0 !important; top:0 !important; }
.sg-skel {
  height:13px; border-radius:3px; margin-bottom:9px;
  background:linear-gradient(90deg,
    var(--flexwhite03,rgba(0,0,0,.05)) 0%,
    var(--flexwhite07,rgba(0,0,0,.10)) 50%,
    var(--flexwhite03,rgba(0,0,0,.05)) 100%);
  background-size:200% 100%;
  animation:sgSkel 1.4s ease-in-out infinite;
}
@keyframes sgSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.sg-disclosure { border:1px solid var(--bdr,rgba(0,0,0,.10)); border-radius:var(--RadiusBrand,6px); overflow:hidden; }
.sg-disclosure details + details { border-top:1px solid var(--bdr,rgba(0,0,0,.10)); }
/* FONT3, NOT THE DISPLAY FACE. Craig, 2026-08-24: "this bold font is not done in
   hypatia at all, and when it is in the extra bold it is all caps. If this is
   going to carry as SST, I believe it should be font3."

   A summary line is a control label, not a headline — it wants the brand's third
   family, which every site sets to something readable at 600. It must be stated:
   left to inherit, it picks up whatever the surrounding shell is using, which on
   an ops page is the ops font and on a marketing page is the display face, so
   one component read three different ways across the estate.

   Sites diverge from here in their OWN sheet, not by editing this one —
   TurnerLee takes font0 (Open Sans) in Content/Snippets/custom-ops-chrome.html. */
.sg-disclosure summary {
  cursor:pointer; padding:12px 16px; font-weight:600; list-style:none;
  font-family:var(--font3Family, inherit);
  display:flex; align-items:center; gap:10px;
  background:var(--flexwhite03,rgba(0,0,0,.03)); transition:background .15s ease;
}
.sg-disclosure summary::-webkit-details-marker { display:none; }
.sg-disclosure summary::before {
  content:"\25B8"; font-size:12px; opacity:.6; transition:transform .2s ease; flex:0 0 auto;
}
.sg-disclosure details[open] > summary::before { transform:rotate(90deg); }
.sg-disclosure summary:hover { background:var(--flexwhite07,rgba(0,0,0,.06)); }
.sg-disclosure summary:focus-visible { outline:2px solid var(--color1,#0079c1); outline-offset:-2px; }
.sg-disclosure-body { padding:14px 16px 16px 42px; font-size:14px; }

/* Both nav demos live inside the three-column grid, so the bar must not stick
   and the menu must not be clipped by its own section. */
.sg-nav-stage, .sg-dd-stage { position:relative; }
.sg-nav-stage .wcf-nav, .sg-dd-stage.wcf-nav { position:relative; top:auto; z-index:1; }
.sg-dd-stage.wcf-nav .nav-in { min-height:52px; }
.sg-nav-stage .nav-row, .sg-nav-stage .top-nav { position:relative; top:auto; }
.sg-nav-stage .top-nav { margin-bottom:16px; }
/* The demo dropdowns open on hover as well as click: a <script> injected via
   innerHTML never executes, so the guide cannot rely on the app's own handler. */
.sg-demo-dd:hover > .dd-menu, .sg-demo-dd.open > .dd-menu { display:block; }

.sg-hit {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; border-radius:var(--RadiusBrand,6px); border:2px dashed;
  font-size:15px; color:var(--color1,#0079c1);
}
.sg-hit em { font-style:normal; font-size:9px; letter-spacing:.06em; opacity:.7; }
.sg-hit-ok  { width:44px; height:44px; border-color:var(--color1,#0079c1); }
.sg-hit-bad { width:24px; height:24px; border-color:#c0392b; color:#c0392b; }
.sg-hit-bad em { display:none; }

/* Each inline spinner gets its own cell. Font Awesome swaps <i> for <svg> after
   this template mounts, and an unwrapped svg flex-item landed outside the row it
   was authored in — measured 2026-08-23 at x=684 in a row whose first item should
   have been at x=0. A wrapper the swap cannot touch fixes the ordering, and a
   fixed cell size stops a 52px glyph resizing the row while it rotates. */
.sg-spin-cell {
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; flex:0 0 auto; overflow:visible;
}
.sg-spin-cell .svg-inline--fa { display:inline-block; }
.sg-spin-cell-lg { width:80px; height:80px; }

/* ── 24 · status color table ── */
.sg-status-grid { display:flex; flex-direction:column; gap:14px; }
.sg-status-row {
  display:grid; grid-template-columns:34px minmax(0,1.1fr) auto auto; gap:6px 12px;
  align-items:center; font-size:13px;
}
.sg-status-sw { width:34px; height:34px; border-radius:var(--RadiusBrand,6px); border:1px solid rgba(0,0,0,.12); }
.sg-status-hex { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; opacity:.7; }
.sg-status-use { grid-column:2 / -1; opacity:.65; font-size:12px; margin-top:-4px; }

/* ── 1 · card v2 demo grid — two per row so a 387px card is near 1:1 ── */
.sg-odc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:start; }

/* ══════════════════════════════════════════════════════════════════════════
   THE AGENT SPEC BLOCK — what the right column is actually FOR.
   Craig, 2026-08-24: "What you need in this Style Guide is only text that an
   agent can use to rebuild these precisely. And something that triggers them to
   find these and use them appropriately."

   So every component's notes answer four questions in a fixed order, and an
   agent can stop reading as soon as it has what it came for:

     USE WHEN   the trigger — the sentence that makes an agent recognise
                that THIS is the component for the job it was handed
     ROOT       the exact class string to put on the outer element
     CSS        which stylesheet, and that it is already loaded
     RULES      the constraints that are not visible in the markup and that
                get broken by anyone improvising

   Design prose and provenance quotes are not in this list on purpose. They live
   in the CSS comments, where the person changing the component reads them. An
   agent building FROM the guide needs the contract, not the history.
   ══════════════════════════════════════════════════════════════════════════ */
.sg-spec { display: grid; gap: .55rem; margin: 0 0 .9rem; }
.sg-spec-row { display: grid; grid-template-columns: 4.6rem 1fr; gap: .55rem; align-items: baseline; }
.sg-spec-k {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt-m); line-height: 1.7;
}
.sg-spec-v { font-size: 14px; color: var(--txt-s); line-height: 1.5; }
.sg-spec-v code, .sg-spec-v .sg-code { font-size: 13px !important; }
.sg-rules { margin: 0; padding-left: 1.05em; }
.sg-rules li { font-size: 14px; color: var(--txt-s); line-height: 1.5; margin-bottom: .3rem; }
.sg-rules li:last-child { margin-bottom: 0; }
.sg-rules li strong { color: var(--txt); }

/* ══════════════════════════════════════════════════════════════════════════
   FLOATING LABEL vs SCROLLED TEXT — a veil on the WRAPPER, inside the border.
   Craig, 2026-08-24: "you covered up the top of the box, the border on the top
   of the input ... move that white fade down within the text area, so the top of
   the input border shows. But have it cover a little bit more of the text
   because you can't read the label yet."

   THREE WRONG ANSWERS BEFORE THIS ONE, and each failed for its own reason:

   1. mask-image on the textarea. A mask applies to the WHOLE painted box, so
      the 1px top border faded out with the text. That is the "you covered up
      the top of the box" fault, exactly.

   2. The veil on the LABEL's ::before. Bootstrap's floated label carries
      `transform: scale(.6)` with origin 0 0 — which scales its pseudo-element
      too. Measured: label box 172px against a 520px field, so the veil covered
      the left 60% and text to the right of the label stayed fully visible. It
      LOOKED like the ramp was too shallow; it was the wrong element.

   3. A shallow ramp. Even placed correctly, 26px of solid cover left a line
      sitting ON the label half-visible either side of it.

   So: the wrapper, which has no transform and is already position:relative.

   THE BAND IS 34px AND THAT NUMBER IS MEASURED, NOT CHOSEN. Craig, 2026-08-24:
   "it partially covered the very first line ... shorten that fade of white just
   slightly so it doesn't cover the first line." There is a 10px window and this
   is where it comes from:

     label ink ends            ~25px into the field
     first line's ink STARTS    34.8px  = padding-top 28.6 + half-leading 6.2
                                          (line-height 36.96 - font-size 24.64)/2

   So the veil must be solid past 25 and gone before 35. Solid to 26px, dead by
   34px. The old 33/53 was fading straight across the first line's glyphs, which
   is exactly what he saw. If the input's type scale ever changes, RE-MEASURE —
   half-leading is where this number lives.

     top: 1px, left: 1px    INSIDE the 1px border, so the border paints
     right: the gutter      the scrollbar is NOT faded — see below
     opaque to 76%          26px, clears the label
     to transparent by 34px before the first line's ink at 34.8px
     z-index 2 under the label's 3, both above the textarea
     pointer-events:none    cannot eat a click or a drag-select

   THE SCROLLBAR SITS ABOVE THE VEIL, BY BEING OUTSIDE IT. Craig: "can the
   scroll bar that only appears on scrolling be a level above the fade out so it
   doesn't get faded out." It cannot be raised on its own — an overlay scrollbar
   is painted by the textarea, so lifting it means lifting the text with it.
   Measured on this Mac: offsetWidth - clientWidth - borders = 0, i.e. overlay
   scrollbars, drawn over the field's right edge. So the veil stops short of
   that edge instead. --fl-veil-gutter is the reserve; 15px clears an overlay
   thumb and its margin, and on a platform with classic scrollbars that width is
   already taken by the scrollbar itself. Set it to 1px on a field that never
   scrolls.

   :has() scopes it to textareas — a plain input never scrolls under its label,
   and support is verified on this browser, not assumed.

   The color is a token with a white fallback because the veil must MATCH the
   field it sits in. On a tinted field, set --fl-veil on the wrapper.
   ══════════════════════════════════════════════════════════════════════════ */
.form-floating:has(> textarea.form-control) { position: relative; }
.form-floating:has(> textarea.form-control) > label { z-index: 3; }
.form-floating:has(> textarea.form-control)::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: var(--fl-veil-gutter, 15px);
  height: 34px;
  z-index: 2;
  pointer-events: none;
  border-radius: 4px 0 0 0;
  background: linear-gradient(to bottom,
    var(--fl-veil, #fff) 0,
    var(--fl-veil, #fff) 76%,
    transparent 100%);
}

/* ── ALERTS PAGE STAGE — ONE FLAT DARK WINDOW ───────────────────────────────
   Craig, 2026-08-25: "Just make the entire window dark gray instead of light
   gray so there's not a jumping, dark gray as you click between these buttons."

   The alert layer paints its own scrim (rgba(10,12,14,.42) + a blur) and it is
   sized to the panel, not to the stage — so a light stage showed a dark BOX
   floating in a light window, and the box changed size with every example. Two
   halves to the fix, and both are needed: the stage takes the color the scrim
   used to produce, and the layer inside the guide stops painting its own, or
   the overlap would just be darker again. The live component is untouched —
   this is scoped to the guide's stage. */
#sg-alert-stage {
  background: #93989c !important;   /* rgba(10,12,14,.42) resolved over the old stage */
  border-radius: var(--RadiusBrand, 15px);
}
#sg-alert-stage .toast {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── THE NOTES COLUMN IS ALWAYS LEFT-ALIGNED ───────────────────────────────
   Craig, 2026-08-25: "either everything should be left aligned or everything
   should be set or aligned". Layouts §10 inherited text-align:center from
   .ct-dashboard, the component it documents, so its Use when / Root / CSS /
   Rules came out centered while every other section's ran left. The meta column
   is chrome, not demo — it never takes styling from the thing beside it. */
.sg-pair-meta,
.sg-pair-meta .sg-spec,
.sg-pair-meta .sg-rules { text-align: left !important; }
.sg-pair-meta .sg-spec-row { justify-items: start; }
.sg-pair-meta > .btn { display: inline-block; }
/* A full-bleed demo (grid-column:1/-1) leaves column 1 with nothing of its own on
   that row, so the auto algorithm hands column 2 whatever its content asks for and
   column 1 collapses — measured on Layouts §10: label and demo 20px, notes 1068px.
   min-width:0 lets the notes column shrink back to its 1fr share. */
.sg-section .sg-pair-main,
.sg-section .sg-pair-meta { min-width: 0; }
.sg-section .sg-pair-meta[style*="grid-column:2"] { max-width: 363px; justify-self: end; }

/* ── TWO-COLUMN FLOW WRAPPERS (desktop only, built by style-guide.js) ──────
   .sg-pair-main and .sg-pair-meta auto-place into the SAME grid row, so a tall
   meta inflates that row and the demo column renders white below its sample.
   Measured 2026-08-28 10:20 MDT on /ops/style-guide?page=web-css: 34 of 77
   pairs had a gap >40px and 8,248px of white in total — sec-17 596px, sec-15
   563px, sec-7 342px. Craig, 2026-08-28: "Remove the space so the visual in
   the middle column all is consistent. Let your rules in the right column just
   go as long as they need to. They do not need to be side-by-side with the
   buttons in column two."
   Above 991.98px the JS moves each section's children into these two streams
   so the columns flow independently. Below it the JS unwraps and the existing
   single-column media query takes over, because on a phone each rule block
   belongs directly under its own demo — which is why these selectors are
   deliberately NOT added to that media query. */
.sg-section > .sg-col-main { grid-column: 1; min-width: 0; }
.sg-section > .sg-col-meta {
  grid-column: 2;
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* The section header is a copy button now — say so on hover, and keep the two
   full-bleed rows the same width as it. */
.sg-label[data-sg-copylabel] { cursor: copy; }
.sg-label[data-sg-copylabel]:hover { filter: brightness(1.12); }
/* The header spans both columns EXPLICITLY. `grid-column:1/-1` resolved to line 2
   in the sections whose demo also spans, leaving Layouts §10's blue bar at 725px
   against a 1123px section — Craig, 2026-08-25: "Header jacked up, not going all
   the way to the edge like other headers." Two columns means lines 1,2,3. */
.sg-section > .sg-label { grid-column: 1 / 3; }

/* Brand Fonts: nine specimens in ONE left column, their readouts stacked in one
   notes cell. Craig, 2026-08-25: "the text info on the far right is relative to
   all of these fonts, so it should just keep going down. The alignment on the
   right is not important." Each readout keeps a little air so the stack still
   reads as nine separate faces. */
.sg-fontrow { margin-top: 1.1rem; }
.sg-fontrow:first-of-type { margin-top: .6rem; }

/* AND THE SPECIMENS THEMSELVES NEED AIR. Craig, 2026-08-25: "their spacing is all
   jacked up. You need to add some adequate spacing so we can read what the heck
   we're looking at in this pile of text." Nine faces stacked with only the
   paragraphs' own margins between them read as one block of text — the gap BETWEEN
   two faces has to be bigger than the gaps inside one, or there is no grouping at
   all. Matches the rhythm of the Headings rows above, which Craig approved. */
/* Each face is a ROW now, same treatment as the Headings rows. Craig, 2026-08-25:
   "Utilize the same middle column right side treatment for fonts as you did for
   the headers to get the details lined out." The class/token line moves out of the
   specimen and into a mono column at the far right, so the nine faces read down
   the left edge and their details line up down the right. */
.sg-fontspec {
  display: grid; grid-template-columns: 1fr 210px; gap: 1rem;
  align-items: baseline; padding: 0 0 2.2rem;
}
.sg-fontspec:last-child { padding-bottom: .5rem; }
/* THE ALPHABET ROW IS ONE UNBREAKABLE TOKEN AND IT WAS ESCAPING ITS COLUMN.
   Measured 2026-08-31 07:20 MDT at 992/1024/1100/1200, both stacks. In every one of
   the nine specimens the widest child is `ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789` —
   min-content 270-292px on cololamb, 318.1px on turnerlee — and every other child is
   <=186px and fits. The `1fr` track hands .fs-main 199-230px at those widths, so:

       turnerlee  @992 track 199.1 vs 318.1 = 119px out   9 of 9 .fs-main overflowing
                 @1024 track 220.4                98px    9 of 9
                 @1200 track 337.8                  0     2 of 9  (the widest faces)
       cololamb   @992 track 208.7 vs 278.0 =  69px       9 of 9
                 @1024 track 230.0                48px    9 of 9

   min-width:0 (below) already releases the TRACK floor, so the overhang lands on the
   CELL instead — the string runs out over the .fs-meta column beside it. That is the
   documented half-fix: capping the grid alone just moves the overflow, the nowrap
   child has to be released in the same pass.

   NOT a breakpoint change. The single-column fallback fires at <=991.98px, and to
   contain this by widening it the fallback would have to run to ~1300px — single
   column on a 1280 laptop — and it still would not fix turnerlee's two widest faces
   at 1200. Letting the token break is what a type specimen does anyway.

   `break-word` first, `anywhere` second: a browser that does not know `anywhere`
   drops that declaration and keeps the fallback. `anywhere` also shrinks min-content,
   so the track can never be forced wide again if min-width:0 is ever lost. Fires ONLY
   when a token cannot fit, so >=1250px is untouched — verified 0 changed nodes. */
.sg-fontspec .fs-main { min-width: 0; }
.sg-fontspec .fs-main p { overflow-wrap: break-word; overflow-wrap: anywhere; }
.sg-fontspec .fs-meta {
  margin: 0; font-family: 'SF Mono','Fira Code','Consolas',monospace;
  font-size: 11px; color: var(--txt-m); text-align: right;
  letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .sg-fontspec { grid-template-columns: 1fr; }
  .sg-fontspec .fs-meta { text-align: left; }
}

/* Headings: the .ts-row pattern (§3's BODY / SMALL / LABEL rows), applied to the
   H1-H6 specimens so each one carries its own compact readout at the far right of
   the demo column. Craig, 2026-08-25: "you already do it slightly for body, small
   and label". Baseline alignment, because an H1 and an 11px mono label share a
   baseline and nothing else. */
.hs-row {
  display: grid; grid-template-columns: 44px 1fr 210px; gap: 1rem;
  align-items: baseline; padding: .35rem 0 1.1rem;
}
.hs-row .hs-tag {
  font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--color1); letter-spacing: .1em; text-transform: uppercase;
}
.hs-row > h1, .hs-row > h2, .hs-row > h3,
.hs-row > h4, .hs-row > h5, .hs-row > h6 { margin: 0; min-width: 0; }
.hs-row .hs-meta {
  font-family: monospace; font-size: 11px; color: var(--txt-m);
  text-align: right; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .hs-row { grid-template-columns: 44px 1fr; }
  .hs-row .hs-meta { grid-column: 2; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — INPUTS, HARDENED AGAINST THE LEGACY STACK. 2026-08-30 22:15 MDT.

   WHY THIS BLOCK EXISTS. The guide renders on TWO different CSS stacks and only
   one of them was ever tested. TurnerLee serves the SST core (sst-styles.css,
   sst-3rdparty.css, sst-custom.css, bs-theme.css). Every other site — Colorado
   Lamb, SweetwaterCreek, EPIC4, MongooseSports — serves the legacy per-site
   sheets (t_tlc-styles.css, t_tlc-3rdparty.css, t_tlc-custom.css) PLUS Material
   Design Bootstrap: /css/mdb.min.css, /css/mdb-filter.min.css, cdnjs
   mdb-ui-kit 3.10.1 and /plugins/File-Upload/css/addons/mdb-file-upload.css.
   MDB loads AFTER bootstrap 5.1.3 and rewrites the whole form component set.

   Measured 2026-08-30 on cololamb.com/ops/style-guide against turnerlee.com:
   the rendered DOM of section 8 is IDENTICAL on both, 370 lines each. The only
   markup difference is that MDB's JS stamps `waves-effect waves-light` onto
   every .btn. So none of this is an authoring fault in the guide — every one of
   these is a rule from a sheet TurnerLee does not load, winning on specificity.

   THE SCOPE IS THE WHOLE MECHANISM. #tl-style-guide-mount wraps the entire
   guide, so a selector prefixed with it starts at (1,0,0) and beats every
   class-only rule in MDB and in t_tlc-styles.css outright. `!important` appears
   below ONLY where the rule being beaten already carries it — an !important
   declaration cannot be beaten by a non-important one at any specificity, so
   matching it there is the fix, not a shortcut. Proved before it was written:
   a candidate block injected into the live page with NO !important took the
   checkbox border 2px solid rgb(117,117,117) -> 1px solid rgba(0,0,0,.25),
   .btn-check position relative -> absolute, .btn-toggle-group display
   block -> inline-flex.

   THIS SHEET LOADS ONLY ON /ops/style-guide — verified 0 hits on cololamb.com/
   and cololamb.com/services — so nothing here can reach a live client page.

   BRAND IS NOT A DEFECT AND IS NOT TOUCHED. Craig, 2026-08-22: "Epic4 and
   ColoLamb are unique/diff. use their local brand styles." Every color below
   is a token or a Bootstrap literal that the bar itself already computes; the
   only reason a literal appears is that Bootstrap 5.1.3 hard-codes it and
   --bs-form-valid-color / --bs-form-invalid-color do not exist until 5.3.
   Sizes stay in em/rem: the roots differ (17.6px on TurnerLee, 16px here) and
   pinning px would make one component TurnerLee-scale inside a page that is
   not. Every rule below is a NO-OP on TurnerLee — that is the acceptance test.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TEXTAREA SCROLL-FADE — THE VEIL MUST BE THE FIELD'S OWN COLOR ──────
   Craig: "text area has white glow at top... i think that's a fade to cover the
   text as it scrolls by. but it always must match the bg color to work."

   He is exactly right, and the rule's own note 200 lines above already said so:
   "The color is a token with a white fallback because the veil must MATCH the
   field it sits in." Nobody ever set --fl-veil, so the #fff fallback ran.

   MEASURED. TurnerLee's textarea is rgb(255,255,255) OPAQUE, so a white veil is
   invisible there and the bug never showed. Colorado Lamb's is
   rgba(65,65,65,0.07) — a TRANSLUCENT tint, which composites over the body's
   rgb(252,252,252) to rgb(239,239,239). A hard #fff veil over that is a 16-level
   step: the white glow.

   So the veil is now painted the way the FIELD is painted — the input tint over
   the page ground, two stacked layers, tokens only. On an opaque-field site the
   top layer is opaque and the base never shows, which is why this is a no-op on
   the bar. --fl-veil still overrides the ground and --fl-veil-tint the tint, so
   a page with an unusual field can still say so explicitly.

   RESIDUAL, DECLARED: Colorado Lamb's --PageBgColor token reads `white` while
   the page actually paints #FCFCFC, so the composite lands 3 levels light
   (242 vs 239). That is a token fault on that site, not something to paper over
   with a literal here. It replaces a 16-level error with a 3-level one. */
#tl-style-guide-mount .form-floating:has(> textarea.form-control)::before {
  background:
    linear-gradient(to bottom,
      var(--fl-veil-tint, var(--InputBgColor, transparent)) 0,
      var(--fl-veil-tint, var(--InputBgColor, transparent)) 76%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--fl-veil, var(--PageBgColor, #fff)) 0,
      var(--fl-veil, var(--PageBgColor, #fff)) 76%,
      transparent 100%);
}

/* ── 2. CHECKBOX + RADIO — REVERTED 2026-08-31. THE COMPONENT WAS NEVER BROKEN.
   Craig: "we need the tlc checkbox css/styles/html format and the radio ... they
   are literally made and used on this website in the employment application."

   He is right and this block was the damage. It forced the native control visible
   and suppressed label::before/::after — and on the legacy stack THOSE PSEUDO-
   ELEMENTS ARE THE CONTROL. t_tlc-styles.css hides the input on purpose and draws
   the box on the label. That is not a bug to beat; it is the TLC component.

   MEASURED on https://cololamb.com/employment, which uses it and has always
   worked — input[type=radio] inside div.form-check.radio:
     input            display none · 0x0                    <- BY DESIGN
     label::before    24x24 · border-radius 50% · 1px solid rgb(197,32,64)
                      · background rgba(65,65,65,0.07)
     label            padding 6.4px 0 6.4px 35px            <- the 35px is its room

   So the two stacks legitimately ship DIFFERENT controls: the SST stack draws
   Bootstrap's 13x13 box on the input, the legacy stack draws a 24x24 brand-outlined
   box on the label. Forcing one to imitate the other produced a hybrid that was
   neither — a raw browser box with the real control suppressed behind it.

   NOTHING REPLACES THIS BLOCK. Deleting it is the fix: each site's guide now shows
   the checkbox and radio that site's own forms actually use, which is the only thing
   a reader copying from the guide can act on.

   WHAT I GOT WRONG, recorded so the next pass does not repeat it: I verified the
   first version by reading getComputedStyle().width, which returns the SPECIFIED
   width for a display:none element. It read 14px while nothing was on screen. Assert
   display and getBoundingClientRect. This estate's own CLAUDE.md says so. */

/* ── 3. BUTTON TOGGLE GROUPS — `clip` IS INERT ON A RELATIVE ELEMENT ────────
   Craig: "Button groups are broken completely. This needs to get fixed on SST
   as well to ensure the button groups are buttons."

   THE ROOT CAUSE IS ONE PROPERTY AND IT IS THE QUIET KIND. Bootstrap hides the
   native radio with `position:absolute; clip:rect(0,0,0,0)`. On the legacy stack
   t_tlc-styles.css `input[type="radio"]:not(:checked), input[type="radio"]:checked`
   (0,2,1) — and the identical checkbox pair — win over .btn-check (0,1,0) and
   set position to RELATIVE. The clip is still declared, still reads
   rect(0,0,0,0) in the computed style, and does NOTHING: clip only applies to an
   absolutely positioned element. So the raw browser radio paints at full size
   while every rule you read in the sheet looks correct.

   The label then loses too — display block instead of inline-block, border
   stripped — so it stops being a button, and .btn-toggle-group is left display
   block, which is why the labels stack down the page instead of forming a row.

   Ported from sst-styles.css L3996-4184, which is the version the bar renders,
   so the segment geometry is the bar's and not a fresh guess. State colors are
   brand-derived through --tgb, so each site's group is its own color. */
#tl-style-guide-mount .btn-check {
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}
#tl-style-guide-mount .btn-toggle-group {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  --tgb: var(--PrimaryButtonColor, var(--color1, #0079c1));
  --tg-off: var(--ToggleGroupOffColor, color-mix(in srgb, var(--tgb), black 38%));
  --tg-on: var(--ToggleGroupOnColor, var(--tgb));
  --tg-hover: var(--ToggleGroupHoverColor, var(--PrimaryButtonHoverColor, var(--color1xl, #0094ec)));
  --tg-text: var(--PrimaryButtonTextColor, #fff);
}
#tl-style-guide-mount .btn-toggle-group .btn-check + .btn {
  display: inline-block !important;
  padding: 1.15em 20px !important;
  line-height: 1.19em !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-color: var(--tg-off) !important;
  color: var(--tg-text) !important;
  position: relative;
  z-index: 0;
  transition: background-color .15s ease;
  --tg-fill: var(--tg-off);
  box-shadow: 2px 0 0 0 var(--tg-fill);
}
/* Only the two OUTER corners round, or it stops reading as one control.
   .4rem, never the bar's resolved 7.04px — that number is 17.6px root x .4. */
#tl-style-guide-mount .btn-toggle-group .btn-check:first-of-type + .btn {
  border-top-left-radius: var(--ToggleGroupRadius, .4rem) !important;
  border-bottom-left-radius: var(--ToggleGroupRadius, .4rem) !important;
}
#tl-style-guide-mount .btn-toggle-group .btn-check:last-of-type + .btn {
  border-top-right-radius: var(--ToggleGroupRadius, .4rem) !important;
  border-bottom-right-radius: var(--ToggleGroupRadius, .4rem) !important;
  box-shadow: none;
}
#tl-style-guide-mount .btn-toggle-group .btn-check:checked + .btn,
#tl-style-guide-mount .btn-toggle-group .btn-check:active + .btn {
  background-color: var(--tg-on) !important;
  color: var(--tg-text) !important;
  --tg-fill: var(--tg-on);
  z-index: 1;
}
/* Hover lifts an UNSELECTED segment only — hovering the current one must not
   read as a pending change. */
#tl-style-guide-mount .btn-toggle-group .btn-check:not(:checked) + .btn:hover {
  background-color: var(--tg-hover) !important;
  color: var(--tg-text) !important;
  --tg-fill: var(--tg-hover);
  z-index: 2;
}
/* The global .btn:hover hvr-pop scale tears the flush seams open. */
#tl-style-guide-mount .btn-toggle-group .btn-check + .btn:hover {
  -webkit-animation: none !important;
  animation: none !important;
}
#tl-style-guide-mount .btn-check + label::before,
#tl-style-guide-mount .btn-check + label::after,
#tl-style-guide-mount .btn-check + .btn::before,
#tl-style-guide-mount .btn-check + .btn::after {
  display: none !important;
  content: none !important;
}

/* ── 4. VALIDATION STATES — MDB TAKES THE MESSAGE OUT OF FLOW ───────────────
   Craig: "unsure why it says 'Looks good!' behind there."

   The block is in the shared markup on BOTH sites with an inline
   style="display:block" — a deliberate demo of the valid state, not a stray
   element. What is wrong is where it sits. mdb-ui-kit rewrites the Bootstrap
   validation component: `.valid-feedback,.valid-tooltip{position:absolute}` and
   `.valid-feedback{width:auto;margin-top:-.75rem}` pull it out of flow and back
   UP over the field below it, which is why it reads as sitting behind something.
   MDB also blanks both state icons with background-image:none and reddens the
   invalid border.

   #198754 / #dc3545 are Bootstrap 5.1.3 LITERALS, not a choice: measured, the
   bar computes exactly those, --bs-form-valid-color does not exist before
   Bootstrap 5.3, and the bar's own --bs-success is #00b52b, which is not what
   paints. Both data URIs are copied verbatim from the bar's computed value. */
#tl-style-guide-mount .valid-feedback,
#tl-style-guide-mount .invalid-feedback {
  position: static;
  width: 100%;
  margin-top: .25rem;
  font-size: .875em;
  line-height: 1.3;
}
#tl-style-guide-mount .valid-feedback   { color: #198754; }
#tl-style-guide-mount .invalid-feedback { color: #dc3545; }
#tl-style-guide-mount .form-control.is-valid,
#tl-style-guide-mount .form-control.is-invalid {
  background-repeat: no-repeat;
  background-position: right calc(.375em + .1875rem) center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  margin-bottom: 1.25rem;
}
#tl-style-guide-mount .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
/* The bar's invalid field keeps the NEUTRAL brand input border and lets the icon
   do the signalling; MDB repaints it red, which is a second signal saying the
   same thing louder. */
#tl-style-guide-mount .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  border-color: var(--InputBorderColor);
  padding-right: calc(1.5em + .75rem);
}

/* ── 5. SWITCHES — THEY WERE display:none, NOT MIS-STYLED ───────────────────
   Craig: "Default switch and all switches are not right."

   Measured on Colorado Lamb: all four inputs computed display:none,
   getBoundingClientRect 0x0, offsetParent null. There were no switches on the
   page at all — four bare labels. t_tlc-styles.css
   `.form-check input[type=checkbox]:not(:checked){display:none!important}`
   (0,3,1) beats the guide's own `.sg-page .form-check.form-switch
   input.form-check-input` (0,4,1) only because that rule never declares
   `display`, so there was nothing to beat.

   ONE DECLARATION IS THE WHOLE FIX. Everything else in the .sg-page block above
   already wins and already renders correctly once the control is visible, so
   this deliberately does NOT restate it — a second full switch definition is
   how two copies drift.

   SPECIFICITY IS CHOSEN, NOT INCIDENTAL: (1,3,1) sits below the dark/mix rules
   at #page-guide.onDrk ... (1,4,1) further up this sheet, so onDrk and onMix
   still win their track and thumb colors. */
#tl-style-guide-mount .form-check.form-switch input.form-check-input {
  display: block !important;
}

/* ── 6. FILE INPUT — THE PLUGIN CENTRES ITS MESSAGE BY HAND ─────────────────
   Craig: "choose file looks odd."

   #sg-file itself is CORRECT on both stacks — its ::file-selector-button matches
   the bar on background, ink, border, weight, radius and cursor. The odd one is
   the drag-and-drop card: mdb-file-upload.css positions .file-upload-message
   with top:50px + translateY(-50%) instead of letting the card's own flex
   centering do it, which lands the cloud 30.5px high, and the legacy .onLt rule
   repaints the glyph #777 where the bar has it light grey.

   #ccc is the vendor's own value, mirrored rather than invented; --flexwhite5
   resolves identically on both sites, so the caption is token-correct. */
#tl-style-guide-mount .file-upload-wrapper .input-group,
#tl-style-guide-mount .file-upload-wrapper .card.card-body {
  border-radius: 15px;
}
#tl-style-guide-mount .file-upload-wrapper .input-group { overflow: hidden; }
#tl-style-guide-mount .file-upload-wrapper .card.card-body .file-upload-message {
  position: relative;
  top: auto;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
#tl-style-guide-mount .file-upload-wrapper .card.card-body,
#tl-style-guide-mount .file-upload-wrapper .card.card-body .file-upload-message {
  color: #ccc;
}
#tl-style-guide-mount .file-upload-wrapper .card.card-body .file-upload-message p {
  color: var(--flexwhite5);
  font-weight: 400;
}

/* ── 7. LABELS AND SUB-HEADINGS — LEADING, AND TWO TOKENS THAT LOSE ─────────
   Craig: "why is all the fonts and headers gray? These should be color1."

   Answered honestly, because it splits in two and only half of it is a defect.

   THE HEADERS AND LABELS ARE A REAL DEFECT. The bar paints .tag-sm.caps in its
   brand tag color and .form-label in --LabelTagColor; on the legacy stack both
   fall to grey. .tag-sm loses because the site's own .tag-* rule (0,1,0) is
   beaten by t_tlc-styles.css `.onLt span` (0,1,1), whose var(--onLt_color3) does
   not resolve — an undeclared custom property makes the declaration invalid at
   computed-value time, so the color is thrown away and the element inherits
   grey instead. .form-label loses to mdb-ui-kit's own .form-label rule.

   .tag-sm takes --color1 rather than --ContentTagColor on purpose: those two are
   the SAME VALUE on the bar (#0079c1 both), so this is a no-op there — but on
   Colorado Lamb --ContentTagColor resolves to rgba(0,0,0,0.3), which is grey.
   Matching the bar's mechanism would have left Craig's headers grey; matching
   its INTENT gives each site its own brand. .form-label keeps --LabelTagColor
   because on the bar that is --color2 (#00509f) and swapping it to --color1
   would repaint the reference. On Colorado Lamb --LabelTagColor IS its --color1.

   THE SMALL KEYS ARE NOT A DEFECT and are deliberately left alone. .sg-spec-k
   is rgba(0,0,0,.4) on the BAR too, from --txt-m — and lines 77-86 of this file
   record Craig's own 2026-08-24 decision to introduce --txt-s/--txt-m precisely
   so that column would read. Turning it brand-colored is a NEW design call that
   would repaint TurnerLee as well, so it is his to make, not one to assume.
   Pinning them here is a drift guard: the .onLt hijack currently lands on the
   right value by luck.

   THE LEADING IS ONE LINE AND IT FIXES FIVE ELEMENTS. The bar inherits a UNITLESS
   1.3 at the mount; the legacy stack inherits an ABSOLUTE 28px, so a 12px label
   and a 17px one both get a 28px line box. */
#tl-style-guide-mount { line-height: 1.3; }
/* THE SMALL KEYS ARE A CM SETTING, and Craig named where it lives: ID Styles -
   Color carries the whole tag family — SectionTagColor / LabelTagColor /
   ContentTagColor — and .sg-spec-k is a CONTENT tag. It was reading --txt-m, a
   token local to this stylesheet that no site can reach, which is why the answer
   looked hard-coded when it never should have been.

   MEASURED 2026-08-30. TurnerLee stores ContentTagColor #0079c1, which is its own
   --color1. ColoradoLamb stores rgba(0,0,0,0.3). So the grey Craig is looking at
   is a value on HIS OWN site, one field in the admin, not a decision in here.

   THIS DOES CHANGE THE BAR, deliberately, and it is what he asked for: TurnerLee's
   keys go from rgba(0,0,0,.4) to #0079c1 — "these should be color1". Each site now
   shows what its own setting says. --txt-m remains the fallback so a site that
   never set the property keeps the reading Craig chose on 2026-08-24. */
#tl-style-guide-mount .sg-spec-k { color: var(--ContentTagColor, var(--txt-m)); }
#tl-style-guide-mount .sg-spec-v { color: var(--txt-s); }
#tl-style-guide-mount .sg-section .tag-sm { color: var(--color1); }
#tl-style-guide-mount .form-label {
  color: var(--LabelTagColor);
  text-transform: var(--TagTextTransform, uppercase);
  font-size: 85%;
}

/* ── 8. FLEXWHITE CONTEXT FLIP — PORTED VERBATIM FROM sst-styles.css ────────
   SOURCE: Spartan_www/TurnerLee/shared/core/v1/sst-styles.css, md5
   18b38c5c30306a69f94f6bce3937fc98, lines 3251-3275. Declarations are
   BYTE-IDENTICAL. The only change is the #tl-style-guide-mount prefix on each
   selector, declared here: this sheet loads on /ops/style-guide only, but the
   ops chrome and the host page carry .onDrk/.onMix of their own, and Colorado
   Lamb's custom-cm-brand-tail.html has a whole neutraliser block whose job is to
   stop context rules reaching those elements. Scoping to the mount keeps this
   inside the guide, where it is the documented behavior.

   WHY IT HAD TO MOVE. --flexwhite01..09 / --flexwhite1..9 are set ONCE at :root
   by the Treepl snippet; sst-styles.css makes them context-aware. Only the SST
   stack loads that file. Measured 2026-08-30, #page-guide with .onDrk applied:

     --flexwhite07   turnerlee.com rgba(255,255,255,0.07)
                     cololamb.com  rgba(0,0,0,0.07)     <- never flipped
     #sg-textarea bg turnerlee.com rgba(255,255,255,0.07)
                     cololamb.com  rgba(0,0,0,0.07)     <- black tint on a dark canvas

   style-guide.css:1616 and :1626 paint every input, textarea and select on
   dark/mix from --flexwhite07 and --flexwhite4, so on a legacy-stack site every
   field on the ON DARK and ON MIX tabs went nearly invisible — six use sites in
   this file, not just the textarea. No-op on the bar, which already has this
   block from sst-styles.css at the same values.
   ─────────────────────────────────────────────────────────────────────────── */
#tl-style-guide-mount .onLt {
  --flexwhiteraw: 0,0,0;
  --flexwhite01: rgba(0,0,0,0.01); --flexwhite02: rgba(0,0,0,0.02);
  --flexwhite03: rgba(0,0,0,0.03); --flexwhite04: rgba(0,0,0,0.04);
  --flexwhite05: rgba(0,0,0,0.05); --flexwhite06: rgba(0,0,0,0.06);
  --flexwhite07: rgba(0,0,0,0.07); --flexwhite08: rgba(0,0,0,0.08);
  --flexwhite09: rgba(0,0,0,0.09);
  --flexwhite1: rgba(0,0,0,0.1); --flexwhite2: rgba(0,0,0,0.2);
  --flexwhite3: rgba(0,0,0,0.3); --flexwhite4: rgba(0,0,0,0.4);
  --flexwhite5: rgba(0,0,0,0.5); --flexwhite6: rgba(0,0,0,0.6);
  --flexwhite7: rgba(0,0,0,0.7); --flexwhite8: rgba(0,0,0,0.8);
  --flexwhite9: rgba(0,0,0,0.9);
}
#tl-style-guide-mount .onDrk,
#tl-style-guide-mount .onMix {
  --flexwhiteraw: 255,255,255;
  --flexwhite01: rgba(255,255,255,0.01); --flexwhite02: rgba(255,255,255,0.02);
  --flexwhite03: rgba(255,255,255,0.03); --flexwhite04: rgba(255,255,255,0.04);
  --flexwhite05: rgba(255,255,255,0.05); --flexwhite06: rgba(255,255,255,0.06);
  --flexwhite07: rgba(255,255,255,0.07); --flexwhite08: rgba(255,255,255,0.08);
  --flexwhite09: rgba(255,255,255,0.09);
  --flexwhite1: rgba(255,255,255,0.1); --flexwhite2: rgba(255,255,255,0.2);
  --flexwhite3: rgba(255,255,255,0.3); --flexwhite4: rgba(255,255,255,0.4);
  --flexwhite5: rgba(255,255,255,0.5); --flexwhite6: rgba(255,255,255,0.6);
  --flexwhite7: rgba(255,255,255,0.7); --flexwhite8: rgba(255,255,255,0.8);
  --flexwhite9: rgba(255,255,255,0.9);
}

/* ── 9. THE VEIL FOLLOWS THE CONTEXT ────────────────────────────────────────
   §1 made the textarea scroll-veil track the field instead of a hard-coded
   white, and that was right in the LIGHT context and still wrong in the other
   two — on both sites, the reference one included.

   MEASURED 2026-08-30, turnerlee.com, clicking the real BG pills rather than
   toggling the class (the canvas is painted by JS on a tab switch, so a
   synthetic toggle does not reproduce it):

     context   canvas (html/body)   .sg-form-group        #sg-textarea
     On Light   rgb(252,252,252)    transparent           rgb(255,255,255)
     On Dark    rgb(34,34,34)       rgba(255,255,255,.04) rgba(255,255,255,.07)
     On Mix     rgb(51,51,51)       rgba(255,255,255,.04) rgba(255,255,255,.4)

   and the veil stayed white-over-252 in all three. So what sits behind the first
   line of text on dark is THREE layers — the field's tint, the panel's tint, and
   the canvas — and the veil has to be the same stack or it cannot match.

   --sg-canvas is published by setBg() in style-guide.js, which is the one place
   that already knows the exact stage color for each context. Nothing is guessed
   here and no hex is repeated: the tints below are the very tokens
   style-guide.css:1616 and :1626 use to paint the field, and the panel tint is
   the value at :1657. Change the field there and the veil follows.

   --fl-veil-mid defaults to transparent, so the light context is untouched and
   this whole block is inert on any page that never switches context. */
#tl-style-guide-mount .form-floating:has(> textarea.form-control)::before {
  background:
    linear-gradient(to bottom,
      var(--fl-veil-tint, var(--InputBgColor, transparent)) 0,
      var(--fl-veil-tint, var(--InputBgColor, transparent)) 76%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--fl-veil-mid, transparent) 0,
      var(--fl-veil-mid, transparent) 76%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--fl-veil, var(--sg-canvas, var(--PageBgColor, #fff))) 0,
      var(--fl-veil, var(--sg-canvas, var(--PageBgColor, #fff))) 76%,
      transparent 100%);
}
#tl-style-guide-mount .onDrk {
  --fl-veil-tint: var(--flexwhite07, rgba(255,255,255,0.07));
  --fl-veil-mid: rgba(255,255,255,0.04);
}
#tl-style-guide-mount .onMix {
  --fl-veil-tint: var(--flexwhite4, rgba(255,255,255,0.40));
  --fl-veil-mid: rgba(255,255,255,0.04);
}


/* ── 10. .tlc-shortcut — PORTED VERBATIM FROM sst-styles.css ────────────────
   Craig: "icons did not come thru, showing black circles."

   SOURCE: Spartan_www/TurnerLee/shared/core/v1/sst-styles.css, md5
   18b38c5c30306a69f94f6bce3937fc98, the whole .tlc-shortcut block. Declarations
   byte-identical; the only change is a #tl-style-guide-mount prefix per selector.

   MEASURED on cololamb.com — section 13, ::before of each variant:
     tlc-shortcut-plus      mask-image none   background rgb(65,64,66)  -> a black disc
     tlc-shortcut-save      mask-image none   background rgb(65,64,66)  -> a black disc
     tlc-shortcut-restore   mask-image none   background rgb(65,64,66)  -> a black disc
     tlc-shortcut-nextday   mask-image none   background rgb(65,64,66)  -> a black disc
     tlc-shortcut-dots      mask-image none   background rgb(65,64,66)  -> a black disc
     tlc-shortcut-times     mask-image url(.../times-circle-regular.svg)  -> correct
   Six of seven had NO MASK, so the ink painted the whole 31px box and the section
   read as a row of black circles. The art was never the problem: every asset
   answers HTTP 200 and `times` proves the mechanism works.

   CAUSE: the component is declared ONLY in sst-styles.css, which the legacy stack
   does not load. `times` survived because style-guide.css already carried its own
   copy of that one variant. Same class of gap as the flexwhite flip in §8.
   ─────────────────────────────────────────────────────────────────────────── */
#tl-style-guide-mount .tlc-shortcut {
  --tlc-shortcut-size: 31px;
  --tlc-shortcut-ink: #414042;
  --tlc-shortcut-tint: transparent;
  --tlc-shortcut-art: none;
  --tlc-shortcut-art-hover: none;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tlc-shortcut-size);
  height: var(--tlc-shortcut-size);
  padding: 0;
  border: 0;                 /* the ring is IN the art — a CSS border doubles it */
  border-radius: 50%;
  background: var(--tlc-shortcut-tint);
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}
#tl-style-guide-mount .tlc-shortcut::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: none;           /* beats an inherited centring transform */
  background: var(--tlc-shortcut-ink);
  -webkit-mask: var(--tlc-shortcut-art) center / 100% 100% no-repeat;
          mask: var(--tlc-shortcut-art) center / 100% 100% no-repeat;
}
#tl-style-guide-mount .tlc-shortcut::after { content: none; display: none; }
#tl-style-guide-mount .tlc-shortcut:hover {
  background: var(--tlc-shortcut-art-hover) center / 100% 100% no-repeat;
}
#tl-style-guide-mount .tlc-shortcut:hover::before { content: none; display: none; }
#tl-style-guide-mount .tlc-shortcut:focus-visible {
  outline: 2px solid var(--tlc-shortcut-ink);
  outline-offset: 2px;
}
#tl-style-guide-mount .tlc-shortcut:disabled,
#tl-style-guide-mount .tlc-shortcut.is-disabled { opacity: .4; pointer-events: none; }

/* Small — the size the sub-task and website-link rows use. */
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-sm { --tlc-shortcut-size: 20px; }

/* ---- the set ---- */
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-times {
  --tlc-shortcut-ink: #FF0029;
  --tlc-shortcut-tint: #FBE0E4;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/times-circle-regular.svg');
  --tlc-shortcut-art-hover: url('https://turnerlee.com/img/schedule/times-circle-fill-red.svg');
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-plus {
  --tlc-shortcut-ink: #00C137;
  --tlc-shortcut-tint: #DFF7E4;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/circle-plus.svg');
  --tlc-shortcut-art-hover: url('https://turnerlee.com/img/schedule/circle-plus-fill-green.svg');
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-save {
  --tlc-shortcut-ink: #00C137;
  --tlc-shortcut-tint: #DFF7E4;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/circle-save.svg');
  --tlc-shortcut-art-hover: url('https://turnerlee.com/img/schedule/circle-save-fill-green.svg');
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-restore {
  --tlc-shortcut-ink: #0079C1;
  --tlc-shortcut-tint: #DCEEFB;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/circle-restore.svg');
  --tlc-shortcut-art-hover: url('https://turnerlee.com/img/schedule/circle-restore-fill-blue.svg');
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-nextday {
  --tlc-shortcut-ink: #0079C1;
  --tlc-shortcut-tint: #DCEEFB;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/circle-nextday.svg');
  --tlc-shortcut-art-hover: url('https://turnerlee.com/img/schedule/circle-nextday-fill-blue.svg');
}
/* Dots has no filled twin — it is a menu opener, not an action, and the
   Schedule darkens it rather than filling it. */
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-dots {
  --tlc-shortcut-ink: #C3C8D1;
  --tlc-shortcut-art: url('https://turnerlee.com/img/schedule/circle-dots.svg');
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-dots:hover { background: var(--tlc-shortcut-tint); }
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-dots:hover::before {
  content: '';
  display: block;
  background: #414042;
}
/* Check is a STATE BADGE, not a button: circle-check-custom.svg carries its own
   #00C137 and a transparent interior, so it is drawn as a background over the
   pale disc rather than masked. No hover.

   EVERY PER-MARK RULE IN THIS BLOCK IS `.tlc-shortcut.tlc-shortcut-X`, NOT
   `.tlc-shortcut-X`, and that is load-bearing. board-alert.css ships its own
   standalone `.tlc-shortcut` base so the alert engine works without this sheet —
   same single-class specificity, so whichever file loaded last won. On the style
   guide that is board-alert.css, and `check` came out an empty pale disc because
   the base's flat `background:var(--tlc-shortcut-tint)` replaced the artwork.
   Two classes here means this sheet owns the marks wherever it is loaded. */
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-check {
  --tlc-shortcut-tint: #EAF8EF;
  background:
    url('https://turnerlee.com/img/schedule/circle-check-custom.svg') center / 100% 100% no-repeat,
    var(--tlc-shortcut-tint);
  cursor: default;
}
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-check::before { content: none; display: none; }
#tl-style-guide-mount .tlc-shortcut.tlc-shortcut-check:hover { background:
    url('https://turnerlee.com/img/schedule/circle-check-custom.svg') center / 100% 100% no-repeat,
    var(--tlc-shortcut-tint); }

/* ── 11. COLOR BUTTONS — THE SITE SHEET HARD-CODES TWO OF THEM BLUE ─────────
   Craig: "btn-yellow is not correct."

   MEASURED, sg-winner-diff, cololamb.com vs turnerlee.com:
     .btn.btn-yellow  REF rgb(255,215,0)   TEST rgb(0,0,255)
     .btn.btn-red     REF rgb(230,0,0)     TEST rgb(0,0,255)
     .btn.btn-green   REF rgb(25,135,84)   TEST rgb(0,181,43)
   Winner on TEST for all three: `.btn-yellow, .btn-yellow:not([disabled]),
   .show > .btn-yellow.dropdown-toggle, .btn.btn-yellow, .btn-yellow.focus
   !important` and its red/green twins, in t_tlc-styles.css.

   A button named YELLOW and a button named RED both painting pure #0000FF is a
   corrupt value in that site's generated sheet, not a brand decision — nobody
   picks blue for both. .btn-orange and .btn-blue already match and are left alone.

   The guide is the reference a reader copies from, so inside the mount these are
   pinned to what the bar renders. Values are the SST expressions with the bar's
   own computed value as the literal fallback, so a site that later declares the
   token correctly follows it. !important because the rule being beaten has it.
   NO-OP ON THE BAR: it already computes exactly these.

   NOT FIXED HERE, and it is the wider gap: shared/core/v1/bs-theme.css declares
   --bs-warning #ffd700 / --bs-danger #e60000 / --bs-success #00b52b and the legacy
   stack never loads it, so those tokens fall back to stock Bootstrap everywhere
   else on those sites too. That is a site-stack question, not a guide question. */
#tl-style-guide-mount .btn.btn-yellow,
#tl-style-guide-mount .btn-yellow:not([disabled]) {
  background-color: var(--bs-warning, #ffd700) !important;
}
#tl-style-guide-mount .btn.btn-red,
#tl-style-guide-mount .btn-red:not([disabled]) {
  background-color: var(--bs-danger, #e60000) !important;
}
#tl-style-guide-mount .btn.btn-green,
#tl-style-guide-mount .btn-green:not([disabled]) {
  background-color: #198754 !important;
}

/* ── 12. TOGGLE GROUP OFF-STATE IS A TOKEN THE SITE ALREADY HAS ─────────────
   Craig: "group-buttons are not color1 and color1-xd."

   §3 shipped --tg-off as color-mix(in srgb, var(--tgb), black 38%) — the SST's own
   fallback, and a computed approximation of a color the brand pipeline already
   publishes. Measured on cololamb.com: --color1 #1d2a57, --color1xd #121c3d, while
   --tg-off resolved to the color-mix. On turnerlee.com --color1xd is #0067a4.

   So the off state now takes --color1xd first and keeps the color-mix only as the
   fallback for a site that does not publish it. The checked segment stays --color1,
   which is what it already was. */
#tl-style-guide-mount .btn-toggle-group {
  --tg-off: var(--ToggleGroupOffColor, var(--color1xd, color-mix(in srgb, var(--tgb), black 38%)));
}

/* ── 13. BOOTSTRAP SEMANTIC TOKENS — PORTED VERBATIM FROM bs-theme.css ──────
   SOURCE: Spartan_www/TurnerLee/shared/core/v1/bs-theme.css, md5
   89b9c5acbc903082899ea33d0910c9cc — the whole :root block, six declarations,
   byte-identical. Only change: scoped to the mount.

   bs-theme.css is loaded by the SST stack and by nothing else, so on every legacy
   site --bs-success / --bs-danger / --bs-warning fall back to stock Bootstrap.
   Measured: --bs-warning turnerlee.com #ffd700, cololamb.com #ffc107. That is why
   §11's .btn-yellow came back amber rather than the bar's gold after its blue was
   fixed. With the tokens present it resolves identically on both.

   THE COMMENT IN bs-theme.css IS LOAD-BEARING AND IS REPEATED HERE because this
   copy is the one a legacy site actually reads. Two families, Craig 2026-08-20:
     ACCESSIBLE (named), public pages — .btn-green #198754 white 4.53 PASS
       (Bootstrap's $success, NOT the token) · .btn-yellow #ffd700 dark 11.34 PASS
       · .btn-red #e60000 white 4.81 PASS
     BRIGHT (semantic), ops / portal / secure-zone only — .btn-success
       var(--bs-success) 2.75 deliberate · .btn-warning var(--bs-warning) 1.40
       deliberate · .btn-danger var(--bs-danger) 4.81 PASS
   Do not point .btn-green at --bs-success; the split is the feature. Do not flip
   .btn-success / .btn-warning to dark ink. Do not "fix" .btn-yellow to white ink —
   dark ink is why that class exists, and §11 above keeps it. */
#tl-style-guide-mount {
  --bs-success: #00b52b;
  --bs-success-rgb: 0, 181, 43;
  --bs-danger: #e60000;
  --bs-danger-rgb: 230, 0, 0;
  --bs-warning: #ffd700;
  --bs-warning-rgb: 255, 215, 0;
}

/* ── 14. THE .onLt HIJACK — RE-ASSERT SST COMPONENT INK AT MOUNT SPECIFICITY ─
   Craig: "icons are gold not white and circle-check not white outline or check",
   "gold eyebrow instead of white", "bunch of gold instead of white".

   ONE RULE CAUSES ALL OF IT, and it is the same one that grayed .sg-spec-k and
   .tag-sm earlier tonight. t_tlc-styles.css ships

     .onLt, .onLt div, .onLt span, .onLt p { color: var(--onLt_color3) }

   at (0,1,1). EVERY SST component sets its ink with a single class — .odc-head,
   .odc-foot, .egc-*, .tlp-*, .tlc-card — which is (0,1,0) and LOSES. The guide
   renders inside div#page-guide.page.active.onLt, so on any legacy-stack site the
   hijack reaches every div, span and p in every component. The bar never loads
   t_tlc-styles.css, so nothing there is affected and the fault is invisible from it.

   MEASURED, Cards tab, .odc-card:
     .odc-head        REF rgb(255,255,255)  TEST rgb(77,77,77)
     .odc-head-icon   REF rgb(255,255,255)  TEST rgb(77,77,77)
     .odc-ribbon      REF rgb(126,128,129)  TEST rgb(77,77,77)
     .odc-foot        REF rgb(255,255,255)  TEST rgb(77,77,77)
   winner on TEST for all four: `.onLt, .onLt div, .onLt span, .onLt p`
   winner on REF: the component's own rule in ops-dashboard.css.
   THE ICONS ARE currentColor SVGs, so #4d4d4d on the navy head is what reads as
   the muddy gold Craig is describing — the icons have no fill of their own.

   THE REPAIR IS NOT A NEW COLOR. Every rule below was EXTRACTED VERBATIM from the
   SST sources and re-emitted with a #tl-style-guide-mount prefix, which takes it to
   (1,1,x) and past the hijack. Values, tokens and selector text are unchanged, so
   this is a no-op on the bar by construction — it restates what already wins there.
   Sources: shared/ops/v2/ops-dashboard.css · shared/cards/v1/estimate-card.css ·
   shared/profile/v1/profile-glass.css · shared/cards/v1/tlc-card.css.

   NOT a general cure. `.onLt div` still out-specifies any single-class rule in any
   component added later, and the real exit is for that selector to stop existing —
   it is a site-sheet rule, not a guide one. Until then, a new component documented
   in this guide needs its ink restated here too.
   ─────────────────────────────────────────────────────────────────────────── */
#tl-style-guide-mount .odc-card,
#tl-style-guide-mount a.odc-card:link,
#tl-style-guide-mount a.odc-card:visited {
  color: var(--odc-ink);
}
#tl-style-guide-mount .odc-head {
  color: #fff;
}
#tl-style-guide-mount .odc-head-icon {
  color: #fff;
}
#tl-style-guide-mount .odc-ribbon {
  color: var(--odc-quiet);
}
#tl-style-guide-mount .odc-title {
  color: var(--odc-ink);
}
#tl-style-guide-mount .odc-eyebrow {
  color: var(--odc-quiet);
}
#tl-style-guide-mount .odc-desc {
  color: var(--odc-ink);
}
#tl-style-guide-mount .odc-notes {
  color: var(--odc-note);
}
#tl-style-guide-mount .odc-link {
  color: var(--color1);
}
#tl-style-guide-mount .odc-pill {
  color: var(--st-success);
}
#tl-style-guide-mount .odc-pill.is-request {
  color: var(--st-request);
}
#tl-style-guide-mount .odc-pill.is-complete {
  color: var(--st-complete);
}
#tl-style-guide-mount .odc-pill.is-edit {
  color: var(--st-edit-ink);
}
#tl-style-guide-mount .odc-foot {
  color: #fff;
}
#tl-style-guide-mount .odc-badge {
  color: #fff;
}
#tl-style-guide-mount .odc-card.is-disabled .odc-foot {
  color: var(--odc-quiet);
}
#tl-style-guide-mount .odc-card.is-disabled .odc-head {
  color: var(--odc-quiet);
}
#tl-style-guide-mount .odc-card.is-todo .odc-foot {
  color: var(--odc-quiet);
}
#tl-style-guide-mount .egc-head-icon {
  color: rgba(110, 82, 52, .20);
}
#tl-style-guide-mount .egc-est-bar {
  color: #fff;
}
#tl-style-guide-mount .egc-title {
  color: rgb(var(--color1raw));
}
#tl-style-guide-mount .egc-desc {
  color: var(--egc-muted);
}
#tl-style-guide-mount .egc-section-label {
  color: var(--egc-label);
}
#tl-style-guide-mount .egc-empty-note {
  color: var(--egc-label);
}
#tl-style-guide-mount .egc-check {
  color: var(--egc-gray-check);
}
#tl-style-guide-mount .egc-item.selected .egc-check {
  color: rgb(var(--color1raw));
}
#tl-style-guide-mount .egc-item-name {
  color: var(--egc-ink);
}
#tl-style-guide-mount .egc-opt-tag {
  color: #fff;
}
#tl-style-guide-mount .egc-item-price {
  color: var(--egc-stat);
}
#tl-style-guide-mount .egc-item-price.tbd {
  color: var(--egc-label);
}
#tl-style-guide-mount .egc-item-orig {
  color: var(--egc-label, #9a948a);
}
#tl-style-guide-mount .egc-item-link {
  color: #fff !important;
}
#tl-style-guide-mount .egc-item-link svg.svg-inline--fa,
#tl-style-guide-mount .egc-item-link i {
  color: #fff !important;
}
#tl-style-guide-mount .egc-card:hover .egc-details-bar .btn.btn-color1,
#tl-style-guide-mount .egc-card:focus-within .egc-details-bar .btn.btn-color1 {
  color: var(--PrimaryButtonTextHoverColor) !important;
}
#tl-style-guide-mount .egc-est-label {
  color: var(--egc-label);
}
#tl-style-guide-mount .egc-est-total {
  color: rgb(var(--color1raw));
}
#tl-style-guide-mount .egc-est-mo {
  color: #9aa3ab;
}
#tl-style-guide-mount .egc-bigcheck {
  color: var(--egc-gray-check);
}
#tl-style-guide-mount .egc-card.all-included .egc-bigcheck {
  color: rgb(var(--color1raw));
}
#tl-style-guide-mount .tlp-photo-ph i,
#tl-style-guide-mount .tlp-photo-ph svg.svg-inline--fa {
  color: #fff;
}
#tl-style-guide-mount .tlp-org-logo-ph i,
#tl-style-guide-mount .tlp-org-logo-ph svg.svg-inline--fa {
  color: rgba(255, 255, 255, 0.3);
}
#tl-style-guide-mount .tlp-stage.tlp-list ul.pagination a,
#tl-style-guide-mount .tlp-stage.tlp-list ul.pagination span {
  color: #fff;
}
#tl-style-guide-mount .tlc-card-banner-ph i,
#tl-style-guide-mount .tlc-card-banner-ph svg.svg-inline--fa {
  color: rgba(var(--color1raw), 0.32);
}
#tl-style-guide-mount .tlc-card-title {
  color: rgb(var(--color1raw));
}
#tl-style-guide-mount .tlc-card-sub {
  color: var(--gray6);
}
#tl-style-guide-mount .tlc-card-label {
  color: var(--gray5);
}
#tl-style-guide-mount .eg-foot-flex .tlc-card-label {
  color: var(--gray5, #9a9a9a);
}

/* Same hijack, the modal components. .egs-head is white-on-#ff7800 and
   .egs-head h3 is (0,1,1) — an exact specificity TIE with .onLt div, so source
   order alone decided it and the site sheet won. White ink turned grey on an
   orange band is what reads as Craig's "gold eyebrow". Extracted verbatim from
   shared/modals/v1/* and shared/ops/v2/tracker-modal.css, prefix only. */
#tl-style-guide-mount .egs-head {
  color: #fff;
}
#tl-style-guide-mount .egs-head h3 {
  color: #fff;
}
#tl-style-guide-mount .egs-intro {
  color: #5f5952;
}
#tl-style-guide-mount .egs-label {
  color: #8a8378;
}
#tl-style-guide-mount .egs-cemail {
  color: #9a948a;
}
#tl-style-guide-mount .egs-temp-note {
  color: #8a8378;
}
#tl-style-guide-mount .egs-err {
  color: #c0392b;
}
#tl-style-guide-mount .egs-note {
  color: #9a948a;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .egs-head h3 {
  color: #fff;
}
#tl-style-guide-mount .tlcsi-card .egs-kicker {
  color: #fff;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-primary {
  color: var(--PrimaryButtonTextColor, #fff) !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-primary:hover,
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-primary:focus {
  color: var(--PrimaryButtonTextHoverColor, #fff) !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-primary:active {
  color: var(--PrimaryButtonTextActiveColor, #fff) !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-outline-primary {
  color: var(--PrimaryButtonColor, #0079c1) !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-outline-primary:hover,
#tl-style-guide-mount .tlcsi-card.egs-modal .btn.btn-outline-primary:focus {
  color: var(--PrimaryButtonTextColor, #fff) !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal {
  color: #222;
}
#tl-style-guide-mount .tlcsi-card.egs-modal input.form-control,
#tl-style-guide-mount .tlcsi-card.egs-modal input.form-control:focus {
  color: #222 !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .form-floating > label,
#tl-style-guide-mount .tlcsi-card.egs-modal .form-floating > .form-control:focus ~ label,
#tl-style-guide-mount .tlcsi-card.egs-modal .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: #6c757d !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal .form-check > label,
#tl-style-guide-mount .tlcsi-card.egs-modal .form-check-label {
  color: #222 !important;
}
#tl-style-guide-mount .tlcsi-card.egs-modal a,
#tl-style-guide-mount .tlcsi-card.egs-modal a:link,
#tl-style-guide-mount .tlcsi-card.egs-modal a:visited {
  color: var(--PrimaryButtonColor, #0079c1) !important;
}
#tl-style-guide-mount .egs-close {
  color: var(--tlc-modal-close-ink, var(--gray4, #9ca3af));
}
#tl-style-guide-mount .egs-close:hover,
#tl-style-guide-mount .egs-close:focus-visible {
  color: var(--tlc-modal-close-ink-hover, var(--gray8, #333333));
}

/* ── 15. HEADINGS TAKE THE BRAND HEADING TOKEN ─────────────────────────────
   Craig: "overall Style Guide has color3 font and headers. make sure the CMs are
   updated with color1 headers and font in the WEB CSS tab."

   THE CM IS ALREADY RIGHT — that is the finding. Measured on cololamb.com:
   --H1Color #1d2a57, --H2Color #c52040, --H3Color #1d2a57 at :root, at #page-guide
   AND at the h1 itself. The pipeline is delivering color1; something with higher
   specificity was painting rgb(119,119,119) over it, and the walker's attribution
   disagreed with the computed value, which on this stack means cross-origin MDB.

   So the repair is not a CM edit. It is to re-assert the heading rule at mount
   specificity, the same move as §14. The value is the token the site already
   publishes, so each site gets its own heading color and this is a no-op on the
   bar, which already computes rgb(0,121,193) from the same chain.

   THE FALLBACK CHAIN IS ORDERED --HnColor -> --hnColor -> --color1 because the two
   stacks disagree on CASE: sst-styles.css reads var(--h1Color) and t_tlc-styles.css
   reads var(--H1Color), and custom property names are case-SENSITIVE, so they are
   two different properties. Measured: --h1Color is UNSET at :root on ColoradoLamb
   and resolves only from #page-guide down. Reading both is what makes one rule work
   on both stacks. --color1 is the last resort, never the first.

   MEASURED after injection on cololamb.com: h1 rgb(29,42,87) · h2 rgb(197,32,64)
   · h3 rgb(29,42,87) · h5 rgb(29,42,87). h4 and h6 needed the site-side fix below. */
#tl-style-guide-mount h1, #tl-style-guide-mount .h1 { color: var(--H1Color, var(--h1Color, var(--color1))); }
#tl-style-guide-mount h2, #tl-style-guide-mount .h2 { color: var(--H2Color, var(--h2Color, var(--color1))); }
#tl-style-guide-mount h3, #tl-style-guide-mount .h3 { color: var(--H3Color, var(--h3Color, var(--color1))); }
#tl-style-guide-mount h4, #tl-style-guide-mount .h4 { color: var(--H4Color, var(--h4Color, var(--color1))); }
#tl-style-guide-mount h5, #tl-style-guide-mount .h5 { color: var(--H5Color, var(--h5Color, var(--color1))); }
#tl-style-guide-mount h6, #tl-style-guide-mount .h6 { color: var(--H6Color, var(--h6Color, var(--color1))); }

/* ── 16. THE DARK AND MIX CONTEXTS — UNFREEZE THE INK, INSIDE THE MOUNT ─────
   Measured 2026-08-31, real BG pills clicked, both sites:

     token / element         turnerlee.com  onLt / onDrk / onMix
                             cololamb.com   onLt / onDrk / onMix
     --FontColor             rgba(0,0,0,.85) / rgba(255,255,255,.92) / same
                             #777777 / #777777 / #777777        <- FROZEN
     --color1                #0079c1 / #00a0ff / #00a0ff
                             #1d2a57 / #1d2a57 / #1d2a57        <- FROZEN
     body p                  ok      / ok      / ok
                             #777 on #fcfcfc, on #222, on #333   2.82:1 on MIX
     .sg-spec-k / .hs-tag    #0079c1 / #00a0ff / #00a0ff
                             #1d2a57 on #222 = 1.15:1            invisible
     .sg-label chip bg       #0081ce / #00a0ff / #00a0ff
                             #1d2a57 on #222 = 1.15:1            invisible

   CAUSE: ColoradoLamb's custom-cm-brand-tail.html carries a documented context-class
   neutraliser that re-asserts :root inside .onLt/.onDrk/.onMix, and it pins both
   --FontColor and --color1. That block is LOAD-BEARING for the public site — its own
   header says remove it only deliberately, with Craig looking at the page — so it is
   not touched. It is beaten INSIDE the mount, where the guide is the only consumer.

   EVERY RULE BELOW IS A NO-OP ON THE BAR, and that is why these tokens were chosen
   over the obvious ones:
     --txt is what the guide's own JS sets per context, and on TurnerLee it already
       EQUALS --FontColor in all three. On ColoradoLamb --txt flips correctly while
       --FontColor does not, so pointing one at the other fixes three contexts at once.
     --fc1_onDark / --fc1_onMix are the brand's own answer to "what is color1 on this
       ground". On TurnerLee both resolve #00a0ff, which is exactly what --color1 and
       --ContentTagColor already compute there. On ColoradoLamb they resolve `white`.

   THE CHIP IS THE ONE THAT CANNOT USE THAT TOKEN, and it is worth stating because the
   obvious fix is wrong: .sg-label's text is rgba(255,255,255,.92) !important, so a
   background of --fc1_onDark on ColoradoLamb would be WHITE ON WHITE — less readable
   than the navy it replaced. So the chip takes a hook, --SgLabelDarkBg, which defaults
   to var(--color1) and therefore changes nothing anywhere. A site whose fc1_onDark is
   white sets it to something that carries white text; ColoradoLamb sets --color2 in its
   custom-ops-chrome.html, which is the red its own onLt chip already uses. */
#tl-style-guide-mount .onLt,
#tl-style-guide-mount .onDrk,
#tl-style-guide-mount .onMix { --FontColor: var(--txt); }

#tl-style-guide-mount .onDrk,
#tl-style-guide-mount .onMix {
  --ContentTagColor: var(--fc1_onDark, var(--color1));
  --SectionTagColor: var(--fc1_onDark, var(--color1));
}
#tl-style-guide-mount .onDrk .hs-row .hs-tag,
#tl-style-guide-mount .onMix .hs-row .hs-tag { color: var(--fc1_onDark, var(--color1)); }

#tl-style-guide-mount #page-guide.onDrk .sg-label,
#tl-style-guide-mount #page-guide.onMix .sg-label,
#tl-style-guide-mount [id^="page-"].onDrk .sg-label,
#tl-style-guide-mount [id^="page-"].onMix .sg-label {
  background: var(--SgLabelDarkBg, var(--color1, #fff)) !important;
}

/* ── 17. THE FONT LADDER — sst-fonts.css DOES NOT EXIST ON THE LEGACY STACK ──
   Measured 2026-08-31 06:20 MDT, turnerlee.com (REF) vs cololamb.com (TEST), the
   §1 Brand Fonts specimens:

     REF   font0-300 Open Sans/300/normal · 400 · 500 · 600 · 700 · 800, each with
           a real italic; .fontStyled Open Sans/900/italic, tracking normal
     TEST  ALL TWELVE font0-* nodes: OpenSans-Regular / 400 / normal. Identical.
           .fontStyled OpenSans-Regular / 400 / normal, tracking -0.8px

   Cause: the ladder lives in shared/core/v1/sst-fonts.css, which the five sst-hfnav
   sites load and the six legacy sites do not. ColoradoLamb's own fonts/_tlc-fonts.css
   carries NO `.font0*` and NO `.font6` at all, so the whole ladder matches nothing —
   the classes are on the elements and zero declarations apply, which is why it reads
   as "the specimens are all the same face" rather than as a missing stylesheet. It
   also glues `.fontStyled` to `.font4`:
       .font4, .fontStyled { font-family: var(--font4Family) !important;
                             letter-spacing: -0.05rem !important; }
   so the Font6 specimen shows the Font4 face and gains -0.8px of tracking. Masked
   today only because --font4Family and --font6Family hold the same string here; it
   shows the wrong face the moment ID Fonts Font6 is set to something else.

   PORTED VERBATIM from sst-fonts.css lines 94-114 and 141-145, mount-scoped. The
   !important is not a shortcut: the declaration that owns this component on the
   healthy stack already carries it, so a non-important port would lose on REF. All
   21 --fontNFamily/Weight/Style tokens are declared and non-empty on both stacks
   (measured), so no var() falls back to inherit. Family + weight + style ONLY —
   never the `font:` shorthand; sst-fonts.css records why (it re-sets font-size to
   100% !important and silently beats every size rule on the page).

   NOT PORTED, on purpose: .font1-.font5 stay family-only on the legacy stack, which
   is what that site's own sheet says. Only font0 and font6 have no rule at all. */
#tl-style-guide-mount .font0,
#tl-style-guide-mount .fontSystem {
  font-family: var(--font0Family) !important;
  font-weight: var(--font0Weight) !important;
  font-style: var(--font0Style) !important;
}
#tl-style-guide-mount .font0-300 { font-family: var(--font0Family) !important; font-weight: 300 !important; }
#tl-style-guide-mount .font0-400 { font-family: var(--font0Family) !important; font-weight: 400 !important; }
#tl-style-guide-mount .font0-500 { font-family: var(--font0Family) !important; font-weight: 500 !important; }
#tl-style-guide-mount .font0-600 { font-family: var(--font0Family) !important; font-weight: 600 !important; }
#tl-style-guide-mount .font0-700 { font-family: var(--font0Family) !important; font-weight: 700 !important; }
#tl-style-guide-mount .font0-800 { font-family: var(--font0Family) !important; font-weight: 800 !important; }
#tl-style-guide-mount .font0-italic  { font-style: italic !important; }
#tl-style-guide-mount .font0-upright { font-style: normal !important; }

#tl-style-guide-mount .font6,
#tl-style-guide-mount .fontStyled {
  font-family: var(--font6Family) !important;
  font-weight: var(--font6Weight) !important;
  font-style: var(--font6Style) !important;
}
/* THE GUARD IS LOAD-BEARING. An author !important beats an INLINE non-important
   declaration, so the unguarded form wiped the template's own
   style="letter-spacing:.04em" on the §1 alphabet row and moved REF from 0.7744px
   to normal in all three contexts. `.fontStyled` only, not `.font6` — that is the
   exact selector that measured 0 changed nodes on REF. */
#tl-style-guide-mount .fontStyled:not([style*="letter-spacing"]) { letter-spacing: normal !important; }

/* ── 18. §4 INLINE TEXT — THE HYPERLINK SWATCH READS AS PLAIN BODY COPY ──────
   Measured 2026-08-31 06:20 MDT: `#sg-demo-inlinetext a` computes rgb(0,80,159)
   on turnerlee (= --LinkColor #00509f) and rgba(0,0,0,.85) on cololamb — the same
   value as the paragraph around it, with text-decoration none on both, so the
   swatch that is supposed to demonstrate a link is indistinguishable from the text.

   Cause: `.onLt a:link, .onLt a { color: var(--onLt_color2l) }` in t_tlc-styles.css
   at (0,2,1). --onLt_color2l is UNDECLARED on both sites — and a var() whose name
   was never declared and that has no fallback is invalid at computed-value time, so
   `color` falls to INHERIT and the link takes the body ink. --LinkColor itself is
   healthy (#c52040 here) and is simply never reached. sst-styles.css has no `.onLt a`
   rule at all, which is why REF never showed this.

   (2,0,1) beats it without touching the site sheet. SCOPED TO THE §4 DEMO ONLY: the
   quick-links rail and the .odc-card demos are plain <a> inside the mount too, and
   they carry their own color by design. On REF `a` already computes --LinkColor per
   context, so this is a no-op there.

   THE SITE-WIDE CASE IS NOT FIXED HERE AND IS NOT MINE TO FIX: every `.onLt a` on
   all six legacy sites falls back to body ink the same way. Repointing that repaints
   live public pages, so it is Craig's call. */
#tl-style-guide-mount #sg-demo-inlinetext a,
#tl-style-guide-mount #sg-demo-inlinetext a:link,
#tl-style-guide-mount #sg-demo-inlinetext a:visited { color: var(--LinkColor); }