/* Pheo Context.
   Light and precise rather than another dark developer tool. The page is
   read by someone deciding whether to trust something, so it leans
   editorial: real type, real hierarchy, one accent spent on the moment
   that matters, which is a scanner disagreeing. */

:root{
  --paper:#FAFAF8;
  --card:#FFFFFF;
  --ink:#16161A;
  --muted:#61646E;
  --faint:#8E9199;
  --rule:#E5E4E0;
  --rule-soft:#F0EFEC;
  --brand:#3D3AE0;
  --brand-soft:#EEEEFD;
  --held:#B8442A;
  --held-soft:#FBF0EC;
  --clean:#1F6F5C;
  --clean-soft:#EDF5F2;
  --shadow:0 1px 2px rgba(22,22,26,.05), 0 8px 24px -18px rgba(22,22,26,.35);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0F13;
    --card:#15171C;
    --ink:#ECEDF0;
    --muted:#9CA0AA;
    --faint:#6E7280;
    --rule:#24272E;
    --rule-soft:#1B1E24;
    --brand:#8F8CFF;
    --brand-soft:#191A33;
    --held:#F08a68;
    --held-soft:#2A1610;
    --clean:#5FBFA5;
    --clean-soft:#0F211C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0E0F13; --card:#15171C; --ink:#ECEDF0; --muted:#9CA0AA;
  --faint:#6E7280; --rule:#24272E; --rule-soft:#1B1E24;
  --brand:#8F8CFF; --brand-soft:#191A33; --held:#F08a68; --held-soft:#2A1610;
  --clean:#5FBFA5; --clean-soft:#0F211C;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
/* An author rule like display:flex silently beats the hidden attribute,
   which only sets display:none at user agent level. Anything marked
   hidden should be hidden, whatever else it is styled as. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.num,.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13.5px}

/* ---------------------------------------------------------------- bar */
.bar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px;
  padding:14px 28px; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--rule);
}
.mark{display:flex;align-items:center;gap:9px;font-weight:600;text-decoration:none;letter-spacing:-.01em}
.mark .thin{font-weight:400;color:var(--muted)}
.glyph{
  width:15px;height:15px;border-radius:4px;background:var(--brand);
  box-shadow:inset 0 0 0 3px var(--paper); flex:none;
}
.steps{display:flex;gap:6px;margin-left:auto;font-size:13px}
.step{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:100px;color:var(--faint)}
.step b{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  width:18px;height:18px;display:grid;place-items:center;border-radius:50%;
  background:var(--rule-soft);color:var(--muted);
}
.step.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
.step.on b{background:var(--brand);color:#fff}
.ghost{
  font-size:13.5px;text-decoration:none;padding:8px 15px;border-radius:8px;
  border:1px solid var(--rule);background:var(--card);white-space:nowrap;
}
.ghost:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:760px){ .steps{display:none} .bar{padding:12px 18px} }
/* The full product name wrapped to two lines beside "Sign in" on a phone.
   Smaller and unbroken, it fits a 360px screen on one line. */
@media(max-width:480px){ .mark{font-size:15px} .mark .thin{font-size:12.5px;white-space:nowrap} }

/* --------------------------------------------------------------- hero */
main{max-width:1080px;margin:0 auto;padding:0 28px 120px}
.hero{padding:44px 0 0;max-width:780px}
.kicker{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin:0 0 18px;
}
h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(40px,7vw,68px); line-height:1.04; letter-spacing:-.018em;
  margin:0 0 22px; text-wrap:balance;
}
.sub{font-size:18px;line-height:1.55;color:var(--muted);max-width:58ch;margin:0 0 20px}
.sub .num{color:var(--ink);font-weight:500}

.search{
  display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px;padding:7px 7px 7px 16px;
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.loupe{width:19px;height:19px;flex:none;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.search input{
  flex:1;border:0;outline:0;background:none;color:var(--ink);
  font:inherit;font-size:17px;padding:12px 0;min-width:0;
}
.search input::placeholder{color:var(--faint)}
.search button{
  border:0;border-radius:9px;background:var(--brand);color:#fff;font:inherit;
  font-weight:500;font-size:14.5px;padding:12px 22px;cursor:pointer;white-space:nowrap;
}
.search button:hover{filter:brightness(1.08)}

/* --------------------------------------------------------- apprentice */
.apprentice{margin-top:26px}
.ask{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--muted);margin-bottom:13px}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}
  70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--rule);background:var(--card);border-radius:100px;
  padding:8px 15px;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;
  transition:.14s;
}
.chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.rotate{font-size:14px;color:var(--faint);margin:16px 0 0;min-height:1.5em}
.rotator{color:var(--ink);border-bottom:1.5px dashed var(--rule);padding-bottom:1px}

/* ------------------------------------------------------------ filters */
.filters{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer}
.toggle input{accent-color:var(--brand);width:15px;height:15px}
.count{margin-left:auto;font-size:13px;color:var(--faint)}
.count .num{color:var(--ink)}

/* ------------------------------------------------------------ results */
.results{margin-top:24px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.row{
  display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--rule-soft);cursor:pointer;
  transition:background .12s;
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--rule-soft)}
.row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.slug{font-weight:500;letter-spacing:-.005em;word-break:break-word}
.slug .pub{color:var(--faint);font-weight:400}
.verdicts{display:flex;gap:5px}
.v{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;
  background:var(--clean-soft);color:var(--clean);
}
.v.bad{background:var(--held-soft);color:var(--held)}
.v.unk{background:var(--rule-soft);color:var(--faint)}
.tag{
  font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:100px;white-space:nowrap;
  background:var(--rule-soft);color:var(--muted);
}
.tag.split{background:var(--brand-soft);color:var(--brand)}
.tag.review{background:var(--held-soft);color:var(--held)}
@media(max-width:680px){
  .row{grid-template-columns:1fr;gap:10px}
  .verdicts{order:3}
}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}

/* -------------------------------------------------------------- panel */
.panel{
  margin-top:24px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--card);padding:28px;box-shadow:var(--shadow);
}
.panel h2{font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:500;margin:0 0 6px;word-break:break-word}
.panel .by{color:var(--faint);font-size:14px;margin:0 0 24px}
.scroll{overflow-x:auto;margin:0 0 22px;border:1px solid var(--rule);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:460px}
th{
  text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--rule);
}
td{padding:11px 14px;border-bottom:1px solid var(--rule-soft)}
tr:last-child td{border-bottom:0}
.pill{font-size:12px;font-weight:500;padding:3px 9px;border-radius:100px;background:var(--clean-soft);color:var(--clean)}
.pill.bad{background:var(--held-soft);color:var(--held)}
.pill.unk{background:var(--rule-soft);color:var(--faint)}
.note{
  border-left:3px solid var(--brand);background:var(--brand-soft);
  padding:15px 18px;border-radius:0 8px 8px 0;font-size:14.5px;margin:0 0 22px;
}
.note.warn{border-left-color:var(--held);background:var(--held-soft)}
.classes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.cls{
  font-family:"JetBrains Mono",monospace;font-size:12px;padding:6px 11px;border-radius:7px;
  background:var(--rule-soft);color:var(--muted);
}
.cls.never{background:var(--held-soft);color:var(--held)}
.panel .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  border:0;border-radius:9px;background:var(--brand);color:#fff;font:inherit;font-weight:500;
  font-size:14px;padding:11px 20px;cursor:pointer;text-decoration:none;display:inline-block;
}
.btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.btn:hover{filter:brightness(1.07)}

/* -------------------------------------------------------------- watch */
.watch{margin-top:110px;padding-top:52px;border-top:1px solid var(--rule)}
.watch h2{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(28px,4.4vw,42px);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 34px;max-width:22ch;text-wrap:balance;
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:38px}
@media(max-width:720px){ .two{grid-template-columns:1fr} }
.two > div{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:24px}
.two h3{
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);margin:0 0 12px;font-weight:500;
}
.two p{margin:0 0 10px;font-size:15px}
.two p:last-child{margin-bottom:0}
.install{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.cmd{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--rule-soft);border-radius:8px;padding:14px 16px;margin-bottom:12px;
  font-family:"JetBrains Mono",monospace;font-size:14px;overflow-x:auto;
}
.copy{
  border:1px solid var(--rule);background:var(--card);color:var(--muted);border-radius:7px;
  font:inherit;font-size:12px;padding:6px 12px;cursor:pointer;flex:none;
}
.copy:hover{color:var(--brand);border-color:var(--brand)}

