style.css

/* SPDX-License-Identifier: AGPL-3.0-or-later
   Copyright (C) 2026 Luca Padovan */

/* QubicaAMF - hawkBit console.
   Dark first, dense, and built for a bench: small type, tight rows, monospace
   for anything you might have to compare by eye. */

:root {
  /* Without this the browser draws its own widgets -- the date picker, its
     calendar popup, the spinners, the scrollbars -- in light, inside a dark
     page. It is one line and it is the difference between a native control
     that belongs here and one that looks pasted on. */
  color-scheme: dark;

  --bg:        #0d1117;
  --bg-2:      #141a22;
  --bg-3:      #1b232d;
  --line:      #26303c;
  --line-2:    #354250;
  --fg:        #e3e9f0;
  --fg-dim:    #93a1b1;
  --fg-faint:  #64748b;
  --accent:    #3ba9a1;
  --accent-2:  #57c7bf;
  --ok:        #3fb950;
  --warn:      #d29922;
  --err:       #f05d5d;
  --info:      #58a6ff;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Only in automatic mode: with a theme chosen by hand, [data-theme] is set and
   this must not fight it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f6f8fa; --bg-2: #ffffff; --bg-3: #eef2f6;
    --line: #d5dde5; --line-2: #c0cad4;
    --fg: #16202b; --fg-dim: #55637300; --fg-dim: #556373; --fg-faint: #7b8794;
    --accent: #157f78; --accent-2: #0f6b64;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 13px/1.5 var(--sans);
  /* Inter's defaults leave the digits proportional and the punctuation loose
     at this size: figures line up in columns, and contextual alternates give
     a plainer 'l' and 'a'. */
  font-feature-settings: "tnum" 1, "cv05" 1, "cv08" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- layout */
/* FLEX, NOT GRID, and the reason is the animation.
   As a grid item the sidebar sat in an 'auto' track, which sizes itself to the
   item's min-content: with the labels still in the DOM that is far wider than
   58px, so the width transition ran on the element while the track it lives in
   did not follow, and the collapse looked instantaneous. A flex item with an
   animated flex-basis and min-width:0 shrinks for real, in every browser. */
#app { display: flex; height: 100vh; }

#sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  flex: 0 0 210px; min-width: 0; overflow: hidden;
  transition: flex-basis .24s cubic-bezier(.4, 0, .2, 1);
}
.brand {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 8px;
}
.brand b { font-size: 14px; letter-spacing: .2px; }
.brand span { font-size: 11px; color: var(--fg-faint); }

nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
nav button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--fg-dim); text-align: left;
}
nav button:hover { background: var(--bg-3); color: var(--fg); }
nav button.on { background: var(--bg-3); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
nav button .ct {
  margin-left: auto; font: 11px/1 var(--mono); color: var(--fg-faint);
  background: var(--bg); padding: 3px 6px; border-radius: 10px;
}
nav .sep { margin: 8px 10px 4px; font-size: 10px; letter-spacing: .8px;
           text-transform: uppercase; color: var(--fg-faint); }

.side-foot {
  margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--fg-faint); display: flex; flex-direction: column; gap: 6px;
}
.side-foot .row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }

#main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

header.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
header.bar h1 { margin: 0; font-size: 15px; font-weight: 600; }
header.bar .grow { flex: 1; }

#view { flex: 1; overflow: auto; padding: 16px; min-height: 0; }

/* ---------------------------------------------------------------- controls */
/* One height for everything on a toolbar, so nothing sits half a pixel off. */
:root { --ctl: 30px; --r: 8px; }

.btn {
  height: var(--ctl);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; border-radius: var(--r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer; white-space: nowrap;
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--bg-3); color: var(--fg); }
.btn:active:not(:disabled) { background: var(--line); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Outline only where a button has to look like an edge -- dialogs, mostly. */
.btn.outline { border-color: var(--line); }
.btn.outline:hover:not(:disabled) { border-color: var(--line-2); background: var(--bg-3); }

/* Exactly one filled button per screen: the thing you came to do. */
.btn.primary {
  background: var(--accent); border-color: var(--accent);
  color: #04211f; font-weight: 600;
}
/* The spinner defaults to the accent colour, which is exactly the colour a
   primary button is filled with. */
.btn.primary .spin { border-color: color-mix(in srgb, currentColor 35%, transparent);
                     border-top-color: currentColor; }
.btn:disabled { opacity: .65; cursor: default; }
.btn.primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: #04211f; }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
.btn.ghost { color: var(--fg-faint); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--accent-2); }

.btn.sm { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 6px; }

/* A button that is waiting for the server says so itself. */
.btn.loading { pointer-events: none; color: transparent !important; position: relative; }
.btn.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-top-color: var(--accent-2); animation: sp .6s linear infinite;
}

/* Segmented control: one object, not six loose boxes. */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-2); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button {
  height: 24px; padding: 0 11px; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg-faint); cursor: pointer;
  font-size: 12px; white-space: nowrap;
  transition: background .13s, color .13s;
}
.seg button:hover { color: var(--fg); background: var(--bg-3); }
.seg button.on {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-3));
  color: var(--accent-2); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.seg button .n { opacity: .65; margin-left: 5px; font-family: var(--mono); font-size: 11px; }
/* a status worth a look, when it is not zero: the count as a badge */
.seg button .n.alert { opacity: 1; font-weight: 600; padding: 1px 6px; border-radius: 9px; }
.seg button .n.alert.err   { color: #fff; background: var(--err); }
.seg button .n.alert.amber { color: var(--warn); background: color-mix(in srgb, var(--warn) 22%, transparent); }
.seg button .n.alert.mute  { color: var(--fg); background: var(--bg-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }

input[type=text], input[type=password], input[type=number], select, textarea {
  height: var(--ctl);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0 10px; min-width: 0;
  transition: border-color .13s, box-shadow .13s;
}
textarea { height: auto; padding: 8px 10px; }
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input[type=checkbox] { height: auto; accent-color: var(--accent); width: 15px; height: 15px; }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-dim); }
label.f input, label.f select, label.f textarea { color: var(--fg); }

.search {
  height: var(--ctl); flex: 0 1 360px; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px;
  transition: border-color .13s, box-shadow .13s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search input { height: auto; border: 0; background: transparent; padding: 0; flex: 1; }
.search input:focus { box-shadow: none; }
.search kbd {
  font: 10px/1 var(--mono); color: var(--fg-faint);
  background: var(--bg-3); border-radius: 4px; padding: 3px 5px;
}

/* A thin rule between groups of toolbar buttons. */
.vsep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* ---------------------------------------------------------------- tables */
table.t { width: 100%; border-collapse: collapse; }
table.t th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600;
  font-size: 11px; line-height: 16px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--fg-faint);
  padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
}
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tbody tr { cursor: pointer; }
table.t tbody tr:hover { background: var(--bg-2); }
table.t tbody tr.sel { background: var(--bg-3); }
.mono { font-family: var(--mono); font-size: 12px; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

.empty { padding: 40px; text-align: center; color: var(--fg-faint); }
.empty b { display: block; color: var(--fg-dim); margin-bottom: 6px; font-size: 14px; }

/* ---------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill.err  { color: var(--err);  background: color-mix(in srgb, var(--err) 14%, transparent); }
.pill.info { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.pill.mute { color: var(--fg-faint); background: var(--bg-3); }

/* IN FLIGHT. A deployment on its way is the one thing you sit and watch, so it
   spins instead of sitting there as a coloured box that might as well be
   stuck. Same for a device that has missed its poll: it breathes. */
.pill.live { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.pill.live::before {
  width: 9px; height: 9px; border-radius: 50%;
  background: none; border: 1.6px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor; animation: sp .7s linear infinite;
}
.pill.pulse::before { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
}
.card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-faint); }
.card .v { font-size: 26px; font-weight: 600; margin-top: 4px; font-family: var(--mono); }
.card .sub { font-size: 11px; color: var(--fg-faint); margin-top: 2px; }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.panel > h3 {
  margin: 0; padding: 10px 14px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-dim); border-bottom: 1px solid var(--line); background: var(--bg-3);
}
.panel .body { padding: 14px; }

/* ---------------------------------------------------------------- drawer */
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 92vw);
  background: var(--bg-2); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; z-index: 40;
  transform: translateX(100%); transition: transform .16s ease-out;
}
#drawer.open { transform: none; box-shadow: -18px 0 50px rgba(0,0,0,.45); }
#drawer .dhead {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
#drawer .dhead h2 { margin: 0; font-size: 14px; font-family: var(--mono); word-break: break-all; }
#drawer .dbody { flex: 1; overflow: auto; padding: 16px; }
#scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39;
  opacity: 0; pointer-events: none; transition: opacity .16s;
}
#scrim.open { opacity: 1; pointer-events: auto; }

dl.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { color: var(--fg-faint); font-size: 12px; }
dl.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-word; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 7px 12px; cursor: pointer; color: var(--fg-dim);
}
.tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- misc */
/* Progress bars (js/bars.js), after Tabler's stacked progress (tabler.io,
   MIT): flat segments on a quiet track, 2px apart, rounded ends. Devices at
   work are a pale band with Tabler's indeterminate bar travelling across it
   -- the Material motion. No gradients, no glow, no pulse. */
