/* Ekalix - control room.
 *
 * One mechanism drives every coloured thing on this page. A `.t-<severity>` class sets
 * three variables - --tone, --tone-bg, --tone-bd - and pills, chips, cards, meters,
 * dots, table rows and banners all read those. Adding a severity means adding one
 * block here, not editing fifteen rules.
 *
 * Colour is never the only signal. Anything that carries a tone also carries a glyph
 * and a word, because this gets read at 3am on a projector by someone who may not see
 * red and green as different things at all.
 */

:root {
  color-scheme: dark;

  --bg:          #06090d;
  --bg-2:        #080c12;
  --surface-1:   #0d131b;
  --surface-2:   #121a24;
  --surface-3:   #18222e;
  --raised:      #1c2836;

  --text:        #e9eff6;
  --text-2:      #a6b6c6;
  --text-3:      #7e8fa1;

  --hairline:    #18222d;
  --border:      rgba(155, 185, 215, 0.14);
  --border-2:    rgba(155, 185, 215, 0.22);
  --grid:        rgba(120, 165, 210, 0.030);

  --accent:      #38bdf8;
  --accent-2:    #7c7cff;
  --accent-bg:   rgba(56, 189, 248, 0.12);
  --accent-bd:   rgba(56, 189, 248, 0.42);

  /* the severity vocabulary - identical names in PowerShell, JSON and here */
  --critical:    #ff6b61;
  --critical-bg: rgba(255, 107, 97, 0.13);
  --critical-bd: rgba(255, 107, 97, 0.40);
  --serious:     #ff9f45;
  --serious-bg:  rgba(255, 159, 69, 0.13);
  --serious-bd:  rgba(255, 159, 69, 0.38);
  --warning:     #f5c542;
  --warning-bg:  rgba(245, 197, 66, 0.13);
  --warning-bd:  rgba(245, 197, 66, 0.36);
  --info:        #56a8ff;
  --info-bg:     rgba(86, 168, 255, 0.13);
  --info-bd:     rgba(86, 168, 255, 0.36);
  --ok:          #3ddc84;
  --ok-bg:       rgba(61, 220, 132, 0.12);
  --ok-bd:       rgba(61, 220, 132, 0.34);
  --muted:       #7e8fa1;
  --muted-bg:    rgba(126, 143, 161, 0.13);
  --muted-bd:    rgba(126, 143, 161, 0.30);

  --r:    10px;
  --r-s:  7px;
  --r-xs: 5px;

  /* One family everywhere: IBM Plex Sans for words, IBM Plex Mono (its twin) for numbers, names
     and code. Both are bundled in web\fonts (fonts.css), so every machine shows the same type
     without the internet; the system faces after them only cover a missing file. */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --t: 150ms cubic-bezier(.2, .7, .3, 1);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 28px rgba(0,0,0,.42);

  /* Named so a theme can move them. These were literals scattered through the file, which
     meant a new theme could change every colour except the ones on the primary button and
     behind the page. */
  --on-accent:   #04131c;                       /* text on a filled accent surface */
  --accent-fill-1: #2fb6f2;                     /* the primary button gradient */
  --accent-fill-2: #1f9ad6;
  --accent-edge:   #58c8fb;
  --glow-1:      rgba(56, 189, 248, .10);       /* the two washes behind the page */
  --glow-2:      rgba(124, 124, 255, .085);
  --scrim:       rgba(6, 9, 13, .86);           /* behind a modal */
  --select-bg:   rgba(56, 189, 248, .28);
  --sheen:       rgba(255,255,255,.022);        /* the faint lift on a panel header */
  --hover-tint:  rgba(255,255,255,.022);        /* a table row under the cursor */
  --code-bg:     #05080c;
  --code-fg:     #cfe3f5;

  /* Every theme sets these. Clarity raises them; the others leave them alone. Applied only
     to the genuinely small text, so the layout does not move. */
  --fs-micro: 10px;    /* uppercase labels on tiles and cards */
  --fs-small: 11px;    /* secondary lines */
  --fs-body:  11.5px;  /* table cells, list items */
}

/* ========================================================================
   themes

   Six, and they are not six colour schemes. The default is the control room
   look. Clarity exists because the default was reported as hard to read at small
   sizes, and it raises contrast and the smallest type together rather than only
   repainting. Daylight exists because for some readers no dark theme is the
   answer, whatever its contrast. Maroon and Aurora exist for comfort over a long
   shift - warm wine and gold, or a low-glare night sky - with their brand colours
   chosen from hues no severity uses. Galaxy is ekalix.com itself: the website's deep
   space, its cyan and indigo, and its starfield moving behind the page.

   The severity vocabulary is the part that matters most and the part most often
   got wrong. Red and green next to each other is the single worst pairing for the
   most common colour vision deficiencies, which is why this product already pairs
   every tone with a glyph and a word. Clarity goes further and separates the
   severities by lightness as well as hue, so they stay distinguishable in
   greyscale - if a theme only works in colour it does not work.
   ======================================================================== */

/* ---- Clarity: high contrast, larger small text --------------------------- */
:root[data-theme="clarity"] {
  color-scheme: dark;

  --bg:          #000306;
  --bg-2:        #04070b;
  --surface-1:   #0a1017;
  --surface-2:   #141e29;
  --surface-3:   #1f2c3b;
  --raised:      #263646;

  /* Pure white body text, and the two greys lifted well clear of the background.
     The old --text-3 was the dimmest colour in the file at the smallest size in
     the file, which is exactly the combination that was reported as unreadable. */
  --text:        #ffffff;
  --text-2:      #dbe7f2;
  --text-3:      #b3c4d4;

  --hairline:    #24323f;
  --border:      rgba(190, 215, 240, 0.34);
  --border-2:    rgba(190, 215, 240, 0.54);
  --grid:        rgba(150, 195, 235, 0.06);

  --accent:      #7dd3fc;
  --accent-2:    #a5a5ff;
  --accent-bg:   rgba(125, 211, 252, 0.20);
  --accent-bd:   rgba(125, 211, 252, 0.66);
  --on-accent:   #00121c;
  --accent-fill-1: #7dd3fc;
  --accent-fill-2: #38bdf8;
  --accent-edge:   #bae6fd;

  /* Ordered by lightness as well as hue, so the four read as four even without
     colour: critical is the lightest and warmest, ok the coolest. */
  --critical:    #ff9a8f;
  --critical-bg: rgba(255, 154, 143, 0.22);
  --critical-bd: rgba(255, 154, 143, 0.62);
  --serious:     #ffb95e;
  --serious-bg:  rgba(255, 185, 94, 0.20);
  --serious-bd:  rgba(255, 185, 94, 0.58);
  --warning:     #ffe066;
  --warning-bg:  rgba(255, 224, 102, 0.18);
  --warning-bd:  rgba(255, 224, 102, 0.54);
  --info:        #8fc4ff;
  --info-bg:     rgba(143, 196, 255, 0.20);
  --info-bd:     rgba(143, 196, 255, 0.56);
  --ok:          #6ee7a8;
  --ok-bg:       rgba(110, 231, 168, 0.18);
  --ok-bd:       rgba(110, 231, 168, 0.54);
  --muted:       #b3c4d4;
  --muted-bg:    rgba(179, 196, 212, 0.18);
  --muted-bd:    rgba(179, 196, 212, 0.46);

  --glow-1:      rgba(125, 211, 252, .07);
  --glow-2:      rgba(165, 165, 255, .06);
  --scrim:       rgba(0, 3, 6, .92);
  --select-bg:   rgba(125, 211, 252, .38);
  --sheen:       rgba(255,255,255,.05);
  /* A hover a low-vision reader can actually see. The default is 2 per cent white, which
     is invisible to most people and was never going to be enough here. */
  --hover-tint:  rgba(255,255,255,.08);
  --code-bg:     #000306;
  --code-fg:     #e8f3ff;
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 28px rgba(0,0,0,.6);

  --fs-micro: 11.5px;
  --fs-small: 12.5px;
  --fs-body:  13px;
}

/* ---- Daylight: for readers no dark theme suits --------------------------- */
:root[data-theme="daylight"] {
  color-scheme: light;

  --bg:          #eef2f7;
  --bg-2:        #e7edf4;
  --surface-1:   #f7f9fc;
  --surface-2:   #ffffff;
  --surface-3:   #eef3f9;
  --raised:      #ffffff;

  --text:        #0d1620;
  --text-2:      #2c3d4f;
  /* The dimmest grey is the one that decides whether a theme is readable, because it is
     what the smallest labels use. At #566b81 it measured 5.5:1, which passes AA and fails
     AAA; this clears 7:1 against white and still reads as secondary. */
  --text-3:      #45596e;

  --hairline:    #dbe3ec;
  --border:      rgba(20, 50, 85, 0.20);
  --border-2:    rgba(20, 50, 85, 0.34);
  --grid:        rgba(20, 60, 100, 0.05);

  --accent:      #0069a8;
  --accent-2:    #4a4ad6;
  --accent-bg:   rgba(0, 105, 168, 0.11);
  --accent-bd:   rgba(0, 105, 168, 0.46);
  --on-accent:   #ffffff;
  --accent-fill-1: #0b82c8;
  --accent-fill-2: #0069a8;
  --accent-edge:   #0b82c8;

  /* Darkened, because the dark theme's colours are chosen to glow on black and on
     white they are illegible pastels. */
  --critical:    #b3261e;
  --critical-bg: rgba(179, 38, 30, 0.10);
  --critical-bd: rgba(179, 38, 30, 0.42);
  --serious:     #a75300;
  --serious-bg:  rgba(167, 83, 0, 0.10);
  --serious-bd:  rgba(167, 83, 0, 0.40);
  --warning:     #8a6100;
  --warning-bg:  rgba(138, 97, 0, 0.11);
  --warning-bd:  rgba(138, 97, 0, 0.38);
  --info:        #0b5fa8;
  --info-bg:     rgba(11, 95, 168, 0.10);
  --info-bd:     rgba(11, 95, 168, 0.38);
  --ok:          #0a7a43;
  --ok-bg:       rgba(10, 122, 67, 0.10);
  --ok-bd:       rgba(10, 122, 67, 0.36);
  --muted:       #45596e;
  --muted-bg:    rgba(69, 89, 110, 0.10);
  --muted-bd:    rgba(69, 89, 110, 0.34);

  --glow-1:      rgba(0, 105, 168, .06);
  --glow-2:      rgba(74, 74, 214, .05);
  --scrim:       rgba(13, 22, 32, .42);
  --select-bg:   rgba(0, 105, 168, .22);
  /* A dark lift, not a white one. Every sheen and hover in this file assumes a dark
     background; unchanged they are invisible on a light page. */
  --sheen:       rgba(20,50,85,.035);
  --hover-tint:  rgba(0,105,168,.08);
  /* The code block stays dark on purpose. Monospaced output is easier to read light on
     dark even for readers who want the rest of the page light. */
  --code-bg:     #0d1620;
  --code-fg:     #e8f0f8;
  --shadow: 0 1px 2px rgba(20,50,85,.08), 0 8px 24px rgba(20,50,85,.10);

  --fs-micro: 10.5px;
  --fs-small: 11.5px;
  --fs-body:  12px;
}

/* ---- Maroon: deep wine and champagne gold ---------------------------------------------------
   Warm and calm for a long shift. The accent is champagne gold - the classic partner of maroon,
   and at this lightness not a colour any severity uses. The severities are brighter and cooler
   than the page, so red stays an alarm on a red-toned background. */
:root[data-theme="maroon"] {
  color-scheme: dark;

  --bg:          #11070a;
  --bg-2:        #150a0d;
  --surface-1:   #1c0c11;
  --surface-2:   #251017;
  --surface-3:   #30151e;
  --raised:      #3a1a25;

  --text:        #f8ece9;
  --text-2:      #dcc0bb;
  --text-3:      #b8999a;

  --hairline:    #2d141b;
  --border:      rgba(245, 200, 195, 0.14);
  --border-2:    rgba(245, 200, 195, 0.24);
  --grid:        rgba(245, 180, 180, 0.028);

  --accent:      #e9c27f;
  --accent-2:    #f2a0b6;
  --accent-bg:   rgba(233, 194, 127, 0.13);
  --accent-bd:   rgba(233, 194, 127, 0.45);
  --on-accent:   #2a1406;
  --accent-fill-1: #f0cd90;
  --accent-fill-2: #d8a95d;
  --accent-edge:   #f6ddb0;

  --critical:    #ff5f78;
  --critical-bg: rgba(255, 95, 120, 0.15);
  --critical-bd: rgba(255, 95, 120, 0.46);
  --serious:     #ff9a52;
  --serious-bg:  rgba(255, 154, 82, 0.14);
  --serious-bd:  rgba(255, 154, 82, 0.42);
  --warning:     #ffdd55;
  --warning-bg:  rgba(255, 221, 85, 0.13);
  --warning-bd:  rgba(255, 221, 85, 0.40);
  --info:        #86bdff;
  --info-bg:     rgba(134, 189, 255, 0.14);
  --info-bd:     rgba(134, 189, 255, 0.40);
  --ok:          #62e0a2;
  --ok-bg:       rgba(98, 224, 162, 0.13);
  --ok-bd:       rgba(98, 224, 162, 0.38);
  --muted:       #b8999a;
  --muted-bg:    rgba(184, 153, 154, 0.14);
  --muted-bd:    rgba(184, 153, 154, 0.32);

  --glow-1:      rgba(233, 194, 127, .08);
  --glow-2:      rgba(242, 160, 182, .08);
  --scrim:       rgba(17, 7, 10, .88);
  --select-bg:   rgba(233, 194, 127, .28);
  --sheen:       rgba(255, 236, 230, .025);
  --hover-tint:  rgba(255, 222, 215, .035);
  --code-bg:     #0c0406;
  --code-fg:     #f6e4df;
  --shadow: 0 1px 0 rgba(255,240,235,.03) inset, 0 8px 28px rgba(0,0,0,.5);
}

/* ---- Aurora: the night sky, soft violet over teal ----------------------------------------
   Gentle on the eyes: off-white text with a cool tint rather than pure white, low-glare
   surfaces, and a teal and violet glow behind the page. Violet marks everything you can click
   and teal is the second colour - neither is a severity, so no brand colour reads as an alarm. */
:root[data-theme="aurora"] {
  color-scheme: dark;

  --bg:          #050a12;
  --bg-2:        #070e18;
  --surface-1:   #0b1521;
  --surface-2:   #101c2b;
  --surface-3:   #162537;
  --raised:      #1c2e43;

  --text:        #e6eff5;
  --text-2:      #aec1d0;
  --text-3:      #8ba1b4;

  --hairline:    #142131;
  --border:      rgba(170, 200, 240, 0.14);
  --border-2:    rgba(170, 200, 240, 0.24);
  --grid:        rgba(140, 200, 240, 0.028);

  --accent:      #b39dff;
  --accent-2:    #5eead4;
  --accent-bg:   rgba(179, 157, 255, 0.14);
  --accent-bd:   rgba(179, 157, 255, 0.46);
  --on-accent:   #150a33;
  --accent-fill-1: #bca8ff;
  --accent-fill-2: #8f72f7;
  --accent-edge:   #d6cbff;

  --critical:    #ff7382;
  --critical-bg: rgba(255, 115, 130, 0.14);
  --critical-bd: rgba(255, 115, 130, 0.42);
  --serious:     #ffa35e;
  --serious-bg:  rgba(255, 163, 94, 0.13);
  --serious-bd:  rgba(255, 163, 94, 0.40);
  --warning:     #f7d55c;
  --warning-bg:  rgba(247, 213, 92, 0.12);
  --warning-bd:  rgba(247, 213, 92, 0.38);
  --info:        #6fb5ff;
  --info-bg:     rgba(111, 181, 255, 0.13);
  --info-bd:     rgba(111, 181, 255, 0.38);
  --ok:          #6fe58e;
  --ok-bg:       rgba(111, 229, 142, 0.12);
  --ok-bd:       rgba(111, 229, 142, 0.36);
  --muted:       #8ba1b4;
  --muted-bg:    rgba(139, 161, 180, 0.13);
  --muted-bd:    rgba(139, 161, 180, 0.30);

  --glow-1:      rgba(94, 234, 212, .085);
  --glow-2:      rgba(179, 157, 255, .10);
  --scrim:       rgba(5, 10, 18, .88);
  --select-bg:   rgba(179, 157, 255, .30);
  --sheen:       rgba(230, 240, 255, .025);
  --hover-tint:  rgba(200, 220, 255, .035);
  --code-bg:     #03070d;
  --code-fg:     #dfeaf4;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 28px rgba(0,0,0,.5);
}

/* ---- Galaxy: the website's deep space, cyan into indigo and violet ------------------------
   ekalix.com inside the product: near-black space, the brand's cyan with indigo as the second
   colour, the cyan-to-violet gradient on the logo and the primary button, and a starfield behind
   the page (galaxy.js, and the end of this file) that drifts and links into constellations.
   Cyan and indigo are the website's own colours and neither is a severity; the severities keep
   the default palette, so an alarm looks the same here as in the control room. --gx-* are the
   three star colours galaxy.js reads. */
:root[data-theme="galaxy"] {
  color-scheme: dark;

  --bg:          #03050a;
  --bg-2:        #060a13;
  --surface-1:   #0a1020;
  --surface-2:   #0e1629;
  --surface-3:   #141e35;
  --raised:      #1a2642;

  --text:        #eef3ff;
  --text-2:      #a9b6cc;
  --text-3:      #8390a8;

  --hairline:    #121a2e;
  --border:      rgba(129, 140, 248, 0.16);
  --border-2:    rgba(129, 140, 248, 0.28);
  --grid:        rgba(129, 140, 248, 0.022);

  --accent:      #38bdf8;
  --accent-2:    #818cf8;
  --accent-bg:   rgba(56, 189, 248, 0.12);
  --accent-bd:   rgba(56, 189, 248, 0.44);
  --on-accent:   #02101a;
  --accent-fill-1: #38bdf8;
  --accent-fill-2: #818cf8;
  --accent-edge:   #7dd3fc;

  --glow-1:      rgba(56, 189, 248, .11);
  --glow-2:      rgba(129, 140, 248, .11);
  --scrim:       rgba(3, 5, 10, .84);
  --select-bg:   rgba(56, 189, 248, .30);
  --sheen:       rgba(200, 215, 255, .025);
  --hover-tint:  rgba(129, 140, 248, .05);
  --code-bg:     #02040a;
  --code-fg:     #d6e6ff;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.55);

  --gx-1: 56, 189, 248;
  --gx-2: 129, 140, 248;
  --gx-3: 192, 132, 252;
}

/* The small type, in one place, so a theme raises it by changing three variables
   rather than by overriding forty rules. Only the text that was reported as too
   small to read; headline numbers are already large in every theme. */
.tile .l, .hmk, .dktype, .dkrole, .dkadv, .clvt, .sprofh .k,
.sproft th, .dkcols .k, .sprofst { font-size: var(--fs-micro); }
.dkl, .cllegend, .cllegend-note, .dknote, .hmnote, .sprofp,
.clst, .cllab, .dkdl dt, .dkdl dd { font-size: var(--fs-small); }
.dkfree, .hms, .sprofg dt, .sprofg dd, .sproft td, .sproff li,
.dkadvice li, .dkok, .subtab { font-size: var(--fs-body); }

/* default tone, so a component with no .t-* class still renders */
:root, .t-info    { --tone: var(--info);     --tone-bg: var(--info-bg);     --tone-bd: var(--info-bd); }
.t-ok             { --tone: var(--ok);       --tone-bg: var(--ok-bg);       --tone-bd: var(--ok-bd); }
.t-warning        { --tone: var(--warning);  --tone-bg: var(--warning-bg);  --tone-bd: var(--warning-bd); }
.t-serious        { --tone: var(--serious);  --tone-bg: var(--serious-bg);  --tone-bd: var(--serious-bd); }
.t-critical       { --tone: var(--critical); --tone-bg: var(--critical-bg); --tone-bd: var(--critical-bd); }
.t-muted          { --tone: var(--muted);    --tone-bg: var(--muted-bg);    --tone-bd: var(--muted-bd); }
.t-accent         { --tone: var(--accent);   --tone-bg: var(--accent-bg);   --tone-bd: var(--accent-bd); }

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Form controls do not take the page's type on their own - the browser gives them its UI face -
   so a row's › toggle came out in Arial beside Plex. Family only; each control keeps its size. */
button, input, select, textarea { font-family: inherit; }
/* And code the browser would set in its own monospace: ours instead. */
code, kbd, samp, pre { font-family: var(--mono); }
body.modal-open { overflow: hidden; }

/* The room: two cold spotlights over a faint engineering grid. Fixed and
   pointer-events:none so it never intercepts a click or scrolls out of view. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 440px at 14% -10%, var(--glow-1), transparent 68%),
    radial-gradient(760px 400px at 88% -14%, var(--glow-2), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 100% 54px, 54px 100%;
}
/* Maroon adds a warm glow rising from below; Aurora an aurora band across the top and a violet
   haze underneath. Everything else about the background is the same in every theme. */
:root[data-theme="maroon"] body::before {
  background:
    radial-gradient(1000px 440px at 14% -10%, var(--glow-1), transparent 68%),
    radial-gradient(760px 400px at 88% -14%, var(--glow-2), transparent 70%),
    radial-gradient(1400px 620px at 50% 118%, rgba(150, 30, 55, .22), transparent 72%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, auto, 100% 54px, 54px 100%;
}
:root[data-theme="aurora"] body::before {
  background:
    radial-gradient(1000px 440px at 14% -10%, var(--glow-1), transparent 68%),
    radial-gradient(760px 400px at 88% -14%, var(--glow-2), transparent 70%),
    radial-gradient(1600px 300px at 55% -6%, rgba(94, 234, 212, .065), transparent 70%),
    radial-gradient(900px 500px at 50% 115%, rgba(120, 90, 220, .09), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 100% 54px, 54px 100%;
}
/* Galaxy swaps the engineering grid for the website's dot field, fading out from the top right as
   it does there; the light itself comes from the drifting glows in .gx-sky (end of this file). */
:root[data-theme="galaxy"] body::before {
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(1400px 1100px at 70% 0%, #000, transparent 72%);
  mask-image: radial-gradient(1400px 1100px at 70% 0%, #000, transparent 72%);
}

/* CONTRACT-V11: every estate has a colour of its own - its menu header, icon tile, the line down
   its servers and its rail icon - from hues no severity uses, chosen per theme so the three never
   meet: the theme's accent, its second accent, and a third that neither is. */
:root { --plat-sqlserver: var(--accent); --plat-windows: var(--accent-2); --plat-application: #f472b6; }
:root[data-theme="clarity"]  { --plat-application: #f9a8d4; }
:root[data-theme="daylight"] { --plat-application: #be185d; }
:root[data-theme="maroon"]   { --plat-application: #7dd3c8; }
:root[data-theme="aurora"]   { --plat-application: #f9a8d4; }
.plat-sqlserver   { --plat: var(--plat-sqlserver); }
.plat-windows     { --plat: var(--plat-windows); }
.plat-application { --plat: var(--plat-application); }
.plat-mysql { --plat: var(--text-3); }   /* MongoDB has its own colour since CONTRACT-V13 (end of this file) */

::selection { background: var(--select-bg); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--raised); }

:focus { outline: none; }
:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }

.grow { flex: 1 1 auto; min-width: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim  { color: var(--text-3); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- boot / fatal ------------------------------------------------ */

.boot {
  position: relative; z-index: 1;
  max-width: 440px;
  margin: 18vh auto 0;
  padding: 26px 28px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-1);
}
.boot-mark {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: 9px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-bg);
}
.boot-t { font-size: 16px; font-weight: 650; }
.boot-s { margin-top: 5px; color: var(--text-2); font-size: 13px; }

/* ---------- shell ------------------------------------------------------- */

.app { position: relative; z-index: 1; }

.stick {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--scrim);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 9px;
  max-width: 1720px;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-bg);
  color: var(--accent);
  line-height: 0;
  flex: 0 0 auto;
}
.sparkle { color: var(--accent); font-size: 11px; }
.brand .bt {
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brand .bs {
  font-size: 10.5px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: -2px;
}

.llmchip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font: inherit; font-size: 12px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}
.llmchip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.llmchip .k {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.llmchip b { color: var(--text); font-weight: 650; }
.llmchip .m { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.llmchip .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tone, var(--muted));
  box-shadow: 0 0 0 3px var(--tone-bg, transparent);
  flex: 0 0 auto;
}

/* Contract 1a: the header states the Windows identity every SQL connection is actually
   made under. Shaped like .llmchip so the two read as one row, but it is a label and
   not a control - there is nothing to click. */
.whoami {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.whoami .k {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.whoami b { color: var(--text); font-weight: 650; font-family: var(--mono); font-size: 11.5px; }
.whoami.mism { border-color: var(--warning-bd); color: var(--warning); background: var(--warning-bg); }
.whoami.mism b { color: var(--warning); }

.iconbtn {
  appearance: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  border-radius: var(--r-s);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.iconbtn:active { transform: translateY(1px); }

/* ---------- server tabs ------------------------------------------------- */

.tabstrip {
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 0 22px;
  max-width: 1720px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabstrip::-webkit-scrollbar { display: none; }
.tabstrip > .tabs { display: flex; align-items: stretch; gap: 5px; }

.tab {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: transparent;
  transition: background var(--t), border-color var(--t);
  position: relative;
  top: 1px;
}
.tab:hover { background: var(--surface-1); }
.tab.on {
  background: var(--surface-1);
  border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--tone, var(--accent));
}
.tab.off .tname { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.tabbtn {
  appearance: none;
  border: none; background: none;
  color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 4px 9px 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: color var(--t);
}
.tab.on .tabbtn { color: var(--text); }
.tabbtn:hover { color: var(--text); }
.tabbtn .dot {
  width: 15px; height: 15px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-size: 9.5px; font-weight: 800; line-height: 1;
}
.tabbtn .tinst {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text-3); font-weight: 500;
}

.tabx {
  appearance: none;
  border: none; background: none;
  color: var(--text-3);
  font-size: 11px; line-height: 1;
  padding: 6px 9px 6px 5px;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: color var(--t), background var(--t);
}
.tabx:hover { color: var(--critical); background: var(--critical-bg); }

.tabadd {
  appearance: none;
  border: 1px dashed var(--border-2);
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-s) var(--r-s) 0 0;
  border-bottom: none;
  padding: 8px 13px;
  margin-left: 3px;
  font: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer;
  align-self: stretch;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.tabadd:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }

/* ---------- page body --------------------------------------------------- */

.page {
  max-width: 1720px;
  margin: 0 auto;
  padding: 18px 22px 60px;
}

/* ---------- buttons ----------------------------------------------------- */

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--r-s);
  padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.ghost { background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn.primary {
  background: linear-gradient(180deg, var(--accent-fill-1), var(--accent-fill-2));
  border-color: var(--accent-edge);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px rgba(31,154,214,.25);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--accent-edge), var(--accent-fill-1)); color: var(--on-accent); }

.btn.danger { color: var(--critical); border-color: var(--critical-bd); background: transparent; }
.btn.danger:hover:not(:disabled) { background: var(--critical-bg); color: var(--critical); }

.btn.lg { padding: 10px 20px; font-size: 13.5px; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
.btn .kbd {
  font-family: var(--mono); font-size: 10px;
  opacity: .7; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 3px; line-height: 1.35;
}

/* ---------- pills, chips, dots ------------------------------------------ */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 3px;
  border-radius: 999px;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  color: var(--text);
  font-size: 11.5px; font-weight: 650;
  white-space: nowrap;
  line-height: 1.6;
}
.pill .ic {
  width: 16px; height: 16px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tone);
  color: var(--on-accent);
  font-size: 10px; font-weight: 800; line-height: 1;
}
.pill.lg { font-size: 13px; padding: 4px 13px 4px 4px; }
.pill.lg .ic { width: 20px; height: 20px; font-size: 12px; }
.pill.bare { border-color: transparent; background: transparent; padding-left: 0; }

.chip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip .ic { color: var(--tone); font-size: 10.5px; font-weight: 800; }
.chip b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.chip:hover:not(:disabled) { border-color: var(--tone-bd); color: var(--text); }
.chip.on { background: var(--tone-bg); border-color: var(--tone-bd); color: var(--text); }
.chip.zero { opacity: .5; }
.chip:disabled { cursor: default; }
.chip.static { cursor: default; }

.tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface-2);
}
button.tag { appearance: none; font-family: inherit; cursor: pointer; transition: color var(--t), border-color var(--t); }
button.tag:hover { color: var(--accent); border-color: var(--accent-bd); }

/* ---------- command bar ------------------------------------------------- */

.cmdbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0 15px;
}
.cmdbar h1 { font-size: 21px; font-weight: 650; }
.cmdbar .meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-2);
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  align-items: center;
}
.cmdbar .meta .sep { color: var(--text-3); }
.cmdbar .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* indeterminate collection strip - the user must never wonder if it hung */
.running {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-bg);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  position: relative;
}
.running .txt { flex: 1 1 auto; }
.running .el { font-family: var(--mono); font-weight: 700; color: var(--accent); }
.running .track {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-bg);
  overflow: hidden;
}
.running .track span {
  position: absolute; top: 0; bottom: 0; width: 32%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1.15s linear infinite;
}
@keyframes sweep { from { left: -34%; } to { left: 102%; } }

.spinner {
  width: 13px; height: 13px; flex: 0 0 auto;
  display: inline-block;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 1.4s linear infinite; }

/* Every selector here is scoped so the reader's explicit "animate" override lifts it.
   Unscoped, the `*` rule below is the single most destructive line in the file on this
   estate: Windows reports prefers-reduced-motion: reduce inside a Remote Desktop session,
   every operator arrives over RDP, and `transition: none !important` then freezes the whole
   product - not just the flow diagrams but every hover, every panel, every fade. It looked
   like a dead page and it was really an accessibility default firing on a bandwidth setting.
   See the data-motion block at the end of this file. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .spinner,
  :root:not([data-motion="on"]) .spin { animation: none; }
  :root:not([data-motion="on"]) .running .track span { animation: none; left: 0; width: 100%; opacity: .5; }
  :root:not([data-motion="on"]) * { transition: none !important; }
}
/* "off" is the reader asking for stillness outright, so it does what the media query used
   to do unconditionally, on any machine. */
:root[data-motion="off"] .spinner,
:root[data-motion="off"] .spin { animation: none; }
:root[data-motion="off"] .running .track span { animation: none; left: 0; width: 100%; opacity: .5; }
:root[data-motion="off"] * { transition: none !important; }

/* ---------- health strip ------------------------------------------------ */

.health {
  border: 1px solid var(--tone-bd);
  border-left: 3px solid var(--tone);
  background:
    linear-gradient(90deg, var(--tone-bg), transparent 46%),
    var(--surface-1);
  border-radius: var(--r);
  padding: 15px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.health .hmain { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hstate { display: flex; align-items: center; gap: 13px; min-width: 0; }
.hstate .hicon {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--tone);
  color: var(--on-accent);
  font-size: 20px; font-weight: 800;
}
.hword { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hline { color: var(--text-2); font-size: 13px; margin-top: 2px; }

/* The score bar that used to live here is a SQLMonCharts.gauge() now - see .hgauge and
   .htrend in the v2 block at the bottom of this file. */

.hchips {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
}

/* ---------- section nav ------------------------------------------------- */

.subnav {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin: 2px 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.snav {
  appearance: none;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font: inherit; font-size: 12.5px; font-weight: 650;
  padding: 8px 12px 9px;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t), border-color var(--t), background var(--t);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.snav:hover { color: var(--text); background: var(--surface-1); }
.snav.on { color: var(--text); border-bottom-color: var(--accent); }
.snav .n {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
}
.snav.on .n { color: var(--text-2); }
.snav .n.bad { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }

/* ---------- panels ------------------------------------------------------ */

.panel {
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.panel > .ph {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--sheen), transparent);
}
.panel > .ph h2 {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2);
}
.panel > .ph .sub { font-size: 12px; color: var(--text-3); }
.panel > .pb { padding: 14px 15px; }
.panel > .pb.flush { padding: 0; }

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr);
  gap: 14px;
  align-items: start;
}