footer{
  border-top:1px solid var(--rule);padding:26px 28px 40px;text-align:center;
  color:var(--faint);font-size:13.5px;
}
footer a{color:var(--muted)}
.sep{margin:0 10px;opacity:.5}

/* -------------------------------------------------------- facets, kind */
.facets{display:flex;gap:6px;flex-wrap:wrap}
.facet{
  border:1px solid var(--rule);background:var(--card);border-radius:7px;
  padding:6px 12px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;gap:7px;
}
.facet:hover{border-color:var(--brand);color:var(--brand)}
.facet.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.facet .n{font-family:"JetBrains Mono",monospace;font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.kind{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;
  background:var(--rule-soft);color:var(--faint);white-space:nowrap;
}

/* ------------------------------------------------------- runtime trace */
.trace{margin:0 0 22px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.trace-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--rule-soft);font-size:14px;
}
.trace-row:last-child{border-bottom:0}
.trace-row .what{font-family:"JetBrains Mono",monospace;font-size:12.5px;word-break:break-all}
.dec{
  font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:100px;white-space:nowrap;
  background:var(--clean-soft);color:var(--clean);
}
.dec.hold{background:var(--held-soft);color:var(--held)}
.after{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--faint);white-space:nowrap}
h3.kicker{margin-top:26px}

/* ------------------------------------------------------------ dashboard */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.meter{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;
}
.mlabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.mnum{font-family:"JetBrains Mono",monospace;font-size:28px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mnum.warn{color:var(--held)} .mnum.bad{color:var(--held)}
.mof{font-size:15px;color:var(--faint)}
.mbar{height:5px;background:var(--rule-soft);border-radius:3px;position:relative;overflow:hidden}
.mbar i{position:absolute;inset:0 auto 0 0;background:var(--brand);border-radius:3px}
.mbar i.hot{background:var(--held)}
.mhint{font-size:12.5px;color:var(--muted)}
.newkey{display:flex;gap:10px;flex-wrap:wrap}
.newkey input{
  flex:1;min-width:200px;border:1px solid var(--rule);background:var(--card);color:var(--ink);
  border-radius:9px;padding:11px 14px;font:inherit;font-size:14.5px;outline:0;
}
.newkey input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.newkey select{
  border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:9px;
  padding:11px 12px;font:inherit;font-size:14.5px;
}
.newkey button{
  border:0;border-radius:9px;background:var(--brand);color:#fff;font:inherit;font-weight:500;
  font-size:14.5px;padding:11px 20px;cursor:pointer;
}

/* --------------------------------------------------------------- signin */
.gbtn{
  display:flex;align-items:center;justify-content:center;gap:11px;
  border:1px solid var(--rule);background:var(--card);border-radius:12px;
  padding:14px 18px;font-size:15.5px;font-weight:500;text-decoration:none;
  box-shadow:var(--shadow);transition:border-color .14s, box-shadow .14s;
}
.gbtn:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.restricted{margin:10px 0 0;text-align:center}
.or{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--faint);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}


/* Once a search has run, the "where do I start" prompt has done its job
   and only stands between the question and the answer. */
body.searched .apprentice { display: none; }
/* The registry cards are a browse affordance, the same as the prompt
   above them. Once someone has asked a question they sit between the
   question and the answer. */
body.searched .registries { display: none; }

/* Leaves the search box on screen when the page scrolls to the results,
   so the query that produced them stays visible. */
#search-form { scroll-margin-top: 92px; }

/* =====================================================================
   The space.

   One page, three cards, read top to bottom. The cards are the only
   structural device: each is a step, numbered because the order is real
   (you cannot scan an empty space, or route one you have not scanned).
   Everything else is kept quiet so the two things worth noticing carry
   the accent: a context that needs a person, and an action that was held.
   ===================================================================== */

.v.warn{background:var(--brand-soft);color:var(--brand)}
.v.ok{background:var(--clean-soft);color:var(--clean)}
.faint{color:var(--faint)}
.tab{font-variant-numeric:tabular-nums}


.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;border-bottom:1px solid var(--rule);background:var(--card);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;gap:8px;color:var(--ink);
  text-decoration:none;font-size:15px}
.topbar-right{display:flex;align-items:center;gap:14px}
.whoami{color:var(--faint);font-size:13.5px}
.topbar form{margin:0}


.space-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;
  margin-bottom:4px}
.space-head h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:40px;
  letter-spacing:-.02em;margin:6px 0 8px;text-wrap:balance;
}
.lede{color:var(--muted);font-size:16px;line-height:1.5;margin:0;max-width:52ch}

.space-meta{
  min-width:260px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
}
.meta-row{display:flex;justify-content:space-between;gap:16px;
  padding:5px 0;font-size:13.5px}
.meta-k{color:var(--faint)}
.meta-v{color:var(--ink);font-weight:500}
.upsell{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--muted);line-height:1.5}
.upsell a{color:var(--brand)}

/* ------------------------------------------------------------ step card */
.step-card{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:24px 26px 26px;box-shadow:var(--shadow);
}
.step-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;
  align-items:center;margin-bottom:20px}
.step-num{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.step-head h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.step-head p{margin:3px 0 0;color:var(--muted);font-size:14px}
.step-stat{color:var(--faint);font-size:13px;white-space:nowrap}

button.primary{
  background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:9px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
}
button.primary:hover{filter:brightness(1.08)}
button.primary:disabled{opacity:.55;cursor:default}
button.primary.big{padding:11px 22px;font-size:14.5px}
button.ghost{
  background:transparent;border:1px solid var(--rule);border-radius:8px;
  padding:7px 13px;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;
}
button.ghost:hover{color:var(--ink);border-color:var(--faint)}

/* -------------------------------------------------------------- build */
.build-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;
  padding-bottom:22px;border-bottom:1px solid var(--rule-soft)}
.build-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.field-label{font-size:12px;font-weight:500;color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;margin:0}

.inline-search{display:flex;gap:8px}
/* Only the fields that share a row with a button should grow. */
.inline-search input,.newkey input{flex:1}
.work input[type=search],.work input[type=text],.work textarea{
  flex:none;min-width:0;background:var(--paper);border:1px solid var(--rule);
  border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);
}
.work textarea{font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12.5px;line-height:1.55;resize:vertical}
.work input:focus-visible,.work textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.inline-search button,.newkey button{
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:9px 15px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;
}
.inline-search button:hover,.newkey button:hover{border-color:var(--faint)}

.find-results{display:flex;flex-direction:column}
.find-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 2px;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.find-row:last-child{border-bottom:0}
.find-slug{font-family:"JetBrains Mono",monospace;font-size:12.5px;
  word-break:break-word}
button.add{
  background:var(--brand-soft);color:var(--brand);border:0;border-radius:6px;
  padding:5px 12px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
}
button.add:disabled{opacity:.6;cursor:default}

.paste-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hint{color:var(--faint);font-size:12.5px;line-height:1.5;margin:0}

