/* =========================================================================
   Color Library — Doomscroll Rehab Color Module
   Dark "color lab" theme: near-black ground, gallery serif titles,
   IBM Plex Mono for every code and control label. Mobile-first / responsive.
   ========================================================================= */

:root {
  /* Surfaces — "Brutalist Plate": neutral charcoal, very dark but not black */
  --bg:        #0b0c0e;
  --bg-grain:  #0d0e11;
  --panel:     #131418;
  --panel-2:   #16171b;   /* expanded HQX band, slightly distinct */
  /* Lines: visible mid-grey hairlines — brighter than the original muted
     tone, but dialed back from pure white (esp. the expanded view). */
  --line:      #54555f;
  --line-soft: #3f4049;

  /* Page + header background (one source of truth so the header matches the body) */
  --page-gradient: linear-gradient(to right, #1E2024 0%, #121111 100%);
  /* Floating-surface backgrounds (overridden in light mode) */
  --sticky-bg: #0c0d10;
  --selbar-bg: rgba(18, 18, 23, 0.92);
  --toast-bg:  #15161a;
  --pop-bg:    #1c1d23;   /* subtitle (Achtung) translation tooltip */

  /* Ink — every light/low-emphasis tier is pure white per request */
  --ink:       #ffffff;
  --ink-dim:   #ffffff;
  --ink-mute:  #ffffff;
  --ink-faint: #ffffff;

  /* Accent — acid lime; loud against the charcoal plate */
  --accent:    #c6f24a;
  --accent-dim:#5c6e23;
  --focus:     #c6f24a;
  --on-accent: #06120d;   /* ink that sits ON an accent fill */

  /* Type — heavy grotesque display + technical mono */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Archivo", system-ui, -apple-system, sans-serif;

  /* Metrics (clamped, never fixed — mobile-first) */
  --chip:      clamp(17px, 4.6vw, 20px);
  --chip-gap:  clamp(5px, 1.1vw, 8px);
  --crl-w:     clamp(150px, 42vw, 256px);
  --ctrl-w:    clamp(2.2rem, 7vw, 3rem);
  --ctrl-gap:  clamp(0.9rem, 2.8vw, 2rem);     /* space between Copy / Flag cols */
  --pad-x:     clamp(1.1rem, 4vw, 60px);       /* ~60px side gutters on desktop */
  --maxw:      1680px;
  --radius:    10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--page-gradient);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint film-grain / scanline atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

main, header, .lib-columns, .selbar { position: relative; z-index: 1; }

a { color: inherit; }
.muted { color: var(--ink-mute); }

.sr-live {
  position: fixed;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.5rem 0.9rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  z-index: 50;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */

/* Sticky header: keeps the column labels and the copy toast in view while
   the library scrolls underneath. */
.page-sticky {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--page-gradient);   /* matches the body; opaque, occludes the list scrolling under */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 28px var(--sticky-shadow, rgba(0, 0, 0, 0.45));
}

.page-head {
  position: relative;
  z-index: 20;            /* keep the subtitle tooltip + toast above the list */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.3rem, 3.2vw, 2rem) var(--pad-x) clamp(0.7rem, 1.4vw, 1rem);
  transition: padding 0.22s ease;
}
.page-head__title { position: relative; padding-right: 3.6rem; }   /* room for the theme toggle */

.kicker {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.55rem;
  line-height: 1.4;
  white-space: nowrap;          /* keep the breadcrumb on one line */
  overflow-x: auto;
}

.page-head h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 5.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
  color: var(--ink);
  transition: font-size 0.22s ease, margin 0.22s ease;
}

.page-head__sub {
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: clamp(0.78rem, 2vw, 0.88rem);
  margin: 0;
  max-height: 4em;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
}

/* ----- condensed (scrolled) header: vanish the Achtung line, shrink the
   title; the toast rides up under the title and stays inside the header ----- */
