/* The shared UI kit. FROZEN - this is what makes the two dashboards look like
 * one product. Views compose these classes; they do not restyle them.
 *
 * Every rule below spends tokens from tokens.css. No literal colour, no literal
 * spacing outside the --s scale.
 */

/* [hidden] has to win. A class that sets `display` outranks the UA stylesheet's
 * [hidden] rule, which once left a sign-in screen painted over a loaded app. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink-1);
  font: 400 14px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ type */

.h1 { font: 600 22px/1.25 var(--font-body); letter-spacing: -.01em; margin: 0; }
.h2 { font: 600 17px/1.3 var(--font-body); margin: 0; }
.h3 { font: 600 14px/1.35 var(--font-body); margin: 0; }
.eyebrow { font: 600 11px/1.2 var(--font-body); text-transform: uppercase;
           letter-spacing: .07em; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px;
        font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- surfaces */

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.card-head .spacer { flex: 1; }
.card-body { padding: var(--s4); }
/* A padded card's head, which needs the gap a border gives the flush one. */
.card-title { margin-bottom: var(--s3); }

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s2); }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid { display: grid; gap: var(--s3); }
.cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* --------------------------------------------------------------- controls */

button, .btn {
  font: 500 13px/1 var(--font-body); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-1);
  border-radius: var(--r-md); padding: 8px 12px;
  transition: background .12s, border-color .12s;
}
button:hover, .btn:hover { background: var(--surface-1); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { filter: brightness(1.06); background: var(--accent); }
button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
button.quiet:hover { background: var(--surface-1); color: var(--ink-1); }
button.sm { padding: 5px 9px; font-size: 12px; }
button[disabled] { opacity: .45; cursor: default; }

/* Every text-ish input, whatever its type. The old list named four types, so
 * switching one field to type="email" silently dropped it back to the
 * browser's default control. Exclude only the types that are not boxes. */
select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]) {
  font: 400 13px/1.4 var(--font-body); color: var(--ink-1);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 7px 9px; min-width: 0;
}
textarea { resize: vertical; }
input::placeholder { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Segmented control - the shape for range and grain pickers. */
.seg { display: inline-flex; border: 1px solid var(--line-strong);
       border-radius: var(--r-md); overflow: hidden; }
.seg button { border: none; border-radius: 0; padding: 6px 11px; background: var(--bg); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); font-weight: 600; }

.field { display: flex; align-items: center; gap: var(--s2); }
.field > label { font-size: 12px; color: var(--ink-3); flex: 0 0 auto; }
.field > :not(label) { flex: 1; }
/* A button in a field is an action, not the input - it takes its own width.
 * Without this, "Add" beside an email box stretched to 665px. */
.field > button, .field > .btn { flex: 0 0 auto; }
/* An input has no intrinsic width worth respecting, so cap it where a field
 * shares a wide row; a fuller one can still override with its own class. */
.field > input { max-width: 420px; }
.field.stacked { flex-direction: column; align-items: stretch; gap: var(--s1); }
.field.stacked > label { text-align: left; }

/* A checkbox and its label are one control, so they share one hit target. */
.check { display: inline-flex; align-items: center; gap: var(--s1); cursor: pointer;
         font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.check input { accent-color: var(--accent); margin: 0; }

kbd { font: 500 11px/1 var(--font-mono); color: var(--ink-2);
      border: 1px solid var(--line-strong); border-bottom-width: 2px;
      border-radius: var(--r-sm); padding: 2px 5px; background: var(--surface-1); }

/* ---------------------------------------------------------------- chrome */

.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
  background: var(--bg); position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h); flex: 0 0 auto;
}
.wordmark { font: 600 15px/1 var(--font-body); letter-spacing: -.01em; }
.wordmark .thin { color: var(--ink-3); font-weight: 400; }

.tabs { display: flex; gap: var(--s1); padding: 0 var(--s5);
        border-bottom: 1px solid var(--line); background: var(--bg);
        overflow-x: auto; scrollbar-width: none;
        height: var(--tabs-h); position: sticky; top: var(--topbar-h); z-index: 19; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: none; background: none; border-radius: 0; color: var(--ink-2);
  padding: 10px var(--s3); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--ink-1); background: transparent; }
.tabs button[aria-selected="true"] { color: var(--ink-1); font-weight: 600;
                                     border-bottom-color: var(--accent); }

.toolbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
main { padding: var(--s5); max-width: 1480px; margin: 0 auto; }

/* ----------------------------------------------------------------- tiles */

