:root { color-scheme: dark; --bg: #071019; --panel: #0e1a25; --line: #355369; --text: #f4f7fa; --muted: #b7c5d1; --cyan: #63e2de; --amber: #ffd278; --red: #ff8990; --green: #72e4ad; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 18% 8%, #153044 0, var(--bg) 42%); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #85efeb; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within { outline: 3px solid #fff; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 40; top: -4rem; left: 1rem; background: #fff; color: #000; padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }
main { max-width: 1440px; min-height: 100vh; margin-right: 392px; padding: 6vw 5vw 5rem; }
.eyebrow { margin: 0 0 .4rem; color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1 { max-width: 760px; margin: 0; font-size: clamp(2.7rem, 6vw, 6rem); line-height: .96; letter-spacing: -.055em; }
.hero-copy { max-width: 760px; color: var(--muted); font-size: 1.05rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
button, .file-button { border: 1px solid #668aa3; border-radius: 999px; background: #132a3a; color: #fff; padding: .68rem 1rem; font: inherit; font-weight: 750; cursor: pointer; }
#status-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.active { display: inline-flex; align-items: center; gap: .9rem; max-width: 100%; margin-top: 1rem; border: 1px solid #47758f; border-radius: 14px; background: #0d2130; padding: .75rem 1rem; }
.active small, .active strong { display: block; overflow-wrap: anywhere; }
.active small, .refreshed, .refresh-policy { color: var(--muted); }
.refresh-policy { max-width: 760px; margin: .2rem 0; font-size: .8rem; }
.summary, .mainline, .history, .tasks, .guards, .lineage { margin-top: 5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin: 0 0 .7rem; font-size: 1.5rem; }
.metric-grid, .lineage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.metric-grid article, .lineage-grid a { border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 26, 37, .88); padding: 1.1rem; }
.metric-grid span, .metric-grid small, .lineage-grid span, .lineage-grid small { display: block; color: var(--muted); }
.metric-grid strong { display: block; margin: .25rem 0; font-size: 1.4rem; }
.lineage-grid a { color: inherit; text-decoration: none; }
.lineage-grid strong { display: block; margin: .25rem 0; color: var(--cyan); font-size: 1.2rem; }
.source-line { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-bottom: 1rem; color: var(--muted); font-size: .8rem; }
.source-line strong { color: var(--text); }
.mainline-card { border: 1px solid var(--line); border-radius: 18px; background: rgba(14, 26, 37, .92); padding: 1.1rem; }
.mainline-card header { display: flex; align-items: center; gap: .8rem; }
.mainline-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 1.2rem; }
.mainline-card > p { color: var(--muted); }
.evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; }
.evidence-grid div { display: block; border-top: 1px solid var(--line); padding-top: .55rem; }
.evidence-grid dd { margin-top: .15rem; font-size: .88rem; }
.history-list { display: grid; gap: .7rem; }
.history-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(14, 26, 37, .88); padding: .9rem 1rem; }
.history-card h3, .history-card p { margin: 0; }
.history-card h3 { overflow-wrap: anywhere; font-size: 1rem; }
.history-card > p { margin-top: .35rem; color: var(--muted); font-size: .8rem; }
.history-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; background: rgba(14, 26, 37, .88); }
th, td { min-width: 8rem; padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { color: var(--muted); font-size: .78rem; }
.guard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.guard-grid div { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: .65rem .8rem; overflow-wrap: anywhere; }
.guard-grid div[data-valid="true"] strong { color: var(--green); }
.guard-grid div[data-valid="false"] strong, #safety-contract[data-valid="false"] { color: var(--amber); }
.executor-panel { position: fixed; z-index: 10; inset: 1rem 1rem 1rem auto; width: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: rgba(8, 18, 27, .98); box-shadow: 0 20px 70px #000b; padding: 1rem; }
.panel-head { position: sticky; z-index: 2; top: -1rem; display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; margin: -1rem -1rem 0; padding: 1rem; border-bottom: 1px solid var(--line); background: #0a151f; }
.panel-head h2 { margin: 0; font-size: 1.25rem; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px #50d4d022; }
.stale-banner { display: grid; gap: .2rem; margin: .8rem 0; border: 2px solid var(--amber); border-radius: 10px; background: #36270d; color: #fff0c7; padding: .75rem; }
.stale-banner span { font-size: .78rem; }
.executor-list { display: grid; gap: .75rem; }
.executor-card { border: 1px solid var(--line); border-left: 4px solid #8ba0b2; border-radius: 13px; background: var(--panel); padding: .85rem; }
.executor-card[data-state="RUNNING"], .executor-card[data-state="CLAIMED"] { border-left-color: var(--cyan); }
.executor-card[data-state="PASS"] { border-left-color: var(--green); }
.executor-card[data-state="WAITING_OWNER"], .executor-card[data-state="BLOCKED"], .executor-card[data-state="STALE"] { border-left-color: var(--amber); }
.executor-card[data-state="FAIL"] { border-left-color: var(--red); }
.executor-card header { display: grid; grid-template-columns: 34px 1fr auto; gap: .6rem; align-items: center; }
.executor-card header small, .executor-card header strong { display: block; }
.executor-card header small { color: var(--muted); font-size: .7rem; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #557187; border-radius: 10px; color: var(--cyan); background: #142633; font-weight: 900; }
.state { border: 1px solid #557187; border-radius: 999px; padding: .18rem .48rem; white-space: nowrap; font-size: .68rem; font-weight: 800; }
dl { display: grid; gap: .35rem; margin: .75rem 0 0; }
dl div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .4rem; }
dt { color: var(--muted); font-size: .72rem; }
dd { margin: 0; overflow-wrap: anywhere; font-size: .76rem; }
.executor-card footer { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .76rem; }
.drawer-toggle, .drawer-close { display: none; }
noscript { position: fixed; z-index: 50; bottom: 0; left: 0; right: 0; background: #732; color: #fff; padding: 1rem; text-align: center; }

@media (max-width: 980px) {
  main { margin-right: 0; padding: 5rem 1.1rem 9rem; }
  .summary, .mainline, .history, .tasks, .guards, .lineage { margin-top: 4rem; }
  .drawer-toggle { display: block; position: fixed; z-index: 25; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 8px 35px #000a; }
  .drawer-close { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; font-size: 1.5rem; }
  .executor-panel { inset: auto 0 0; width: 100%; max-height: min(76vh, 720px); border-radius: 22px 22px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .2s ease, visibility .2s; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .executor-panel.drawer-open { transform: translateY(0); visibility: visible; }
}
@media (max-width: 560px) { .metric-grid, .lineage-grid, .guard-grid, .evidence-grid { grid-template-columns: 1fr; } .mainline-card header { align-items: flex-start; flex-direction: column; } h1 { font-size: clamp(2.6rem, 15vw, 4.5rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .executor-panel { transition: none; } }
@media (forced-colors: active) { .executor-card, .state { border: 2px solid CanvasText; } }