/* PACT: a workspace in the brand's navy and cyan, or quiet and white (Classic); each light or dark.
   Both themes share every building block and every page; only the values below change.
   The theme is an attribute on <html>: data-brand="classic" for Classic, data-theme="light|dark" when the
   owner chose one over the device's setting. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* SIL OFL 1.1, fonts/SORA-OFL.txt */

/* -- PACT, light ------------------------------------------------------------------- */
:root {
  --navy: #011d41; --cyan: #01c0fa; --cyan-deep: #0072a3;
  --bg: #f2f5f9; --surface: #ffffff; --surface-2: #f7f9fc; --line: #d9e1eb; --line-soft: #e8edf3; --line-strong: #c3cfdd;
  --ink: #011d41; --ink-2: #4d5e77; --ink-3: #66768d;
  --link: #0072a3; --focus: #0072a3; --track: #e3e9f1; --meter: #0072a3; --fill-warn: #c98a12;
  --primary: #011d41; --primary-hover: #0a2a52; --on-primary: #ffffff;
  /* the frame */
  --side: #011d41; --side-hover: #0a2a52; --side-active: #0f3360; --side-line: #183a64; --side-border: #011d41;
  --nav-ink: #b9c7d9; --nav-ink-strong: #ffffff; --nav-muted: #8fa3bd; --logo-ink: #ffffff; --marker: #01c0fa;
  --cta-bg: #01c0fa; --cta-ink: #011d41; --cta-hover: #3fd0fb;
  /* phases */
  --step-done: #011d41; --step-done-ink: #ffffff; --step-now: #01c0fa; --step-now-ink: #011d41; --step-todo: #e6ecf3; --step-todo-ink: #5b6b82;
  /* states: running, waits for you, done, planned, failed */
  --run: #00618c; --run-bg: #e3f4fb; --run-line: #a9d9ee;
  --wait: #845600; --wait-bg: #fcf2dc; --wait-line: #e7c97a;
  --ok: #1a7f4b; --ok-bg: #e5f4ec; --ok-line: #a7d6bb;
  --plan: #4a5b73; --plan-bg: #eef2f7; --plan-line: #cfd8e4;
  --err: #c62a3a; --err-bg: #fbe9eb; --err-line: #eeb0b7;
  /* the one figure that needs you */
  --hot-bg: #011d41; --hot-ink: #ffffff; --hot-value: #01c0fa; --hot-label: #b9c7d9;
  --bubble-me: #011d41; --bubble-me-ink: #ffffff;
  --code-bg: #eef2f7; --log-bg: #00122a; --log-ink: #d9e3ef; --scrim: rgba(1, 18, 42, .78);
  /* series in charts */
  --k1: #011d41; --k2: #0072a3; --k3: #01c0fa; --k4: #8a9bb1; --k5: #c3cfdd;
  --sev-critical: #9f1239; --sev-critical-bg: #fff1f2; --sev-critical-line: #fecdd3;
  --sev-high: #b4410c; --sev-high-bg: #fff7ed; --sev-high-line: #fed7aa;
  --sev-medium: #845600; --sev-medium-bg: #fcf2dc; --sev-medium-line: #e7c97a; --sev-medium-mark: #d89b1d;
  --sev-low: #00618c; --sev-low-bg: #e3f4fb; --sev-low-line: #a9d9ee;
  --sev-info: #4a5b73; --sev-info-bg: #eef2f7; --sev-info-line: #cfd8e4;
  --shadow-lg: 0 12px 32px rgba(1, 29, 65, .14);
  --radius: 8px; --radius-sm: 6px; --side-w: 248px;
  --f-display: "Sora", "Inter", system-ui, sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* -- PACT, dark: the navy of the logo plate --------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #011d41; --surface: #072549; --surface-2: #0a2c55; --line: #1c3d66; --line-soft: #16355c; --line-strong: #2a4d78;
    --ink: #ffffff; --ink-2: #a9b9cd; --ink-3: #8a9db6; --link: #4fd2fb; --focus: #4fd2fb; --track: #16355c; --meter: #01c0fa; --fill-warn: #f0c060;
    --primary: #01c0fa; --primary-hover: #3fd0fb; --on-primary: #011d41;
    --side: #00122a; --side-hover: #062244; --side-active: #0b2d57; --side-line: #102e52; --side-border: #102e52;
    --step-done: #2a5a92; --step-done-ink: #ffffff; --step-now: #01c0fa; --step-now-ink: #011d41; --step-todo: #0d3060; --step-todo-ink: #8fa3bd;
    --run: #6fd6fb; --run-bg: #06345a; --run-line: #1a5582;
    --wait: #f0c060; --wait-bg: #33290f; --wait-line: #6b5520;
    --ok: #4cd38a; --ok-bg: #0a3a2e; --ok-line: #1f6b4a;
    --plan: #b3c2d6; --plan-bg: #0f3360; --plan-line: #2a4d78;
    --err: #ff8a94; --err-bg: #3d1726; --err-line: #7a2c3c;
    --hot-bg: #0b2d57; --hot-ink: #ffffff; --hot-value: #01c0fa; --hot-label: #a9b9cd;
    --bubble-me: #1a4475; --bubble-me-ink: #ffffff; --code-bg: #0a2c55; --log-bg: #00122a;
    --k1: #c9d6e6; --k2: #4fd2fb; --k3: #0a8fc0; --k4: #6d84a3; --k5: #2a4d78;
    --sev-critical: #ff8a94; --sev-critical-bg: #3d1726; --sev-critical-line: #7a2c3c;
    --sev-high: #ffb37a; --sev-high-bg: #3a2312; --sev-high-line: #70431f;
    --sev-medium: #f0c060; --sev-medium-bg: #33290f; --sev-medium-line: #6b5520; --sev-medium-mark: #f0c060;
    --sev-low: #6fd6fb; --sev-low-bg: #06345a; --sev-low-line: #1a5582;
    --sev-info: #b3c2d6; --sev-info-bg: #0f3360; --sev-info-line: #2a4d78;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #011d41; --surface: #072549; --surface-2: #0a2c55; --line: #1c3d66; --line-soft: #16355c; --line-strong: #2a4d78;
  --ink: #ffffff; --ink-2: #a9b9cd; --ink-3: #8a9db6; --link: #4fd2fb; --focus: #4fd2fb; --track: #16355c; --meter: #01c0fa; --fill-warn: #f0c060;
  --primary: #01c0fa; --primary-hover: #3fd0fb; --on-primary: #011d41;
  --side: #00122a; --side-hover: #062244; --side-active: #0b2d57; --side-line: #102e52; --side-border: #102e52;
  --step-done: #2a5a92; --step-done-ink: #ffffff; --step-now: #01c0fa; --step-now-ink: #011d41; --step-todo: #0d3060; --step-todo-ink: #8fa3bd;
  --run: #6fd6fb; --run-bg: #06345a; --run-line: #1a5582;
  --wait: #f0c060; --wait-bg: #33290f; --wait-line: #6b5520;
  --ok: #4cd38a; --ok-bg: #0a3a2e; --ok-line: #1f6b4a;
  --plan: #b3c2d6; --plan-bg: #0f3360; --plan-line: #2a4d78;
  --err: #ff8a94; --err-bg: #3d1726; --err-line: #7a2c3c;
  --hot-bg: #0b2d57; --hot-ink: #ffffff; --hot-value: #01c0fa; --hot-label: #a9b9cd;
  --bubble-me: #1a4475; --bubble-me-ink: #ffffff; --code-bg: #0a2c55; --log-bg: #00122a;
  --k1: #c9d6e6; --k2: #4fd2fb; --k3: #0a8fc0; --k4: #6d84a3; --k5: #2a4d78;
  --sev-critical: #ff8a94; --sev-critical-bg: #3d1726; --sev-critical-line: #7a2c3c;
  --sev-high: #ffb37a; --sev-high-bg: #3a2312; --sev-high-line: #70431f;
  --sev-medium: #f0c060; --sev-medium-bg: #33290f; --sev-medium-line: #6b5520; --sev-medium-mark: #f0c060;
  --sev-low: #6fd6fb; --sev-low-bg: #06345a; --sev-low-line: #1a5582;
  --sev-info: #b3c2d6; --sev-info-bg: #0f3360; --sev-info-line: #2a4d78;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* -- Classic, light: white and quiet, the navy only where it acts ------------------ */
:root[data-brand="classic"] {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f9fafb; --line: #e3e6ea; --line-soft: #eef0f3; --line-strong: #cfd4db;
  --ink: #14213a; --ink-2: #4b5563; --ink-3: #6b7280; --track: #e8ebef;
  --side: #ffffff; --side-hover: #f1f4f8; --side-active: #e8f6fd; --side-line: #e3e6ea; --side-border: #e3e6ea;
  --nav-ink: #374151; --nav-ink-strong: #011d41; --nav-muted: #6b7280; --logo-ink: #011d41; --marker: #01c0fa;
  --cta-bg: #011d41; --cta-ink: #ffffff; --cta-hover: #0a2a52;
  --step-done: #011d41; --step-done-ink: #ffffff; --step-now: #0072a3; --step-now-ink: #ffffff; --step-todo: #eceff3; --step-todo-ink: #5b6472;
  --code-bg: #f1f3f5;
  --f-display: var(--f-text);
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="classic"]:not([data-theme="light"]) {
    --bg: #111418; --surface: #181c22; --surface-2: #1e232a; --line: #2a3039; --line-soft: #232931; --line-strong: #3a424d;
    --ink: #eef1f5; --ink-2: #aeb6c2; --ink-3: #8b94a1; --track: #2a3039;
    --side: #15191e; --side-hover: #1e232a; --side-active: #13303f; --side-line: #2a3039; --side-border: #2a3039;
    --nav-ink: #c3cad4; --nav-ink-strong: #ffffff; --nav-muted: #8b94a1; --logo-ink: #ffffff;
    --cta-bg: #01c0fa; --cta-ink: #011d41; --cta-hover: #3fd0fb;
    --step-done: #3a4554; --step-done-ink: #ffffff; --step-now: #01c0fa; --step-now-ink: #011d41; --step-todo: #232931; --step-todo-ink: #8b94a1;
    --run-bg: #0f2a38; --run-line: #1d4a61; --plan: #b3bcc8; --plan-bg: #1e232a; --plan-line: #2f3742;
    --ok-bg: #10291f; --wait-bg: #2e2612; --err-bg: #34191d;
    --hot-bg: #13303f; --hot-label: #aeb6c2; --bubble-me: #2b3a4c; --code-bg: #1e232a; --log-bg: #0c0f12;
    --k5: #3a424d;
    --sev-info-bg: #1e232a; --sev-info-line: #2f3742; --sev-low-bg: #0f2a38; --sev-low-line: #1d4a61;
  }
}
:root[data-brand="classic"][data-theme="dark"] {
  --bg: #111418; --surface: #181c22; --surface-2: #1e232a; --line: #2a3039; --line-soft: #232931; --line-strong: #3a424d;
  --ink: #eef1f5; --ink-2: #aeb6c2; --ink-3: #8b94a1; --track: #2a3039;
  --side: #15191e; --side-hover: #1e232a; --side-active: #13303f; --side-line: #2a3039; --side-border: #2a3039;
  --nav-ink: #c3cad4; --nav-ink-strong: #ffffff; --nav-muted: #8b94a1; --logo-ink: #ffffff;
  --cta-bg: #01c0fa; --cta-ink: #011d41; --cta-hover: #3fd0fb;
  --step-done: #3a4554; --step-done-ink: #ffffff; --step-now: #01c0fa; --step-now-ink: #011d41; --step-todo: #232931; --step-todo-ink: #8b94a1;
  --run-bg: #0f2a38; --run-line: #1d4a61; --plan: #b3bcc8; --plan-bg: #1e232a; --plan-line: #2f3742;
  --ok-bg: #10291f; --wait-bg: #2e2612; --err-bg: #34191d;
  --hot-bg: #13303f; --hot-label: #aeb6c2; --bubble-me: #2b3a4c; --code-bg: #1e232a; --log-bg: #0c0f12;
  --k5: #3a424d;
  --sev-info-bg: #1e232a; --sev-info-line: #2f3742; --sev-low-bg: #0f2a38; --sev-low-line: #1d4a61;
}

