/* Design HQ — shared styles. Consumes hq/tokens.css (primitives → semantic → component
   layers); every colour, radius, font-size and spacing value below is a token var. Structure
   is unchanged from v1 — this is a repaint, not a rebuild (that's R5). */

*{box-sizing:border-box;}
/* No overflow-x:hidden on html/body. v1 used it to stop sideways scroll, but a clipping
   root cuts off anything positioned that needs to escape it, and it hides real overflow
   instead of fixing it. Wide content scrolls inside its own container (.table-wrap, .shelf);
   the page itself must simply never overflow. */
body{
  margin:0;background:var(--bg-page);color:var(--fg);
  font-family:Archivo,"Arial Narrow",Arial,sans-serif;font-size:var(--fs-body);line-height:1.55;
}
h1,h2,h3,h4{line-height:1.25;}
/* Section sub-headings ("Global core", "Delegation trio") had no rule and fell back to the
   browser's 18.72px, a size that is in no scale. */
.section > h3{font-size:var(--fs-title-sm);margin:var(--sp-5) 0 var(--sp-3);}
p{margin:0 0 var(--sp-3);}
a{color:var(--fg);}
code,pre{font-family:"JetBrains Mono",Consolas,monospace;overflow-wrap:anywhere;}

/* Clipped to a 1px box rather than parked at left:-9999px, so it never widens the page
   box and needs no clipping root to contain it. */
.skip-link{
  position:absolute;top:0;left:0;z-index:100;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--fg);color:var(--bg-page);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-none);
  font-size:var(--fs-row);font-weight:600;text-decoration:none;
}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip-path:none;}

.wrap{max-width:1200px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-7);}

/* ---- header: wordmark + pills + stamp ---- */
.site-nav{
  border-bottom:var(--hairline-w) solid var(--hairline);background:var(--bg-specimen);
}
.nav-list{list-style:none;margin:0;padding:0;}
/* Wordmark left, pills as the whole navigation, stamp right — one row, wrapping on a phone. */
.site-head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}
.wordmark{
  font-family:Archivo,"Arial Narrow",Arial,sans-serif;
  font-variation-settings:"wdth" 118;
  font-weight:800;font-size:var(--fs-wordmark);letter-spacing:-0.01em;
  text-transform:uppercase;text-decoration:none;color:var(--fg);white-space:nowrap;
}
.site-head .pills{flex:1 1 auto;min-width:0;}
.filter-row > div{min-width:0;}
.pill-count{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:var(--fs-data-phone);color:var(--fg-muted);margin-left:var(--sp-2);
}
.pills a[aria-current="page"] .pill-count{color:var(--bg-page);}
.site-head .stamp{text-decoration:none;margin-left:auto;}
@media (max-width:520px){
  .wordmark{font-size:var(--fs-wordmark-phone);}
  .site-head .stamp{margin-left:0;}
}
.site-nav .wrap{padding:var(--sp-3) var(--sp-5);max-width:1200px;margin:0 auto;}

/* ---- headings / intro ---- */
h1{margin:0 0 var(--sp-3);font-size:var(--fs-headline);font-weight:800;letter-spacing:-0.02em;line-height:1.02;}
.about{color:var(--fg-muted);max-width:70ch;font-size:var(--fs-body);}
.section{margin-top:var(--sp-gutter);}
.section > h2,.section-head > h2{font-size:var(--fs-title-sm);margin:0 0 var(--sp-1);padding-top:var(--sp-2);border-top:var(--hairline-w) solid var(--hairline);}
.section-head{border-top:var(--hairline-w) solid var(--hairline);padding-top:var(--sp-2);}
.section-head > h2{border-top:0;padding-top:0;}
.section-note{color:var(--fg-muted);font-size:var(--fs-row);margin:0 0 var(--sp-4);}

/* ---- section nav (catalog / resources) ---- */
.section-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5);position:sticky;top:0;background:var(--bg-page);padding:var(--sp-3) 0;z-index:5;border-bottom:var(--hairline-w) solid var(--hairline);}
.section-nav a{
  display:inline-flex;align-items:center;min-height:var(--pill-h);
  padding:0 var(--sp-3);border:var(--hairline-w) solid var(--hairline);border-radius:var(--r-pill);
  color:var(--fg);text-decoration:none;font-size:var(--fs-row);background:var(--bg-specimen);
}
.section-nav a:hover{border-color:var(--fg);color:var(--fg);}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
/* Square. The 999px pill is reserved for filters and navigation — a chip is neither, and
   borrowing the shape made every badge look like a control. */