.bars {
  --bh: 8px;
  display: flex; height: var(--bh); min-width: 90px;
  border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
}
.bars .fill {
  display: flex; gap: 2px; height: 100%; border-radius: 999px; overflow: hidden;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.bars .fill:not(:empty) { min-width: var(--bh); }
.bars i {
  --c: var(--ok);
  display: block; height: 100%; min-width: 0; position: relative; overflow: hidden;
  background: var(--c);
  transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1);
}
.bars i.ok   { --c: var(--ok); }
.bars i.err  { --c: var(--err); }
.bars i.back { --c: var(--warn, #e5a50a); }
.bars i.up   { --c: var(--info); }
.bars i.run  { background: color-mix(in srgb, var(--info) 22%, transparent); }
.bars i.run::before {
  content: ''; position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--info);
  animation: progress-indeterminate 1.6s cubic-bezier(.65, .815, .735, .395) infinite;
}
@keyframes progress-indeterminate {
  0% { left: -35%; right: 100%; }
  60%, 100% { left: 100%; right: -90%; }
}

.log { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap;
       background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
       padding: 10px; max-height: 320px; overflow: auto; }
.log .t { color: var(--fg-faint); }

.toast-wrap { position: fixed; right: 16px; bottom: 16px; display: flex;
              flex-direction: column; gap: 8px; z-index: 60; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line-2); border-left: 3px solid var(--info);
  border-radius: 8px; padding: 10px 12px; max-width: 460px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.toast.err { border-left-color: var(--err); }
.toast.ok { border-left-color: var(--ok); }
.toast { position: relative; padding-right: 30px; }
.toast b { display: block; margin-bottom: 2px; }
.toast-x {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--fg-faint); cursor: pointer;
  font-size: 15px; line-height: 1;
  opacity: .55; transition: opacity .12s, background .12s, color .12s;
}
.toast:hover .toast-x { opacity: 1; }
.toast-x:hover { background: var(--bg-3); color: var(--fg); }
.toast .btn { margin-top: 8px; }
.toast .m { font-size: 12px; color: var(--fg-dim); white-space: pre-wrap; }

dialog {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 0; width: min(520px, 94vw);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
dialog .dc { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
dialog .da { padding: 12px 16px; border-top: 1px solid var(--line);
             display: flex; gap: 8px; justify-content: flex-end; }
/* a dialog's refusal, in the dialog; the field it is about marked */
dialog .merr { display: flex; align-items: flex-start; gap: 9px; margin: 0 16px 14px; padding: 10px 12px; border-radius: 9px;
  font-size: 13px; line-height: 1.4; color: var(--fg); background: color-mix(in srgb, var(--err) 12%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--err) 45%, transparent); }
dialog .merr[hidden] { display: none; }
dialog .merr .ico { flex: none; color: var(--err); margin-top: 1px; }
dialog .merr.shake { animation: merr-shake .36s ease-in-out; }
@keyframes merr-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
dialog input.invalid, dialog select.invalid, dialog textarea.invalid { border-color: var(--err) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 20%, transparent); }
/* a placeholder is an example, and must not pass for something typed */
dialog input::placeholder, dialog textarea::placeholder { color: color-mix(in srgb, var(--fg-faint) 55%, transparent); font-style: italic; }

/* The sign-in page is the one screen with nothing to do on it, so it is the
   one that can afford some air: a card floating on a wash of the theme's own
   accent, which means it follows every theme instead of being painted once. */
#login { position: relative; display: grid; place-items: center;
         min-height: 100vh; padding: 24px; overflow: hidden; }
.login-glow { position: absolute; inset: -20% -10% auto -10%; height: 70vh; pointer-events: none;
  background:
    radial-gradient(46% 60% at 22% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(40% 55% at 82% 8%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%);
  filter: blur(6px);
}
#login form {
  position: relative; width: 352px; display: flex; flex-direction: column; gap: 13px;
  padding: 30px 28px 22px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .18);
  animation: liftin .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes liftin { from { opacity: 0; transform: translateY(10px); } }
#login h1 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
#login p { margin: 0; color: var(--fg-faint); font-size: 12px; }
#login .sub { letter-spacing: .3px; }
#login label.f { gap: 6px; }

/* The logo sits in a tile so it reads as a mark rather than a stray picture. */
.logo-tile {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
}
.logo-tile .logo-big { width: 52px; height: auto; margin: 0; }

/* One field shape, shared with the column filters: icon, input, optional
   trailing button, and an accent ring when it has the caret. */
.fld {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .13s, box-shadow .13s, background .13s;
}
.fld:hover { border-color: var(--line-2); }
.fld:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.fld .ico { opacity: .42; flex: 0 0 auto; transition: opacity .13s, color .13s; }
.fld:focus-within .ico { opacity: 1; color: var(--accent-2); }
.fld input {
  flex: 1; min-width: 0; height: auto; padding: 0; font-size: 13px;
  background: transparent; border: 0; border-radius: 0; color: var(--fg);
}
.fld input:focus { outline: none; box-shadow: none; }
.fld .reveal {
  display: grid; place-items: center; border: 0; background: transparent;
  cursor: pointer; color: var(--fg-faint); padding: 4px; border-radius: 6px;
}
.fld .reveal:hover { color: var(--fg); background: var(--bg-3); }

#login .btn.lg {
  height: 40px; font-size: 13px; font-weight: 600; border-radius: 10px;
  justify-content: center; margin-top: 3px;
}
/* A failed sign-in is the one message here, so it gets a shape of its own
   rather than a line of red text under the button. */