/* -- base -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 var(--f-text);
       font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0; color: var(--ink); }
h1 { font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -.015em; }
h2 { font-family: var(--f-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 14px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; margin: 1rem 0 .3rem; }
p { margin: 0 0 .6rem; }
code, pre { font-family: var(--f-mono); font-size: 12.5px; }
code { background: var(--code-bg); border: 1px solid var(--line-soft); padding: .05em .35em; border-radius: 4px; }
pre { background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--radius-sm); overflow-x: auto;
      white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--ink); }
pre code { background: none; border: 0; padding: 0; }
svg.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* -- the frame: a sidebar and the page ---------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh;
         background: linear-gradient(90deg, var(--side) var(--side-w), transparent var(--side-w)); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 12px;
        background: var(--side); color: var(--nav-ink); border-right: 1px solid var(--side-border); overflow-y: auto; z-index: 6; }
.brand { display: flex; align-items: center; padding: 4px 8px 18px; color: var(--logo-ink); }
.brand:hover { text-decoration: none; }
.brand svg { display: block; height: 26px; width: auto; }
.brand .mark-only { display: none; height: 24px; }
/* Which Mandant this is: several run on one host, and a tab must never be taken for another's. */
.tenant { display: flex; flex-direction: column; gap: 1px; margin: -8px 8px 14px; padding: 6px 10px; border-radius: var(--radius-sm);
          border: 1px solid var(--side-border); box-shadow: inset 3px 0 0 var(--marker); min-width: 0; }