.inline-err {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 15px;
  background: var(--critical-bg);
  border-bottom: 1px solid var(--critical-bd);
  font-size: 12.5px;
  color: var(--text);
}
.inline-err .ic {
  width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--critical); color: var(--on-accent); font-size: 10px; font-weight: 800;
}

.banner {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  border-radius: var(--r);
  padding: 11px 15px;
  margin-bottom: 14px;
  font-size: 13px;
}
.banner b { font-weight: 650; }
/* The collector writes an advice line for an unreachable server - the order to check
   things in. It is the most useful sentence on that screen, so it gets its own line
   rather than being lost in the run-on error text. */
.banner .more { display: block; margin-top: 5px; color: var(--text-2); }
.banner .more::before { content: "What to check: "; color: var(--text-3); font-weight: 650; }

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

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 10px;
}
.tile {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: 11px 13px 12px;
  min-width: 0;
  transition: border-color var(--t), background var(--t);
}
.tile.attn { border-color: var(--tone-bd); background: linear-gradient(180deg, var(--tone-bg), transparent), var(--surface-2); }
.tile .l {
  font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .v {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 24px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 3px;
}
.tile .v .u { font-size: 12px; color: var(--text-3); font-weight: 600; }
.tile.attn .v { color: var(--tone); }
.tile .f { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }

/* ---------- key / value list -------------------------------------------- */

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; }
.kv > div {
  padding: 9px 13px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.kv .k {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.kv .v { font-size: 12.5px; color: var(--text); word-break: break-word; }
.kv .v.m { font-family: var(--mono); font-size: 11.5px; }

.facts { display: flex; flex-direction: column; }
.facts .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.facts .row:last-child { border-bottom: none; }
.facts .k { color: var(--text-3); white-space: nowrap; }
.facts .v { color: var(--text); text-align: right; font-family: var(--mono); font-size: 12px; word-break: break-word; }

/* ---------- alert cards ------------------------------------------------- */

.sevgroup { margin-bottom: 16px; }
.sevgroup > h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}
.sevgroup > h3::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline); }

.alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }

.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--tone);
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: 12px 14px 13px;
  transition: border-color var(--t), transform var(--t);
}
.alert:hover { border-color: var(--tone-bd); border-left-color: var(--tone); }
.alert > header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.alert h4 { font-size: 14px; font-weight: 650; flex: 1 1 200px; }
.alert .detail { color: var(--text-2); font-size: 12.5px; margin: 0 0 9px; }
.alert .vt {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.alert .vt > span {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 3px 8px;
  background: var(--surface-1);
  font-size: 11.5px;
}
.alert .vt .k { color: var(--text-3); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.alert .vt .v { font-family: var(--mono); color: var(--text); }
.alert .vt .v.now { color: var(--tone); font-weight: 700; }
.alert .advice {
  display: flex; gap: 8px;
  font-size: 12.5px; color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  margin: 0;
}
.alert .advice .lbl {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}

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

/* position: relative makes the scroll box the reference for the absolutely positioned bits in
   its rows (the .sr labels, pills). Without it they are laid out against the page, escape the
   clipping, and a long table stretched the page into thousands of pixels of empty scroll. */
.tablewrap { overflow: auto; max-height: 66vh; position: relative; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  padding: 9px 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
th.num, td.num { text-align: right; }
tbody td {
  padding: 7px 13px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--text-2);
}
tbody tr:last-child > td { border-bottom: none; }
tbody tr:hover > td { background: var(--hover-tint); }
td.num, td.m { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.nm { color: var(--text); font-weight: 600; }
td.nowrap, th.nowrap { white-space: nowrap; }
td.bad { color: var(--critical); font-weight: 650; }
td.warn { color: var(--warning); font-weight: 650; }

th.sortable { padding: 0; }
th.sortable.on { color: var(--text); }
.th-btn {
  appearance: none;
  border: none; background: none;
  color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit;
  padding: 9px 13px;
  width: 100%;
  text-align: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t);
}
th.num .th-btn { text-align: right; }
.th-btn:hover { color: var(--text); }
th .ar { font-size: 8px; margin-left: 4px; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 13px;
  border-bottom: 1px solid var(--hairline);
}
.search {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-s);
  padding: 6px 11px;
  font: inherit; font-size: 12.5px;
  min-width: 210px;
  transition: border-color var(--t), background var(--t);
}
.search::placeholder { color: var(--text-3); }
.search:hover { border-color: var(--border-2); }
.count { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; }

/* expandable rows - the toggle itself; datatable.js styles the row around it */
.rowtoggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  font-size: 11px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--t), color var(--t), border-color var(--t);
}
.rowtoggle:hover { color: var(--accent); border-color: var(--accent-bd); }
.rowtoggle.open { transform: rotate(90deg); color: var(--accent); border-color: var(--accent-bd); }

tr.detail > td {
  padding: 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.jdetail { padding: 14px 15px 16px; display: grid; gap: 12px; }
.jdetail .sect > h5 {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px;
}
.jdetail .msgbox {
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  border-radius: var(--r-xs);
  padding: 9px 11px;
  font-size: 12.5px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

pre.code {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--code-bg);
  color: var(--code-fg);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre;
  tab-size: 4;
}
.codewrap { position: relative; }
.codewrap .copy { position: absolute; top: 6px; right: 6px; opacity: .75; }
.codewrap:hover .copy, .codewrap .copy:focus-visible { opacity: 1; }

/* ---------- waits ------------------------------------------------------- */

/* The hand-rolled .meter bar and the disk cards that used it are gone: disk usage and
   log-used percentage are drawn by SQLMonCharts.bar() inside the tables now, so there is
   one bar in the product instead of two that had to be kept looking alike. */

.waits { display: flex; flex-direction: column; gap: 9px; }
.wait { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto; gap: 11px; align-items: center; }
.wait .wn { font-family: var(--mono); font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait .wv { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }

/* The error log's own row layout went the same way as the disk cards: it is a DataTable
   now, so it gets the search box, the severity chips, CSV and print for free. Its one
   remaining rule, .logtx, is in the v2 block at the bottom. */

/* ---------- explain / LLM panel ----------------------------------------- */

.explain {
  border: 1px solid var(--accent-bd);
  background: linear-gradient(180deg, rgba(56,189,248,.07), transparent 60%), var(--surface-1);
  border-radius: var(--r-s);
  padding: 12px 14px 13px;
  margin-top: 11px;
}
.explain > header {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.explain > header .who {
  color: var(--text-3); letter-spacing: .04em; text-transform: none;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
}
.explain .body { font-size: 13px; color: var(--text); line-height: 1.62; }
.explain .body h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin: 13px 0 4px;
}
.explain .body h4:first-child { margin-top: 0; }
.explain .body p { margin: 0 0 9px; }
.explain .body p:last-child { margin-bottom: 0; }
.explain .body ul { margin: 0 0 9px; padding-left: 18px; }
.explain .body li { margin-bottom: 3px; }
.explain .body b { color: var(--text); font-weight: 700; }
.explain .body code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-3); border-radius: 3px; padding: 1px 4px;
}
.explain .body pre.code { margin: 0 0 9px; }
.explain .waiting { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 12.5px; }
.explain .warn {
  margin-top: 9px; font-size: 11.5px; color: var(--warning);
  display: flex; gap: 7px; align-items: flex-start;
}

/* ---------- empty states ------------------------------------------------ */

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-3);
}
.empty .et { font-size: 15px; font-weight: 600; color: var(--text-2); }
.empty .eh { font-size: 13px; margin-top: 5px; max-width: 520px; margin-left: auto; margin-right: auto; }
.empty .ea { margin-top: 16px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.hero {
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-top: 8px;
}

/* ---------- dialogs: wizard + settings ---------------------------------- */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex;
  animation: fade var(--t) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.scrim.center { align-items: flex-start; justify-content: center; padding: 7vh 20px 20px; overflow-y: auto; }
.scrim.right { justify-content: flex-end; }

.modal {
  width: 100%; max-width: 560px;
  border: 1px solid var(--border-2);
  background: var(--surface-1);
  border-radius: var(--r);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  animation: rise 180ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal.lg { max-width: 900px; }

/* ---- one moment, investigated: open alerts + recorded metrics either side of it ---- */
.alertlist { display: flex; flex-direction: column; gap: 6px; }
.arow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border); }
.momgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.momcell { padding: 8px 10px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.momhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 12px; }
.momname { color: var(--text-2); font-weight: 600; }
/* Recorded metrics' own heading, plus its column-count toggle. Scoped to this one h5
   rather than the element in general, which every other .sect header still relies on. */
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.drawer {
  width: 100%; max-width: 480px;
  height: 100%;
  border-left: 1px solid var(--border-2);
  background: var(--surface-1);
  box-shadow: -24px 0 70px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  animation: slide 180ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes slide { from { transform: translateX(26px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer .dbody { overflow-y: auto; padding: 16px 18px 22px; flex: 1 1 auto; }

.dhead {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.dhead h2 { font-size: 15px; font-weight: 650; }
.dhead .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dfoot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.modal .mbody { padding: 16px 18px 6px; }

/* ---------- forms ------------------------------------------------------- */

.field { margin-bottom: 13px; }
.field > .lab {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.field .hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-s);
  padding: 8px 11px;
  font: inherit; font-size: 13px;
  transition: border-color var(--t), background var(--t);
}
.field input.m { font-family: var(--mono); font-size: 12.5px; }
.field input::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover { border-color: var(--border-2); }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field.two > div { min-width: 0; }

.radios { display: flex; flex-direction: column; gap: 7px; }
.radio {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.radio:hover { border-color: var(--border-2); }
.radio.on { border-color: var(--accent-bd); background: linear-gradient(180deg, var(--accent-bg), transparent), var(--surface-2); }
.radio input { margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.radio .rt { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radio .rn { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.inlinemsg {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--tone-bd);
  background: var(--tone-bg);
  border-radius: var(--r-s);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 13px;
}
.inlinemsg .ic {
  width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tone); color: var(--on-accent); font-size: 10px; font-weight: 800;
}
.inlinemsg .m { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); display: block; margin-top: 3px; }

/* ---------- toasts ------------------------------------------------------ */

.toasts {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 80;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 420px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--tone-bd);
  border-left: 3px solid var(--tone);
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: 11px 12px;
  font-size: 12.5px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: rise 180ms cubic-bezier(.2,.7,.3,1) both;
}
.toast .ic {
  width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tone); color: var(--on-accent); font-size: 10px; font-weight: 800;
}
.toast .tx { flex: 1 1 auto; word-break: break-word; }
.toast .x {
  appearance: none; border: none; background: none;
  color: var(--text-3); cursor: pointer; font-size: 12px;
  padding: 0 2px; line-height: 1.2;
}
.toast .x:hover { color: var(--text); }

/* ---------- footer ------------------------------------------------------ */

.foot {
  display: flex; flex-wrap: wrap; gap: 5px 20px;
  margin-top: 22px; padding-top: 13px;
  border-top: 1px solid var(--hairline);
  font-size: 11px; color: var(--text-3);
}

/* ---------- narrow ------------------------------------------------------ */

@media (max-width: 1400px) {
  .cols { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); }
}
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  /* The donut and its legend stack rather than squeeze: a wait type is a 28-character
     mono string and there is no narrow version of it. */
  .waitpanel { gap: 12px; }
}
@media (max-width: 760px) {
  .topbar, .tabstrip, .page { padding-left: 13px; padding-right: 13px; }
  .htrend { min-width: 168px; }
  .field.two { grid-template-columns: 1fr; }
  .toasts { left: 13px; right: 13px; max-width: none; }
}

/* ---------- v2: ag diagram ---------------------------------------------- */
/* Everything in this section is drawn by web\agview.js and scoped to .agv. Colour comes
   from the same mechanism as the rest of the page: the diagram puts .t-<severity> on a
   link or a node and the SVG strokes read var(--tone), so the picture can never disagree
   with the pill sitting next to it.
   The flow animation is deliberately hard to leave running. It exists only inside
   prefers-reduced-motion: no-preference, and only under .is-animating, which agview.js
   removes on visibilitychange - a dashboard left open overnight must not animate to an
   empty room. */

.agv { display: flex; flex-direction: column; gap: 11px; }

.agv-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.agv-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.agv-sub { font-size: 11.5px; color: var(--text-3); }
.agv-grow { flex: 1 1 auto; }
.agv-snaptag { font-size: 11px; color: var(--text-3); }
.agv-livetag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ok);
  border: 1px solid var(--ok-bd); background: var(--ok-bg);
  border-radius: 999px; padding: 2px 9px;
}
.agv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 220, 132, .16);
}

.agv-stage {
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  background:
    radial-gradient(760px 300px at 18% 0%, rgba(56, 189, 248, .055), transparent 70%),
    var(--surface-1);
  padding: 6px 4px;
  /* below ~620px the labels start colliding, so the stage scrolls sideways instead of
     squashing the diagram into something nobody can read */
  overflow-x: auto;
}
/* The drawing never grows past its own size (agview.js sets max-width to the viewBox width), so
   its labels are the page's sizes; on a wide stage it sits in the middle. */
.agv-svg { display: block; width: 100%; height: auto; max-height: 560px; min-width: 620px; margin: 0 auto; }

/* links */
.agv-link-base { fill: none; stroke: var(--tone); opacity: .26; stroke-linecap: round; }
.agv-flow { fill: none; stroke: var(--tone); opacity: .92; stroke-linecap: round; stroke-dasharray: 8 16; }
.agv-arrow { fill: var(--tone); opacity: .85; }
.agv-link.is-seeding .agv-link-base { stroke-dasharray: 11 9; opacity: .42; }
.agv-link.is-seeding .agv-flow { stroke-dasharray: 4 8; }
.agv-link.is-broken .agv-link-base { stroke-dasharray: 3 7; opacity: .50; }
.agv-link.is-broken .agv-flow { stroke-dasharray: 2 6; opacity: .40; }
.agv-link.is-broken .agv-arrow { opacity: .40; }

/* Both dash periods - 24 and 12 - divide the 24-unit offset, so either pattern loops
   without a visible jump at the wrap. */
@keyframes sqlmon-ag-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes sqlmon-ag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: no-preference) {
  /* Longhands only. An `animation:` shorthand here would reset animation-duration to 0s,
     and the duration is the whole point - agview.js sets it inline from sendRateMBs. */
  .agv-svg.is-animating .agv-flow.is-moving {
    animation-name: sqlmon-ag-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .agv-livetag .agv-dot { animation: sqlmon-ag-pulse 2s ease-in-out infinite; }
}

/* link labels: a stroke of the stage colour painted behind the glyphs, so a label that
   lands on a curve is still readable */
.agv-lab {
  fill: var(--text-2);
  font-family: var(--font); font-size: 10.5px;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3.5px; stroke-linejoin: round;
}
.agv-lab.b { fill: var(--text); font-size: 11px; font-weight: 650; }
.agv-lab.tone { fill: var(--tone); }

/* nodes */
.agv-node .agv-box {
  fill: var(--surface-2); stroke: var(--tone-bd); stroke-width: 1.4;
  transition: fill var(--t), stroke var(--t);
}
.agv-node.k-pri .agv-box { fill: var(--surface-3); }
.agv-node .agv-edge { fill: var(--tone); opacity: .9; }
.agv-node.is-click { cursor: pointer; }
.agv-node.is-click:hover .agv-box { fill: var(--surface-3); stroke: var(--tone); }
.agv-node.is-sel .agv-box { stroke: var(--accent); stroke-width: 2; }
.agv-node:focus { outline: none; }
.agv-node:focus-visible .agv-box { stroke: var(--accent); stroke-width: 2; }
.agv-node.is-off .agv-box { fill: var(--surface-1); stroke-dasharray: 5 4; }
.agv-node-nm { fill: var(--text); font-family: var(--font); font-size: 13px; font-weight: 650; }
.agv-node-sub { fill: var(--text-3); font-family: var(--font); font-size: 10.5px; }
.agv-node-st { fill: var(--tone); font-family: var(--font); font-size: 11px; font-weight: 600; }

/* listener */
.agv-lis-wire { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .45; }
.agv-lis-box { fill: var(--surface-2); stroke: var(--accent-bd); stroke-width: 1.2; }
.agv-lis-nm { fill: var(--accent); font-family: var(--font); font-size: 11.5px; font-weight: 600; }
.agv-lis-sub { fill: var(--text-3); font-family: var(--font); font-size: 10px; }

/* legend, captions, table */
.agv-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 15px;
  font-size: 11px; color: var(--text-3); padding: 0 2px;
}
.agv-legend > span { display: inline-flex; align-items: center; }
.agv-legend .sw {
  display: inline-block; width: 18px; height: 0;
  border-top: 3px solid var(--tone); border-radius: 2px; margin-right: 6px;
}
.agv-legend-note { opacity: .85; }
.agv-note {
  font-size: 11.5px; color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline); border-left: 3px solid var(--info);
  border-radius: var(--r-xs);
  padding: 8px 11px;
}
.agv-note b { color: var(--text); }
.agv-blank {
  padding: 26px 14px; text-align: center;
  font-size: 12.5px; color: var(--text-3);
  border: 1px dashed var(--border); border-radius: var(--r-s);
}
/* the diagram's own tables are short and already inside a panel, so they do not get the
   66vh inner scroll that the big tables need */
.agv-table { max-height: none; border: 1px solid var(--hairline); border-radius: var(--r-s); }
.agv-small { font-size: 10.5px; }
.agv-state { color: var(--tone); font-weight: 650; }
.agv-tag-pri { color: var(--accent); }
.agv-tag-live { margin-left: 6px; color: var(--ok); }

/* ========================================================================
   v2: charts and data table (screen)
   CONTRACT-V2 3.2 and 3.3. Appended - nothing above this line is touched.

   Everything new is prefixed .dt- or .sqlc- so it cannot collide with a rule
   above or with anything another agent appends below.
   ======================================================================== */

/* charts.js returns an <svg> string; it usually sits beside a number, so it
   lines up on the text baseline unless it is asked to be a block. */
.sqlc { display: inline-block; vertical-align: middle; }
.sqlc-block { display: block; }

.dt { display: block; }
.dt-bar { row-gap: 7px; }

/* Compact by default: the whole point of v2 is to see where the problem is
   without scrolling for it. */
.dt-table.dt-dense thead th { padding: 7px 11px; }
.dt-table.dt-dense thead th.sortable { padding: 0; }
.dt-table.dt-dense thead th.sortable .th-btn { padding: 7px 11px; }
.dt-table.dt-dense tbody td { padding: 5px 11px; vertical-align: middle; }
.dt-table td.dt-mid, .dt-table th.dt-mid { text-align: center; }
.dt-table th.dt-x, .dt-table td.dt-x { width: 28px; padding-right: 0; }

/* A cell with its own severity takes the tone; the row keeps the neutral
   background so one bad number does not wash the whole line. */
.dt-table td.dt-sev { color: var(--tone); font-weight: 650; }

tr.dt-row.clickable { cursor: pointer; }
/* The rail is drawn for warning and worse only. A green rail on every healthy
   row is decoration, and decoration is what hides the red one. */
tr.dt-row.dt-flag > td:first-child { box-shadow: inset 3px 0 0 var(--tone); }
tr.dt-row.open > td { background: rgba(56, 189, 248, .05); }
tr.dt-row.open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

tr.dt-detail > td { padding: 0; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.dt-detailbox { padding: 12px 15px 14px; }
.dt-detailbox.flush { padding: 0; }
.dt-nodetail { padding: 12px 15px; font-size: 12px; color: var(--text-3); }
/* renderLimit: the rows not drawn yet, and the way to draw them. */
.dt-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px dashed var(--border-2); font-size: 12px; color: var(--text-3); }
.dt-more > span { margin-right: auto; }

/* column menu -------------------------------------------------------------
   Fixed, not absolute: .panel is overflow:hidden and would slice the menu off
   at the bottom edge of a short table. The position is measured from the
   button when the menu opens, and the menu closes on scroll rather than
   trying to follow it. */