.banner-err {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 9px;
  background: color-mix(in srgb, var(--err) 13%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--err) 40%, transparent);
  color: var(--err) !important; font-size: 12px !important;
  animation: shake .3s;
}
@keyframes shake {
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
.login-foot {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line);
}
.login-foot p { flex: 1; line-height: 1.45; }
.login-foot select { height: 26px; font-size: 11px; }
@media (max-width: 420px) { #login form { width: 100%; padding: 24px 18px 18px; } }

.spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
        border: 2px solid var(--line-2); border-top-color: var(--accent);
        animation: sp .7s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

.hidden { display: none !important; }
.flex { display: flex; align-items: center; gap: 8px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------- loading states */
/* A skeleton beats a spinner in the middle of an empty page: the shape of what
   is coming is already there, so the table does not jump when it lands. */
.skel { display: flex; flex-direction: column; gap: 1px; }
.skel i {
  display: block; height: 34px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* The upload bar carries its own percentage, so a 594 MB .swu does not look
   like a frozen page. */
.upl { display: flex; align-items: center; gap: 10px; }
.upl .bars { flex: 1; height: 9px; }
.upl b { font-family: var(--mono); font-size: 12px; min-width: 46px; text-align: right; }

/* Row-level activity: a target with an action in flight gets a moving edge. */
tr.busy td:first-child { position: relative; }
tr.busy td:first-child::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: var(--info); animation: pulse 1.6s ease-in-out infinite;
}

/* Toasts arrive from the side rather than appearing. */
.toast { animation: slidein .18s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }

/* REDUCED MOTION, but only where motion is decoration.
   The blanket rule that used to be here killed every transition in the page --
   including the sidebar collapsing and the drawer sliding -- on any machine
   whose system asks for less animation, which on Windows is a common default.
   The result was a console that looked like nothing worked.
   What actually causes trouble is motion that loops or travels; a 240 ms layout
   transition does not. So the loops stop and the transitions stay. */
@media (prefers-reduced-motion: reduce) {
  /* The decorative loops go: a shimmering skeleton, a sweeping bar, a pulsing
     dot say nothing that the page does not already say in words.
     A spinner is not decoration -- it is the difference between "working" and
     "stuck", and a ring that does not turn states the second one. It keeps
     turning. */
  /* The progress bars keep moving, like the spinner: a bar that shines says
     "working", a still one reads as stuck. */
  .pill.pulse::before, .skel i, #progress.on::after, .toast {
    animation: none !important;
  }
}

/* ------------------------------------------------------------- accordion */
/* Thirty expanded logs is a wall, not a history: shut by default, and the
   header alone says how each one ended. */
.panel.acc { transition: box-shadow .13s; }
.panel.acc:hover { box-shadow: 0 0 0 1px var(--line-2); }
.ahead {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; cursor: pointer; user-select: none;
}
.ahead:hover { background: var(--bg-3); }
.ahead .chev { color: var(--fg-faint); width: 10px; transition: transform .13s; }
.ahead .sum {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px;
}
.ahead .when { flex: 0 0 auto; }
.abody { display: none; padding: 0 12px 12px; }
.panel.acc.open .abody { display: flex; }
.panel.acc.open .ahead { border-bottom: 1px solid var(--line); }
.panel.acc.open .ahead .sum { display: none; }

/* ------------------------------------------------------------- progress */
/* Only when a page does not open at once: under ~150 ms a flashing bar is
   noise, over it the page looks broken without one. */
#progress { height: 2px; background: transparent; overflow: hidden; }
#progress.on::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  animation: sweep 1s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* The old content stays put while the new one loads -- greyed, and not
   clickable, so nothing is acted on twice. */
#view.stale { opacity: .45; pointer-events: none; transition: opacity .1s; }

/* ---------------------------------------------------------------- pager */
.pager {
  display: flex; align-items: center; gap: 8px; padding: 10px 2px 2px;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.pager .grow { flex: 1; }
.pager select { height: 24px; padding: 0 6px; font-size: 12px; }

/* Per-column filter row: part of the header, not a second toolbar. */
/* The filter row belongs to the header. Each cell is a quiet field that only
   draws an edge when you are near it, and colours itself when it is holding
   something -- so a short table is never unexplained. */
tr.filters th {
  position: sticky; top: 33px; z-index: 1;
  padding: 7px 8px 8px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.fbox {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 7px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid transparent;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.fbox .ico { opacity: .35; flex: 0 0 auto; transition: opacity .12s, color .12s; }
.fbox:hover { border-color: var(--line); }
.fbox:hover .ico { opacity: .6; }
.fbox:focus-within {
  background: var(--bg); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.fbox:focus-within .ico { opacity: 1; color: var(--accent-2); }
.fbox input {
  flex: 1; min-width: 0; height: auto; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  font-size: 12px; color: var(--fg);
}
.fbox input:focus { outline: none; box-shadow: none; }
.fbox input::placeholder { color: color-mix(in srgb, var(--fg-faint) 60%, transparent); }
/* Holding a value: coloured, and with a way out. */
.fbox.has {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.fbox.has input { color: var(--accent-2); font-weight: 500; }
.fbox.has .ico { opacity: 1; color: var(--accent-2); }
.fbox .fx {
  display: none; border: 0; background: transparent; cursor: pointer;
  color: var(--fg-faint); font-size: 15px; line-height: 1; padding: 0 2px;
  border-radius: 4px;
}
.fbox.has .fx { display: block; }
.fbox .fx:hover { color: var(--err); background: var(--bg-3); }


/* The sidebar says when the clock is held, so a table that is not moving is
   never mistaken for one that is broken. */
#paused { color: var(--warn); font-size: 11px; }
.side-foot select { height: 22px; padding: 0 4px; font-size: 11px; }

/* ------------------------------------------------- assigned / installed */
.ai { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-row { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ai-k {
  flex: 0 0 30px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--fg-faint);
}
.ai-k.wait { color: var(--warn); }
.ai-v {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
}
.ai-row:nth-child(2) .ai-v { color: var(--fg-dim); }

/* Amber for a device that is mid-update: visible without shouting. */
.pill.amber { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }

/* ----------------------------------------------------------- column picker */
dialog:has(.colpick) { width: min(660px, 94vw); }
.colpick { display: flex; flex-direction: column; gap: 8px; }
.colpick-h {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--fg-faint);
}
.colpick-h .grow { flex: 1; }

.colpick-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  max-height: 290px; overflow-y: auto;
}
.colrow {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  cursor: grab; transition: background .12s;
}
.colrow:last-child { border-bottom: 0; }
.colrow:hover { background: var(--bg-3); }
.colrow.dragging { opacity: .4; }
.colrow.over { box-shadow: inset 0 2px 0 var(--accent); }
.colrow .grip { color: var(--fg-faint); letter-spacing: -1px; cursor: grab; }
.colrow .cl { flex: 1; }
.colrow .tag {
  font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 2px 6px; border-radius: 5px;
}
.colrow .btn.sm { padding: 0 6px; }

/* Available columns as chips: one click adds one, and the list is short enough
   to read at a glance -- which a column of checkboxes never is. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 14px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-dim);
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
.chip .plus { color: var(--accent-2); font-weight: 700; }
.chip.attr .plus { color: var(--warn); }

/* ------------------------------------------------------------ date fields */
input[type=datetime-local] {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2px;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 2px; border-radius: 4px;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--bg-3);
}
input[type=datetime-local]:disabled { opacity: .4; }

/* Nobody wants to spin four fields to say "tonight at three": the shortcuts
   are what the field is actually for. */
.when-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.when-quick .chip { height: 22px; padding: 0 9px; font-size: 12px; }

/* ------------------------------------------------------ colour + files */
/* Two controls the platform draws in its own language, replaced by ours. */
.hidden-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cpick { display: flex; flex-direction: column; gap: 10px; }
.cpick-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.swatch {
  position: relative; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; cursor: pointer;
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--sw) 60%, transparent);
  background: var(--sw); color: #fff;
  transition: transform .12s, box-shadow .12s;
}
.swatch .ico { opacity: 0; transition: opacity .1s; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.swatch:hover { transform: translateY(-1px); }
.swatch.on { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--sw); }
.swatch.on .ico { opacity: 1; }
.swatch.custom {
  display: grid; place-items: center; color: var(--fg-dim);
  background: var(--bg-3); border-color: var(--line); border-style: dashed;
}
.swatch.custom .ico { opacity: 1; filter: none; }
.swatch.custom:hover, .swatch.custom.on { color: var(--accent-2); border-color: var(--accent); border-style: solid; }

/* The custom panel: a hue strip and a saturation/brightness square, so no
   part of choosing a colour ever leaves the page. */
.cpick-panel { display: flex; flex-direction: column; gap: 9px; }
.sv {
  position: relative; height: 104px; border-radius: 9px; cursor: crosshair;
  border: 1px solid var(--line); overflow: hidden; touch-action: none;
}
.sv i { position: absolute; inset: 0; border-radius: inherit; }
.sv-sat { background: linear-gradient(to right, #fff, transparent); }
.sv-val { background: linear-gradient(to top, #000, transparent); }
.hue {
  position: relative; height: 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.sv .dot, .hue .dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transform: translate(-50%, -50%); pointer-events: none;
}
.hue .dot { top: 50%; }

.hexbox { flex: 0 0 122px; height: var(--ctl); font-family: var(--mono); }
.hexbox .hash { color: var(--fg-faint); font-family: var(--mono); }
.hexbox input {
  flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: transparent;
  font-family: var(--mono); font-size: 12px; text-transform: lowercase;
}
.hexbox input:focus { outline: none; box-shadow: none; }
/* The preview is the tag itself, with the name being typed in it. */
.tag-preview {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--sw); border: 1px solid color-mix(in srgb, var(--sw) 55%, transparent);
  background: color-mix(in srgb, var(--sw) 15%, transparent);
}
.tag-preview::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sw);
}
.swatch-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
              background: var(--sw); }

.fz {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 18px 14px; cursor: pointer; text-align: center;
  border: 1px dashed var(--line-2); border-radius: 11px;
  background: var(--bg); color: var(--fg-dim);
  transition: border-color .13s, background .13s, color .13s;
}
.fz:hover { border-color: var(--accent); color: var(--fg); }
.fz .ico { opacity: .5; }
.fz:hover .ico, .fz.over .ico, .fz.has .ico { opacity: 1; color: var(--accent-2); }
.fz.over { border-color: var(--accent); border-style: solid;
           background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.fz.has { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fz-t { font-size: 12px; }
.fz-list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fz-f { display: flex; gap: 10px; justify-content: center; font-size: 12px; }
.fz-f .n { font-family: var(--mono); color: var(--fg); word-break: break-all; }
.fz-f .s { color: var(--fg-faint); white-space: nowrap; }

/* ------------------------------------------------- native widget cleanup */
/* The browser's own spinner is a light box with two grey chevrons in it. It
   cannot be themed properly, only removed, so number fields are typed and
   stepped with our own buttons where stepping is actually useful. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { flex: 1; text-align: center; font-family: var(--mono); }
.stepper button {
  width: 26px; height: var(--ctl); flex: 0 0 26px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-3); color: var(--fg-dim); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.stepper button:hover { border-color: var(--accent); color: var(--accent-2); }
.stepper button:active { background: var(--line); }

/* Selects get one chevron of ours instead of whatever the platform draws. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-faint) 50%),
                    linear-gradient(135deg, var(--fg-faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:hover { background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
                                 linear-gradient(135deg, var(--accent-2) 50%, transparent 50%); }
.side-foot select, .pager select { padding-right: 22px; background-position: calc(100% - 12px) center, calc(100% - 8px) center; }

/* ------------------------------------------------------------- type badges */
/* Blue, green and amber: three families, not three shades of one. The previous
   set -- blue, teal, violet -- were all cool and all close, which at eleven
   pixels down a long column is no distinction at all. Each also carries its
   initial, so the difference survives a colour-blind reader and a bad screen. */
.pill.ty-os, .pill.ty-app, .pill.ty-both {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .3px; padding: 2px 8px; gap: 6px;
}
.pill.ty-os::before, .pill.ty-app::before, .pill.ty-both::before { display: none; }
.pill.ty-os {
  color: #6cb6ff; background: color-mix(in srgb, #6cb6ff 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #6cb6ff 32%, transparent);
}
.pill.ty-app {
  color: #56d364; background: color-mix(in srgb, #56d364 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #56d364 32%, transparent);
}
.pill.ty-both {
  color: #e3a008; background: color-mix(in srgb, #e3a008 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #e3a008 38%, transparent);
}

/* ---------------------------------------------------------------- icons */
.ico { flex: 0 0 auto; opacity: .75; }
nav button .ico { opacity: .6; transition: opacity .12s, color .12s; }
nav button:hover .ico, nav button.on .ico { opacity: 1; }
nav button.on .ico { color: var(--accent-2); }
.pill .ico { opacity: .9; margin-right: -1px; }

/* ------------------------------------------------------------------- brand */
.brand { gap: 10px; align-items: center; }
.brand .logo { width: 26px; height: auto; flex: 0 0 auto; }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.brand-t b { font-size: 13px; }
.brand-t span { font-size: 10px; color: var(--fg-faint); letter-spacing: .4px; text-transform: uppercase; }
.login-head { display: flex; flex-direction: column; align-items: center; gap: 9px;
              text-align: center; margin-bottom: 6px; }
.logo-big { width: 96px; height: auto; }
nav button .ct { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- collapsed sidebar */
/* What animates is the sidebar's WIDTH, not grid-template-columns: browsers
   interpolate a width everywhere, while interpolating a grid track is recent
   and was silently doing nothing here. The grid follows with 'auto'.
   overflow:hidden matters too -- without it the footer spills out of the
   58px column while the transition is still running. */
#app.collapsed #sidebar { flex-basis: 58px; }

/* Labels fade and give up their width, so the icons settle instead of jumping. */
.lbl {
  display: inline-block; white-space: nowrap;
  transition: opacity .12s ease, max-width .22s cubic-bezier(.4, 0, .2, 1);
  max-width: 200px; opacity: 1; overflow: hidden;
}
#app.collapsed .lbl { max-width: 0; opacity: 0; }

.brand #navtoggle { margin-left: auto; padding: 0 6px; }
#app.collapsed .brand { justify-content: center; padding: 12px 6px; gap: 0; }
#app.collapsed .brand .logo, #app.collapsed .brand-t { display: none; }
#app.collapsed .brand #navtoggle { margin: 0; }

#app.collapsed nav { padding: 8px 6px; }
#app.collapsed nav button { justify-content: center; padding: 9px 0; gap: 0; position: relative; }
#app.collapsed nav .sep { height: 1px; margin: 8px 6px; padding: 0; background: var(--line); }
#app.collapsed nav button .ct {
  position: absolute; top: 2px; right: 4px; margin: 0;
  font-size: 9px; padding: 0 4px; line-height: 1.5;
}

/* The footer is settings, not navigation: collapsed, only the way out stays.
   Theme and refresh are both in Configuration as well, so nothing is lost. */
#app.collapsed .side-foot { align-items: center; padding: 10px 6px; }
#app.collapsed .side-foot .row { justify-content: center; gap: 0; }
#app.collapsed #conn,
#app.collapsed #paused,
#app.collapsed .side-foot label { display: none; }
#app.collapsed #logout { padding: 0 8px; }

#navtoggle .ico { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }

/* ================================================================= themes */
/* Each theme is the same dozen variables. Everything else in the sheet is
   derived from them with color-mix, so a theme is a palette and never a set of
   exceptions -- and color-scheme goes with it, or the browser draws its own
   widgets from the other world.
   'auto' sets no attribute at all and lets the media query above decide. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0d1117; --bg-2:#141a22; --bg-3:#1b232d; --line:#26303c; --line-2:#354250;
  --fg:#e3e9f0; --fg-dim:#93a1b1; --fg-faint:#64748b;
  --accent:#3ba9a1; --accent-2:#57c7bf;
  --ok:#3fb950; --warn:#d29922; --err:#f05d5d; --info:#58a6ff;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f6f8fa; --bg-2:#ffffff; --bg-3:#eef2f6; --line:#d5dde5; --line-2:#c0cad4;
  --fg:#16202b; --fg-dim:#556373; --fg-faint:#7b8794;
  --accent:#157f78; --accent-2:#0f6b64;
  --ok:#1a7f37; --warn:#9a6700; --err:#cf222e; --info:#0969da;
}
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg:#05070d; --bg-2:#0a0f18; --bg-3:#111826; --line:#1b2436; --line-2:#2a3550;
  --fg:#dfe6f2; --fg-dim:#8b98b3; --fg-faint:#5b6885;
  --accent:#4c6ef5; --accent-2:#748ffc;
  --ok:#37b24d; --warn:#f59f00; --err:#fa5252; --info:#4dabf7;
}
:root[data-theme="nord"] {
  color-scheme: dark;
  --bg:#2e3440; --bg-2:#343b48; --bg-3:#3b4252; --line:#434c5e; --line-2:#4c566a;
  --fg:#eceff4; --fg-dim:#c3ccd9; --fg-faint:#8996a8;
  --accent:#88c0d0; --accent-2:#8fbcbb;
  --ok:#a3be8c; --warn:#ebcb8b; --err:#bf616a; --info:#81a1c1;
}
:root[data-theme="dracula"] {
  color-scheme: dark;
  --bg:#282a36; --bg-2:#2f3242; --bg-3:#383b4d; --line:#44475a; --line-2:#565a72;
  --fg:#f8f8f2; --fg-dim:#c9cbe0; --fg-faint:#8e91ab;
  --accent:#bd93f9; --accent-2:#d0aaff;
  --ok:#50fa7b; --warn:#f1fa8c; --err:#ff5555; --info:#8be9fd;
}
:root[data-theme="gruvbox"] {
  color-scheme: dark;
  --bg:#1d2021; --bg-2:#282828; --bg-3:#32302f; --line:#3c3836; --line-2:#504945;
  --fg:#fbf1c7; --fg-dim:#d5c4a1; --fg-faint:#a89984;
  --accent:#8ec07c; --accent-2:#b8bb26;
  --ok:#b8bb26; --warn:#fabd2f; --err:#fb4934; --info:#83a598;
}
:root[data-theme="solarized-dark"] {
  color-scheme: dark;
  --bg:#002b36; --bg-2:#073642; --bg-3:#0b4553; --line:#134f5c; --line-2:#2a6d7c;
  --fg:#eee8d5; --fg-dim:#93a1a1; --fg-faint:#657b83;
  --accent:#2aa198; --accent-2:#5fd3c8;
  --ok:#859900; --warn:#b58900; --err:#dc322f; --info:#268bd2;
}
:root[data-theme="solarized-light"] {
  color-scheme: light;
  --bg:#fdf6e3; --bg-2:#fffcf2; --bg-3:#f2e9d0; --line:#e0d8bf; --line-2:#c9c0a6;
  --fg:#073642; --fg-dim:#586e75; --fg-faint:#93a1a1;
  --accent:#2aa198; --accent-2:#1c7d76;
  --ok:#859900; --warn:#b58900; --err:#dc322f; --info:#268bd2;
}
:root[data-theme="amber"] {
  color-scheme: dark;
  --bg:#0c0a06; --bg-2:#151109; --bg-3:#1e180d; --line:#2c2413; --line-2:#43371c;
  --fg:#ffd08a; --fg-dim:#c79b5e; --fg-faint:#8a6c41;
  --accent:#ffb020; --accent-2:#ffc85c;
  --ok:#8bc34a; --warn:#ffb020; --err:#ff6b4a; --info:#e0a458;
}
:root[data-theme="mono"] {
  color-scheme: dark;
  --bg:#0b0b0b; --bg-2:#141414; --bg-3:#1d1d1d; --line:#2b2b2b; --line-2:#3d3d3d;
  --fg:#ededed; --fg-dim:#a8a8a8; --fg-faint:#757575;
  --accent:#d0d0d0; --accent-2:#ffffff;
  --ok:#c8c8c8; --warn:#a0a0a0; --err:#ff8080; --info:#b8b8b8;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --bg:#f4f1ea; --bg-2:#fbf9f4; --bg-3:#eae5da; --line:#ddd6c8; --line-2:#c7bda9;
  --fg:#2b2a26; --fg-dim:#5d594f; --fg-faint:#8a8478;
  --accent:#8a6d3b; --accent-2:#6f562c;
  --ok:#3f6f3f; --warn:#96700f; --err:#a83232; --info:#3a6ea5;
}
:root[data-theme="ocean"] {
  color-scheme: dark;
  --bg:#0b1a24; --bg-2:#102532; --bg-3:#153040; --line:#1d3f52; --line-2:#2a5872;
  --fg:#e0f0f7; --fg-dim:#9dbccc; --fg-faint:#6b8fa3;
  --accent:#25b7d3; --accent-2:#5ed6ec;
  --ok:#3ec48b; --warn:#e6b450; --err:#f2626b; --info:#5aa9e6;
}
:root[data-theme="forest"] {
  color-scheme: dark;
  --bg:#0e1512; --bg-2:#141d19; --bg-3:#1b2721; --line:#25342c; --line-2:#354a3e;
  --fg:#e3eee7; --fg-dim:#9db8a8; --fg-faint:#6d8a7a;
  --accent:#4caf7d; --accent-2:#6fd39c;
  --ok:#6fd39c; --warn:#d8b34a; --err:#e0685f; --info:#5fa8d3;
}
:root[data-theme="tokyo-night"] {
  color-scheme: dark;
  --bg:#1a1b26; --bg-2:#1f2335; --bg-3:#24283b; --line:#2a2f45; --line-2:#3b4261;
  --fg:#c0caf5; --fg-dim:#a9b1d6; --fg-faint:#636b95;
  --accent:#7aa2f7; --accent-2:#bb9af7;
  --ok:#9ece6a; --warn:#e0af68; --err:#f7768e; --info:#7dcfff;
}
:root[data-theme="monokai"] {
  color-scheme: dark;
  --bg:#272822; --bg-2:#2d2e27; --bg-3:#34352d; --line:#3e3f36; --line-2:#56574b;
  --fg:#f8f8f2; --fg-dim:#cfcfc2; --fg-faint:#8f908a;
  --accent:#a6e22e; --accent-2:#e6db74;
  --ok:#a6e22e; --warn:#e6db74; --err:#f92672; --info:#66d9ef;
}

/* ------------------------------------------------------------ theme picker */
/* Each swatch paints itself with its own theme's variables, so the grid is a
   preview and not a legend to be kept in step by hand. */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.theme {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-dim);
  transition: border-color .12s, color .12s;
}
.theme:hover { border-color: var(--line-2); color: var(--fg); }
.theme.on { border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 1px var(--accent); }
.theme .sw { display: flex; border-radius: 5px; overflow: hidden; flex: 0 0 auto; }
.theme .sw i { display: block; width: 12px; height: 22px; }
.theme .sw .a { background: var(--bg); }
.theme .sw .b { background: var(--bg-3); }
.theme .sw .c { background: var(--accent); }
.theme .tn { font-size: 12px; }
/* The preview of a theme that is not the current one still has to look like
   that theme, so each swatch re-declares the palette locally. */
.theme[data-t="dark"]            { --bg:#0d1117; --bg-3:#1b232d; --accent:#3ba9a1; }
.theme[data-t="light"]           { --bg:#f6f8fa; --bg-3:#eef2f6; --accent:#157f78; }
.theme[data-t="midnight"]        { --bg:#05070d; --bg-3:#111826; --accent:#4c6ef5; }
.theme[data-t="ocean"]           { --bg:#0b1a24; --bg-3:#153040; --accent:#25b7d3; }
.theme[data-t="forest"]          { --bg:#0e1512; --bg-3:#1b2721; --accent:#4caf7d; }
.theme[data-t="nord"]            { --bg:#2e3440; --bg-3:#3b4252; --accent:#88c0d0; }
.theme[data-t="dracula"]         { --bg:#282a36; --bg-3:#383b4d; --accent:#bd93f9; }
.theme[data-t="gruvbox"]         { --bg:#1d2021; --bg-3:#32302f; --accent:#8ec07c; }
.theme[data-t="solarized-dark"]  { --bg:#002b36; --bg-3:#0b4553; --accent:#2aa198; }
.theme[data-t="solarized-light"] { --bg:#fdf6e3; --bg-3:#f2e9d0; --accent:#2aa198; }
.theme[data-t="amber"]           { --bg:#0c0a06; --bg-3:#1e180d; --accent:#ffb020; }
.theme[data-t="mono"]            { --bg:#0b0b0b; --bg-3:#1d1d1d; --accent:#d0d0d0; }
.theme[data-t="paper"]           { --bg:#f4f1ea; --bg-3:#eae5da; --accent:#8a6d3b; }
.side-foot select { max-width: 92px; }

/* A row action has to be findable without being loud: quiet until the row is
   under the cursor, unmistakable when the button itself is. */
tr:hover .btn.ghost {
  background: var(--bg-3); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
tr .btn.ghost:hover {
  background: var(--accent); color: #04211f; font-weight: 600;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
tr .btn.ghost.danger:hover {
  background: var(--err); color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--err) 40%, transparent);
}

/* ------------------------------------------------------- sorting & bulk */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--fg); }
th.sortable.on { color: var(--accent-2); }
th .arrow { margin-left: 5px; font-size: 9px; opacity: .8; }

/* The bulk bar only exists while something is selected, and it says how many
   in a way that survives paging: the count is of ids held, not of rows on
   screen. */
.bulk {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 8px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: slidein .16s ease-out;
}
.bulk b { font-family: var(--mono); font-size: 15px; color: var(--accent-2); }
.bulk .grow { flex: 1; }

table.t td input[type=checkbox], table.t th input[type=checkbox] { margin: 0; vertical-align: middle; }
table.t tbody tr.sel { background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); }

/* --------------------------------------------------------- upload checks */
/* The verdict sits between the file picker and the button, so it is read on the
   way to pressing it rather than after. */
.checks { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.checks .good, .checks .bad { display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.checks .good { color: var(--fg-dim); }
.checks .good::before { content: "✓"; color: var(--ok); font-weight: 700; }
.checks .bad { color: var(--err); }
.checks .bad::before { content: "✕"; font-weight: 700; }
.checks .bad:not(:first-child)::before { content: " "; }

/* ---------------------------------------------------------------- switch */
/* A real checkbox with our paint over it: keyboard, focus and screen readers
   keep working, and what you see is a state rather than a question. */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 22px; border-radius: 11px; flex: 0 0 auto;
  background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2);
  position: relative; transition: background .18s, box-shadow .18s;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--fg-faint);
  transition: transform .18s cubic-bezier(.4,0,.2,1), background .18s;
}
.switch input:checked + .track {
  background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.switch input:checked + .track .knob { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch .swl { font-size: 12px; color: var(--fg-dim); }
.switch.off { opacity: .5; cursor: not-allowed; }
/* While the server is deciding, the switch says so instead of lying about the
   state it will end up in. */
.switch.busy .knob { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.switch.busy { pointer-events: none; }

/* ------------------------------------------------------------- attributes */
/* Written for fifty of them, not five: its own scroll so the panel cannot grow
   past the drawer, a key column that stops widening, and values that wrap. */
dl.kv.attrs { max-height: 320px; overflow: auto; padding-right: 4px; }
dl.kv.attrs dt {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
dl.kv.attrs dd { overflow-wrap: anywhere; }

/* ------------------------------------------------------ confirm dialog */
/* window.confirm draws the browser's own box, with the hostname in it, in the
   operating system's theme. This is the same shape as our modal. */
dialog.ask {
  width: min(430px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: 14px; color: var(--fg); background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.55);
  animation: liftin .18s cubic-bezier(.2,.8,.3,1);
}
dialog.ask::backdrop { background: rgba(0,0,0,.5); }
.ask-head { display: flex; align-items: center; gap: 11px; padding: 17px 20px 0; }
.ask-head h3 { margin: 0; font-size: 15px; }
.ask-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 9px; color: var(--info);
  background: color-mix(in srgb, var(--info) 15%, transparent);
}
.ask-ico.danger { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }
dialog.ask .dc { padding: 11px 20px 4px; color: var(--fg-dim); font-size: 13px; }
dialog.ask .dc p { margin: 0 0 6px; line-height: 1.5; }
dialog.ask .dc p:first-child { color: var(--fg); font-family: var(--mono); font-size: 12.5px;
                               word-break: break-word; }
dialog.ask .da { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px 18px; }

/* ------------------------------------------------------------ fiql editor */
/* A query language typed into a bare box is a guessing game: hawkBit answers
   an invalid field with a 400 and no hint as to which one. This says what it
   thinks of the query while it is being written, and offers what can come
   next. */
.fq { position: relative; display: flex; flex-direction: column; gap: 7px; }
.fq-field {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 11px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .13s, box-shadow .13s;
}
.fq-field .ico { opacity: .4; flex: 0 0 auto; }
.fq-field:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.fq.bad .fq-field { border-color: color-mix(in srgb, var(--err) 65%, transparent); }
.fq.bad .fq-field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 16%, transparent); }
.fq.good .fq-field .ico { opacity: 1; color: var(--ok); }
.fq-in {
  flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: transparent;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg);
}
.fq-in:focus { outline: none; box-shadow: none; }
.fq-status { font-size: 12px; min-height: 16px; }
.fq-ok, .fq-bad { display: inline-flex; align-items: center; gap: 5px; }
.fq-ok { color: var(--ok); }
.fq-bad { color: var(--err); }
.fq-count { font-size: 12px; display: flex; align-items: baseline; gap: 5px; }
.fq-count b { font-size: 15px; font-family: var(--mono); }

/* The completions are anchored to the VIEWPORT, not to the field: inside a
   dialog an absolutely positioned list is laid out in the dialog's scrolling
   box, where it stretches it or gets clipped. Coordinates come from
   place() in fiql.js. */
.fq-list {
  position: fixed; z-index: 200;
  max-height: 260px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  padding: 4px;
}
.fq-item {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px;
}
.fq-item .t { font-family: var(--mono); color: var(--fg); }
.fq-item .hh { flex: 1; color: var(--fg-faint); font-size: 11.5px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-item .k { margin-left: auto; font-size: 10px; letter-spacing: .4px;
              text-transform: uppercase; color: var(--fg-faint); }
.fq-item.on, .fq-item:hover { background: var(--bg-3); }
.fq-item.on .t { color: var(--accent-2); }

.fq-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.fq-legend .chip { font-family: var(--mono); height: 21px; padding: 0 8px; font-size: 11px; }
.fq-warn { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--warn); }
.fq.warn .fq-field { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.fq.warn .fq-field .ico { opacity: 1; color: var(--warn); }

/* ------------------------------------------------------- compatibility bar */
/* Not a toast: a toast goes away, and this is a standing condition. It sits
   above the header so it is the first thing read, and can be put aside for
   the session but returns at the next sign-in. */
.compat {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--warn) 16%, var(--bg));
  color: var(--fg);
}
.compat.bad { background: color-mix(in srgb, var(--err) 17%, var(--bg)); }
.compat-row { display: flex; align-items: center; gap: 11px; padding: 10px 16px; }
.compat .ico { flex: 0 0 auto; color: var(--warn); }
.compat.bad .ico { color: var(--err); }
.compat-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.compat-t b { font-size: 13px; }
.compat-t span { font-size: 12px; color: var(--fg-dim); }
.compat-list {
  margin: 0; padding: 0 16px 12px 46px; font-size: 12px;
  font-family: var(--mono); color: var(--fg-dim);
  max-height: 190px; overflow-y: auto;
}
.compat-list li { margin: 2px 0; }

/* ------------------------------------------------------------ state legend */
/* Five words that are not self-explanatory, explained where they are used
   rather than in a document nobody has open during a rollout. */
/* Unfolds instead of appearing. A grid row track animates from 0fr to 1fr,
   which gives a real height transition without measuring anything; the inner
   element carries all the spacing, so at 0fr it collapses to nothing. */
.legend-wrap {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; margin-top: 0;
  transition: grid-template-rows .24s cubic-bezier(.2,.8,.3,1),
              opacity .18s ease, margin-top .24s cubic-bezier(.2,.8,.3,1);
}
.legend-wrap.open { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.legend-wrap > .legend { overflow: hidden; min-height: 0; }
/* CARDS, NOT ROWS. Laid out as pill + text on one line, the pills are all
   different widths -- "in sync" against "waiting for confirmation" -- so every
   description started at a different place and the left edge was ragged.
   Forcing a common pill width does not help either: the widest one is three
   times the narrowest, so it either clips or pushes all the text far right.
   Each entry is its own small card instead: the pill sits above its sentence,
   widths stop mattering, and the group reads as a grid. */
.legend {
  padding: 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; gap: 8px 12px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.legend-row {
  display: grid; gap: 5px; align-content: start;
  padding: 9px 11px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .12s, background .12s;
}
.legend-row:hover { border-color: var(--line-2); }
.legend-row .pill { justify-self: start; }
.legend-row span { font-size: 12px; line-height: 1.5; color: var(--fg-dim); }

/* Compact form, for a toolbar: the field alone. */
.fq.compact { gap: 0; }
.fq.compact .fq-field { height: var(--ctl); border-radius: var(--r); }
.fq.compact .fq-in { font-size: 12px; }
/* The toolbar search holds the compact editor, which brings its own field. */
.search-fq { padding: 0; border: 0; background: none; gap: 6px; }
.search-fq .fq { flex: 1; min-width: 0; }

/* ------------------------------------------------------------- about page */
/* Reference material in sections rather than one wall of it: the choice of
   section is remembered, so coming back lands where you left. */
.about-tabs { flex-wrap: wrap; }
.about-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.about-p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-dim); max-width: 78ch; }
.about-p code { font-family: var(--mono); font-size: 12px; padding: 1px 5px;
                border-radius: 5px; background: var(--bg-3); color: var(--fg); }
.about-p b { color: var(--fg); }
.link { color: var(--accent-2); cursor: pointer; text-decoration: underline;
        text-underline-offset: 2px; }
pre.cmd {
  margin: 0; padding: 9px 11px; border-radius: 8px; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
}
/* A heading spans the whole grid, so each group starts on its own line. */
.legend-h {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--fg-faint); margin: 8px 0 1px;
}
.legend-h::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.legend-h:first-child { margin-top: 0; }

/* --------------------------------------------------------- waiting for the server */
/* A console full of empty tables looks like a server that lost its data, not
   one that has not answered yet. Cover it until it is back, and take the cover
   away without anyone reloading. */
.gate {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 24px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  animation: gatein .2s ease-out;
}
@keyframes gatein { from { opacity: 0; } }
.gate-glow {
  position: absolute; inset: -25% -10% auto -10%; height: 70vh; pointer-events: none;
  background:
    radial-gradient(44% 58% at 24% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(38% 52% at 80% 10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 72%);
  filter: blur(8px);
}
.gate-card {
  position: relative; width: min(440px, 100%);
  padding: 34px 34px 26px; text-align: center;
  border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.6);
  animation: liftin .28s cubic-bezier(.2,.8,.3,1);
}
/* The logo breathes. It is the one thing on this card that says the console is
   still alive and still asking -- a still logo over a frozen page reads as a
   crash. Deliberately unmissable: the scale carries it, the glow follows. */
.gate-logo {
  width: 64px; height: auto; margin-bottom: 18px;
  animation: breathe 2.6s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 0%, transparent));
}
@keyframes breathe {
  0%, 100% { transform: scale(1);     opacity: .82;
             filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)); }
  50%      { transform: scale(1.14);  opacity: 1;
             filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 65%, transparent)); }
}
.gate-card h2 { margin: 0 0 9px; font-size: 18px; letter-spacing: -.2px; }
.gate-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-dim); }
/* A rough sense of "how far into a normal start", not a promise. */
.gate-track {
  height: 4px; margin: 22px 0 14px; border-radius: 99px; overflow: hidden;
  background: var(--bg-3);
}
.gate-bar {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1s linear;
}
.gate-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--fg-faint);
}
.gate-hint {
  margin-top: 18px !important; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px !important; opacity: .75;
}