/* -------------------------------------------------------------- items */
.items{display:flex;flex-direction:column;margin-top:20px}
.item{
  display:grid;grid-template-columns:1fr auto auto auto;gap:16px;
  align-items:center;padding:13px 2px;border-bottom:1px solid var(--rule-soft);
}
.item:last-child{border-bottom:0}
.item-main{min-width:0}
.item-slug{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  flex-wrap:wrap;word-break:break-word}
.item-desc{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.kind.own{background:var(--brand-soft);color:var(--brand)}
button.drop{
  background:transparent;border:0;color:var(--faint);font-size:19px;
  line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px;
}
button.drop:hover{color:var(--held);background:var(--held-soft)}
.empty-state{padding:30px 4px;color:var(--muted);font-size:14px;line-height:1.55}
.empty-state.small{padding:12px 2px;font-size:13px}

/* --------------------------------------------------------------- scan */
.scanning{display:flex;align-items:center;gap:12px;color:var(--muted);
  font-size:14px;padding:18px 2px}
.scanning .bar{
  width:120px;height:3px;border-radius:2px;background:var(--rule-soft);
  position:relative;overflow:hidden;
}
.scanning .bar::after{
  content:"";position:absolute;inset:0 auto 0 0;width:40%;border-radius:2px;
  background:var(--brand);animation:slide 1.1s ease-in-out infinite;
}
@keyframes slide{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .scanning .bar::after{animation:none;left:0;width:100%;opacity:.5}
}

.scan-summary{display:flex;gap:28px;flex-wrap:wrap;padding:4px 2px 20px;
  border-bottom:1px solid var(--rule-soft)}
.sum{display:flex;flex-direction:column;gap:2px}
.sum .num{font-size:26px;font-weight:500;letter-spacing:-.02em}
.sum span:last-child{color:var(--faint);font-size:12.5px}
.sum.warn .num{color:var(--held)}

.scan-table-wrap{
  overflow-x:auto;margin-top:16px;
  /* A hairline on the right edge tells a reader there is more to the
     side, which is the only affordance a scrolling table gets. */
  background:linear-gradient(to left, var(--rule-soft), transparent 24px);
  border-radius:8px;
}
/* Wide on purpose. Squeezing the columns to fit wraps a slug into six
   lines and makes the whole thing unreadable; letting it exceed the
   wrapper means it scrolls sideways inside its own box, which is how a
   data table is meant to behave. */
.scan-table{width:100%;min-width:720px;border-collapse:collapse;font-size:13px}
.scan-table th{
  text-align:left;font-weight:500;color:var(--faint);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 10px 9px 0;
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
.scan-table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
.scan-table td.mono{font-family:"JetBrains Mono",monospace;font-size:12px;
  word-break:break-word;max-width:230px}
.scan-table .cell{
  font-family:"JetBrains Mono",monospace;font-size:10px;text-align:center;
  width:30px;color:var(--clean);
}
.scan-table .cell.bad{color:var(--held);font-weight:600}
.scan-table .cell.warn{color:var(--brand);font-weight:600}
.scan-table .cell.unk{color:var(--faint);opacity:.6}
.why{color:var(--muted);line-height:1.45;min-width:260px}

/* -------------------------------------------------------------- route */
.route-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;
  padding-bottom:22px;border-bottom:1px solid var(--rule-soft)}
.route-grid > div{display:flex;flex-direction:column;gap:9px;min-width:0}
.work .cmd{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:10px 12px;margin:0;overflow:hidden;
}
/* The code scrolls, the button does not. Putting the button inside the
   scrolling region hides the one control the person came for. */
.work .cmd code{
  flex:1;min-width:0;overflow-x:auto;font-family:"JetBrains Mono",monospace;
  font-size:12.5px;white-space:pre;display:block;padding-bottom:2px;
}
.work .cmd .copy{flex:none;align-self:center}
.work .cmd .copy{
  background:transparent;border:0;color:var(--brand);font:inherit;font-size:12px;
  cursor:pointer;white-space:nowrap;
}
.keys{display:flex;flex-direction:column}
.key{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 2px;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.key:last-child{border-bottom:0}
.key .mono{font-size:12px;margin-left:8px}
.work .newkey{display:flex;gap:8px}

/* ------------------------------------------------------------- bucket */
.bucket{margin-top:20px}
.bucket-table{width:100%;border-collapse:collapse;font-size:13px}
.bucket-table th{
  text-align:left;font-weight:500;color:var(--faint);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:0 12px 9px 0;
  border-bottom:1px solid var(--rule);
}
.bucket-table td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-soft)}
.bucket-table td.mono{font-family:"JetBrains Mono",monospace;font-size:12px;
  word-break:break-all}
.decision{font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:100px;
  background:var(--clean-soft);color:var(--clean)}
.decision.hold{background:var(--held-soft);color:var(--held)}
.decision.block{background:var(--held-soft);color:var(--held)}

/* -------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:10px;
  font-size:13.5px;max-width:min(560px,90vw);z-index:60;box-shadow:var(--shadow);
}
.toast.bad{background:var(--held);color:#fff}
.toast.warn{background:var(--brand);color:#fff}

@media(max-width:860px){
  .space-head{grid-template-columns:1fr}
  .build-grid,.route-grid{grid-template-columns:1fr}
  .step-head{grid-template-columns:auto 1fr;row-gap:12px}
  .step-head > :last-child{grid-column:1/-1}
  .item{grid-template-columns:1fr auto;row-gap:10px}
}

/* --------------------------------------------------- the review queue
   The point of the whole product sits here: a held action, a person, and
   a count that ends. So the count is the loudest thing in the row. */
.holds{margin-top:22px}
.sub-head{font-size:13px;font-weight:600;letter-spacing:-.005em;margin:22px 0 10px;
  display:flex;align-items:baseline;gap:8px}
.sub-head .faint{font-weight:400;font-variant-numeric:tabular-nums}

.hold-list{display:flex;flex-direction:column;border:1px solid var(--rule);
  border-radius:10px;overflow:hidden}
.hold{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--rule-soft);background:var(--card);
}
.hold:last-child{border-bottom:0}
.hold-res{font-size:12.5px;word-break:break-all}
.hold-cls{font-size:12.5px;color:var(--muted);margin-top:3px}
.hold-act{display:flex;gap:8px}
.hold-act button{
  border:1px solid var(--rule);background:var(--paper);border-radius:7px;
  padding:6px 13px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink);
}
.hold-act .approve{background:var(--clean-soft);color:var(--clean);border-color:transparent}
.hold-act .reject{background:var(--held-soft);color:var(--held);border-color:transparent}
.hold-act button:disabled{opacity:.5;cursor:default}

.lane-list{display:flex;flex-direction:column;gap:9px}
.lane{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:16px;align-items:center;
  font-size:12.5px}
.lane-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.lane-name .mono{font-size:12px;word-break:break-all}
.lane-bar{height:5px;border-radius:3px;background:var(--rule-soft);overflow:hidden}
.lane-bar span{display:block;height:100%;background:var(--brand);border-radius:3px}
.lane-n{color:var(--muted);white-space:nowrap;min-width:52px;text-align:right}
.lane-n .earned{color:var(--clean);font-weight:500}

@media(max-width:860px){
  .hold{grid-template-columns:1fr;row-gap:10px}
  .lane{grid-template-columns:1fr;row-gap:6px}
  .lane-n{text-align:left}
}

/* ------------------------------------------------------- how it works
   Three steps, equal weight, no hierarchy between them, because the
   product is the sequence rather than any one of the parts. */
.how{
  max-width:1080px;margin:0 auto;padding:76px 28px 88px;
  border-top:1px solid var(--rule);
}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.how-step{display:flex;flex-direction:column;gap:10px}
.how-num{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-bottom:4px;
}
.how-step h2{
  font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0;
  text-wrap:balance;
}
.how-step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.how-step p.muted{color:var(--faint);font-size:13.5px}

.how-cta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:52px;padding-top:30px;border-top:1px solid var(--rule-soft);
}
.btn-primary{
  background:var(--brand);color:#fff;border-radius:9px;padding:11px 22px;
  font-size:14.5px;font-weight:500;text-decoration:none;display:inline-block;
}
.btn-primary:hover{filter:brightness(1.08)}

@media(max-width:860px){
  .how{padding:52px 22px 64px}
  .how-grid{grid-template-columns:1fr;gap:34px}
}

/* =====================================================================
   The application shell.

   A fixed rail on the left for identity and navigation, a scrolling work
   column on the right. Enterprise software earns trust by being boring in
   the frame and precise in the content, so the rail is quiet and the
   accent is spent only where a decision is waiting.
   ===================================================================== */

.app-body{background:var(--paper);color:var(--ink)}

/* minmax(0,1fr), not 1fr. A 1fr track takes its automatic minimum from the
   min-content of its child, so a wide table inside widens the track itself
   and min-width:0 on the child cannot shrink it. This is what makes the
   whole page scroll sideways. */
.shell{
  display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;
  /* clip, not hidden. Both stop a wide child pushing the page sideways,
     but hidden creates a scroll container and would break the sticky
     header inside. Wide content still scrolls in its own wrapper. */
  overflow-x:clip;
}

.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  gap:6px;padding:20px 14px 16px;border-right:1px solid var(--rule);
  background:var(--card);
}
.side-brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  padding:6px 10px 16px;
}
.side-brand-text{display:flex;flex-direction:column;line-height:1.25}
.side-brand-text b{font-size:15px;letter-spacing:-.01em}
.side-brand-text small{font-size:10.5px;color:var(--faint);letter-spacing:.01em}

