/* ═══════════════════════════════════════════════════════════════════
   alarm.css — demo-local styling for the approval-invalidation alarm
   ───────────────────────────────────────────────────────────────────
   NAMESPACE: every rule's key class is `ad-` (alarm-demo). Corvus holds
   a three-way-disjoint namespace guarantee — brand-core / `s-` site
   chrome / `pr-` proof district. `ad-` is a FOURTH, demo-scoped
   namespace that redefines nothing in any of the three.

   ZERO HEX: every value routes through a brand.css custom property —
   colour, type scale, spacing scale, radius scale, leading, tracking.
   No raw dimensional values are authored here (token-foundation I10).

   WHERE A `pr-` PRIMITIVE EXISTS, THE MARKUP COMPOSES IT and this file
   stays out of the way. The rules below cover the places where the
   proof district has no primitive yet — each one logged in
   STEWARD-GAPS.md rather than invented as a new `pr-` shape.
   ═══════════════════════════════════════════════════════════════════ */

/* ── OFFLINE FONT FALLBACK ────────────────────────────────────────
   The Corvus surfaces load Bricolage Grotesque / Instrument Sans /
   Instrument Serif from a font CDN. This prototype runs with no
   network by requirement, so the display faces are unavailable and the
   brand-core declarations that name them without a fallback would drop
   to the browser default serif. These rules append a system fallback
   stack — a degradation accommodation, not a restyle: the named brand
   face still wins wherever it is installed locally. Scoped to
   `body.ad-offline` so it cannot leak into any other surface.
   Logged in STEWARD-GAPS.md as a divergence.
   ──────────────────────────────────────────────────────────────── */
body.ad-offline h1,
body.ad-offline .h1,
body.ad-offline .h2,
body.ad-offline .brandmark,
body.ad-offline .btn,
body.ad-offline .panel h3 { font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif }
body.ad-offline .eyebrow,
body.ad-offline .label,
body.ad-offline .pull { font-family:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif }
body.ad-offline .mono,
body.ad-offline .chip { font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }

/* ── page frame ─────────────────────────────────────────────────── */
.ad-page{max-width:1080px;margin:0 auto;padding:var(--space-12) var(--space-gutter) var(--space-16)}
.ad-page-head{border-bottom:1px solid var(--hairline);padding-bottom:var(--space-8);margin-bottom:var(--space-8)}
.ad-view{margin-top:var(--space-10)}
.ad-foot{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--hairline);
  font-size:var(--text-micro);color:var(--muted);line-height:var(--leading-relaxed);letter-spacing:var(--track-mono)}
.ad-foot b{color:var(--ink-2);font-weight:400}

/* ── audience switch — two renderings, one store ────────────────── */
.ad-audience{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}
.ad-audience-label{font-family:"Space Mono",monospace;font-size:var(--text-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--muted);margin-right:var(--space-2)}
.ad-aud-btn{font-size:var(--text-small);padding:var(--space-2) var(--space-4)}
.ad-aud-btn[aria-pressed="true"]{border-color:color-mix(in oklab,var(--pr-for) 55%,var(--hairline));color:var(--ink)}

/* ── the fail-loud strip ────────────────────────────────────────── */
.ad-strip-mount{margin-bottom:var(--space-8)}

.ad-heartbeat{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  border:1px solid var(--hairline);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-mono);color:var(--muted);letter-spacing:var(--track-mono);background:var(--inset)}
.ad-heartbeat b{color:var(--ink-2);font-weight:400}
.ad-hb-dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--pr-tier-k);flex:none}
.ad-hb-sep{width:1px;height:var(--space-4);background:var(--hairline);flex:none}

/* THE ALARM. A safety surface that goes quiet when its own checker dies
   is worse than no surface — so the dead checker is the loudest state
   the page has. The hatched warn field is deliberately the same visual
   language as the district's pr-against--empty invalid state: this is
   an absence, and absences are holes here. */