.dt-menu-wrap { position: relative; display: inline-flex; }
.dt-menu-wrap .btn.on { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.dt-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--text-3); margin-left: 2px;
}
.dt-menu {
  position: fixed; z-index: 55;
  min-width: 194px; max-width: 280px; max-height: 60vh; overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-s);
  background: var(--raised);
  box-shadow: var(--shadow);
}
.dt-menu-h {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 7px 6px;
}
.dt-menu-i {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px;
  border-radius: var(--r-xs);
  font-size: 12px; color: var(--text-2);
  cursor: pointer;
}
.dt-menu-i:hover { background: var(--surface-3); color: var(--text); }
.dt-menu-i input { accent-color: var(--accent); cursor: pointer; }
.dt-menu-i.dim { cursor: default; }
.dt-menu-i.dim:hover { background: none; color: var(--text-3); }
.dt-menu-f {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 5px; padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

/* Print-only header: invisible on screen, essential on paper. */
.dt-printhead { display: none; }

/* ========================================================================
   v2: print
   Export PDF is the browser's own print-to-PDF. datatable.js puts
   .dt-printing on <body> and .dt-print-target on the one table being
   exported, then calls window.print() and takes both off again.

   The whole page is hidden with visibility rather than display, so the
   ancestors of the table keep their boxes and the table does not reflow into
   a different shape on the way to the printer.
   ======================================================================== */

@media print {
  @page { size: landscape; margin: 11mm 9mm; }

  body.dt-printing { background: #fff; }
  /* the two spotlights and the engineering grid: ruinous on paper */
  body.dt-printing::before { display: none !important; }
  body.dt-printing .stick { position: static !important; }

  body.dt-printing * { visibility: hidden !important; }
  body.dt-printing .dt-print-target,
  body.dt-printing .dt-print-target * { visibility: visible !important; }

  body.dt-printing .dt-print-target {
    position: absolute !important;
    left: 0; top: 0; width: 100%;
    margin: 0; padding: 0;
    /* One block re-tunes every token for paper, and pills, meters, severity
       cells and the SVG charts all follow, because every one of them paints
       with these variables and nothing else. */
    --text: #000; --text-2: #1c1c1c; --text-3: #4a4a4a;
    --bg: #fff; --bg-2: #fff;
    --surface-1: #fff; --surface-2: #fff; --surface-3: #fff; --raised: #fff;
    --hairline: #c7c7c7; --border: #9a9a9a; --border-2: #7d7d7d;
    --critical: #a11208; --serious: #8a4b00; --warning: #6f5300;
    --info: #123e86; --ok: #06622f; --muted: #555; --accent: #123e86;
    --critical-bg: #fdeceb; --serious-bg: #fdf1e6; --warning-bg: #fbf5e0;
    --info-bg: #eaf0fb; --ok-bg: #e7f5ec; --muted-bg: #f1f1f1; --accent-bg: #eaf0fb;
    --critical-bd: #a11208; --serious-bd: #8a4b00; --warning-bd: #6f5300;
    --info-bd: #123e86; --ok-bd: #06622f; --muted-bd: #8a8a8a; --accent-bd: #123e86;
    --shadow: none;
    color: #000;
    /* without this the browser drops every tint, and a severity column prints
       as a column of identical grey words */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* controls are not print furniture */
  body.dt-printing .dt-print-target .dt-bar,
  body.dt-printing .dt-print-target .dt-menu,
  body.dt-printing .dt-print-target .rowtoggle,
  body.dt-printing .dt-print-target .dt-x,
  body.dt-printing .dt-noprint { display: none !important; }

  body.dt-printing .dt-print-target .dt-printhead {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px 14px;
    align-items: baseline;
    padding: 0 0 7px;
    margin-bottom: 7px;
    border-bottom: 1.5px solid #000;
    font-size: 10pt;
    color: #000;
  }
  body.dt-printing .dt-print-target .dt-printhead b { font-size: 12pt; font-weight: 700; }
  body.dt-printing .dt-print-target .dt-printhead span { font-size: 8.5pt; color: #3a3a3a; }

  /* the scroller has to let go, or only the first screenful reaches the page */
  body.dt-printing .dt-print-target .dt-scroll,
  body.dt-printing .dt-print-target .tablewrap {
    max-height: none !important;
    overflow: visible !important;
  }

  body.dt-printing .dt-print-target table { width: 100%; font-size: 8.5pt; }
  /* display:table-header-group is what repeats the column headings on page two */
  body.dt-printing .dt-print-target thead { display: table-header-group; }
  body.dt-printing .dt-print-target thead th {
    position: static !important;
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 4px 6px !important;
    font-size: 7.5pt;
  }
  body.dt-printing .dt-print-target tbody td {
    padding: 3px 6px !important;
    border-bottom: 1px solid #d0d0d0 !important;
    color: #111;
  }
  body.dt-printing .dt-print-target tbody tr,
  body.dt-printing .dt-print-target tr.dt-detail {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.dt-printing .dt-print-target tbody tr:hover > td { background: none !important; }
  body.dt-printing .dt-print-target tr.dt-row.open > td { background: none !important; }
  body.dt-printing .dt-print-target tr.dt-detail > td { background: #f6f6f6 !important; }
  body.dt-printing .dt-print-target .pill { border-color: #666; }
  body.dt-printing .dt-print-target .pill .ic { color: #fff; }
  body.dt-printing .dt-print-target .empty { color: #000; }
}

/* ========================================================================
   v2: integration
   Everything app.js needed once charts.js, datatable.js and agview.js were
   wired in: collapsible panels, the compact default, the Live toggle, the
   estate tab, and the few places a chart now sits beside a number.

   Nothing here redefines a colour. Every rule paints with the tokens at the
   top of this file, so the print block at the bottom re-tunes these for
   paper exactly as it does everything else.
   ======================================================================== */

/* ---------- small shared utilities -------------------------------------- */

.sm { font-size: 11px; line-height: 1.35; }
.ch { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; }
.ch-bar, .ch-spark, .ch-strip { max-width: 100%; }
/* Unlike the other chart kinds, these two are meant to fill whatever column width the
   Timeline's chart-count toggle gives them, not sit at a fixed pixel size. */
.ch-tseries, .ch-ribbon { display: block; width: 100%; line-height: 0; }
.ch-tseries svg, .ch-ribbon svg { display: block; width: 100%; height: auto; }

/* A tag can now carry a tone, so "disabled" reads amber without a second class. */
.tag.t-ok       { color: var(--ok);       border-color: var(--ok-bd); }
.tag.t-warning  { color: var(--warning);  border-color: var(--warning-bd); }
.tag.t-serious  { color: var(--serious);  border-color: var(--serious-bd); }
.tag.t-critical { color: var(--critical); border-color: var(--critical-bd); }

/* ---------- collapsible panels  (CONTRACT-V2 3.1) ----------------------- */

/* The whole title block is the hit target, not just the chevron: a 16px glyph is a
   cruel thing to ask someone to hit twenty times while they work down a page. */
.panel > .ph .pcol {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-width: 0;
  margin: -4px -6px; padding: 4px 6px;
  border: 0; border-radius: var(--r-xs);
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: background var(--t);
}
.panel > .ph .pcol:hover { background: rgba(255,255,255,.035); }
.panel > .ph .pcol:hover h2 { color: var(--text); }
.pchev {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; flex: 0 0 auto;
  font-size: 13px; line-height: 1; font-weight: 700;
  color: var(--text-3);
  transition: transform var(--t), color var(--t);
}
.pchev.open { transform: rotate(90deg); color: var(--accent); }
/* Collapsed, the header IS the panel - the border below it would draw a line under
   nothing. */
.panel.shut > .ph { border-bottom-color: transparent; }
.panel.shut { margin-bottom: 9px; }

/* Header-right furniture: the counts that let a collapsed panel still say what is
   inside it, which is the only thing that makes collapsing safe. */
.phints { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- compact density, on by default ------------------------------ */

.app.compact .panel { margin-bottom: 10px; }
.app.compact .panel > .ph { padding: 7px 12px; }
.app.compact .panel > .pb { padding: 10px 12px; }
.app.compact .panel > .pb.flush { padding: 0; }
.app.compact .tiles { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
.app.compact .tile { padding: 8px 10px 9px; }
.app.compact .tile .v { font-size: 20px; }
.app.compact .health { padding: 12px 14px; margin-bottom: 12px; }
.app.compact .health .hmain { gap: 18px; }
.app.compact .hchips { margin-top: 10px; padding-top: 10px; }
.app.compact .subnav { margin-bottom: 12px; }
.app.compact .cmdbar { padding-bottom: 8px; }
.app.compact .alerts { gap: 8px; }
.app.compact .alert { padding: 10px 12px; }
.app.compact .toolbar { padding: 7px 10px; }
.app.compact .jdetail { padding: 10px 12px 12px; gap: 9px; }

/* ---------- header: the Live checkbox, its interval, the density switch ---

   Live polling is per server tab and starts off, every time the page loads. That
   decision is only credible if the control looks like something a person threw,
   so this is a real <input type="checkbox"> inside a <label>: keyboard, screen
   reader and checked semantics come from the browser and the CSS only dresses it.
   Shaped as the same 30px pill as .denstog so the header still reads as one row.
   -------------------------------------------------------------------------- */

.livechk, .denstog {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit; font-size: 11.5px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.livechk { user-select: none; }
.livechk:hover, .denstog:hover { border-color: var(--border-2); color: var(--text); }
.livechk .k, .denstog {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
/* The value reads "off", "stopped", "paused" or a clock. A floor under its width
   keeps the pill - and everything right of it in the header - from twitching every
   time the word changes. */
.livechk b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 650;
  color: var(--text-3); font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.livechk.on {
  border-color: var(--ok-bd); background: var(--ok-bg); color: var(--text);
}
.livechk.on b { color: var(--ok); }
.livechk.failed { border-color: var(--warning-bd); background: var(--warning-bg); }
.livechk.failed b { color: var(--warning); }
/* Off on the estate tab, where "live" has no single server to mean. .dis is the
   class form for callers that would rather not rely on :has(). */
.livechk.dis, .livechk:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.livechk.dis:hover, .livechk:has(input:disabled):hover { border-color: var(--border); color: var(--text-2); }
.denstog.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }

/* The box itself. appearance:none is only safe here because checked is not a hue
   change - the box fills solid --ok and grows a tick - so it survives a projector,
   a colour-blind reader and a glance from across the room. */
.livechk input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 15px; height: 15px; flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  background: var(--surface-1);
  cursor: inherit;
  transition: background var(--t), border-color var(--t);
}
.livechk:hover input[type="checkbox"] { border-color: var(--text-3); }
.livechk input[type="checkbox"]:checked {
  background: var(--ok);
  border-color: var(--ok);
}
.livechk input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
  opacity: 0;
}
.livechk input[type="checkbox"]:checked::after { opacity: 1; }
.livechk input[type="checkbox"]:disabled { cursor: not-allowed; }
/* The pill picks up the focus as well as the box, so the target of the keyboard is
   obvious at pill size. The ring itself is the global :focus-visible outline. */
.livechk:has(input:focus-visible) { border-color: var(--accent-bd); color: var(--text); }

/* How often, in seconds. Fixed width and tabular figures: 5 -> 20 must not shove
   the rest of the header sideways. The width holds the longest option, "every 20s",
   measured at 62px in this face with about 10px of slack for a fallback font. */
.liveevery {
  appearance: none; -webkit-appearance: none;
  height: 30px;
  width: 110px;
  padding: 0 25px 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--surface-2);
  color: var(--text-2);
  font: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t), color var(--t);
  /* A data URI cannot read a custom property, so the chevron carries the literal
     value of --text-3. Change one, change the other. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237e8fa1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px 11px;
}
.liveevery:hover:not(:disabled) { border-color: var(--border-2); color: var(--text); }
.liveevery:disabled { opacity: .45; cursor: not-allowed; }
/* The popup is drawn by the OS; give it the surface it belongs to. */
.liveevery option { background: var(--surface-2); color: var(--text); }

.ldot {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: none;
}
.livechk.on .ldot { background: var(--ok); }
.livechk.failed .ldot { background: var(--warning); }
/* CONTRACT-V14: the command centre's heading says whether it is live, with the same dot. */
.cclivel { display: inline-flex; align-items: center; gap: 6px; }
.cclivel .ldot { width: 7px; height: 7px; }
.cclivel.on { color: var(--ok); }
.cclivel.on .ldot { background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  /* Only the dot moves. A pulsing anything else on a wall display is a migraine. */
  .ldot.beat { animation: sqlmon-beat 1.7s ease-in-out infinite; }
}
@keyframes sqlmon-beat {
  0%, 100% { box-shadow: 0 0 0 0 var(--ok-bg); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px transparent; opacity: .45; }
}

/* ---------- the in-flight signal: one bar, one whisper -------------------

   Both elements live in the DOM from first paint and never change their own box.
   .liveload is 2px tall whether or not a poll is running and .liveveil is fixed
   and pointer-events:none, so a poll starting or ending moves no pixel of layout
   and steals no click. All either one ever does is cross-fade.

   Busy is expressed by any of .on / .busy / .is-loading / aria-busy="true", so
   whichever the caller reaches for, the element lights.
   ------------------------------------------------------------------------- */

.liveload {
  position: relative;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
/* Track. Idle it is invisible, so the header keeps its single hairline. */
.liveload::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent-bg);
  opacity: 0;
  transition: opacity var(--t);
}
/* The travelling segment, shaped exactly like .running .track span so the two
   indeterminate bars on this page are visibly the same device. */
.liveload > span {
  position: absolute; top: 0; bottom: 0;
  left: -34%; width: 32%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}
.liveload.on::before,
.liveload.busy::before,
.liveload.is-loading::before,
.liveload[aria-busy="true"]::before { opacity: 1; }
.liveload.on > span,
.liveload.busy > span,
.liveload.is-loading > span,
.liveload[aria-busy="true"] > span { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .liveload.on > span,
  .liveload.busy > span,
  .liveload.is-loading > span,
  .liveload[aria-busy="true"] > span { animation: sweep 1.15s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  /* No travel. A steady dim rail across the full width says the same thing.
     Scoped, so an explicit "animate" override gets the travelling bar back. */
  :root:not([data-motion="on"]) .liveload.on > span,
  :root:not([data-motion="on"]) .liveload.busy > span,
  :root:not([data-motion="on"]) .liveload.is-loading > span,
  :root:not([data-motion="on"]) .liveload[aria-busy="true"] > span { left: 0; width: 100%; background: var(--accent); opacity: .5; }
}
:root[data-motion="off"] .liveload.on > span,
:root[data-motion="off"] .liveload.busy > span,
:root[data-motion="off"] .liveload.is-loading > span,
:root[data-motion="off"] .liveload[aria-busy="true"] > span { left: 0; width: 100%; background: var(--accent); opacity: .5; }
/* Fallback for markup with no inner span. Kept in its own rules: if a browser
   cannot parse :has() it drops only these, not the rules above. */
.liveload:not(:has(> span))::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: -34%; width: 32%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}
.liveload.on:not(:has(> span))::after { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .liveload.on:not(:has(> span))::after { animation: sweep 1.15s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .liveload.on:not(:has(> span))::after { left: 0; width: 100%; background: var(--accent); opacity: .5; }
}
:root[data-motion="off"] .liveload.on:not(:has(> span))::after { left: 0; width: 100%; background: var(--accent); opacity: .5; }

/* The transparent loader the operator asked for. It is deliberately close to
   nothing: a ~3% accent wash over the whole viewport, no blur, no dimming, no
   spinner. Every figure underneath stays exactly as readable as it was, which is
   the point - somebody is reading a queue size off this screen while it polls.
   The bar above carries the "working" signal; this only says which surface the
   refresh belongs to. z-index 20 keeps it under .stick (30), the menus (55) and
   the modal layer (60). */
.liveveil {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: rgba(56, 189, 248, .030);
  transition: opacity 200ms linear;
}
.liveveil.on,
.liveveil.busy,
.liveveil.is-loading,
.liveveil[aria-busy="true"] { opacity: 1; }

/* ---------- the estate tab ---------------------------------------------- */

/* Set apart from the server tabs by a rule, not by a colour: it is a different kind of
   thing, not a different state of the same thing. */
.tab.estate { margin-right: 9px; position: relative; }
.tab.estate::after {
  content: ""; position: absolute; right: -5px; top: 18%; bottom: 18%;
  width: 1px; background: var(--border);
}
.tab.estate .tabbtn .tname { letter-spacing: .02em; }

/* ---------- health strip: gauge and trend ------------------------------- */

.hgauge { flex: 0 0 auto; display: grid; place-items: center; }
.hword .hnum {
  margin-left: 10px;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--tone); letter-spacing: 0;
}
.hword .hnum i { font-style: normal; font-size: 11px; color: var(--text-3); }

.htrend {
  flex: 0 0 auto; min-width: 210px;
  display: flex; flex-direction: column; gap: 3px;
}
.htrend .tr {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 8px;
}
.htrend .tr .k {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.htrend .tr .v { font-size: 12px; color: var(--text); text-align: right; }
.htrend .trf { margin-top: 2px; font-size: 10.5px; color: var(--text-3); }

/* ---------- tiles that carry a chart or a live dot ---------------------- */

.tile .c { margin-top: 5px; line-height: 0; }
.tile .l .lv {
  margin-left: 5px; font-size: 8px; color: var(--ok);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .tile.islive .l .lv { animation: sqlmon-beat 1.7s ease-in-out infinite; }
}

/* ---------- jobs: the run-history strip in an expanded row -------------- */

.trendrow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.trendtx { font-size: 12px; color: var(--ok); font-weight: 600; }
.trendtx.bad { color: var(--critical); }

/* ---------- performance: the wait donut and its legend ------------------ */

.waitpanel { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.waitdonut { flex: 0 0 auto; }
.waitpanel .waits { flex: 1 1 210px; min-width: 0; gap: 6px; }
/* Three columns now, not the meter's three: swatch, name, number. The swatch is what
   ties a row to its arc, and without it the donut is decoration. */
.waitpanel .wait {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 9px;
}
.waitpanel .wait .sw {
  width: 10px; height: 10px; border-radius: 3px; display: block;
}

/* ---------- availability groups ----------------------------------------- */

/* Printed above a borrowed diagram. Whose numbers these are is not a footnote:
   "0 MB queued" measured on another server is a different statement. */
.agsrc {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--info-bg);
  font-size: 11.5px; color: var(--text-2);
}
.agsrc b { color: var(--text); font-weight: 650; }

/* ---------- error log inside the data table ----------------------------- */

.logtx {
  display: block;
  font-size: 12px; line-height: 1.45;
  max-width: 80ch;
}

/* ---------- print: the v2 furniture is not print furniture -------------- */

@media print {
  body.dt-printing .livetog,
  body.dt-printing .denstog,
  body.dt-printing .pchev,
  body.dt-printing .phints { display: none !important; }
}

/* ========================================================================
   v3: replication diagram
   CONTRACT-V3 3.1. Appended - nothing above this line is touched.

   Everything here is drawn by web\replview.js and prefixed .rv-, so it can
   collide with neither the v2 rules above nor anything appended below.
   Colour works exactly as it does for the AG diagram: replview.js puts a
   .t-<severity> class on an edge or a node and the SVG strokes read
   var(--tone), so the picture can never disagree with the pill beside it.

   The one deliberate exception is a stopped agent. Its edge is toned muted
   whatever the severity says, because "nothing is moving" is the signal, and
   the word beside it is painted --serious so the alarm is still on screen.
   ======================================================================== */

.rv { display: flex; flex-direction: column; gap: 11px; }

.rv-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rv-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.rv-sub { font-size: 11.5px; color: var(--text-3); }
.rv-grow { flex: 1 1 auto; }
.rv-toggle { align-self: center; }
.rv-snaptag { font-size: 11px; color: var(--text-3); }
.rv-livetag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ok);
  border: 1px solid var(--ok-bd); background: var(--ok-bg);
  border-radius: 999px; padding: 2px 9px;
}
.rv-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg);
}

.rv-stage {
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(56, 189, 248, .05), transparent 72%),
    var(--surface-1);
  padding: 6px 4px;
  /* Three stages need about 780px before the labels start sitting on each other,
     and nine subscriber rows are simply tall. Scroll rather than squash. */
  overflow: auto;
}
.rv-svg { display: block; width: 100%; height: auto; max-height: 880px; min-width: 780px; margin: 0 auto; }

/* edges */
.rv-edge-base { fill: none; stroke: var(--tone); opacity: .26; stroke-linecap: round; }
.rv-flow { fill: none; stroke: var(--tone); opacity: .92; stroke-linecap: round; stroke-dasharray: 8 16; }
.rv-arrow { fill: var(--tone); opacity: .85; }
/* Invisible, wide, and on top: a 2.4px line is not a click target. */
.rv-hit { fill: none; stroke: transparent; stroke-linecap: round; }
.rv-edge.is-click { cursor: pointer; }
.rv-edge.is-click:hover .rv-edge-base { opacity: .52; }
.rv-edge.is-sel .rv-edge-base { opacity: .62; }
.rv-edge:focus { outline: none; }
.rv-edge:focus-visible .rv-edge-base { stroke: var(--accent); opacity: .85; }

/* A stopped agent: grey, dashed, and no flow overlay at all - not a stopped one,
   because a stationary dash pattern still reads as traffic at a glance. */
.rv-edge.is-stopped .rv-edge-base { stroke: var(--muted); stroke-dasharray: 7 7; opacity: .55; }
.rv-edge.is-stopped .rv-arrow { fill: var(--muted); opacity: .45; }
/* The folded "+ n more" edge stands for several agents at once, so it is drawn as a
   summary - visible, but never animated and never mistaken for one delivery. */
.rv-edge.is-summary .rv-edge-base { stroke-dasharray: 2 6; opacity: .34; }
.rv-edge.is-summary .rv-arrow { opacity: .5; }
.rv-edge.is-return .rv-edge-base { opacity: .3; }

@keyframes sqlmon-rv-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes sqlmon-rv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: no-preference) {
  /* Longhands only. An `animation:` shorthand here would reset animation-duration to 0s,
     and the duration is the whole point - replview.js sets it inline from the delivery
     rate. .is-animating is removed on visibilitychange. */
  .rv-svg.is-animating .rv-flow.is-moving {
    animation-name: sqlmon-rv-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .rv-livetag .rv-dot { animation: sqlmon-rv-pulse 2s ease-in-out infinite; }
}

/* edge labels: a stroke of the stage colour painted behind the glyphs, so a label that
   lands on a curve is still readable */
.rv-lab {
  fill: var(--text-2);
  font-family: var(--font); font-size: 10.5px;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3.5px; stroke-linejoin: round;
}
.rv-lab.b { fill: var(--text); font-size: 11px; font-weight: 650; }
.rv-lab.tone { fill: var(--tone); }
.rv-lab.dim { fill: var(--text-3); }
/* Said on a grey edge on purpose: the line has gone quiet, the word has not. */
.rv-lab.alarm { fill: var(--serious); font-weight: 650; }

/* nodes */
.rv-node .rv-box {
  fill: var(--surface-2); stroke: var(--tone-bd); stroke-width: 1.4;
  transition: fill var(--t), stroke var(--t);
}
.rv-node.k-dist .rv-box { fill: var(--surface-3); }
.rv-node .rv-rail { fill: var(--tone); opacity: .9; }
.rv-node.is-click { cursor: pointer; }
.rv-node.is-click:hover .rv-box { fill: var(--surface-3); stroke: var(--tone); }
.rv-node.is-sel .rv-box { stroke: var(--accent); stroke-width: 2; }
.rv-node.is-open .rv-box { fill: var(--surface-3); }
.rv-node:focus { outline: none; }
.rv-node:focus-visible .rv-box { stroke: var(--accent); stroke-width: 2; }
/* A placeholder for something that is not there: no subscriber, or servers folded away. */
.rv-node.is-ghost .rv-box { fill: var(--surface-1); stroke-dasharray: 5 4; }
.rv-node-nm { fill: var(--text); font-family: var(--font); font-size: 13px; font-weight: 650; }
.rv-node-sub { fill: var(--text-3); font-family: var(--font); font-size: 10.5px; }
.rv-node-st { fill: var(--tone); font-family: var(--font); font-size: 11px; font-weight: 600; }
.rv-node-li { fill: var(--text-2); font-family: var(--mono); font-size: 10px; }

/* legend, captions, tables */
.rv-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 15px;
  font-size: 11px; color: var(--text-3); padding: 0 2px;
}
.rv-legend > span { display: inline-flex; align-items: center; }
.rv-legend .sw {
  display: inline-block; width: 18px; height: 0;
  border-top: 3px solid var(--tone); border-radius: 2px; margin-right: 6px;
}
.rv-legend .sw.dash { border-top-style: dashed; }
.rv-legend-note { opacity: .85; }
.rv-note {
  font-size: 11.5px; color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--hairline); border-left: 3px solid var(--info);
  border-radius: var(--r-xs);
  padding: 8px 11px;
}
.rv-note.rv-note-bad { border-left-color: var(--serious); background: var(--serious-bg); }
.rv-note b { color: var(--text); }
.rv-blank {
  padding: 26px 14px; text-align: center;
  font-size: 12.5px; color: var(--text-3);
  border: 1px dashed var(--border); border-radius: var(--r-s);
}
.rv-blank b { color: var(--text-2); }
.rv-blank-s { margin: 5px auto 0; max-width: 62ch; font-size: 11.5px; }
/* the diagram's own tables are short and already inside a panel, so they do not get the
   66vh inner scroll that the big tables need */
.rv-table { max-height: none; border: 1px solid var(--hairline); border-radius: var(--r-s); }
.rv-small { font-size: 10.5px; }
.rv-state { color: var(--tone); font-weight: 650; }
.rv-tag-stage { color: var(--text-3); }
.rv-tag-live { margin-left: 6px; color: var(--ok); }
/* A server folded into "+ n more" is still in the table, just dimmed - the table is the
   promise that nothing was hidden, so it must not look like a second-class row. */
tr.rv-undrawn td { opacity: .78; }

/* ========================================================================
   v3: the replication tab and the event-log panel in app.js
   CONTRACT-V3 3.2. Appended - nothing above this line is touched.
   These are app.js's own classes, not replview.js's; the .rv- prefix above
   belongs to the diagram and is deliberately not reused here.
   ======================================================================== */

/* The diagram sits in a flush panel, so it needs its own inset. */
.rvhost { padding: 11px 13px 13px; }

/* What the diagram was clicked on, and the way back out. It is a bar rather than a chip
   because the whole tab is filtered by it: a reader who scrolls past a small chip and
   then reads "0 rows" three panels down has been misled by the page. */
.rvfocus {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent-bd);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--accent-bg);
  font-size: 12px; color: var(--text-2);
}
.rvfocus b { color: var(--text); font-weight: 650; }
.rvfocus .ic { color: var(--accent); font-weight: 800; }

/* An agent name is 50-odd characters of publisher-database-publication-subscriber and
   there is no useful place to break it, so it wraps rather than pushing the table wide. */
.rvwrap { display: inline-block; max-width: 46ch; overflow-wrap: anywhere; }

/* "continuous, stopped" under a No. The only place in a table cell where a word is painted
   an alarm colour on its own, because it is the one row the whole tab exists to find. */
.badword { color: var(--serious); font-weight: 650; }

/* Where a chart would be if the collector wrote the series. Dashed, so it reads as a gap
   that is known about rather than as a finished panel. */
.rvgap {
  margin-top: 12px;
  padding: 10px 13px;
  border: 1px dashed var(--border);
  border-radius: var(--r-s);
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.rvgap code { font-family: var(--mono); font-size: 11px; color: var(--text-2); }

/* Event log: the level and category chips. Two rows, labelled, because "Error" and
   "Storage" are answers to different questions and a single run of ten chips hides that. */
.evfilters {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 13px 11px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-1);
}
.evrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.evrow .k {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); min-width: 62px;
}

/* The collector's own caveat about how far back it got. Above the chips, because it
   qualifies every count they show. */
.evnote {
  padding: 8px 13px;
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid var(--info);
  background: var(--info-bg);
  font-size: 11.5px; line-height: 1.5; color: var(--text-2);
}

/* ========================================================================
   print: the live control is not print furniture

   A printed page is a snapshot of one moment, so a refresh control, a countdown
   and an in-flight indicator are all lies on paper. The older block near the
   .livetog rules covers the data table's own print path (body.dt-printing);
   this covers a plain Ctrl+P as well, which that one never did.
   ======================================================================== */

@media print {
  .livechk,
  .liveevery,
  .liveload,
  .liveveil,
  body.dt-printing .livechk,
  body.dt-printing .liveevery,
  body.dt-printing .liveload,
  body.dt-printing .liveveil { display: none !important; }
}

/* ========================================================================
   motion: the reader's override

   Everything that moves in this product was gated on
   @media (prefers-reduced-motion: no-preference). That is the right default and it
   was also, here, a silent total failure.

   Windows switches client-area animation off inside a Remote Desktop session to save
   bandwidth. Chromium cannot tell that apart from a person asking for less motion, so
   it reports prefers-reduced-motion: reduce. Every operator reaches this dashboard over
   RDP. The result was a control room where nothing moved, nothing faded, no diagram
   flowed and no progress bar travelled, with nothing on screen saying why - discovered
   not by somebody who wanted less motion but by somebody who wanted it and could not
   get it.

   So the root element carries an explicit answer, and it wins in both directions:

       data-motion="on"     animate, whatever the operating system says
       data-motion="off"    never animate, on any machine
       absent, or "auto"    honour the operating system - still the default

   A genuine vestibular preference is respected until the reader overrides it. It is
   simply no longer indistinguishable from "this session happens to be remote".

   Every rule below is a deliberate duplicate of one inside a no-preference query. It
   has to be, rather than being made more specific in place: no rule inside
   `no-preference` can ever apply on a machine reporting `reduce`, however it is
   written. agview.js and replview.js inject the same pair for their own packet
   markers.
   ======================================================================== */

/* the availability-group diagram */
:root[data-motion="on"] .agv-svg.is-animating .agv-flow.is-moving {
  animation-name: sqlmon-ag-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
:root[data-motion="on"] .agv-livetag .agv-dot { animation: sqlmon-ag-pulse 2s ease-in-out infinite; }

/* the replication diagram */
:root[data-motion="on"] .rv-svg.is-animating .rv-flow.is-moving {
  animation-name: sqlmon-rv-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
:root[data-motion="on"] .rv-livetag .rv-dot { animation: sqlmon-rv-pulse 2s ease-in-out infinite; }

/* the live chip, the live tiles, and the collection progress bar */
:root[data-motion="on"] .ldot.beat { animation: sqlmon-beat 1.7s ease-in-out infinite; }
:root[data-motion="on"] .tile.islive .l .lv { animation: sqlmon-beat 1.7s ease-in-out infinite; }
:root[data-motion="on"] .spinner { animation: spin .7s linear infinite; }
:root[data-motion="on"] .spin { animation: spin 1.4s linear infinite; }
:root[data-motion="on"] .running .track span {
  animation: sweep 1.15s linear infinite;
  left: -34%; width: 32%; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* the in-flight bar. left and width are restored explicitly: the reduce fallback parks
   it as a full-width rail, and an animation alone would not move it back. */
:root[data-motion="on"] .liveload.on > span,
:root[data-motion="on"] .liveload.busy > span,
:root[data-motion="on"] .liveload.is-loading > span,
:root[data-motion="on"] .liveload[aria-busy="true"] > span {
  animation: sweep 1.15s linear infinite;
  left: -34%; width: 32%; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
:root[data-motion="on"] .liveload.on:not(:has(> span))::after {
  animation: sweep 1.15s linear infinite;
  left: -34%; width: 32%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ========================================================================
   the performance ribbon

   Above the health strip, because in an incident this is the line that matters
   and it must not sit below a score that is red for a missing backup.
   ======================================================================== */

.pribbon {
  display: flex; align-items: flex-start; gap: 13px;
  margin-bottom: 11px; padding: 11px 15px;
  border: 1px solid var(--tone-bd);
  border-left: 4px solid var(--tone);
  border-radius: var(--r-s);
  background: var(--tone-bg);
}
.pric { flex: 0 0 auto; color: var(--tone); font-size: 15px; line-height: 1.5; }
.prbody { flex: 1 1 auto; min-width: 0; }
.prhead { font-size: 14px; font-weight: 650; color: var(--text); }
.prlist { margin: 5px 0 0; padding-left: 17px; }
.prlist li { font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); margin-bottom: 3px; }
/* Healthy states say one reassuring line, so they get no bullet - a tick with a single
   bulleted item underneath reads like a complaint. */
.pribbon.t-ok .prlist { list-style: none; padding-left: 0; }

.prthread {
  flex: 0 0 auto; width: 210px;
  padding-left: 15px; border-left: 1px solid var(--border);
}
.prtk {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2);
}
.prtbar {
  height: 7px; margin: 6px 0 5px;
  border-radius: 4px; background: var(--surface-1);
  border: 1px solid var(--border);
  overflow: hidden;
}
.prtbar > span { display: block; height: 100%; background: var(--tone); transition: width var(--t); }
.prtv { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.prtv i { font-style: normal; font-size: 12px; color: var(--text-3); font-weight: 500; }
.prts { font-size: var(--fs-small); color: var(--text-2); }

@media (max-width: 820px) {
  .pribbon { flex-wrap: wrap; }
  .prthread { width: 100%; padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px solid var(--border); }
}

/* ========================================================================
   cluster: the topology

   Drawn like the Windows failover-cluster diagram, minus the shared storage,
   because an availability-group cluster has none and drawing one would assert
   the opposite of the truth.
   ======================================================================== */

.clwrap {
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(56, 189, 248, .05), transparent 72%),
    var(--surface-1);
  padding: 6px 4px;
  overflow: auto;
}
.clsvg { display: block; width: 100%; height: auto; max-height: 340px; min-width: 620px; margin: 0 auto; }

.clrail { stroke: var(--accent); stroke-width: 2.4; opacity: .55; }
.cldrop { stroke: var(--border-2); stroke-width: 1.6; }
.clwline { stroke: var(--border-2); stroke-width: 1.6; stroke-dasharray: 5 4; }

.clnode rect, .clwit rect, .clclients rect {
  fill: var(--surface-2); stroke: var(--border-2); stroke-width: 1.4;
  transition: fill var(--t), stroke var(--t);
}
.clnode.t-ok rect       { stroke: var(--ok-bd); }
.clnode.t-warning rect  { stroke: var(--warning-bd); fill: var(--warning-bg); }
.clnode.t-critical rect { stroke: var(--critical-bd); fill: var(--critical-bg); }
/* The node you are looking at. A ring rather than a fill, so it does not compete with
   the health colour that is already on the box. */
.clnode.is-me rect { stroke: var(--accent); stroke-width: 2.2; }
.clwit rect { stroke-dasharray: 5 4; }
.clclients rect { fill: var(--surface-1); stroke-dasharray: 4 4; }

.clnm { fill: var(--text); font-family: var(--font); font-size: 12px; font-weight: 650; }
.clst { fill: var(--text-2); font-family: var(--font); font-size: 10.5px; }
.clvt { fill: var(--text-3); font-family: var(--mono); font-size: 10px; }
.clnode.t-ok .clst { fill: var(--ok); }
.clnode.t-critical .clst { fill: var(--critical); }
.cllab { fill: var(--text-3); font-family: var(--font); font-size: 10.5px; }

.cllegend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px;
  padding: 9px 12px 4px;
  font-size: 11px; color: var(--text-3);
}
.cllegend .sw {
  display: inline-block; width: 16px; height: 3px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle; background: currentColor;
}
.cllegend .t-ok { color: var(--ok); }
.cllegend .t-critical { color: var(--critical); }
.cllegend-note { color: var(--text-3); }

.cltab td.bad { color: var(--warning); font-weight: 650; }
.tblwrap { overflow-x: auto; }

/* ========================================================================
   storage: the volumes as cards

   Colour follows headroom rather than consumption, because headroom is what
   runs out: under 5 per cent free red, under 15 amber, otherwise green.
   ======================================================================== */

/* Sub-tabs inside a tab. Quieter than the section nav above them on purpose: they choose
   a way of reading one thing, not a different thing. */
.substrip { display: flex; gap: 4px; margin-bottom: 11px; }
.subtab {
  padding: 5px 13px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-3);
  font-family: var(--font); font-size: 12px; cursor: pointer;
}
.subtab:hover { border-color: var(--border-2); color: var(--text); }
.subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.subtab.on {
  border-color: var(--accent-bd); background: var(--accent-bg); color: var(--accent);
  font-weight: 650;
}

/* The theme picker. Shaped like the interval select beside it, because it is the same
   kind of control: a preference, chosen once, that the page then remembers. */
.themesel {
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font); font-size: 11px;
  cursor: pointer;
}
.themesel:hover { border-color: var(--border-2); color: var(--text); }
.themesel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media print { .themesel { display: none !important; } }

.dkcols { display: inline-flex; align-items: center; gap: 4px; }
.dkcols .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin-right: 3px;
}
.dkcol {
  width: 24px; height: 22px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-3);
  font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.dkcol:hover { border-color: var(--border-2); color: var(--text); }
.dkcol.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--accent); }
.dkcol:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dkgrid { display: grid; gap: 11px; }
.dkgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dkgrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dkgrid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Below these widths the chosen column count stops being a preference and starts being
   unreadable, so the layout overrules it rather than honouring it into illegibility. */
@media (max-width: 1500px) { .dkgrid.c5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .dkgrid.c4, .dkgrid.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  { .dkgrid { grid-template-columns: 1fr !important; } }

/* Laid out the way Windows Explorer lays out a drive - icon, name, bar, "x free of y" -
   because that is the picture every reader of this page already has in their head. */
.dkcard {
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface-2);
  min-width: 0;
  overflow: hidden;
  --tone: var(--text-3);
}
.dkcard.t-ok       { --tone: var(--ok); }
.dkcard.t-warning  { --tone: var(--warning); }
.dkcard.t-serious  { --tone: var(--serious); }
.dkcard.t-critical { --tone: var(--critical); }
.dkcard.t-serious  { border-color: var(--serious-bd); }
.dkcard.t-critical { border-color: var(--critical-bd); }
.dkcard.is-open    { border-color: var(--accent-bd); }

.dkface {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; padding: 11px 12px 12px;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.dkface:hover { background: var(--surface-3); }
.dkface:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dkicon { flex: 0 0 auto; margin-top: 2px; }
.dkbody { flex: 1 1 auto; min-width: 0; }

.dktitle { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.dktitle b {
  font-size: 13px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dkl { font-size: 12px; color: var(--text-3); flex: 0 0 auto; }

.dkfree { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-2); }
.dkcard.t-serious  .dkfree,
.dkcard.t-critical .dkfree { color: var(--tone); font-weight: 600; }

.dkmeta { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.dktype {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dkrole {
  font-size: 10px; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-3); white-space: nowrap;
}
/* The count of suggestions. Amber, because it is the one thing on the face of the card
   that asks the reader to open it. */
.dkadv {
  font-size: 10px; font-weight: 700; min-width: 16px; text-align: center;
  padding: 1px 5px; border-radius: 999px;
  background: var(--warning-bg); color: var(--warning);
  border: 1px solid var(--warning-bd);
}

/* the detail, once opened */
.dkdetail { padding: 0 12px 12px; border-top: 1px solid var(--border); }
.dkdl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 9px 0 0; }
.dkdl > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; border-bottom: 1px solid var(--border);
}
.dkdl dt { flex: 0 0 116px; font-size: 11px; color: var(--text-3); }
.dkdl dd {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  overflow-wrap: anywhere;
}
.dkdl dd.bad { color: var(--warning); }
.dkdl dd.dim { color: var(--text-3); }

.dkadvice { margin-top: 12px; }
.dkadvice ul { margin: 0; padding-left: 17px; }
.dkadvice li { font-size: 11.5px; line-height: 1.55; color: var(--text-2); margin-bottom: 7px; }
.dkok { margin-top: 12px; font-size: 11.5px; color: var(--ok); }

/* The activity dot. Four bands, not a continuous rate: a card pulsing a hair faster than
   its neighbour says nothing, and a screen of forty each at its own speed is unreadable. */
.dkact {
  margin-left: auto; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: .5;
}
.dkact.a2 { opacity: .75; }
.dkact.a3 { opacity: 1; box-shadow: 0 0 0 3px var(--accent-bg); }
@keyframes sqlmon-dkact { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
:root[data-motion="on"] .dkact.a1 { animation: sqlmon-dkact 2.6s ease-in-out infinite; }
:root[data-motion="on"] .dkact.a2 { animation: sqlmon-dkact 1.5s ease-in-out infinite; }
:root[data-motion="on"] .dkact.a3 { animation: sqlmon-dkact .8s ease-in-out infinite; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .dkact.a1 { animation: sqlmon-dkact 2.6s ease-in-out infinite; }
  :root:not([data-motion="off"]) .dkact.a2 { animation: sqlmon-dkact 1.5s ease-in-out infinite; }
  :root:not([data-motion="off"]) .dkact.a3 { animation: sqlmon-dkact .8s ease-in-out infinite; }
}
:root[data-motion="off"] .dkact { animation-name: none; }

/* Explorer's proportions: a full-width bar, taller than a sparkline, with a visible
   trough so an almost-empty drive still reads as a drive. The filled part is what is
   USED; the colour is decided by what is FREE, which is why the tone lives on the card. */
.dkbar {
  display: block; width: 100%; height: 11px;
  border: 1px solid var(--border-2); border-radius: 2px;
  background: var(--surface-1);
  overflow: hidden;
}
.dkbar > span {
  display: block; height: 100%;
  background: var(--tone);
  transition: width var(--t);
}

.dkiobar {
  height: 4px; border-radius: 2px; background: var(--surface-1);
  overflow: hidden; margin-bottom: 6px;
}
.dkiobar > span { display: block; height: 100%; background: var(--accent); opacity: .8; }

.dknote { margin-top: 11px; font-size: 11px; line-height: 1.55; color: var(--text-3); }

/* ========================================================================
   Explain: fold and close

   An analysis is a page of prose sitting above everything else on the tab. It
   had no way to get out of the way and no way to be dismissed, so once asked for
   it stayed until the tab was changed. A chevron folds it; the cross throws it
   away and brings the Explain button back.
   ======================================================================== */

.explain > header > .exfold {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  /* The header is the hit area, so this stretches across the words rather than
     being a 12px chevron nobody can hit. */
  text-align: left;
}
.explain > header > .exfold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.exchev {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform var(--t);
  color: var(--text-3);
  font-size: 13px; line-height: 1;
}
.exchev.shut { transform: rotate(0deg); }
.explain.shut > header { border-bottom: 0; }

.iconbtn.sm { width: 22px; height: 22px; font-size: 12px; }

/* ========================================================================
   the server profile

   Version, patch level, last restart, processors, service account, tempdb,
   trace flags and the settings worth an opinion. Collapsed by default: it is
   near-static, so it should be one click away rather than occupying the top of
   the page for ever.
   ======================================================================== */

.sprof {
  margin: 0 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface-2);
  overflow: hidden;
}
.sprofh {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 12px;
  background: none; border: 0;
  font: inherit; color: var(--text-2);
  cursor: pointer; text-align: left;
}
.sprofh:hover { background: var(--surface-3); }
.sprofh:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sprofh .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.sprofsum { font-size: 11.5px; color: var(--text); }
.sprofn {
  margin-left: auto;
  font-size: 11px; color: var(--warning);
  white-space: nowrap;
}
.sprofb { padding: 4px 12px 13px; border-top: 1px solid var(--border); }
.sprofe {
  margin: 10px 0; padding: 8px 11px;
  border-left: 3px solid var(--serious);
  background: var(--serious-bg);
  font-size: 12px; color: var(--text-2);
}

/* Two columns of label and value on a wide window, one on a narrow one. A
   definition list because that is what it is. */
.sprofg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 26px;
  margin: 10px 0 0;
}
.sprofg > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sprofg dt {
  flex: 0 0 132px;
  font-size: 11.5px; color: var(--text-3);
}
.sprofg dd {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; color: var(--text);
  overflow-wrap: anywhere;
}