.tenant span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); }
.tenant b { font-size: 14px; font-weight: 600; color: var(--nav-ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; margin: 0 0 14px; border-radius: var(--radius-sm);
       background: var(--cta-bg); color: var(--cta-ink); font-weight: 600; font-size: 14px; }
.cta:hover { background: var(--cta-hover); text-decoration: none; }
.cta[aria-current] { box-shadow: 0 0 0 2px var(--side), 0 0 0 4px var(--marker); }
.side .group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); padding: 16px 10px 6px; }
.side .navs { display: flex; flex-direction: column; }
.side nav { display: flex; flex-direction: column; gap: 1px; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--nav-ink); font-weight: 500; }
.side nav a:hover { background: var(--side-hover); color: var(--nav-ink-strong); text-decoration: none; }
.side nav a[aria-current] { background: var(--side-active); color: var(--nav-ink-strong); box-shadow: inset 3px 0 0 var(--marker); font-weight: 600; }
.side nav a .count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--marker); color: var(--navy); border-radius: 4px; padding: 0 6px; line-height: 18px; }
.side .foot { margin-top: auto; border-top: 1px solid var(--side-line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.side .foot form { margin: 0; }
.side .foot button, .look > summary { width: 100%; justify-content: flex-start; background: transparent; border: 0; box-shadow: none; color: var(--nav-ink);
                                      font-weight: 500; height: 34px; padding: 0 10px; gap: 10px; }
.side .foot button:hover, .look > summary:hover { background: var(--side-hover); color: var(--nav-ink-strong); }

/* the look: theme and mode */
details.look { border: 0; position: relative; }
.look > summary { display: flex; align-items: center; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; }
.look > summary::before { display: none; }
.look > summary .now { margin-left: auto; font-size: 12px; color: var(--nav-muted); font-weight: 500; }
details.look > form { margin: 4px 0 8px; padding: 10px; border-radius: var(--radius-sm); background: var(--side-hover); border: 1px solid var(--side-line); }
details.look[open] > :last-child { margin-bottom: 8px; }
.look fieldset { border: 0; margin: 0; padding: 0; }
.look fieldset + fieldset { margin-top: 10px; }
.look legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nav-muted); padding: 0; margin-bottom: 6px; }
.seg { display: flex; border: 1px solid var(--side-line); border-radius: var(--radius-sm); overflow: hidden; }
.seg label { flex: 1; margin: 0; position: relative; font-size: 12.5px; font-weight: 500; color: var(--nav-ink); text-align: center; }
.seg label + label { border-left: 1px solid var(--side-line); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 5px 4px; }
.seg input:checked + span { background: var(--marker); color: var(--navy); font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--marker); outline-offset: -2px; }
.look .apply { margin-top: 10px; width: 100%; }

.page { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line);
          position: sticky; top: 0; z-index: 5; font-size: 13.5px; color: var(--ink-3); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.topbar a { color: var(--ink-3); }
.topbar a:hover { color: var(--ink); }
.topbar .sep { color: var(--line-strong); }
.topbar .here { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
          background: var(--surface-2); color: var(--ink-3); width: 300px; margin: 0; }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.search input[type=search] { border: 0; background: none; box-shadow: none; padding: 0; min-height: 0; height: 30px; font-size: 13.5px; flex: 1; min-width: 0; }
.search input[type=search]:focus { box-shadow: none; }
.kbd { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
       color: var(--ink-3); background: var(--surface); white-space: nowrap; }
.qmini { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; }
.qmini:hover { text-decoration: none; }
.qmini .bar { width: 64px; height: 6px; }
.qmini b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.qmini b.warn { color: var(--wait); } .qmini b.bad { color: var(--err); }
.search-link { display: none; }
main { width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px 28px 64px; }
main.wide { max-width: none; }
main.narrow { max-width: 840px; }