/* One switch per kind of notification, with what it covers beside it. */
.notice-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.notice-row > label { flex: 0 0 auto; min-width: 210px; }
.notice-row > .faint { font-size: 12px; }


/* THE SIGN-IN PAGE HAS ONE LOOK OF ITS OWN.
 *
 * It followed the chosen theme, which it could only learn once the script had
 * run: every load drew it in the default theme and then redrew it in the
 * chosen one. It no longer asks. Its palette is set here, on #login itself,
 * so every rule below that reads a variable reads these, whatever theme the
 * console is in. */
#login {
  --bg: #080b12; --bg-2: #0f1420; --bg-3: #171e2e; --line: #252e44;
  --fg: #eef2f8; --fg-dim: #c7cfdc; --fg-faint: #8c97aa;
  --accent: #2fb3a8; --accent-2: #6fdad0; --err: #ff6b6b; --info: #7aa7ff;
  color-scheme: dark;
  color: var(--fg);
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(47, 179, 168, .28), transparent 62%),
    radial-gradient(760px 520px at 108% 112%, rgba(110, 86, 255, .22), transparent 60%),
    radial-gradient(520px 320px at 85% 8%, rgba(122, 167, 255, .10), transparent 70%),
    #080b12;
}
#login .login-glow { opacity: .55; }
#login form {
  background: linear-gradient(180deg, rgba(23, 30, 46, .82), rgba(15, 20, 32, .86));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px);
}
#login h1 { font-size: 23px; font-weight: 650; letter-spacing: -.4px; color: #fff; }
#login .sub { color: var(--fg-faint); letter-spacing: .6px; text-transform: uppercase; font-size: 11px; }
#login input {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); color: var(--fg);
}
#login input::placeholder { color: #5d6778; }
#login input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 179, 168, .22); }
#login .btn.primary.lg {
  background: linear-gradient(135deg, #2fb3a8 0%, #3f8cff 100%); border: 0; color: #fff; font-weight: 650;
  box-shadow: 0 10px 28px rgba(47, 140, 200, .35);
}
#login .btn.primary.lg:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
#login .login-foot { justify-content: center; text-align: center; }
#login .login-foot p { color: #6f7a8d; }