.sprofst {
  margin: 16px 0 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3);
}
.sproft table { width: 100%; border-collapse: collapse; }
.sproft th {
  text-align: left; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3);
  padding: 3px 8px 5px; border-bottom: 1px solid var(--border);
}
.sproft th.num, .sproft td.num { text-align: right; }
.sproft td {
  padding: 4px 8px; font-size: 11.5px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
/* A row is tinted only when there is something to say about it. Tinting every
   row would make the page look alarming and mean nothing. */
.sproft tr.t-warning td { background: var(--warning-bg); }
.sproft tr.t-serious td { background: var(--serious-bg); }
.sproft tr.t-info    td { background: var(--accent-bg); }

/* An expected value that has an argument behind it. Dotted underline rather than a link
   colour: it reveals an explanation, it does not navigate anywhere. Focusable, so the
   keyboard reaches the same tooltip the mouse does. */
.sproft td.hint {
  text-decoration: underline dotted var(--border-2);
  text-underline-offset: 3px;
  cursor: help;
}
.sproft td.hint:hover { text-decoration-color: var(--accent); color: var(--text); }
.sproft td.hint:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The verdict, so the table reads without hovering every row. Worded as an action rather
   than a severity, because "worth doing at the next restart" and "serious" are different
   statements and only one of them is true here. */
.ubadge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
  border: 1px solid var(--border);
}
.ubadge.u-urgent            { color: var(--critical); background: var(--critical-bg); border-color: var(--critical-bd); }
.ubadge.u-worth-doing-soon  { color: var(--serious);  background: var(--serious-bg);  border-color: var(--serious-bd); }
.ubadge.u-worth-doing       { color: var(--warning);  background: var(--warning-bg);  border-color: var(--warning-bd); }
.ubadge.u-not-needed-now    { color: var(--ok);       background: var(--ok-bg);       border-color: var(--ok-bd); }
.udim { color: var(--text-3); font-size: var(--fs-small); }

.sproff ul { margin: 0; padding-left: 18px; }
.sproff li { font-size: 11.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 5px; }

.sprofp {
  margin-top: 14px; padding: 8px 11px;
  border-left: 3px solid var(--border-2);
  background: var(--surface-1);
  font-size: 11px; line-height: 1.55; color: var(--text-3);
}

@media print { .sprofh { display: none; } }

/* ========================================================================
   the key-metrics band in the health strip

   The strip carried a score, a headline, four chips and two sparklines, with a
   wide empty gap across the middle - while the first question anyone asks of an
   instance, is it healthy right now, had no answer above the fold at all.

   One row of small tiles, wrapping on a narrow window, each carrying a label, a
   value and one line of context. Fixed height whatever the value, so a number
   changing under Live never moves anything.
   ======================================================================== */

.hmetrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 14px 0;
}

.hm {
  flex: 1 1 128px;
  min-width: 118px;
  max-width: 220px;
  padding: 10px 13px 11px;
  border: 1px solid var(--border);
  /* 3px, not 2. At 2px on a dark ground over Remote Desktop the tone was barely
     there, and the tone is the fastest thing on the tile to read. */
  border-left: 3px solid var(--border-2);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  /* The tallest arrangement is label + value + sub. Pinning the height here means a
     tile whose sub-line disappears does not resize and shuffle the row sideways. */
  min-height: 66px;
}
.hm.t-ok       { border-left-color: var(--ok); }
.hm.t-warning  { border-left-color: var(--warning); background: var(--warning-bg); }
.hm.t-serious  { border-left-color: var(--serious); background: var(--serious-bg); }
.hm.t-critical { border-left-color: var(--critical); background: var(--critical-bg); }

/* The label was --text-3 at 10px, which is the dimmest colour in the palette at the
   smallest size in the file. On a wall display, and over Remote Desktop where the
   colour depth is reduced, it washed out to nearly nothing. One step brighter and one
   step larger, and it reads. */
/* Same weight and tracking as .tile .l further down the page, so the two rows of tiles
   look like one product. The one deliberate difference is the colour: .tile .l is
   --text-3, the dimmest in the palette, and at this size on a dark ground over Remote
   Desktop it washed out to nearly nothing. One step brighter. */
.hmk {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-2);
  white-space: nowrap;
  margin-bottom: 4px;
}
/* 24px and the monospace face, exactly like .tile .v. At 16px in the body font this row
   read as a caption under the headline rather than as the numbers somebody opened the
   page to see. The class list already carries `mono`; the family is repeated here so the
   rule stands on its own if that class is ever dropped from the markup. */
.hmv {
  font-family: var(--mono);
  font-size: 24px; font-weight: 700; color: var(--text);
  line-height: 1.1;
  letter-spacing: -.02em;
  /* Tabular figures, or every tile jitters horizontally as its digits change. */
  font-variant-numeric: tabular-nums;
}
.hm.t-warning  .hmv { color: var(--warning); }
.hm.t-serious  .hmv { color: var(--serious); }
.hm.t-critical .hmv { color: var(--critical); }
.hms {
  margin-top: 2px;
  font-size: 11.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Compact trims the tile, never the number: the whole point of compact is to fit more
   on screen, and shrinking the values would defeat what the row is for. */
.app.compact .hm { padding: 8px 11px 9px; min-height: 62px; }
.app.compact .hmv { font-size: 21px; }
.app.compact .hmk { margin-bottom: 3px; }

/* The live dot. Tiny, and only on tiles the poll actually refreshed - a tile fed by
   the last collection does not get one, which is the whole point of drawing it. */
.hmd {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
:root[data-motion="on"] .hmetrics.islive .hmd { animation: sqlmon-beat 1.7s ease-in-out infinite; }
@media (prefers-reduced-motion: no-preference) {
  .hmetrics.islive .hmd { animation: sqlmon-beat 1.7s ease-in-out infinite; }
}
:root[data-motion="off"] .hmd { animation-name: none; }

/* The staleness note. Brighter than a footnote on purpose: it is the difference between
   a number that is current and one that is hours old, which is the single easiest thing
   to misread on this page. */
.hmnote {
  flex: 1 1 100%;
  font-size: 11.5px; color: var(--text-2);
  padding-top: 3px;
}

/* The live dot earns a halo, so at a glance the row reads as live without having to
   find the small green circles. */
.hmetrics.islive .hmd { box-shadow: 0 0 0 2px var(--ok-bg); }

@media (max-width: 900px) {
  .hm { flex: 1 1 calc(33.333% - 8px); max-width: none; }
}
@media (max-width: 620px) {
  .hm { flex: 1 1 calc(50% - 8px); max-width: none; }
}

/* the control itself. Shaped like .denstog next to it, because it is the same kind of
   thing: a display preference, not a monitoring one. */
.motiontog {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--text-3);
  font-family: var(--font); font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.motiontog:hover { border-color: var(--border-2); color: var(--text); }
.motiontog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.motiontog .k { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.motiontog b { font-family: var(--mono); font-size: 11px; color: var(--text-2); font-weight: 650; }
.motiontog.on { border-color: var(--ok-bd); background: var(--ok-bg); }
.motiontog.on b { color: var(--ok); }
/* The state nobody chose. Amber, so it reads as "something is off" rather than as a
   setting sitting quietly at its default. */
.motiontog.blocked { border-color: var(--warning-bd); background: var(--warning-bg); }
.motiontog.blocked b { color: var(--warning); }

@media print { .motiontog { display: none !important; } }
body.dt-printing .motiontog { display: none !important; }

/* "off" means off, above everything, including a machine that reports no-preference. */
:root[data-motion="off"] .agv-svg .agv-flow,
:root[data-motion="off"] .agv-livetag .agv-dot,
:root[data-motion="off"] .rv-svg .rv-flow,
:root[data-motion="off"] .rv-livetag .rv-dot,
:root[data-motion="off"] .ldot.beat,
:root[data-motion="off"] .tile.islive .l .lv,
:root[data-motion="off"] .liveload > span,
:root[data-motion="off"] .liveload::after { animation-name: none; }

/* ========================================================================
   CONTRACT-V6: platforms, the estate switcher, and the left menu
   ======================================================================== */

/* The estate switcher. Shaped like the other header controls, with its label inside, so
   it reads as the first question the header asks: which estate am I looking at. */
.platpick {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 4px 0 10px;
  border: 1px solid var(--accent-bd);
  border-radius: var(--r-s);
  background: var(--accent-bg);
  color: var(--text-2);
  white-space: nowrap;
}
.platpick .k {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
.platsel {
  height: 22px; padding: 0 6px;
  border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: 12px; font-weight: 650;
  cursor: pointer;
}
.platsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.platsel option { background: var(--surface-2); color: var(--text); font-weight: 500; }
.platsel option:disabled { color: var(--text-3); }

.laytog {
  display: inline-flex; align-items: stretch;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--surface-2);
}
.laytog .lt {
  appearance: none; border: none; background: transparent;
  padding: 0 9px;
  font: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-3); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.laytog .lt + .lt { border-left: 1px solid var(--border); }
.laytog .lt:hover { color: var(--text); }
.laytog .lt.on { background: var(--accent-bg); color: var(--text); }
.laytog .lt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media print { .platpick, .laytog { display: none !important; } }

/* ---- the left menu layout ---------------------------------------------- */

.app.menu .topbar { max-width: none; }
.shell.withnav {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}
.shell.withnav > .page { max-width: none; margin: 0; min-width: 0; padding-left: 20px; }

.sidenav {
  position: sticky;
  top: var(--stick-h, 54px);
  /* Above the page, so what opens from the menu (the rail's flyouts, the environment window) is
     never under a card; below the sticky header (30) and the windows and scrims (60 and up). */
  z-index: 25;
  height: calc(100vh - var(--stick-h, 54px));
  overflow-y: auto;
  padding: 14px 10px 40px 14px;
  border-right: 1px solid var(--hairline);
  background: var(--bg-2);
  scrollbar-width: thin;
}
/* An estate's header is a band in the estate's own colour - a stripe, an icon tile, a tint that
   fades across - so where one group ends and the next begins reads at a glance; its servers hang
   from a line in the same colour. The estate on screen is the stronger of the tints. */
.snp { margin-bottom: 14px; }
.snph {
  appearance: none;
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 7px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--plat, var(--accent)) 24%, transparent);
  border-radius: var(--r-s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--plat, var(--accent)) 12%, transparent), transparent 85%), var(--surface-1);
  box-shadow: inset 3px 0 0 var(--plat, var(--accent));
  font: inherit; color: var(--text); cursor: pointer; text-align: left;
  transition: border-color var(--t), background var(--t);
}
.snph:hover { border-color: color-mix(in srgb, var(--plat, var(--accent)) 52%, transparent); }
/* One line, always: the title never wraps - it is sized to fit beside two counts at the menu's
   width, and a narrower menu shortens it with an ellipsis rather than folding it. */
.snph .snpt {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text);
}
.snph .snpn, .snph .snpl, .snph .exchev { flex: 0 0 auto; }
.snp.cur > .snph {
  border-color: color-mix(in srgb, var(--plat, var(--accent)) 55%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--plat, var(--accent)) 24%, transparent), transparent 92%), var(--surface-1);
}
.snp.cur > .snph .snpt { color: var(--plat, var(--accent)); }
.snpic {
  width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px;
  background: color-mix(in srgb, var(--plat, var(--accent)) 18%, transparent); color: var(--plat, var(--accent));
}
.snp .snpbi > .snpb { margin: 4px 0 0 10px; padding: 2px 0 0 5px; border-left: 2px solid color-mix(in srgb, var(--plat, var(--accent)) 30%, transparent); }
.snpn {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px;
}
.snp.later .snph { cursor: default; opacity: .55; background: none; border-style: dashed; border-color: var(--border); box-shadow: none; color: var(--text-2); }
.snp.later .snph:hover { border-color: var(--border); }
.snp.later .snph .snpt { color: var(--text-2); }
.snp.later .snpic { background: var(--surface-2); color: var(--text-3); }
.snpl {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); border: 1px dashed var(--border-2); border-radius: 999px; padding: 0 7px;
}
.snpb { padding: 3px 0 0 4px; }

.sni, .snsb, .snvb, .snadd {
  appearance: none; border: none; background: none;
  width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  border-radius: var(--r-xs);
  transition: background var(--t), color var(--t);
}
.sni {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 2px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.sni:hover { background: var(--surface-1); color: var(--text); }
.sni.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.snig { color: var(--accent); font-size: 11px; width: 15px; text-align: center; }

.sns { margin-bottom: 1px; }
.snsb {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.snsb:hover { background: var(--surface-1); color: var(--text); }
.sns.on > .snsb { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--tone, var(--accent)); }
.sns.off .snsn { color: var(--text-3); text-decoration: line-through; }
.snsb .dot {
  width: 15px; height: 15px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tone); color: var(--on-accent);
  font-size: 9.5px; font-weight: 800; line-height: 1;
}
.snsn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CONTRACT-V11: the name, and under it the server's part in its availability groups. */
.snst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.snst .snsn { flex: none; }
.agrole { font-size: 10.5px; font-weight: 550; line-height: 1.25; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agrole.t-accent { color: var(--accent); }
.agrole.t-warning { color: var(--warning); }
.agrole.flag {
  display: inline-flex; align-items: center; vertical-align: middle; max-width: 460px;
  margin-left: 10px; padding: 2px 8px; height: 20px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface-1); font-size: 11px; font-weight: 650; letter-spacing: 0;
}
.agrole.flag.t-accent { border-color: var(--accent-bd); background: var(--accent-bg); }
.tabbtn .trole { font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.tabbtn .trole.t-accent { color: var(--accent); }
.tabbtn .trole.t-warning { color: var(--warning); }

.snv { padding: 3px 0 6px 22px; border-left: 1px solid var(--border); margin-left: 15px; }
.snvb {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  font-size: 12px; color: var(--text-3);
}
.snvb:hover { background: var(--surface-1); color: var(--text); }
.snvb.on { color: var(--text); background: var(--accent-bg); }
.snvl { flex: 1 1 auto; }
.snvb .n {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; min-width: 20px; text-align: center;
}
.snvb .n.bad { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }

.snadd {
  margin-top: 6px; padding: 6px 8px;
  font-size: 12px; font-weight: 650; color: var(--text-3);
  border: 1px dashed var(--border-2);
}
.snadd:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.sidenav :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A narrow window has no room for a column: the menu stacks above the page instead. */
@media (max-width: 900px) {
  .shell.withnav { grid-template-columns: 1fr; }
  .sidenav { position: static; height: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--hairline); }
  .shell.withnav > .page { padding-left: 22px; }
}
@media print { .sidenav { display: none !important; } .shell.withnav { display: block; } }

/* ---- the wizard's platform choice --------------------------------------- */

.platcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
.platcard {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.platcard input { position: absolute; opacity: 0; pointer-events: none; }
.platcard:hover { border-color: var(--border-2); }
.platcard.on { border-color: var(--accent-bd); background: linear-gradient(180deg, var(--accent-bg), transparent), var(--surface-2); }
.platcard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.platcard.dis { cursor: not-allowed; opacity: .5; }
.platcard .pct { font-size: 13px; font-weight: 650; color: var(--text); }
.platcard .pcn { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }

/* ---- Windows: network ---------------------------------------------------- */

.netgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.netcard {
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-2);
  padding: 11px 12px 12px;
  box-shadow: inset 3px 0 0 var(--tone);
}
.nch { display: flex; align-items: center; gap: 8px; }
.nch b { font-size: 13px; color: var(--text); }
.ncdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px var(--tone-bg); flex: 0 0 auto; }
.ncsp { font-size: 11.5px; color: var(--text-2); }
.ncd { margin-top: 3px; font-size: 11px; color: var(--text-3); }

.fwrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fwp {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--tone-bd); border-radius: var(--r-s);
  background: linear-gradient(180deg, var(--tone-bg), transparent), var(--surface-2);
}
.fwp .pill { align-self: flex-start; }
.fwv { font-size: 18px; color: var(--tone); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fwwhy { font-size: 11.5px; color: var(--text-2); }

.nettbls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
table.mini { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.mini th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 4px 6px; border-bottom: 1px solid var(--border);
}
table.mini td {
  font-size: var(--fs-body); color: var(--text-2);
  padding: 4px 6px; border-bottom: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
table.mini th.num, table.mini td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.mini td.mono { font-family: var(--mono); }
table.mini tr:hover td { background: var(--hover-tint); }

/* ---- Windows: security posture ------------------------------------------- */

.posture { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pcard {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "ic k" "ic v" "ic w";
  column-gap: 9px; row-gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--tone-bd); border-radius: var(--r-s);
  background: linear-gradient(180deg, var(--tone-bg), transparent), var(--surface-2);
}
.pcic {
  grid-area: ic;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tone); color: var(--on-accent);
  font-size: 10.5px; font-weight: 800;
}
.pck { grid-area: k; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pcv { grid-area: v; font-size: 14px; font-weight: 650; color: var(--text); }
.pcard.t-warning .pcv, .pcard.t-serious .pcv, .pcard.t-critical .pcv { color: var(--tone); }
.pcw { grid-area: w; font-size: var(--fs-small); line-height: 1.45; color: var(--text-3); margin-top: 2px; }

/* ---- a SQL tab's Host section -------------------------------------------- */

.hostbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px;
  border: 1px solid var(--accent-bd); border-radius: var(--r-s);
  background: var(--accent-bg);
  font-size: 12.5px; color: var(--text-2);
}
.hostbar b { color: var(--text); }

/* A latency figure on a volume card that is worth a second look. */
.dkrole.bad { color: var(--warning); border-color: var(--warning-bd); background: var(--warning-bg); }

/* ========================================================================
   CONTRACT-V7: environments and tags, capacity forecasting, access and audit
   ======================================================================== */

.t-accent { --tone: var(--accent); --tone-bg: var(--accent-bg); --tone-bd: var(--accent-bd); }

/* An environment badge: the code in a tinted capsule. Dashed when the naming rules suggested
   it and nobody has confirmed it yet, so an inference never passes for a decision. */
.envb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 17px; padding: 0 5px;
  border: 1px solid var(--tone-bd); border-radius: 4px;
  background: var(--tone-bg); color: var(--tone);
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .04em;
  line-height: 1; white-space: nowrap; flex: 0 0 auto;
}
.envb.inf { border-style: dashed; }
.envb.big { height: 22px; font-size: 12px; min-width: 34px; }

/* The environment filter, at the head of the tab strip and of the left menu. */
.envbar { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 0; margin-right: 6px; border-right: 1px solid var(--border); flex: 0 0 auto; }
.envbar .k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-right: 2px; }
.envchip, .envgroup {
  appearance: none; display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.envchip b { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.envchip:hover, .envgroup:hover { border-color: var(--border-2); color: var(--text); }
.envchip.on { background: var(--tone-bg, var(--accent-bg)); border-color: var(--tone-bd, var(--accent-bd)); color: var(--text); }
.envchip.on b { color: var(--text-2); }
.envdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--muted)); flex: 0 0 auto; }
.envgroup.on { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--text); }
.envchip:focus-visible, .envgroup:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A group label in the tab strip, before the first server of each environment. */
.tabgroup {
  align-self: center; margin: 0 2px 0 8px; padding: 1px 6px;
  border-radius: 4px; border: 1px solid var(--tone-bd); background: var(--tone-bg); color: var(--tone);
  font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.tabs > .tabgroup:first-child { margin-left: 0; }
.tabbtn .envb { margin-right: -2px; }

.sngrp {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 3px 6px;
  font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--tone, var(--text-3));
}
.snnone { padding: 4px 8px; }
.sni.adm { margin-top: 6px; border-top: 1px solid var(--hairline); padding-top: 10px; border-radius: 0; }
.sni.adm .snig { color: var(--text-3); }

/* Tags. A colon makes a key and a value; the key is dimmed so the value reads first. */
.tagcs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tagc {
  display: inline-flex; align-items: center; gap: 4px;
  height: 19px; padding: 0 7px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11px; white-space: nowrap;
}
.tagc i { font-style: normal; color: var(--text-3); }
.tagc button { appearance: none; border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 9px; padding: 0 0 0 2px; }
.tagc button:hover { color: var(--critical); }
.taginput {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 34px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2);
}
.taginput:focus-within { border-color: var(--accent-bd); }
.taginput input { flex: 1 1 120px; min-width: 80px; border: none !important; background: transparent !important; padding: 2px !important; color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.taginput.dis { background: transparent; border-style: dashed; }
.admtbl .taginput { min-height: 28px; padding: 3px 5px; }

.envsel {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font); font-size: 12px; cursor: pointer; max-width: 100%;
}
.envsel:disabled { opacity: .6; cursor: default; }
/* In a form it takes .field select's padding, so it takes that height too: 30px left 12px for 13px text. */
.field select.envsel { height: auto; }
.envsel option { background: var(--surface-2); color: var(--text); }
.plainset { border: none; margin: 0; padding: 0; min-width: 0; }
.linkbtn {
  appearance: none; border: none; background: none; padding: 0;
  color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--text); }

/* Production is said out loud next to the server's name. */
.prodflag {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 2px 8px; height: 20px;
  border: 1px solid var(--critical-bd); border-radius: 4px; background: var(--critical-bg); color: var(--critical);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

/* Who is signed in, and as what. */
.mechip {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2);
  border-radius: 999px; padding: 3px 5px 3px 11px; height: 28px;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.mechip:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.mechip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mechip.mism { border-color: var(--warning-bd); }
.mename { font-family: var(--mono); font-size: 11.5px; color: var(--text); font-weight: 650; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.rolep {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--border-2);
  font-size: 10.5px; font-weight: 750; letter-spacing: .03em; white-space: nowrap;
  color: var(--text-2); background: var(--surface-2);
}
.rolep.sm { height: 19px; font-size: 10px; }
.rolep.r-owner    { color: var(--serious);  border-color: var(--serious-bd);  background: var(--serious-bg); }
.rolep.r-admin    { color: var(--accent);   border-color: var(--accent-bd);   background: var(--accent-bg); }
.rolep.r-operator { color: var(--ok);       border-color: var(--ok-bd);       background: var(--ok-bg); }
.rolep.r-auditor  { color: var(--info);     border-color: var(--info-bd);     background: var(--info-bg); }
.rolep.r-viewer   { color: var(--text-2); }
.rolep.r-none     { color: var(--warning);  border-color: var(--warning-bd);  background: var(--warning-bg); }
.iconbtn.on { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); }

/* ---- the forecast -------------------------------------------------------- */

.dkfc { display: block; margin-top: 4px; }
.fcl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--tone, var(--text-2)); white-space: nowrap; }
.fcl.t-muted { color: var(--text-3); font-weight: 600; }
.fcl.t-ok { color: var(--text-2); }
.fcdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--muted)); flex: 0 0 auto; }
.fcl.t-critical .fcdot, .fcl.t-serious .fcdot { box-shadow: 0 0 0 3px var(--tone-bg); }

.fchart { display: block; max-width: 100%; height: auto; overflow: visible; }
.fchart .fcap  { stroke: var(--critical); stroke-width: 1.2; opacity: .75; }
.fchart .fmark { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 3 3; }
.fchart .fax   { fill: var(--text-3); font-family: var(--mono); font-size: 9px; }
.fchart .fhist { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.fchart .fdot  { fill: var(--accent); }
.fchart .fproj { stroke: var(--tone, var(--accent)); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .9; }
.fchart.t-ok .fproj, .fchart.t-muted .fproj { stroke: var(--text-3); }
.fchart .ffull { fill: var(--critical); stroke: var(--surface-1); stroke-width: 1.5; }
.fchart.compact .fhist { stroke-width: 1.4; }
.fchart.compact .fcap { opacity: .45; }
.fchart-empty { padding: 14px; font-size: 11.5px; color: var(--text-3); text-align: center; border: 1px dashed var(--border); border-radius: var(--r-s); }

.fcdetail { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.fchead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fcconf { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fcconf.c-high { color: var(--ok); }
.fcconf.c-medium { color: var(--info); }
.fcconf.c-low { color: var(--warning); }

.capx { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.capx .fcdetail { margin-top: 0; padding-top: 0; border-top: none; }
.capsrv { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (max-width: 900px) { .capx { grid-template-columns: 1fr; } }

/* ---- administration -------------------------------------------------------- */

.youcard { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 12px 24px; align-items: start; }
.youname { font-size: 16px; font-weight: 700; color: var(--text); }
.youroles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.yougrant ul { margin: 4px 0 0; padding-left: 18px; }
.yougrant li { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.youperm { grid-column: 1 / -1; }
.permlist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.permp { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }

.admgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 20px; }
.chk { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); grid-column: 1 / -1; cursor: pointer; }
.chk input { margin-top: 3px; accent-color: var(--accent); }
.chk .dim { display: block; margin-top: 2px; }

.admtbl { width: 100%; border-collapse: collapse; }
.admtbl th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--sheen);
}
.admtbl td { padding: 7px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; font-size: 12.5px; color: var(--text-2); }
.admtbl tr:hover td { background: var(--hover-tint); }
.admtbl .c { text-align: center; }
.admtbl tr.fixed td { background: var(--surface-1); }
.admtbl tr.pending td { background: var(--accent-bg); }
.admtbl tr.hit td { background: var(--ok-bg); }
.admtbl .rowacts { white-space: nowrap; text-align: right; }
.admtbl .rowacts .iconbtn { display: inline-grid; margin-left: 3px; }
.admtbl.matrix td.yes { color: var(--ok); font-weight: 800; }
.admtbl.matrix td.no { color: var(--text-3); }
.admtbl.inv td:nth-child(4) { min-width: 240px; }
.iconbtn.sm { width: 26px; height: 26px; font-size: 12px; }
input.cell {
  width: 100%; height: 28px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 12.5px;
}
input.cell.m { font-family: var(--mono); font-size: 12px; }
input.cell.bad { border-color: var(--critical-bd); background: var(--critical-bg); }
input.cell:focus { outline: none; border-color: var(--accent-bd); }
.toneprev { display: inline-flex; margin-right: 8px; vertical-align: middle; }

.addrule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.addrule input[type="text"] {
  height: 30px; min-width: 260px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); color: var(--text);
  font-family: var(--mono); font-size: 12.5px;
}
.addrule .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.chkres { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.chkres.ok { color: var(--ok); }
.chkres.bad { color: var(--critical); }
.savebar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--sheen); }

.rolecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.rolecard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }

.integrity {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--tone-bd); border-radius: var(--r);
  background: linear-gradient(180deg, var(--tone-bg), transparent), var(--surface-1);
}
.integrity .pcic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: var(--on-accent); font-weight: 800; flex: 0 0 auto; }
.intt { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.headhash { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.headhash .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.headhash code { font-family: var(--mono); font-size: 11px; color: var(--text-2); word-break: break-all; }

@media print { .envbar, .mechip, .linkbtn { display: none !important; } }

/* ========================================================================
   CONTRACT-V8: the menu, search, the command palette and configuration
   ======================================================================== */

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-3);
  font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.svgi { flex: 0 0 auto; display: block; }

/* The header's search button: shaped like a search box, because that is what people look for. */
.searchtrig {
  appearance: none; display: inline-flex; align-items: center; gap: 9px;
  height: 32px; min-width: 250px; padding: 0 8px 0 11px; margin-left: 10px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-1); color: var(--text-3);
  font: inherit; font-size: 12.5px; cursor: text; text-align: left;
  transition: border-color var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.searchtrig .stl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchtrig:hover { border-color: var(--accent-bd); color: var(--text-2); background: var(--surface-2); box-shadow: 0 0 0 3px var(--accent-bg); }
.searchtrig:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 1100px) { .searchtrig { min-width: 0; } .searchtrig .stl, .searchtrig kbd { display: none; } }

/* ---- the menu ------------------------------------------------------------- */

.shell.withnav { grid-template-columns: auto minmax(0, 1fr); }
.sidenav {
  display: flex; flex-direction: column;
  width: 276px; padding: 0; overflow: hidden;
  transition: width 280ms cubic-bezier(.2, .7, .3, 1);
}
.sidenav:not(.rail) > * { animation: snFade 280ms ease both; }
@keyframes snFade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* z-index: each part of the menu is its own layer while it fades in (the animation below), so the
   head is lifted above the search and the estates, or the environment window would open under them. */
.snhead { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 12px; flex: 0 0 auto; }
.snhead .iconbtn { transition: background var(--t), color var(--t), transform 220ms cubic-bezier(.2,.7,.3,1); }
.snhead .sncoll:hover { transform: translateX(-2px); }

.snsearch {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  margin: 4px 10px 10px 12px; height: 34px; padding: 0 8px 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); color: var(--text-3);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.snsearch:focus-within { border-color: var(--accent-bd); box-shadow: 0 0 0 3px var(--accent-bg); background: var(--surface-2); color: var(--accent); }
.snsearch input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; outline: none; }
.snsearch input::placeholder { color: var(--text-3); }
.snclr { appearance: none; border: none; background: none; color: var(--text-3); cursor: pointer; padding: 3px; border-radius: var(--r-xs); display: grid; place-items: center; }
.snclr:hover { color: var(--text); background: var(--surface-3); }

.snscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 12px 12px; scrollbar-width: thin; }

/* Estates fold open and shut: the rows grow from nothing rather than appear, so the eye can
   follow where they went. The grid-rows technique animates to the content's own height. */
.snpbw { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.2,.7,.3,1), opacity 200ms ease; }
.snpbw.open { grid-template-rows: 1fr; opacity: 1; }
.snpbi { overflow: hidden; min-height: 0; }
.snph .exchev { transition: transform 220ms cubic-bezier(.2,.7,.3,1); }
.snph .svgi { color: var(--plat, var(--text-3)); }
.snp.cur > .snph .svgi { color: var(--plat, var(--accent)); }
.snp.later .snph .svgi { color: var(--text-3); }
.snpn.bad { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }

.sni, .snsb, .snvb, .snadd, .snfi { transition: background var(--t), color var(--t), box-shadow 220ms ease, transform 180ms ease; }
.snsb:hover, .sni:hover, .snvb:hover { transform: translateX(2px); }
.sns.on > .snsb { box-shadow: inset 3px 0 0 var(--tone, var(--accent)); }
.snsb .envb { margin-left: auto; }
.snv > .snvb { animation: snIn 260ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes snIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.snig .svgi { color: var(--plat, var(--accent)); }

/* CONTRACT-V14, the menu for a wide estate.
   Its top row is icons: the pages (menuTools - the command centre, the Library, and whatever is
   added later) and the environment filter, which opens a small window; the palette, the layout
   and the fold keep their small buttons at the right. Everything below is the estates' room. */
.sntools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sntool {
  appearance: none; position: relative; flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); color: var(--text-2);
  transition: border-color var(--t), background var(--t), color var(--t), transform 180ms cubic-bezier(.2,.7,.3,1), box-shadow var(--t);
}
.sntool:hover { color: var(--accent); border-color: var(--accent-bd); transform: translateY(-1px); box-shadow: 0 6px 16px -10px var(--accent); }
.sntool.on { color: var(--accent); border-color: var(--accent); background: linear-gradient(140deg, var(--accent-bg), transparent 90%), var(--surface-1); box-shadow: 0 0 0 3px var(--accent-bg); }
.sntool.filt { box-shadow: none; }
.sntool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.envmenu.open > .sntool { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.sntbadge {
  position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 9px; font-weight: 800; box-shadow: 0 0 0 2px var(--bg-2);
}
.sntdot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface-1); }
/* The environment filter's window: under the menu's top row, as wide as the menu; beside the rail. */
.envmenu { position: static; flex: 0 0 auto; }
.envpop {
  position: absolute; top: calc(100% - 2px); left: 10px; right: 10px; z-index: 70;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow);
  animation: envPop 170ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes envPop { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
.envmenu.rail { position: relative; }
.envmenu.rail .envpop { top: -6px; left: calc(100% + 8px); right: auto; width: 262px; }
.envpoph { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 4px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.envrow {
  appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.envrow:hover { background: var(--surface-2); color: var(--text); }
.envrow.on { color: var(--text); background: var(--tone-bg, var(--accent-bg)); }
.envrow.all.on { background: var(--accent-bg); }
.envrow .grow { overflow: hidden; text-overflow: ellipsis; }
.envrow b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-3); }
.envck { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 4px; border: 1.5px solid var(--border-2); }
.envrow.on .envck { background: var(--tone, var(--accent)); border-color: var(--tone, var(--accent)); }
.envrow.all.on .envck { background: var(--accent); border-color: var(--accent); }
.envrow.on .envck::after { content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.envgrp { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 8px 3px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.envgrp span { overflow: hidden; text-overflow: ellipsis; }
.envgrp .svgi { color: var(--accent); }
.envgrp:hover { color: var(--text); }
.railbtn.tool.on { box-shadow: 0 0 0 3px var(--accent-bg); }
.railbtn.filt { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
/* An estate's health is a ring round its icon (healthRing): an arc for each state, as long as its
   share of the servers, worst first from the top. The tile's own tint stays inside; the ring is
   its 2 px border, drawn by a gradient layer under the tile's solid one. */
.snpic.ring {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--plat, var(--accent)) 18%, var(--surface-1)), color-mix(in srgb, var(--plat, var(--accent)) 18%, var(--surface-1))) padding-box,
              var(--ring) border-box;
}
/* Environments fold on their own. */
.sngw { display: flex; flex-direction: column; }
button.sngrp {
  appearance: none; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  margin: 8px 0 2px; padding: 4px 6px 4px 2px; border-radius: var(--r-xs);
  font: inherit; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--tone, var(--text-3));
  transition: background var(--t);
}
button.sngrp:hover { background: var(--surface-1); }
button.sngrp .exchev { font-size: 10px; color: var(--text-3); transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
.sngl { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sngn, .sngb { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); }
.sngb { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }
.sngw.shut > button.sngrp { opacity: .85; }
/* A long group's healthy servers, folded into one row. */
.snfold {
  appearance: none; display: flex; align-items: center; gap: 7px; width: 100%; margin: 2px 0 4px; padding: 5px 8px;
  border: 1px dashed var(--border-2); border-radius: var(--r-xs); background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-align: left;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.snfold:hover { border-color: var(--ok-bd); color: var(--text); background: var(--ok-bg); }
.snfg { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--on-accent); font-size: 9.5px; font-weight: 800; }
.snfa { margin-left: auto; color: var(--accent); font-weight: 650; }

/* Search results in the menu. */
.snres { display: flex; flex-direction: column; gap: 1px; }
.snrg { margin: 10px 4px 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.snrg:first-child { margin-top: 2px; }
.snr {
  appearance: none; border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-s);
  font: inherit; color: var(--text-2);
  animation: snIn 220ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 18ms);
  transition: background var(--t), box-shadow var(--t);
}
.snr.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.snric { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--tone, var(--text-3)); }
.snric .dot { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--tone); color: var(--on-accent); font-size: 9.5px; font-weight: 800; }
.snrt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.snrl { font-size: 12.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snrs { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snr mark, .cmdk mark { background: var(--accent-bg); color: var(--accent); border-radius: 2px; box-shadow: inset 0 -1px 0 var(--accent-bd); padding: 0; }
.snhint { margin: 10px 6px 2px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.snempty { padding: 14px 6px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.sntips, .cmdktips { display: flex; flex-wrap: wrap; gap: 5px; }
.tipchip {
  appearance: none; border: 1px dashed var(--border-2); background: transparent; color: var(--text-2);
  border-radius: 999px; padding: 2px 9px; font-family: var(--mono); font-size: 11px; cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.tipchip:hover { border-style: solid; border-color: var(--accent-bd); color: var(--accent); background: var(--accent-bg); }

/* The foot of the menu: Configuration, Administration, and who is signed in. */
.snfoot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px 12px; border-top: 1px solid var(--hairline); background: var(--bg-2); }
.snfi {
  appearance: none; border: none; background: none; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.snfi .svgi { color: var(--text-3); transition: color var(--t), transform 300ms cubic-bezier(.2,.7,.3,1); }
.snfi:hover { background: var(--surface-1); color: var(--text); }
.snfi:hover .svgi { color: var(--accent); transform: rotate(-12deg); }
.snfi.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.snfi.on .svgi { color: var(--accent); }
.snme {
  appearance: none; border: 1px solid var(--border); background: var(--surface-1); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 6px 8px; border-radius: var(--r-s);
  font: inherit; color: var(--text-2); transition: border-color var(--t), background var(--t);
}
.snme:hover { border-color: var(--border-2); background: var(--surface-2); }
.avatar {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-2);
}
.avatar.r-admin { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bd); }
.avatar.r-operator { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.avatar.r-auditor { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.snmen { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snmen b { font-family: var(--mono); font-size: 11.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snmen .rolep { align-self: flex-start; }
/* CONTRACT-V11: folded, the foot is one row - who is signed in, the three pages as icons, and
   the chevron; unfolded, the chevron sits in the corner. */
.snfoot { position: relative; }
.snftog {
  appearance: none; border: none; background: none; cursor: pointer; flex: 0 0 auto;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs); color: var(--text-3);
  transition: background var(--t), color var(--t);
}
.snftog:hover { background: var(--surface-2); color: var(--text); }
.snftog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.snftog .exchev { color: inherit; }
.snftog .exchev.up { transform: rotate(-90deg); }
.snfoot:not(.folded):not(.compact) .snftog { position: absolute; top: 9px; right: 10px; z-index: 1; }
.snfoot.folded { flex-direction: row; align-items: center; gap: 2px; padding: 7px 8px 7px 10px; }
.snfoot.folded .snfi { width: 34px; height: 34px; padding: 0; justify-content: center; flex: 0 0 auto; }
.snfoot.folded .snfi.on { box-shadow: none; }
.snfoot.folded .snfl { display: none; }
.snfoot.folded .snme { order: -1; flex: 1 1 auto; min-width: 0; margin: 0 4px 0 0; padding: 4px 6px; gap: 7px; }
.snfoot.folded .snmen b { font-size: 11px; }
.snfoot.folded .snwho { order: -1; flex: 1 1 auto; min-width: 0; margin: 0 4px 0 0; overflow: hidden; }
.snfoot.folded .snwho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- folded: a rail of icons ---------------------------------------------- */

.sidenav.rail { width: 62px; overflow: visible; align-items: center; padding: 10px 0 0; gap: 4px; }
.railbtn {
  appearance: none; position: relative;
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform 200ms cubic-bezier(.2,.7,.3,1);
}
.railbtn:hover { background: var(--surface-2); color: var(--text); transform: scale(1.06); }
.railbtn.on { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bd); }
.railbtn.plat { color: var(--plat, var(--text-2)); }
.railbtn.plat.t-critical, .railbtn.plat.t-serious { color: var(--tone); }
.railbtn.dis { opacity: .35; cursor: default; }
.railbtn.dis:hover { transform: none; background: transparent; }
.railbtn.tog { color: var(--text-3); }
.railbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.railbadge {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border-2);
  font-family: var(--mono); font-size: 9.5px; font-weight: 800;
}
.railbadge.bad { background: var(--critical); color: var(--on-accent); border-color: var(--critical); animation: railPulse 2.4s ease-in-out infinite; }
@keyframes railPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--critical-bg); } 50% { box-shadow: 0 0 0 4px var(--critical-bg); } }
.railsep { width: 28px; height: 1px; background: var(--border); margin: 6px 0; flex: 0 0 auto; }
.railgrp { position: relative; }
.railgrp.later { opacity: .9; }
.sidenav.rail .snfoot { width: 100%; align-items: center; padding: 8px 0 10px; }
.snfoot.compact .snfi { width: 42px; height: 42px; padding: 0; justify-content: center; }
.snfoot.compact .snfl, .snfoot.compact .snmen { display: none; }
.snfoot.compact .snme { padding: 4px; justify-content: center; border-color: transparent; background: transparent; }

/* Hover an estate on the rail and its servers open beside it. */
.flyout {
  position: absolute; left: calc(100% + 8px); top: -6px; z-index: 60;
  width: 270px; max-height: 70vh; overflow-y: auto;
  padding: 8px; border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-1); box-shadow: var(--shadow);
  opacity: 0; transform: translateX(-8px) scale(.98); pointer-events: none; visibility: hidden;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.3,1), visibility 0s linear 220ms;
}
.flyout::before { content: ''; position: absolute; left: -10px; top: 0; width: 10px; height: 100%; }  /* bridge, so moving onto it keeps it open */
.railgrp:hover .flyout, .railgrp:focus-within .flyout {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.3,1), visibility 0s;
}
.flyt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.flyi {
  appearance: none; border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-s);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: background var(--t), color var(--t), transform 160ms ease;
}
.flyi:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.flyi.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 3px 0 0 var(--tone, var(--accent)); }
.flyi .dot { width: 15px; height: 15px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--tone); color: var(--on-accent); font-size: 9.5px; font-weight: 800; }
.flyi.est .svgi { color: var(--accent); }

@media (max-width: 900px) {
  .sidenav, .sidenav.rail { width: auto; }
  .sidenav.rail { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 6px 10px; height: auto; }
  .sidenav.rail .snfoot { width: auto; flex-direction: row; border-top: none; }
  .sidenav.rail .grow { display: none; }
  .flyout { left: 0; top: calc(100% + 6px); }
}

/* ---- the command palette ---------------------------------------------------- */

.scrim.palette { align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk {
  width: min(680px, calc(100vw - 32px)); max-height: 70vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface-1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 0 1px var(--accent-bg);
  overflow: hidden;
  animation: cmdkIn 200ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdkin { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--accent); }
.cmdkin input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.cmdkin input::placeholder { color: var(--text-3); }
.cmdktips { padding: 8px 16px; border-bottom: 1px solid var(--hairline); }
.cmdklist { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px 10px; }
.cmdkg { margin: 10px 8px 4px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cmdkr {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  animation: snIn 200ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 14ms);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.cmdkr.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.cmdkic { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--tone, var(--text-3)); border: 1px solid var(--border); }
.cmdkr.on .cmdkic { border-color: var(--accent-bd); }
.cmdkt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdkl { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdks { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdkent { color: var(--accent); border-color: var(--accent-bd); }
.cmdkempty { padding: 22px 12px; text-align: center; color: var(--text-2); font-size: 13px; }
.cmdkfoot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--sheen); font-size: 11px; color: var(--text-3); }
.cmdkfoot span { display: inline-flex; align-items: center; gap: 4px; }

/* ---- configuration ------------------------------------------------------------ */

.cfggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cfgitem {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2);
  transition: border-color var(--t), box-shadow var(--t);
}
.cfgitem.changed { border-color: var(--accent-bd); box-shadow: inset 3px 0 0 var(--accent); }
.cfgitem.bad { border-color: var(--critical-bd); box-shadow: inset 3px 0 0 var(--critical); }
.cfgh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfgh label, .cfgh .lbl { font-size: 13px; font-weight: 650; color: var(--text); }
.scopec { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--text-3); white-space: nowrap; }
.scopec.all { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.cfgin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfgin input[type="number"] {
  width: 96px; height: 32px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-1); color: var(--text);
  font-family: var(--mono); font-size: 14px; font-weight: 650;
}
.cfgin input[type="number"]:focus { outline: none; border-color: var(--accent-bd); box-shadow: 0 0 0 3px var(--accent-bg); }
.cfgin input:disabled { opacity: .7; }
.cfgin .unit { font-size: 12px; color: var(--text-3); }
.cfgd { font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.cfgerr { color: var(--critical); }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.segc { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-s); overflow: hidden; background: var(--surface-1); }
.segc button { appearance: none; border: none; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; transition: background var(--t), color var(--t); }
.segc button + button { border-left: 1px solid var(--border); }
.segc button:hover { color: var(--text); background: var(--surface-2); }
.segc button.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.excbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.excbar .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-right: 4px; }
.admtbl tr.unused td { opacity: .55; }
.admtbl td.effx { color: var(--accent); font-weight: 700; }
.savebar.sticky { position: sticky; bottom: 0; z-index: 5; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); box-shadow: var(--shadow); margin-top: 10px; }

/* An explicit "off" in Animation stills all of it. Auto keeps these short, click-caused
   movements, which Remote Desktop's reduced-motion signal would otherwise remove for everyone. */
:root[data-motion-pref="off"] .sidenav, :root[data-motion-pref="off"] .sidenav *,
:root[data-motion-pref="off"] .cmdk, :root[data-motion-pref="off"] .cmdk *,
:root[data-motion-pref="off"] .flyout, :root[data-motion-pref="off"] .searchtrig {
  transition: none !important; animation: none !important;
}
@media print { .searchtrig { display: none !important; } }

/* ---- CONTRACT-V8 4: the header in the menu view ---------------------------------------
   The menu carries search, every estate, Configuration and the signed-in user, so the
   header keeps only the brand and Live. Live never gives up its width to a neighbour. */
.livechk, .liveevery { flex-shrink: 0; }
.snme.mism { border-color: var(--warning-bd); background: var(--warning-bg); }
.snwarn { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--warning); white-space: nowrap; }
.snfoot .snwho { margin-top: 6px; max-width: 100%; }
.cfgwarn { color: var(--warning); }
.llmrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.llmrow .cfgd { flex: 1 1 260px; min-width: 0; }

/* ---- CONTRACT-V14: Configuration, compact -------------------------------------------------------
   A setting on one row: its name with what it does behind the i (a tooltip), the control and its
   presets, and Save right after them - nothing below it but a warning when there is one. */
.cfgdash { display: flex; flex-direction: column; gap: 12px; }
.cfgrow { display: grid; grid-template-columns: 172px minmax(0, max-content) auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--hairline); }
.cfgrow:last-of-type { border-bottom: 0; }
.cfgl { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cfgl label { font-size: 13px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfgi {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--text-3); font: italic 800 10px/1 Georgia, 'Times New Roman', serif; cursor: help;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.cfgi:hover, .cfgi:focus-visible { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); outline: none; }
.cfgc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cfgc input[type="number"] {
  width: 76px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-1); color: var(--text);
  font-family: var(--mono); font-size: 13px; font-weight: 650;
}
.cfgc input[type="number"]:focus { outline: none; border-color: var(--accent-bd); box-shadow: 0 0 0 3px var(--accent-bg); }
.cfgc input:disabled { opacity: .7; }
.cfgc .unit { font-size: 12px; color: var(--text-3); margin-left: -4px; }
.cfgc .presets .chip { height: 24px; }
.cfgs { display: flex; gap: 6px; }
.cfgn { grid-column: 2 / -1; font-size: 12px; color: var(--text-3); }
/* Two halves side by side - the settings, and the facts beside them - so the right is not left empty. */
.cfgsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 32px; align-items: start; }
@media (max-width: 1150px) { .cfgsplit { grid-template-columns: 1fr; } }
.facts.cfgfacts .row { justify-content: flex-start; align-items: center; min-height: 32px; padding: 4px 0; }
.facts.cfgfacts .k { flex: 0 0 96px; }
.facts.cfgfacts .v { text-align: left; font-family: var(--font); font-size: 12.5px; min-width: 0; }
.facts.cfgfacts .v .mono { font-family: var(--mono); font-size: 12px; }
/* The recorder: its two settings on the left, what it is doing on the right. */
.recgrid { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1150px) { .recgrid { grid-template-columns: 1fr; } }
.recset { display: flex; flex-direction: column; }
.recset .cfgrow { grid-template-columns: minmax(0, 1fr); row-gap: 7px; padding: 10px 2px; }
.recset .cfgn { grid-column: 1 / -1; }
.recsave { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 10px; }
.recmon { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.recmh { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.rectiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.rect { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); }
.rect .k { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rect b { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rect .s { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rect.t-ok b { color: var(--ok); }
.rect.t-warning { border-color: var(--warning-bd); }
.rect.t-warning b { color: var(--warning); }
.recverdict { font-size: 12.5px; line-height: 1.5; padding: 7px 10px; border-left: 3px solid var(--tone); background: var(--tone-bg); border-radius: 0 var(--r-xs) var(--r-xs) 0; color: var(--text); }
.recsug { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
.recsug span { flex: 1 1 auto; min-width: 0; }
.recsrv summary { cursor: pointer; font-size: 12px; color: var(--text-2); }
.recsl { display: flex; flex-direction: column; margin-top: 6px; max-height: 240px; overflow: auto; scrollbar-width: thin; border: 1px solid var(--hairline); border-radius: var(--r-xs); }
.recsr { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(5, minmax(56px, 1fr)); gap: 8px; align-items: center; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; color: var(--text-2); }
.recsr:last-child { border-bottom: 0; }
.recsr.head { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.recsr .n { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.recsr .n .svgi { color: var(--text-3); flex: 0 0 auto; }
.recsr .n i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--text-3); }
.recsr.bad { background: var(--critical-bg); }
.facts .v .cfgd { font-family: var(--font); margin-top: 4px; }
/* ---- CONTRACT-V8 5: the status line, on every section but the Overview -----------------
   The Overview keeps the full performance ribbon and health strip; everywhere else this one
   line stands in for them, so the section the reader asked for starts at the top. */
.sline {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  min-height: 42px; padding: 5px 12px 5px 6px; margin-bottom: 14px;
  border: 1px solid var(--tone-bd); border-left: 3px solid var(--tone); border-radius: var(--r);
  background: linear-gradient(90deg, var(--tone-bg), transparent 40%), var(--surface-1);
  font-size: 12.5px; color: var(--text-2);
}
.slst {
  appearance: none; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 5px; border-radius: var(--r-s);
  font: inherit; color: var(--text); transition: background var(--t);
}
.slst:hover { background: var(--surface-2); }
.slst:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.slic {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 6px; background: var(--tone); color: var(--on-accent); font-size: 12px; font-weight: 800;
}
.slst b { font-size: 14px; font-weight: 700; }
.slst .mono { font-size: 13px; font-weight: 700; color: var(--tone); }
.slst .mono i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.slsevs { display: inline-flex; gap: 6px; }
.slsev {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--tone-bd); background: var(--tone-bg); color: var(--tone);
  font: inherit; font-size: 11.5px; font-weight: 650; transition: border-color var(--t);
}
.slsev:hover { border-color: var(--tone); }
.slsev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.slok { color: var(--text-3); font-size: 12px; }
.slms { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding-left: 14px; border-left: 1px solid var(--hairline); }
.slm { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.slm .k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.slm b { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.slm.t-warning b { color: var(--warning); }
.slm.t-critical b { color: var(--critical); }
.slm .hmd { align-self: center; }
.slrib { flex: 1 1 180px; min-width: 0; text-align: right; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slgo { white-space: nowrap; font-weight: 650; }
.app.compact .sline { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }

/* ---- CONTRACT-V8 6: the tabs view, simplified ------------------------------------------
   One account button instead of seven header controls; one line per server tab; the
   sections directly under the server's name. */
.acct { position: relative; flex-shrink: 0; }
.acctbtn {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 2px 9px 2px 3px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t);
}
.acctbtn:hover, .acct.open .acctbtn { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.acctbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acctbtn.mism { border-color: var(--warning-bd); }
.avatar.sm { width: 25px; height: 25px; font-size: 10px; }
.acctn { font-family: var(--mono); font-size: 11.5px; font-weight: 650; color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.acctchev { display: inline-flex; color: var(--text-3); transform: rotate(90deg); transition: transform var(--t); }
.acct.open .acctchev { transform: rotate(-90deg); }
.acctmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 340px; max-width: calc(100vw - 24px); padding: 8px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); box-shadow: var(--shadow), 0 18px 40px rgba(0, 0, 0, .28);
  animation: acctIn 160ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes acctIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:root[data-motion-pref="off"] .acctmenu { animation: none; }
.accthead { display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px; }
.acctwho { flex: 1 1 auto; min-width: 0; }
.accth { font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accts { margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--text-3); }
.acctwarn { margin: 2px 6px 6px; padding: 6px 8px; border: 1px solid var(--warning-bd); border-radius: var(--r-s); background: var(--warning-bg); color: var(--warning); font-size: 11.5px; line-height: 1.45; }
.acctsep { height: 1px; margin: 6px 0; background: var(--hairline); }
.accti {
  appearance: none; border: none; background: none; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-s);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.accti .svgi, .acctrow .svgi { color: var(--text-3); }
.accti:hover, .accti:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }
.accti:hover .svgi { color: var(--accent); }
.acctd { font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.acctllm { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.acctllm .live { width: 6px; height: 6px; border-radius: 50%; background: var(--tone, var(--muted)); box-shadow: 0 0 0 3px var(--tone-bg, transparent); }
.acctrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.segc.sm button { padding: 4px 11px; font-size: 11.5px; }
.acctfoot { margin-top: 6px; padding: 8px 8px 2px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--text-3); }

/* Monitoring status: recorder, alert checks, notifications, and the pause switch - a button and
   dropdown built the same way as .acct/.acctmenu, so it reads as one family. */
.monstat { position: relative; flex-shrink: 0; }
.monstatbtn {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 650;
  cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t);
}
.monstatbtn:hover, .monstat.open .monstatbtn { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.monstatbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.monstatbtn.t-crit { border-color: var(--critical-bd); color: var(--critical); }
.monstatbtn.t-warn { border-color: var(--warning-bd); color: var(--warning); }
.mdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.mdot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.mdot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.mdot.crit, .mdot.bad { background: var(--critical); box-shadow: 0 0 0 3px var(--critical-bg); }
.monstatmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 300px; max-width: calc(100vw - 24px); padding: 8px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); box-shadow: var(--shadow), 0 18px 40px rgba(0, 0, 0, .28);
  animation: acctIn 160ms cubic-bezier(.2, .7, .3, 1) both;
}
:root[data-motion-pref="off"] .monstatmenu { animation: none; }
.monrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.monrow .mdot { margin-top: 1px; }

/* The unmissable banner while paused - every page, not just the widget that turned it on. */
.monbanner {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--warning-bg); border-bottom: 1px solid var(--warning-bd); color: var(--warning);
  font-size: 12.5px; font-weight: 650;
}
.monbanner .grow { font-weight: 600; }
.monbanner button { flex: none; }

/* The server strip: one line per tab, the filter and the add button at the end, and a thin
   scrollbar when there are more servers than fit (it was hidden, so they could not be found). */
.tabstrip.slim { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.tabstrip.slim .tabbtn { padding: 8px 13px 8px 11px; font-size: 12.5px; }
.tabstrip.slim > .grow { flex: 1 1 auto; min-width: 8px; }
.tabstrip.slim > .envbar { align-self: center; margin: 0 0 0 10px; padding: 0 0 0 10px; border-right: none; border-left: 1px solid var(--border); }
.tabstrip.slim > .tabadd { align-self: center; margin-left: 8px; padding: 5px 11px; border-bottom: 1px dashed var(--border-2); border-radius: var(--r-s); font-size: 12px; white-space: nowrap; }
.tcount {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-3);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.tcount.bad { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }
.snhead .snlay .svgi { transition: transform var(--t); }
.snhead .snlay:hover .svgi { transform: translateY(-1px); }
/* ---- CONTRACT-V8 7: the server's windows - Explain this server, Instance / Host ---------
   Opened from the health strip (Overview) or the status line (other sections), over the
   page, closed with the cross, Close, Escape or a click outside. */
.modal.win {
  max-width: 880px; max-height: calc(100vh - 12vh);
  display: flex; flex-direction: column;
}
.modal.win .winbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.modal.win .dfoot { flex: 0 0 auto; }
.winic {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--accent-bd); background: var(--accent-bg); color: var(--accent); font-size: 16px;
}
.winverdict {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px;
  border: 1px solid var(--tone-bd); border-left: 3px solid var(--tone); border-radius: var(--r-s);
  background: var(--tone-bg); font-size: 12.5px; color: var(--text-2);
}
.winverdict b { font-size: 14px; color: var(--text); }
.winverdict .mono { font-weight: 700; color: var(--tone); }
.winverdict .wvl { flex: 1 1 260px; min-width: 0; }
.explain.winex { margin-top: 0; padding: 14px 16px 15px; }
.explain.winex .body { font-size: 13.5px; }
.winattn { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--warning-bd); border-radius: var(--r-s); background: var(--warning-bg); }
.winattn .sprofst { margin: 0 0 6px; color: var(--warning); }
.winattn ul { margin: 0; padding-left: 18px; }
.winattn li { font-size: 12px; line-height: 1.55; color: var(--text); margin-bottom: 4px; }
.modal.win .sprofg { margin-top: 0; }
.modal.win .sprofe { margin-top: 0; }
.winbadge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; border: 1px solid var(--warning-bd); background: var(--warning-bg); color: var(--warning);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.btn.ready { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.btn.ready .sparkle { color: var(--accent); }
.hchips .btn .svgi, .slacts .btn .svgi { margin-right: 2px; }
.slacts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ovfull { display: block; }

/* The environment filter on the tabs strip reads as one segmented control - the same shape
   as the tabs it filters - with Group as a separate toggle beside it. */
.tabstrip.slim > .envbar { gap: 0; }
.tabstrip.slim > .envbar .k { margin-right: 8px; }
.tabstrip.slim > .envbar .envchip { height: 26px; margin-left: -1px; border-radius: 0; }
.tabstrip.slim > .envbar .envchip:first-of-type { margin-left: 0; border-radius: var(--r-s) 0 0 var(--r-s); }
.tabstrip.slim > .envbar .envchip:nth-last-child(2) { border-radius: 0 var(--r-s) var(--r-s) 0; }
.tabstrip.slim > .envbar .envchip.on { position: relative; z-index: 1; }
.tabstrip.slim > .envbar .envgroup { height: 26px; margin-left: 8px; border-radius: var(--r-s); }
/* CONTRACT-V8 7, as moved: the Instance and Explain buttons sit beside the server's name,
   on every section, instead of in the health strip and again in the status line. */
.cmdtitle { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.cmdwins { display: inline-flex; align-items: center; gap: 6px; }
.cmdwins .btn .svgi { margin-right: 1px; }
/* ---- CONTRACT-V9: performance charts ---------------------------------------------------
   Trends (time charts that slide while Live feeds them), Patterns (job timeline and heat
   maps), and the small lines inside the Overview's key-metric tiles. */
.pctools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcstatus { display: flex; align-items: center; gap: 7px; min-height: 16px; margin: -2px 0 12px; font-size: 12px; color: var(--text-3); }
.pcinvestigate { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

/* The Timeline panel: a draggable brush selection (.tlsel) with two resize handles over a wider
   context track (.tltrack), tick marks below it, and a Live pill that pins the selection to now. */
.tlbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tllivebtn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 2px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.tllivebtn:hover { border-color: var(--border-2); color: var(--text); }
.tllivebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tllivebtn.on { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok); }
.tllivebtn.on .ldot { background: var(--ok); }
/* The Timeline window: its header and the slider stay put, and everything under them scrolls
   inside the window - with a scrollbar you can actually see, unlike the thin dark default. The
   window fits the screen, so the backdrop itself never needs a scrollbar of its own. */
.modal.win.tlwin { max-width: 1120px; width: calc(100vw - 40px); height: calc(100vh - 12vh); }
.tlwin .tltop { flex: 0 0 auto; padding: 12px 18px 4px; border-bottom: 1px solid var(--hairline); }
.tlwin .tlbody { scrollbar-width: auto; scrollbar-color: var(--text-3) var(--surface-2); transition: opacity .15s; }
.tlwin .tlbody::-webkit-scrollbar { width: 14px; }
.tlwin .tlbody::-webkit-scrollbar-track { background: var(--surface-2); }
.tlwin .tlbody::-webkit-scrollbar-thumb { background: var(--text-3); border: 3px solid var(--surface-2); border-radius: 8px; }
.tlwin .tlbody.tlstale { opacity: .55; }
.tlbarl { font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.tlscrub { margin-bottom: 8px; user-select: none; }
/* The track's map, clipped to its rounded box: stripes where nothing was recorded, and a
   coloured edge along the top wherever an alert was open (the worst one, where several were). */
.tllayer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.tlgap {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-3) 30%, transparent) 0 3px, transparent 3px 8px);
}
.tlmark { position: absolute; top: 0; height: 6px; background: var(--tone); }
.tlnowtag { position: absolute; right: 0; bottom: -20px; font: 700 10.5px var(--mono); color: var(--ok); pointer-events: none; }
.tlkey { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tlkey i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; border: 1px solid var(--border); }
.tlkey-gap { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-3) 45%, transparent) 0 3px, transparent 3px 7px), var(--surface-1); }
.tlkey-alert { background: linear-gradient(180deg, var(--critical) 0 4px, var(--surface-1) 4px); }
.tlmore { margin-top: 8px; }
.tlempty { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border: 1px dashed var(--border-2); border-radius: var(--r-s); background: var(--surface-2); }
.tltrack {
  position: relative; height: 56px; margin: 4px 12px 26px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3);
  cursor: pointer; touch-action: none;
}
.tltrack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tltick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); pointer-events: none; }
.tltickl {
  position: absolute; bottom: -20px; left: 4px; font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; font-family: var(--mono);
}
/* The selection: a glossy, raised bar - not a flat tint - so it reads as something you pick up
   and move, not just a highlighted range. */
.tlsel {
  position: absolute; top: 3px; bottom: 3px; min-width: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 45%), var(--accent);
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 5px rgba(0, 0, 0, .28);
  cursor: grab;
  transition: box-shadow .15s var(--ease);
}
.tlsel.dragging { cursor: grabbing; }
/* The same "these three lines mean drag me" affordance the edge handles use, repeated in
   the middle of the bar itself - so the bar reads as one big handle, not just a highlight
   you have to already know is draggable. */
.tlgrip {
  position: absolute; top: 50%; left: 50%; width: 2px; height: 13px;
  transform: translate(-6px, -50%); border-radius: 1px; background: rgba(255, 255, 255, .75);
  box-shadow: 4px 0 0 rgba(255, 255, 255, .75), 8px 0 0 rgba(255, 255, 255, .75);
  pointer-events: none;
}
.tlhint { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin: 0 0 10px; font-size: 11.5px; color: var(--text-2); }
/* The handles: a distinct 3D knob at each edge, taller than the track so it visibly "pops out"
   top and bottom - the part of a physical slider your thumb actually looks for. */
.tlhandle {
  position: absolute; top: 50%; width: 18px; height: 64px; transform: translateY(-50%);
  border-radius: 9px; z-index: 2; cursor: ew-resize;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), var(--surface-2);
  border: 1px solid var(--border-2);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.tlhandle:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 50%), var(--surface-3); }
