/* Watch Ledger. Tokens/components come from vendor/theme.css; this file re-skins them and adds layout.
   No inline styles anywhere (the CSP forbids them): colour and size are classes or SVG attributes. */
:root {
  --bg: #e9eef0; --card: #f8fafb; --text: #12202a; --muted: #566975; --border: #d3dcdf;
  --accent: #0b6e8a; --accent-text: #ffffff; --danger: #b42318; --ok: #137a4b; --warn: #9a5b00; --bar: #0b6e8a; --rail: #0f1d25;
  --dc0: #0b6e8a; --dc1: #c2410c; --dc2: #6d4bb3; --dc3: #2f855a; --dc4: #b83280; --dc5: #8a6d00;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --display: "Bahnschrift", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #0b1317; --card: #121d23; --text: #e3edf0; --muted: #8fa3ad; --border: #23343c;
  --accent: #4cc3e0; --accent-text: #05161c; --danger: #ff8a7a; --ok: #4fd69a; --warn: #f0b24b; --bar: #4cc3e0; --rail: #070d10;
  --dc0: #4cc3e0; --dc1: #ff9a62; --dc2: #b59cff; --dc3: #5fd49b; --dc4: #ff8ccf; --dc5: #e6c04f;
}
body { font-family: system-ui, "Segoe UI", sans-serif; }
h1 { font: 600 26px/1.15 var(--display); letter-spacing: -.01em; }
h2 { font: 600 17px/1.2 var(--display); letter-spacing: -.005em; }
h3 { font: 600 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mono, .num, .code, td.t { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--rail); color: #dbe6ea; padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 8px; font: 600 16px var(--display); }
.brand .small { margin-left: auto; font: 11px var(--mono); border: 1px solid #2c4350; border-radius: 99px; padding: 1px 8px; color: #8fa3ad; }
.mark { width: 14px; height: 14px; border-radius: 4px; background: conic-gradient(var(--dc0) 0 33%, var(--dc1) 0 66%, var(--dc2) 0); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { color: #aebfc7; text-decoration: none; padding: 8px 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.side nav a:hover { background: #162a34; color: #fff; }
.side nav a.active { background: #1a3340; color: #fff; box-shadow: inset 3px 0 0 var(--dc0); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.side .input, .side .btn { background: #11222b; color: #dbe6ea; border-color: #2c4350; }
.badge { background: var(--dc1); color: #fff; border-radius: 99px; font: 600 11px var(--mono); padding: 1px 7px; }
.main { padding: 28px clamp(16px, 4vw, 44px) 60px; max-width: 1180px; width: 100%; outline: none; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
.lede { color: var(--muted); margin: 4px 0 18px; max-width: 70ch; }

.card { border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tile .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tile .v { font: 600 28px/1.1 var(--display); margin-top: 6px; letter-spacing: -.01em; }
.tile .s { color: var(--muted); font-size: 12px; margin-top: 4px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.small { font-size: 12px; }
.err { color: var(--danger); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field .input { min-width: 150px; }
.tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.tabs button { background: transparent; border: 0; padding: 5px 12px; color: var(--muted); font: inherit; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

/* device identity */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px 2px 7px; border: 1px solid var(--border); border-radius: 99px; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }
.dc0 { --dc: var(--dc0); } .dc1 { --dc: var(--dc1); } .dc2 { --dc: var(--dc2); } .dc3 { --dc: var(--dc3); } .dc4 { --dc: var(--dc4); } .dc5 { --dc: var(--dc5); }
.pill.warn { color: var(--warn); border-color: var(--warn); } .pill.warn .dot { background: var(--warn); }
.pill.bad { color: var(--danger); border-color: var(--danger); } .pill.bad .dot { background: var(--danger); }

/* signature: per-device activity lanes */
.lanes { overflow-x: auto; }
.lanes svg { display: block; min-width: 620px; width: 100%; height: auto; }
.lanes .lane-label { fill: var(--text); font: 12px system-ui; }
.lanes .lane-base { stroke: var(--border); stroke-width: 1; }
.lanes .tick { fill: var(--muted); font: 10px var(--mono); }
.lanes rect.b { fill: var(--dc); }
.lanes rect.b:hover { opacity: .75; }
.bars svg { width: 100%; height: auto; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 8px 0; }
.meter svg { width: 100%; height: 8px; grid-column: 1 / -1; }
.meter .track { fill: var(--border); } .meter .fill { fill: var(--dc, var(--accent)); }
.prog { width: 74px; height: 6px; display: inline-block; vertical-align: middle; }
.prog .track { fill: var(--border); } .prog .fill { fill: var(--accent); }

table { font-size: 13px; }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
td { vertical-align: middle; }
tr.click { cursor: pointer; } tr.click:hover, tr.click:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tablewrap { overflow-x: auto; }
td.title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.detail td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.code { font-size: 26px; letter-spacing: .22em; font-weight: 600; padding: 10px 16px; background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; display: inline-block; }
.confirm { font: 600 20px var(--mono); letter-spacing: .16em; color: var(--accent); }
.steps { margin: 6px 0 0; padding-left: 20px; } .steps li { margin: 4px 0; }
.note { border-left: 3px solid var(--accent); padding: 4px 12px; color: var(--muted); }
.dev { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dev .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.dev.pendingcard { border-color: var(--dc1); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.empty { text-align: center; padding: 30px 10px; color: var(--muted); }
pre.detail { margin: 0; font: 12px/1.4 var(--mono); white-space: pre-wrap; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .card { width: min(400px, 100%); }
.toast { background: var(--rail); color: #fff; border-radius: 10px; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px 14px; }
  .side nav { flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; }
  .side-foot { flex-direction: row; margin: 0 0 0 auto; }
  .main { padding-top: 18px; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .side nav a { transition: background .12s, border-color .12s; } }

a.btn { text-decoration: none; display: inline-block; }