/* Badges with a colour of their own (js/chips.js): a channel in the colour
   it was given, a device type in one worked out from its name. */
.pill.dt { --c: hsl(var(--h, 210) 60% 52%); font-family: var(--mono); }
.pill.fb, .pill.dt {
  font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 78%, var(--fg));
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.pill.fb::before, .pill.dt::before { background: var(--c); }

/* ------------------------------------------------ after Tabler (MIT) ------
 * The console's own elements dressed as Tabler's widgets (tabler.io): its
 * soft badges and status dot, its stat cards, its card with a card-title,
 * its card-table, its datagrid, its empty state. Tabler itself is not loaded:
 * its classes (.btn, .card, .table, .badge) are the console's names too, and
 * would restyle everything at once. */

/* badges: Tabler's "-lt" -- a soft tint, the text in the colour, a hairline */
.pill {
  border-radius: 6px; padding: 3px 8px; gap: 6px; font-weight: 600; letter-spacing: .1px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.pill.ok, .pill.warn, .pill.err, .pill.info, .pill.live, .pill.amber { background: color-mix(in srgb, currentColor 13%, transparent); }
.pill.mute { border-color: var(--line); }
/* at work: Tabler's status-dot-animated, a dot with a ring going out */
.pill.live::before {
  width: 6px; height: 6px; border: 0; border-radius: 50%; background: currentColor;
  animation: status-pulsate 1.5s ease-out infinite;
}
@keyframes status-pulsate {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* stat cards */
.card { border-radius: 8px; padding: 16px 18px; transition: border-color .15s, background .15s; }
.card .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.card .v { font-family: inherit; font-size: 28px; font-weight: 600; line-height: 1.15; margin-top: 8px;
           font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.card .sub { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.cards > div[style*="cursor:pointer"]:hover .card { border-color: var(--line-2); background: var(--bg-3); }

/* card with a card-title */
.panel { border-radius: 8px; }
.panel > h3 {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--fg);
  background: transparent; padding: 13px 16px;
}
.panel .body { padding: 16px; }

/* card-table */
table.t th {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  /* opaque: the header stays on top while the rows scroll under it, and a
     tint over transparent let them show through */
  color: var(--fg-faint); background: color-mix(in srgb, var(--fg) 3%, var(--bg-2));
  padding: 9px 12px;
}
table.t thead th { z-index: 3; }
/* #view scrolls with 16px of padding on top, and a sticky header stops below
   that padding: the rows showed through the gap. The header rises into it;
   the filter row sits under the header (35px tall) */
#view table.t thead tr:first-child th { top: -16px; }
#view table.t thead tr.filters th { top: 19px; }
/* a drawer is 620px: its tables are tighter, and a header may wrap rather
   than push the last column out of sight */
#drawer table.t th, #drawer table.t td { padding: 8px 9px; }
#drawer table.t th { white-space: normal; }
table.t thead tr:last-child th { box-shadow: 0 1px 0 var(--line), 0 6px 12px -10px rgba(0, 0, 0, .5); }
table.t td { padding: 10px 12px; }
table.t tbody tr { transition: background .12s; }
table.t tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
table.t tbody tr.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* datagrid: a title above each value, in as many columns as fit */
dl.datagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 20px; margin: 0; }
dl.datagrid > div { min-width: 0; }
dl.datagrid > div.wide { grid-column: 1 / -1; }
dl.datagrid dt { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                 color: var(--fg-faint); margin-bottom: 4px; }
dl.datagrid dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

/* empty state: an icon in a circle, a title, a line of explanation */
.empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 24px; }
.empty:not(:has(.spin))::before {
  content: ''; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 10px;
  background: color-mix(in srgb, var(--fg) 6%, transparent) center / 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h3l3 3h4l3-3h3M4 13l2-8h12l2 8v6H4z'/%3E%3C/svg%3E");
}
.empty b { color: var(--fg); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
table.t th { white-space: nowrap; }   /* "ASSIGNED / INSTALLED" on one line */

/* stat cards (dashboard), after Tabler's: a tinted icon tile, a hairline of
   the card's tone along its top, a small bar; an active tile breathes */
.card.stat { display: flex; gap: 14px; align-items: flex-start; --tone: var(--fg-faint);
             box-shadow: inset 0 2px 0 color-mix(in srgb, var(--tone) 75%, transparent); }
.card.stat.info { --tone: var(--info); }
.card.stat.ok   { --tone: var(--ok); }
.card.stat.err  { --tone: var(--err); }
.card.stat.warn { --tone: var(--warn); }
.card.stat.err .v { color: var(--err); }
.stat-ico { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
            color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.stat-body { flex: 1; min-width: 0; }
.stat-body .v { margin-top: 4px; }
.stat-bar { height: 4px; border-radius: 99px; margin-top: 10px; overflow: hidden;
            background: color-mix(in srgb, var(--fg) 9%, transparent); }
.stat-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone);
              transition: width .6s cubic-bezier(.4, 0, .2, 1); }
.cards > div[style*="cursor:pointer"] .card { transition: transform .15s, border-color .15s, background .15s; }
.cards > div[style*="cursor:pointer"]:hover .card { transform: translateY(-2px); }
.card.stat.live .stat-ico { animation: tile-breathe 1.8s ease-out infinite; }
.card.stat.live .stat-ico .ico { animation: tile-nudge 1.8s ease-in-out infinite; }
@keyframes tile-breathe {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes tile-nudge { 50% { transform: translateY(-2px); } }

/* dashboard, after Tabler's: the stat cards, then what is moving on the left
   and what needs someone on the right; widgets made of list rows */
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }
.panel > h3.whead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wcount { font-size: 12px; font-weight: 400; }
.panel .body.list { padding: 0; }
.lrow { --tone: var(--fg-faint); display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
        border-bottom: 1px solid var(--line); transition: background .12s; }
.lrow:last-child { border-bottom: 0; }
.lrow.click { cursor: pointer; }
.lrow.click:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.lrow.tone-info { --tone: var(--info); }
.lrow.tone-ok   { --tone: var(--ok); }
.lrow.tone-err  { --tone: var(--err); }
.lrow.tone-warn { --tone: var(--warn); }
.ltile { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
         color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.lmain { flex: 1; min-width: 0; }
.ltitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; min-height: 22px; }
.lmeta { font-size: 12px; color: var(--fg-faint); margin-top: 3px; }
.lright { flex: none; align-self: center; }
.lpct { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lchev { flex: none; align-self: center; color: var(--fg-faint); opacity: .5; transition: opacity .12s, transform .12s; }
.lrow.click:hover .lchev { opacity: 1; transform: translateX(2px); }
.lmore { padding: 10px 16px; font-size: 12px; color: var(--accent); cursor: pointer; border-top: 1px solid var(--line); }
.lmore:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.lsub { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.lsubrow { display: flex; gap: 10px; align-items: baseline; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.lsubrow:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.lmsg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden;
        background: color-mix(in srgb, var(--fg) 9%, transparent); }
.dist i { display: block; min-width: 4px; transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1); }
.dlegend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 14px; }
.ditem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
         background: transparent; color: var(--fg); cursor: pointer; text-align: left; font: inherit; font-size: 12px;
         transition: border-color .12s, background .12s; }