.tlhandle.left { left: -9px; }
.tlhandle.right { right: -9px; }
/* While a drag is actually moving, every frame repaints whatever is under the pointer - so this
   is the one moment to trade the glossy look for flat colour and a single plain shadow. Matters
   most over a remote desktop session, where a gradient + multi-layer shadow repainted on every
   frame of a fast drag can fall badly behind and read as the page having frozen or gone blank.
   The 3D look is restored the instant the gesture ends (dragging is removed, not held). */
.tltrack.dragging .tlsel {
  background: var(--accent); box-shadow: 0 2px 5px rgba(0, 0, 0, .35); transition: none;
}
.tltrack.dragging .tlhandle {
  background: var(--surface-2); box-shadow: 0 2px 5px rgba(0, 0, 0, .4); transition: none;
}
.tlhandle::after {
  /* Three short grip lines, drawn from one pseudo-element with two extra box-shadow copies -
     the universal "drag me" affordance. */
  content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 16px;
  transform: translate(-6px, -50%); border-radius: 1px; background: var(--text-3);
  box-shadow: 4px 0 0 var(--text-3), 8px 0 0 var(--text-3);
}
/* The hover preview: a thin guide and a floating readout, shown while the pointer is over the
   track but not dragging - so you can aim before you commit to a click or a drag. */
.tlhoverline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .45); pointer-events: none; z-index: 3; }
.tlhovertip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: var(--shadow);
  font: 600 11px var(--mono); color: var(--text);
}
.tlfoot { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11.5px; }
/* The readout: a recessed "digital display" pill, not plain text - the one number on this
   control that must always read clearly and precisely. */
.tlrange {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 999px;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .35);
  color: var(--text); font-weight: 700; font-size: 13px; letter-spacing: .01em;
}
.tlrange b { color: var(--accent); font-weight: 700; }
.pcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.pc { min-width: 0; padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.pch { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pct { font-size: 12.5px; font-weight: 650; color: var(--text); cursor: help; }
.pcv { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pcv2 { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pclive { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
:root[data-motion="on"] .pclive { animation: sqlmon-beat 1.7s ease-in-out infinite; }
.pcl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 11px; color: var(--text-3); }
.pcl span { display: inline-flex; align-items: center; gap: 6px; }
.pcl .sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.pcl .sw.dash { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%); mask-image: linear-gradient(90deg, #000 50%, transparent 50%); -webkit-mask-size: 5px 3px; mask-size: 5px 3px; }
.pcempty { padding: 26px 16px 22px; border: 1px dashed var(--border-2); border-radius: var(--r-s); background: var(--surface-1); text-align: center; }
.pcet { margin-bottom: 6px; font-size: 15px; font-weight: 650; color: var(--text); }
.pceh { max-width: 640px; margin: 0 auto 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

.tc { position: relative; width: 100%; min-width: 0; }
.tc > svg.tcs { display: block; overflow: visible; }
.tc-plot { overflow: hidden; }
.tc-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--r-xs); font-size: 12px; color: var(--text-3); }
.tc-empty.compact { border: none; }
.tc-grid { stroke: var(--hairline); stroke-width: 1; }
.tc-yl, .tc-xl { fill: var(--text-3); font-family: var(--mono); font-size: 10px; }
.tc-unit { fill: var(--text-3); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
.tc-limit line { stroke-width: 1; stroke-dasharray: 4 4; opacity: .75; }
.tc-limit text { stroke: none; font-size: 9.5px; font-weight: 700; opacity: .9; }
.tc-area { stroke: none; fill-opacity: .14; }
.tc-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tc-line.thin { stroke-width: 1.4; }
.tc-line.dash { stroke-width: 1.4; stroke-dasharray: 5 4; }
.tc-dot { stroke: var(--surface-2); stroke-width: 1; }
.tc-head { stroke: var(--surface-2); stroke-width: 1.5; }
.tc-peak text { font-family: var(--mono); font-size: 10.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.tc-cross line { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; }
.tc-cross circle { stroke: var(--surface-2); stroke-width: 1.5; }
.tc-hit { fill: transparent; cursor: crosshair; }
.tc-tip { position: absolute; z-index: 5; min-width: 150px; max-width: 220px; padding: 7px 9px; pointer-events: none;
          border: 1px solid var(--border-2); border-radius: var(--r-xs); background: var(--surface-3); box-shadow: var(--shadow); font-size: 11.5px; }
.tc-tipt { margin-bottom: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.tc-tipr { display: flex; align-items: center; gap: 7px; color: var(--text-2); }
.tc-tipr b { font-family: var(--mono); color: var(--text); }
.tc-tipr .sw { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
/* The slide: the new poll's width, over the poll's own interval. Only when the page may move
   (data-motion is "on" while Live feeds, even inside Remote Desktop) and only for a poll that
   really arrived - the chart re-keys the group per newest sample. */
@keyframes tcSlide { from { transform: translateX(var(--tc-shift, 0px)); } to { transform: translateX(0); } }
@keyframes tcHead { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
:root[data-motion="on"] .tc-stream { animation: tcSlide var(--tc-dur, 5s) linear both; }
:root[data-motion="on"] .tc.islive .tc-head { animation: tcHead 1.6s ease-in-out infinite; }

.hmap { width: 100%; min-width: 0; }
.hmap svg { display: block; }
.hmap-empty { padding: 14px 0; font-size: 12px; color: var(--text-3); }
.hmap-rl { fill: var(--text-2); font-size: 10.5px; }
.hmap-cl { fill: var(--text-3); font-family: var(--mono); font-size: 9.5px; }
.hmap-c.none { fill: var(--surface-3); opacity: .55; }
.hmap-c:hover { stroke: var(--text); stroke-width: 1; }
.hmap-legend { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.hmap-ramp { width: 90px; height: 8px; border-radius: 4px; background: var(--hmap-tone, var(--accent));
             -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 1)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 1)); }

.jt { width: 100%; min-width: 0; }
.jt svg { display: block; }
.jt-empty { padding: 14px 0; font-size: 12px; color: var(--text-3); }
.jt-grid { stroke: var(--hairline); stroke-width: 1; }
.jt-name { fill: var(--text-2); font-size: 11px; }
.jt-lane { fill: var(--surface-1); }
.jt-run { fill-opacity: .9; }
.jt-run:hover { fill-opacity: 1; stroke: var(--text); stroke-width: 1; }
.jt-run.running { fill-opacity: .6; }
:root[data-motion="on"] .jt-run.running { animation: tcHead 1.6s ease-in-out infinite; }
.jt-now { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; }

.pat { margin-bottom: 20px; }
.pat:last-child { margin-bottom: 0; }
.path { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.patt { font-size: 12.5px; font-weight: 650; color: var(--text); }
.pats { font-size: 11.5px; color: var(--text-3); }

.hmspark { height: 26px; margin-top: 6px; }

/* ---- CONTRACT-V9: alerts - one row each, the action first --------------------------------
   Folded, a row says what is wrong, what to do, and the number; open, it adds why it
   matters and the limit, with Explain, the section, and the message a notification would send. */
.sevgroup > h3 .sevmean { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.alrlist { display: flex; flex-direction: column; gap: 6px; }
.alr { border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: var(--r-s); background: var(--surface-2);
       transition: border-color var(--t), background var(--t); }
.alr:hover, .alr.open { border-color: var(--tone-bd); border-left-color: var(--tone); }
.alr.open { background: var(--surface-1); }
.alrhead { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: none; background: none;
           font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.alrhead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alrsev { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--tone); color: var(--on-accent); font-size: 11px; font-weight: 800; }
.alrmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alrt { font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.alrdo { overflow: hidden; font-size: 12px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.alrdo b { margin-right: 7px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.alr.open .alrdo { display: none; }
.alrside { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.alrnow { display: inline-flex; align-items: baseline; gap: 6px; max-width: 240px; font-size: 12px; }
.alrnow .k { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.alrnow b { overflow: hidden; font-family: var(--mono); font-weight: 700; color: var(--tone); white-space: nowrap; text-overflow: ellipsis; }
.alrcat { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.alrchev { display: inline-flex; color: var(--text-3); transition: transform var(--t); }
.alrchev.open { transform: rotate(90deg); }
.alrbody { display: flex; flex-direction: column; gap: 8px; padding: 2px 14px 12px 46px; }
.alrrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 12.5px; line-height: 1.55; }
.alrrow .k { padding-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.alrrow .alrv { color: var(--text-2); }
.alrrow.do { margin-left: -10px; padding: 8px 10px; border: 1px solid var(--accent-bd); border-radius: var(--r-xs); background: var(--accent-bg); }
.alrrow.do .k { color: var(--accent); }
.alrrow.do .alrv { color: var(--text); }
.alrnowv { color: var(--tone); }
.alracts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.alracts .explain { flex: 1 1 100%; }
@media (max-width: 900px) {
  .alrcat { display: none; }
  .alrrow { grid-template-columns: 1fr; gap: 2px; }
  .alrbody { padding-left: 14px; }
}


/* ---- CONTRACT-V9: alerts as an incident list ---------------------------------------------
   One row per alert on a five-column grid: severity, the alert with its next step, the area,
   the number against its limit, and the fold. Area filters on top; severity groups inside. */
.incs { display: flex; flex-direction: column; gap: 10px; }
.incbar { display: flex; flex-wrap: wrap; gap: 6px; }
.incchip { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
           border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2);
           font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
           transition: background var(--t), border-color var(--t), color var(--t); }
.incchip b { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.incchip:hover { border-color: var(--border-2); color: var(--text); }
.incchip.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.incchip.on b { color: var(--text-2); }
.incchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.incchip.static { cursor: default; height: 22px; padding: 0 9px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; background: transparent; }
.incchip.static:hover { border-color: var(--border); color: var(--text-2); }

.inctable { border: 1px solid var(--border); border-radius: var(--r-s); overflow: hidden; background: var(--surface-1); }
.inchead, .incrow { display: grid; grid-template-columns: 118px minmax(0, 1fr) 150px 190px 22px; gap: 14px; align-items: center; }
.inchead { padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
           font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.incgh { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-bottom: 1px solid var(--hairline);
         background: linear-gradient(90deg, var(--tone-bg), transparent 55%); font-size: 11px; }
.incgh .dotsev { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px var(--tone-bg); }
.incght { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.incgh .sevmean { color: var(--text-3); font-weight: 600; }
.incgh b { font-family: var(--mono); color: var(--text-2); }

.inc { border-bottom: 1px solid var(--hairline); box-shadow: inset 3px 0 0 var(--tone); transition: background var(--t); }
.incgroup:last-child .inc:last-child { border-bottom: none; }
.inc:hover { background: var(--surface-2); }
.inc.open { background: var(--surface-2); }
.incrow { appearance: none; width: 100%; padding: 10px 14px; border: none; background: none; font: inherit; color: var(--text);
          text-align: left; cursor: pointer; }
.incrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.incpill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 6px; border-radius: 999px;
           border: 1px solid var(--tone-bd); background: var(--tone-bg); color: var(--tone);
           font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.incpill .ic { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--tone); color: var(--on-accent); font-size: 9px; }
.incmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inct { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--text); }
.incnext { overflow: hidden; font-size: 12px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.incnext .arr { margin-right: 6px; color: var(--accent); font-weight: 800; }
.inc.open .incnext { white-space: normal; }
.incarea { min-width: 0; }
.incnow { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.incnow b { overflow: hidden; font-family: var(--mono); font-weight: 700; color: var(--tone); white-space: nowrap; text-overflow: ellipsis; }
.inclim { overflow: hidden; font-size: 11px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.incchev { display: inline-flex; justify-content: center; color: var(--text-3); transition: transform var(--t); }
.incchev.open { transform: rotate(90deg); }

.incdetail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px 22px; padding: 2px 14px 14px 146px; }
.incdo { padding: 10px 12px; border: 1px solid var(--accent-bd); border-radius: var(--r-xs); background: var(--accent-bg); }
.incdo .k, .incwhy .k { margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.incwhy .k { color: var(--text-3); }
.inclead { font-size: 13px; font-weight: 650; line-height: 1.5; color: var(--text); }
.increst { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.incv { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.incfacts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.incfacts span { display: inline-flex; align-items: baseline; gap: 6px; }
.incfacts i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.incfacts b { color: var(--tone); }
.incacts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.incacts .explain { flex: 1 1 100%; }
@media (max-width: 1100px) {
  .inchead, .incrow { grid-template-columns: 104px minmax(0, 1fr) 150px 22px; }
  .inchead span:nth-child(3), .incarea { display: none; }
  .incdetail { grid-template-columns: 1fr; padding-left: 14px; }
}

/* The Performance charts that come from the collections rather than the recorder. */
.pc.fromhist { background: var(--surface-1); }
.pcsrc { padding: 0 7px; border: 1px dashed var(--border-2); border-radius: 999px; font-size: 9.5px; font-weight: 700;
         letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* ---- The Ekalix logo (CONTRACT-V11 §20) ------------------------------------------------
   The logotype is text: "ekalix" in Space Grotesk Bold ('Ekalix Wordmark'), bundled in
   web\fonts and cut to its six letters. Chosen on 28 Sep 2026 for its two-storey a - Comfortaa's
   round a read as a q - and its crisp, engineered k and x. Its own weight is enough: no stroke,
   no extra gap after the e (the span stays, for the markup the tests know).
   --logo is the text colour, deep navy on Daylight. */
:root { --logo: var(--text); }
:root[data-theme="daylight"] { --logo: #0d1733; }
.wordmark {
  display: inline-block;
  font-family: 'Ekalix Wordmark', var(--font);
  font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: .005em;
  color: var(--logo); white-space: nowrap; font-kerning: normal; user-select: none;
}
.wordmark .wm-e { margin-right: 0; }
.boot-logo { display: grid; place-items: center; color: var(--logo); margin: 0 0 4px; }
.boot-logo .wordmark { font-size: 46px; }
/* The slogan lives on the loading screen only; the header carries the logo alone. The left
   padding matches the letter-spacing after the last letter, so the line centres truly. */
.boot-sl {
  margin: 7px 0 12px; padding-left: .34em;
  font-family: var(--font);
  font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--accent);
}
/* ========================================================================
   Audit servers  (CONTRACT-V10)

   The scanner is an instrument, not a page: a dark phosphor screen in every theme, like the
   radar it borrows from - a sweep, one blip per server in its kind's colour, a digital
   counter, a row of LEDs and a ticker of what just landed. It moves only while a run is
   going and follows only an explicit Animation: Off, because the run is the reader's own
   click (the same rule as the menu's movement, CONTRACT-V8).
   ======================================================================== */
:root {
  --aud-db: var(--accent); --aud-app: var(--accent-2); --aud-bk: #e879f9; --aud-inf: var(--ok);
  --aud-mon: #2dd4bf; --aud-file: #cbd5e1; --aud-virt: var(--text-3); --aud-none: var(--muted);
  --aud-scr: #03101a; --aud-phos: #38bdf8; --aud-ink: #d8f1ff;
}
:root[data-theme="daylight"] { --aud-bk: #a21caf; --aud-mon: #0f766e; --aud-file: #475569; }
:root[data-theme="maroon"] { --aud-scr: #16070b; --aud-phos: #e9c27f; --aud-ink: #fbeee0; }
:root[data-theme="aurora"] { --aud-scr: #070f1c; --aud-phos: #b39dff; --aud-ink: #ece8ff; }
.ak-database { --k: var(--aud-db); } .ak-application { --k: var(--aud-app); } .ak-backup { --k: var(--aud-bk); }
.ak-infrastructure { --k: var(--aud-inf); } .ak-monitoring { --k: var(--aud-mon); } .ak-file { --k: var(--aud-file); }
.ak-virtual { --k: var(--aud-virt); } .ak-none { --k: var(--aud-none); } .ak-agent { --k: var(--text-2); }

.modal.win.wide { max-width: 1320px; width: calc(100vw - 40px); }
.tabadd.audbtn { display: inline-flex; align-items: center; gap: 5px; }

/* ---- the scanner ---- */
.aud-scan {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 16px 22px; margin: 0 0 14px; border-radius: var(--r); color: var(--aud-ink);
  border: 1px solid color-mix(in srgb, var(--aud-phos) 38%, transparent);
  background:
    radial-gradient(120% 150% at 12% 50%, color-mix(in srgb, var(--aud-phos) 12%, transparent), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 3px),
    linear-gradient(color-mix(in srgb, var(--aud-phos) 5%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--aud-phos) 5%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--aud-scr);
  box-shadow: inset 0 0 46px rgba(0,0,0,.6), 0 0 22px color-mix(in srgb, var(--aud-phos) 10%, transparent);
}
.aud-scan::after {
  content: ''; position: absolute; left: 0; right: 0; top: -60px; height: 60px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--aud-phos) 9%, transparent), transparent);
}
.aud-radar { position: relative; width: 206px; height: 206px; border-radius: 50%; }
.aud-rsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aud-ring { fill: none; stroke: var(--aud-phos); stroke-opacity: .24; stroke-width: .8; }
.aud-ring.out { stroke-opacity: .6; stroke-width: 1.3; filter: drop-shadow(0 0 3px var(--aud-phos)); }
.aud-cross { stroke: var(--aud-phos); stroke-opacity: .2; stroke-width: .6; stroke-dasharray: 2 3; }
.aud-tick { stroke: var(--aud-phos); stroke-opacity: .5; stroke-width: .8; }
.aud-sweep {
  position: absolute; inset: 5%; border-radius: 50%; opacity: 0; transition: opacity 400ms ease;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg,
              color-mix(in srgb, var(--aud-phos) 12%, transparent) 318deg,
              color-mix(in srgb, var(--aud-phos) 50%, transparent) 357deg, var(--aud-ink) 360deg);
}
.aud-scan.on .aud-sweep { opacity: .9; }
.aud-hub { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--aud-phos); box-shadow: 0 0 12px var(--aud-phos); }
.aud-blip .aud-dot { fill: var(--k); opacity: .45; transform-box: fill-box; transform-origin: center; }
.aud-blip.lit .aud-dot { opacity: 1; filter: drop-shadow(0 0 3px var(--k)); }
.aud-blip.fail .aud-dot { fill: var(--muted); opacity: .9; }
.aud-blip.busy .aud-dot { fill: var(--aud-ink); opacity: 1; }
.aud-blip .aud-ping { fill: none; stroke: var(--k); stroke-width: 1.1; opacity: 0; transform-box: fill-box; transform-origin: center; }

.aud-read { min-width: 0; }
.aud-phase { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--aud-phos); }
.aud-caret { display: inline-block; width: .62em; height: 1.05em; margin-left: 7px; vertical-align: -2px; background: var(--aud-phos); box-shadow: 0 0 8px var(--aud-phos); }
.aud-count { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.aud-digits {
  font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: 4px; color: var(--aud-ink);
  text-shadow: 0 0 8px var(--aud-phos), 0 0 22px color-mix(in srgb, var(--aud-phos) 55%, transparent);
}
.aud-of { font-size: 17px; letter-spacing: 3px; color: color-mix(in srgb, var(--aud-ink) 60%, transparent); text-transform: uppercase; }
.aud-leds { position: relative; display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; height: 11px; max-width: 470px; margin: 10px 0 7px; }
.aud-leds > span { border-radius: 2px; background: color-mix(in srgb, var(--aud-phos) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aud-phos) 14%, transparent); }
.aud-leds > span.lit { background: var(--aud-phos); box-shadow: 0 0 7px var(--aud-phos); }
.aud-kitt { position: absolute; top: -1px; bottom: -1px; left: 0; width: 16%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--aud-phos), transparent); box-shadow: 0 0 14px var(--aud-phos); }
.aud-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: color-mix(in srgb, var(--aud-ink) 62%, transparent); }
.aud-feed { list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; max-height: 112px; overflow: hidden; }
.aud-feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--aud-ink) 58%, transparent); }
.aud-feed li:nth-child(n+3) { opacity: .72; } .aud-feed li:nth-child(n+5) { opacity: .45; }
.aud-feed li.new { color: var(--aud-ink); }
.aud-feed li.t-ok .aud-tl::first-letter { color: var(--ok); }
.aud-feed li.t-warning .aud-tl { color: color-mix(in srgb, var(--warning) 80%, var(--aud-ink)); }
.aud-tl { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

@keyframes aud-spin { to { transform: rotate(360deg); } }
@keyframes aud-scanline { from { top: -60px; } to { top: 100%; } }
@keyframes aud-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.8); } 100% { transform: scale(1); } }
@keyframes aud-ping { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes aud-busy { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes aud-blink { 50% { opacity: 0; } }
@keyframes aud-kitt { 0%, 100% { left: 0; } 50% { left: 84%; } }
@keyframes aud-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aud-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .82; } 96% { opacity: 1; } }
:root:not([data-motion-pref="off"]) .aud-scan.on .aud-sweep { animation: aud-spin 2.6s linear infinite; }
:root:not([data-motion-pref="off"]) .aud-scan.on::after { animation: aud-scanline 3.4s linear infinite; }
:root:not([data-motion-pref="off"]) .aud-scan.on .aud-digits { animation: aud-flicker 4s linear infinite; }
:root:not([data-motion-pref="off"]) .aud-blip .aud-dot { animation: aud-pop .55s cubic-bezier(.2,.8,.3,1.3) both; animation-delay: var(--dl, 0ms); }
:root:not([data-motion-pref="off"]) .aud-blip.lit .aud-ping { animation: aud-ping 1.5s ease-out 1 both; animation-delay: var(--dl, 0ms); }
:root:not([data-motion-pref="off"]) .aud-blip.busy .aud-dot { animation: aud-busy .8s ease-in-out infinite; }
:root:not([data-motion-pref="off"]) .aud-scan.on .aud-caret { animation: aud-blink 1s steps(1) infinite; }
:root:not([data-motion-pref="off"]) .aud-scan.on .aud-kitt { animation: aud-kitt 1.7s ease-in-out infinite; }
:root:not([data-motion-pref="off"]) .aud-feed li.new .aud-tl { animation: aud-type .7s steps(30) both; }

/* ---- the summary ---- */
.aud-last { display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); font-size: 12px; color: var(--text-2); }
.aud-last .svgi { color: var(--accent); flex: 0 0 auto; }
.aud-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.aud-kc {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 108px; padding: 8px 12px 9px;
  border: 1px solid var(--border); border-top: 3px solid var(--k); border-radius: var(--r-s); background: var(--surface-1);
  color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: background var(--t), border-color var(--t), transform var(--t);
}
.aud-kc:hover { background: var(--surface-2); transform: translateY(-1px); }
.aud-kc.on { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, var(--surface-1)); }
.aud-kn { font-family: var(--mono); font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.aud-kl { font-size: 11px; font-weight: 650; }
.aud-engines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.aud-engines > .dim { margin-right: 4px; }
.aud-eng { appearance: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.aud-eng b { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.aud-eng.zero b { color: var(--text-3); }
.aud-eng:hover { border-color: var(--accent-bd); color: var(--text); }
.aud-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 14px; margin: 0 0 12px; border: 1px solid var(--accent-bd); border-radius: var(--r-s); background: var(--accent-bg); font-size: 12.5px; }
.aud-ctaic { color: var(--accent); font-size: 18px; }
.aud-confirm { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--warning-bd); border-radius: var(--r-s); background: var(--warning-bg); }
.aud-cftxt { display: flex; flex-direction: column; gap: 3px; max-width: 760px; font-size: 12px; color: var(--text-2); }
.aud-cftxt b { font-size: 13px; color: var(--text); }
.aud-cfact { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ---- the tools and the tables ---- */
.aud-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.aud-search { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 220px; max-width: 400px; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); color: var(--text-3); }
.aud-search:focus-within { border-color: var(--accent-bd); }
.aud-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; }
.aud-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; font-size: 11.5px; color: var(--text-3); }
.aud-tblwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-s); }
.aud-tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.aud-tbl td { vertical-align: top; }
.aud-row { cursor: pointer; }
.aud-row.open td { background: var(--accent-bg); }
.aud-row.faded td { opacity: .6; }
.aud-srv { min-width: 190px; }
.aud-nm { display: flex; align-items: center; gap: 6px; }
.aud-nm b { font-family: var(--mono); font-size: 12px; color: var(--text); }
.aud-desc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-style: italic; color: var(--text-2); }
.aud-what { min-width: 200px; }
.aud-kind { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.aud-kind i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 20%, transparent); }
.aud-conf { display: inline-block; margin: 3px 0 0 6px; padding: 1px 7px; border: 1px solid var(--border-2); border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); vertical-align: middle; }
.aud-conf.conf { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }
.aud-conf.likely { color: var(--info); border-color: var(--info-bd); background: var(--info-bg); }
.aud-conf.hint { color: var(--text-3); border-style: dashed; }
.aud-sum span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 480px; color: var(--text-2); }
.aud-when { white-space: nowrap; font-size: 11.5px; }
.aud-ok { color: var(--ok); }
.aud-bad { color: var(--warning); }
.aud-in { white-space: nowrap; }
.aud-in-chip { display: inline-block; margin-right: 4px; padding: 1px 7px; border: 1px solid var(--accent-bd); border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: 10.5px; font-weight: 700; }
.aud-chev { color: var(--text-3); transition: transform var(--t); }
.aud-row.open .aud-chev { transform: rotate(90deg); }
.aud-empty { padding: 26px !important; text-align: center; color: var(--text-3); }

/* ---- one server opened ---- */
.aud-drow > td { padding: 0 !important; background: var(--surface-1); }
.aud-detail { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.25fr); gap: 20px; padding: 14px 16px 16px; border-left: 3px solid var(--accent); cursor: default; }
.aud-dh { margin: 4px 0 8px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.aud-dh:not(:first-child) { margin-top: 14px; }
.aud-roles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aud-rl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text); }
.aud-rl i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.aud-rl .aud-conf { margin-top: 0; }
.aud-meter { flex: 0 0 72px; height: 5px; margin-left: auto; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.aud-meter span { display: block; height: 100%; background: var(--k); }
.aud-ev { margin: 5px 0 0 15px; padding: 0; font-size: 11.5px; color: var(--text-2); }
.aud-ev li { margin: 2px 0; }
.aud-none { margin: 0; }
.aud-finds, .aud-flist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.aud-finds li, .aud-flist li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border: 1px solid var(--tone-bd); border-radius: var(--r-xs); background: var(--tone-bg); font-size: 12px; color: var(--text); }
.aud-finds .ic, .aud-flist .ic { flex: 0 0 auto; font-weight: 800; color: var(--tone); }
.aud-flist b { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; }
.aud-mini { width: 100%; margin: 0 0 4px; }
.aud-bind { max-width: 340px; word-break: break-all; font-size: 11px; }
.aud-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.aud-port { padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font-family: var(--mono); font-size: 10.5px; color: var(--text-2); }
.aud-port b { color: var(--text); }
.aud-port.off { border-style: dashed; color: var(--text-3); }
.aud-list { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: var(--text-2); }
.aud-list li { margin: 2px 0; }
.aud-list b { color: var(--text); font-weight: 600; }
.aud-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; font-size: 12px; }
.aud-fr { display: contents; }
.aud-facts dt { color: var(--text-3); }
.aud-facts dd { margin: 0; color: var(--text); word-break: break-word; }
.aud-dacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aud-added { font-size: 11.5px; font-weight: 700; color: var(--ok); }

@media (max-width: 900px) {
  .aud-detail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .aud-scan { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .aud-count { justify-content: center; }
  .aud-leds { margin-left: auto; margin-right: auto; width: 100%; }
}
/* ---- adding audited servers to an estate (CONTRACT-V10) ---- */
.aud-addbtn { padding: 2px 9px; font-size: 11px; font-weight: 700; color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); white-space: nowrap; }
.aud-addbtn:hover:not(:disabled) { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.aud-addbtn.bad { color: var(--warning); border-color: var(--warning-bd); background: var(--warning-bg); }
.aud-addwrap { position: relative; display: inline-flex; }
.aud-addmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 330px; padding: 6px;
  border: 1px solid var(--border-2); border-radius: var(--r-s); background: var(--surface-2); box-shadow: var(--shadow);
}
.aud-addmenu button {
  appearance: none; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-2); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.aud-addmenu button b { color: var(--text); font-size: 12.5px; }
.aud-addmenu button:hover, .aud-addmenu button:focus-visible { background: var(--accent-bg); outline: none; }
.aud-addnote { padding: 6px 10px 4px; border-top: 1px solid var(--hairline); margin-top: 4px; font-size: 11px; color: var(--text-3); }
.aud-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 10px;
  border: 1px solid var(--accent-bd); border-radius: var(--r-s); background: var(--accent-bg); font-size: 12px; color: var(--text);
}
.aud-bulk.done { border-color: var(--ok-bd); background: var(--ok-bg); }
.aud-bulk.warn { border-color: var(--warning-bd); background: var(--warning-bg); }

/* ---- CONTRACT-V11: the database setup, the key, demo servers ------------------------------- */
.setupwrap { display: flex; justify-content: center; padding: 28px 16px 48px; }
.setupcard {
  width: 100%; max-width: 860px; padding: 22px 26px 24px;
  border: 1px solid var(--border-2); border-radius: var(--r-l, 12px); background: var(--surface);
}
.setuphead { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.setuphead.ok { color: var(--ok); }
.setupcard p { font-size: 13px; line-height: 1.55; color: var(--text); margin: 8px 0; }
.setupcard p.dim { color: var(--text-2); }
.setupwarn { padding: 10px 12px; border: 1px solid var(--warning-bd); border-radius: var(--r-s); background: var(--warning-bg); }
.setupstep { position: relative; margin-top: 16px; padding: 14px 16px 14px 48px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.setupnum {
  position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 750; color: var(--accent); border: 1px solid var(--accent-bd); background: var(--accent-bg);
}
.setupacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.setupstep .facts { margin-bottom: 10px; }
.suinline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.suinline input.m { width: 110px; }
.setupcard .field input[type="password"] + input, .setupcard .field input + input[type="password"] { margin-top: 6px; }
.setupcard .field input[type="file"] { font-size: 12px; color: var(--text-2); }
.keystate { font-size: 13px; padding: 8px 10px; margin-bottom: 10px; border-radius: var(--r-s); border: 1px solid var(--border); }
.keystate.t-ok { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }
.keystate.t-warning { color: var(--warning); border-color: var(--warning-bd); background: var(--warning-bg); }
.keystate.t-critical { color: var(--critical); border-color: var(--critical-bd); background: var(--critical-bg); }
.demob {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; border: 1px dashed var(--info-bd); color: var(--info);
  font-size: 9.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; flex: none;
}
/* ==== CONTRACT-V11 §19: the overview, answer first =======================================
   The verdict (ring, sentence, tally, what is fine, trend), then Fix first beside the vital
   signs and the systems board. Colour comes from the .t-<tone> classes like everything else;
   the type is the product's own (--font, --mono), the same as every other page. */
.cv-hero {
  display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr) minmax(200px, 260px); gap: 20px; align-items: center;
  margin-bottom: 14px; padding: 14px 20px; border-radius: var(--r); border: 1px solid var(--border);
  background: radial-gradient(420px 260px at 18% 50%, var(--tone-bg), transparent 75%), linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow);
}
@media (max-width: 1280px) { .cv-hero { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } .cv-trend { grid-column: 1 / -1; } }
@media (max-width: 760px) { .cv-hero { grid-template-columns: 1fr; } }
.cv-ringbox { min-width: 0; }
.cv-ring { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; overflow: visible; color: var(--accent); }
.cv-ring .cv-ticks { fill: none; stroke: var(--border-2); stroke-width: 5; stroke-dasharray: 1.2 5.71; }
.cv-ring .cv-track { fill: none; stroke: var(--border); stroke-width: 14; }
.cv-ring .cv-seg { fill: none; stroke: var(--tone); stroke-width: 14; cursor: pointer; outline: none;
  stroke-dasharray: var(--len) 800; animation: cvArc .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); transition: stroke-width .2s; }