.chip{
  display:inline-block;font-size:var(--fs-data);line-height:1.4;
  background:var(--bg-specimen);border:var(--hairline-w) solid var(--hairline);color:var(--fg);
  border-radius:var(--r-none);padding:var(--sp-1) var(--sp-3);
}
.chip-green{background:transparent;color:var(--fg-muted);border-color:transparent;border-top:var(--specimen-rule-current) solid var(--c-cost-green);}
.chip-yellow{background:transparent;color:var(--fg-muted);border-color:transparent;border-top:var(--specimen-rule-current) solid var(--c-cost-amber);}
.chip-red{background:transparent;color:var(--fg-muted);border-color:transparent;border-top:var(--specimen-rule-current) solid var(--c-cost-red);}
.chip-accent{background:var(--bg-specimen);color:var(--fg);border-color:transparent;}
/* Installed/not-installed is a state, not a cost. It gets ink weight, never a cost colour:
   green already means "no path to a charge" and a colour may encode one fact. */
.chip-state{background:var(--fg);color:var(--bg-page);border-color:var(--fg);}
/* The legend shows the real mark — a top rule — rather than a swatch in another shape. */
.cost-key{display:inline-block;padding-top:var(--sp-1);border-top:var(--specimen-rule-current) solid var(--hairline);}
.cost-key.cost-green{border-top-color:var(--c-cost-green);}
.cost-key.cost-yellow{border-top-color:var(--c-cost-amber);}
.cost-key.cost-red{border-top-color:var(--c-cost-red);}
.badge{
  display:inline-block;margin-left:var(--sp-2);font-size:var(--fs-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--fg);border:var(--hairline-w) solid var(--fg);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-2);
}

/* ---- dashboard ---- */
/* The shelf sits OUTSIDE the 1200px text column and carries its own gutter, so all eight
   specimens fit on a laptop. Boxed into the column the eighth is always cut, and a scrolling
   row that stops short of the edge reads as a truncated grid rather than a shelf. */
.shelf-section{padding:var(--sp-5) var(--sp-gutter) 0;margin:0 0 var(--sp-gutter);}
@media (max-width:520px){.shelf-section{padding:var(--sp-4) var(--sp-5) 0;}}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.section-more{
  font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data);
  color:var(--fg-muted);text-decoration:none;
}
.section-more:hover{color:var(--c-signal-ink);}

.numeral-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);}
@media (max-width:520px){.numeral-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
.numeral-tile{
  display:flex;flex-direction:column;gap:var(--sp-2);
  border-top:1.5px solid var(--rule);padding-top:var(--sp-3);
  text-decoration:none;color:var(--fg);
}
.numeral-tile:hover .numeral,.numeral-tile:focus-visible .numeral{color:var(--c-signal-ink);}
.numeral-sm{font-size:var(--fs-numeral-sm);font-variation-settings:"wdth" 70;}
.numeral-tile-label{font-size:var(--fs-body);}

/* wall headings sit on the page ground, above each dark block */
.wall-heading{font-size:var(--fs-title-sm);margin:var(--sp-5) 0 var(--sp-3);}
.wall{margin-bottom:var(--sp-3);}
/* the resources wall carries a sentence, so its tiles are taller and top-aligned */
.wall .tile-tall{justify-content:flex-start;min-height:var(--tile-min-h);scroll-margin-top:70px;}
.wall .tile-tall:target{outline:var(--specimen-rule) solid var(--c-signal);outline-offset:calc(-1 * var(--specimen-rule));}
.wall .tile-gives{font-size:var(--fs-row);line-height:1.45;margin-top:var(--sp-2);color:var(--fg);}
.wall .tile-tall .tile-meta{margin-top:auto;padding-top:var(--sp-3);}
.wall a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--c-wall-muted);}
.wall a:hover{text-decoration-color:var(--fg);}

/* wall tiles: name at the foot, metadata beneath it, mono and quiet */
.wall .tile-name{font-size:var(--fs-title-sm);font-weight:700;letter-spacing:-0.01em;line-height:1.15;}
.wall .tile-meta{
  font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data-phone);
  color:var(--fg-muted);margin-top:var(--sp-2);
}

/* ---- tiles (legacy count tiles — still used by catalog/resources headers) ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-2);}
.tile{
  display:flex;flex-direction:column;gap:var(--sp-1);min-height:var(--pill-h-touch);
  background:var(--bg-specimen);border:var(--hairline-w) solid var(--hairline);border-radius:var(--r-none);
  padding:var(--sp-4) var(--sp-4);text-decoration:none;color:var(--fg);
}
.tile:hover{border-color:var(--fg);}
.tile .tile-count{font-size:var(--fs-wordmark);font-weight:700;font-family:"JetBrains Mono",Consolas,monospace;}
.tile .tile-label{font-size:var(--fs-data);color:var(--fg-muted);}

/* ---- findings ---- */
/* The empty shelf is a real state, not a missing feature: one specimen with a 0 numeral,
   the rules beside it. No dashed placeholder box. */