/* -- page head --------------------------------------------------------------------- */
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.head > div:first-child { min-width: 0; }
.head .over { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.head .sub { color: var(--ink-2); margin: 6px 0 0; font-size: 14px; }
.head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.facts-line { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; }
.facts-line b { color: var(--ink); font-weight: 600; }
.hint { color: var(--ink-3); font-size: 13px; margin: 2px 0 8px; }
.empty { color: var(--ink-3); padding: 40px 16px; text-align: center; }
.empty strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* -- surfaces ---------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card + .card, section + section { margin-top: 16px; }
.card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.card > header p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.card > .body, .card > form > .body { padding: 16px 20px; }
.card > .body > :last-child { margin-bottom: 0; }
.card > footer { padding: 12px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.card.flush > .table { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.grid { display: grid; gap: 16px; }
.card + .grid, .banner + .grid, .stats + .grid, .inbox + .grid { margin-top: 16px; }
.grid.two { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; }
.grid.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack > * + * { margin-top: 16px; }
.rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rail > * + * { margin-top: 0; }

/* figures: one strip; the one that needs you is navy with a cyan value */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { padding: 14px 18px; border-left: 1px solid var(--line-soft); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat .label { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.stat .value { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat .note { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.stat.attention { background: var(--hot-bg); border-left-color: var(--hot-bg); }
.stat.attention .label, .stat.attention .note { color: var(--hot-label); }
.stat.attention .value { color: var(--hot-value); }

/* -- states: a chip with its own mark, so colour is never the only sign --------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 4px;
         border: 1px solid var(--plan-line); background: var(--plan-bg); color: var(--plan); white-space: nowrap; }
.badge::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor;
                 -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
                 --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.badge.plain::before { display: none; }
.badge.plain { font-weight: 500; }
.badge.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.badge.ok::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9.2 10.2 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.badge.warn { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait); }
.badge.warn::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6v5.6' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='10.2' r='1.4'/%3E%3C/svg%3E"); }
.badge.bad { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.badge.bad::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 2.8l6.4 6.4M9.2 2.8 2.8 9.2' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.badge.info { background: var(--run-bg); border-color: var(--run-line); color: var(--run); }
.badge.info::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.8 10.4 6 3 10.2z'/%3E%3C/svg%3E"); }
.badge.live::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge.hot { background: var(--badge-bg, var(--marker)); border-color: transparent; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } * { transition: none !important; } }

/* -- buttons and forms ------------------------------------------------------------- */
button, .button { font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                  height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary);
                  text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; }
button.second, .button.second { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
button.second:hover, .button.second:hover { background: var(--surface-2); }
button.danger, .button.danger { background: var(--surface); color: var(--err); border-color: var(--err-line); }
button.danger:hover, .button.danger:hover { background: var(--err-bg); }
button.danger-solid { background: var(--err); border-color: var(--err); color: var(--surface); }
button.danger-solid:hover { background: var(--err); filter: brightness(1.08); }
button.quiet { background: transparent; border-color: transparent; color: var(--ink-3); }
button.quiet:hover { background: var(--surface-2); color: var(--ink); }
label { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-2); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 7px 10px; min-height: 36px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select { appearance: none; padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2366768d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); margin: 12px 0; }
.check input { margin-top: 3px; accent-color: var(--cyan-deep); width: 15px; height: 15px; flex: none; }
.check span small { display: block; color: var(--ink-3); font-size: 12.5px; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line);
                  padding: 12px 0; margin-top: 20px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sticky-actions .hint { margin: 0 auto 0 0; }
form { margin: 0; }

/* -- banners ----------------------------------------------------------------------- */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); margin: 0 0 16px; border: 1px solid; font-size: 13.5px; }
.banner.error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.banner.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.banner.info { background: var(--run-bg); border-color: var(--run-line); color: var(--run); }

/* -- tables ------------------------------------------------------------------------ */
.table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-3); background: var(--surface-2); padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.cause { color: var(--ink-3); max-width: 30rem; }
td .sub { display: block; color: var(--ink-3); font-size: 12.5px; }
td select, td input:not([type=checkbox]):not([type=radio]) { min-width: 120px; }
table.runs td.num, table.runs td.num-left { white-space: nowrap; }
table.runs td.cause { min-width: 12rem; }
table.runs .badge { white-space: nowrap; }
table.ledger td:nth-child(5) { width: 60%; }
tr.failed td:first-child, tr.hangs td:first-child { box-shadow: inset 3px 0 0 var(--err); }
tr.waiting td:first-child, tr.attention td:first-child { box-shadow: inset 3px 0 0 var(--wait-line); }
tr.running td:first-child { box-shadow: inset 3px 0 0 var(--run-line); }
tr.grp td { background: var(--surface-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 16px; }
tr.grp td span { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 8px; }
tr.grp:hover td { background: var(--surface-2); }

/* -- what waits for you ------------------------------------------------------------- */
.inbox { border: 1px solid var(--wait-line); border-radius: var(--radius); background: var(--surface); margin-bottom: 20px; }
.inbox > header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--wait-bg); border-bottom: 1px solid var(--wait-line);
                  border-radius: var(--radius) var(--radius) 0 0; }
.inbox > header h2 { color: var(--wait); font-size: 15px; }
.inbox .item { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 20px; flex-wrap: wrap; }
.inbox .item + .item { border-top: 1px solid var(--line-soft); }
.inbox .item > div { min-width: 0; flex: 1 1 320px; }
.inbox .item strong { display: block; }
.inbox .item p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }

/* -- the orders, as a list that stays short ----------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; height: auto; padding: 11px 14px 10px; color: var(--ink-2);
               font-weight: 500; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.tabs button:hover { color: var(--ink); background: none; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--marker); font-weight: 600; }
.tabs .cnt { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 18px; }
.tabs button[aria-selected="true"] .cnt { color: var(--ink); }
.card > .tabs { padding: 0 8px; }
.tabpanel { padding-top: 20px; }
.tabpanel > * + * { margin-top: 16px; }
.js .tabpanel[aria-hidden="true"] { display: none; }
table.orders td { vertical-align: middle; }
table.orders td:first-child { width: 100%; max-width: 0; min-width: 240px; }
table.orders td:not(:first-child) { white-space: nowrap; }
table.orders td:first-child a { font-weight: 600; color: var(--ink); }
table.orders .last { display: block; color: var(--ink-2); font-size: 13px; max-width: 62ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
table.orders tr[data-href] { cursor: pointer; }

/* the phases, small: one bar per phase */
.mini { display: inline-flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.mini .bars { display: inline-flex; gap: 2px; }
.mini .bars i { width: 16px; height: 6px; background: var(--step-todo); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.mini .bars i.d { background: var(--step-done); }
.mini .bars i.n { background: var(--step-now); }
.mini .lbl { font-size: 12.5px; color: var(--ink-3); }
.mini .lbl b { color: var(--ink); font-weight: 600; }

/* the phases, large: one chevron each, with a check or its number */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 3px; list-style: none; padding: 0; margin: 0;
         overflow-x: auto; scrollbar-width: thin; }
.steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px 0 22px; background: var(--step-todo); color: var(--step-todo-ink);
            font-size: 13px; font-weight: 500; white-space: nowrap;
            clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); }
.steps li:first-child { padding-left: 14px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.steps li:last-child { padding-right: 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); }
.steps li.done { background: var(--step-done); color: var(--step-done-ink); }
.steps li.now { background: var(--step-now); color: var(--step-now-ink); font-weight: 700; }
.steps .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid currentColor; flex: none; }
.steps li.done .n { border-color: transparent; background: color-mix(in srgb, currentColor 18%, transparent); }
.steps .n svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.steps .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px;
              background: var(--step-now-ink); color: var(--step-now); }
.card .steps { margin: 0; }
.card.phases { margin-bottom: 20px; }
.card.phases > .body { padding: 14px 16px; }
.word .avatar { width: 30px; font-size: 9.5px; }