.cv-ring .cv-seg.t-serious, .cv-ring .cv-seg.t-critical { animation: cvArc .9s cubic-bezier(.2, .7, .2, 1) both, cvGlow 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 90ms + 120ms), 1.4s; }
.cv-ring .cv-seg.hl, .cv-ring .cv-seg:hover, .cv-ring .cv-seg:focus-visible { stroke-width: 19; }
@keyframes cvArc { from { stroke-dasharray: 0 800; } }
@keyframes cvGlow { 50% { filter: drop-shadow(0 0 7px var(--tone)); } }
.cv-ring .cv-strack { fill: none; stroke: var(--border); stroke-width: 5; }
.cv-ring .cv-sarc { fill: none; stroke: var(--tone); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--slen) 700; animation: cvSarc 1.3s cubic-bezier(.2, .7, .2, 1) both .45s; }
@keyframes cvSarc { from { stroke-dasharray: 0 700; } }
.cv-ring .cv-sweep { transform-box: view-box; transform-origin: 240px 170px; animation: cvSpin 7s linear infinite; }
@keyframes cvSpin { to { transform: rotate(360deg); } }
.cv-ring .cv-big { font: 700 64px/1 var(--font); fill: var(--text); font-variant-numeric: tabular-nums; }
.cv-ring .cv-of { font: 500 14px/1 var(--mono); fill: var(--text-3); }
.cv-ring .cv-state { font: 700 13px/1 var(--font); letter-spacing: .18em; fill: var(--tone); }
.cv-ring .cv-lt { font: 600 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; fill: var(--text); }
.cv-ring .cv-ls { font: 500 11px/1 var(--font); fill: var(--tone); }
.cv-ring .cv-lab.hl .cv-lt { fill: var(--tone); }

.cv-verdict { min-width: 0; }
.cv-eyebrow { font: 600 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.cv-h { margin: 8px 0; font: 700 clamp(24px, 2.6vw, 34px)/1.12 var(--font); letter-spacing: .01em; color: var(--text); text-wrap: balance; }
.cv-h em { font-style: normal; color: var(--tone); }
.cv-line { margin: 0; color: var(--text-2); font-size: 14.5px; max-width: 68ch; }
.cv-tally { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 10px; font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.cv-tally span { display: inline-flex; align-items: center; gap: 6px; color: var(--tone); white-space: nowrap; }
.cv-tally span.zero { color: var(--text-3); opacity: .7; }
.cv-tally i { font-style: normal; }
.cv-oks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.cv-ok { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; white-space: nowrap;
  font-size: 12.5px; color: var(--text-2); background: var(--ok-bg); border: 1px solid var(--ok-bd); transition: border-color var(--t); }
.cv-ok i { font-style: normal; color: var(--ok); font-weight: 800; }
.cv-ok em { font-style: normal; color: var(--text-3); }
.cv-ok em::before { content: '\00b7'; margin: 0 6px 0 2px; }
.cv-ok.hl { border-color: var(--ok); }
.cv-trend { display: grid; gap: 10px; align-content: center; padding-left: 18px; border-left: 1px solid var(--hairline); min-width: 0; }
@media (max-width: 1280px) { .cv-trend { padding: 12px 0 0; border-left: none; border-top: 1px solid var(--hairline); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.cv-tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cv-tr .k { font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cv-tr .v { font-size: 14px; font-weight: 600; }
.cv-trf { font-size: 12px; color: var(--text-3); }

.cv-body { display: grid; gap: 14px; }
.cv-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1150px) { .cv-main { grid-template-columns: 1fr; } }
.cv-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cv-panel { border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-1); padding: 16px 18px; min-width: 0; }
.cv-ph { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cv-ph h2 { margin: 0; font: 700 15px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cv-hint { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cv-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cv-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--tone-bd); background: var(--tone-bg); color: var(--tone); font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.cv-chip:not(.t-critical):not(.t-serious):not(.t-warning):not(.t-info) { border-color: var(--border-2); background: transparent; color: var(--text-2); }
.cv-chip i { font-style: normal; }
.cv-chip b { font-family: var(--mono); }
.cv-chip.zero { opacity: .45; cursor: default; }
.cv-chip.on { box-shadow: 0 0 0 1px var(--tone); }
.cv-when { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font: 700 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.cv-when::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.cv-ph + .cv-when { margin-top: 2px; }

.cv-fix { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 13px 15px; margin-bottom: 9px; border-radius: 9px;
  background: linear-gradient(90deg, var(--tone-bg), transparent 72%), var(--bg-2); border: 1px solid var(--tone-bd);
  animation: cvRise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 60ms + 250ms); transition: border-color .2s, box-shadow .2s; }
.cv-fix.hl { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 0 24px var(--tone-bg); }
@keyframes cvRise { from { opacity: .35; transform: translateY(8px); } }
.cv-fixmain { min-width: 0; }
.cv-fixtop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cv-sev { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 8px; border-radius: 4px; white-space: nowrap; flex: none;
  font: 700 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone-bd); }
.cv-sev i { font-style: normal; letter-spacing: 0; }
.cv-area { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-fixt { margin: 8px 0 3px; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--text); }
.cv-next { margin: 5px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.5; max-width: 72ch; }
.cv-next b { color: var(--text); }
.cv-more { margin-top: 6px; font-size: 12.5px; color: var(--text-2); max-width: 72ch; }
.cv-more p { margin: 4px 0 0; }
.cv-fig { text-align: right; align-self: start; min-width: 0; max-width: 240px; }
.cv-val { font-size: 22px; font-weight: 650; line-height: 1.1; color: var(--tone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-lim { margin-top: 4px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-fixfoot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.cv-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .cv-fix { grid-template-columns: 1fr; } .cv-fig { text-align: left; max-width: none; } .cv-fixfoot { justify-content: flex-start; } }

.cv-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
@media (max-width: 760px) { .cv-rows { grid-template-columns: 1fr; } }
.cv-row { border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); min-width: 0;
  animation: cvRise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 40ms + 400ms); transition: border-color .2s, box-shadow .2s; }
.cv-row.open { grid-column: 1 / -1; border-color: var(--tone-bd); }
.cv-row.hl { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone); }
.cv-rowb { appearance: none; border: none; background: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  cursor: pointer; text-align: left; font: inherit; color: var(--text); min-width: 0; }
.cv-g { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 4px; color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone-bd); font-size: 11px; font-weight: 800; }
.cv-rt { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-rv { flex: none; font-size: 12.5px; font-weight: 600; color: var(--tone); white-space: nowrap; }
.cv-rowd { padding: 0 12px 11px 42px; }
.cv-rowd .dim { font-size: 12.5px; margin: 4px 0 0; }
.cv-rowd .cv-acts { margin-top: 8px; }
.cv-calm { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 9px; background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.cv-calmic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--on-accent); font-weight: 800; }

.cv-gauges { display: grid; gap: 14px; }
.cv-gauge { padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.cv-gauge:last-child { border-bottom: none; padding-bottom: 2px; }
.cv-gh { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cv-gk { font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.cv-gs { flex: 1 1 auto; min-width: 0; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-gv { font-size: 22px; font-weight: 650; color: var(--tone); white-space: nowrap; }
.cv-gauge.hl .cv-gk { color: var(--tone); }
.cv-scale { position: relative; height: 32px; margin-top: 6px; }
.cv-bar { position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.cv-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--tone));
  animation: cvFill 1.1s cubic-bezier(.2, .7, .2, 1) both .35s; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.cv-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: cvSheen 3.2s ease-in-out infinite 1.6s; }
@keyframes cvFill { from { transform: scaleX(0); } }
@keyframes cvSheen { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.cv-mark { position: absolute; top: 3px; width: 2px; height: 16px; border-radius: 1px; background: var(--m); }
.cv-mark.w { --m: var(--warning); } .cv-mark.s { --m: var(--serious); }
.cv-mark span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font: 500 10.5px/1 var(--mono); color: var(--m); white-space: nowrap; }
.cv-mark.l span { left: auto; right: 5px; transform: none; }
.cv-mark.r span { left: 5px; transform: none; }
.cv-ends { position: absolute; left: 0; right: 0; top: 20px; display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); color: var(--text-3); pointer-events: none; }
.cv-reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cv-read { padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); min-width: 0; transition: border-color .2s; }
.cv-read b { display: block; font-size: 14.5px; line-height: 1.25; }
.cv-read span { display: block; color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-read.t-warning b, .cv-read.t-critical b { color: var(--tone); }
.cv-read.hl { border-color: var(--accent-bd); }

.cv-board { display: grid; gap: 7px; }
.cv-sys { appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 11px; row-gap: 4px; align-items: center; padding: 10px 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-2); transition: border-color .2s, box-shadow .2s, opacity .2s; }
.cv-sys:disabled { cursor: default; }
.cv-sys:not(:disabled):hover { border-color: var(--border-2); }
.cv-sys.lit { background: linear-gradient(90deg, var(--tone-bg), transparent 75%), var(--bg-2); border-color: var(--tone-bd); }
.cv-sys.hl { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 0 22px var(--tone-bg); }
.cv-board.focus .cv-sys:not(.hl) { opacity: .5; }
.cv-led { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 9px var(--tone); }
.cv-sl { font: 700 13.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cv-sf { grid-column: 2 / span 2; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-all { border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-1); }
.cv-all > summary { cursor: pointer; padding: 12px 16px; font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-all > summary::-webkit-details-marker { display: none; }
.cv-all > summary::before { content: '\203a'; display: inline-block; margin-right: 8px; transition: transform var(--t); }
.cv-all[open] > summary::before { transform: rotate(90deg); }
.cv-all[open] > summary { border-bottom: 1px solid var(--hairline); }
.cv-all > .incs { padding: 12px 14px; }

/* The same switch as every other animation: off with Flow off, and in a Remote Desktop session. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .cv-hero *, :root:not([data-motion="on"]) .cv-body * { animation: none !important; }
  :root:not([data-motion="on"]) .cv-sweep { display: none; }
}
:root[data-motion="off"] .cv-hero *, :root[data-motion="off"] .cv-body * { animation: none !important; }
:root[data-motion="off"] .cv-sweep { display: none; }
/* Nothing to fix: the vitals and the systems side by side under the calm line. */
.cv-main.cv-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1150px) { .cv-main.cv-two { grid-template-columns: 1fr; } }

/* ========================================================================
   CONTRACT-V12: inside the engine, and the command centre

   Activity, Query plans, Deadlocks and Events read a server as it runs; the command centre is
   the first screen. The drawings (planview, deadlockview, flowview, estateview) style themselves;
   this is the frame around them. Every colour is a theme token, so all five themes follow.
   ======================================================================== */

/* ---- shared pieces ---- */
:where(.act, .plans, .dls, .evs, .cc, .al, .xecard, .planreq) .sub { color: var(--text-3); font-size: 11.5px; }
.dfoot > .sub { color: var(--text-3); font-size: 11.5px; }
.kvline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px; font-size: 12px; color: var(--text-3); }
.kvline b { color: var(--text); font-weight: 600; }
.kvline b.mono { font-size: 11.5px; }
.kvline.sub { font-size: 11.5px; }
.kvline .t-warning, .kvline .t-warning b { color: var(--warning); }

/* The live heartbeat: a dot and one ring that widens and fades. */
.livedot {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg), 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent);
}
.livedot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--ok); opacity: 0;
  animation: v12-ping 2.2s cubic-bezier(.2, .7, .3, 1) infinite;
}
.livedot.off { background: var(--muted); box-shadow: none; }
.livedot.off::after { display: none; }
@keyframes v12-ping { 0% { transform: scale(.55); opacity: .85; } 75%, 100% { transform: scale(1.9); opacity: 0; } }

/* Form controls inside the new pages, in the same key as Configuration's. Both halves are :where,
   so this carries no weight at all and any class below (.alsql, .alsmall ...) refines it. */
:where(.al, .cc, .planopen, .xecard, .xeopt) :where(input[type="text"], input[type="number"], input[type="password"], input[type="search"],
  input[type="time"], input[type="date"], input[type="datetime-local"], select, textarea) {
  min-width: 0; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text);
  padding: 6px 9px; font: inherit; font-size: 12.5px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
:where(.al, .cc, .planopen, .xecard, .xeopt) :where(input, select, textarea):hover:not(:disabled) { border-color: var(--border-2); }
:where(.al, .cc, .planopen, .xecard, .xeopt) :where(input, select, textarea):focus { outline: none; border-color: var(--accent-bd); box-shadow: 0 0 0 3px var(--accent-bg); }
:where(.al, .cc, .planopen, .xecard, .xeopt) :where(input, select, textarea):disabled { opacity: .62; cursor: default; }
:where(.al, .cc, .xecard, .xeopt) :where(input[type="checkbox"]) { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
:where(.al, .cc, .planopen, .xecard) ::placeholder { color: var(--text-3); }
.xeopt select { padding: 1px 4px; font-size: 11.5px; }

/* ---- the MonitorEx event session card ---- */
.xecard {
  display: grid; gap: 8px; margin-bottom: 14px; padding: 11px 14px;
  border: 1px solid var(--tone-bd); border-radius: var(--r);
  background: linear-gradient(100deg, var(--tone-bg), transparent 62%), var(--surface-1);
  box-shadow: var(--shadow);
}
.xecard.compact { padding: 8px 12px; }
.xehead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.xehead > b { font-size: 13px; font-weight: 650; white-space: nowrap; }
.xesecs { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.xesecs select { padding: 3px 6px; font-size: 12px; }
.xebody { display: flex; flex-wrap: wrap; gap: 3px 18px; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.xebody b { color: var(--text); font-weight: 600; }

/* ---- Activity ---- */
.act > .actbar, .act > .tiles { margin-bottom: 14px; }
.actbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--ok-bg), transparent 30%), var(--surface-1); font-size: 12.5px;
}
.actbar > b { white-space: nowrap; }
.actbar > .sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .cols.act2 { grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); }
@media (max-width: 1200px) { .act .cols.act2 { grid-template-columns: 1fr; } }

/* Blocking, as a tree: the head leads in red, its waiters hang under it. */
.bktree { display: flex; flex-direction: column; gap: 3px; }
.bknode {
  position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 7px 10px; border-radius: var(--r-s); font-size: 12.5px;
  background: var(--surface-2);
}
.bknode.head {
  background: linear-gradient(90deg, var(--critical-bg), transparent 75%), var(--surface-2);
  box-shadow: inset 3px 0 0 var(--critical);
}
.bknode:not(.head)::before {
  content: ""; position: absolute; left: -13px; top: -4px; width: 11px; height: calc(50% + 4px);
  border-left: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); border-bottom-left-radius: 7px;
}
.bkdot {
  width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--tone); color: var(--on-accent); font-size: 10px; font-weight: 800;
}
.bknode.head .bkdot { box-shadow: 0 0 0 4px var(--critical-bg), 0 0 14px color-mix(in srgb, var(--critical) 55%, transparent); }
.bkapp { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.bknode > .sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkwhy { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }

/* ---- Query plans ---- */
.plans .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .plans .cols { grid-template-columns: 1fr; } }
.runlist { display: flex; flex-direction: column; }
.runrow {
  appearance: none; width: 100%; border: none; border-bottom: 1px solid var(--hairline); background: none;
  display: flex; align-items: center; gap: 10px; padding: 9px 15px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-2); transition: background var(--t), color var(--t);
}
.runrow:last-child { border-bottom: none; }
.runrow:hover { background: var(--hover-tint); color: var(--text); }
.runrow > b { min-width: 42px; color: var(--text); }
.runrow > span:not(.grow):not(.pill) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planopen { display: grid; gap: 10px; }
.planopen > .btn { justify-self: start; cursor: pointer; }
.planopen textarea { resize: vertical; min-height: 86px; font-family: var(--mono); font-size: 11.5px; background: var(--code-bg); color: var(--code-fg); }
.planreq { margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }

/* ---- Deadlocks ---- */
.dlhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dlsum { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.dlsum .big { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.dlsum .sep { padding-left: 12px; border-left: 1px solid var(--border); color: var(--text-3); white-space: nowrap; }
.dlgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.dllist { display: flex; flex-direction: column; gap: 5px; max-height: 620px; overflow-y: auto; padding: 1px 3px 1px 1px; }
.dlrow {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-1); color: var(--text-2); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t), color var(--t);
}
.dlrow:hover { border-color: var(--border-2); color: var(--text); }
.dlrow.on {
  border-color: var(--critical-bd); color: var(--text);
  background: linear-gradient(90deg, var(--critical-bg), transparent 85%), var(--surface-1);
  box-shadow: inset 3px 0 0 var(--critical);
}
.dlwhen { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.dlt { font-size: 12.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlmain { min-width: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-1); overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 1000px) { .dlgrid { grid-template-columns: 1fr; } .dllist { max-height: 250px; } }

/* ---- Events ---- */
.evkinds { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.evk {
  appearance: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 124px; padding: 8px 12px 9px; border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-1); color: var(--text-2); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.evk > span:first-child { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.evk > b { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text); }
.evk:hover { border-color: var(--border-2); }
.evk.on { border-color: var(--accent-bd); background: linear-gradient(180deg, var(--accent-bg), transparent), var(--surface-1); box-shadow: inset 0 -2px 0 var(--accent); }
.evk.on > span:first-child { color: var(--text-2); }
.evday { font-size: 11px; color: var(--accent); white-space: nowrap; }
.evkinds > .btn { align-self: center; }
.evnote { margin: -4px 0 10px; font-size: 12px; }

/* ---- the command centre ---- */
.cc { display: grid; gap: 14px; }
.cceyebrow {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.cceyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* The hero: the estate on the left, what needs someone on the right, the same height. */
.cchero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 14px; align-items: stretch; }
.ccmap, .ccnow {
  position: relative; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: calc(var(--r) + 2px);
  background: var(--surface-1); box-shadow: var(--shadow);
}
.ccmap { background: radial-gradient(85% 70% at 50% 58%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%), var(--surface-1); }
/* The right-hand column takes the map's height and scrolls inside it, never the other way round. */
.ccnow { display: flex; flex-direction: column; height: 0; min-height: 100%; }
.cchead {
  display: grid; gap: 7px; padding: 13px 16px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--sheen), transparent);
}
.cch {
  padding-left: 11px; border-left: 3px solid var(--tone);
  font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cctally { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--text-2); }
.cctally > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cctally i {
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font-style: normal;
  background: var(--tone); color: var(--on-accent); font-size: 9.5px; font-weight: 800;
}
.cctally > .t-muted { color: var(--text-3); }
.ccurgent { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ccallclear { margin: auto; display: flex; align-items: center; gap: 16px; padding: 24px; max-width: 360px; }
.ccallclear .ccok {
  width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--ok); color: var(--on-accent); font-size: 22px; font-weight: 800;
  box-shadow: 0 0 0 8px var(--ok-bg), 0 0 38px color-mix(in srgb, var(--ok) 45%, transparent);
}
.ccallclear b { display: block; font-size: 16px; font-weight: 650; }
.ccallclear div > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }

/* One alert: a coloured edge, the severity mark, the title and where it is. Quiet ones dim. */
.ccrow {
  position: relative; overflow: hidden; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2);
  transition: border-color var(--t), background var(--t), opacity var(--t);
}
.ccrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); box-shadow: 0 0 12px var(--tone); }
.ccrow:hover { border-color: var(--tone-bd); }
.ccrow.open { border-color: var(--tone-bd); background: linear-gradient(180deg, var(--tone-bg), transparent 130px), var(--surface-2); }
.ccrow.quiet { opacity: .6; }
.ccrow.quiet::before { background: var(--muted); box-shadow: none; }
.ccrow.quiet:hover, .ccrow.quiet.open { opacity: 1; }
.ccrowhead {
  appearance: none; width: 100%; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 15px;
}
.ccrow.compact .ccrowhead { padding: 7px 12px 7px 14px; gap: 10px; }
.ccsev {
  position: relative; width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--tone-bg); border: 1px solid var(--tone-bd); color: var(--tone); font-size: 12px; font-weight: 800;
}
.ccrow.compact .ccsev { width: 22px; height: 22px; font-size: 11px; }
/* A critical alert nobody has answered breathes, once every two seconds - the one thing on the
   screen that moves without being asked to. */
.ccrow.t-critical:not(.quiet) .ccsev::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--critical);
  animation: v12-ping 2s cubic-bezier(.2, .7, .3, 1) infinite;
}
.cctitle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cct { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccrow.compact .cct { -webkit-line-clamp: 1; font-size: 12.5px; }
.ccmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--text-3); }
.ccmeta > span { white-space: nowrap; }
.ccsrv { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-2); }
.ccsrv .svgi { color: var(--text-3); }
.ccenv {
  padding: 0 6px; border: 1px solid var(--border-2); border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2);
}
.ccwhy { padding: 0 7px; border: 1px solid var(--muted-bd); border-radius: 999px; background: var(--muted-bg); font-size: 10.5px; font-weight: 650; color: var(--text-2); }
.ccrowhead > .pill { flex: 0 0 auto; }
.ccdetail { display: grid; gap: 9px; padding: 2px 14px 13px 52px; font-size: 12.5px; }
.ccrow.compact .ccdetail { padding-left: 46px; }
.ccdet { margin: 0; line-height: 1.55; color: var(--text-2); }
.ccquiet { padding: 7px 10px; border: 1px solid var(--muted-bd); border-radius: var(--r-xs); background: var(--muted-bg); font-size: 12px; color: var(--text-2); }
.ccadv { padding: 8px 11px; border: 1px solid var(--accent-bd); border-radius: var(--r-xs); background: var(--accent-bg); line-height: 1.5; color: var(--text); }
.ccadv > b { color: var(--accent); }
.ccnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.ccnotes li { padding-left: 10px; border-left: 2px solid var(--border-2); }
.ccacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 3px; }
.ccsnooze { display: inline-flex; align-items: center; gap: 2px; padding: 1px 3px 1px 9px; border: 1px dashed var(--border-2); border-radius: var(--r-s); }
.ccsnooze > .sub { margin-right: 4px; white-space: nowrap; }

.ccincidents > .banner:last-child { margin-bottom: 0; }

/* Under the hero: every alert on the left, the machinery on the right. */
.ccbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.ccstream {
  min-width: 0; display: grid; gap: 10px; align-content: start; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow);
}
.cctabs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cctabs .substrip { margin: 0; flex-wrap: wrap; }
.cctabs .subtab { white-space: nowrap; }
.cctabs .subtab b { margin-left: 4px; font-size: 11px; color: var(--text-3); }
.cctabs .subtab.on b { color: var(--text); }
.ccfilters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ccfilters .chip { white-space: nowrap; }
.ccfilters select { padding: 4px 8px; font-size: 12px; }
.ccfilters input[type="search"] { width: 180px; padding: 4px 9px; font-size: 12px; }
.ccselsrv {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 11px;
  border: 1px solid var(--accent-bd); border-radius: var(--r-s); background: var(--accent-bg); font-size: 12.5px;
}
.ccgroup { display: grid; gap: 6px; }
.ccgroup + .ccgroup { margin-top: 6px; }
.ccgh { display: flex; align-items: center; gap: 8px; padding: 3px 2px 5px; border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--text-2); }
.ccgh > b { min-width: 0; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccgh .svgi { color: var(--text-3); flex: 0 0 auto; }
.ccgh > .sub { white-space: nowrap; }
.ccplat { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ccghn { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.ccghn > span { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.ccghn i {
  width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; font-style: normal;
  background: var(--tone-bg); border: 1px solid var(--tone-bd); color: var(--tone); font-size: 8.5px; font-weight: 800;
}
/* "Show 9 more" under a folded group, and "and 42 more" under the urgent cards. */
.ccfold, .ccmore {
  appearance: none; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px dashed var(--border-2); border-radius: var(--r-s); background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.ccfold:hover, .ccmore:hover { border-style: solid; border-color: var(--accent-bd); color: var(--accent); background: var(--accent-bg); }
.ccmore { flex: 0 0 auto; align-self: stretch; justify-content: center; }
.ccresolved { display: grid; gap: 6px; }
.ccres {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); font-size: 12.5px;
}
.ccres .ccok {
  width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ok-bd); background: var(--ok-bg); color: var(--ok); font-size: 10px; font-weight: 800;
}
.ccres .cct { flex: 0 1 auto; min-width: 0; font-size: 12.5px; -webkit-line-clamp: 1; }
.ccres > .sub { margin-left: auto; white-space: nowrap; }

.ccside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ccside > .btn { justify-content: center; }
.ccbox {
  display: grid; gap: 8px; padding: 12px 14px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow);
}
.ccbox h3 {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.ccbox p { margin: 0; line-height: 1.5; color: var(--text-2); }
.ccbox > .btn { justify-self: start; }
.cclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cclist li { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px; min-width: 0; }
.cclist li > b { flex: 1 1 0; min-width: 0; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cclist li > .sub, .cclist li > .ccerr { flex: 1 0 100%; }
.cclist li:has(> .ccstat) > .sub, .cclist li:has(> .ccstat) > .ccerr { padding-left: 26px; }
.ccstat {
  width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--tone-bd); background: var(--tone-bg); color: var(--tone); font-size: 9.5px; font-weight: 800;
}
.ccerr { font-size: 11.5px; color: var(--critical); }
.ccerrs { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--critical); }

@media (max-width: 1320px) {
  .cchero { grid-template-columns: 1fr; }
  .ccnow { height: auto; min-height: 0; }
  .ccurgent { max-height: 460px; }
}
@media (max-width: 1100px) { .ccbody { grid-template-columns: 1fr; } }

/* The way in: first among the tabs (in the menu it is the first icon of the top row, CONTRACT-V14).
   Labels on one line at any width. */
.cctab .tabn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 650; }
.cctab .tabn .svgi { color: var(--accent); }

/* ---- Configuration > Alerting ---- */
.al .lab {
  display: block; margin-bottom: 5px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.alsave {
  position: sticky; top: calc(var(--stick-h, 54px) + 8px); z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 8px 10px 8px 14px; font-size: 12.5px; color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-1); box-shadow: var(--shadow);
  transition: border-color var(--t), box-shadow var(--t);
}
.alsave.dirty { border-color: var(--accent-bd); color: var(--text); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--accent-bg), var(--shadow); }
.alcard { display: grid; gap: 10px; margin-bottom: 10px; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.alcard:last-of-type { margin-bottom: 12px; }
.alcardh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.alcardh > b { font-size: 12.5px; white-space: nowrap; color: var(--text-2); }
.alcardh > input[type="text"] { flex: 0 1 300px; font-weight: 650; font-size: 13px; }
.alcardh > input.wide { flex: 1 1 360px; }
.alcardh > label:not(.alcheck) { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.alrow { display: grid; gap: 5px; margin-bottom: 12px; }
.alrow > input { width: 100%; }
.alrow > .sub { line-height: 1.5; }
.alurl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.alurl > input { flex: 1 1 auto; }
.alurl > .btn { flex: 0 0 auto; white-space: nowrap; }
/* The first channel: four doors, each saying what it sends. */
.alchoose { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.alch {
  appearance: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-height: 112px; padding: 13px 14px 34px; text-align: left; cursor: pointer; font: inherit; color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2);
  transition: border-color var(--t), background var(--t), transform 160ms ease, box-shadow var(--t);
}
.alch > b { font-size: 13.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.alch > span { font-size: 12px; line-height: 1.45; }
.alch > i { position: absolute; left: 14px; bottom: 11px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.alch::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--alch, var(--accent)); }
.alch:hover { border-color: var(--accent-bd); background: linear-gradient(160deg, var(--accent-bg), transparent 70%), var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.alch-teams { --alch: #7b83eb; } .alch-slack { --alch: #e01e5a; } .alch-email { --alch: var(--ok); } .alch-webhook { --alch: var(--accent-2); }
.algrid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.algrid > label:not(.alcheck) { display: flex; flex-direction: column; gap: 4px; min-width: 130px; font-size: 11.5px; color: var(--text-3); }
.algrid > label.wide, .algrid > .wide { flex: 1 1 340px; }
.algrid > label > input, .algrid > label > select { width: 100%; }
.alcheck { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; cursor: pointer; }
.algrid > .alcheck { padding-bottom: 7px; }
.alchips { display: flex; flex-wrap: wrap; gap: 5px; }
.alchips .chip { padding: 3px 10px; }
.alscope { display: grid; gap: 9px; }
.alscope input[type="text"] { width: min(100%, 420px); }
.aladd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--text-2); }
.almore { border-top: 1px solid var(--hairline); padding-top: 8px; }
.almore > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-2); list-style-position: inside; }
.almore > summary:hover { color: var(--text); }
.almore[open] { display: grid; gap: 10px; }
.almore[open] > summary { margin-bottom: 2px; }
.alrules { display: flex; flex-direction: column; }
.alrule {
  display: grid; grid-template-columns: 26px minmax(220px, 1.3fr) 118px 150px minmax(200px, 1fr); gap: 10px 14px; align-items: center;
  padding: 10px 15px; border-bottom: 1px solid var(--hairline); transition: opacity var(--t), background var(--t);
}
.alrule:last-child { border-bottom: none; }
.alrule:hover { background: var(--hover-tint); }
.alrule.off { opacity: .55; }
.alrname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alrname > b { font-size: 13px; font-weight: 650; }
.alrname > .sub { line-height: 1.45; }
.alsmall { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.alsmall input[type="number"] { width: 72px; font-family: var(--mono); font-size: 12px; padding: 4px 7px; }
.alths { display: flex; flex-wrap: wrap; gap: 6px 12px; }
@media (max-width: 1150px) {
  .alrule { grid-template-columns: 26px minmax(0, 1fr) 118px; }
  .alrule > .alsmall, .alrule > .alths { grid-column: 2 / -1; }
}
.alsql { width: 100%; min-height: 120px; resize: vertical; font-family: var(--mono); font-size: 12px; line-height: 1.5; background: var(--code-bg); color: var(--code-fg); tab-size: 4; }
.altest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--border-2); border-radius: var(--r-s); font-size: 12.5px; }
.altest .lab { margin: 0; }
.altest select { padding: 4px 8px; font-size: 12px; }
.alfind { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.alfind li { padding: 5px 10px; border: 1px solid var(--tone-bd); border-radius: var(--r-xs); background: var(--tone-bg); color: var(--text); }
.alnote { margin-bottom: 12px; line-height: 1.55; font-size: 12px; }

/* The same switch as every other animation: off with Animation off, and in a Remote Desktop
   session unless Animation is On. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .livedot::after { animation: none; opacity: 0; }
  :root:not([data-motion="on"]) .ccrow .ccsev::after { animation: none; }
}
:root[data-motion="off"] .livedot::after { animation: none; opacity: 0; }
/* Still, a critical alert keeps its ring - it just stops breathing. */
:root[data-motion="off"] .ccrow .ccsev::after { animation: none; }

/* ========================================================================
   CONTRACT-V13: the MongoDB sections (mongopages.js). The replica-set diagram and the engine
   meters style themselves (mongoview.css); this is the page around them.
   ======================================================================== */
.mgp > .banner:first-child { margin-bottom: 14px; }
.mgp-note { margin-top: 10px; padding: 8px 11px; border: 1px dashed var(--border-2); border-radius: var(--r-s); font-size: 12px; line-height: 1.5; color: var(--text-2); }
.mgp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 22px; align-items: center; }
.mgp-big { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border: 1px solid var(--tone-bd); border-radius: var(--r);
  background: linear-gradient(160deg, var(--tone-bg), transparent 75%), var(--surface-2); min-width: 128px; }
.mgp-big > b { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--tone); white-space: nowrap; }
.mgp-big > span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.mgp-kv dl { margin: 0; display: grid; gap: 5px; }
.mgp-kv dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 12.5px; }
.mgp-kv dt { color: var(--text-3); white-space: nowrap; }
.mgp-kv dd { margin: 0; color: var(--text); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 700px) { .mgp-kv { grid-template-columns: 1fr; } }

