/* The MCP Census — terminal/phosphor design system (v2)
   Surface ramp (tone shading): void < panel < panel-2 < grid < grid-strong,
   each step a deliberate lightness jump so nested UI reads at a glance. */
:root{
  --void:#080B09; --panel:#131F17; --panel-2:#1D2D22;
  --grid:#2B4234; --grid-strong:#3D5C48;
  --phosphor:#4DF08A; --phosphor-dim:#2C7A4A;
  --ink:#CDE9D6; --dim:#8AA894; --amber:#F2B34A; --danger:#FF6159;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --font-sans:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{
  background:var(--void); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* fixed dot-grid + scanline atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
  opacity:.35; mix-blend-mode:multiply;
}
main{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:32px 22px 110px}
.wide{max-width:1080px}

/* type */
h1,h2,h3{font-family:var(--font-mono); font-weight:700; letter-spacing:.02em}
h1{font-size:clamp(30px,4.5vw,40px); line-height:1.12; letter-spacing:-.01em}
h2{font-size:20px; line-height:1.28; margin:0 0 12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink)}
h3{font-size:15px}
a{color:var(--phosphor); text-decoration:none; border-bottom:1px solid var(--phosphor-dim)}
a:hover{text-shadow:0 0 8px var(--phosphor); border-bottom-color:var(--phosphor)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--phosphor); outline-offset:2px; box-shadow:0 0 10px color-mix(in srgb,var(--phosphor) 50%,transparent)}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
code{font-family:var(--font-mono); font-size:.9em; background:var(--panel-2); border:1px solid var(--grid); padding:1px 6px; border-radius:2px; color:var(--phosphor)}
pre{background:var(--panel); border:1px solid var(--grid); border-radius:2px; padding:14px 16px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.55; margin:12px 0; color:var(--ink)}
pre code{background:none;border:0;padding:0;color:var(--ink)}
pre .cmt{color:var(--dim)}
pre .grn{color:var(--phosphor)}