/* -- what is the owner's to decide ------------------------------------------------- */
.needs { border-color: var(--wait-line); }
.needs > header { background: var(--wait-bg); border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: var(--wait-line); }
.needs > header h2 { color: var(--wait); }
.need { padding: 16px 20px; }
.need + .need { border-top: 1px solid var(--line-soft); }
.need h3 { margin-bottom: 6px; }
.need form + form { margin-top: 12px; }
.calm { display: flex; align-items: center; gap: 10px; padding: 12px 18px; margin: 0; color: var(--ink-2); }
.calm svg { color: var(--ok); }

/* holding an order: asked once more, with a reason */
details.hold { border: 0; position: relative; }
details.hold > summary::before { display: none; }
details.hold > summary:hover { background: var(--err-bg); }
details.hold > summary.button { list-style: none; }
details.hold > .confirm { position: absolute; right: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 32px)); z-index: 8; margin: 0;
                          border: 1px solid var(--err-line); background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-lg); }
details.hold > .confirm label { margin-top: 0; }
details.hold[open] > :last-child { margin-bottom: 0; }

/* -- the plan ---------------------------------------------------------------------- */
ol.plan { list-style: none; margin: 0; padding: 0; }
.package { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.package:last-child { border-bottom: 0; }
.package .number { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
                   background: var(--plan-bg); color: var(--plan); border: 1px solid var(--plan-line); }
.package.accepted .number { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.package.in_work .number { background: var(--run-bg); color: var(--run); border-color: var(--run-line); }
.package.delivered .number { background: var(--step-now); color: var(--step-now-ink); border-color: transparent; }
.package.dropped { opacity: .55; }
.package h3 { font-weight: 500; }
.package .meta { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; }
.live { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; }
.live.running { color: var(--run); }
.live.attention { color: var(--wait); font-weight: 600; }

/* -- reports, documents and prose -------------------------------------------------- */
.word .who { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; margin-bottom: 8px; }
.avatar { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #ffffff; background: var(--navy);
          box-shadow: inset 0 -2px 0 var(--cyan); }
.word.earlier { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.prose { overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 .6rem; }
.prose li { margin: .15rem 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.1rem 0 .4rem; font-family: var(--f-text); }
.prose h1 { font-size: 18px; } .prose h2 { font-size: 16px; } .prose h3 { font-size: 14.5px; }
.prose table { margin: .6rem 0; border: 1px solid var(--line); }
.prose blockquote { margin: .6rem 0; padding: .2rem 0 .2rem 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
article.document { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; font-size: 14.5px; line-height: 1.65; }
.brief { max-height: 26rem; overflow-y: auto; }

details { border-top: 1px solid var(--line-soft); }
details:first-child { border-top: 0; }
details > summary { cursor: pointer; padding: 11px 20px; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
                            transform: rotate(-45deg); transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { background: var(--surface-2); }
details > :not(summary) { margin-left: 20px; margin-right: 20px; }
details[open] > :last-child { margin-bottom: 14px; }
details .hint { font-weight: 400; }
td details { border: 0; }
td details > summary { padding: 0; font-weight: 400; }
td details > summary:hover { background: none; }
td details > :not(summary) { margin: 8px 0 0; }
ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li { padding: 10px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 12px; }
ul.list li:first-child { border-top: 0; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* what happened lately */
ul.feed { list-style: none; margin: 0; padding: 0; }
ul.feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 10px 20px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
ul.feed li:first-child { border-top: 0; }
ul.feed li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; background: var(--ink-3); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
ul.feed li.hot::before { background: var(--marker); }
ul.feed a { color: var(--ink); font-weight: 600; }
ul.feed .m { display: block; font-size: 12.5px; color: var(--ink-3); }
ul.feed .t { display: block; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* -- pictures ---------------------------------------------------------------------- */
.shots-group + .shots-group { margin-top: 18px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.shot { display: block; color: var(--ink-2); font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.shot:hover { border-color: var(--link); text-decoration: none; box-shadow: var(--shadow-lg); }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid var(--line); background: #ffffff; }
.shot span { display: block; padding: 6px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shots-group:not(.all) .shot.more { display: none; }
.shots-group.all .show-all { display: none; }
dialog#picture { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
dialog#picture::backdrop { background: var(--scrim); }
dialog#picture img { max-width: 94vw; max-height: 88vh; display: block; border-radius: var(--radius-sm); background: #ffffff; }
dialog#picture p { color: #ffffff; text-align: center; margin: 8px 0 0; }

/* -- expert's files, logs and health ----------------------------------------------- */
.split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
ul.files { list-style: none; margin: 0; padding: 6px; }
ul.files a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink-2); }
ul.files a:hover { background: var(--surface-2); text-decoration: none; }
ul.files a[aria-current] { background: var(--run-bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--marker); }
ul.files .hint { margin: 0; font-size: 12px; }
pre.file { max-height: 75vh; overflow-y: auto; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); }
pre.log { background: var(--log-bg); color: var(--log-ink); border: 0; max-height: 78vh; border-radius: var(--radius); }
ul.health { list-style: none; margin: 0; padding: 0; }
ul.health li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 20px; border-top: 1px solid var(--line-soft); }
ul.health li:first-child { border-top: 0; }
ul.health li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 4px; background: var(--ok);
                       -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
                       --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9.2 10.2 3.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.health li.missing::before { background: var(--err); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 2.8l6.4 6.4M9.2 2.8 2.8 9.2' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
ul.health li.not-yet::before { background: var(--wait); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6v5.6' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='10.2' r='1.4'/%3E%3C/svg%3E"); }
ul.health li.missing { color: var(--err); }

/* the status in one line; the checks behind it */
.statusband { display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; }
.statusband .big { display: flex; gap: 14px; align-items: center; }
.statusband .big svg { width: 30px; height: 30px; color: var(--ok); stroke-width: 2; }
.statusband.wrong .big svg { color: var(--err); }
.statusband .big b { font-family: var(--f-display); font-size: 18px; font-weight: 600; display: block; }
.statusband .big span { color: var(--ink-2); font-size: 13.5px; }
details.checks > summary { color: var(--link); font-size: 13.5px; padding: 11px 20px; border-top: 1px solid var(--line-soft); }
details.checks[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.checks > ul.health { margin: 0; }
details.checks[open] > :last-child { margin-bottom: 0; }

/* reasoning, as a level */
.lvl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lvl .s { display: inline-flex; gap: 2px; align-items: flex-end; }
.lvl .s i { width: 4px; background: var(--track); border-radius: 1px; }
.lvl .s i:nth-child(1) { height: 6px; } .lvl .s i:nth-child(2) { height: 8px; } .lvl .s i:nth-child(3) { height: 10px; }
.lvl .s i:nth-child(4) { height: 12px; } .lvl .s i:nth-child(5) { height: 14px; }
.lvl.l1 .s i:nth-child(-n+1), .lvl.l2 .s i:nth-child(-n+2), .lvl.l3 .s i:nth-child(-n+3), .lvl.l4 .s i:nth-child(-n+4), .lvl.l5 .s i { background: var(--meter); }

/* shares, drawn to scale */
svg.share { display: block; width: 100%; max-width: 220px; height: 8px; border-radius: 2px; background: var(--track); }
.share-wide svg.share { max-width: none; height: 12px; }
svg.share .k1 { fill: var(--k1); } svg.share .k2 { fill: var(--k2); } svg.share .k3 { fill: var(--k3); } svg.share .k4 { fill: var(--k4); } svg.share .k5 { fill: var(--k5); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--k5); }
.legend i.k1 { background: var(--k1); } .legend i.k2 { background: var(--k2); } .legend i.k3 { background: var(--k3); } .legend i.k4 { background: var(--k4); }
.legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.models-share .row + .row { margin-top: 12px; }

/* -- settings ---------------------------------------------------------------------- */
.settings-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.settings-nav a { padding: 8px 12px; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.settings-nav a:hover { color: var(--ink); text-decoration: none; }
.settings-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--marker); }
.models td { vertical-align: middle; }
.models td:first-child { min-width: 220px; }
.models .changed td { background: var(--run-bg); }
.models .default { color: var(--ink-3); font-size: 12px; display: block; margin-top: 3px; }

/* -- the sign-in ------------------------------------------------------------------- */
body.signin { display: grid; place-items: center; min-height: 100vh; padding: 16px;
              background: radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent), var(--bg); }
.login { width: 100%; max-width: 380px; margin: 0 auto; }
.login .brand { justify-content: center; padding-bottom: 6px; color: var(--ink); }
.login .brand svg { height: 44px; }
.login .tagline { text-align: center; color: var(--ink); font-family: var(--f-display); font-weight: 600; letter-spacing: .02em; margin: 0 0 22px; }
.login .tenant-login { text-align: center; color: var(--ink-2); margin: -12px 0 18px; }
.login .tenant-login b { color: var(--ink); font-weight: 600; }
.login .tagline::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--cyan); margin: 0 auto 10px; }
.login .motto { text-align: center; color: var(--ink-3); font-size: 12px; margin-top: 28px; }
.login .card { padding: 24px; }
.login button { width: 100%; margin-top: 16px; height: 40px; }
.login .hint { text-align: center; margin-top: 16px; }

/* -- a newer state is there -------------------------------------------------------- */
#fresh { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #ffffff; padding: 8px 8px 8px 16px;
         border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; gap: 12px; align-items: center; z-index: 20; font-size: 13.5px; }
#fresh button { height: 30px; background: var(--cyan); color: var(--navy); border-color: var(--cyan); }

.check.tight { margin: 4px 0; }
.check.flat { margin: 0; }
td .check.tight { display: inline-flex; margin: 2px 16px 2px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.filters input[type=search] { flex: 1 1 240px; width: auto; }
.filters select { flex: 0 1 220px; width: auto; }
.filters .hint { margin: 0; }
.filters .filter-actions { margin-left: auto; display: flex; gap: 6px; }
tr[hidden] { display: none; }

/* -- the provider's windows, as bars: ticks where amber and red begin ---------------- */
.quota + .quota { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.quota-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.quota-title .hint { margin: 0; }
.quota-row + .quota-row { margin-top: 12px; }
.quota-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.quota-head strong { font-variant-numeric: tabular-nums; }
.quota-head strong.ok { color: var(--ink); } .quota-head strong.warn { color: var(--wait); } .quota-head strong.bad { color: var(--err); }
.quota-row .hint { margin: 4px 0 0; font-size: 12px; }
.bar { position: relative; height: 8px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bar::before, .bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); z-index: 1; }
.bar::before { left: 60%; } .bar::after { left: 85%; }
.bar .fill { display: block; height: 100%; }
.bar .fill.ok { background: var(--meter); } .bar .fill.warn { background: var(--fill-warn); } .bar .fill.bad { background: var(--err); }
td.quota-cell { min-width: 280px; }
td.quota-cell .quota-title { display: none; }
/* widths in steps of two: the pages may not set a style of their own */
.bar .w0 { width: 0%; }
.bar .w2 { width: 2%; }
.bar .w4 { width: 4%; }
.bar .w6 { width: 6%; }
.bar .w8 { width: 8%; }
.bar .w10 { width: 10%; }
.bar .w12 { width: 12%; }
.bar .w14 { width: 14%; }
.bar .w16 { width: 16%; }
.bar .w18 { width: 18%; }
.bar .w20 { width: 20%; }
.bar .w22 { width: 22%; }
.bar .w24 { width: 24%; }
.bar .w26 { width: 26%; }
.bar .w28 { width: 28%; }
.bar .w30 { width: 30%; }
.bar .w32 { width: 32%; }
.bar .w34 { width: 34%; }
.bar .w36 { width: 36%; }
.bar .w38 { width: 38%; }
.bar .w40 { width: 40%; }
.bar .w42 { width: 42%; }
.bar .w44 { width: 44%; }
.bar .w46 { width: 46%; }
.bar .w48 { width: 48%; }
.bar .w50 { width: 50%; }
.bar .w52 { width: 52%; }
.bar .w54 { width: 54%; }
.bar .w56 { width: 56%; }
.bar .w58 { width: 58%; }
.bar .w60 { width: 60%; }
.bar .w62 { width: 62%; }
.bar .w64 { width: 64%; }
.bar .w66 { width: 66%; }
.bar .w68 { width: 68%; }
.bar .w70 { width: 70%; }
.bar .w72 { width: 72%; }
.bar .w74 { width: 74%; }
.bar .w76 { width: 76%; }
.bar .w78 { width: 78%; }
.bar .w80 { width: 80%; }
.bar .w82 { width: 82%; }
.bar .w84 { width: 84%; }
.bar .w86 { width: 86%; }
.bar .w88 { width: 88%; }
.bar .w90 { width: 90%; }
.bar .w92 { width: 92%; }
.bar .w94 { width: 94%; }
.bar .w96 { width: 96%; }
.bar .w98 { width: 98%; }
.bar .w100 { width: 100%; }

/* -- review reports ------------------------------------------------------------------ */
.sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
       padding: 3px 8px; border-radius: 4px; border: 1px solid; white-space: nowrap; line-height: 1.2; }
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sev-critical { color: #ffffff; background: var(--sev-critical); border-color: var(--sev-critical); }
.sev-critical::before { background: #ffffff; }
:root[data-theme="dark"] .sev-critical { color: #2a0b12; } :root[data-theme="dark"] .sev-critical::before { background: #2a0b12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sev-critical { color: #2a0b12; } :root:not([data-theme="light"]) .sev-critical::before { background: #2a0b12; } }
.sev-high { color: var(--sev-high); background: var(--sev-high-bg); border-color: var(--sev-high-line); }
.sev-medium { color: var(--sev-medium); background: var(--sev-medium-bg); border-color: var(--sev-medium-line); }
.sev-low { color: var(--sev-low); background: var(--sev-low-bg); border-color: var(--sev-low-line); }
.sev-info { color: var(--sev-info); background: var(--sev-info-bg); border-color: var(--sev-info-line); }
.state-tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.state-pass { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.state-fail { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.state-skip { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); }
.state-partial { color: var(--wait); background: var(--wait-bg); border-color: var(--wait-line); }

.report > * + * { margin-top: 18px; }
.report-part h3 { font-size: 15px; margin-bottom: 8px; }
.report-part.callout { background: var(--run-bg); border: 1px solid var(--run-line); border-left: 4px solid var(--marker);
                       border-radius: var(--radius-sm); padding: 14px 16px; }
.report-part .table { margin: 8px 0; }
.sev-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sev-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm);
            border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; }
.sev-tile .count { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sev-tile.sev-critical { color: var(--sev-critical); background: var(--sev-critical-bg); border-color: var(--sev-critical-line); }
.sev-tile.sev-critical::before, .sev-tile::before { display: none; }
.sev-tile:disabled { opacity: .45; cursor: default; }
.sev-tile[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.sev-tile:focus-visible { outline: 2px solid var(--focus); }
.findings { display: grid; gap: 14px; }
.finding { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--sev-info); border-radius: var(--radius); overflow: hidden; }
.sev-border-critical { border-left-color: var(--sev-critical); } .sev-border-high { border-left-color: var(--sev-high); }
.sev-border-medium { border-left-color: var(--sev-medium-mark); } .sev-border-low { border-left-color: var(--sev-low); }
.finding > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.finding > header h3 { font-size: 15px; flex: 1 1 260px; }
.finding > header .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
                         background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.finding .proof { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
                  background: var(--surface); border: 1px dashed var(--line-strong); color: var(--ink-2); }
.finding .lead { padding: 12px 18px 0; }
.fparts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 18px 16px; }
.fpart { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.fpart-fix, .fpart-evidence { grid-column: 1 / -1; }
.fpart h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fpart h4 .icon { width: 15px; height: 15px; }
.fpart .effort { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }
.fpart .prose { font-size: 13.5px; }
.fpart-where { border-color: var(--sev-low-line); background: var(--sev-low-bg); } .fpart-where h4 { color: var(--sev-low); }
.fpart-attacker { border-color: var(--sev-critical-line); background: var(--sev-critical-bg); } .fpart-attacker h4 { color: var(--sev-critical); }
.fpart-evidence { background: var(--surface-2); } .fpart-evidence h4 { color: var(--ink-2); }
.fpart-impact { border-color: var(--sev-medium-line); background: var(--sev-medium-bg); } .fpart-impact h4 { color: var(--sev-medium); }
.fpart-fix { border-color: var(--ok-line); background: var(--ok-bg); } .fpart-fix h4 { color: var(--ok); }
.fpart-other h4 { color: var(--ink-3); }
.fparts > section + section, .report section + section { margin-top: 0; }
.report > section + section, .report > * + * { margin-top: 18px; }
.fpart-impact { grid-column: 1 / -1; }
.fpart-where:not(:has(+ .fpart-attacker)), .fpart-attacker:not(.fpart-where + .fpart-attacker) { grid-column: 1 / -1; }
.report > .report-part:first-child:not(.callout) { color: var(--ink-2); font-size: 13.5px; background: var(--surface); border: 1px solid var(--line);
                                                    border-radius: var(--radius-sm); padding: 12px 16px; }
.sev-tile.sev-high { color: var(--sev-high); background: var(--sev-high-bg); border-color: var(--sev-high-line); }
.sev-tile.sev-medium { color: var(--sev-medium); background: var(--sev-medium-bg); border-color: var(--sev-medium-line); }
.sev-tile.sev-low { color: var(--sev-low); background: var(--sev-low-bg); border-color: var(--sev-low-line); }
.sev-tile.sev-info { color: var(--sev-info); background: var(--sev-info-bg); border-color: var(--sev-info-line); }

/* -- the chat beside an order ---------------------------------------------------------- */
.with-chat { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.with-chat .stats { margin-bottom: 0; }
.chat { position: sticky; top: 80px; height: calc(100vh - 104px); min-height: 420px; display: flex; flex-direction: column;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.chat > header .hint { margin: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); }
.msg { display: flex; gap: 8px; max-width: 100%; }
.msg .bubble { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.msg .bubble p:last-child, .msg .bubble ul:last-child { margin-bottom: 0; }
.msg.me { flex-direction: column; align-items: flex-end; }
.msg.me .bubble { background: var(--bubble-me); color: var(--bubble-me-ink); border-bottom-right-radius: 3px; max-width: 88%; }
.msg.me .bubble a, .msg.me .bubble code { color: var(--bubble-me-ink); }
.msg.me .bubble code { background: rgba(255, 255, 255, .15); border-color: transparent; }
.msg.ceo .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.msg.ceo > div { min-width: 0; flex: 1; }
.msg .when { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.msg .avatar { flex: none; margin-top: 2px; width: 30px; height: 22px; font-size: 9.5px; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-act { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: var(--run-bg); color: var(--run); border: 1px solid var(--run-line);
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing .bubble { color: var(--ink-3); }
.dots { display: inline-flex; gap: 3px; margin-right: 4px; vertical-align: middle; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.chat-empty { margin: auto 0; text-align: center; padding: 8px; }
.chat-empty strong { display: block; font-family: var(--f-display); font-size: 16px; margin-bottom: 6px; }
.suggests { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
button.suggest { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-strong); height: auto;
                 padding: 7px 10px; white-space: normal; text-align: left; font-weight: 500; justify-content: flex-start; }
button.suggest:hover { background: var(--surface-2); color: var(--ink); }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.chat-input textarea { min-height: 44px; max-height: 160px; resize: none; }
.chat-closed { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line-soft); }

/* -- tablet ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .search { width: 220px; }
  .with-chat { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1080px) {
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .with-chat { grid-template-columns: minmax(0, 1fr); }
  .chat { position: static; height: 70vh; }
  .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .qmini { display: none; }
}

/* -- phone: the sidebar becomes a navy band on top ---------------------------------- */
@media (max-width: 820px) {
  :root { --side-w: 0px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px 0;
          border-right: 0; border-bottom: 1px solid var(--side-border); overflow: visible; }
  .brand { padding: 4px 8px 4px 0; order: 0; }
  .brand .name { display: none; }
  .brand .mark-only { display: block; }
  .tenant { order: 0; margin: 0; padding: 2px 8px; max-width: 40vw; }
  .tenant span { display: none; }
  .tenant b { font-size: 13px; }
  .side .group { display: none; }
  .cta { order: 1; margin: 0 0 0 auto; height: 34px; padding: 0 12px; font-size: 13.5px; }
  .side .foot { order: 2; margin: 0; border: 0; padding: 0; flex-direction: row; position: relative; }
  .side .foot button, .look > summary { width: auto; height: 34px; padding: 0 8px; }
  .side .foot button span, .look > summary span { display: none; }
  details.look > form { position: absolute; right: 0; top: calc(100% + 6px); width: 240px; z-index: 9; background: var(--side); box-shadow: var(--shadow-lg); }
  .side nav { order: 3; flex-direction: row; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
  .side nav::-webkit-scrollbar { display: none; }
  .side .navs { order: 3; flex: 1 0 100%; display: flex; flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 4px -12px 0; padding: 0 8px; }
  .side .navs::-webkit-scrollbar { display: none; }
  .side nav a { white-space: nowrap; padding: 9px 10px 10px; border-radius: 0; }
  .side nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--marker); background: transparent; }
  .topbar { padding: 0 16px; min-height: 48px; top: auto; position: static; }
  .search { display: none; }
  .search-link { display: inline-flex; margin-left: auto; color: var(--ink-2); padding: 6px; }
  main { padding: 20px 16px 48px; }
  h1 { font-size: 21px; }
  .grid.halves, .split { grid-template-columns: minmax(0, 1fr); }
  .package { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 16px; }
  .package > :last-child:not(div) { grid-column: 2; justify-self: start; }
  article.document { padding: 18px; }
  .card > header, .card > .body, .card > form > .body, .need, .inbox .item, .statusband { padding-left: 16px; padding-right: 16px; }
  .stat { padding: 12px 14px; }
  .stat .value { font-size: 22px; }
  .head { margin-bottom: 18px; }
  .head .actions { width: 100%; }
  details.hold { position: static; }
  details.hold > .confirm { left: 16px; right: 16px; width: auto; top: auto; }
  .head { position: relative; }
  table.orders td:first-child { min-width: 210px; }
  table.orders .last { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  table.orders thead { display: none; }
  table.orders tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 16px;
                    border-bottom: 1px solid var(--line-soft); }
  table.orders tbody tr:last-child { border-bottom: 0; }
  table.orders td { padding: 0; border: 0; }
  table.orders td:first-child { grid-column: 1 / -1; width: auto; max-width: none; min-width: 0; }
  table.orders td:nth-child(4) { display: none; }
  table.orders tr[hidden] { display: none; }
  .fparts { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-auto-columns: auto; }
  .steps li:not(.now) .lbl, .steps .tag { display: none; }
  .steps li { padding: 0 8px 0 17px; gap: 6px; }
  .steps li:first-child { padding-left: 10px; }
  .steps li.now { flex-grow: 1; }
  .card.phases > .body { padding: 10px; }
  .sev-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  ul.feed li, ul.health li, ul.list li { padding-left: 16px; padding-right: 16px; }
}
/* -- phone: every table becomes a list of cards, the column's name above each value ------ */
@media (max-width: 640px) {
  .table.cards { overflow: visible; }
  .table.cards > table, .table.cards > table > tbody { display: block; }
  .table.cards > table > thead { display: none; }
  .table.cards > table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 16px;
                                      border-bottom: 1px solid var(--line-soft); }
  .table.cards > table > tbody > tr:last-child { border-bottom: 0; }
  .table.cards > table > tbody > tr > td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; width: auto; text-align: left;
                                           white-space: normal; overflow-wrap: anywhere; background: none; box-shadow: none; }
  .table.cards > table > tbody > tr > td:first-child, .table.cards > table > tbody > tr > td[colspan],
  .table.cards > table > tbody > tr > td.cause, .table.cards > table > tbody > tr > td.quota-cell { grid-column: 1 / -1; }
  .table.cards > table > tbody > tr > td:not(:first-child)[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px;
                                                                                  font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
  .table.cards > table > tbody > tr > td[colspan]::before { display: none; }
  .table.cards > table > tbody > tr > td:empty, .table.cards > table > tbody > tr > td.cause[title=""] { display: none; }
  .table.cards > table > tbody > tr.grp { display: block; padding: 8px 16px; background: var(--surface-2); }
  .table.cards > table > tbody > tr.failed, .table.cards > table > tbody > tr.hangs { box-shadow: inset 3px 0 0 var(--err); }
  .table.cards > table > tbody > tr.waiting, .table.cards > table > tbody > tr.attention { box-shadow: inset 3px 0 0 var(--wait-line); }
  .table.cards > table > tbody > tr.running { box-shadow: inset 3px 0 0 var(--run-line); }
  .table.cards td.quota-cell { min-width: 0; }
  .table.cards svg.share { max-width: none; }
  .filters { padding: 12px 16px; }
  .filters select, .filters input[type=search] { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat .value { font-size: 20px; }
  .head .actions > details, .head .actions > .button { flex: 1 1 auto; }
}