.side-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.side-label{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:6px 10px 8px;
}
.space-list{display:flex;flex-direction:column;gap:2px}
.space-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  text-decoration:none;color:var(--ink);
}
.space-item:hover{background:var(--rule-soft)}
.space-item.on{background:var(--brand-soft)}
.space-item.on .space-dot{background:var(--brand)}
.space-dot{width:7px;height:7px;border-radius:50%;background:var(--rule);flex:none}
.space-item-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.space-item-text b{font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.space-item-text small{font-size:11px;color:var(--faint)}
.side-add{
  margin-top:6px;display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:transparent;border:1px dashed var(--rule);border-radius:8px;
  color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-align:left;
}
.side-add:hover{border-color:var(--brand);color:var(--brand)}

.side-foot{
  display:flex;flex-direction:column;gap:2px;padding-top:12px;
  border-top:1px solid var(--rule-soft);
}
.side-foot form{margin:0}
.side-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;background:transparent;border-radius:8px;text-decoration:none;
  color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;text-align:left;
}
.side-item:hover{background:var(--rule-soft);color:var(--ink)}
.side-item.on{background:var(--brand-soft);color:var(--brand)}
.ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-who{margin:8px 10px 0;font-size:11.5px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* A grid track will happily grow past its share to fit its widest child.
   min-width:0 lets it shrink; overflow-x:hidden stops anything that still
   refuses from pushing the whole page sideways. Wide content scrolls in
   its own container instead.
   margin and max-width undo the global main rule: auto margins turn off
   grid stretch, and the item then sizes to its widest code line instead
   of its track, which clipped the Keys card at 1024px. .work-body does
   the centering. */
.work{min-width:0;display:flex;flex-direction:column;margin:0;max-width:none}
.work-body{
  max-width:1000px;width:100%;margin:0 auto;padding:26px 30px 90px;
  display:flex;flex-direction:column;gap:20px;
}
.crumb{display:flex;align-items:baseline;gap:8px;font-size:15px}
.crumb b{font-weight:600;letter-spacing:-.01em}
.pill{
  font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:100px;
  background:var(--brand-soft);color:var(--brand);
}
.meter-mini{display:flex;align-items:baseline;gap:5px;font-size:12.5px}
.meter-mini b{font-weight:600}

.plain-head{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.sub-note{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 16px;
  max-width:68ch}
.sub-note code{font-family:"JetBrains Mono",monospace;font-size:12.5px;
  background:var(--rule-soft);padding:2px 6px;border-radius:5px}

/* ---------------------------------------------------------------- tabs
   Scoped to .tabs on purpose. `.tab` is also the tabular-numerals utility
   further up this file, and an unscoped rule here was quietly giving every
   severity figure and usage count on the site a button's padding, cursor
   and font size. Two meanings for one class name is the collision; the
   descendant selector is the fence. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.tabs .tab{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 14px;margin-bottom:-1px;font:inherit;font-size:14px;
  color:var(--muted);cursor:pointer;
}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:500}

/* -------------------------------------------------------- big search */
.big-search{
  display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--rule);border-radius:12px;padding:4px 5px 4px 14px;
}
.big-search:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.big-search .loupe{width:18px;height:18px;flex:none;fill:none;
  stroke:var(--faint);stroke-width:1.8;stroke-linecap:round}
/* Specificity has to beat .work input[type=search], which sets flex:none
   for the fields that must not grow. This one must. */
.work .big-search input[type=search]{
  flex:1;min-width:0;border:0;background:transparent;padding:13px 0;
  font:inherit;font-size:15.5px;color:var(--ink);outline:none;
}
.big-search button{
  background:var(--brand);color:#fff;border:0;border-radius:9px;
  padding:11px 20px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;
}
.big-search button:hover{filter:brightness(1.08)}

.browse{margin:14px 0 4px}
.browse-row{display:flex;flex-wrap:wrap;gap:7px}





.v.sm{width:21px;height:21px;border-radius:6px;font-size:9px}

/* ------------------------------------------------------- bring your own */
.own-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.own-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-height:150px;border:1.5px dashed var(--rule);border-radius:12px;
  background:var(--paper);cursor:pointer;text-align:center;padding:20px;
}
.drop-zone:hover,.drop-zone.over{border-color:var(--brand);background:var(--brand-soft)}
.drop-zone.busy{opacity:.6;pointer-events:none}
.drop-big{font-size:14.5px;font-weight:500}
.drop-small{font-size:12.5px;color:var(--faint)}

.badge{
  font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;background:var(--rule-soft);color:var(--faint);
  margin-left:7px;
}
.badge.op{background:var(--clean-soft);color:var(--clean)}

/* ------------------------------------------------------------- charts */
.charts{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:start;
  padding:22px 2px;border-bottom:1px solid var(--rule-soft)}
.chart{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.chart.wide{align-items:stretch}
.chart figcaption{font-size:12px;color:var(--faint);line-height:1.55;text-align:center}
.chart.wide figcaption{text-align:left}
.arc.ok{stroke:var(--clean)}
.arc.bad{stroke:var(--held)}
.arc.warn{stroke:var(--brand)}
.arc.unk{stroke:var(--rule)}
.donut-num{font-size:27px;font-weight:600;fill:var(--ink);
  font-family:"Instrument Sans",sans-serif}
.donut-cap{font-size:11px;fill:var(--faint);font-family:"Instrument Sans",sans-serif}
.legend{display:inline-flex;align-items:center;gap:5px;margin:0 7px;white-space:nowrap}
.sw{width:8px;height:8px;border-radius:2px;display:inline-block}
.sw.ok{background:var(--clean)} .sw.bad{background:var(--held)}
.sw.warn{background:var(--brand)} .sw.unk{background:var(--rule)}

.cbars{display:flex;flex-direction:column;gap:7px}
.cbar{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;gap:12px;align-items:center;
  font-size:12px}
.cbar-name{color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cbar-track{height:9px;background:var(--rule-soft);border-radius:3px;overflow:hidden}
.cbar-fill{display:block;height:100%;background:var(--brand);border-radius:3px}
.cbar-fill.held{background:var(--held)}
.cbar-n{color:var(--faint);text-align:right}

/* -------------------------------------------------------- settings rows */
.rows{display:flex;flex-direction:column}
.row-line{display:flex;justify-content:space-between;gap:20px;padding:10px 2px;
  border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.row-line:last-child{border-bottom:0}
.row-k{color:var(--muted)}
.row-k a{color:var(--brand)}
.row-v{font-weight:500}

.thr-head,.thr-row{display:grid;grid-template-columns:90px 170px 170px 1fr;gap:14px;
  padding:8px 2px;font-size:12.5px;align-items:center}
.thr-head{color:var(--faint);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--rule)}
.thr-row{border-bottom:1px solid var(--rule-soft)}
.thr-row .never{color:var(--held);font-weight:500}

.api-list{display:flex;flex-direction:column}
.api-row{display:grid;grid-template-columns:56px 250px 1fr;gap:14px;align-items:baseline;
  padding:8px 2px;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.api-row:last-child{border-bottom:0}
.api-row code{font-family:"JetBrains Mono",monospace;font-size:12px;
  word-break:break-all}
.verb{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;
  padding:2px 0;border-radius:4px;text-align:center;background:var(--rule-soft);
  color:var(--muted)}
.verb.get{background:var(--clean-soft);color:var(--clean)}
.verb.post{background:var(--brand-soft);color:var(--brand)}
.verb.delete{background:var(--held-soft);color:var(--held)}

@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:12px;border-right:0;border-bottom:1px solid var(--rule)}
  .side-nav{flex:1 1 100%;overflow:visible}
  .space-list{flex-direction:row;flex-wrap:wrap}
  .side-foot{flex:1 1 100%;flex-direction:row;align-items:center;
    border-top:0;padding-top:0}
  .side-who{margin:0 0 0 auto}
  .work-body{padding:20px 18px 70px}
  .own-grid{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .cbar{grid-template-columns:110px 1fr 30px}
  .thr-head,.thr-row{grid-template-columns:60px 1fr 1fr}
  .thr-head span:last-child,.thr-row span:last-child{display:none}
  .api-row{grid-template-columns:52px 1fr}
  .api-row span:last-child{grid-column:2}
}

/* ------------------------------------------------------- naming a space
   The default name comes from an email address. That is a placeholder,
   not a name, so we ask once and then get out of the way. */
.name-prompt{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;background:var(--brand-soft);border:1px solid transparent;
  border-radius:12px;padding:16px 20px;
}
.name-prompt b{font-size:14.5px}
.name-prompt p{margin:3px 0 0;font-size:13px;color:var(--muted);max-width:52ch;
  line-height:1.5}
.name-form{display:flex;gap:8px;align-items:center}
.name-form input{
  background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);min-width:180px;
}
button.rename{
  background:transparent;border:0;color:var(--faint);font:inherit;font-size:12px;
  cursor:pointer;padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .12s;
}
.crumb:hover button.rename,button.rename:focus-visible{opacity:1;color:var(--brand)}

/* ------------------------------------------------------- browse groups */




/* ------------------------------------------------- verdict provenance */













@media(max-width:860px){
  .name-prompt{flex-direction:column;align-items:stretch}
}

/* ------------------------------------------------- the verdict table
   One row per context, one column per scanner, grouped under a header
   that says where each group's numbers came from. The grouping is the
   whole explanation, which is why there is no panel above it. */
.scan-table tr.grp th{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:0 10px 5px 0;border-bottom:0;color:var(--faint);font-weight:600;
  text-align:center;
}
.scan-table tr.grp .grp-live{color:var(--clean)}
.scan-table tr.grp .grp-cached{color:var(--faint);font-weight:500;
  text-transform:none;letter-spacing:0;font-size:11px}
.scan-table th.edge-l,.scan-table td.edge{border-left:1px solid var(--rule)}
.scan-table th{text-align:center;font-size:10.5px;letter-spacing:.04em}
.scan-table th:first-child,.scan-table th:last-child{text-align:left}
.scan-table td.ctx{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  min-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:340px;
}
.scan-table td.ctx .kind{margin-left:7px}
.scan-table td.verdict{
  text-align:center;font-size:11.5px;white-space:nowrap;padding:10px 10px 10px 0;
  color:var(--faint);
}
.scan-table td.verdict.ok{color:var(--clean)}
.scan-table td.verdict.bad{color:var(--held);font-weight:500}
.scan-table td.verdict.warn{color:var(--brand);font-weight:500}
.scan-table td.verdict.unk{color:var(--faint);opacity:.65}

/* ==================================================================
   Step one: the marketplace, and what is in your space.
   ================================================================== */

.suggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;
  font-size:13px}