.ad-alarm{border:1px solid var(--warn);border-left-width:var(--space-1);border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);
  background:repeating-linear-gradient(135deg,transparent 0 var(--space-2),
    color-mix(in oklab,var(--warn) 10%,transparent) var(--space-2) var(--space-4))}
.ad-alarm-lead{font-family:"Space Mono",monospace;font-size:var(--text-body-lg);letter-spacing:var(--track-caps);
  color:var(--warn);line-height:var(--leading-snug)}
.ad-alarm-body{margin-top:var(--space-3);color:var(--ink-2);font-size:var(--text-body);
  line-height:var(--leading-relaxed);max-width:66ch}
.ad-alarm-actions{margin-top:var(--space-4)}
.ad-alarm-meta{margin-top:var(--space-4);font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono)}
.ad-alarm-meta b{color:var(--ink-2);font-weight:400}

/* when the checker is down, the counts below it are de-authorised on
   screen rather than left looking current */
.ad-strip-alarmed ~ .ad-view .ad-summary,
.ad-strip-alarmed ~ .ad-view .pr-walk{opacity:.55;filter:saturate(.6)}
.ad-strip-alarmed ~ .ad-view .ad-summary::after{content:"from the last completed pass — not current";
  display:block;margin-top:var(--space-3);font-family:"Space Mono",monospace;font-size:var(--text-micro);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--warn)}

/* ── summary — exceptions, in words, never a gauge ──────────────── */
.ad-summary{margin-bottom:var(--space-8)}
.ad-summary-label{font-family:"Space Mono",monospace;font-size:var(--text-micro);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--muted)}
.ad-lead{margin-top:var(--space-4);font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:var(--text-h3);line-height:var(--leading-snug);letter-spacing:var(--track-tight);
  color:var(--ink);max-width:46ch}
.ad-counts{list-style:none;margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.ad-count{display:flex;align-items:baseline;gap:var(--space-3);font-size:var(--text-body-lg);color:var(--ink-2);
  line-height:var(--leading-snug)}
.ad-count-rank{flex:none;display:inline-grid;place-items:center;width:var(--space-6);height:var(--space-6);
  border:1px solid var(--hairline);border-radius:var(--radius-xs);
  font-size:var(--text-micro);color:var(--muted)}
.ad-count--none{color:var(--muted);font-size:var(--text-small)}
.ad-summary-rest{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hairline);
  font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono);line-height:var(--leading-relaxed)}

/* ── severity groups (composed on pr-walk altitudes) ────────────── */
.ad-group-why{margin-bottom:var(--space-4);color:var(--muted);font-size:var(--text-small);
  line-height:var(--leading-relaxed);max-width:70ch}
.ad-group-empty{font-family:"Space Mono",monospace;font-size:var(--text-micro);color:var(--muted);
  letter-spacing:var(--track-mono);padding:var(--space-3) 0}

/* ── exception rows + deck cards ────────────────────────────────── */
.ad-ex,.ad-card{display:flex;flex-direction:column;gap:var(--space-3)}
.ad-ex-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);justify-content:space-between}
.ad-n{font-size:var(--text-mono);color:var(--muted);letter-spacing:var(--track-mono);flex:none}
.ad-token{color:color-mix(in oklab,var(--muted) 60%,transparent)}
.ad-ex-title{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;font-weight:600;
  font-size:var(--text-body-lg);line-height:var(--leading-snug);letter-spacing:var(--track-tight);
  color:var(--ink);flex:1 1 min(44ch,100%);margin:0}
.ad-ex-body{color:var(--muted);font-size:var(--text-body);line-height:var(--leading-relaxed);max-width:72ch}

/* the sentence the prototype exists to make true */
.ad-caught{color:var(--ink-2);font-size:var(--text-body);line-height:var(--leading-relaxed);
  border-left:2px solid var(--warn);padding-left:var(--space-3);max-width:70ch}

