/* The team's ops page (spec-dashboard.md § 5). Only the variables in tokens.css (a copy of ui/tokens.css); numbers, versions
   and ids in IBM Plex Mono. No inline styles anywhere: the page's CSP allows style-src 'self' only. */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-style:normal;font-display:block;src:url(fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:block;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:block;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,select,input,textarea{font-family:inherit;font-size:var(--text-md);color:var(--text-primary)}
button{cursor:pointer;transition:background-color var(--dur-hover) var(--ease-standard),border-color var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard)}
button:disabled{cursor:not-allowed;opacity:.4}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono,.num{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sub{font-size:var(--text-sm);color:var(--text-secondary)}
.label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-secondary)}
.wrap{max-width:1180px;margin:0 auto;padding:28px 16px 96px}
.center{min-height:70vh;display:flex;align-items:center;justify-content:center}

/* ---------------------------------------------------------------- the bar on top */
.top{position:sticky;top:0;z-index:5;background:var(--bg-sidebar);border-bottom:1px solid var(--border)}
.top .in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{border-radius:var(--radius-md);display:block}
.brand .nm{font-weight:var(--weight-semibold);font-size:var(--text-lg)}
.brand .cloud{font-size:var(--text-xs);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-pill);padding:1px 8px}
.tabs{display:flex;gap:4px;flex:1 1 auto}
.tabs a{text-decoration:none;font-size:var(--text-md);padding:6px 12px;border-radius:var(--radius-sm);color:var(--text-secondary)}
.tabs a:hover{color:var(--text-primary);background:var(--bg-card)}
.tabs a.on{color:var(--on-accent);background:var(--accent);font-weight:var(--weight-semibold)}
.tabs .count{margin-left:6px;font-size:var(--text-xs)}
.who{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------------------------------------------------------------- controls */
.btn{min-height:var(--control-md);padding:0 16px;border:0;border-radius:var(--radius-box);background:var(--accent);color:var(--on-accent);font-weight:var(--weight-semibold)}
.btn:hover:not(:disabled){background:var(--accent-hover)}
.btn.quiet{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong);font-weight:var(--weight-medium)}
.btn.quiet:hover:not(:disabled){border-color:var(--accent);background:transparent}
.btn.sm{min-height:var(--control-sm);padding:0 12px}
.field{min-height:var(--control-lg);width:100%;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 12px;font-size:var(--text-base)}
.field:focus,select:focus,textarea:focus{border-color:var(--accent)}
.field.code{font-family:var(--font-mono);letter-spacing:.3em;text-align:center;font-size:var(--text-xl)}
select{min-height:var(--control-sm);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 8px}
textarea{width:100%;min-height:110px;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 12px;resize:vertical;line-height:1.45}
.seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);flex-wrap:wrap}
.seg button{min-height:28px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:transparent;font-size:var(--text-sm)}
.seg button.on{background:var(--accent);color:var(--on-accent);font-weight:var(--weight-semibold)}
.err{font-size:var(--text-sm);color:var(--danger-text)}
.ok{font-size:var(--text-sm);color:var(--success)}

/* ---------------------------------------------------------------- sign-in */
.gate{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.gate h1{font-size:var(--text-2xl);font-weight:var(--weight-black);font-variation-settings:"opsz" 96;letter-spacing:var(--tracking-title);margin:0}
.gate form{display:flex;flex-direction:column;gap:10px}
.gate .qr{align-self:center;background:var(--lift);padding:10px;border:1px solid var(--border);border-radius:var(--radius-md)}
.gate .qr img{display:block;width:180px;height:180px}
.gate .secret{font-family:var(--font-mono);font-size:var(--text-sm);overflow-wrap:anywhere;background:var(--bg-card);padding:8px 10px;border-radius:var(--radius-sm);user-select:all}

/* ---------------------------------------------------------------- panels */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 18px}
.head h1{font-size:var(--text-2xl);font-weight:var(--weight-black);font-variation-settings:"opsz" 96;letter-spacing:var(--tracking-title);margin:0}
.head .tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
section{margin-top:28px}
section > h2{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0 0 4px}
section > .sub{margin:0 0 12px}
.card{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.tile{background:var(--bg-sidebar);border:1px solid var(--border);border-radius:var(--radius-xl);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-2xl);font-weight:var(--weight-medium);line-height:1.1}
.tile .v small{font-size:var(--text-md);color:var(--text-secondary);font-weight:var(--weight-regular)}
.tile .s{font-size:var(--text-xs);color:var(--text-secondary)}
.tile.bad .v{color:var(--danger-text)}
.tile.link{text-decoration:none}
.tile.link:hover{border-color:var(--border-strong)}

.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--border-row)}
.alert:first-child{border-top:0}
.alert .t{flex:1 1 auto;min-width:0}
.sev{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-label);border-radius:var(--radius-pill);padding:1px 8px;flex:0 0 auto}
.sev.urgent{background:var(--danger-fill);color:var(--on-danger)}
.sev.warn{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}
.sev.info{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border)}

