/* Recall Relay — design tokens
   Language borrowed from product safety tags: signage type, navy ink, one safety-yellow band.
   Severity colors follow hazard-label convention: red (Class I), orange (Class II), yellow (Class III). */
@font-face { font-family: "Heros Cn"; src: url("/static/fonts/texgyreheroscn-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Heros"; src: url("/static/fonts/texgyreheros-regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("/static/fonts/texgyreheros-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Heros"; src: url("/static/fonts/texgyreheros-italic.otf") format("opentype"); font-style: italic; font-display: swap; }
@font-face { font-family: "Plate Mono"; src: url("/static/fonts/DejaVuSansMono.ttf") format("truetype"); font-display: swap; }

:root {
  --paper: #EDF0F2;      /* cool workroom gray */
  --sheet: #FFFFFF;
  --ink: #13213C;        /* navy ink of a printed notice */
  --ink-2: #4B5873;
  --ink-3: #7A8599;
  --rule: #CDD4DC;
  --signal: #FFC400;     /* safety yellow */
  --danger: #C8102E;
  --warning: #DB6206;
  --caution-bg: #FFE27A;
  --ok: #1E7F4F;

  --display: "Heros Cn", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --text: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --code: "Plate Mono", ui-monospace, Menlo, Consolas, monospace;

  --s-13: 0.8125rem; --s-15: 0.9375rem; --s-17: 1.0625rem; --s-21: 1.3125rem;
  --s-28: 1.75rem; --s-40: 2.5rem; --s-56: 3.5rem;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--s-17)/1.55 var(--text); }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, pre, kbd { font-family: var(--code); }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.6rem/1 var(--display); letter-spacing: -0.005em; }
.logo svg { width: 26px; height: 26px; }
.nav nav { display: flex; align-items: center; gap: 28px; font-size: var(--s-15); }
.nav nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.nav nav a:not(.btn):hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px;
       border-radius: 6px; border: 2px solid var(--ink); font: 700 var(--s-17)/1 var(--text); text-decoration: none;
       cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #0a1426; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--sheet); }
.btn-sm { height: 38px; padding: 0 16px; font-size: var(--s-15); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; padding: 40px 0 96px; }
.hero h1 { font: 700 clamp(3.4rem, 7.6vw, 6.6rem)/1.06 var(--display); letter-spacing: -0.012em; margin: 28px 0 28px; max-width: 9ch; }
.lede { font-size: var(--s-21); line-height: 1.5; color: var(--ink-2); max-width: 31em; margin: 0 0 32px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fine { font-size: var(--s-15); color: var(--ink-3); margin-top: 18px; }

/* ---------- the tag (signature element) ---------- */
.tag-hang { position: relative; padding-top: 70px; }
.tag-hang .string { position: absolute; left: 50%; top: 0; width: 2px; height: 96px; transform: translateX(-50%);
                    background: linear-gradient(var(--ink-3), var(--ink-3)) center/2px 100% no-repeat; opacity: .55; }
.tag { position: relative; background: var(--sheet); color: var(--ink);
       clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%, 0 34px);
       box-shadow: 0 1px 0 var(--rule); transform-origin: 50% 26px; }
.tag::before { /* eyelet */ content: ""; position: absolute; left: 50%; top: 14px; width: 24px; height: 24px; margin-left: -12px;
               border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px #D6DCE2, inset 0 2px 3px rgba(19,33,60,.25); z-index: 2; }
.tag-band { background: var(--signal); padding: 52px 28px 16px; display: flex; align-items: center; gap: 12px; }
.tag-band svg { width: 34px; height: 30px; flex: none; }
.tag-band h2 { margin: 0; font: 700 var(--s-40)/1.05 var(--display); letter-spacing: 0; }
.tag-band p { margin: 6px 0 0; font-size: var(--s-15); line-height: 1.3; }
.tag-search { padding: 20px 28px 8px; }
.tag-search label { display: block; font-weight: 700; font-size: var(--s-15); margin-bottom: 8px; }
.field { display: flex; align-items: center; border: 2px solid var(--ink); border-radius: 6px; background: #fff; }
.field svg { width: 20px; height: 20px; margin-left: 14px; flex: none; color: var(--ink-2); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 50px; padding: 0 14px;
               font: 400 var(--s-17) var(--text); color: var(--ink); }
.field:focus-within { box-shadow: 0 0 0 4px rgba(255,196,0,.55); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: var(--s-13); color: var(--ink-2); align-items: center; }
.chips button { border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 4px 10px; font: inherit; color: var(--ink); cursor: pointer; }
.chips button:hover { border-color: var(--ink-2); }
.results { list-style: none; margin: 8px 0 0; padding: 0 28px; min-height: 280px; }
.results li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.results li:first-child { border-top: 0; }
.results a { text-decoration: none; }
.results a:hover .r-title { text-decoration: underline; }
.r-title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-meta { display: flex; gap: 10px; align-items: center; margin-top: 5px; font-size: var(--s-13); color: var(--ink-2); flex-wrap: wrap; }
.r-hazard { font-size: var(--s-15); color: var(--ink-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.empty { padding: 28px 0; color: var(--ink-2); }
.tag-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 28px 22px; font-size: var(--s-13); color: var(--ink-3); border-top: 1px dashed var(--rule); }

/* severity: the hazard-label convention */
.sev { display: inline-flex; flex-direction: column; justify-content: center; align-self: start; min-height: 48px; padding: 4px 10px; border-radius: 4px;
       font: 700 var(--s-15)/1.15 var(--display); letter-spacing: .01em; }
.sev small { font: 400 11px/1.3 var(--text); margin-top: 1px; opacity: .9; letter-spacing: 0; }
.sev-high { background: var(--danger); color: #fff; }
.sev-medium { background: var(--warning); color: #fff; }
.sev-low { background: var(--caution-bg); color: var(--ink); }
.plate { display: inline-block; border: 1.5px solid var(--ink); border-radius: 3px; padding: 0 5px; font: 700 12px/18px var(--display); letter-spacing: .03em; color: var(--ink); }

/* ---------- sections ---------- */
section { padding: 88px 0; }
.sheet { background: var(--sheet); }
.sec-head { max-width: 40rem; margin-bottom: 44px; }
.sec-head h2 { font: 700 clamp(2.4rem, 4.6vw, 3.5rem)/1.06 var(--display); margin: 0 0 16px; letter-spacing: -0.006em; }
.sec-head p { margin: 0; color: var(--ink-2); font-size: var(--s-21); line-height: 1.45; }

/* sources */
.sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px solid var(--ink); }
.src { padding: 22px 22px 6px 0; }
.src + .src { padding-left: 22px; border-left: 1px solid var(--rule); }
.src .plate { font-size: 14px; line-height: 22px; padding: 0 7px; }
.src h3 { font: 700 var(--s-17)/1.3 var(--text); margin: 14px 0 6px; }
.src .count { font: 700 var(--s-40)/1 var(--display); margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.src .fresh { font-size: var(--s-13); color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.bad { background: var(--danger); }
.src p { font-size: var(--s-15); color: var(--ink-2); margin: 10px 0 0; }

/* request/response */
.rr { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: 10px; overflow: hidden; background: var(--ink); color: #E8ECF3; }
.rr-req { padding: 26px 26px 30px; border-right: 1px solid rgba(255,255,255,.12); }
.rr-res { padding: 26px; max-height: 560px; overflow: auto; }
.tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.tabs button { background: transparent; border: 0; color: #AEB8CA; font: 700 var(--s-15) var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: rgba(255,255,255,.1); color: #fff; }
.rr pre { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.rr h3 { margin: 0 0 14px; font: 700 var(--s-15)/1 var(--text); color: #AEB8CA; }
.j-key { color: #FFD44D; } .j-str { color: #C7E0FF; } .j-num { color: #FFB38A; } .j-lit { color: #FF9AA8; }
.rr-note { margin-top: 22px; font-size: var(--s-15); color: #C3CBD9; }
.rr-note b { color: #fff; }

/* capabilities */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; }
.cap h3 { font: 700 var(--s-28)/1.15 var(--display); margin: 0 0 10px; }
.cap p { margin: 0 0 12px; color: var(--ink-2); }
.cap code { font-size: 13px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 7px; }
.sheet .cap code { background: #F5F7F9; }

/* audiences */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.use h3 { font: 700 var(--s-21)/1.2 var(--text); margin: 0 0 8px; }
.use p { margin: 0; color: var(--ink-2); font-size: var(--s-15); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--sheet); }
.plan { position: relative; padding: 44px 24px 26px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan h3 { font: 700 var(--s-28)/1 var(--display); margin: 0 0 14px; }
.price { font: 700 var(--s-56)/1 var(--display); font-variant-numeric: tabular-nums; }
.price span { font: 400 var(--s-15) var(--text); color: var(--ink-2); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; font-size: var(--s-15); flex: 1; }
.plan li { padding: 7px 0; border-top: 1px solid var(--rule); }
.plan li:first-child { border-top: 0; }
.plan .btn { width: 100%; }
.plan-pick { background: var(--ink); color: #fff; }
.plan-pick .price span, .plan-pick li { color: #D4DAE5; }
.plan-pick li { border-color: rgba(255,255,255,.18); }
.plan-pick .btn { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.plan-note { position: absolute; top: 16px; left: 24px; right: 16px; font-size: var(--s-13); margin: 0; color: #FFD44D; }

/* signup */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.signup form { display: flex; gap: 12px; }
.signup .field { flex: 1; }

/* faq */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--rule); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { font: 700 var(--s-21)/1.3 var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font: 700 var(--s-28)/1 var(--display); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--ink-2); margin: 12px 0 0; max-width: 44rem; }

/* footer */
footer { padding: 48px 0 56px; font-size: var(--s-15); color: var(--ink-2); }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 24px; background: linear-gradient(var(--ink), var(--ink)) 28px 0 / calc(100% - 56px) 3px no-repeat; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot p { max-width: 34rem; margin: 0; }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding-top: 24px; padding-bottom: 96px; }
.docs aside { position: sticky; top: 24px; align-self: start; font-size: var(--s-15); }
.docs aside h4 { font: 700 var(--s-15) var(--text); margin: 22px 0 8px; color: var(--ink-3); }
.docs aside a { display: block; text-decoration: none; color: var(--ink-2); padding: 4px 0; }
.docs aside a:hover { color: var(--ink); }
.docs-main { min-width: 0; }
.docs h1 { font: 700 var(--s-56)/1.04 var(--display); margin: 8px 0 16px; }
.doc-sec { background: var(--sheet); border-radius: 10px; padding: 32px 36px; margin-bottom: 24px; }
.doc-sec h2 { font: 700 var(--s-40)/1.1 var(--display); margin: 0 0 14px; }
.doc-sec h3 { font: 700 var(--s-21) var(--text); margin: 26px 0 8px; }
.doc-sec p, .doc-sec li { color: var(--ink-2); max-width: 46rem; }
.doc-sec pre { background: var(--ink); color: #E8ECF3; border-radius: 8px; padding: 18px 20px; overflow: auto; font-size: 13.5px; line-height: 1.6; }
.doc-sec :not(pre) > code { background: var(--paper); border-radius: 4px; padding: 1px 6px; font-size: 0.86em; }
.ep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.method { font: 700 13px/1 var(--display); letter-spacing: .04em; padding: 6px 8px; border-radius: 4px; border: 2px solid var(--ink); }
.method.post, .method.delete { background: var(--ink); color: #fff; }
.ep code { font-size: var(--s-17); font-weight: 700; }
.params { width: 100%; border-collapse: collapse; font-size: var(--s-15); margin: 8px 0 4px; }
.params th { text-align: left; font-weight: 700; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--ink); }
.params td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.params td:first-child { white-space: nowrap; color: var(--ink); }
.req { color: var(--danger); font-size: var(--s-13); font-weight: 700; }

/* ---------- welcome ---------- */
.welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 24px; padding-bottom: 120px; align-items: start; }
.welcome h1 { font: 700 clamp(3rem, 6vw, 5rem)/1.02 var(--display); margin: 20px 0 20px; }
.keybox { padding: 22px 28px 26px; }
.keybox code { display: block; font-size: 15px; background: var(--paper); border: 2px dashed var(--ink-3); border-radius: 6px; padding: 14px; word-break: break-all; margin: 8px 0 14px; }
.keybox pre { background: var(--ink); color: #E8ECF3; border-radius: 8px; padding: 16px; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.alert { border-left: 6px solid var(--danger); background: var(--sheet); padding: 16px 20px; margin: 20px 0; }

/* ---------- motion: one orchestrated moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tag.swing { animation: swing 2.2s cubic-bezier(.25,.6,.3,1) both; }
  @keyframes swing { 0% { transform: rotate(-7deg); } 30% { transform: rotate(3.5deg); } 55% { transform: rotate(-1.6deg); }
                     75% { transform: rotate(.6deg); } 100% { transform: rotate(0); } }
  .results li.in { animation: rowin .28s ease-out both; }
  @keyframes rowin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 72px; }
  .hero h1 { max-width: 11ch; }
  .sources { grid-template-columns: 1fr 1fr; }
  .src:nth-child(3) { border-left: 0; padding-left: 0; }
  .src:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .rr { grid-template-columns: 1fr; }
  .rr-req { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .caps { grid-template-columns: 1fr 1fr; }
  .uses { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .signup, .welcome { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
  .docs aside { position: static; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .nav nav a:not(.btn) { display: none; }
  section { padding: 64px 0; }
  .sources, .caps, .uses, .plans { grid-template-columns: 1fr; }
  .src + .src { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); }
  .results { padding: 0 18px; }
  .tag-band, .tag-search, .tag-foot { padding-left: 18px; padding-right: 18px; }
  .results li { grid-template-columns: 76px 1fr; }
  .signup form { flex-direction: column; }
  .doc-sec { padding: 24px 20px; }
  .tag-foot { flex-direction: column; }
}

/* ---------- admin ---------- */
.admin-login { max-width: 460px; padding-bottom: 120px; }
.admin { padding-bottom: 96px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 8px 0 22px; }
.admin-head h1 { font: 700 var(--s-56)/1.04 var(--display); margin: 0; }
.admin-stats { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 0 24px; border-top: 3px solid var(--ink); }
.admin-stats div { padding: 14px 16px 4px 0; }
.admin-stats div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.admin-stats dt { font-size: var(--s-13); color: var(--ink-2); }
.admin-stats dd { margin: 4px 0 0; font: 700 var(--s-28)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.admin-stats small { font: 400 var(--s-13) var(--text); color: var(--ink-2); }
.admin-flash { background: var(--sheet); border-left: 6px solid var(--ok); padding: 12px 16px; margin: 0 0 20px; }
.admin-new { margin: 0 0 24px; clip-path: none; border-radius: 10px; overflow: hidden; }
.admin-new .tag-band { padding-top: 18px; }
.admin-new::before { display: none; }
.admin-card { background: var(--sheet); border-radius: 10px; padding: 26px 28px; margin: 0 0 24px; }
.admin-card h2 { font: 700 var(--s-28)/1.15 var(--display); margin: 0 0 16px; }
.muted { color: var(--ink-2); font-size: var(--s-15); }
.admin-create { display: grid; grid-template-columns: 1.3fr 1.3fr 0.8fr auto; gap: 14px; align-items: end; }
.admin-create label { font-weight: 700; font-size: var(--s-15); display: grid; gap: 6px; }
.admin-create label .muted { font-weight: 400; font-size: var(--s-13); }
.admin-create .field input { height: 44px; }
.select { height: 48px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font: 400 var(--s-17) var(--text); color: var(--ink); padding: 0 10px; }
.ak-plan .select { height: 38px; font-size: var(--s-15); }
.admin-list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-list-head h2 { margin: 0; }
.admin-search { min-width: 280px; }
.admin-search .field input { height: 40px; }
.admin-keys { list-style: none; margin: 0; padding: 0; }
.admin-keys li { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); }
.admin-keys li.is-revoked { opacity: .6; }
.ak-label { display: flex; gap: 8px; align-items: center; }
.ak-label input { border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; margin-left: -7px; font: 700 var(--s-17) var(--text); color: var(--ink); background: transparent; min-width: 0; flex: 1; }
.ak-label input:hover, .ak-label input:focus { border-color: var(--rule); background: #fff; }
.linkish { background: none; border: 0; color: var(--ink-2); font: inherit; font-size: var(--s-13); text-decoration: underline; cursor: pointer; padding: 0; }
.ak-prefix { font-size: 13px; color: var(--ink-2); }
.ak-use { font-size: var(--s-15); line-height: 1.45; }
.ak-plan { display: flex; gap: 8px; align-items: center; }
.ak-state { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.ak-badge { font: 700 var(--s-13) var(--text); padding: 3px 8px; border-radius: 999px; }
.ak-badge.ok { background: #DDF2E6; color: var(--ok); }
.ak-badge.off { background: #F6DADF; color: var(--danger); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
@media (max-width: 980px) {
  .admin-stats { grid-template-columns: repeat(4, 1fr); }
  .admin-stats div:nth-child(5) { border-left: 0; padding-left: 0; }
  .admin-create { grid-template-columns: 1fr 1fr; }
  .admin-keys li { grid-template-columns: 1fr 1fr; }
  .ak-state { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .admin-stats div:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 16px; }
  .admin-create, .admin-keys li { grid-template-columns: 1fr; }
  .admin-card { padding: 20px 18px; }
  .admin-search { min-width: 0; width: 100%; }
  .admin-head h1 { font-size: var(--s-40); }
}

/* ---------- status ---------- */
.status { padding-bottom: 96px; }
.status .lede, .status-overall, .status-list, .status > p { max-width: 980px; }
.status h1 { font: 700 var(--s-56)/1.04 var(--display); margin: 8px 0 14px; }
.status-overall { display: flex; align-items: center; gap: 12px; background: var(--sheet); border-left: 6px solid var(--ok); padding: 16px 20px; margin: 8px 0 28px; }
.status-overall.is-bad { border-left-color: var(--danger); }
.status-overall .dot { width: 12px; height: 12px; }
.status-list { list-style: none; margin: 0 0 24px; padding: 0; background: var(--sheet); border-radius: 10px; }
.status-list li { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; align-items: center; padding: 24px 28px; }
.status-list li + li { border-top: 1px solid var(--rule); }
.st-name h2 { font: 700 var(--s-21)/1.25 var(--text); margin: 10px 0 4px; }
.st-name p { margin: 0; }
.st-note { margin-top: 6px !important; font-style: italic; }
.st-state { display: flex; gap: 12px; align-items: flex-start; }
.st-state .dot { width: 12px; height: 12px; margin-top: 6px; }
.st-state b { font-size: var(--s-17); }
.st-ok b { color: var(--ok); }
.st-warn b { color: var(--warning); }
.st-bad b { color: var(--danger); }
.dot.warn { background: var(--warning); }
.st-nums { display: flex; gap: 28px; margin: 0; }
.st-nums dt { font-size: var(--s-13); color: var(--ink-2); }
.st-nums dd { margin: 2px 0 0; font: 700 var(--s-28)/1.1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .status-list li { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; }
  .status h1 { font-size: var(--s-40); }
}

/* very small phones (320–360px) */
.logo { white-space: nowrap; }
.hero > * { min-width: 0; }
@media (max-width: 360px) {
  .wrap { padding: 0 14px; }
  .logo { font-size: 1.3rem; gap: 7px; }
  .logo svg { width: 22px; height: 22px; }
  .nav .btn-sm { padding: 0 11px; font-size: var(--s-13); height: 34px; }
  .hero h1 { font-size: 2.75rem; }
  .tag-band h2 { font-size: var(--s-28); }
  .tag-band { padding-left: 14px; padding-right: 14px; }
  .results li { grid-template-columns: 70px 1fr; gap: 10px; }
  .sev { padding: 4px 7px; }
}