.page-sticky.is-condensed .page-head { padding-top: clamp(0.7rem, 2vw, 1rem); padding-bottom: clamp(0.45rem, 1.2vw, 0.65rem); }
.page-sticky.is-condensed .page-head h1 { font-size: clamp(1.25rem, 3.4vw, 1.9rem); margin-bottom: 0.15rem; }
.page-sticky.is-condensed .page-head__sub { max-height: 0; opacity: 0; margin-top: -0.15rem; pointer-events: none; }

.page-head__meta {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* ----- dark / light theme toggle (top-right of the header) ----- */
.theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 22;
  background: none;
  border: 0;
  padding: 0.2rem;
  cursor: pointer;
  line-height: 0;
}
.theme-toggle__track {
  position: relative;
  display: block;
  width: 3.2rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 0.22rem;
  width: 1.26rem;
  height: 1.26rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background 0.18s ease;
}
:root.light .theme-toggle__knob { transform: translate(1.5rem, -50%); }
.theme-toggle__icon { width: 0.82rem; height: 0.82rem; }
.theme-toggle__icon--sun { display: none; }
:root.light .theme-toggle__icon--moon { display: none; }
:root.light .theme-toggle__icon--sun { display: block; }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-toggle__track { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.theme-toggle:hover .theme-toggle__track { border-color: var(--accent-dim); }

/* Subheading translation tooltip (hover + keyboard focus) */
.i18n-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--ink-mute);
  outline: none;
}
.i18n-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 0.55rem);
  z-index: 30;
  width: max-content;
  max-width: min(90vw, 40ch);
  background: var(--pop-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow: 0 18px 48px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.i18n-tip:hover::after,
.i18n-tip:focus-visible::after,
.i18n-tip:focus::after { opacity: 1; transform: translateY(0); }

/* header sub-row: category filter pills on the left, column labels on the right */
.lib-columns {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 0.65rem;   /* divider is now on .page-sticky (full-width) */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* pills sit right, beside the column labels */
  gap: clamp(1.25rem, 4vw, 2.5rem);   /* space from Copy Collection — close but not cramped */
}
.cat-filter { justify-content: flex-end; }   /* pills pack toward the labels */
/* the two right-aligned labels stay grouped so they keep aligning over the
   per-row Copy / Flag controls below */
.lib-columns__labels {
  display: flex;
  gap: var(--ctrl-gap);
  flex: 0 0 auto;
}
.lib-columns__label {
  width: var(--ctrl-w);
  text-align: center;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.15;
}

/* ----- category filter pills (header, left of the column labels) ----- */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.cat-pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.cat-pill:hover,
.cat-pill:focus-visible {
  color: var(--ink);
  border-color: var(--accent-dim);
  outline: none;
}
.cat-pill:focus-visible { box-shadow: 0 0 0 2px var(--sticky-bg), 0 0 0 3px var(--focus); }
.cat-pill.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- library */

.library {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 2rem;
}

.library__status {
  color: var(--ink-mute);
  padding: 3rem 0;
  text-align: center;
}
.library__status--error { color: #ff9a8a; }

/* collapsible category sections */
.lib-section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.7rem, 4vw, 2.8rem) 0 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0.2rem;
}
.lib-section:first-child .lib-section-head { padding-top: clamp(0.8rem, 2vw, 1.4rem); }
.lib-section-head__title { margin: 0; line-height: 1; }
.lib-section-head__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.1rem 0.1rem 0.1rem 0;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.lib-section-head__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); border-radius: 5px; }
.lib-section-head__chevron {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(90deg);              /* expanded: point down */
  transition: transform 0.18s ease;
}
.lib-section.is-collapsed .lib-section-head__chevron { transform: rotate(0deg); }   /* collapsed: point right */
.lib-section.is-collapsed .lib-section__body { display: none; }
.lib-section-head__count {
  /* match the category name (serif, same size + tracking) but a thinner weight */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* empty / error states (calm, on-theme) */
.library__state {
  text-align: center;
  padding: clamp(3rem, 12vh, 7rem) 1rem;
}
.library__state-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.library__state-detail {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-mute);
}
.library__state--error .library__state-title { color: #ff9a8a; }

/* ----- entry ----- */

.entry {
  border-bottom: 1px solid var(--line-soft);
}

.entry__row {
  display: grid;
  grid-template-columns: clamp(1.5rem, 5vw, 2.4rem) minmax(0, 1fr) auto;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  align-items: start;
  padding: clamp(1.3rem, 3.5vw, 2rem) 0;
}

/* Copy / Flag grouped together so the gap between them is controllable and
   stays aligned with the two header column-labels above. */
.entry__controls,
.hqx__controls {
  display: flex;
  align-items: center;
  gap: var(--ctrl-gap);
  flex: 0 0 auto;
}
.entry__controls { padding-top: 0.1rem; }

.entry__num {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 0.05rem;
}

.entry__main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  gap: clamp(0.8rem, 2.5vw, 1.8rem);
  align-items: start;
}