/* terminal bits */
.label{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase}
.prompt{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--phosphor); text-transform:uppercase; margin-bottom:10px}
.prompt::before{content:"$ "; color:var(--phosphor-dim)}
.cursor{display:inline-block; width:.6em; height:1.05em; background:var(--phosphor); margin-left:4px; vertical-align:-2px; box-shadow:0 0 10px var(--phosphor); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.glow{text-shadow:0 0 14px color-mix(in srgb,var(--phosphor) 60%,transparent)}

/* hero stream */
.hero{position:relative; padding:12px 0 8px; overflow:hidden}
.hero-home{padding:20px 0 12px; min-height:auto}
#stream{position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.09; pointer-events:none}
.hero > *{position:relative; z-index:1}
.herolead{max-width:28em; margin-top:14px; font-size:17px; line-height:1.5; color:var(--dim)}
.lede{max-width:40em; color:var(--dim); font-size:16px; line-height:1.55; margin:0 0 16px}
.herosub{margin-top:14px; font-size:12px; color:var(--dim); letter-spacing:.04em}
.herosub .sep{margin:0 .55em; opacity:.5}
.herosub a{border-bottom:0}
details.more{margin-top:18px; border:1px solid var(--grid); border-radius:2px; background:var(--panel)}
details.more summary{cursor:pointer; padding:12px 16px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+ "; color:var(--phosphor-dim)}
details.more[open] summary::before{content:"− "}
details.more > :not(summary){padding:0 16px 16px}
.faqq{margin:20px 0 6px; font-family:var(--font-mono); font-size:14px; letter-spacing:.02em; text-transform:none; color:var(--ink)}
.faqa{color:var(--dim); font-size:15px; line-height:1.55; margin:0; max-width:42em}
.foot{border-top:1px solid var(--grid); margin-top:48px; padding-top:24px; font-size:13px; color:var(--dim); line-height:1.6}
.foot h3{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:16px 0 6px; font-weight:500}
.foot h3:first-child{margin-top:0}
.foot p{margin:0}

/* panels / layout */
section{border-top:1px solid var(--grid); padding:36px 0 8px; margin-top:12px}
.panel{border:1px solid var(--grid); border-radius:2px; background:var(--panel); padding:18px 20px}
.leader{display:flex; justify-content:space-between; gap:16px; border-bottom:1px dotted var(--grid); padding:9px 0; font-size:14px; align-items:baseline}
.leader:last-child{border-bottom:0}
.leader .k{color:var(--dim); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto}
.leader .v,.leader span:last-child{font-family:var(--font-mono); text-align:right; color:var(--ink)}

/* live feed — "discovered today" terminal readout */
.feed-panel{margin:24px 0 8px}
.feed-stat{font-size:12px; color:var(--dim); letter-spacing:.04em; margin-bottom:10px}
.feed-stat .n{color:var(--phosphor); font-weight:700}
.feed-list{list-style:none; padding:0; margin:0; max-height:290px; overflow-y:auto}
.feed-list li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0; border-bottom:1px dotted var(--grid); font-size:13px}
.feed-list li:last-child{border-bottom:0}
.feed-list a{border-bottom:0; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed-list a:hover{color:var(--phosphor); text-shadow:0 0 8px var(--phosphor)}
.feed-list .t{color:var(--dim); font-size:12px; flex:0 0 auto}
.feed-list .feed-empty{color:var(--dim); padding:8px 0; font-size:13px}
.feed-list li.feed-new{animation:feedin .6s ease}
@keyframes feedin{from{opacity:0; background:color-mix(in srgb,var(--phosphor) 12%,transparent); transform:translateY(-6px)}to{opacity:1; background:transparent; transform:none}}
@media (prefers-reduced-motion:reduce){.feed-list li.feed-new{animation:none}}

/* counters — flat row of small figures (no panels) */
.counters{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 8px}
.counter{flex:1 1 150px; border:1px solid var(--grid); border-radius:2px; padding:18px 16px 16px; background:var(--panel); min-height:96px}
.counter .v{font-family:var(--font-mono); font-size:clamp(26px,3vw,34px); font-weight:700; line-height:1; color:var(--phosphor); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.counter .l{font-size:11px; color:var(--dim); margin-top:10px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase}
.counters-flat{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:28px 40px; margin:28px 0 4px; border:0; background:transparent;
}
.counters-flat .counter{
  flex:0 0 auto; border:0; background:transparent; padding:0; min-height:0;
  text-align:center;
}
.counters-flat .counter .v{
  font-size:clamp(18px,2.2vw,22px); font-weight:600; letter-spacing:-.01em;
  color:var(--phosphor); text-shadow:none;
}
.counters-flat .counter .l{
  margin-top:4px; font-size:10px; letter-spacing:.1em; color:var(--dim);
}
.census-asof{font-size:11px; color:var(--dim); text-align:center; margin-top:8px}

/* buttons — fixed heights so every control in a row lines up */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.04em;
  background:var(--phosphor); color:var(--void); padding:0 22px; border:1px solid var(--phosphor); border-radius:2px; cursor:pointer; text-decoration:none;
  transition:box-shadow .15s ease, background .15s ease, transform .1s ease}
.btn:hover{box-shadow:0 0 10px color-mix(in srgb,var(--phosphor) 38%,transparent)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--phosphor)}
.btn.ghost:hover{background:color-mix(in srgb,var(--phosphor) 12%,transparent)}
.btn.danger{background:transparent; color:var(--danger); border-color:var(--danger)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent); box-shadow:0 0 14px color-mix(in srgb,var(--danger) 40%,transparent)}
.btn.sm{height:32px; padding:0 14px; font-size:12px; gap:6px}

/* status/utility pill — same 32px rhythm as .btn.sm, for non-interactive badges */
.pill{display:inline-flex; align-items:center; height:32px; padding:0 14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--phosphor); color:var(--phosphor); border-radius:2px}

/* copy-to-clipboard affordance on a <pre> or key row */
.copywrap{position:relative}
.copywrap pre{padding-right:90px; white-space:pre-wrap; word-break:break-all; overflow-x:visible}
.copybtn{position:absolute; top:8px; right:8px; height:28px; padding:0 10px; font-size:11px;
  background:var(--panel-2); color:var(--dim); border:1px solid var(--grid); border-radius:2px;
  cursor:pointer; font-family:var(--font-mono); letter-spacing:.04em; transition:color .15s,border-color .15s}
