/* Onboarding Assistant: the operator console.
   Dark-committed, after Linear's surfaces: near-black ground, hairline borders,
   three levels of ink, monospace for data. Colour is reserved for status, and a
   status always ships as a dot AND a word so meaning never rests on hue. */
:root{
  --bg:#08090a; --surface:#0f1011; --surface-2:#151617; --surface-3:#1a1b1d;
  --line:#1f2023; --line-soft:#17181a;
  --ink:#f7f8f8; --ink-2:#8a8f98; --ink-3:#5c6066;
  --accent:#5e6ad2; --accent-soft:rgba(94,106,210,.14);
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

header{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:20;
  background:rgba(8,9,10,.86);backdrop-filter:blur(10px)}
header .wrap{display:flex;align-items:center;gap:22px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand img{border-radius:6px;display:block}
nav{display:flex;gap:2px}
nav a{padding:5px 10px;border-radius:6px;color:var(--ink-2);font-size:13px;white-space:nowrap}
nav a.on,nav a:hover{color:var(--ink);background:var(--surface-2)}
header .right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--good)}

.crumb{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12.5px;margin:26px 0 8px}
.crumb a:hover{color:var(--ink-2)}
h1{font-size:25px;letter-spacing:-.02em;margin:0 0 6px;font-weight:600}
h1.top{margin-top:38px}
.sub{color:var(--ink-2);margin:0 0 26px;font-size:14.5px;max-width:66ch}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:32px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 17px}
.tile .k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.tile .v{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .n{font-size:12px;color:var(--ink-3);margin-top:5px}

section{margin-bottom:34px}
.head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.head h2{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0}
.head .c{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.head .more{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.head .more:hover{color:var(--ink-2)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.row{display:grid;align-items:center;gap:14px;padding:13px 17px;border-top:1px solid var(--line-soft)}
.row:first-child{border-top:0}
a.row:hover,.row.hit:hover{background:var(--surface-2)}
.t{font-weight:500;letter-spacing:-.005em}
.m{color:var(--ink-2);font-size:13px;min-width:0}
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.apps{display:flex;gap:5px;flex-wrap:wrap}
.app{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-2);font-family:var(--mono)}

.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;flex:none}
.st.good i{background:var(--good)} .st.good{color:#5ad25a}
.st.serious i{background:var(--serious)} .st.serious{color:var(--serious)}
.st.critical i{background:var(--critical)} .st.critical{color:#ef6b6b}
.st.idle i{background:var(--ink-3)} .st.idle{color:var(--ink-3)}
.st.run i{background:var(--warning);animation:b 1.4s infinite} .st.run{color:var(--warning)}
@keyframes b{0%,100%{opacity:1}50%{opacity:.25}}

.badge{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);
  color:var(--ink-3);background:var(--surface-2);white-space:nowrap}
.badge.warn{color:var(--warning);border-color:rgba(250,178,25,.25)}
.badge.acc{color:#98a0ea;border-color:rgba(94,106,210,.3);background:var(--accent-soft)}

.empty{padding:34px 17px;text-align:center;color:var(--ink-3);font-size:13.5px}
footer{border-top:1px solid var(--line-soft);margin-top:44px;padding:20px 0 52px;
  color:var(--ink-3);font-size:12.5px}

/* ---- a run's steps, each with the picture it was looking at ---- */
.step{border-top:1px solid var(--line-soft);padding:18px 0}
.step:first-child{border-top:0}
.step .bar{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.step .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);min-width:22px}
.step .act{font-family:var(--mono);font-size:11.5px;color:var(--accent);
  background:var(--accent-soft);padding:2px 7px;border-radius:5px}
.step .say{color:var(--ink);flex:1;min-width:220px}
.step .meta{margin-left:auto;display:flex;gap:10px;color:var(--ink-3);
  font-family:var(--mono);font-size:11.5px}
/* Capped and anchored to the top. A screen is mostly empty below the fold, so
   at full height one step pushes the next one off the page and the run stops
   being scannable. The whole frame is one click away. */
.shot{display:block;width:100%;max-height:380px;object-fit:cover;object-position:top;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.shot-wrap{position:relative;border-radius:8px;overflow:hidden;cursor:zoom-in}
.shot-wrap:after{content:"open full size";position:absolute;right:9px;bottom:9px;
  font-size:11px;padding:3px 8px;border-radius:5px;background:rgba(8,9,10,.82);
  color:var(--ink-2);border:1px solid var(--line);opacity:0;transition:opacity .12s}
.shot-wrap:hover:after{opacity:1}
.reason{color:var(--ink-2);font-size:12.5px;margin-top:9px;padding-left:12px;
  border-left:2px solid var(--line)}
.lapmark{display:flex;align-items:center;gap:10px;color:var(--warning);font-size:12px;
  letter-spacing:.03em;padding:12px 0;border-top:1px solid var(--line-soft)}
.lapmark:before,.lapmark:after{content:"";height:1px;background:rgba(250,178,25,.2);flex:1}

/* ---- the event log ---- */
.ev{display:grid;grid-template-columns:66px 128px 1fr;gap:14px;padding:9px 17px;
  border-top:1px solid var(--line-soft);font-size:13px;align-items:baseline}
.ev:first-child{border-top:0}
.ev .when{color:var(--ink-3);font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.ev .kind{font-family:var(--mono);font-size:11.5px}
.ev .what{color:var(--ink-2);min-width:0}
.k-run{color:#98a0ea} .k-step{color:var(--ink-3)} .k-loop{color:var(--warning)}
.k-rescue{color:var(--serious)} .k-rec{color:#5ad25a} .k-int{color:#98a0ea}
.k-over{color:var(--ink-3)}

.filters{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filters button{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  border-radius:7px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.filters button:hover{color:var(--ink);border-color:#2a2c30}
.filters button.on{background:var(--accent-soft);border-color:rgba(94,106,210,.35);color:#b3b9f0}

@media(max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .hide{display:none!important}
  .ev{grid-template-columns:64px 1fr}
}