/* Where the space goes: one bar per database, the largest full width. */
.mgp-bars { display: grid; gap: 6px; }
.mgp-bar { display: grid; grid-template-columns: minmax(90px, 200px) minmax(0, 1fr) 90px; align-items: center; gap: 12px; font-size: 12.5px; }
.mgp-bn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text); }
.mgp-bt { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.mgp-bt > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.mgp-bv { text-align: right; color: var(--text-2); white-space: nowrap; }

.mgp-warns { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* The estate: each replica set as a card of its members. */
.mgp-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mgp-set { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; }
.mgp-set > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--sheen), transparent); white-space: nowrap; }
.mgp-set > header .svgi { color: var(--plat-mongodb); flex: 0 0 auto; }
.mgp-set > header > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.mgp-set > ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.mgp-mem { appearance: none; width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 9px; row-gap: 1px;
  align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-s); background: var(--surface-2); color: var(--text-2);
  text-align: left; cursor: pointer; font: inherit; transition: border-color var(--t), background var(--t); }
.mgp-mem:hover { border-color: var(--tone-bd); background: linear-gradient(90deg, var(--tone-bg), transparent 80%), var(--surface-2); }
.mgp-mem > .ic { grid-row: 1 / span 2; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
  background: var(--tone-bg); border: 1px solid var(--tone-bd); color: var(--tone); font-size: 9.5px; font-weight: 800; }
.mgp-mn { min-width: 0; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.mgp-mr { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.mgp-ml { grid-column: 3; grid-row: 1 / span 2; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }

/* The MongoDB form's extras: TLS and the rest behind one fold, and how the user is created. */
.mgp-adv { margin: 2px 0 12px; border-top: 1px solid var(--hairline); padding-top: 10px; }
.mgp-adv > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.mgp-adv > summary:hover { color: var(--text); }
.mgp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; margin-bottom: 6px; }
.mgp-check input { accent-color: var(--accent); margin: 0; }
.mgp-create { margin: 8px 0 6px; }
.mgp-create .code { font-size: 11.5px; }
/* The MongoDB estate's own colour (CONTRACT-V11: from a hue no severity and no other estate uses):
   teal, not MongoDB's green, which would read as "healthy". Maroon gives teal to Applications and
   Aurora to its second accent, so there it is violet. */
:root { --plat-mongodb: #2dd4bf; }
:root[data-theme="daylight"] { --plat-mongodb: #0f766e; }
:root[data-theme="maroon"], :root[data-theme="aurora"] { --plat-mongodb: #c4b5fd; }
.plat-mongodb { --plat: var(--plat-mongodb); }

/* ========================================================================
   loaders: the classic spinner, and why it turns inside Remote Desktop

   A loading mark answers the reader's own click - opening the dashboard, a window, a range - and
   a still one reads as a page that has hung. Windows reports reduced motion inside every Remote
   Desktop session, which is where every reader of this page is, so loaders follow the rule the
   menu's movement already follows (CONTRACT-V8): only an explicit Animation: Off stills them.
   Every rule here sits later in the file than the reduced-motion rule it replaces, at the same
   specificity, which is what makes it win.
   ======================================================================== */
.ldr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 46px 20px; text-align: center; color: var(--text-2); }
.ldr.inline { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 0; text-align: left; }
.ldr-ring { display: block; flex: 0 0 auto; overflow: visible; }
.ldr-track { fill: none; stroke: var(--border-2); stroke-width: 4; opacity: .6; }
.ldr-arc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 80 126; transform-origin: 25px 25px; }
.ldr-t { font-size: 14px; font-weight: 600; color: var(--text-2); }
.ldr.inline .ldr-t { font-size: 12.5px; }
.ldr-s { max-width: 470px; font-size: 12px; line-height: 1.5; color: var(--text-3); }
.ldr-dots i { font-style: normal; opacity: .25; }
@keyframes ldrSpin { to { transform: rotate(360deg); } }
@keyframes ldrDash {
  0%   { stroke-dasharray: 1 150;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }
}
@keyframes ldrDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
:root:not([data-motion-pref="off"]) .ldr-ring { animation: ldrSpin 1.4s linear infinite; }
:root:not([data-motion-pref="off"]) .ldr-arc { animation: ldrDash 1.4s ease-in-out infinite; }
:root:not([data-motion-pref="off"]) .ldr-dots i { animation: ldrDot 1.4s ease-in-out infinite; }
:root:not([data-motion-pref="off"]) .ldr-dots i:nth-child(2) { animation-delay: .2s; }
:root:not([data-motion-pref="off"]) .ldr-dots i:nth-child(3) { animation-delay: .4s; }
:root[data-motion-pref="off"] .ldr-dots i { opacity: 1; }

/* The small ring inside buttons and one-line messages, drawn as the same classic mark: a faint
   track and a bright arc going round it. Leading a panel's "Reading ..." line it grows into the
   panel's own loader. */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
}
.empty > .spinner:first-child { display: block; width: 30px; height: 30px; margin: 0 auto 14px; border-width: 3px; color: var(--accent); }
:root:not([data-motion-pref="off"]) .spinner { animation: spin .8s linear infinite; }
:root:not([data-motion-pref="off"]) .spin { animation: spin 1.4s linear infinite; }
:root:not([data-motion-pref="off"]) .running .track span {
  animation: sweep 1.15s linear infinite;
  left: -34%; width: 32%; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
:root:not([data-motion-pref="off"]) .liveload.on > span,
:root:not([data-motion-pref="off"]) .liveload.busy > span,
:root:not([data-motion-pref="off"]) .liveload.is-loading > span,
:root:not([data-motion-pref="off"]) .liveload[aria-busy="true"] > span {
  animation: sweep 1.15s linear infinite;
  left: -34%; width: 32%; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* The loading screen - index.html's, and the same screen again while the first answer arrives:
   the logo, the slogan, the ring, and a bar sweeping along the card's foot. */
.boot { overflow: hidden; }
.boot .ldr { padding: 4px 0 4px; gap: 10px; }
.boot .ldr-t { font-size: 13px; }
.boot-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: var(--accent-bg); }
.boot-bar > span { position: absolute; top: 0; bottom: 0; left: -34%; width: 32%; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
:root:not([data-motion-pref="off"]) .boot-bar > span { animation: sweep 1.15s linear infinite; }
:root[data-motion-pref="off"] .boot-bar > span { left: 0; width: 100%; opacity: .5; }

/* ========================================================================
   the detail chart (perfcharts.js DetailChart) - the Performance page's charts

   A card: the name and its tools, a read-out that follows the pointer (else the pinned moment,
   else the latest reading) with the window's min, average and max, the plot, and a legend that
   hides and shows series. Every colour is a variable, so the themes move the charts with them.
   ======================================================================== */
/* Every card has the same rows at the same heights - name, value, one line of figures, the plot,
   one line of legend (held open even with nothing in it) - so a grid of them lines up exactly. */
.dc { position: relative; min-width: 0; height: 100%; display: flex; flex-direction: column; padding: 9px 11px 8px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.dc.big { height: auto; padding: 0; border: none; background: transparent; }
.dc-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.dc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 650; color: var(--text); cursor: help; }
.dc.big .dc-title { font-size: 15px; }
.dc-tools { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; opacity: .55; transition: opacity var(--t); }
.dc:hover .dc-tools, .dc:focus-within .dc-tools, .dc.menuopen .dc-tools, .dc.big .dc-tools { opacity: 1; }
.dc-tb { appearance: none; display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.dc-tb:hover:not(:disabled) { border-color: var(--border); background: var(--surface-3); color: var(--text); }
.dc-tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc-tb.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.dc-ic { display: block; }
.dc-menuwrap { position: relative; display: inline-flex; }
.dc-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 14; min-width: 236px; padding: 5px; border: 1px solid var(--border-2); border-radius: var(--r-xs); background: var(--surface-3); box-shadow: var(--shadow); }
.dc-menu button { appearance: none; display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.dc-menu button:hover:not(:disabled), .dc-menu button:focus-visible { background: var(--surface-2); outline: none; }
.dc-menu button:disabled { color: var(--text-3); cursor: default; }
.dc-menu button .dc-ic { color: var(--text-2); }
.dc-msep { height: 1px; margin: 4px 2px; background: var(--hairline); }
.dc-read { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 9px; min-height: 23px; margin: 1px 0 1px; overflow: hidden; white-space: nowrap; }
.dc-read > .dc-sw { align-self: center; }
.dc-read .dc-when, .dc-read .dc-delta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-val { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc.big .dc-val { font-size: 20px; }
.dc-val.none, .dc.big .dc-val.none { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-3); }
.dc-when { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.dc-when.at { color: var(--text-2); }
.dc-when.pin { color: var(--accent); }
.dc-delta { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.dc-stats { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 1px; min-height: 19px; margin: 0 0 3px -5px; overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--text-3); }
.dc-st { appearance: none; padding: 1px 5px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.dc-st b { font-family: var(--mono); font-weight: 650; color: var(--text-2); }
button.dc-st:hover { background: var(--surface-3); color: var(--text-2); }
button.dc-st:hover b { color: var(--text); }
.dc-st.plain { cursor: default; }
.dc-plot { position: relative; width: 100%; min-width: 0; }
.dc-plot > svg.dcs { display: block; overflow: visible; }
.dc-grid { stroke: var(--hairline); stroke-width: 1; }
.dc-grid.zero { stroke: var(--border-2); }
.dc-vgrid { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2 4; }
.dc-axis { stroke: var(--border-2); stroke-width: 1; }
.dc-yl, .dc-xl { fill: var(--text-3); font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.dc-unit { fill: var(--text-3); font-family: var(--mono); font-size: 9.5px; font-weight: 700; }
/* A light wash, and a firm edge along the top: on a busy server some alert is open all day, and a
   heavy tint would turn every chart red and hide the lines it is there to explain. */
.dc-band { opacity: .06; }
.dc-bandedge { opacity: .85; }
.dc-limit line { stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.dc-limit text { font-family: var(--mono); font-size: 9.5px; font-weight: 700; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.dc-range { stroke: none; opacity: .17; }
.dc-area { stroke: none; opacity: .13; }
.dc-line { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.dc-line.dash { stroke-width: 1.4; stroke-dasharray: 5 4; }
.dc-dot { stroke: var(--surface-2); stroke-width: 1; }
.dc-mark circle { stroke: var(--surface-2); stroke-width: 1.5; }
.dc-mark text { fill: var(--text-2); font-family: var(--mono); font-size: 10px; font-weight: 700; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.dc-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.dc-crossh { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; }
.dc-hdot { stroke: var(--surface-2); stroke-width: 2; }
.dc-pin { stroke: var(--accent); stroke-width: 1.5; }
.dc-pdot { stroke: var(--surface-2); stroke-width: 1.5; }
.dc-hit { position: absolute; z-index: 2; cursor: crosshair; touch-action: pan-y; border-radius: 2px; user-select: none; -webkit-user-select: none; }
.dc-hit:focus { outline: none; }
.dc-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dc-brush { position: absolute; z-index: 3; pointer-events: none; background: color-mix(in srgb, var(--accent) 20%, transparent); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.dc-brush > span { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--surface-3); color: var(--text); font: 600 10.5px var(--mono); white-space: nowrap; box-shadow: var(--shadow); }
.dc-pinflag { position: absolute; z-index: 4; pointer-events: none; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: var(--accent); color: var(--bg); font: 700 9.5px/13px var(--mono); white-space: nowrap; }
.dc-xtag, .dc-ytag { position: absolute; z-index: 5; pointer-events: none; padding: 1px 6px; border-radius: 4px; background: var(--text); color: var(--bg); font: 700 10px/14px var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-xtag { transform: translateX(-50%); }
.dc-ytag { transform: translateY(-50%); }
.dc-tip { position: absolute; z-index: 9; min-width: 176px; max-width: 290px; padding: 8px 10px; pointer-events: none; border: 1px solid var(--border-2); border-radius: var(--r-xs); background: var(--surface-3); box-shadow: var(--shadow); font-size: 11.5px; }
.dc-tipt { margin-bottom: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.dc-tipr { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 1px 7px; color: var(--text-2); }
.dc-tipr + .dc-tipr { margin-top: 4px; }
.dc-tipr .sw { width: 9px; height: 9px; border-radius: 2px; }
.dc-tipr .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-tipr b { font-family: var(--mono); font-weight: 700; color: var(--text); white-space: nowrap; }
.dc-tipr b.none { font-family: var(--font); font-weight: 500; color: var(--text-3); }
.dc-tipr .sub { grid-column: 2 / 4; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.dc-tipa { display: grid; gap: 3px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--hairline); color: var(--text-2); }
.dc-tipa > div { display: flex; align-items: baseline; gap: 7px; }
.dc-tipa i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); }
.dc-tipa .more { padding-left: 14px; color: var(--text-3); }
.dc-empty { position: absolute; inset: 4px 0; display: grid; place-items: center; padding: 8px; border: 1px dashed var(--border-2); border-radius: var(--r-xs); color: var(--text-3); font-size: 12px; text-align: center; }
.dc-legend { display: flex; flex-wrap: nowrap; gap: 0 4px; min-height: 22px; margin-top: auto; padding-top: 4px; overflow: hidden; }
.dc.big .dc-legend { flex-wrap: wrap; margin-top: 6px; }
.dc-li { appearance: none; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.dc-ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-li b { flex: 0 0 auto; }
.dc-livedot { stroke: var(--surface-2); stroke-width: 1.5; }
:root[data-motion="on"] .dc-livedot { animation: tcHead 1.6s ease-in-out infinite; }
.dc-li:hover { border-color: var(--border); background: var(--surface-3); }
.dc-li:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc-li b { font-family: var(--mono); font-weight: 650; color: var(--text); }
.dc-li.off { color: var(--text-3); text-decoration: line-through; }
.dc-li.off b { color: var(--text-3); }
.dc-li.off .dc-sw { opacity: .3; }
.dc-sw { display: inline-block; flex: 0 0 auto; width: 12px; height: 3px; border-radius: 2px; }
.dc-sw.dash { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%); mask-image: linear-gradient(90deg, #000 50%, transparent 50%); -webkit-mask-size: 5px 3px; mask-size: 5px 3px; }
.dc-sttable { width: 100%; margin: 6px 0 12px; border-collapse: collapse; font-size: 12px; }
.dc-sttable th { padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); text-align: left; white-space: nowrap; }
.dc-sttable td { padding: 4px 8px; border-bottom: 1px solid var(--hairline); color: var(--text-2); white-space: nowrap; }
.dc-sttable .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dc-sttable td .dc-sw { margin-right: 8px; vertical-align: middle; }
.dc-sttable .dc-st { font-size: 12px; }
.dc-table { margin-top: 12px; max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-xs); }
.dc-table table { width: 100%; }
.dc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.dc-table tbody tr { cursor: pointer; }
.dc-table tbody tr:hover td { background: var(--surface-2); }
.dc-table tbody tr.on td { background: var(--accent-bg); }
.dc-tnote { padding: 7px 10px; border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--text-3); }

/* The page around them (they began in the Timeline window, now part of Performance): the options, the full-size
   view, and a bar that sweeps while the next window loads - the charts stay readable under it. */
.modal.win.tlwin { position: relative; }
.tlgrid { display: grid; gap: 12px; align-items: stretch; grid-auto-rows: 1fr; }
.tlgh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 0 -2px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tlgh:first-child { margin-top: 0; }
.tlgh::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--hairline); }
.tlcell { min-width: 0; }
.tlmhead { margin-bottom: 6px; }
.tltools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tlhowto { margin: 0 0 12px; font-size: 11.5px; color: var(--text-3); }
.tlhowto b { font-weight: 600; color: var(--text-2); }
.tlcustom { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--accent-bd); border-radius: var(--r-s); background: var(--accent-bg); color: var(--text); font: 600 11.5px var(--mono); white-space: nowrap; }
.tlwin .btn.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.tloptwrap { position: relative; display: inline-flex; }
.tlopts { position: absolute; top: calc(100% + 6px); right: 0; z-index: 16; display: grid; gap: 2px; width: 330px; padding: 7px; border: 1px solid var(--border-2); border-radius: var(--r-s); background: var(--surface-3); box-shadow: var(--shadow); text-transform: none; letter-spacing: 0; }
.tlopt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.tlopt:hover { background: var(--surface-2); }
.tlopt input { margin: 2px 0 0; accent-color: var(--accent); }
.tlopt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tlopt i { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.tlwin .tlbody.tlstale { opacity: 1; }
.tlwin .tlbody.tlstale .tlgrid, .tlwin .tlbody.tlstale .ch-ribbon { opacity: .72; transition: opacity .2s; }
.tlloadbar { position: sticky; top: 0; z-index: 12; height: 3px; margin: -16px -18px 13px; overflow: hidden; background: var(--accent-bg); }
.tlloadbar > span { position: absolute; top: 0; bottom: 0; left: -34%; width: 32%; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
:root:not([data-motion-pref="off"]) .tlloadbar > span { animation: sweep 1.15s linear infinite; }
:root[data-motion-pref="off"] .tlloadbar > span { left: 0; width: 100%; opacity: .6; }
.tlfocus { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; border-radius: inherit; background: var(--surface-1); }
.tlfocus-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
.tlfocus-bar .mono { margin: 0 2px; }
.tlfocus-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.tlfocus-body .tlloadbar { margin: -14px -18px 11px; }

/* ---- CONTRACT-V15: the Performance page over time (PerfExplorer) ----------------------------
   The time bar and the charts in one panel, then a panel each for the window's alerts, databases,
   busiest statements and applications. A database chosen in any of them narrows all of them. */
.pxbar { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.pxbar .tlbar { flex-wrap: wrap; row-gap: 8px; }
.pxbody { position: relative; padding-top: 3px; }
.pxbody.tlstale .tlgrid, .pxbody.tlstale .momgrid { opacity: .72; transition: opacity .2s; }
/* CONTRACT-V17: the window's own sweep is always in place and the same height lit or not, so a re-read
   every few seconds never pushes the charts down or moves the scroll; see the refresh sweep below. */
.tlloadbar.pxload { position: relative; top: auto; z-index: auto; margin: 0 0 4px; border-radius: 2px; background: transparent; opacity: 0; transition: opacity .25s ease, box-shadow .3s ease; }
.pxhead { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.pxres { font-size: 12px; color: var(--text-2); }
.pxgroups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pxchip { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px;
          background: var(--surface-1); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pxchip b { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pxchip:hover { border-color: var(--border-2); color: var(--text); }
.pxchip.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.pxchip.on b { color: var(--accent); }
.pxchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pxgo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--text-3); }
.pxgo label { font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.pxgo input { height: 28px; padding: 2px 8px; font-family: var(--mono); font-size: 12px; color-scheme: dark; }
:root[data-theme="daylight"] .pxgo input { color-scheme: light; }
.pxdbchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border: 1px solid var(--accent-bd); border-radius: 999px;
            background: var(--accent-bg); color: var(--text-2); font-size: 12px; white-space: nowrap; }
.pxdbchip b { color: var(--text); }
.pxdbtag { appearance: none; flex: 0 0 auto; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-2);
           font: inherit; font-family: var(--mono); font-size: 11px; cursor: pointer; white-space: nowrap; }
.pxdbtag:hover, .pxdbtag.on { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.pxdbwrap { overflow-x: auto; }
.pxsort { appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.pxsort:hover { color: var(--text); }
.pxdb th[aria-sort="ascending"], .pxdb th[aria-sort="descending"] { color: var(--text); }
.pxdb { width: 100%; }
.pxdb tbody tr { cursor: pointer; }
.pxdb tbody tr:hover td { background: var(--surface-2); }
.pxdb tbody tr.on td { background: var(--accent-bg); }
.pxdb tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pxdb tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pxcpu { display: inline-block; width: 70px; height: 6px; margin-right: 8px; vertical-align: middle; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pxcpu i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.pxalerts { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--tone-bd); border-radius: 999px; background: var(--tone-bg); color: var(--tone);
            font-family: var(--mono); font-size: 11px; font-weight: 700; }
.pxdbchart { margin-top: 12px; }
.pxscrim { position: fixed; inset: 0; z-index: 64; background: var(--scrim); backdrop-filter: blur(3px); }
.pxfocus { position: fixed; inset: 16px; z-index: 65; display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: var(--r);
           background: var(--surface-1); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.pxfocus .tlfocus-bar { padding: 12px 18px; }
.tlrange .tlspan { padding-left: 10px; border-left: 1px solid var(--border-2); font-style: normal; font-weight: 600; color: var(--text-3); }

/* ========================================================================
   Galaxy (CONTRACT-V16): ekalix.com's sky behind the page

   galaxy.js puts one layer first in <body>: the website's three soft glows, its starfield linked into
   constellations (a canvas, drawn once), two sparkles and a shooting star. It shows only in the Galaxy
   theme, fixed behind everything (z-index 0, like body::before; .app and the loading card sit at 1),
   and never catches a click.

   One small thing moves at a time, on transform and opacity only, which the browser's compositor
   animates without repainting the page, and only for the moment it moves: galaxy.js adds .fl for one
   flare - a sparkle for 0.9 s, or the shooting star for 0.7 s - every 1.8 s, and between flares
   nothing animates. The browser redraws one rectangle around everything that changed, and keeps
   making frames for as long as any animation runs, so the website's drifting sky measured over a CPU
   core here in software rendering (galaxy.js has the figures). The glows stand still. The movement
   follows only an explicit Animation: Off - the loaders' rule (CONTRACT-V8), because Windows reports
   reduced motion inside every Remote Desktop session.
   ======================================================================== */
.gx-sky { display: none; }
:root[data-theme="galaxy"] .gx-sky { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gx-sky > i { position: absolute; border-radius: 50%; }
.gx-sky > .gx1 { width: 880px; height: 880px; right: -300px; top: -420px; background: radial-gradient(circle, rgba(var(--gx-1), .16), rgba(var(--gx-1), 0) 62%); }
.gx-sky > .gx2 { width: 820px; height: 820px; left: -320px; top: -340px; background: radial-gradient(circle, rgba(var(--gx-2), .16), rgba(var(--gx-2), 0) 62%); }
.gx-sky > .gx3 { width: 640px; height: 640px; left: 38%; top: 260px; background: radial-gradient(circle, rgba(var(--gx-3), .07), rgba(var(--gx-3), 0) 62%); }
.gx-sky > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The sparkle: the website's four-point star, a white core in one of the theme's colours (--c, set by
   galaxy.js), turning as it flares. Hidden between flares and whenever Animation is Off. */
.gx-sky > .gx-tw { position: absolute; left: 50%; top: 14%; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: 0;
  background: radial-gradient(circle, #fff 0 1.2px, rgba(var(--c, 226,232,255), .85) 2px, rgba(var(--c, 226,232,255), 0) 6px); }
.gx-sky > .gx-tw::before, .gx-sky > .gx-tw::after { content: ""; position: absolute; left: 50%; top: 50%; }
.gx-sky > .gx-tw::before { width: 18px; height: 1px; margin: -.5px 0 0 -9px; background: linear-gradient(90deg, rgba(var(--c, 226,232,255), 0), #fff, rgba(var(--c, 226,232,255), 0)); }
.gx-sky > .gx-tw::after  { width: 1px; height: 18px; margin: -9px 0 0 -.5px; background: linear-gradient(180deg, rgba(var(--c, 226,232,255), 0), #fff, rgba(var(--c, 226,232,255), 0)); }
@keyframes gxTwinkle {
  0%   { opacity: 0; transform: scale(.3) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
/* The shooting star: its bright head leads, down and to the left; galaxy.js picks its start each time. */
.gx-sky > .gx-shoot { position: absolute; left: 70%; top: 10%; width: 150px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, #fff, rgba(var(--gx-1), .85) 22%, rgba(var(--gx-2), .35) 60%, rgba(var(--gx-2), 0));
  transform: rotate(-24deg) translateX(0); }
@keyframes gxShoot {
  0%   { opacity: 0; transform: rotate(-24deg) translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-440px); }
}
:root[data-theme="galaxy"]:not([data-motion-pref="off"]) .gx-sky > .gx-tw.fl { animation: gxTwinkle .9s ease-in-out 1; }
:root[data-theme="galaxy"]:not([data-motion-pref="off"]) .gx-sky > .gx-shoot.fl { animation: gxShoot .7s linear 1; }

/* Panels are the website's glass, lightly: the sky shows through them faintly, never enough to cost
   a figure its contrast - nine tenths of the panel colour over near-black is within two steps of it. */
:root[data-theme="galaxy"] .panel { background: rgba(10, 16, 32, .9); }
:root[data-theme="galaxy"] .boot { background: rgba(10, 16, 32, .84); border-color: rgba(129, 140, 248, .24);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 80px -30px rgba(56, 189, 248, .35); }

/* The primary button is the website's: the cyan-indigo-violet gradient, sliding along on hover. */
:root[data-theme="galaxy"] .btn.primary,
:root[data-theme="galaxy"] .btn.primary:hover:not(:disabled) {
  background: linear-gradient(100deg, #38bdf8 0%, #818cf8 55%, #c084fc 100%);
  background-size: 140% 100%;
  background-position: 0 0;
  border-color: rgba(125, 211, 252, .55);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -10px rgba(56, 189, 248, .75);
  transition: background-position .5s cubic-bezier(.2, .7, .2, 1), box-shadow var(--t), transform var(--t);
}
:root[data-theme="galaxy"] .btn.primary:hover:not(:disabled) {
  background-position: 100% 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 28px -12px rgba(129, 140, 248, .9);
}

/* The logo takes the website's gradient text. It flows only on the loading screen, which is gone in
   seconds: flowing in the header it repainted the header, and redrew its blur, sixty times a second
   (more than half a CPU core in software rendering). The classic loader and the loading screen's
   bar take the gradient's colours too. */
:root[data-theme="galaxy"] .wordmark {
  background: linear-gradient(100deg, #7dd3fc 0%, #38bdf8 30%, #818cf8 60%, #c084fc 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@keyframes gxFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
:root[data-theme="galaxy"]:not([data-motion-pref="off"]) .boot-logo .wordmark { animation: gxFlow 3.5s ease-in-out infinite; }
:root[data-theme="galaxy"] .ldr-ring { filter: drop-shadow(0 0 3px rgba(56, 189, 248, .55)); }
:root[data-theme="galaxy"] .boot-bar > span { background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, #c084fc, transparent); }

/* ---------- CONTRACT-V17: the Live pill, its menu, and the refresh sweep ------------------------
   Pages are live on their own; the pill (the same 30px shape as before) says how it is going and
   opens a menu built like the status and account menus, so the header reads as one family. */
.livepill { position: relative; flex-shrink: 0; }
.livebtn {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 9px 0 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.livebtn:hover, .livepill.open .livebtn { border-color: var(--border-2); color: var(--text); }
.livebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.livebtn .k { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
/* A floor under the value's width keeps everything right of the pill from twitching each second. */
.livebtn b { font-family: var(--mono); font-size: 11.5px; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 60px; text-align: left; }
.livepill .acctchev { transform: rotate(90deg); }
.livepill.open .acctchev { transform: rotate(-90deg); }
.livepill.t-on .livebtn { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--text); }
.livepill.t-on .livebtn b { color: var(--ok); }
.livepill.t-on .ldot { background: var(--ok); }
.livepill.t-warn .livebtn { border-color: var(--warning-bd); background: var(--warning-bg); color: var(--text); }
.livepill.t-warn .livebtn b { color: var(--warning); }
.livepill.t-warn .ldot { background: var(--warning); }
.livepill.t-paused .livebtn b { color: var(--text-2); }
.livepill.t-dis .livebtn { opacity: .55; }
.livemenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 330px; max-width: calc(100vw - 24px); padding: 8px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface-2); box-shadow: var(--shadow), 0 18px 40px rgba(0, 0, 0, .28);
  animation: acctIn 160ms cubic-bezier(.2, .7, .3, 1) both;
}
:root[data-motion-pref="off"] .livemenu { animation: none; }
.lmhead { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 2px; font-size: 12.5px; min-width: 0; }
.lmhead b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lmhead .dim { margin-left: auto; white-space: nowrap; }
.lmwhy { padding: 4px 8px 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.lmrows { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); padding-top: 4px; }
.lmrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.lmrow .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmrow .dim { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lmsec { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; }
.lmsec .k { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.lmsec .presets .chip { height: 24px; }
@media print { .livepill { display: none !important; } }

/* The refresh sweep - the header's bar, and the Performance window's own: a comet of light, the accent
   running into its partner through a bright core, a fainter second light a beat behind, and a soft glow
   under the whole edge while anything is on its way. The glow is the bar's own shadow, drawn outside
   its box and taking no room, so a refresh still moves no pixel of the page and never the scroll. It
   moves unless Animation is Off, like every loader (Remote Desktop reports reduced motion), and the
   rules carry the same weight as the older ones above, so these, coming later, are the ones drawn. */
.liveload { transition: box-shadow .3s ease; }
.liveload.on { box-shadow: 0 1px 10px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
:root:not([data-motion-pref="off"]) .liveload.on > span {
  width: 36%; opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent) 38%, color-mix(in srgb, #fff 65%, var(--accent)) 52%, var(--accent-2) 66%, transparent);
}
:root:not([data-motion-pref="off"]) .liveload.on::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -34%; width: 16%; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  animation: sweep 1.15s linear .55s infinite;
}
.tlloadbar.pxload.on { opacity: 1; background: var(--accent-bg); box-shadow: 0 1px 10px -2px color-mix(in srgb, var(--accent) 65%, transparent); }
.tlloadbar.pxload > span {
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent) 38%, color-mix(in srgb, #fff 65%, var(--accent)) 52%, var(--accent-2) 66%, transparent);
}
/* Unlit, it does not move at all: an invisible animation still costs a software-rendered screen. */
:root .tlloadbar.pxload:not(.on) > span { animation: none; }
:root[data-motion-pref="off"] .tlloadbar.pxload > span { left: 0; width: 100%; opacity: .6; background: var(--accent); }

/* A live tile's number fades in from the accent when it moves (the value is keyed by what it says). */
@keyframes tileTick { from { color: var(--accent); } }
:root:not([data-motion-pref="off"]) .tile.islive .v .vv { animation: tileTick .9s ease-out; }

/* ---- CONTRACT-V17: the waits, live - what the instance waited on in the last reading's span, above
   the six since it started. */
.waitnow { margin: 0 0 14px; }
.wnhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.wnhead b { font-size: 12.5px; color: var(--text); }
.wnsince { padding-top: 12px; border-top: 1px solid var(--hairline); }
.wnlist { gap: 6px; }
.wnlist .wnrow { grid-template-columns: minmax(120px, 230px) minmax(60px, 1fr) auto; gap: 10px; }
.wnbar { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.wnbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s ease; }
:root[data-motion-pref="off"] .wnbar i { transition: none; }

/* ---- CONTRACT-V17: a page in full view -------------------------------------------------------------
   The Performance page over the whole window - the header, the menu and the tabs out of the way, the
   page itself the same box, so nothing under it starts again - with its own bar: the server, the Live
   pill, the browser's full screen and the way out. Over the header (30) and the menu (25), under the
   windows (60) and the toasts (80). Opaque, and no backdrop blur: a blur redrawn under every scroll is
   what a software-rendered (Remote Desktop) screen can least afford. */
.pagefull {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 0 18px 28px; background: var(--bg);
}
.pagefull:focus { outline: none; }
body.pagefull-open { overflow: hidden; }
.pfbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
  margin: 0 -18px 12px; padding: 9px 18px;
  border-bottom: 1px solid var(--border); background: var(--surface-1);
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .6);
}
.pft { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pft b { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfwhat { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.pfbar .btn .svgi { margin-right: 2px; }
.pfbar > .liveload { position: absolute; left: 0; right: 0; bottom: -1px; }
@media print { .pfbar { display: none !important; } .pagefull { position: static; overflow: visible; padding: 0; } }