.entry__heading { min-width: 0; }

.entry__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.metatags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.metatag {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* expand + chips share a flex line; arrow sits just left of the grid */
.entry__palette {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(0.4rem, 1.5vw, 0.7rem);
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(15, minmax(12px, 1fr));   /* dense 15-per-row wall; ~12px swatch floor */
  column-gap: calc(var(--chip-gap) + 4px);   /* +4px horizontal between swatches */
  row-gap: calc(var(--chip-gap) + 5px);      /* +5px between swatch rows */
  min-width: 0;
  flex: 1 1 auto;
  /* 15-col cap keeps chips from ballooning on wide screens */
  max-width: calc(32px * 15 + (var(--chip-gap) + 4px) * 14);
}

.chip {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.chip:hover,
.chip:focus-visible {
  transform: scale(1.16);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
  z-index: 2;
  outline: none;
}

/* ----- icon buttons & controls ----- */

.icon-btn {
  width: var(--ctrl-w);
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.icon-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover,
.icon-btn:focus-visible {
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
  outline: none;
}
.icon-btn:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--focus); }
.icon-btn.is-copied { color: var(--accent); border-color: var(--accent-dim); }

.expand-btn {
  font-family: var(--mono);
  font-size: 1.25rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.expand-btn:hover,
.expand-btn:focus-visible {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,0.03);
  outline: none;
}
.expand-btn:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--focus); }
.expand-btn__icon { display: inline-block; transition: transform 0.18s ease; }
.entry.is-open .expand-btn__icon { transform: rotate(90deg); }

/* flag checkbox (custom) */
.flag {
  width: var(--ctrl-w);
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.flag input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.flag__box {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.flag__box svg { width: 0.8rem; height: 0.8rem; opacity: 0; transform: scale(0.6); transition: opacity 0.12s ease, transform 0.12s ease; }
.flag input:checked + .flag__box { background: var(--accent); border-color: var(--accent); }
.flag input:checked + .flag__box svg { opacity: 1; transform: scale(1); }
.flag input:indeterminate + .flag__box { background: var(--accent-dim); border-color: var(--accent-dim); }
.flag input:indeterminate + .flag__box::after {
  content: "";
  width: 0.55rem; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.flag input:focus-visible + .flag__box { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--focus); }

/* ----- expanded HQX rows ----- */

.hqx-list {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: none;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.entry.is-open .hqx-list { display: block; }

.hqx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--crl-w) auto;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  align-items: center;
  /* No right padding: the copy/flag controls hug the panel's right edge so
     they line up under the entry-level Copy Collection / Flag columns. */
  padding: clamp(0.7rem, 1.8vw, 0.95rem) 0 clamp(0.7rem, 1.8vw, 0.95rem) clamp(0.9rem, 2.4vw, 1.4rem);
  border-top: 1px solid var(--line-soft);
}
.hqx:first-child { border-top: 0; }

.hqx__source {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.hqx__rank {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  flex: 0 0 auto;
}
.hqx__title { color: var(--ink-dim); text-decoration: none; overflow-wrap: anywhere; }
a.hqx__title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
a.hqx__title:hover { text-decoration-color: var(--accent); color: var(--ink); }

/* color ratio line */
.crl {
  display: flex;
  width: var(--crl-w);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--line-soft);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
.crl__seg {
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: filter 0.12s ease;
}
.crl__seg:hover,
.crl__seg:focus-visible {
  filter: brightness(1.18);
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85);
}

/* ---------------------------------------------------------------- tooltip */

.ctip {
  /* light "paper wash" palette, scoped so the white page vars don't bleed in */
  --paper:      #f4f0e6;
  --paper-ink:  #1d1b15;
  --paper-mute: #6c6557;
  --paper-line: rgba(0,0,0,0.16);
  position: fixed;
  z-index: 60;
  min-width: 280px;
  max-width: min(92vw, 360px);   /* wide enough for the Display-P3 code on one line */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%),
    var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30);
  pointer-events: none;        /* default; enabled when interactive (copy) */
  font-size: 0.74rem;
}
.ctip.is-interactive { pointer-events: auto; }
.ctip[hidden] { display: none; }