button.try{
  background:var(--card);border:1px solid var(--rule);border-radius:100px;
  padding:5px 13px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;
  opacity:0;transform:translateY(2px);
  transition:opacity .35s ease, transform .35s ease, border-color .12s, color .12s;
}
button.try.in{opacity:1;transform:none}
button.try:hover{border-color:var(--brand);color:var(--brand)}
@media(prefers-reduced-motion:reduce){
  button.try{transition:none;opacity:1;transform:none}
}

/* The registries, named. "The index" is not an answer to whose data this is. */
.browse{margin:18px 0 6px}
.reg-row{display:flex;gap:10px;flex-wrap:wrap}
button.reg{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--rule);border-radius:10px;padding:11px 16px;
  font:inherit;cursor:pointer;text-align:left;color:var(--ink);
}
button.reg:hover{border-color:var(--faint)}
button.reg.on{border-color:var(--brand);background:var(--brand-soft)}
.reg-n{font-size:17px;font-weight:600;letter-spacing:-.02em}
.reg-t{display:flex;flex-direction:column;line-height:1.3}
.reg-t b{font-size:13px;font-weight:500}
.reg-t small{font-size:11px;color:var(--faint)}
.reg-note{margin:12px 0 0;font-size:12.5px;color:var(--faint);line-height:1.55;
  max-width:70ch}

.find-row{gap:14px}
.find-slug{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.from{font-size:11px;color:var(--faint);font-family:"Instrument Sans",sans-serif}
.find-state{font-size:11.5px;white-space:nowrap;color:var(--faint)}
.find-state.ok{color:var(--clean)}
.find-state.warn{color:var(--held)}

/* ---- an item, and the state a person acts on ---------------------- */
.item{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center;
  padding:13px 2px 13px 14px;border-bottom:1px solid var(--rule-soft);
}
.state-bar{
  position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;
  background:var(--rule);
}
.state-problem .state-bar{background:var(--held)}
.state-caution .state-bar{background:var(--brand)}
.state-ok      .state-bar{background:var(--clean)}
.state-unscanned .state-bar{background:var(--held)}

.state-tag{font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:100px;
  white-space:nowrap;background:var(--rule-soft);color:var(--muted)}
.state-tag.problem{background:var(--held-soft);color:var(--held)}
.state-tag.caution{background:var(--brand-soft);color:var(--brand)}
.state-tag.ok{background:var(--clean-soft);color:var(--clean)}
/* Also red, but hollow. Not checked and checked-and-bad are both urgent
   and are not the same fact, so they do not get the same badge. */
.state-tag.unscanned{background:transparent;color:var(--held);
  box-shadow:inset 0 0 0 1px var(--held)}

button.peek{
  background:transparent;border:1px solid var(--rule);border-radius:7px;
  padding:5px 12px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;
  white-space:nowrap;
}
button.peek:hover{border-color:var(--brand);color:var(--brand)}

.item-detail{grid-column:1/-1;margin-top:4px}
.detail-inner{background:var(--paper);border-radius:9px;padding:14px 16px}
.detail-head{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.cls{padding:7px 0;font-size:12.5px}
.cls-line{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;
  align-items:baseline}
.cls-n{font-weight:500}
.cls.held .cls-n{color:var(--held)}
.cls-s{color:var(--faint);font-size:11.5px}
.cls-w{color:var(--muted);font-size:12px}
/* The command itself. This is the answer to "says who", and it is the
   only place on the page that quotes someone else's file. */
.cls-cmd{margin:6px 0 0;padding:8px 11px;background:var(--paper);
  border-radius:7px;border-left:2px solid var(--rule);
  font-family:"JetBrains Mono",monospace;font-size:11.5px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;color:var(--ink)}
.cls.held .cls-cmd{border-left-color:var(--held)}

/* ---- the verdict table -------------------------------------------- */
.state-dot{width:7px;height:7px;border-radius:50%;display:inline-block;
  margin-right:8px;background:var(--rule);flex:none}
.state-dot.problem{background:var(--held)}
.state-dot.caution{background:var(--brand)}
.state-dot.ok{background:var(--clean)}
.scan-table tbody tr:hover{background:var(--rule-soft)}
.scan-table td.verdict{min-width:84px}
.scan-table th{white-space:nowrap}

@media(max-width:860px){
  .item{grid-template-columns:1fr auto;row-gap:10px}
  .reg-row{flex-direction:column}
  button.reg{width:100%}
}

/* ==================================================================
   The front page: what we have done, counted live.
   ================================================================== */

.pulse{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
  margin:20px 0 10px;padding:15px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pulse-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.pulse-n{
  font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(24px,2.9vw,32px);font-weight:500;letter-spacing:-.03em;
  line-height:1;
}
.pulse-cell.bad .pulse-n{color:var(--held)}
.pulse-k{font-size:12.5px;color:var(--faint);line-height:1.4}

.tip{
  margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.55;
  max-width:62ch;
}
.tip b{font-weight:600;color:var(--ink)}

/* The registries, with a heartbeat so the page reads as something that is
   running rather than something that was published. */
.registries{
  max-width:1080px;margin:0 auto;padding:10px 28px 60px;
}
.reg-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:18px}
.reg-head h2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0}
.reg-head p{margin:0;font-size:13px}
.reg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px}
.reg-card{
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:18px 20px;display:flex;flex-direction:column;gap:7px;
  box-shadow:var(--shadow);
}
.reg-card-top{display:flex;align-items:baseline;gap:9px}
.reg-card-top b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.reg-card-top .faint{font-size:12px}
.reg-card-n{
  font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.1;
}
.reg-card-w{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.reg-card-when{margin:3px 0 0;font-size:11.5px;color:var(--faint);
  display:flex;align-items:center;gap:7px}
.live{
  width:6px;height:6px;border-radius:50%;background:var(--clean);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--clean) 60%, transparent);
  animation:beat 2.4s ease-out infinite;
}
@keyframes beat{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--clean) 55%, transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media(prefers-reduced-motion:reduce){ .live{animation:none} }
.reg-more{margin:18px 0 0;font-size:12.5px;color:var(--faint);line-height:1.55}
.reg-more a{color:var(--brand)}