.tile { background: var(--bg); border: 1px solid var(--line);
        border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.tile .value { font: 600 26px/1.15 var(--font-body); font-variant-numeric: tabular-nums;
               letter-spacing: -.02em; margin: var(--s1) 0 0; }
.tile .unit { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.tile .delta { font-size: 12px; font-weight: 500; margin-top: 2px; }
.tile .delta.up { color: var(--good); }
.tile .delta.down { color: var(--critical); }
.tile .delta.flat { color: var(--ink-3); }

/* ----------------------------------------------------------------- pills */

.pill { display: inline-flex; align-items: center; gap: 4px;
        font: 500 11.5px/1 var(--font-body); padding: 4px 8px;
        border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
        white-space: nowrap; }
.pill.accent { background: var(--accent-weak); color: var(--accent); }
.pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pill.warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.pill.serious { background: color-mix(in srgb, var(--serious) 14%, transparent); color: var(--serious); }
.pill.critical { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-1);
  text-align: left; font: 600 11px/1.2 var(--font-body); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead th.right, td.right { text-align: right; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink-1); }
thead th[aria-sort="ascending"]::after { content: ' \2191'; color: var(--accent); }
thead th[aria-sort="descending"]::after { content: ' \2193'; color: var(--accent); }
tbody td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-1); }
tbody tr[aria-selected="true"] { background: var(--accent-weak); }

/* -------------------------------------------------------------- feedback */

.empty { color: var(--ink-3); text-align: center; padding: var(--s6) var(--s4); font-size: 13.5px; }
.note { font-size: 12.5px; color: var(--ink-3); }
.note.warn { color: var(--warning); }

.toast { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%);
         background: var(--ink-1); color: var(--bg); padding: 9px 16px;
         border-radius: var(--r-pill); font-size: 13px; z-index: 80;
         box-shadow: var(--shadow-2); }
.toast.bad { background: var(--critical); color: #fff; }

.tip { position: fixed; pointer-events: none; z-index: 90; opacity: 0;
       background: var(--bg); border: 1px solid var(--line-strong);
       border-radius: var(--r-md); padding: var(--s2) var(--s3); font-size: 12.5px;
       box-shadow: var(--shadow-2); min-width: 130px; transition: opacity .1s; }
.tip .t-title { font-weight: 600; margin-bottom: var(--s1); }
.tip .t-row { display: flex; justify-content: space-between; gap: var(--s3); }
.tip .t-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.chip { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

/* ------------------------------------------------------------------ bars */
/* HTML, not SVG: a responsive viewBox needs preserveAspectRatio="none", which
 * scales text non-uniformly and leaves every label stretched. */
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto;
           align-items: center; gap: var(--s3); }
.bar-label { font-size: 13px; color: var(--ink-2); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--surface-2); border-radius: 2px; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.bar-value { font-size: 12.5px; color: var(--ink-2); min-width: 56px; text-align: right;
             font-variant-numeric: tabular-nums; }
.bar-row:hover .bar-label { color: var(--ink-1); }

/* ----------------------------------------------------------------- charts */

figure { margin: 0; }
/* charts.js measures this box and draws the SVG at its true pixel width. */
.plot { width: 100%; min-width: 0; }
svg { display: block; width: 100%; overflow: visible; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-label { font: 400 11px var(--font-body); fill: var(--ink-3); }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.legend span { display: inline-flex; align-items: center; gap: 6px;
               font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  main, .topbar, .tabs, .toolbar { padding-left: var(--s4); padding-right: var(--s4); }
  .cols-2 { grid-template-columns: 1fr; }
  .drawer { padding: var(--s4); }
  .drawer-bar { margin-top: calc(var(--s4) * -1); }
}

/* -------------------------------------------------------------- overlays */
/* One scrim, one drawer, one dialog for the whole console. The drawer is for a
 * record you opened from a list and will close again; the dialog is for a
 * decision that blocks. Both sit above the sticky chrome. */

.scrim { position: fixed; inset: 0; z-index: 40;
         background: color-mix(in srgb, var(--ink-1) 30%, transparent); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(680px, 100%);
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
  overflow: auto; padding: var(--s4) var(--s5) var(--s6);
}
.drawer-bar {
  position: sticky; top: calc(var(--s4) * -1); z-index: 1;
  margin: calc(var(--s4) * -1) 0 var(--s4); padding: var(--s3) 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}

dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5);
  background: var(--bg); color: var(--ink-1);
  width: min(560px, calc(100vw - var(--s6))); box-shadow: var(--shadow-2);
}
dialog::backdrop { background: color-mix(in srgb, var(--ink-1) 35%, transparent); }
dialog form { display: flex; flex-direction: column; gap: var(--s3); }
dialog .h2 { margin-bottom: var(--s1); }
dialog .field.stacked > label { font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------------- gate */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
        background: var(--surface-1); }
.gate-card { width: min(400px, 100%); background: var(--bg);
             border: 1px solid var(--line); border-radius: var(--r-lg);
             padding: var(--s6) var(--s5); text-align: center; box-shadow: var(--shadow-1); }
.gate-card .wordmark { font-size: 18px; }
.gate-card p { margin: var(--s3) 0 var(--s4); font-size: 13.5px; }
.gate-card .note { margin-bottom: 0; min-height: 1.2em; }
#avatar { width: 24px; height: 24px; border-radius: 50%; }

/* ----------------------------------------------------------------- access */
/* The one page owned by the shell rather than a view. */
.access-head { display: flex; flex-direction: column; gap: var(--s1); }
.access-head .note { margin: 0; }
.card.stack > .note { margin: 0; }