.copybtn:hover{color:var(--phosphor); border-color:var(--phosphor)}
.copybtn.copied{color:var(--phosphor); border-color:var(--phosphor)}

/* left text / right action row, used for upsells and settings rows */
.splitrow{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.splitrow .txt{flex:1; min-width:220px}

/* verdict badges */
.verdict{display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:2px; border:1px solid; white-space:nowrap}
.v-healthy{color:var(--phosphor); border-color:var(--phosphor); box-shadow:inset 0 0 12px color-mix(in srgb,var(--phosphor) 18%,transparent)}
.v-issues{color:var(--amber); border-color:var(--amber)}
.v-unknown{color:var(--dim); border-color:var(--dim)}
.v-gone{color:var(--danger); border-color:var(--danger)}

/* tables */
table{border-collapse:collapse; width:100%; font-size:13px; font-family:var(--font-mono)}
th,td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--grid)}
th{color:var(--dim); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase}
td.num{text-align:right}
.tbl summary{cursor:pointer; color:var(--dim); font-size:13px; margin:8px 0; font-family:var(--font-mono)}
.chartwrap{overflow-x:auto; margin:16px 0}

/* svg chart bars use phosphor via fill="var(--phosphor)" */

.nav{font-size:13px; margin-top:10px; font-family:var(--font-mono)}
.nav a{margin-right:14px}

/* Site chrome = horizontal top bar only (2026-07-21). Left rail removed —
   xAI/Grok-style sparse mono links, phosphor wordmark, matrix tokens kept. */
.appshell{display:flex; flex-direction:column; min-height:100vh}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 28px; border-bottom:1px solid var(--grid); background:color-mix(in srgb,var(--void) 88%,var(--panel));
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%)}
.brand{display:flex; align-items:center; gap:10px; border-bottom:0; white-space:nowrap;
  font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.brand:hover{text-shadow:none}
.brand:hover .side-name{color:var(--phosphor)}
.side-mark{flex:0 0 26px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--phosphor-dim); border-radius:2px; background:var(--panel-2); color:var(--phosphor);
  font-size:11px; letter-spacing:0; text-shadow:0 0 8px color-mix(in srgb,var(--phosphor) 55%,transparent);
  box-shadow:inset 0 0 10px color-mix(in srgb,var(--phosphor) 12%,transparent)}
.topnav{display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.topnav a{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); border-bottom:0; padding:6px 10px; border-radius:2px;
  transition:color .12s ease, background .12s ease}
.topnav a:hover{color:var(--phosphor); background:var(--panel-2); text-shadow:none}
.topnav a[aria-current]{color:var(--phosphor);
  box-shadow:inset 0 -2px 0 var(--phosphor)}
.shellmain{flex:1; min-width:0; width:100%}
@media (max-width:720px){
  .topbar{padding:12px 14px; gap:10px}
  .topnav{gap:0}
  .topnav a{padding:6px 7px; font-size:11px}
  .side-name{display:none}
}
/* legacy class names kept inert so old markup never reappears as a rail */
.sidebar,.sidetoggle,.side-label{display:none !important}

/* Google-style landing hero: fills the first viewport, everything centered,
   with the counters strip peeking above the fold as the scroll hint */
/* Minimal xAI-style hero lead (tokens only) */
.herolead{font-family:var(--font-sans); font-size:17px; line-height:1.45; color:var(--dim); max-width:28em; margin:14px auto 0; text-align:center}
.herosub .sep{margin:0 10px; color:var(--grid-strong); opacity:.9}
.herosearch .hg.o,.acpanel .hg.o{color:var(--phosphor); letter-spacing:.08em; font-size:10px}
.herosearch .acit.offi .nm,.acpanel .acit.offi .nm{color:var(--phosphor)}
.hero-home{display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; min-height:calc(100vh - 280px); padding:36px 0 18px}
.hero-home .herosearch{width:100%; max-width:680px; margin:30px auto 16px}
.hero-home .herosub{max-width:620px; margin-left:auto; margin-right:auto}
.scrollcue{display:inline-flex; align-items:center; gap:8px; margin-top:40px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); border-bottom:0}
.scrollcue:hover{color:var(--phosphor)}
.scrollcue .g{display:inline-block; animation:cuedrift 1.8s ease-in-out infinite}
@keyframes cuedrift{0%,100%{transform:none}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.scrollcue .g{animation:none}}
@media (max-height:600px){.hero-home{min-height:0}}

