/* Vigie design system. Loaded once from base.html. No colour is written outside this file.
   Direction: grading labels and slabs. Neutral, cool surfaces; colour is reserved for risk. */
@layer tokens, base, components, pages;

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.de2f1fe81758.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext-wdth-normal.589f7bc0fac4.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    /* surfaces: the cool white of a top-loader, the blue-black of a sleeve */
    --ds-background: 216 26% 95%;
    --ds-foreground: 222 30% 12%;
    --ds-card: 0 0% 100%;
    --ds-muted: 216 22% 90%;
    --ds-muted-foreground: 220 14% 36%;
    --ds-border: 217 20% 82%;
    --ds-input: 217 18% 66%;
    --ds-stage: 222 30% 9%;                 /* behind video */
    --ds-stage-foreground: 216 26% 92%;
    /* interaction */
    --ds-primary: 228 69% 45%;
    --ds-primary-foreground: 0 0% 100%;
    --ds-ring: 228 86% 56%;
    --ds-destructive: 355 72% 44%;
    /* risk: the only saturated colours in the product */
    --ds-sev-alert: 355 72% 44%;      --ds-sev-alert-fg: 0 0% 100%;
    --ds-sev-warning: 36 100% 47%;    --ds-sev-warning-fg: 28 80% 10%;
    --ds-sev-notice: 218 18% 42%;     --ds-sev-notice-fg: 0 0% 100%;
    --ds-ok: 156 70% 26%;
    --ds-warning-text: 30 96% 28%;
    /* zone kinds: same hues as the live overlay drawn by the engine */
    --ds-zone-showcase: 0 75% 52%;    --ds-zone-sentinel: 285 52% 50%;  --ds-zone-browse: 203 80% 40%;
    --ds-zone-staff: 150 58% 32%;     --ds-zone-exit: 36 90% 40%;       --ds-zone-ignore: 220 6% 46%;
    /* holo: the foil shimmer, used only for something new that needs you */
    --ds-holo-1: 190 95% 55%; --ds-holo-2: 285 90% 66%; --ds-holo-3: 45 100% 60%;

    --ds-radius: .375rem; --ds-radius-sm: .25rem; --ds-radius-lg: .625rem;
    --ds-shadow-md: 0 10px 28px hsl(222 30% 12% / .10);
    --ds-shadow-lg: 0 24px 60px hsl(222 30% 12% / .22);

    --ds-ease-out: cubic-bezier(.25, 1, .5, 1); --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ds-motion-page: 220ms; --ds-motion-card: 240ms; --ds-motion-tap: 150ms; --ds-motion-glow: 3.2s;

    --ds-font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-icon-sm: 16px; --ds-icon-md: 18px; --ds-icon-lg: 20px;
    --ds-sidebar-w: 13.25rem; --ds-topbar-h: 3.75rem; --ds-tabbar-h: 4rem;
    color-scheme: light;
  }
  .dark {
    --ds-background: 224 26% 7%;
    --ds-foreground: 216 24% 93%;
    --ds-card: 224 24% 11%;
    --ds-muted: 224 20% 16%;
    --ds-muted-foreground: 218 14% 68%;
    --ds-border: 224 16% 22%;
    --ds-input: 224 14% 38%;
    --ds-stage: 224 30% 4%;
    --ds-primary: 226 92% 70%;
    --ds-primary-foreground: 226 50% 10%;
    --ds-ring: 226 96% 74%;
    --ds-destructive: 355 86% 66%;
    --ds-sev-alert: 355 82% 58%;      --ds-sev-alert-fg: 355 60% 8%;
    --ds-sev-warning: 38 100% 56%;    --ds-sev-warning-fg: 28 80% 10%;
    --ds-sev-notice: 218 18% 62%;     --ds-sev-notice-fg: 222 30% 10%;
    --ds-ok: 156 62% 52%;
    --ds-warning-text: 38 100% 62%;
    --ds-zone-showcase: 0 86% 68%;    --ds-zone-sentinel: 285 76% 74%;  --ds-zone-browse: 203 86% 64%;
    --ds-zone-staff: 150 56% 56%;     --ds-zone-exit: 38 96% 60%;       --ds-zone-ignore: 220 8% 66%;
    --ds-shadow-md: 0 10px 28px hsl(0 0% 0% / .45);
    --ds-shadow-lg: 0 24px 60px hsl(0 0% 0% / .6);
    color-scheme: dark;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --ds-motion-page: 1ms; --ds-motion-card: 1ms; --ds-motion-tap: 1ms; }
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100dvh; background: hsl(var(--ds-background)); color: hsl(var(--ds-foreground));
    font: 400 1rem/1.5 var(--ds-font-sans); font-stretch: 100%; -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { margin: 0; font-stretch: 80%; font-weight: 750; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
  h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.05rem; }
  p { margin: 0; }
  a { color: hsl(var(--ds-primary)); text-underline-offset: .18em; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden], [x-cloak] { display: none !important; }
  code { font-family: ui-monospace, monospace; font-size: .92em; padding: .05em .3em; border-radius: 3px; background: hsl(var(--ds-muted)); }
  :focus-visible { outline: 3px solid hsl(var(--ds-ring)); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
  ::selection { background: hsl(var(--ds-primary) / .22); }
  .lucide { flex: none; }
  .num { font-variant-numeric: tabular-nums; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 100; padding: .6rem .9rem; border-radius: var(--ds-radius);
    background: hsl(var(--ds-foreground)); color: hsl(var(--ds-background)); }
  .skip-link:focus { top: .5rem; }
}

