/* CoreGuard — Incident Flight Recorder, shared styles (used by /incidents/* pages).
   Depends on the design tokens in home.v1.css (var(--line), --gap, --mono, …). The homepage #recorder
   keeps its own inline copy of these rules; this file is the standalone version for the Atlas pages. */
.fr{border:1px solid var(--line);border-radius:22px;max-width:var(--content);margin:0 auto;background:linear-gradient(180deg,rgba(20,22,29,.72),rgba(10,11,15,.5));backdrop-filter:blur(8px);overflow:hidden}
.fr-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.fr-ttl{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--soft)}
.fr-badge{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--amber);border:1px solid rgba(255,180,92,.4);border-radius:999px;padding:.25rem .6rem;background:rgba(255,180,92,.07)}
.fr-sub{font-family:var(--mono);font-size:.66rem;color:var(--dim);padding:10px 18px 0}
.fr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);padding:16px 18px}
.fr-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.fr .gauge{padding:10px 6px 8px}
.fr-sparkwrap{border:1px solid var(--line);border-radius:12px;background:#0a0b0f;margin-top:var(--gap);padding:8px 10px 4px}
.fr-sparkwrap svg{display:block;width:100%;height:auto}
.fr-sparklab{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:2px 0 4px}
.fr-right{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.fr-proc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.fr-log{list-style:none;margin:0;padding:2px 4px;border:1px solid var(--line);border-radius:12px;background:#0a0b0f;flex:1;overflow:auto;max-height:280px}
/* unlit rows are the INACTIVE (not-yet-reached) state while scrubbing; the static no-JS frame ships all rows lit */
.fr-ev{display:grid;grid-template-columns:44px 86px 1fr;gap:8px;align-items:baseline;font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--dim);padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);opacity:.6;transition:opacity .25s}
.fr-ev:last-child{border-bottom:none}
.fr-ev.on{opacity:1}
.fr-ev .fr-tm{color:var(--dim)}
.fr-ev b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.56rem}
.fr-obs b{color:var(--cyan)}.fr-int b{color:var(--violet)}.fr-alert b{color:var(--amber)}
.fr-foot{padding:4px 18px 18px}
.fr-controls{display:none;gap:12px;align-items:center}
html.js .fr-controls{display:flex}
.fr-play{font-family:var(--mono);font-size:.7rem;padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--tx);cursor:pointer;min-height:44px;min-width:92px}
.fr-play:hover{border-color:var(--violet)}
.fr-play:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* the SSD scenario's process value (MB/s, ~7 chars) is wider than the homepage's 46px % column
   (class is .fr-proc, not .proc — the value would otherwise wrap inside the fixed 46px track) */
.fr-proc .r{grid-template-columns:1fr auto}
.fr-proc .pc{white-space:nowrap;min-width:46px}
.fr-controls .wlrange{flex:1;margin-top:0}
.fr-clock{font-family:var(--mono);font-size:.64rem;color:var(--soft);min-width:15ch;text-align:right}
.fr-diag{font-family:var(--sans);font-size:.98rem;line-height:1.5;color:var(--tx);font-weight:600;margin:12px 0 0;min-height:3em}
/* the note is about the interactive slider — only show it once JS has enabled the controls */
.fr-note{font-family:var(--mono);font-size:.6rem;color:var(--dim);margin:8px 0 0;display:none}
html.js .fr-note{display:block}
html.js .fr-static{display:none}
.fr-static{padding:0 18px 16px;color:var(--soft);font-size:.9rem;line-height:1.6}
@media(max-width:860px){.fr-grid{grid-template-columns:1fr}.fr-log{max-height:220px}}
@media(max-width:560px){.fr-gauges{grid-template-columns:repeat(3,1fr)}.fr-head{padding:12px 14px}.fr-grid{padding:14px}.fr-badge{margin-left:0;flex-basis:100%}.fr-clock{display:none}}