/* signed-in avatar + dropdown, injected by nav.js into .topnav.
   Circle radius is a documented DESIGN.md exception (identity chip, not a panel). */
.acctmenu{position:relative; display:inline-flex}
.avatar{width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); color:var(--phosphor); border:1px solid var(--grid-strong);
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.04em; cursor:pointer; padding:0}
.avatar:hover{border-color:var(--phosphor); box-shadow:0 0 10px color-mix(in srgb,var(--phosphor) 40%,transparent)}
.acctdrop{position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:190px;
  background:var(--panel); border:1px solid var(--grid); border-radius:2px; padding:6px;
  display:flex; flex-direction:column}
.acctdrop[hidden]{display:none}
.acctdrop a,.acctdrop button{display:block; text-align:left; width:100%; padding:9px 12px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink);
  background:transparent; border:0; border-radius:2px; cursor:pointer}
.acctdrop a:hover,.acctdrop button:hover{background:var(--panel-2); color:var(--phosphor); text-shadow:none}

/* hero search — the primary lookup action on the homepage */
/* z-index:30 lifts the form (and its acpanel dropdown) above later .hero > *
   siblings — .herosub / links — which are all z-index:1 (see .hero > * rule),
   so the suggest panel overlays them instead of being painted under. */
.herosearch{display:flex; gap:8px; margin:26px 0 10px; max-width:640px; position:relative; z-index:30}
.herosearch input{flex:1; font-size:17px; padding:0 16px; height:52px; border:1px solid var(--grid-strong); border-radius:2px; background:var(--panel-2); color:var(--phosphor); font-family:var(--font-mono)}
.herosearch input::placeholder{color:var(--dim)}
.herosearch .btn{height:52px; padding:0 26px}
/* autocomplete wrapper: holds the input, the animated ghost, and the suggest panel */
.herosearch .acwrap{position:relative; flex:1; display:flex}
.herosearch .acwrap input{flex:1}
/* animated typewriter ghost — paints over the (empty) input, non-interactive */
.hero-ghost{position:absolute; left:16px; top:50%; transform:translateY(-50%); z-index:1; pointer-events:none; color:var(--dim); font-family:var(--font-mono); font-size:17px; white-space:nowrap; overflow:hidden; max-width:calc(100% - 32px)}
/* suggest dropdown — mirrors the lookup page's combobox styling */
.herosearch .acpanel{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; text-align:left; background:var(--panel); border:1px solid var(--grid-strong); border-radius:2px; box-shadow:0 10px 30px color-mix(in srgb,var(--void) 80%,transparent); overflow:hidden}
.herosearch .acpanel[hidden]{display:none}
.herosearch .acit{display:flex; align-items:center; gap:10px; padding:8px 14px; font-family:var(--font-mono); font-size:13px; cursor:pointer; border-bottom:1px solid var(--grid)}
.herosearch .acit:last-child{border-bottom:0}
.herosearch .acit .nm{color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.herosearch .acit .ttl{color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:right}
.herosearch .acit .hg{font-size:10px; letter-spacing:.06em}
.herosearch .acit .hg.h{color:var(--phosphor)} .herosearch .acit .hg.i{color:var(--amber)} .herosearch .acit .hg.u{color:var(--dim)}
.herosearch .acit.sel,.herosearch .acit:hover{background:var(--panel-2)}
.herosub{font-size:14px; color:var(--dim); margin-top:4px}
@media (max-width:640px){.herosearch{flex-direction:column}.herosearch .acwrap,.herosearch input,.herosearch .btn{width:100%}}
.notice{border-left:2px solid var(--phosphor); background:var(--panel); padding:14px 18px; margin:22px 0; font-size:15px}
.foot{border-top:1px solid var(--grid); margin-top:44px; padding-top:22px; font-size:13px; color:var(--dim); font-family:var(--font-mono)}
.foot a{font-size:13px}
@media (max-width:640px){h1{font-size:30px}}

/* "we found it" return-visit notice (mc.js) — a real toast backed by a live
   /v1/search re-check each time, never theater. Verdict-badge bracket shape
   + glow, matching the [ HEALTHY ]/[ OFFICIAL ] vocabulary — this is a
   genuinely earned positive finding. */
.mcwatch{
  /* bottom offset clears the floating bug-report button pinned at bottom-right */
  position:fixed; right:16px; bottom:76px; z-index:80; max-width:340px;
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--grid-strong); border-radius:2px;
  box-shadow:0 10px 30px color-mix(in srgb,var(--void) 85%,transparent);
  font-family:var(--font-sans); font-size:13px; color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .25s ease,transform .25s ease;
}
.mcwatch.in{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.mcwatch{transition:none}}
.mcwatch-badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--phosphor); text-shadow:0 0 8px color-mix(in srgb,var(--phosphor) 55%,transparent);
  border:1px solid var(--phosphor-dim); border-radius:2px; padding:2px 6px; flex:none;
}
.mcwatch-body{flex:1; line-height:1.45}
.mcwatch-body strong{color:var(--phosphor)}
.mcwatch-view{display:block; margin-top:6px; font-family:var(--font-mono); font-size:12px; color:var(--phosphor)}
.mcwatch-view:hover{text-decoration:underline}