.ditem:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.ddot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dword { flex: 1; min-width: 0; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ditem b { font-variant-numeric: tabular-nums; }
.dphases { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 12px; }

/* the whole-console dashboard: widget headers with an icon and an "open"
   link, a three-column row, the channels as a pipeline, the server's facts */
.dash .cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.dash-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash-3:empty, .dash-grid:empty { display: none; }
@media (max-width: 1250px) { .dash-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .dash-3 { grid-template-columns: 1fr; } }
.wtitle { display: inline-flex; align-items: center; gap: 8px; }
.wtitle .ico { color: var(--fg-faint); }
.wextra { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wlink { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--fg-faint);
         font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.wlink:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pipe { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pstep { --tone: var(--fg-faint); flex: 1 1 0; min-width: 210px; padding: 12px 14px; border-radius: 10px;
         border: 1px solid var(--line); border-top: 3px solid var(--tone); cursor: pointer;
         display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, background .12s, transform .12s; }
.pstep:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); transform: translateY(-1px); }
.pstep.bad { border-color: var(--err); }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.prel { font-size: 13px; }
.ppills { display: flex; gap: 5px; flex-wrap: wrap; min-height: 20px; }
.pbar { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.pbar .bars { flex: 1; }
.ppct { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.parrow { flex: none; align-self: center; color: var(--fg-faint); }
.ptemps { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ptemps > .faint { align-self: center; font-size: 12px; }
.ptemps .pstep { flex: 0 1 260px; }
.skvs { display: grid; gap: 8px; }
.skv { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 13px; }
.sfeat { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 14px; }

/* dashboard, second pass: six cards in a row; two columns that each stack
   on their own, so a short widget never leaves a hole beside a long one;
   denser rows; legends as lists */
.dash .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .dash .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .dash .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash .cards > div { display: flex; }
.dash .cards .card.stat { flex: 1; padding: 14px; }
.dash .cards .card.stat .v { font-size: 24px; }
.dash-main { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-2 > .panel { margin: 0; }
@media (max-width: 1250px) { .dash-main { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .dash-2 { grid-template-columns: 1fr; } }
.dash .panel { margin: 0; }
.dash .panel > h3.whead { padding-block: 11px; }
.dash .lrow { padding: 10px 14px; gap: 11px; }
.dash .ltile { width: 30px; height: 30px; border-radius: 8px; }
.dash .ltile .ico { width: 16px; height: 16px; }
.dash .lpct { font-size: 16px; }
.dash .dlegend { grid-template-columns: 1fr; gap: 0; margin-top: 10px; }
.dash .ditem { border: 0; border-radius: 6px; padding: 6px 4px; }
.dash .ditem .dword { white-space: normal; }
.pipe { align-items: stretch; }
.pstep { padding: 10px 12px; gap: 6px; min-width: 180px; }
.psep { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 4px; margin: 0 4px;
        border-left: 1px dashed var(--line-2); color: var(--fg-faint); font-size: 11px;
        writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .08em; }
.arow { --tone: var(--info); display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px;
        border-bottom: 1px solid var(--line); cursor: pointer; }
.arow:last-child { border-bottom: 0; }
.arow:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.arow.tone-ok { --tone: var(--ok); } .arow.tone-err { --tone: var(--err); } .arow.tone-warn { --tone: var(--warn); }
.adot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tone);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent); }
.atext { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0 5px; flex-wrap: wrap; }
.atime { flex: none; font-size: 12px; }

/* notifications: grouped cards, "+N more", the bell; aside of an open drawer */
.toast-wrap { max-width: min(380px, calc(100vw - 32px)); transition: right .16s ease-out; }
body.drawer-open .toast-wrap { right: calc(min(620px, 92vw) + 16px); }
@media (max-width: 760px) { body.drawer-open .toast-wrap { right: 16px; bottom: auto; top: 16px; } }
.toast .tlines { display: flex; flex-direction: column; gap: 3px; }
.toast .tsub { font-weight: 600; color: var(--fg); }
.toast-n { position: absolute; top: 10px; right: 30px; font-size: 11px; font-weight: 700; color: var(--fg-faint); }
.toast-more { align-self: flex-end; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg-dim);
              border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer;
              box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.toast-more:hover { color: var(--fg); border-color: var(--accent); }
.bell { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 8px;
        border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg-dim); cursor: pointer; }
.bell:hover { color: var(--fg); background: var(--bg-3); }
.bell .bell-n { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
                background: var(--err); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.bellpanel { position: fixed; top: 52px; right: 16px; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 560px);
             display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line-2);
             border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.35); z-index: 60; }
