/* Design HQ — design tokens. Primitives, semantic aliases, component sizes, then the
   layout primitives the redesign (R5) will use. Nothing in hq/*.html references the
   layout-primitive classes below yet, so this file changes no current rendering. */

/* ---- fonts (self-hosted, latin subset; harmless @font-face when files are absent) ---- */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url("fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- primitives ---- */
:root{
  --c-paper:#DDE6EA;
  --c-paper-2:#EEF3F5;
  --c-surface:#FFFFFF;
  --c-ink:#14202A;
  --c-muted:#4E6270;
  --c-line:#B9C8D0;
  --c-wall:#1B2830;
  --c-wall-ink:#DDE6EA;
  --c-wall-muted:#9DB2BE;
  --c-signal:#E0492B;
  --c-signal-ink:#B23117;
  --c-cost-green:#2F7D4F;
  --c-cost-amber:#C98A00;
  --c-cost-red:#9E1B1B;

  --hairline-w:1px;

  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-gutter:40px;
  --sp-shelf-gap:10px;

  --r-none:0;
  --r-pill:999px;

  --fs-numeral:128px;
  --fs-numeral-sm:64px;
  --fs-numeral-phone:56px;
  --fs-wordmark:26px;
  --fs-wordmark-phone:20px;
  --fs-headline:clamp(40px,4.4vw,64px);
  --fs-title:22px;
  --fs-title-sm:20px;
  --fs-body:16px;
  --fs-row:14.5px;
  --fs-label:11px;
  --fs-data:12.5px;
  --fs-data-phone:11.5px;

  /* ---- semantic ---- */
  --bg-page:var(--c-paper);
  --bg-specimen:var(--c-paper-2);
  --bg-current:var(--c-surface);
  --fg:var(--c-ink);
  --fg-muted:var(--c-muted);
  --rule:var(--c-ink);
  --rule-current:var(--c-signal);
  --hairline:var(--c-line);
  --focus:var(--c-ink);
  --lift:0 6px 14px -10px rgba(20,32,42,.35);

  /* ---- component ---- */
  --pill-h:34px;
  --pill-h-touch:44px;
  --pill-pad:0 14px;
  --specimen-pad:14px 14px 16px;
  --specimen-rule:2px;
  --specimen-rule-current:3px;
  --tile-min-h:132px;
  --tile-pad:16px;
  --stamp-pad:8px 12px;
  --input-h:44px;
}

@media (prefers-color-scheme: dark){
  :root{
    --c-paper:#101820;
    --c-paper-2:#16222B;
    --c-surface:#1B2830;
    --c-ink:#DDE6EA;
    --c-muted:#9DB2BE;
    --c-line:#2C3B45;
    --c-wall:#0B1116;
    --c-wall-muted:#8FA3AF;
    --c-signal-ink:#F06A4E;
    --c-cost-green:#4FA372;
    --c-cost-amber:#E0A21C;
    --c-cost-red:#C9433A;
    --focus:#DDE6EA;
  }
}

/* Scoped per surface: ink on the dark wall measures 1.1:1 — a focus ring that
   cannot be seen is a defect, so the wall carries its own foreground and focus. */
.wall{
  --focus:var(--c-wall-ink);
  --fg:var(--c-wall-ink);
  --fg-muted:var(--c-wall-muted);
}

/* ---- layout primitives (defined here, unused until R5) ---- */

.shelf{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(148px,1fr);
  gap:var(--sp-shelf-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--sp-gutter);
}
.shelf > *{
  scroll-snap-align:start;
}

.specimen{
  display:flex;
  flex-direction:column;
  min-height:420px;
  background:var(--bg-specimen);
  color:var(--fg);
  padding:var(--specimen-pad);
  border-top:var(--specimen-rule) solid var(--rule);
  text-decoration:none;
}
/* Where the line currently stands. Marked in INK: being the current stage is not the same
   as being Clay's move — the line sits at D5 for days while Claude builds. */
.specimen.is-current{
  background:var(--bg-current);
  border-top-width:var(--specimen-rule-current);
  border-top-color:var(--fg);
}
/* The ONLY vermilion on the shelf, and only when the engagement says the move is his. */
.specimen.is-yours{
  border-top-color:var(--rule-current);
}
.specimen.is-small{
  min-height:0;
  padding:var(--sp-3);
}
/* The stage you have opened. Marked with INK, never with the signal colour — vermilion
   means "your move" and nothing else, so a stage can be both open and yours without the
   two marks colliding. */
.specimen.is-open{
  background:var(--bg-current);
  border-top-color:var(--fg);
  border-top-width:var(--specimen-rule-current);
}

/* The anatomy of a specimen: numeral, name, metadata, state — in that order, with the
   state pushed to the foot so a row of specimens shares one baseline for it. */
.specimen-name{
  font-size:var(--fs-title);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-top:var(--sp-3);
}
.specimen-owner{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:var(--fs-data-phone);
  line-height:1.35;
  color:var(--fg-muted);
  margin-top:var(--sp-2);
}
.specimen-state{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:auto;
  padding-top:var(--sp-4);
}
.specimen.is-yours .specimen-state{
  color:var(--c-signal-ink);
}
.specimen.is-small .specimen-name{
  font-size:var(--fs-title-sm);
  margin-top:0;
}

.numeral{
  font-family:"Archivo","Arial Narrow",Arial,sans-serif;
  font-weight:900;
  font-variation-settings:"wdth" 75;
  font-size:var(--fs-numeral);
  line-height:0.86;
  letter-spacing:-0.04em;
}
.specimen.is-yours .numeral{
  color:var(--c-signal);
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.pills a,.pills button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--pill-h);
  padding:var(--pill-pad);
  border-radius:var(--r-pill);
  border:1.5px solid var(--fg);
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:var(--fs-body);
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
}
.pills a[aria-current="page"],.pills button[aria-current="page"]{
  background:var(--fg);
  border-color:var(--fg);
  color:var(--bg-page);
}
.pills a:hover,.pills a:focus-visible,.pills button:hover,.pills button:focus-visible{
  border-color:var(--c-signal-ink);
  color:var(--c-signal-ink);
}

.wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--hairline-w);
  background:var(--c-wall);
}
.wall .tile{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:var(--tile-min-h);
  padding:var(--tile-pad);
  background:var(--c-wall);
  color:var(--fg);
  text-decoration:none;
}
.wall .tile:hover,.wall .tile:focus-visible{
  color:var(--c-wall-ink);
}

.sheet{
  background:var(--bg-current);
  color:var(--fg);
  border-top:var(--specimen-rule) solid var(--rule);
  padding:var(--sp-5);
}
.sheet.is-yours{
  border-top-width:var(--specimen-rule-current);
  border-top-color:var(--rule-current);
}

.stamp{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--stamp-pad);
  border:1.5px solid var(--c-signal);
  color:var(--c-signal-ink);
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:var(--fs-label);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

@media (prefers-reduced-motion: no-preference){
  .specimen,.wall .tile{
    transition:transform 120ms cubic-bezier(.2,0,0,1), box-shadow 120ms cubic-bezier(.2,0,0,1);
  }
  .specimen:hover,.specimen:focus-visible,.wall .tile:hover,.wall .tile:focus-visible{
    transform:translateY(-2px);
    box-shadow:var(--lift);
  }
}

@media (max-width:520px){
  .shelf{
    grid-auto-flow:row;
    grid-auto-columns:unset;
    overflow-x:visible;
    scroll-snap-type:none;
  }
  /* Numeral beside the text, not above it: eight 420px columns is four screens of scroll
     before the phone reader reaches anything else, against the one-minute glance. */
  .specimen{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--sp-4);
    align-items:baseline;
    min-height:0;
  }
  .specimen .numeral{grid-row:1 / span 3;}
  .specimen-name{margin-top:0;}
  .specimen-state{margin-top:var(--sp-2);padding-top:0;}
  .numeral{
    font-size:var(--fs-numeral-phone);
  }
  .pills{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-padding-inline:var(--sp-gutter);
  }
  .pills a,.pills button{
    height:var(--pill-h-touch);
    flex:0 0 auto;
  }
}