/* Institutional pages + Learn articles (2026-07-23) */
.docpage{max-width:40em}
.docpage h1{font-size:clamp(26px,4vw,34px);margin-bottom:8px}
.docmeta{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.04em;margin:8px 0 20px}
.docbody h2{font-size:15px;letter-spacing:.06em;margin:28px 0 10px;color:var(--ink)}
.docbody h3{font-size:14px;margin:20px 0 8px;color:var(--phosphor-dim);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.docbody p,.docbody li{font-size:15px;color:var(--dim);line-height:1.6}
.docbody ul,.docbody ol{margin:8px 0 12px;padding-left:1.25em}
.docbody li{margin:4px 0}
.docbody strong{color:var(--ink);font-weight:600}
.docbody blockquote{border-left:2px solid var(--phosphor-dim);padding:8px 0 8px 14px;margin:14px 0;color:var(--dim)}
.site-inst-foot{
  display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:48px;padding-top:20px;
  border-top:1px solid var(--grid);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;
}
.site-inst-foot a{border-bottom:0;color:var(--dim)}
.site-inst-foot a:hover{color:var(--phosphor)}
.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:18px}
.learn-card{
  display:block;border:1px solid var(--grid);background:var(--panel);border-radius:2px;
  padding:16px 16px 14px;border-bottom:1px solid var(--grid);color:inherit;
}
.learn-card:hover{border-color:var(--phosphor-dim);text-shadow:none}
.learn-card h2{font-size:14px;letter-spacing:.03em;text-transform:none;margin:0 0 8px;color:var(--ink);line-height:1.35}
.learn-card p{font-size:13px;color:var(--dim);margin:0 0 10px;line-height:1.45;font-family:var(--font-sans)}
.learn-card .docmeta{margin:0}
/* status page num cells (shared look with coverage) */
.numrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.numrow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.numrow{grid-template-columns:1fr}}
.numcell{border:1px solid var(--grid);background:var(--panel);border-radius:2px;padding:18px 16px 16px;min-height:100px}
.numcell .n{font-family:var(--font-mono);font-size:clamp(26px,3.2vw,36px);line-height:1;font-variant-numeric:tabular-nums;color:var(--phosphor);font-weight:700}
.numcell .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.numcell .h{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.4}
.stamp{font-family:var(--font-mono);font-size:12px;color:var(--dim);margin-top:8px;letter-spacing:.04em}
.stamp.err{color:var(--danger)}
.mcwatch-close{flex:none; background:none; border:0; color:var(--dim); font-size:16px; line-height:1; cursor:pointer; padding:0 0 0 4px}
.mcwatch-close:hover{color:var(--ink)}
@media (max-width:640px){.mcwatch{left:16px; right:16px; max-width:none}}

