/* AuthPulse design system — static component replicas.
   Each class mirrors a component from the AuthPulseDesignSystem React bundle
   (Badge/Button/Card/Eyebrow/Icon/IconButton/Logo/Panel/Stat/Tag, diagnostic
   PulseMeter/PulseTrace/RecordBlock/StatusRow/VerdictBadge, feedback
   Callout/Dialog/Toast/Tooltip, forms, navigation Accordion/Tabs, telemetry
   EventRow/EventStream/EventTrace/GeoBars/MetaGrid/ProviderHealth/
   SeverityBadge/Sparkline/StatTile) as zero-JS CSS. Interactive state
   (hover/active) is done with CSS pseudo-classes; disclosure with
   <details>/<summary>. Anything genuinely dynamic stays in the app bundle.

   Requires tokens.css. All grounds respect .ap-dark / .ap-paper scoping. */

/* ── Logo ─────────────────────────────────────────────────────────────────
   Mark is geometry (inline SVG); the wordmark is live type in Plex Sans.
   tone=paper on ink grounds, tone=ink on paper grounds. */
.ap-logo { display:inline-flex; align-items:center; gap:0.34em; text-decoration:none; }
.ap-logo svg { display:block; flex:0 0 auto; }
.ap-logo .ap-wordmark {
  font: var(--weight-semibold) 1em/1 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ap-logo--paper .ap-wordmark { color: var(--paper-100); }

/* ── Button ─────────────────────────────────────────────────────────────── */
.ap-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-height); padding:0 var(--space-5);
  font: var(--weight-medium) var(--size-small)/1 var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--action-primary-text); background: var(--action-primary-bg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: var(--transition-control);
}
.ap-btn:hover  { background: var(--action-primary-bg-hover); }
.ap-btn:active { transform: translateY(1px); }
.ap-btn--accent { background:var(--action-accent-bg); color:var(--action-accent-text); }
.ap-btn--accent:hover { background: var(--action-accent-bg-hover); }
.ap-btn--secondary {
  background:transparent; color:var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ap-btn--secondary:hover { background: var(--bg-sunken); }
.ap-btn--ghost { background:transparent; color:var(--text-secondary); }
.ap-btn--ghost:hover { background: var(--bg-sunken); color: var(--text-primary); }
.ap-btn--danger { background:var(--crimson-600); color:#fff; }
.ap-btn--danger:hover { background: var(--crimson-700); }

.ap-btn--sm { height:var(--control-height-sm); padding:0 var(--space-3); font:var(--weight-medium) var(--size-micro)/1 var(--font-sans); }
.ap-btn--lg { height:var(--control-height-lg); padding:0 var(--space-6); font:var(--weight-semibold) var(--size-body)/1 var(--font-sans); }
.ap-btn--block { display:flex; width:100%; }

/* ── Eyebrow / machine label ──────────────────────────────────────────────
   (.ap-label itself lives in tokens.css base layer.) */
.ap-eyebrow { display:flex; align-items:baseline; gap:var(--space-3); }
.ap-eyebrow .ap-eyebrow-index { color: var(--text-accent); }

/* ── Panel (Card raised) ────────────────────────────────────────────────── */
.ap-panel {
  background: var(--panel-bg, var(--bg-raised));
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--panel-highlight);
}
.ap-panel--flat { box-shadow:none; }

/* ── Stat ───────────────────────────────────────────────────────────────── */
.ap-stat { }
.ap-stat .ap-stat-value {
  font: var(--weight-semibold) var(--size-h1)/1 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ap-stat .ap-stat-label {
  font: var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted); margin-top: var(--space-3);
}
.ap-stat .ap-stat-note { font: var(--type-small); color:var(--text-secondary); margin-top:var(--space-2); }
.ap-stat--pass .ap-stat-value { color: var(--verdict-pass); }
.ap-stat--warn .ap-stat-value { color: var(--verdict-warn); }
.ap-stat--fail .ap-stat-value { color: var(--verdict-fail); }
.ap-stat--center { text-align:center; }

/* ── VerdictBadge ───────────────────────────────────────────────────────── */
.ap-verdict {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform:uppercase;
  padding: var(--space-05) var(--space-3) var(--space-05) var(--space-2);
  border-radius: var(--radius-xs);
  border-left: 2px solid;
}
.ap-verdict .ap-dot { width:var(--swatch-size); height:var(--swatch-size); border-radius:1px; flex:0 0 auto; }
.ap-verdict--pass   { color:var(--verdict-pass-fg);   background:var(--verdict-pass-soft);   border-color:var(--verdict-pass); }
.ap-verdict--pass .ap-dot   { background:var(--verdict-pass); }
.ap-verdict--warn   { color:var(--verdict-warn-fg);   background:var(--verdict-warn-soft);   border-color:var(--verdict-warn); }
.ap-verdict--warn .ap-dot   { background:var(--verdict-warn); }
.ap-verdict--fail   { color:var(--verdict-fail-fg);   background:var(--verdict-fail-soft);   border-color:var(--verdict-fail); }
.ap-verdict--fail .ap-dot   { background:var(--verdict-fail); }
.ap-verdict--unknown { color:var(--verdict-unknown-fg); background:var(--verdict-unknown-soft); border-color:var(--verdict-unknown); }
.ap-verdict--unknown .ap-dot { background:var(--verdict-unknown); }
.ap-verdict--lg { font:var(--type-nano); padding:var(--space-1) var(--space-4); border-radius:var(--radius-sm); }

/* Verdict text colour for inline data positions (EventRow SPF/DKIM cells). */
.ap-v { text-transform:uppercase; letter-spacing:var(--tracking-label); }
.ap-v--pass { color: var(--verdict-pass); }
.ap-v--fail { color: var(--verdict-fail); }
.ap-v--warn, .ap-v--partial { color: var(--verdict-warn); }
.ap-v--none, .ap-v--unknown { color: var(--verdict-unknown); }

/* ── RecordBlock ──────────────────────────────────────────────────────────
   tone=ink: dark block (use on paper artefacts). tone=paper: sunken block
   (use on ink surfaces). */
.ap-record {
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ap-record-meta {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.ap-record-meta dl {
  display:flex; gap:var(--space-5); margin:0; flex-wrap:wrap;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted);
}
.ap-record-meta dt { display:inline; }
.ap-record-meta dd { display:inline; margin:0; color: var(--text-primary); }
.ap-record pre {
  margin:0; padding: var(--space-4);
  font: var(--type-record); font-variant-numeric: tabular-nums;
  color: var(--text-link);
  white-space: pre-wrap; word-break: break-all;
}
.ap-record-note {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border-hairline);
  font: var(--type-record); color: var(--text-muted);
}
/* tone=ink variant: the darkest block, sits on paper artefacts. */
.ap-record--ink {
  background: var(--ink-900);
  border-color: var(--border-inverse);
}
.ap-record--ink .ap-record-meta { border-color: var(--border-inverse); }
.ap-record--ink .ap-record-meta dd { color: var(--paper-200); }
.ap-record--ink .ap-record-meta dt { color: var(--ink-300); }
.ap-record--ink pre { color: var(--pulse-glow); }
.ap-record--ink .ap-record-note { border-color: var(--border-inverse); color: var(--ink-300); }

/* ── EventStream (static rows; live insertion is app behaviour) ─────────── */
.ap-events {
  background: var(--panel-bg, var(--bg-raised));
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--panel-highlight);
  overflow: hidden;
}
.ap-events-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.ap-events-title {
  display:flex; align-items:center; gap:var(--space-3);
  font: var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-primary);
}
.ap-events-meta { font: var(--type-nano); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted); }
.ap-events-cols,
.ap-ev {
  display:grid;
  grid-template-columns: minmax(44px,52px) minmax(0,1.35fr) minmax(0,1fr) minmax(44px,56px) 38px 38px minmax(60px,78px) 14px;
  gap: var(--space-2);
  padding: 0 var(--space-4);
}
.ap-events-cols {
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
  font: var(--type-nano); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted);
}
.ap-ev {
  align-items:center; height: var(--row-height);
  border-bottom: var(--border-width) solid var(--border-hairline);
  font: var(--type-data); font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.ap-ev:last-child { border-bottom: 0; }
.ap-ev > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ap-ev .c-time { color: var(--text-muted); }
.ap-ev .c-src, .ap-ev .c-vol { color: var(--text-primary); }
.ap-ev .c-vol { text-align:right; }
.ap-ev .c-disp { color: var(--text-muted); letter-spacing:var(--tracking-label); text-transform:uppercase; }
@media (max-width: 640px) {
  .ap-events-cols, .ap-ev { grid-template-columns: minmax(44px,52px) minmax(0,1.4fr) minmax(0,1fr) minmax(44px,56px) 38px 38px 14px; }
  .ap-events-cols .c-disp, .ap-ev .c-disp { display:none; }
}
.ap-events-foot {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border-hairline);
  font: var(--type-nano); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted);
}
.ap-live-dot { width:var(--swatch-size); height:var(--swatch-size); background:var(--verdict-pass); border-radius:1px; }

