/* www.ejgallego.com/lab/
   Design tokens are copied from site/site.css on purpose rather than shared, because
   the two sites deploy to separate docroots and must not develop a build-time coupling.
   If the palette on the main site changes, change it here too. */

:root{
  --bg:#f6f7f9; --surface:#ffffff; --ink:#141b23; --muted:#5a6673;
  --line:#e5e9ee; --accent:#0b7285; --accent-ink:#0b7285; --accent-soft:#e4f2f4;
  --accent-button:#0b7285; --accent-button-ink:#ffffff;
  --warn:#8a5a00; --warn-soft:#fdf3e0;
  --stop:#9a2f2f; --stop-soft:#fbeceb;
  --shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.06);
  --maxw:920px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --surface:#161b22; --ink:#e8edf2; --muted:#9aa7b4;
    --line:#232b35; --accent:#38b6c9; --accent-ink:#5fcfe0; --accent-soft:#12303a;
    --accent-button:#38b6c9; --accent-button-ink:#0d1117;
    --warn:#e0b060; --warn-soft:#2e2410;
    --stop:#f08a80; --stop-soft:#331a19;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Underlined by default, not on hover. Colour alone is not a sufficient affordance and
   Lighthouse's link-in-text-block audit is right to fail it. */
a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
h1,h2,h3{line-height:1.25; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:20; padding:9px 13px; border-radius:8px;
  background:var(--ink); color:var(--bg); font-weight:700; transform:translateY(-150%);
}
.skip-link:focus{transform:translateY(0)}

/* ---- header ---- */
header{padding:22px 0 34px; border-bottom:1px solid var(--line)}
.site-nav{display:flex; gap:10px; align-items:center; font-size:.84rem; font-weight:650; margin-bottom:32px}
.site-nav a{color:var(--muted)}
.site-nav .here{color:var(--ink)}
.eyebrow{color:var(--accent-ink); font-weight:600; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase; margin:0 0 8px}
h1{font-size:clamp(1.9rem,5vw,2.7rem); letter-spacing:-.02em}
.tagline{margin:12px 0 0; font-size:1.05rem; color:var(--muted)}

/* ---- sections ---- */
section{padding:40px 0; border-bottom:1px solid var(--line)}
.sec-title{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.sec-head{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:22px}
.sec-actions{display:flex; gap:8px; flex-wrap:wrap}
.lead{font-size:1.12rem; max-width:66ch; margin:0 0 16px}
.intro p, #method p{max-width:68ch}
#method h3{font-size:1.05rem; margin:28px 0 8px}
.formula{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; text-align:center}
.gates{margin:12px 0 0; max-width:68ch}
.gates dt{font-weight:700; margin-top:14px}
.gates dd{margin:2px 0 0 0; color:var(--muted)}

/* ---- buttons ---- */
button{
  font:inherit; font-size:.9rem; font-weight:600; padding:8px 15px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
}
button:hover{box-shadow:var(--shadow)}
#add{background:var(--accent-button); border-color:var(--accent-button); color:var(--accent-button-ink)}
.card-remove{padding:5px 11px; font-size:.82rem; color:var(--muted)}

/* ---- editor cards ---- */
.editor{display:grid; gap:16px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px 18px; box-shadow:var(--shadow); margin:0; min-width:0;
}
.card-head{display:flex; gap:12px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.card-head .field{flex:1; min-width:220px}
.card legend{padding:0 4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; margin-top:16px}
.group-label{
  grid-column:1/-1; margin:6px 0 -4px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:.82rem; font-weight:600; color:var(--muted)}
.field input, .field select{
  font:inherit; font-size:.92rem; padding:8px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%;
}
.field input:invalid{border-color:var(--stop)}

/* ---- results ---- */
.status{color:var(--muted); font-size:.9rem; min-height:1.6em; margin:0 0 14px}
.tier{margin-bottom:26px}
.tier h3{font-size:1rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.pill{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
}
.pill.mandatory{background:var(--stop-soft); color:var(--stop)}
.pill.committed{background:var(--warn-soft); color:var(--warn)}
.pill.discretionary{background:var(--accent-soft); color:var(--accent-ink)}
.tier-note{color:var(--muted); font-size:.9rem; margin:6px 0 12px; max-width:68ch}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.92rem; background:var(--surface)}
caption{text-align:left; color:var(--muted); font-size:.85rem; padding-bottom:8px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.rank{color:var(--muted); width:1%}
.score-muted{color:var(--muted)}
.reason{color:var(--muted); font-size:.86rem}
.notice{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:12px 16px; color:var(--muted); max-width:68ch;
}

/* ---- footer ---- */
footer{padding:30px 0 44px; color:var(--muted); font-size:.92rem}
footer p{margin:0 0 8px}
.fine{font-size:.85rem; max-width:68ch}

/* ---- ai-gate ----
   Shares this stylesheet rather than adding a second one: both tools live under the same
   docroot and the same CSP, and one cached file beats two. Everything below is scoped to
   classes that only the gate uses, except .card and .pill which are shared on purpose. */

#gate{display:grid; gap:14px; margin:0}
#gate .card{display:block}
#gate legend{
  padding:0; font-size:.95rem; font-weight:700; color:var(--ink); text-transform:none;
  letter-spacing:0; margin-bottom:10px; float:left; width:100%;
}
#gate label{
  display:flex; gap:10px; align-items:flex-start; padding:7px 0; cursor:pointer;
  font-size:.94rem; color:var(--ink); clear:both;
}
#gate input[type="radio"]{margin:4px 0 0; flex:none; accent-color:var(--accent)}
#gate label:hover{color:var(--accent-ink)}

.verdict{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow); margin-bottom:20px; border-left-width:4px;
}
.verdict.v-redesign{border-left-color:var(--stop)}
.verdict.v-assist{border-left-color:var(--warn)}
.verdict.v-automate{border-left-color:var(--accent)}
.verdict .pill{margin:0 0 8px; font-size:.78rem}
.pill.redesign{background:var(--stop-soft); color:var(--stop)}
.pill.assist{background:var(--warn-soft); color:var(--warn)}
.pill.automate{background:var(--accent-soft); color:var(--accent-ink)}
.verdict-summary{margin:0; color:var(--muted); max-width:68ch}

.gate-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px;
  vertical-align:baseline;
}
.gate-dot.block{background:var(--stop)}
.gate-dot.concern{background:var(--warn)}
.gate-dot.clear{background:var(--accent)}
.gate-status{white-space:nowrap; font-weight:600}

.block-title{font-size:1rem; margin:26px 0 10px}
.fixes{margin:0; padding-left:20px; color:var(--muted); max-width:68ch}
.fixes li{margin-bottom:7px}

@media print{
  header, #tool, #method, #questions, .sec-actions, .skip-link, .status{display:none}
  section{border:0; padding:0}
  body{background:#fff; color:#000}
  .tier, .verdict{break-inside:avoid}
}