.bp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bp-head b { flex: 1; }
.bp-list { overflow: auto; }
.bp-row { --tone: var(--info); display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
          padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.bp-row:last-child { border-bottom: 0; }
.bp-row.err { --tone: var(--err); } .bp-row.ok { --tone: var(--ok); } .bp-row.warn { --tone: var(--warn); }
.bp-row.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bp-row .m { grid-column: 2 / 4; font-size: 12px; color: var(--fg-dim); white-space: pre-wrap; }
.bp-row .faint { font-size: 11px; }

/* dashboard, third pass: a layout of one's own; what did not add up */
.dash-main .dash-col.left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.dash-col.left > .dw.wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .dash-main .dash-col.left { grid-template-columns: 1fr; } }
.dw { position: relative; min-width: 0; display: flex; flex-direction: column; }
.dw > .panel { flex: 1; }
.dash.editing .dash-col { min-height: 140px; border-radius: 12px; outline: 1px dashed var(--line-2); outline-offset: 6px; }
.dash.editing .dw { cursor: grab; }
.dash.editing .dw > .panel { pointer-events: none; opacity: .92; }
.dash.editing .dw.dragging { opacity: .4; }
.dw.over-before::before, .dw.over-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: var(--accent); border-radius: 3px; z-index: 2; }
.dw.over-before::before { top: -10px; } .dw.over-after::after { bottom: -10px; }
.dw-tools { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; border-radius: 8px;
            background: color-mix(in srgb, var(--accent) 13%, transparent); font-size: 12px; }
.dw-grip { color: var(--accent); cursor: grab; display: inline-flex; }
.dw-name { flex: 1; font-weight: 600; }
.dw-hide { border: 1px solid transparent; background: transparent; color: var(--fg-dim); cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; }
.dw-hide:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); background: color-mix(in srgb, var(--err) 12%, transparent); }
.dtray { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--accent);
         border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.dtray-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
.dtray .grow { flex: 1; }
.dchip { display: inline-flex; align-items: center; gap: 5px; }
.seg { display: inline-flex; gap: 4px; }
#bar-extra { gap: 8px; }
.lpct { text-align: right; }
.lpct small { display: block; font-size: 11px; font-weight: 400; color: var(--fg-faint); }
.lsubrow { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 110px) minmax(0, 1fr) auto; gap: 10px; }
.lsubrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe { overflow: visible; }
.pstep { min-width: 0; }
.ptop { flex-wrap: wrap; }
.cfchip { display: inline-flex; align-items: center; gap: 6px; }
.cfchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cfchip .cfn { font-variant-numeric: tabular-nums; }

/* the pipeline, calmer: a hover is a coloured border, not a lift and a grey
   fill; the lent channels after a plain dashed rule */
.pstep, .pstep:hover { transform: none; background: transparent; }
.pstep { transition: border-color .15s; }
.pstep:hover { border-color: color-mix(in srgb, var(--tone) 60%, var(--line)); border-top-color: var(--tone); }
.psep { flex: none; align-self: stretch; width: 0; padding: 0; margin: 0 6px; border-left: 1px dashed var(--line-2);
        writing-mode: horizontal-tb; transform: none; }

/* dashboard, fifth pass: the widgets on Gridstack -- picked up and carried,
   the landing place drawn, the gaps closed; the gallery; a pipeline that
   wraps instead of spilling */
.dgrid { margin: -8px; min-height: 80px; }
.dgrid > .grid-stack-item > .grid-stack-item-content { overflow: visible; outline: 2px dashed transparent; outline-offset: 3px;
  border-radius: 12px; transition: outline-color .3s; }
.dgrid .dw { display: block; }
.dash.editing .dgrid .grid-stack-item-content { outline-color: color-mix(in srgb, var(--accent) 38%, transparent); }
@keyframes dash-in { from { opacity: 0; transform: translateY(-6px); } }
.dash.editing .dw-tools { animation: dash-in .25s cubic-bezier(.2, .8, .2, 1); }
.dtray-wrap { display: flex; flex-direction: column; gap: 10px; animation: dash-in .3s cubic-bezier(.2, .8, .2, 1); }
.wtray { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 12px 14px; }
.wtray-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wtray-head .grow { flex: 1; }
.wtray-list { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 6px; scroll-snap-type: x proximity; }
.wadd { flex: none; width: 250px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); cursor: grab;
  overflow: hidden; scroll-snap-align: start; user-select: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.wadd:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.wadd:active { cursor: grabbing; }
.wadd-prev { position: relative; height: 150px; overflow: hidden; pointer-events: none; background: var(--bg-2);
  border-bottom: 1px solid var(--line); }