@layer components {
  /* ---------- shell: never swapped ---------- */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--ds-sidebar-w); z-index: 30; display: flex; flex-direction: column;
    padding: 1rem .7rem; background: hsl(var(--ds-card)); border-right: 1px solid hsl(var(--ds-border));
  }
  .brand { display: flex; align-items: center; gap: .6rem; padding: .2rem .5rem 1.1rem; text-decoration: none; color: inherit; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-stretch: 70%; font-weight: 850; font-size: 1.5rem; letter-spacing: .01em; line-height: 1; }
  .nav { display: flex; flex-direction: column; gap: .15rem; }
  .nav__group { margin-top: 1.1rem; padding: 0 .6rem .3rem; font-size: .8rem; color: hsl(var(--ds-muted-foreground)); }
  .nav__link {
    display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: 0 .65rem; border-radius: var(--ds-radius);
    color: hsl(var(--ds-foreground)); text-decoration: none; font-weight: 550;
    transition: background var(--ds-motion-tap) var(--ds-ease-out);
  }
  .nav__link:hover { background: hsl(var(--ds-muted)); }
  .nav__link[aria-current="page"] { background: hsl(var(--ds-foreground)); color: hsl(var(--ds-background)); }
  .nav__count { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 1rem; text-align: center; font-size: .82rem; font-weight: 700;
    background: hsl(var(--ds-sev-alert)); color: hsl(var(--ds-sev-alert-fg)); }
  .nav__count[data-count="0"] { display: none; }
  .sidebar__foot { margin-top: auto; display: grid; gap: .4rem; padding: .6rem .4rem 0; border-top: 1px solid hsl(var(--ds-border)); }
  .who { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who small { display: block; color: hsl(var(--ds-muted-foreground)); }

  .shell-main { margin-left: var(--ds-sidebar-w); min-height: 100dvh; display: flex; flex-direction: column; }
  .topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    min-height: var(--ds-topbar-h); padding: .5rem 1.25rem; background: hsl(var(--ds-background) / .92);
    backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--ds-border));
  }
  .topbar__spacer { flex: 1; }
  #content { flex: 1; padding: 1.5rem 1.25rem 3rem; view-transition-name: content; outline: none; }

  .tabbar { display: none; }
  @media (max-width: 900px) {
    .sidebar { display: none; }
    .shell-main { margin-left: 0; padding-bottom: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom)); }
    .topbar { padding: .5rem .75rem; }
    #content { padding: 1rem .75rem 2rem; }
    .tabbar {
      position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
      height: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
      background: hsl(var(--ds-card)); border-top: 1px solid hsl(var(--ds-border));
    }
    .tabbar__link { position: relative; display: grid; place-items: center; align-content: center; gap: .1rem; font-size: .74rem; font-weight: 600;
      color: hsl(var(--ds-muted-foreground)); text-decoration: none; background: none; border: 0; cursor: pointer; }
    .tabbar__link[aria-current="page"] { color: hsl(var(--ds-foreground)); }
    .tabbar__link[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 2.4rem; height: 3px; background: hsl(var(--ds-foreground)); }
    .tabbar .nav__count { position: absolute; top: .35rem; left: calc(50% + .35rem); margin: 0; }
  }

  /* ---------- screen transitions (driven by htmx, see shell.js) ---------- */
  @keyframes vt-out { to { opacity: 0; transform: translateX(-18px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateX(18px); } }
  @keyframes vt-out-back { to { opacity: 0; transform: translateX(18px); } }
  @keyframes vt-in-back { from { opacity: 0; transform: translateX(-18px); } }
  /* Elements captured in a view transition do not respond to hit-testing while it runs, and by
     default the ROOT is captured: the whole page went dead for the length of every navigation.
     Only #content is captured here, so the shell (mode switch, navigation, sound) stays live;
     the overlay lets pointer events through to it. */
  :root { view-transition-name: none; }
  ::view-transition { pointer-events: none; }
  ::view-transition-old(content) { animation: vt-out var(--ds-motion-page) var(--ds-ease-out) both; }
  ::view-transition-new(content) { animation: vt-in var(--ds-motion-page) var(--ds-ease-out) both; }
  .nav-back::view-transition-old(content) { animation-name: vt-out-back; }
  .nav-back::view-transition-new(content) { animation-name: vt-in-back; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(content), ::view-transition-new(content) { animation: none; }
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem;
    border: 1px solid transparent; border-radius: var(--ds-radius); background: hsl(var(--ds-primary)); color: hsl(var(--ds-primary-foreground));
    font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap; touch-action: manipulation;
    transition: filter var(--ds-motion-tap) var(--ds-ease-out), transform var(--ds-motion-tap) var(--ds-ease-out), background var(--ds-motion-tap) var(--ds-ease-out);
  }
  .btn:hover { filter: brightness(1.08); }
  .btn:active { transform: translateY(1px); }
  .btn[disabled], .btn.htmx-request { opacity: .55; pointer-events: none; }
  .btn--ink { background: hsl(var(--ds-foreground)); color: hsl(var(--ds-background)); }
  .btn--outline { background: hsl(var(--ds-card)); color: hsl(var(--ds-foreground)); border-color: hsl(var(--ds-input)); }
  .btn--outline:hover { background: hsl(var(--ds-muted)); filter: none; }
  .btn--ghost { background: transparent; color: hsl(var(--ds-foreground)); }
  .btn--ghost:hover { background: hsl(var(--ds-muted)); filter: none; }
  .btn--danger { background: hsl(var(--ds-destructive)); color: hsl(var(--ds-sev-alert-fg)); }
  .btn--sm { min-height: 2.25rem; padding: 0 .7rem; font-size: .92rem; }
  .btn--icon { width: 2.75rem; padding: 0; }
  .btn--block { width: 100%; }

  /* ---------- forms ---------- */
  .field { display: grid; gap: .3rem; margin-bottom: 1rem; }
  .field > label, .field > .field__label { font-weight: 600; }
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .field select, .field textarea, .input {
    width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid hsl(var(--ds-input)); border-radius: var(--ds-radius);
    background: hsl(var(--ds-card)); color: hsl(var(--ds-foreground));
  }
  .field textarea { min-height: 5rem; resize: vertical; }
  .field__help { font-size: .9rem; color: hsl(var(--ds-muted-foreground)); }
  .field__error, .errorlist { margin: 0; padding: 0; list-style: none; font-size: .92rem; font-weight: 600; color: hsl(var(--ds-destructive)); }
  .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: hsl(var(--ds-destructive)); }
  .field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .6rem; }
  .field--check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: hsl(var(--ds-primary)); }
  .field--check .field__help, .field--check .field__error { grid-column: 2; }
  .field ul:not(.errorlist), .checks { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
  .field ul:not(.errorlist) label, .checks label { display: flex; align-items: center; gap: .55rem; min-height: 2.4rem; font-weight: 400; }
  .field ul:not(.errorlist) input, .checks input { width: 1.15rem; height: 1.15rem; accent-color: hsl(var(--ds-primary)); }
  .form-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
  .form-error { margin-bottom: 1rem; padding: .7rem .9rem; border-radius: var(--ds-radius); border: 1px solid hsl(var(--ds-destructive));
    background: hsl(var(--ds-destructive) / .08); font-weight: 600; }

  /* ---------- surfaces ---------- */
  .page { display: grid; gap: 1.5rem; max-width: 92rem; }
  .page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .page-sub { color: hsl(var(--ds-muted-foreground)); max-width: 68ch; }
  .page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
  .card { background: hsl(var(--ds-card)); border: 1px solid hsl(var(--ds-border)); border-radius: var(--ds-radius); padding: 1rem 1.1rem; }
  .card__head { display: flex; align-items: start; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
  .card__actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .9rem; }
  .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
  .meta { display: grid; gap: .3rem; margin: 0; }
  .meta div { display: flex; gap: .5rem; align-items: baseline; }
  .meta dt { flex: none; width: 7.5rem; color: hsl(var(--ds-muted-foreground)); font-size: .92rem; }
  .meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .muted { color: hsl(var(--ds-muted-foreground)); }
  .empty { display: grid; gap: .6rem; justify-items: start; padding: 1.5rem; border: 1px dashed hsl(var(--ds-input)); border-radius: var(--ds-radius); }
  .empty p { max-width: 60ch; }
  .card-enter { transition: opacity var(--ds-motion-card) var(--ds-ease-out), transform var(--ds-motion-card) var(--ds-ease-out); }
  @starting-style { .card-enter { opacity: 0; transform: translateY(10px); } }
  .card-enter:nth-child(2) { transition-delay: 40ms; } .card-enter:nth-child(3) { transition-delay: 80ms; }
  .card-enter:nth-child(4) { transition-delay: 120ms; } .card-enter:nth-child(5) { transition-delay: 160ms; }
  .card-enter:nth-child(6) { transition-delay: 200ms; } .card-enter:nth-child(7) { transition-delay: 240ms; }
  .card-enter:nth-child(n+8) { transition-delay: 280ms; }
  @media (prefers-reduced-motion: reduce) { .card-enter { transition: none; } }

  .tag { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 1rem; font-size: .84rem; font-weight: 650;
    background: hsl(var(--ds-muted)); color: hsl(var(--ds-foreground)); white-space: nowrap; }
  .tag--alert { background: hsl(var(--ds-sev-alert)); color: hsl(var(--ds-sev-alert-fg)); }
  .tag--warning { background: hsl(var(--ds-sev-warning)); color: hsl(var(--ds-sev-warning-fg)); }
  .tag--notice { background: hsl(var(--ds-sev-notice)); color: hsl(var(--ds-sev-notice-fg)); }
  .tag--ok { background: hsl(var(--ds-ok) / .14); color: hsl(var(--ds-ok)); }
  .tag--off { background: transparent; border: 1px solid hsl(var(--ds-input)); color: hsl(var(--ds-muted-foreground)); }
  .dot { width: .6rem; height: .6rem; border-radius: 50%; background: hsl(var(--ds-input)); flex: none; }
  .dot[data-status="online"] { background: hsl(var(--ds-ok)); }
  .dot[data-status="error"], .dot[data-status="offline"] { background: hsl(var(--ds-sev-alert)); }
  .dot[data-status="connecting"] { background: hsl(var(--ds-sev-warning)); }
  .zone-chip { display: inline-flex; align-items: center; gap: .4rem; }
  .zone-chip::before { content: ""; width: .8rem; height: .8rem; border-radius: 2px; background: hsl(var(--zone)); }
  [data-zone="showcase"] { --zone: var(--ds-zone-showcase); } [data-zone="sentinel"] { --zone: var(--ds-zone-sentinel); }
  [data-zone="browse"] { --zone: var(--ds-zone-browse); }     [data-zone="staff"] { --zone: var(--ds-zone-staff); }
  [data-zone="exit"] { --zone: var(--ds-zone-exit); }         [data-zone="ignore"] { --zone: var(--ds-zone-ignore); }

  .table { width: 100%; border-collapse: collapse; }
  .table th, .table td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid hsl(var(--ds-border)); vertical-align: top; }
  .table th { font-size: .88rem; font-weight: 650; color: hsl(var(--ds-muted-foreground)); }
  .table-wrap { overflow-x: auto; }
  .pagination { display: flex; align-items: center; gap: .75rem; justify-content: center; }

  /* ---------- mode switch: the one control that matters during a show ---------- */
  .mode { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
  .mode__site select { min-height: 2.5rem; max-width: 14rem; padding: 0 .5rem; border: 1px solid hsl(var(--ds-input)); border-radius: var(--ds-radius); background: hsl(var(--ds-card)); font-weight: 650; }
  .seg { display: inline-flex; padding: 3px; border-radius: calc(var(--ds-radius) + 3px); background: hsl(var(--ds-muted)); border: 1px solid hsl(var(--ds-border)); }
  .seg__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: 0 .9rem; border: 0; border-radius: var(--ds-radius); background: transparent;
    font-weight: 700; font-stretch: 88%; cursor: pointer; color: hsl(var(--ds-muted-foreground)); transition: background var(--ds-motion-tap) var(--ds-ease-out), color var(--ds-motion-tap) var(--ds-ease-out); }
  .seg__btn:hover { color: hsl(var(--ds-foreground)); }
  .seg__btn[aria-pressed="true"] { background: hsl(var(--ds-card)); color: hsl(var(--ds-foreground)); box-shadow: 0 1px 2px hsl(var(--ds-foreground) / .18); }
  .seg__btn[aria-pressed="true"][value="away"] { background: hsl(var(--ds-sev-warning)); color: hsl(var(--ds-sev-warning-fg)); }
  .seg__btn[aria-pressed="true"][value="closed"] { background: hsl(var(--ds-sev-alert)); color: hsl(var(--ds-sev-alert-fg)); }
  .pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: 0 .7rem; border-radius: 2rem; border: 1px solid hsl(var(--ds-border));
    background: hsl(var(--ds-card)); font-size: .9rem; font-weight: 600; white-space: nowrap; }
  .pill[data-alive="false"] { border-color: hsl(var(--ds-sev-alert)); color: hsl(var(--ds-destructive)); }
  .pill[data-alive="true"] .dot { background: hsl(var(--ds-ok)); }

  /* ---------- the slab: an incident, presented like a graded card ---------- */
  .slab { --sev: var(--ds-sev-notice); --sev-fg: var(--ds-sev-notice-fg); position: relative; display: grid; background: hsl(var(--ds-card));
    border: 2px solid hsl(var(--ds-foreground) / .16); border-radius: var(--ds-radius-lg); padding: 5px; isolation: isolate; }
  .slab--warning { --sev: var(--ds-sev-warning); --sev-fg: var(--ds-sev-warning-fg); }
  .slab--alert { --sev: var(--ds-sev-alert); --sev-fg: var(--ds-sev-alert-fg); }
  .slab__label { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0; border: 1px solid hsl(var(--ds-foreground) / .22);
    border-top: 5px solid hsl(var(--sev)); border-radius: var(--ds-radius-sm); background: hsl(var(--ds-card)); overflow: hidden; }
  .slab__text { display: grid; gap: .1rem; padding: .4rem .6rem .45rem; min-width: 0; }
  .slab__id { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; color: hsl(var(--ds-muted-foreground)); font-variant-numeric: tabular-nums; }
  .slab__id b { font-stretch: 70%; font-weight: 850; letter-spacing: .04em; color: hsl(var(--ds-foreground)); }
  .slab__title { font-stretch: 78%; font-weight: 750; font-size: 1.08rem; line-height: 1.15; text-wrap: balance; }
  .slab__title a { color: inherit; text-decoration: none; }
  .slab__title a:hover { text-decoration: underline; }
  .slab__grade { display: grid; place-items: center; align-content: center; min-width: 3.9rem; padding: .15rem .5rem; background: hsl(var(--sev)); color: hsl(var(--sev-fg)); }
  .slab__grade b { font-stretch: 66%; font-weight: 880; font-size: 1.95rem; line-height: .95; font-variant-numeric: tabular-nums; }
  .slab__grade span { font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
  .slab__window { display: block; margin-top: 5px; border-radius: var(--ds-radius-sm); overflow: hidden; background: hsl(var(--ds-stage)); aspect-ratio: 16 / 9; }
  .slab__window img { width: 100%; height: 100%; object-fit: cover; }
  .slab__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .5rem .35rem .2rem; font-size: .9rem; }
  .slab__meta { color: hsl(var(--ds-muted-foreground)); }
  .slab__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
  .slab__actions form { display: contents; }
  .slab--resolved { opacity: .78; }

  /* attention: a foil shimmer around something new. Applied by the server only. */
  @property --glow-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .attn-glow::before { content: ""; position: absolute; inset: -3px; padding: 3px; border-radius: calc(var(--ds-radius-lg) + 2px); pointer-events: none; z-index: -1;
    background: conic-gradient(from var(--glow-angle), hsl(var(--ds-holo-1) / 0) 0deg, hsl(var(--ds-holo-1)) 70deg, hsl(var(--ds-holo-2)) 140deg, hsl(var(--ds-holo-3)) 200deg, hsl(var(--ds-holo-1) / 0) 280deg);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    animation: glow-orbit var(--ds-motion-glow) linear infinite; }
  @keyframes glow-orbit { to { --glow-angle: 360deg; } }
  @media (prefers-reduced-motion: reduce) {
    .attn-glow::before { animation: none; background: hsl(var(--sev)); }
  }

  /* ---------- camera tile ---------- */
  .tile { display: grid; background: hsl(var(--ds-card)); border: 1px solid hsl(var(--ds-border)); border-radius: var(--ds-radius); overflow: hidden; }
  .tile__stage { position: relative; aspect-ratio: 16 / 9; background: hsl(var(--ds-stage)); color: hsl(var(--ds-stage-foreground)); }
  .tile__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .tile__idle { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .4rem; text-align: center; padding: 1rem; font-size: .95rem; }
  .tile[data-live="true"] .tile__idle { display: none; }
  .tile__flags { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; }
  .tile__bar { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; padding: .55rem .75rem .65rem; }
  .tile__name { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-stretch: 86%; min-width: 0; }
  .tile__name a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile__stats { display: flex; gap: .9rem; font-size: .9rem; color: hsl(var(--ds-muted-foreground)); font-variant-numeric: tabular-nums; }
  .tile__risk { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: hsl(var(--ds-muted-foreground)); }
  .riskbar { flex: 1; height: 6px; border-radius: 3px; background: hsl(var(--ds-muted)); overflow: hidden; }
  .riskbar__fill { display: block; height: 100%; width: 0; background: hsl(var(--ds-sev-notice)); transition: width 400ms var(--ds-ease-out); }
  .riskbar[data-level="1"] .riskbar__fill { width: 10%; } .riskbar[data-level="2"] .riskbar__fill { width: 20%; }
  .riskbar[data-level="3"] .riskbar__fill { width: 30%; } .riskbar[data-level="4"] .riskbar__fill { width: 40%; }
  .riskbar[data-level="5"] .riskbar__fill { width: 50%; background: hsl(var(--ds-sev-warning)); }
  .riskbar[data-level="6"] .riskbar__fill { width: 60%; background: hsl(var(--ds-sev-warning)); }
  .riskbar[data-level="7"] .riskbar__fill { width: 70%; background: hsl(var(--ds-sev-warning)); }
  .riskbar[data-level="8"] .riskbar__fill { width: 80%; background: hsl(var(--ds-sev-alert)); }
  .riskbar[data-level="9"] .riskbar__fill { width: 90%; background: hsl(var(--ds-sev-alert)); }
  .riskbar[data-level="10"] .riskbar__fill { width: 100%; background: hsl(var(--ds-sev-alert)); }

  /* ---------- drawer (native dialog) and toasts ---------- */
  .drawer { width: min(34rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0;
    border-left: 1px solid hsl(var(--ds-border)); background: hsl(var(--ds-card)); color: hsl(var(--ds-foreground)); box-shadow: var(--ds-shadow-lg); }
  .drawer::backdrop { background: hsl(222 30% 6% / .55); }
  .drawer[open] { animation: drawer-in var(--ds-motion-card) var(--ds-ease-out); }
  @keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }
  .drawer__bar { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: .5rem; background: hsl(var(--ds-card)); z-index: 1; }
  .drawer__body { padding: 0 1.25rem 2rem; }
  .drawer__body h2 { margin-bottom: 1rem; }
  .menu { display: grid; gap: .15rem; }
  .snippet { margin: .5rem 0; padding: .8rem; border-radius: var(--ds-radius); background: hsl(var(--ds-stage)); color: hsl(var(--ds-stage-foreground));
    font: .88rem/1.5 ui-monospace, monospace; overflow-x: auto; white-space: pre; }
  .loading { display: grid; place-items: center; min-height: 8rem; color: hsl(var(--ds-muted-foreground)); }
  .htmx-indicator { opacity: 0; transition: opacity 200ms; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

  .toasts { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); }
  @media (max-width: 900px) { .toasts { bottom: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom) + .75rem); } }
  .toast { display: flex; gap: .6rem; align-items: start; padding: .75rem .9rem; border-radius: var(--ds-radius); background: hsl(var(--ds-foreground)); color: hsl(var(--ds-background));
    box-shadow: var(--ds-shadow-md); border-left: 5px solid hsl(var(--ds-sev-notice)); font-weight: 550; animation: toast-in var(--ds-motion-card) var(--ds-ease-out); }
  .toast--success { border-left-color: hsl(var(--ds-ok)); }
  .toast--warning { border-left-color: hsl(var(--ds-sev-warning)); }
  .toast--error, .toast--alert { border-left-color: hsl(var(--ds-sev-alert)); }
  .toast a { color: inherit; font-weight: 750; }
  .toast__close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; min-width: 1.75rem; min-height: 1.75rem; }
  @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

  /* ---------- sign-in pages ---------- */
  .auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .auth__panel { display: grid; align-content: center; gap: 1.25rem; padding: 2rem clamp(1.25rem, 5vw, 4.5rem); }
  .auth__panel form { max-width: 24rem; }
  .auth__side { display: grid; align-content: end; gap: 1rem; padding: 3rem; background: hsl(var(--ds-stage)); color: hsl(var(--ds-stage-foreground)); }
  .auth__side h2 { font-size: clamp(2rem, 1rem + 3.2vw, 3.6rem); font-stretch: 68%; font-weight: 880; line-height: .98; max-width: 14ch; }
  .auth__side p { max-width: 44ch; color: hsl(var(--ds-stage-foreground) / .78); }
  @media (max-width: 800px) { .auth { grid-template-columns: 1fr; } .auth__side { display: none; } }
}