@media(max-width:860px){
  .pulse{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .registries{padding:6px 22px 44px}
}

/* ------------------------------------------------- counters as a door */
button.pulse-cell{
  background:transparent;border:0;padding:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit;border-radius:8px;
  transition:opacity .12s;
}
button.pulse-cell:hover{opacity:.7}
button.pulse-cell.on .pulse-n{text-decoration:underline;text-underline-offset:5px}
button.pulse-cell:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
.pulse-hint{margin:0 0 18px;font-size:12px;color:var(--faint)}
.rows-cap{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  margin:0;padding:14px 18px;border-bottom:1px solid var(--rule);
  font-size:13px;color:var(--muted);
}

/* ---- the actions list -----------------------------------------------
   The counter says a number of commands, so this shows the commands. The
   command is the row here, and the count of contexts carrying it is the
   secondary fact, which is the opposite of everywhere else on the page. */
.act{padding:13px 18px;border-bottom:1px solid var(--rule-soft)}
.act:last-child{border-bottom:0}
.act-cmd{
  margin:0 0 8px;padding:9px 12px;background:var(--paper);border-radius:7px;
  border-left:2px solid var(--held);font-family:"JetBrains Mono",monospace;
  font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  color:var(--ink);
}
.act-meta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:12px}
.act-class{color:var(--held);font-weight:500}
.act-sev{color:var(--faint);font-size:11.5px}
.act-n{
  margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:3px;
  font-variant-numeric:tabular-nums;
}
.act-n:hover{color:var(--ink);text-decoration-color:currentColor}
.act-n:focus-visible{outline:2px solid var(--brand);outline-offset:3px;
  border-radius:3px}

/* ------------------------------------------------------ a document page */
.doc{max-width:760px;margin:0 auto;padding:56px 28px 100px}
.doc h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(34px,5vw,48px);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 16px;
}
.doc .lede{font-size:17.5px;line-height:1.6;color:var(--muted);margin:0 0 40px;
  max-width:62ch}
.doc-block{margin-top:46px;padding-top:30px;border-top:1px solid var(--rule)}
.doc-block h2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0 0 12px}
.doc-block p{margin:0 0 14px;font-size:15px;line-height:1.65;max-width:66ch}
.doc-block ul{margin:0 0 14px;padding-left:20px;max-width:66ch}
.doc-block li{margin-bottom:9px;font-size:15px;line-height:1.6}
.doc-block a{color:var(--brand)}

.src-list{display:flex;flex-direction:column;gap:16px}
.src{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:22px 24px;box-shadow:var(--shadow)}
.src-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.src-top h3{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.src-who{margin:3px 0 0;font-size:12.5px;color:var(--faint)}
.src-n{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.src-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;
  margin:18px 0 0}
.src-facts dt{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;padding-top:2px}
.src-facts dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.src-facts dd a{color:var(--brand);word-break:break-all}

@media(max-width:680px){
  .src-facts{grid-template-columns:1fr;gap:3px 0}
  .src-facts dt{margin-top:10px}
}

/* ------------------------------------------------ front page, two columns
   The counters and the search are the page. The registries are supporting
   evidence, so they sit beside rather than below, where they were pushing
   everything else off the fold. */
.top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
  align-items:start;max-width:1140px;margin:0 auto;padding:0 28px}
.top .hero{padding:44px 0 0;max-width:none}
.registries{padding:52px 0 0;position:sticky;top:78px}
.reg-head{display:block;margin-bottom:14px}
.reg-head h2{font-size:13px;font-weight:600;letter-spacing:.02em}
.reg-head p{margin:4px 0 0;font-size:12px;line-height:1.5}
.reg-cards{grid-template-columns:1fr;gap:10px}
.reg-card{padding:14px 16px;gap:4px}
.reg-card-top b{font-size:13.5px}
.reg-card-n{font-size:19px}
.reg-card-w{font-size:11.5px;line-height:1.45}
.reg-card-when{font-size:11px}
.reg-more{margin-top:14px;font-size:11.5px}

/* A result is a thing you might want, described. What five scanners said
   belongs in a space, after someone has decided they want it. */
.row{grid-template-columns:1fr auto;align-items:start;gap:8px 20px;padding:15px 18px}
.row-desc{grid-column:1;font-size:13px;line-height:1.5;color:var(--muted);
  max-width:72ch;margin-top:3px}
.row-act{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;
  gap:7px;align-items:flex-end;white-space:nowrap}
.src-link,.add-to{font-size:12.5px;text-decoration:none;border-radius:7px;
  padding:5px 12px;border:1px solid var(--rule);color:var(--muted)}