.findings-empty{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:var(--sp-5);align-items:start;}
@media (max-width:520px){.findings-empty{grid-template-columns:minmax(0,1fr);}}
.findings-empty-body ul{padding-left:var(--sp-4);}
.findings-empty-body li{margin-bottom:var(--sp-3);}

/* ---- the stage sheet (pipeline) ---- */
.sheet-hint{color:var(--fg-muted);font-size:var(--fs-row);margin:0 0 var(--sp-5);}
.sheet{margin:0 0 var(--sp-gutter);}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.sheet-head h2{margin:var(--sp-1) 0 0;font-size:var(--fs-headline);font-weight:700;letter-spacing:-0.015em;line-height:1.05;}
.sheet-head-right{display:flex;align-items:center;gap:var(--sp-3);}
.sheet-state{
  font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-label);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);
}
.sheet.is-yours .sheet-state{color:var(--c-signal-ink);}
.sheet-close{min-height:var(--pill-h);}
.sheet-purpose{font-size:var(--fs-title-sm);line-height:1.5;max-width:62ch;margin:var(--sp-4) 0 var(--sp-5);}
.sheet-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);}
.sheet-sub{font-size:var(--fs-title-sm);margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-3);border-top:var(--hairline-w) solid var(--hairline);}
.util-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-3);}
.util-list{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);font-size:var(--fs-row);}
.util-list li{margin-bottom:var(--sp-2);}
.util-grid p{font-size:var(--fs-row);margin:var(--sp-2) 0 0;}

/* ---- detail panel (legacy; retained for pages not yet re-cut) ---- */
.field{margin-bottom:var(--sp-4);}
.field .label{display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.05em;
  color:var(--fg-muted);margin-bottom:var(--sp-1);}
.field ul,.field ol,.field p{margin:0;}
.field ul,.field ol{padding-left:var(--sp-4);}
.field code{font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data);background:var(--bg-specimen);
  border:var(--hairline-w) solid var(--hairline);border-radius:var(--r-none);padding:var(--sp-1) var(--sp-2);word-break:break-word;}

/* ---- cards / lists ---- */
/* Every catalog entry is a specimen: square, a top rule, metadata in mono. The same
   object as the shelf, at a smaller size. */
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3);align-items:start;}
/* DESIGN.md: a repo specimen carries "the top rule in the cost colour". It was ink on every
   card, with the tier demoted to a chip. */
.entity-card.cost-green{border-top-color:var(--c-cost-green);border-top-width:var(--specimen-rule-current);}
.entity-card.cost-yellow{border-top-color:var(--c-cost-amber);border-top-width:var(--specimen-rule-current);}
.entity-card.cost-red{border-top-color:var(--c-cost-red);border-top-width:var(--specimen-rule-current);}
.entity-card{
  background:var(--bg-specimen);border:0;border-top:var(--specimen-rule) solid var(--rule);
  border-radius:var(--r-none);
  padding:var(--sp-4) var(--sp-4);scroll-margin-top:70px; /* sticky nav clearance, not a spacing step */
}
/* The one you followed a link to gets the ink rule, so an anchor lands somewhere visible. */
.entity-card:target{border-top-width:var(--specimen-rule-current);background:var(--bg-current);}
tr:target{outline:var(--specimen-rule) solid var(--fg);outline-offset:calc(-1 * var(--specimen-rule));}
.entity-card h3{margin:0 0 var(--sp-2);font-size:var(--fs-title-sm);font-weight:700;letter-spacing:-0.01em;}
/* ---- gallery: the walls, canvases and proofs, kept ---- */
.gallery-list{display:flex;flex-direction:column;gap:var(--sp-4);}
.gallery-item{background:var(--bg-specimen);border-top:var(--specimen-rule) solid var(--rule);padding:var(--sp-5);}
.gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-3);}
.gallery-head h3{margin:var(--sp-1) 0 0;font-size:var(--fs-title);}
.gallery-facts{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0;}
.gallery-facts dt{padding-top:2px;}
.gallery-facts dd{margin:0;}
.gallery-open{font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data);}
@media (max-width:520px){
  .gallery-head{flex-direction:column;gap:var(--sp-2);}
  .gallery-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-1) 0;}
  .gallery-facts dd{margin-bottom:var(--sp-3);}
}