.ctip__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.ctip__swatch {
  width: 1.4rem; height: 1.4rem;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.22);
  flex: 0 0 auto;
}
.ctip__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--paper-ink);
  line-height: 1.1;
}

.ctip__codes { margin: 0; display: grid; gap: 0.22rem; }
.ctip__row { display: grid; grid-template-columns: 2.8rem 1fr; align-items: baseline; gap: 0.55rem; }
.ctip__row dt { color: var(--paper-mute); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ctip__row dd { margin: 0; color: var(--paper-ink); font-size: 0.72rem; overflow-wrap: anywhere; }
.ctip__row--web dd { display: flex; align-items: center; gap: 0.35rem; }
.ctip__row--web span { color: var(--paper-ink); }
.ctip__copy {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  color: var(--paper-mute);
  cursor: pointer;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ctip__copy svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ctip__copy:hover, .ctip__copy:focus-visible { color: #46570f; border-color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.05); outline: none; }
.ctip__copy.is-copied { color: #46570f; border-color: #46570f; }

/* ---------------------------------------------------------------- selbar */

.selbar {
  position: fixed;
  left: 50%;
  bottom: clamp(0.8rem, 3vw, 1.6rem);
  transform: translateX(-50%) translateY(0);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 1.6rem);
  background: var(--selbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6);
  z-index: 40;
  animation: selbar-in 0.22s ease;
}
.selbar[hidden] { display: none; }
@keyframes selbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.selbar__count { color: var(--accent); font-size: 0.78rem; white-space: nowrap; }
.selbar__sep { color: var(--ink-faint); }
.selbar__btn {
  font-family: var(--mono);
  font-size: 0.76rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.selbar__btn:hover, .selbar__btn:focus-visible { background: rgba(255,255,255,0.06); border-color: var(--accent-dim); outline: none; }
.selbar__btn:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--focus); }
.selbar__btn.is-copied { color: var(--accent); border-color: var(--accent-dim); }
.selbar__btn--ghost { color: var(--ink-mute); border-color: transparent; }
.selbar__btn--ghost:hover { color: var(--ink); }

/* ---------------------------------------------------------------- toast */

.toast-anchor { position: relative; height: 0; }
.toast {
  position: absolute;
  top: 0.55rem;
  left: 0;                       /* aligned left, just below the subtitle */
  transform: translateY(6px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--toast-bg);
  border: 1px solid var(--accent-dim);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  white-space: nowrap;
  max-width: min(90vw, 40ch);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.is-show { opacity: 1; transform: translateY(0); }
.toast__icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.page-foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem var(--pad-x) 5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------------- light mode
   Inverts the theme tokens. Color chips/CRL segments use data-driven inline
   colors, so they're unaffected. The swatch tooltip stays "paper" in both. */

:root.light {
  --bg:        #FFFBF5;
  --bg-grain:  #FBF7F0;
  --panel:     #FEFCF8;
  --panel-2:   #F6F1E8;   /* expanded HQX band — lightened, still a touch distinct */
  --line:      #c6c2b4;
  --line-soft: #d8d4c8;

  --page-gradient: linear-gradient(to right, #ffffff 0%, #F2F6FA 100%);
  --sticky-bg: #f5f2ea;   /* focus-ring backdrop (header now uses --page-gradient) */
  --sticky-shadow: rgba(0, 0, 0, 0.12);
  --selbar-bg: rgba(255, 251, 245, 0.92);
  --toast-bg:  #ffffff;
  --pop-bg:    #ffffff;

  --ink:       #1b1910;
  --ink-dim:   #322f24;
  /* text tiers are dark ink in light mode; only the 4 accent elements below stay colored */
  --ink-mute:  #322f24;
  --ink-faint: #4a4636;

  --accent:    #4f6610;
  --accent-dim:#a7c265;
  --focus:     #4f6610;
  --on-accent: #ffffff;
}

/* Green (accent-colored) text elements → blue in light mode. Scoped to text;
   accent fills (checkbox, toggle knob, skip link) stay green. */
/* The only text kept in the accent blue in light mode: eyebrow, category
   headings, category counts, and the #n HQX numbers. Everything else is dark. */
:root.light .kicker,
:root.light .lib-section-head__btn,
:root.light .lib-section-head__count,
:root.light .entry__num { color: #3E5EBA; }
:root.light .selbar__count { color: var(--ink); }

:root.light body {
  background: var(--page-gradient);
  background-attachment: fixed;
}
:root.light body::before {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
:root.light .chip { border-color: rgba(0,0,0,0.16); }
:root.light .metatag { background: rgba(0,0,0,0.03); }
:root.light .hqx-list { background: #fff; }   /* expanded HQX band → pure white */

/* ---------------------------------------------------------------- responsive */

@media (max-width: 760px) {
  .entry__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
  /* keep the 15-per-row wall on phones but let it use the full width */
  .chip-grid { max-width: 100%; }
  /* swatch-forward: the text labels give way, the swatches keep their size */
  .entry__title { font-size: clamp(1rem, 3.6vw, 1.25rem); margin-bottom: 0.4rem; }
  .metatag { font-size: 0.6rem; padding: 0.12rem 0.42rem; }
}

/* expanded rows: on narrow screens the source title needs its own line so it
   doesn't get crushed into a mid-word-breaking sliver next to the CRL. */
@media (max-width: 560px) {
  .hqx {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "source   source"
      "crl      controls";
    row-gap: 0.7rem;
  }
  .hqx__source { grid-area: source; }
  .hqx .crl { grid-area: crl; width: 100%; }
  .hqx__controls { grid-area: controls; }
  :root { --crl-w: 100%; }
  .hqx__title { overflow-wrap: normal; word-break: normal; }
  /* selbar wraps on phones; a rounded-rect reads better than a giant pill */
  .selbar { border-radius: 16px; left: 0.8rem; right: 0.8rem; transform: none; max-width: none; animation: none; }
  /* Below here the fixed 15 columns can't hold the floor, so let the swatches
     wrap: as many ≥18px swatches as fit per row, filling the width. */
  .chip-grid { grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); }
  .metatags { gap: 0.28rem; }
  .metatag { font-size: 0.56rem; }
}

@media (max-width: 460px) {
  /* labels would crowd; controls remain self-evident via aria-label. Keep the
     category filter pills visible though. */
  .lib-columns__labels { display: none; }
  .entry__row {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    column-gap: 0.5rem;
  }
  .entry__controls { gap: 0.6rem; }
  /* smallest screens: mostly swatches — drop the metatags, keep title + swatches */
  .metatags { display: none; }
  .entry__title { font-size: 1rem; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}