.src-link:hover{border-color:var(--faint);color:var(--ink)}
.add-to{background:var(--brand);border-color:transparent;color:#fff;font-weight:500}
.add-to:hover{filter:brightness(1.08)}
.row .from{margin-left:8px}

@media(max-width:1000px){
  /* minmax(0,...), not 1fr: a bare 1fr track grows to its widest child's
     minimum, which pushed a 360px phone out to 405 and zoomed the page. */
  .top{grid-template-columns:minmax(0,1fr);gap:0}
  .registries{position:static;padding:8px 0 30px}
  .reg-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media(max-width:680px){
  .row{grid-template-columns:1fr}
  .row-act{grid-column:1;grid-row:auto;flex-direction:row;align-items:center}
}

/* A sign-in that knows why you are here. */
.next-note{
  margin:0 0 14px;padding:10px 14px;background:var(--brand-soft);
  border-radius:9px;font-size:13px;color:var(--brand);line-height:1.5;
}

/* Creating a space is a real action, not a footnote under the list. */
.side-add{
  border-style:solid;border-color:var(--rule);background:var(--card);
  color:var(--ink);font-weight:500;
}
.side-add:hover{border-color:var(--brand);color:var(--brand);
  background:var(--brand-soft)}

/* ------------------------------------------------- what arrived just now
   The counter is a claim. This is the thing itself, with a name and a
   source, updating as the crawl runs. */
.just-in{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.just-head{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint)}
.just-all{margin-left:auto;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--brand)}
.just-rows{display:flex;flex-direction:column}
button.just-row{
  display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,2fr) auto;
  gap:12px;align-items:baseline;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--rule-soft);
  padding:9px 4px;font:inherit;cursor:pointer;color:inherit;
}
button.just-row:last-child{border-bottom:0}
button.just-row:hover{background:var(--rule-soft)}
.just-slug{font-family:"JetBrains Mono",monospace;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.just-desc{font-size:12.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.just-when{font-size:11px;white-space:nowrap}
body.searched .just-in{display:none}

@media(max-width:860px){
  button.just-row{grid-template-columns:auto 1fr;row-gap:2px}
  .just-desc,.just-when{grid-column:2}
}

/* ---------------------------------------------- the rail on the front page
   Present only for someone who has spaces. The page slides over rather
   than reflowing into a different layout, so the two states are the same
   page with one more thing in it. */
.side.mini{
  position:fixed;left:0;top:0;bottom:0;width:248px;z-index:30;
  border-right:1px solid var(--rule);background:var(--card);
  padding:20px 14px 16px;display:flex;flex-direction:column;gap:6px;
}
body.has-rail .bar,
body.has-rail main,
body.has-rail footer{margin-left:248px}
body.has-rail .top{max-width:1040px}
.side.mini .side-nav{flex:1;min-height:0;overflow-y:auto}
.side.mini .side-item{text-decoration:none}

@media(max-width:1100px){
  .side.mini{display:none}
  body.has-rail .bar,
  body.has-rail main,
  body.has-rail footer{margin-left:0}
}

/* ------------------------------------------------------------ the why
   A verdict with no reasoning behind it is a colour. This is the reasoning:
   which scanner, what it found, on which line, and where to go and read it. */
.detail-head-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:10px}
.detail-head-row .detail-head{margin:0}
.detail-desc{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.55;
  max-width:76ch}
.detail-note{margin:10px 0 0;line-height:1.5}

.vr-list{display:flex;flex-direction:column;margin-bottom:16px}
.vr{padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.vr:last-child{border-bottom:0}
.vr-line{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;
  gap:12px;align-items:baseline}
.vr-name{font-weight:500}
.vr-status{color:var(--muted)}
.vr.bad .vr-status{color:var(--held);font-weight:500}
.vr.warn .vr-status{color:var(--brand);font-weight:500}
.vr.ok .vr-status{color:var(--clean)}
/* Never looked is not the same as found nothing, and reads differently. */
.vr.never .vr-status{color:var(--faint);font-style:italic}
.vr-n{color:var(--faint);font-size:11.5px}
.vr-when{color:var(--faint);font-size:11px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* The scanner's own reason, in the scanner's own words. Two lines is
   enough to know whether it is worth opening the file; more than that is
   somebody else's report reprinted in ours. */
.vr-why{margin:5px 0 0;padding-left:0;color:var(--muted);font-size:12px;
  line-height:1.55;max-width:74ch;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
@media(min-width:701px){ .vr-why{margin-left:192px} }

.fnd-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.fnd{background:var(--card);border:1px solid var(--rule);border-radius:9px;
  padding:12px 14px}
.fnd-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.fnd-code{font-family:"JetBrains Mono",monospace;font-size:10.5px;
  background:var(--held-soft);color:var(--held);padding:2px 7px;border-radius:4px}
.fnd-top b{font-size:13px}
.fnd-line{margin:0 0 7px;padding:8px 11px;background:var(--paper);
  border-radius:7px;overflow-x:auto;font-size:12px}
.fnd-line code{font-family:"JetBrains Mono",monospace;white-space:pre}
.fnd-why{margin:0 0 5px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.fnd-fix{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.fnd-fix b{color:var(--clean);font-weight:600}

@media(max-width:700px){ .vr{grid-template-columns:1fr auto} }

/* ------------------------------------------- a result that opens in place
   The verdicts already exist. Someone should be able to read them without
   an account, because that moment is where the product explains itself. */
.row{display:block;padding:0;border-bottom:1px solid var(--rule-soft)}
.row:last-child{border-bottom:0}
.row.open{background:var(--rule-soft)}
button.row-open{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:14px 18px;font:inherit;color:inherit;align-items:baseline;
}
button.row-open:hover{background:var(--rule-soft)}
button.row-open .slug{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-weight:500;letter-spacing:-.005em;min-width:0}
button.row-open .row-desc{grid-column:1;font-size:13px;line-height:1.5;
  color:var(--muted);max-width:76ch;margin-top:2px}
.row-flag{grid-row:1;grid-column:2;font-size:11.5px;font-weight:500;
  padding:3px 10px;border-radius:100px;white-space:nowrap}
.row-flag.bad{background:var(--held-soft);color:var(--held)}
.row-flag.warn{background:var(--brand-soft);color:var(--brand)}

.row-detail{padding:0 18px 18px}
.rd-inner{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:18px 20px}
.rd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.rd-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.rd-foot .faint{flex:1;min-width:200px;line-height:1.5}

@media(max-width:760px){
  .rd-cols{grid-template-columns:1fr;gap:18px}
  button.row-open{grid-template-columns:1fr}
  .row-flag{grid-row:auto;grid-column:1;justify-self:start}
}

/* ------------------------------------------------ prediction vs reality
   The one figure here that is not an opinion about a file, and the one
   that needs somebody else's agents before it can say anything. It reads
   as a sentence rather than a counter, because a zero in a row of large
   numbers looks like a bug rather than a disclosure. */
.truth{
  margin:18px 0 0;padding:13px 16px;border-radius:10px;
  background:var(--paper);border:1px solid var(--rule);
  font-size:13px;line-height:1.6;color:var(--muted);max-width:74ch;
}
.truth b{color:var(--ink);font-weight:600}
.truth .truth-n{
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
}

/* ------------------------------------------------------- the step links
   These were spans. A visitor could read three steps and reach one. */
a.step{text-decoration:none}
a.step:hover{color:var(--ink);background:var(--card)}
a.step:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ------------------------------------------------------- document pages */
.doc-wide{max-width:1040px}
.doc-note{margin:0 0 22px;font-size:13.5px;line-height:1.6;color:var(--muted);
  max-width:74ch}
.code{
  margin:0 0 16px;padding:14px 16px;background:var(--paper);
  border:1px solid var(--rule);border-radius:9px;overflow-x:auto;
}
.code code{font-family:"JetBrains Mono",monospace;font-size:12px;
  line-height:1.65;white-space:pre;color:var(--ink)}
.cta{
  display:inline-block;margin-top:6px;padding:10px 18px;border-radius:9px;
  background:var(--brand);color:#fff;text-decoration:none;font-weight:500;
  font-size:14px;
}
.cta:hover{filter:brightness(1.08)}

/* the approvals ladder on the govern page */
.ladder{margin:4px 0 18px;border:1px solid var(--rule);border-radius:9px;
  overflow:hidden}
.rung{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) auto;
  gap:14px;align-items:baseline;padding:10px 14px;font-size:13px;
  border-bottom:1px solid var(--rule-soft)}
.rung:last-child{border-bottom:0}
.rung-sev{color:var(--faint);font-size:11.5px}
.rung-n{color:var(--ink);font-weight:500}
.rung.never{background:var(--held-soft)}
.rung.never .rung-label,.rung.never .rung-n{color:var(--held);font-weight:600}

/* the taxonomy table */
.cls-table{border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  margin-bottom:10px}
.cls-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) 74px 84px 84px minmax(0,2fr);
  gap:14px;align-items:baseline;padding:11px 15px;font-size:13px;
  border-bottom:1px solid var(--rule-soft);
}
.cls-row:last-child{border-bottom:0}
.cls-head{background:var(--paper);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cls-label b{display:block;font-weight:500}
.cls-label code{font-family:"JetBrains Mono",monospace;font-size:10.5px;
  color:var(--faint)}
.cls-row.held .cls-label b{color:var(--held)}
.cls-eg{font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--muted);word-break:break-word;display:block}
@media(max-width:860px){
  .cls-row{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 12px}
  .cls-row span:nth-child(4),.cls-row span:nth-child(5){grid-column:1/-1}
  .cls-head{display:none}
}

/* the scanner cards on the scan page */
.scanner-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-bottom:16px}
.scanner{border:1px solid var(--rule);border-radius:10px;padding:13px 15px;
  background:var(--card)}
.scanner-top{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:6px}
.scanner-top b{font-size:14px;font-weight:600}
.scanner-state{font-size:11px;color:var(--clean);white-space:nowrap}
.scanner.off .scanner-state{color:var(--faint)}
.scanner p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* the command and severity, on the row itself ------------------------- */
.row-cmd{
  grid-column:1/-1;margin:8px 0 0;padding:7px 11px;background:var(--paper);
  border-radius:6px;border-left:2px solid var(--rule);
  font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.5;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row-cmd.held{border-left-color:var(--held);color:var(--ink)}
.row-flag b{font-variant-numeric:tabular-nums;margin-left:5px;opacity:.75}
.row-var{
  grid-column:1/-1;justify-self:start;margin-top:7px;background:none;border:0;
  padding:0;font:inherit;font-size:11.5px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:3px;
}
.row-var:hover{color:var(--ink);text-decoration-color:currentColor}

/* a source link we know is dead --------------------------------------- */
.src-link.moved{
  border-color:var(--held);color:var(--held);
}
.src-link.moved:hover{background:var(--held-soft)}

/* what the registry took down ----------------------------------------- */
.gone-in{margin-top:18px}
.live.gone{background:var(--held)}
.gone-row{align-items:center}
.kind.held{background:var(--held-soft);color:var(--held)}
.gone-cmd{
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.gone-row:hover .gone-cmd{color:var(--ink)}

/* the withdrawn table -------------------------------------------------- */
.gone-head{grid-template-columns:minmax(0,1.4fr) 84px 110px minmax(0,2.2fr)}
.gone-detail{grid-template-columns:minmax(0,1.4fr) 84px 110px minmax(0,2.2fr)}
.gone-desc{display:block;margin-top:5px;font-size:12px;line-height:1.5;
  color:var(--faint)}
@media(max-width:860px){
  .gone-head{display:none}
  .gone-detail{grid-template-columns:minmax(0,1fr) auto auto}
  .gone-detail span:nth-child(4){grid-column:1/-1}
}

/* the demo space ------------------------------------------------------- */
.hold-card{border:1px solid var(--held);border-radius:10px;padding:14px 16px;
  background:var(--held-soft);margin-bottom:12px}
.hold-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:7px;font-size:13px}
.hold-top .cls-n{color:var(--held);font-weight:600}
.hold-res code{font-family:"JetBrains Mono",monospace;font-size:11.5px}
.hold-why{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink)}
.hold-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hold-acts .cta{margin-top:0}
.rung.earned{background:var(--clean-soft,transparent)}
.rung.earned .rung-n{color:var(--clean);font-weight:600}
.log-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 130px 90px}
.ans{font-size:12px;font-weight:500}
.ans-allow{color:var(--clean)}
.ans-hold{color:var(--held)}
.ans-block{color:var(--held)}
@media(max-width:860px){ .log-row{grid-template-columns:minmax(0,1fr) auto} }
.ghost-cta{background:transparent;color:var(--ink);border:1px solid var(--rule);
  margin-left:8px}
.ghost-cta:hover{filter:none;border-color:var(--ink)}
.sub a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--rule);text-underline-offset:4px}
.sub a:hover{text-decoration-color:var(--brand);color:var(--brand)}

