/* R.A.S — racing HUD mood. Red from the app and its logo, cyan from the app's own readouts. */
:root{
  --accent:#ff4a4a;
  --accent-hover:#ff2c2c;
  --accent-soft:#ff4a4a22;
  --accent-2:#00e5ff;
  --tier-red:#ff3b3b;
  --tier-yellow:#ffd60a;
  --tier-white:#f2f2f2;
}
/* Dark text on the bright red keeps buttons and step numbers readable. */
.btn-primary,.skip-link,.loop li::before{color:#1a0505}
.loop li::before{background:linear-gradient(135deg,var(--accent),#ff8a4a)}
.eyebrow{color:var(--accent-2)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--accent:#c81e1e;--accent-hover:#a51818;--accent-soft:#c81e1e17;--accent-2:#0e7490;--tier-red:#c81e1e;--tier-yellow:#9a6b00;--tier-white:#52525b}
  :root:not([data-theme="dark"]) .btn-primary,
  :root:not([data-theme="dark"]) .skip-link,
  :root:not([data-theme="dark"]) .loop li::before{color:#fff}
  :root:not([data-theme="dark"]) .eyebrow{color:#0e7490}
}
:root[data-theme="light"]{--accent:#c81e1e;--accent-hover:#a51818;--accent-soft:#c81e1e17;--accent-2:#0e7490;--tier-red:#c81e1e;--tier-yellow:#9a6b00;--tier-white:#52525b}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .loop li::before{color:#fff}
:root[data-theme="light"] .eyebrow{color:#0e7490}

/* ---- R.A.S pieces ---- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tier-grid > *{min-width:0}
.tier{
  padding:var(--space-5);border-radius:var(--radius-lg);background:var(--bg-elevated);
  border:1px solid var(--border-subtle);border-top:3px solid var(--tier-c,var(--accent));
}
.tier-red{--tier-c:var(--tier-red)}
.tier-yellow{--tier-c:var(--tier-yellow)}
.tier-white{--tier-c:var(--tier-white)}
.tier h3{font-size:1.05rem;margin-bottom:var(--space-2)}
.tier .tier-rule{font-family:var(--font-mono);font-size:.78rem;color:var(--tier-c);margin-bottom:var(--space-3)}
.tier p{font-size:.92rem;color:var(--text-secondary);margin:0}
.tier-bracket{display:block;width:72px;height:44px;margin-bottom:var(--space-4);color:var(--tier-c)}
@media (max-width:900px){.tier-grid{grid-template-columns:1fr}}

.frame-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);align-items:start}
.frame-grid > *{min-width:0}
.frame-grid .shot-caption{text-align:left}
.frame-grid figure{margin:0}
.frame-wide{grid-column:1 / -1}
@media (max-width:900px){.frame-grid{grid-template-columns:1fr}}

.callout{
  padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));background:var(--accent-soft);
}
.callout p{color:var(--text-primary);margin:0}
.callout p + p{margin-top:var(--space-3);color:var(--text-secondary)}
.callout-warn{border-color:color-mix(in srgb,var(--tier-yellow) 45%,var(--border-subtle));background:color-mix(in srgb,var(--tier-yellow) 9%,transparent)}
.code-block{
  font-family:var(--font-mono);font-size:.82rem;line-height:1.7;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);
  color:var(--text-primary);overflow-x:auto;white-space:pre;margin:var(--space-3) 0 var(--space-4);
}
.legal-copy-steps{list-style:decimal;margin:0 0 0 1.2rem;color:var(--text-secondary)}
.legal-copy-steps li{margin-bottom:var(--space-3);font-size:.92rem;line-height:1.6;padding-left:.2rem}
.legal-copy-steps strong{color:var(--text-primary)}
.status-note{
  display:inline-block;margin-left:.5rem;vertical-align:middle;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:.18rem .55rem;border-radius:var(--radius-full);color:var(--accent);background:var(--accent-soft);
}