/* hero agent onboard — Cloudflare-style pill: copies Fetch …/agent-setup/prompt.md
   Search stays the visual hero; this is a quiet secondary action under herosub. */
.agent-onboard{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  margin:16px auto 0; max-width:100%;
  padding:10px 18px 10px 20px;
  font-family:var(--font-mono); font-size:13px; line-height:1.3;
  color:var(--ink); background:var(--panel);
  border:1px solid var(--grid-strong); border-radius:999px;
  cursor:pointer; appearance:none;
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.agent-onboard:hover{
  color:var(--phosphor); border-color:var(--phosphor-dim);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--phosphor-dim) 40%,transparent),
             0 0 18px color-mix(in srgb,var(--phosphor) 12%,transparent);
}
.agent-onboard:focus-visible{
  outline:2px solid var(--phosphor); outline-offset:3px;
}
.agent-onboard.copied{
  color:var(--phosphor); border-color:var(--phosphor);
  background:color-mix(in srgb,var(--phosphor) 8%,var(--panel));
}
.agent-onboard-label{white-space:nowrap}
.agent-onboard-icons{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--dim); font-size:12px; letter-spacing:.02em;
}
.agent-onboard:hover .agent-onboard-icons,
.agent-onboard.copied .agent-onboard-icons{color:var(--phosphor-dim)}
.agent-onboard-icons .ai{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.1em; opacity:.9;
}
.agent-onboard-hint{
  margin:8px 0 0; font-size:11px; color:var(--dim); letter-spacing:.04em;
  text-align:center;
}
.agent-onboard-hint a{font-size:11px; border-bottom:0; color:var(--dim)}
.agent-onboard-hint a:hover{color:var(--phosphor)}
.agent-onboard-hint .sep{margin:0 6px; opacity:.45}
@media (max-width:520px){
  .agent-onboard{padding:10px 14px; gap:10px; font-size:12px}
  .agent-onboard-label{white-space:normal; text-align:left}
}
.copybtn svg{display:block; flex:none}
/* search remains the visual hero */
.hero-home .herosearch{margin-top:28px; margin-bottom:14px}
.hero-home .herosub{margin-top:6px}
.hero-home .agent-onboard{display:flex}

/* /api "add to your agent" client rows */
.addgrid{display:flex; flex-direction:column; border:1px solid var(--grid); border-radius:2px; background:var(--panel); margin-top:14px}
.addrow{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--grid)}
.addrow:last-child{border-bottom:0}
.addrow .k{width:110px; flex:none; font-family:var(--font-mono); font-size:13px; color:var(--phosphor)}
.addrow .d{flex:1; font-size:13px; color:var(--dim); line-height:1.5}
.addrow .btn{flex:none}
@media (max-width:640px){.addrow{flex-wrap:wrap}.addrow .d{flex-basis:100%; order:3}}

/* "community only" scan result (lookup.html) — a finished live scan that turned
   up community servers but nothing official. Same toast shape as .mcwatch, but
   amber-keyed: an honest "we looked, here is what exists" result, not a win. */
.mccomm{
  /* bottom offset clears the floating bug-report button pinned at bottom-right */
  position:fixed; right:16px; bottom:76px; z-index:80; max-width:360px;
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--grid-strong); border-radius:2px;
  box-shadow:0 10px 30px color-mix(in srgb,var(--void) 85%,transparent);
  font-family:var(--font-sans); font-size:13px; color:var(--ink);
  opacity:0; transform:translateY(8px); transition:opacity .25s ease,transform .25s ease;
}
.mccomm.in{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.mccomm{transition:none}}
.mccomm-badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); border-radius:2px; padding:2px 6px; flex:none;
}
.mccomm-body{flex:1; line-height:1.45}
.mccomm-body strong{color:var(--amber)}
.mccomm-hint{display:block; margin-top:6px; color:var(--dim); font-size:12px; line-height:1.5}
.mccomm-close{
  background:none; border:0; color:var(--dim); font-size:15px; line-height:1;
  cursor:pointer; padding:0 2px; flex:none;
}
.mccomm-close:hover{color:var(--ink)}