/* tables: one line a row, scroll sideways inside the card on a narrow screen */
.scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-sidebar)}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
th{font-weight:var(--weight-medium);color:var(--text-secondary);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:var(--text-xs)}
th.num{text-align:right}
td{padding:7px 10px;border-top:1px solid var(--border-row);vertical-align:top}
tr:first-child td{border-top:0}
tr.low td{background:var(--danger-bg)}
tr.low td.pct{color:var(--danger-text);font-weight:var(--weight-medium)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--bg-selected)}
td.what{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.nowrap{white-space:nowrap}
.empty{padding:22px 16px;color:var(--text-secondary);font-size:var(--text-sm)}

.pill{display:inline-block;font-size:var(--text-xs);border-radius:var(--radius-pill);padding:1px 8px;border:1px solid var(--border);white-space:nowrap}
.pill.new{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pill.looking,.pill.waiting{border-color:var(--border-strong)}
.pill.fixed{color:var(--success);border-color:var(--success)}
.pill.wontfix,.pill.duplicate{color:var(--text-dim)}

/* the outcome colours: one per outcome, the same in the bars, the legend and the tables */
.o-done{fill:var(--success);background:var(--success)}
.o-partial{fill:var(--warning);background:var(--warning)}
.o-refused{fill:var(--cat-bass);background:var(--cat-bass)}
.o-died{fill:var(--danger-fill);background:var(--danger-fill)}
.o-cancelled{fill:var(--text-dim);background:var(--text-dim)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-secondary);margin:0 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
svg.chart{display:block;width:100%;overflow:visible}
svg.chart text{font-family:var(--font-mono);font-size:10px;fill:var(--text-secondary)}
svg.chart .axis{stroke:var(--border)}
svg.chart .grid{stroke:var(--border-row)}
svg.chart rect.bar:hover{opacity:.8}

/* ---------------------------------------------------------------- a report */
.back{font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none}
.back:hover{color:var(--text-primary)}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.words{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-base);line-height:1.5;margin:0}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;font-size:var(--text-sm);margin:0}
.kv dt{color:var(--text-secondary)}
.kv dd{margin:0;font-family:var(--font-mono);overflow-wrap:anywhere}
.side{display:flex;flex-direction:column;gap:12px;position:sticky;top:68px}
.side .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.side label{display:flex;flex-direction:column;gap:5px;font-size:var(--text-sm);color:var(--text-secondary)}
.side .field{min-height:var(--control-sm);font-size:var(--text-md)}

/* the log viewer: the report's bundle, unzipped in the browser and drawn as a timeline */
.job{margin-top:16px}
.job > h3{font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0 0 8px;font-family:var(--font-mono);overflow-wrap:anywhere}
svg.timeline{display:block;width:100%;cursor:crosshair}
svg.timeline text{font-family:var(--font-mono);font-size:10px;fill:var(--text-secondary)}
svg.timeline .band{fill:var(--bg-card)}
svg.timeline .band.alt{fill:var(--bg-selected)}
svg.timeline .band-label{fill:var(--text-primary)}
svg.timeline .lane{fill:var(--text-dim)}
svg.timeline .tool{stroke:var(--text-secondary);stroke-width:1.5}
svg.timeline .tool.bad{stroke:var(--danger-fill);stroke-width:2.5}
svg.timeline .note{fill:var(--text-dim)}
svg.timeline .fail{fill:var(--danger-fill)}
svg.timeline .axis{stroke:var(--border)}
.tl-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-secondary);margin:6px 0 10px}
.loglist{max-height:460px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-sidebar);font-family:var(--font-mono);font-size:var(--text-xs)}
.ll{display:grid;grid-template-columns:62px 104px minmax(0,1fr);gap:10px;padding:4px 10px;border-top:1px solid var(--border-row);cursor:default}
.ll:first-child{border-top:0}
.ll .at{color:var(--text-secondary);text-align:right}
.ll .ev{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.ll.bad{background:var(--danger-bg)}
.ll.bad .ev,.ll.bad .tx{color:var(--danger-text)}
.ll.step{background:var(--bg-card)}
.ll.step .tx{font-weight:var(--weight-medium)}
.ll.lit{outline:2px solid var(--accent);outline-offset:-2px}
.ll details summary{cursor:pointer;color:var(--text-secondary)}
.ll pre{margin:4px 0 0;white-space:pre-wrap}
.files details{border-top:1px solid var(--border-row);padding:8px 0}
.files summary{cursor:pointer;font-family:var(--font-mono);font-size:var(--text-sm)}
.files pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:var(--text-xs);max-height:360px;overflow:auto;background:var(--bg-card);padding:10px;border-radius:var(--radius-sm);margin:8px 0 0}

@media (max-width:900px){.detail{grid-template-columns:minmax(0,1fr)}.side{position:static}}
@media (max-width:560px){.tabs{order:3;flex-basis:100%}.who{display:none}.head h1{font-size:var(--text-xl)}.ll{grid-template-columns:50px minmax(0,1fr)}.ll .ev{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}