/* ---- your part: the gates that need Clay ---- */
.gate-list{display:flex;flex-direction:column;gap:var(--sp-5);}
.gate{background:var(--bg-specimen);border-top:var(--specimen-rule) solid var(--rule);padding:var(--sp-5);}
.gate.is-yours{background:var(--bg-current);border-top-width:var(--specimen-rule-current);border-top-color:var(--rule-current);}
.gate-head{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.gate-num{font-size:var(--fs-numeral-sm);line-height:.86;}
.gate.is-yours .gate-num{color:var(--c-signal);}
.gate-title{flex:1 1 auto;min-width:0;}
.gate-title h3{margin:var(--sp-1) 0 var(--sp-1);font-size:var(--fs-title);}
.gate-out{margin:0;font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data-phone);color:var(--fg-muted);}
.gate-now{align-self:flex-start;}
.gate-facts{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-4);}
.gate-facts dt{padding-top:2px;}
.gate-facts dd{margin:0;}
.gate-link{margin:0;font-size:var(--fs-row);}
.plain-list{margin:0;padding-left:var(--sp-5);color:var(--fg-muted);}
.plain-list li{margin-bottom:var(--sp-2);}
.ladder .ladder-n{white-space:nowrap;font-weight:600;}
.mono-num{font-family:"JetBrains Mono",Consolas,monospace;color:var(--fg-muted);}
@media (max-width:520px){
  .gate-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-1) 0;}
  .gate-facts dd{margin-bottom:var(--sp-3);}
}
.meta-license{font-size:var(--fs-row);color:var(--fg-muted);margin:0 0 var(--sp-3);}
.meta-license .label{display:inline;margin-right:var(--sp-2);}
.entity-card .meta-line{
  font-family:"JetBrains Mono",Consolas,monospace;
  color:var(--fg-muted);font-size:var(--fs-data-phone);margin:var(--sp-1) 0 var(--sp-2);
}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;max-width:100%;}
table{border-collapse:collapse;width:100%;font-size:var(--fs-row);}
table caption{text-align:left;color:var(--fg-muted);font-size:var(--fs-data);margin-bottom:var(--sp-2);}
th,td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:var(--hairline-w) solid var(--hairline);vertical-align:top;}
th{font-size:var(--fs-data);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);white-space:nowrap;}
tbody tr:hover{background:var(--bg-specimen);}
tr:target,tr[id]:target{outline:var(--specimen-rule) solid var(--fg);outline-offset:calc(var(--specimen-rule) * -1);}

/* ---- filters ---- */
.filters{display:flex;flex-direction:column;gap:var(--sp-3);margin:0 0 var(--sp-5);}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);}
.filter-row > .label{min-width:96px;margin:0;}
.filters label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-data);color:var(--fg-muted);}
/* 16px is a functional floor, not a preference: below it iOS Safari zooms the page when the
   field takes focus. DESIGN.md's Input spec says 16px and 44px tall. */
.filters select,.filters input[type="search"],.filters input[type="text"]{
  min-height:var(--input-h);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:var(--fs-body);
  background:var(--bg-page);color:var(--fg);border:var(--hairline-w) solid var(--hairline);border-radius:var(--r-none);
}
.filters .filter-count{align-self:center;color:var(--fg-muted);font-size:var(--fs-data);padding-bottom:var(--sp-2);}

/* ---- lists / columns ---- */
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5);margin-top:var(--sp-6);}
.columns h2{margin:0 0 var(--sp-3);font-size:var(--fs-data);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);}
.columns ol,.columns ul{margin:0;padding-left:var(--sp-5);font-size:var(--fs-body);}
.columns li{margin-bottom:var(--sp-2);}

/* ---- details/summary (collapsed shelf) ---- */
details{margin-top:var(--sp-4);}
summary{cursor:pointer;min-height:var(--pill-h-touch);display:flex;align-items:center;font-weight:600;}
summary:hover{color:var(--fg);}

/* ---- empty state ---- */

/* ---- footer ---- */
.site-footer{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:var(--hairline-w) solid var(--hairline);color:var(--fg-muted);font-size:var(--fs-data);}

/* ---- misc ---- */
.honesty-note{
  background:var(--bg-specimen);border-top:var(--specimen-rule) solid var(--rule);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-row);margin:0 0 var(--sp-5);
}
kbd{font-family:"JetBrains Mono",Consolas,monospace;font-size:var(--fs-data);background:var(--bg-specimen);border:var(--hairline-w) solid var(--hairline);border-radius:var(--r-none);padding:var(--sp-1) var(--sp-1);}

/* Phone touch targets. Deliberately last in the file: these override component rules that
   share their specificity, and a media query alone does not win the cascade. */
@media (max-width:520px){
  .section-nav a{min-height:var(--pill-h-touch);}
}