.ad-approval{font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono);line-height:var(--leading-relaxed)}
.ad-approval b{color:var(--ink-2);font-weight:400}
.ad-hashline{font-size:var(--text-micro);color:color-mix(in oklab,var(--muted) 70%,transparent);letter-spacing:var(--track-mono)}
.ad-alsoin{font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono)}

/* status registers. `pr-claim-status` is composed as-is wherever the
   district covers the register; these two cover the registers it does
   not (see STEWARD-GAPS.md) and deliberately share its shape. */
.ad-status{display:inline-flex;align-items:center;gap:var(--space-2);flex:none;
  font-family:"Space Mono",monospace;font-size:var(--text-micro);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--muted)}
.ad-status::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--muted)}
.ad-status--alert{color:var(--warn)}
.ad-status--alert::before{background:var(--warn)}
.ad-status--open::before{background:var(--pr-tier-u)}

/* ── the word diff — what actually changed ─────────────────────── */
.ad-diff{border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--space-4);background:var(--inset)}
.ad-diff-label{display:block;font-size:var(--text-micro);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--space-2)}
.ad-diff-body{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--ink-2);max-width:74ch}
.ad-del{text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:var(--pr-against);color:var(--muted)}
.ad-ins{text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--pr-for);padding-bottom:1px}

/* ── editing ───────────────────────────────────────────────────── */
.ad-edit-label{display:block;font-size:var(--text-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
.ad-edit{width:100%;background:var(--inset);color:var(--ink-2);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);padding:var(--space-3);font-family:inherit;font-size:var(--text-small);
  line-height:var(--leading-relaxed);resize:vertical}
.ad-edit:focus{border-color:color-mix(in oklab,var(--pr-for) 50%,var(--hairline))}

.ad-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-1)}
.ad-act{font-size:var(--text-small);padding:var(--space-2) var(--space-4)}

.ad-jump{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;
  font-size:var(--text-micro);letter-spacing:var(--track-mono);color:var(--muted);
  border-bottom:1px dotted var(--muted)}
.ad-jump:hover{color:var(--ink-2)}

/* operator note — internal rendering only; composes the annotation
   rail's note sub-parts (see STEWARD-GAPS.md on standalone use) */
.ad-note{margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--hairline);
  font-size:var(--text-mono);line-height:var(--leading-loose);color:var(--muted)}

/* ── full deck ─────────────────────────────────────────────────── */
.ad-fulldeck{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--hairline)}
.ad-fulldeck-note{margin-top:var(--space-3);font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono);max-width:64ch}
#full-deck-list{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}
.ad-card--jumped{border-color:var(--pr-for)}

/* ── client view ───────────────────────────────────────────────── */
.ad-client{display:flex;flex-direction:column;gap:var(--space-6)}
.ad-client-deck{font-size:var(--text-micro);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
.ad-client-block h3{margin-top:0}
.ad-client-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.ad-client-item{display:flex;flex-direction:column;gap:var(--space-1);
  border-left:2px solid var(--hairline);padding-left:var(--space-4)}
.ad-client-title{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;font-weight:600;
  font-size:var(--text-body-lg);color:var(--ink);line-height:var(--leading-snug);letter-spacing:var(--track-tight)}
.ad-client-meta{font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono);line-height:var(--leading-relaxed)}
.ad-client-meta b{color:var(--ink-2);font-weight:400}
.ad-client-none{font-size:var(--text-mono);color:var(--muted);letter-spacing:var(--track-mono)}
.ad-client-foot{font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono);
  line-height:var(--leading-relaxed);max-width:76ch}

/* ── demo console ──────────────────────────────────────────────── */
.ad-console{margin-top:var(--space-12)}
.ad-console-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8)}
@media(max-width:760px){.ad-console-grid{grid-template-columns:1fr}}
.ad-console-card h3{margin-top:0}
.ad-console-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.ad-console-state{margin-top:var(--space-4);font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--track-mono)}

/* ── motion honesty ────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .ad-card--jumped{transition:none}
}