/* ── EventTrace (static ticks; heights are generated at build time) ─────── */
.ap-trace { position:relative; }
.ap-trace-baseline { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--trace-baseline); }
.ap-trace-row { position:relative; display:flex; align-items:stretch; gap:var(--tick-gap); justify-content:space-between; }
.ap-trace-col { display:grid; grid-template-rows:1fr 1fr; width:var(--tick-width); flex:0 0 auto; }
.ap-trace-col .up   { align-self:end;   width:var(--tick-width); background:var(--trace-pass); }
.ap-trace-col .down { align-self:start; width:var(--tick-width); background:var(--trace-fail); }
.ap-trace-label {
  display:flex; justify-content:space-between; margin-top:var(--space-2);
  font: var(--type-nano); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted);
}

/* ── Accordion (native disclosure) ──────────────────────────────────────── */
.ap-accordion { border-top: var(--rule); }
.ap-accordion details { border-bottom: var(--rule); }
.ap-accordion summary {
  list-style:none; cursor:pointer;
  display:flex; width:100%; box-sizing:border-box; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); padding: var(--space-5) 0;
  font: var(--weight-medium) var(--size-body)/1.4 var(--font-sans);
  color: var(--text-primary);
}
.ap-accordion summary::-webkit-details-marker { display:none; }
.ap-accordion summary .ap-acc-plus {
  font: var(--type-mono); color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.ap-accordion details[open] summary .ap-acc-plus { transform: rotate(45deg); }
.ap-accordion .ap-acc-body {
  font: var(--type-small); color: var(--text-secondary);
  max-width: var(--measure-prose); padding: 0 0 var(--space-5);
}

/* ── Callout ────────────────────────────────────────────────────────────── */
.ap-callout {
  display:flex; gap:var(--space-4); padding: var(--space-4);
  background: var(--bg-accent-soft);
  border: var(--border-width) solid var(--border-hairline);
  border-left: 2px solid var(--verdict-pass);
  border-radius: var(--radius-sm);
  font: var(--type-small); color: var(--text-secondary);
}
.ap-callout--warn  { border-left-color: var(--verdict-warn); }
.ap-callout--fail  { border-left-color: var(--verdict-fail); }

/* ── Tag / Badge (inline labels) ────────────────────────────────────────── */
.ap-tag {
  display:inline-block; font: var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color: var(--text-muted); border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-xs); padding: var(--space-05) var(--space-2);
}
.ap-tag--accent { color: var(--text-accent); border-color: var(--border-focus); }

/* ── Site chrome helpers ────────────────────────────────────────────────── */
.ap-header {
  position:sticky; top:0; z-index:30;
  background: rgba(11, 15, 20, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ap-container { max-width: var(--container-max); margin:0 auto; padding: 0 var(--space-8); }
.ap-container--narrow { max-width: var(--container-narrow); }
.ap-nav { display:flex; align-items:center; gap:var(--space-7); }
.ap-nav a {
  font: var(--weight-medium) var(--size-small)/1 var(--font-sans);
  color: var(--text-secondary); text-decoration:none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ap-nav a:hover { color: var(--text-primary); }
.ap-section { padding: var(--section-y) 0; }
.ap-section--sunken { background: var(--ink-950); border-top:1px solid rgba(255,255,255,0.07); border-bottom:1px solid rgba(255,255,255,0.07); }
@media (max-width: 900px) {
  .ap-container { padding: 0 var(--space-6); }
}

/* Reduced-motion / print handled in tokens.css base. */