/* the card, in fewer words -------------------------------------------- */
.vr-quiet{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.cls-plain{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}
.cls.held .cls-plain{color:var(--held);font-weight:500}
/* The row already prints the command. Printing it again inside the card
   the row opens is the same sentence twice. */
.row.open .row-cmd{display:none}

/* one context, one page ------------------------------------------------ */
.one{max-width:760px;margin:0 auto;padding:30px 28px 100px}
.back{display:inline-block;margin-bottom:26px;font-size:13px;color:var(--muted);
  text-decoration:none}
.back:hover{color:var(--ink)}
.one-where{margin:0 0 6px;font-size:12px;color:var(--faint);
  font-family:"JetBrains Mono",monospace}
.one h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,5vw,42px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 14px}
.one-desc{margin:0 0 34px;font-size:15.5px;line-height:1.6;color:var(--muted);
  max-width:64ch}
.one-block{margin-top:38px;padding-top:26px;border-top:1px solid var(--rule)}
.one-block h2{font-size:15px;font-weight:600;margin:0 0 14px}
.one-known{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.one-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.one-imported,.scan-box{border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;margin-bottom:6px}
.scan-box{padding:14px 16px;background:var(--paper)}
.scan-head{margin:0 0 12px;font-size:13px;color:var(--ink);font-weight:500}
.scan-why{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.scan-classes{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.imp{display:grid;grid-template-columns:minmax(0,1fr) auto 70px;gap:14px;
  align-items:baseline;padding:9px 14px;font-size:13px;
  border-bottom:1px solid var(--rule-soft)}
.scan-box .imp{padding:7px 0;border-bottom-color:var(--rule-soft)}
.imp:last-child{border-bottom:0}
.imp-name{font-weight:500}
.imp-said{color:var(--clean)}
.imp-said.bad{color:var(--held);font-weight:500}
.imp-said.off{color:var(--faint);font-style:italic}
.imp-ms{color:var(--faint);font-size:11.5px;text-align:right;
  font-variant-numeric:tabular-nums}
.imp-for{display:block;margin-top:2px;font-size:11px;color:var(--faint);
  font-weight:400}
.pulse-note{display:block;margin-top:3px;font-size:11px;color:var(--faint)}
.prudence{margin:0 0 16px;max-width:66ch;font-size:13px;line-height:1.6;
  color:var(--muted);border-left:2px solid var(--rule);padding-left:14px}

/* try the gateway ------------------------------------------------------ */
.try-block{margin-top:6px;padding-top:0;border-top:0}
.try-form{margin:0 0 14px;max-width:none}
.verdict-card{border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:10px;padding:14px 16px;background:var(--card)}
.verdict-card.never{border-left-color:var(--held);background:var(--held-soft)}
.verdict-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:8px}
.verdict-word{font-size:17px;font-weight:600;letter-spacing:-.01em;
  text-transform:lowercase}
.verdict-card.never .verdict-word{color:var(--held)}
.verdict-class{font-size:13px;color:var(--muted)}
.verdict-sev{font-size:11.5px;color:var(--faint)}
.verdict-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink)}
.scope-proof{margin:6px 0 14px;border:1px solid var(--rule);border-radius:9px;
  overflow:hidden}
.scope-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:14px;align-items:baseline;padding:10px 14px;font-size:13px;
  border-bottom:1px solid var(--rule-soft)}
.scope-who{font-weight:500}
.scope-list code{font-family:"JetBrains Mono",monospace;font-size:11px;
  background:var(--paper);padding:2px 7px;border-radius:4px;margin-right:4px}
.scope-list code.can-approve{background:var(--held-soft);color:var(--held);
  font-weight:500}
.scope-proof .small{margin:0;padding:9px 14px}
/* A key row is a name, a badge, a masked secret and two counts. At the
   width of the keys column that wrapped mid-token and the fragment read
   as a rendering fault rather than a truncation. */
.key-row{align-items:center}
.key-row code,.key-row .key-mask{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.key-row .tab{white-space:nowrap}

/* A button that reads as a link, for an offer made inside a sentence.
   "Run them again anyway" sits in the middle of a line explaining that
   what you are looking at is a stored result; making it a block button
   would give it more weight than the sentence it belongs to. */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--link,#3b5bdb);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link-btn:hover{text-decoration-thickness:2px}
.link-btn:focus-visible{outline:2px solid var(--link,#3b5bdb);outline-offset:3px;
  border-radius:3px}

/* When a verdict was formed, under the scanner's name.
   A verdict is a statement about a file on a particular day. Without the
   day, a result from last spring and one from thirty seconds ago look
   identical, which is the confusion this whole page exists to remove. */
.imp-when{display:block;font-weight:400;font-size:12px;color:var(--muted);
  margin-top:3px;letter-spacing:0}

/* Which contexts a scan run did not actually read, and why.
   Shown under the summary rather than hidden, because the alternative is
   a page of charts drawn over files nobody opened. */
.skipped{margin:10px 0 2px;border:1px solid var(--rule);border-radius:10px;
  overflow:hidden}
.skip-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:14px;padding:10px 14px;border-bottom:1px solid var(--rule-soft);
  align-items:baseline}
.skip-row:last-child{border-bottom:0}
.skip-slug{font:500 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis}
.skip-why{color:var(--muted);font-size:13px;line-height:1.5}
@media (max-width:640px){.skip-row{grid-template-columns:1fr}}

/* The attempt log reads as an audit table, so the command needs room and
   the download has to be where somebody looking for it would reach. */
.sub-head .export{float:right;font-size:13px;font-weight:400}
.cmd-cell{max-width:280px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12px}
.bucket-table td small{font-size:11px;line-height:1.4;display:inline-block}

/* The audit table is read across, not down: a resource broken as
   "acme-led / ger" and an agent as "recon-bot- / 7" are the kind of
   detail that makes a careful reader doubt the careful parts. */
.bucket-table td,.bucket-table th{white-space:nowrap}
.bucket-table td.cmd-cell{max-width:320px}
.bucket-table td small{white-space:nowrap}

/* What arrived in the last day, under the total it added to. Green
   because it is the one number on this page that is about the index
   being alive rather than about what is wrong with the contents. */
.pulse-note.fresh{display:block;margin-top:3px;color:var(--ok,#1a7f4b);
  font-weight:500;font-variant-numeric:tabular-nums}

/* Whether the attempt log still matches its own hashes. Quietly green
   when it does; unmissable when it does not, because a broken chain is
   the one thing on this page that must never look routine. */
.chain-badge{margin-left:10px;font-size:12px;font-weight:400}
.chain-ok{color:var(--ok,#1a7f4b)}
.chain-bad{color:#fff;background:#c0392b;padding:2px 8px;border-radius:6px;
  font-weight:600;letter-spacing:.02em}

/* The third verdict. A block is not a hold waiting for a person -- it
   is this space's policy refusing the class outright, and the colour
   has to say "stop", not "pending". */
.decision.block{background:#c0392b;color:#fff}

/* ------------------------------------------------------------- rooms
   A gateway running in the customer's environment, reporting in. One
   compact card per room: name, mode, lane chips over its real state.
   Never-graduating lanes carry the held tint, same meaning as
   everywhere else on the page. */
.rooms{margin-top:18px}
.room{border:1px solid var(--rule);border-radius:12px;background:var(--card);
  padding:12px 14px;margin-top:10px}
.room-head{display:flex;align-items:center;gap:10px}
.room-head small{margin-left:auto}
.room-lanes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lane-chip{font-size:12px;padding:3px 9px;border-radius:100px;
  border:1px solid var(--rule);background:var(--rule-soft);color:var(--muted)}
.lane-chip b{font-weight:600;color:var(--ink);margin-left:4px}
.lane-chip.never{background:var(--held-soft);color:var(--held);
  border-color:transparent}
.lane-chip.never b{color:var(--held)}

/* ----------------------------------------------------------- passport */
.verify-grid{display:grid;grid-template-columns:110px 1fr;gap:10px;
  margin:14px 0 10px}
.verify-grid input,#v-headers{border:1px solid var(--rule);
  border-radius:10px;background:var(--card);color:var(--ink);
  padding:10px 12px;font:inherit;width:100%}
#v-headers{font:13px/1.6 'JetBrains Mono',monospace;margin-bottom:10px}
.verdict{margin-left:12px;font-weight:600}
.verdict.good{color:var(--clean)}
.verdict.bad{color:var(--held)}
/* main already carries the page gutter; .top adding its own left a
   360px phone with 56px of margin on each side. */
@media(max-width:560px){ main > .top{padding:0} }