.wadd-prev::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(transparent, var(--bg-2)); }
.wadd-in { width: 500px; transform: scale(.5); transform-origin: 0 0; }
.wadd-in .panel { margin: 0; }
.wadd-none { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--fg-faint); font-size: 12px; }
.wadd-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.wadd-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.wadd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wadd-t b { font-size: 13px; }
.wadd-t span { font-size: 11px; line-height: 1.35; color: var(--fg-faint); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.wadd-plus { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--fg); cursor: pointer; display: grid; place-items: center; }
.wadd-plus:hover { border-color: var(--accent); color: var(--accent); }
body > .wadd.ui-draggable-dragging { z-index: 1000; transform: rotate(1.2deg); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); opacity: .96; }
.dgrid > .grid-stack-item.wadd { width: auto; border: 0; background: transparent; }
.dash.editing .dw-tools { cursor: grab; user-select: none; }
.dash.editing .dw-tools:active { cursor: grabbing; }
.dw-hide svg { pointer-events: none; }
.dw-size { font-size: 11px; color: var(--fg-faint); font-weight: 400; }
.dgrid > .grid-stack-placeholder > .placeholder-content { border: 2px dashed var(--accent); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content { border-radius: 12px; opacity: .97;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5); transform: rotate(.6deg) scale(1.015); }
.dash.editing .dgrid .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content { outline: 2px solid var(--accent); }
.dgrid > .grid-stack-item > .ui-resizable-e, .dgrid > .grid-stack-item > .ui-resizable-w { width: 14px; top: 48px; bottom: 18px; cursor: ew-resize; }
.dgrid > .grid-stack-item > .ui-resizable-e { right: 0; }
.dgrid > .grid-stack-item > .ui-resizable-w { left: 0; }
.dgrid .ui-resizable-e::after, .dgrid .ui-resizable-w::after { content: ''; position: absolute; top: 50%; left: 5px; width: 4px;
  height: 44px; margin-top: -22px; border-radius: 4px; background: var(--accent); opacity: .55; transition: opacity .12s, height .12s, margin .12s; }
.dgrid .ui-resizable-handle:hover::after, .dgrid .ui-resizable-resizing > .ui-resizable-handle::after { opacity: 1; height: 64px; margin-top: -32px; }
.wgal-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wgal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; padding: 12px; border: 1px solid var(--line);
         border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.wcard:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.wcard.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wcard-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
             color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.wcard-body .faint { font-size: 12px; margin-top: 3px; }
.wcard-state { grid-column: 2; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-dim); }
.wcard.on .wcard-state { color: var(--accent); font-weight: 600; }
.pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 28px; }
.pipe .parrow, .pipe .psep { display: none; }
.pstep { position: relative; }
.pstep.chain + .pstep.chain::before { content: '→'; position: absolute; left: -21px; top: 50%; transform: translateY(-50%);
                                      color: var(--fg-faint); font-size: 15px; }
.pstep.temp { border-style: dashed; border-top-style: solid; }
.pbar { min-width: 0; }
.pbar .bars { min-width: 0; }

/* the channels' systems, taken by the release's orchestrator */
.psys { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-dim); }
.psys .ico { color: var(--accent); }

/* an empty count is no badge: [hidden] must win over the badge's own display */
.bell .bell-n[hidden] { display: none; }

/* the orchestrator, drawn (React Flow): the system as it is -- terminals below,
   the 6hd above -- arrows for "first", the order played on the picture */
dialog.flow { width: min(1560px, 96vw); height: min(920px, 94vh); padding: 0; border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--bg-2); color: var(--fg); overflow: hidden; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
dialog.flow[open] { display: flex; flex-direction: column; }
dialog.flow::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(5px); }
.rfx-mount, .rfx-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rfx-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%); }
.rfx-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; }
.rfx-title .ico { color: var(--accent); }
.rfx-legend { font-size: 12px; color: var(--fg-faint); }
.rfx-head .grow, .rfx-yhead .grow { flex: 1; }
.rfx-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 410px; }
.rfx-stage { position: relative; min-width: 0; }
.rfx .react-flow { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--bg)) 0, var(--bg) 60%); }
.rfx-stage.sliding .react-flow__node { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.rfx .react-flow__edge-path { stroke: var(--accent); stroke-width: 2.6; }
.rfx .react-flow__edge.selected .react-flow__edge-path, .rfx .react-flow__edge:hover .react-flow__edge-path { stroke: var(--err); }
.rfx .react-flow__edge.hot .react-flow__edge-path { stroke-width: 3.4; filter: drop-shadow(0 0 6px var(--accent)); }
.rfx .react-flow__handle.rfh { width: 16px; height: 16px; background: var(--accent); border: 3px solid var(--bg-2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rfx .react-flow__handle-bottom.rfh { background: var(--bg-2); border-color: var(--accent); }
.rfx .react-flow__controls { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); border-radius: 10px; overflow: hidden; }
.rfx .react-flow__controls-button { background: var(--bg-2); border-bottom: 1px solid var(--line); fill: var(--fg); width: 30px; height: 30px; }
.rfx .react-flow__controls-button:hover { background: var(--bg-3); }
.rfx .react-flow__minimap { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.rfc { --hue: 170; width: 280px; border-radius: 16px; padding: 12px 14px 14px; color: var(--fg);
  background: linear-gradient(160deg, hsl(var(--hue) 70% 52% / .20), transparent 55%), var(--bg-2);
  border: 1px solid hsl(var(--hue) 55% 55% / .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transition: box-shadow .25s, border-color .25s, transform .25s; }
.rfc.sel { border-color: hsl(var(--hue) 70% 60%); box-shadow: 0 0 0 3px hsl(var(--hue) 70% 55% / .35), 0 18px 40px rgba(0, 0, 0, .45); }
.rfc.lit { transform: scale(1.04); border-color: hsl(var(--hue) 75% 62%); animation: rfc-pulse 1.1s ease-in-out infinite; }
.rfc.done { border-color: color-mix(in srgb, var(--ok) 70%, transparent); }
@keyframes rfc-pulse { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--hue) 75% 60% / .55), 0 18px 40px rgba(0, 0, 0, .45); }
  50% { box-shadow: 0 0 0 14px hsl(var(--hue) 75% 60% / 0), 0 18px 40px rgba(0, 0, 0, .45); } }
.rfc-top { display: flex; align-items: center; gap: 11px; }
.rfc-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: hsl(var(--hue) 80% 68%); background: hsl(var(--hue) 70% 52% / .20); }
.rfc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rfc-t b { font-size: 17px; letter-spacing: .01em; }
.rfc-t span { font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.rfc-step { flex: none; min-width: 38px; height: 26px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: hsl(var(--hue) 80% 70%); background: hsl(var(--hue) 70% 52% / .18); }
.rfc.done .rfc-step { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.rfc-match { font: 11px/1.4 var(--mono); color: var(--fg-faint); margin: 10px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfc-ds { width: 100%; }
.rfc-bar { height: 4px; border-radius: 99px; margin-top: 12px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.rfc-bar i { display: block; height: 100%; width: 0; background: hsl(var(--hue) 75% 58%); }
.rfc.lit .rfc-bar i { animation: rfc-fill 1.6s ease-out forwards; }
.rfc.done .rfc-bar i { width: 100%; background: var(--ok); }
@keyframes rfc-fill { to { width: 100%; } }
.rfx-tools { display: flex; gap: 8px; }
.rfx-play { border: 0; border-radius: 11px; padding: 10px 16px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  color: var(--bg); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #7c5cff));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent); }
.rfx-play:disabled { opacity: .7; cursor: default; }
.rfx-tool { border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--bg-2); color: var(--fg); cursor: pointer; }
.rfx-tool:hover { border-color: var(--accent); }
.rfx-pal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.rfx-pal > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.rfx-chip { --hue: 170; border: 1px solid hsl(var(--hue) 60% 55% / .6); background: hsl(var(--hue) 70% 52% / .14);
  color: hsl(var(--hue) 80% 72%); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 700; cursor: grab; }
.rfx-chip:hover { background: hsl(var(--hue) 70% 52% / .26); }
.rfx-tool.ico { padding: 8px 10px; display: inline-grid; place-items: center; }
.rfx-tool:disabled { opacity: .4; cursor: default; border-color: var(--line-2); }
.rfe-x { position: absolute; pointer-events: all; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--fg-dim); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.rfe-x.on, .rfe-x:hover { opacity: 1; }
.rfe-x:hover { color: var(--err); border-color: var(--err); }
.rfc.need .rfc-ds { border-color: color-mix(in srgb, var(--warn) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.rfc-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-faint);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.rfc:hover .rfc-x, .rfc.sel .rfc-x { opacity: 1; }
.rfc-x:hover { background: color-mix(in srgb, var(--err) 20%, transparent); color: var(--err); }
.rfx-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; pointer-events: none; z-index: 5; }
.rfx-empty > b { font-size: 22px; }
.rfx-empty > span { max-width: 520px; color: var(--fg-faint); font-size: 13.5px; line-height: 1.5; }
.rfx-offer { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; pointer-events: auto; }
.rfx-pick { --hue: 170; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 12px 14px;
  border-radius: 16px; border: 1.5px dashed hsl(var(--hue) 55% 55% / .55); color: var(--fg); font: inherit; cursor: grab;
  background: linear-gradient(160deg, hsl(var(--hue) 70% 52% / .16), transparent 60%), var(--bg-2);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.rfx-pick:hover { transform: translateY(-3px); border-style: solid; border-color: hsl(var(--hue) 70% 60%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.rfx-pick b { font-size: 16px; }
.rfx-pick > span:last-child { font-size: 11px; color: var(--fg-faint); }
.rfx-side { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.rfx-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rfx-sum > div { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 9px 6px; text-align: center; }
.rfx-sum b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.rfx-sum span { font-size: 11px; color: var(--fg-faint); }
.rfx-seq { list-style: none; margin: 0; padding: 0; }
.rfx-seq li { position: relative; display: flex; gap: 11px; padding: 0 0 15px; font-size: 13px; transition: opacity .3s; }
.rfx-seq li:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--accent) 40%, transparent); }
.rfx-seq .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); transition: background .3s, color .3s, box-shadow .3s; }
.rfx-seq li.lit .n { background: var(--accent); color: var(--bg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
.rfx-seq li.done .n { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.rfx-seq li.fail .n { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.rfx-seq .faint { font-size: 12px; }
.rfx-yhead { display: flex; align-items: center; gap: 8px; }
.rfx-yaml, .rfx-yin { margin: 0; min-height: 170px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; color: var(--fg-dim); }
.rfx-yin { width: 100%; resize: vertical; color: var(--fg); }
.rfx-yaml .yk { color: var(--accent); } .rfx-yaml .ys { color: var(--ok); } .rfx-yaml .yn { color: var(--warn); }
.rfx-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; }
.wtray.lit { animation: wtray-lit 1.4s ease-out; }
@keyframes wtray-lit { 0%, 30% { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); } }