:root{
  /* ---- Numen UI standard, section 4.1 (docs/UI_GUIDELINES.md). Light is the base. ---- */
  --n-0:#ffffff; --n-25:#fafbfc; --n-50:#f4f6f8; --n-100:#e8ecf1; --n-200:#d3dae3;
  --n-400:#8b97a8; --n-600:#5a6675; --n-800:#2c3644; --n-900:#161d27;
  --brand-600:#2f5fa8; --brand-700:#24497f; --brand-50:#eef3fb;
  --ok-600:#1a7f52; --ok-50:#e9f6f0; --warn-600:#a86a00; --warn-50:#fdf4e3;
  --error-600:#b3261e; --error-50:#fdecea; --info-600:#2f5fa8; --info-50:#eef3fb;
  --neutral-600:#5a6675; --neutral-50:#f4f6f8;
  --ev-measured:#1a7f52; --ev-estimated:#a86a00; --ev-inferred:#6b4fa8; --ev-synthetic:#8b97a8;
  --font-ui:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --sh-1:0 1px 2px rgba(22,29,39,.06),0 1px 3px rgba(22,29,39,.08); --sh-2:0 4px 12px rgba(22,29,39,.10);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- Role aliases: what the existing rules draw from. Light values. ---- */
  --bg:var(--n-25); --surface:var(--n-0); --surface2:var(--n-50); --surface3:var(--n-100);
  --line:var(--n-100); --line-strong:var(--n-200);
  --text:var(--n-800); --text-strong:var(--n-900); --text-2:var(--n-600); --muted:var(--n-600); --muted-2:var(--n-400);
  --dim:rgba(22,29,39,.12);
  --accent:var(--brand-600); --accent-strong:var(--brand-700); --accent-dim:var(--brand-50); --accent-soft:var(--brand-700);
  --sel:var(--brand-50); --on-accent:#ffffff;
  --ok:var(--ok-600); --ok-soft:var(--ok-50); --ok-line:#bfe3d1;
  --warn:var(--warn-600); --warn-soft:var(--warn-50); --warn-line:#efd9a8; --warn-text:#7a4a00;
  --bad:var(--error-600); --bad-soft:var(--error-50); --bad-line:#f2b8b3; --danger:var(--error-600);
  --violet:var(--ev-inferred); --violet-soft:#efeaf9;
  --overlay-1:rgba(22,29,39,.05); --overlay-2:rgba(22,29,39,.08); --overlay-3:rgba(22,29,39,.14);
  --radius:var(--r-lg);
  /* names a few later rules used with fallbacks */
  --ink:var(--text); --panel-2:var(--surface2);
}

/* Dark: the same tokens redefined, and only here. The OS preference applies unless
   the person chose light; the explicit choice wins in both directions. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --n-0:#141b2f; --n-25:#0b1020; --n-50:#1b2440; --n-100:#26304d; --n-200:#46567f;
    --n-400:#7b88a6; --n-600:#93a0bd; --n-800:#e8ecf5; --n-900:#ffffff;
    --brand-600:#4c8dff; --brand-700:#8fb8ff; --brand-50:#1e3a6b;
    --ok-600:#3ddc97; --ok-50:#101f1b; --warn-600:#ffb454; --warn-50:#3a2d0e;
    --error-600:#ff6b6b; --error-50:#2a1414; --info-600:#4c8dff; --info-50:#1e3a6b;
    --neutral-600:#93a0bd; --neutral-50:#1b2440;
    --ev-measured:#3ddc97; --ev-estimated:#ffb454; --ev-inferred:#afa9ec; --ev-synthetic:#7b88a6;
    --sh-1:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 12px rgba(0,0,0,.45);
    --dim:rgba(255,255,255,.10); --accent-soft:#a8c8ff; --sel:#16224a; --on-accent:#ffffff;
    --ok-line:#1f5c46; --warn-line:#6b5416; --warn-text:#ffd68a; --bad-line:#7a2626; --violet-soft:#241f4a;
    --overlay-1:rgba(255,255,255,.06); --overlay-2:rgba(255,255,255,.10); --overlay-3:rgba(255,255,255,.16);
  }
}
:root[data-theme="dark"]{
  --n-0:#141b2f; --n-25:#0b1020; --n-50:#1b2440; --n-100:#26304d; --n-200:#46567f;
  --n-400:#7b88a6; --n-600:#93a0bd; --n-800:#e8ecf5; --n-900:#ffffff;
  --brand-600:#4c8dff; --brand-700:#8fb8ff; --brand-50:#1e3a6b;
  --ok-600:#3ddc97; --ok-50:#101f1b; --warn-600:#ffb454; --warn-50:#3a2d0e;
  --error-600:#ff6b6b; --error-50:#2a1414; --info-600:#4c8dff; --info-50:#1e3a6b;
  --neutral-600:#93a0bd; --neutral-50:#1b2440;
  --ev-measured:#3ddc97; --ev-estimated:#ffb454; --ev-inferred:#afa9ec; --ev-synthetic:#7b88a6;
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 12px rgba(0,0,0,.45);
  --dim:rgba(255,255,255,.10); --accent-soft:#a8c8ff; --sel:#16224a; --on-accent:#ffffff;
  --ok-line:#1f5c46; --warn-line:#6b5416; --warn-text:#ffd68a; --bad-line:#7a2626; --violet-soft:#241f4a;
  --overlay-1:rgba(255,255,255,.06); --overlay-2:rgba(255,255,255,.10); --overlay-3:rgba(255,255,255,.16);
}

/* Type scale (section 4.2) and identifiers. */
.t-title{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.t-section{font-size:16px;line-height:24px;font-weight:600}
.t-body{font-size:14px;line-height:20px}
.t-secondary{font-size:13px;line-height:18px;color:var(--muted)}
.t-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.mono,code,kbd,.clname,.gc-lockup .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mono{font-size:13px}




/* Light theme. Every surface in the app already draws from these variables, so

   the theme is an override rather than a parallel stylesheet. Set on <html> by

   app.js before first paint so there is no dark flash on load. */

/* Surfaces with hardcoded dark values rather than variables — they stayed dark

   under the light theme. The login card was the worst:dark panel, muted text,

   3.05 contrast against a 4.5 AA floor. */

/* Pale text written for dark surfaces. On the light theme these sit on white and

   effectively vanish — "What to expect" was unreadable at 1.58 contrast. Swept

   the stylesheet for hardcoded colours that fail on white rather than fixing

   them one report at a time; these are the ones on neutral surfaces. */

/* Badges and panels with hardcoded dark fills — they stayed dark islands on an

   otherwise light page. */

/* Instance chips are state-tinted with hardcoded dark fills, so in light theme

   they rendered as dark boxes with the instance name unreadable inside them. */

/* Launch-panel additions (Part 19) carry dark fills too. */
*{box-sizing:border-box;margin:0;padding:0}

body{background:var(--bg);color:var(--text);font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}

button{font:inherit;cursor:pointer}

input,select{font:inherit}



/* ---------- login ---------- */

#login{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden}

#login::before{content:"";position:absolute;inset:-30%;z-index:0;

  background:

    none;

    none;

    none;

    none;

  filter:blur(28px);animation:drift 26s ease-in-out infinite alternate}

@keyframes drift{

  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}

  50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(4deg)}

  100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg)}

}

#login::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;

  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);

  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 75%)}

@media (prefers-reduced-motion:reduce){#login::before{animation:none}}

.login-card{position:relative;z-index:1;width:min(560px,92vw);background:var(--overlay-2);backdrop-filter:blur(12px);

  border:1px solid var(--line);border-radius:18px;padding:2rem 2.25rem}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:.35rem}

.brand-mark{width:36px;height:36px}

.brand h1{font-size:26px;font-weight:600;letter-spacing:-.02em}

.brand .chip{margin-left:auto}
.brand .gc-lockup{margin-left:auto}

.chip{background:var(--accent-dim);color:var(--accent-soft);font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;letter-spacing:.02em}

.sub{color:var(--muted);font-size:13.5px;margin-bottom:1.4rem}

.users{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:1.1rem}

.user{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);

  border-radius:10px;padding:9px 11px;text-align:left;color:var(--text);transition:border-color .15s,background .15s}

.user:hover{border-color:var(--line-strong);background:var(--surface2)}

.user[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-dim)}

.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:var(--on-accent)}

.user-n{font-size:13px;font-weight:500;line-height:1.2}

.user-r{font-size:11px;color:var(--muted)}

.notice{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-text);font-size:12.5px;

  border-radius:8px;padding:9px 12px;margin-bottom:1rem;display:flex;gap:8px;align-items:flex-start}

.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:9px;padding:11px 18px;font-weight:600;font-size:14px;width:100%}

.btn:disabled{opacity:.45;cursor:not-allowed}

.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 13px;font-size:13px;font-weight:500;width:auto}

.btn-ghost:hover{border-color:var(--line-strong);background:var(--surface2)}

/* The user-guide entry is an <a> so it can be opened in a new tab and shared as
   a URL, but it sits in a row of <button>s. Anchors are inline and underlined by
   default, which left it a few pixels high and visually unlike its neighbours. */
a.btn-ghost{display:inline-flex;align-items:center;text-decoration:none;line-height:1.3}

.err{color:var(--bad);font-size:13px;margin-top:.7rem;min-height:1.1em}



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

#app{display:none;max-width:1220px;margin:0 auto;padding:1.1rem 1.5rem 3rem}

header.top{display:flex;align-items:center;gap:12px;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem}

.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}

.tabs{display:flex;gap:6px;margin-bottom:1.3rem}

.tab{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:500}

.tab:hover{color:var(--text)}

.tab.on{background:var(--surface2);border-color:var(--line);color:var(--text)}

.view{display:none}

.view.on{display:block}

h2.sec{font-size:16px;font-weight:600;margin:0 0 .8rem;letter-spacing:-.01em}

.muted{color:var(--muted)}



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

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}

.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;text-align:left;color:var(--text);transition:border-color .15s,transform .15s}

.tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}

.tile h3{font-size:16px;font-weight:600;margin-bottom:3px}

.tile p{font-size:13px;color:var(--muted);margin-bottom:10px}

.tile .meta{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center}

.pill{background:var(--accent-dim);color:var(--accent-soft);font-size:11px;padding:3px 9px;border-radius:99px;font-weight:600}



/* ---------- app grid ---------- */

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:.9rem}

.crumb button{background:none;border:0;color:var(--muted);font-size:13px;padding:0}

.crumb button:hover{color:var(--text)}

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

.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px;text-align:left;color:var(--text);transition:border-color .15s}

.card:hover{border-color:var(--line-strong)}

/* Selection was a hardcoded navy fill, which under the light theme rendered dark

   text on a dark card — the app name became unreadable. Now a themed tint plus

   an accent edge, so "picked" reads the same in both themes. */

.card.sel{border-color:var(--accent);background:var(--sel);box-shadow:inset 3px 0 0 var(--accent)}

.card h4{font-size:14px;font-weight:600;margin-top:9px}

.card .v{font-size:12px;color:var(--muted)}

.card .d{font-size:11.5px;color:var(--muted-2);margin-top:5px;line-height:1.4}

/* Star sits left of the checkbox; the checkbox owns the corner. */

.star{position:absolute;top:9px;right:32px;background:none;border:0;font-size:15px;line-height:1;padding:2px;color:var(--line-strong)}

.star.on{color:var(--warn)}

/* An explicit control for selection, so picking an app does not depend on

   knowing the whole card is clickable. */

.pick{position:absolute;top:9px;right:9px;width:17px;height:17px;margin:0;cursor:pointer;

  accent-color:var(--accent)}

/* The hidden ATTRIBUTE must actually hide.
   The UA stylesheet's [hidden]{display:none} is a bare attribute selector, so
   any class or id rule that sets display outranks it -- .bar{display:flex},
   .metrics{display:grid} and #appgrid{display:block} all did. Setting el.hidden
   then changed nothing visible:the app grid stayed on screen on lanes that
   cannot install applications, while the code and the DOM both said hidden.
   Three components had already been patched one at a time (.fm-back[hidden],
   .fm-prog[hidden], .cbody[hidden]); this states the rule once instead. */
[hidden]{display:none !important}

.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.9rem}



/* ---------- summary ---------- */

.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin-bottom:1rem}

/* LABELS IN THE LAUNCH PANEL.
   Every caption was 11.5px, weight 500, in --muted - the same size, weight and
   colour as the hint text underneath it and the prose beside it. Nothing in the
   panel had a hierarchy, so "Machine type", "Where the applications run" and
   the filesystem note all read as the same undifferentiated grey.

   Micro-caps - small, uppercase, letter-spaced, weight 600 - reads as a LABEL
   at a glance and gets out of the way of the value it describes, which is the
   thing people are actually looking for. The value carries the weight and the
   full text colour; the label is quieter but unmistakably a label. */
.metric .l,.machinerow .l,.fld .fl{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

.metric .n{font-size:19px;font-weight:600;margin-top:4px;color:var(--text);
  font-variant-numeric:tabular-nums}

/* Launch controls:labelled fields on the left, the filesystem note in its own
   box on the right, actions underneath the fields. */
.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,32%);grid-template-areas:"fields note" "actions note";gap:12px 18px;align-items:start;padding-top:.9rem;border-top:1px solid var(--line)}
.controls .fields{grid-area:fields;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.controls .actions{grid-area:actions;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls .fsnote{grid-area:note;font-size:12.5px;line-height:1.45;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:2.6em}
.controls .fsnote.warn{color:var(--warn);border-color:var(--warn-line)}
.controls .fsnote:empty{display:none}
.fld{display:flex;flex-direction:column;gap:4px}
/* .fld .fl is styled with the metric labels above so the two rows match. */
.fld .fl em{font-style:normal;opacity:.65;font-weight:500;margin-left:5px}
/* The hint sits UNDER its control, so it needs to be readable rather than
   whispered - .75 opacity on an already-muted tone was close to unreadable in
   the light theme. It stays distinct from the label above by being sentence
   case and lighter, not by being faint. */
.fld .fh{font-size:11.5px;color:var(--muted);opacity:.85;max-width:26ch;line-height:1.4}
@media (max-width:820px){.controls{grid-template-columns:1fr;grid-template-areas:"fields" "note" "actions"}}
/* The machine type is chosen, not read. Styled to sit in the metric tile. */
/* width:100% + min-width:0 on the grid item, not max-width. A percentage
   max-width on a select inside an auto-sized grid track resolves cyclically
   and the control collapsed to 18px. */
.metric{min-width:0}
/* The machine picker's own row. max-width stops the select stretching across a
   wide window, which reads as a text field rather than a dropdown, while still
   fitting the longest shape label without truncation. */
/* Managed Lustre tier table.
   The greyed rows are deliberately still LEGIBLE rather than faded to nothing:
   the point of showing them is the arithmetic, which is what explains why only
   one row can be picked. A row you cannot read teaches nobody anything. */
.tablewrap{overflow-x:auto;max-width:100%}
.lustre-tiers{border-collapse:collapse;font-size:12.5px;min-width:560px}
.lustre-tiers th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:6px 12px 6px 0;
  border-bottom:1px solid var(--line);white-space:nowrap}
.lustre-tiers td{padding:7px 12px 7px 0;border-bottom:1px solid var(--line);
  white-space:nowrap}
.lustre-tiers td.num{font-variant-numeric:tabular-nums}
.lustre-tiers tr.sel td{color:var(--text);font-weight:600;background:var(--sel)}
.lustre-tiers tr.off td{color:var(--muted)}
.lustre-tiers tr.off input{cursor:not-allowed}
.lustre-actions{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;
  margin-top:.2rem}
.lustre-live{margin-bottom:.9rem}

/* The same panel, inline on the launch page. It spans the whole controls grid
   rather than sitting in a column, because a price table squeezed into a third
   of the width is the machine-picker overlap bug all over again. */
.lustre-inline{grid-column:1 / -1;margin-top:.9rem;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface2)}
.lustre-inline .lustre-tiers{min-width:520px}

/* Stands where the app grid was on lanes that cannot install applications. */
.lanenote{display:block;margin:.6rem 0 1rem;padding:14px 16px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--line);max-width:70ch}
.lanenote strong{display:block;font-size:14px;color:var(--text);margin-bottom:5px}
.lanenote p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}

.machinerow{margin:0 0 16px;min-width:0}
/* Not a label:a sentence explaining where the preselected shape came from, so
   it keeps sentence case instead of inheriting the micro-caps above. */
#m-machine-hint{text-transform:none;letter-spacing:0;font-weight:500;
  font-size:12px;margin-top:6px;color:var(--muted)}

/* One row per cluster, with its own Delete. The confirmation opens underneath
   the cluster it applies to, so the name being typed is never ambiguous. */
.clrow{border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;margin-bottom:.45rem}
.clrow-head{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.clname{font-weight:600;font-family:ui-monospace,Consolas,monospace}
.clrow-head .btn-ghost{margin-left:auto}
.clconfirm{margin-top:.55rem;padding-top:.55rem;border-top:1px dashed var(--line)}
.clconfirm-btns{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
/* One compute group per row:partition name, shape, node cap, remove. */
.clgroup{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.clgroup-n{min-width:70px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;padding-bottom:9px}
.clgroup .cl-g-rm{padding:6px 10px}
.machinerow select.mpick{display:block;width:100%;max-width:460px;min-width:0}
.metric select.mpick{display:block;width:100%;min-width:0;font-size:15px;font-weight:600;padding:5px 8px;margin-top:3px;text-overflow:ellipsis}
.metric select.mpick:disabled{opacity:.7}
#m-machine-hint{margin-top:4px;min-height:1em}
#m-machine-hint.warn{color:var(--warn)}
/* Just launched:the card pulses so the eye lands on it. */
.chip-card.fresh{animation:freshcard 1.4s ease-out 4}
@keyframes freshcard{0%{box-shadow:0 0 0 0 rgba(76,141,255,.75)}70%{box-shadow:0 0 0 9px rgba(76,141,255,0)}100%{box-shadow:0 0 0 0 rgba(76,141,255,0)}}
/* Deploy-in-progress banner:fixed to the top, above everything. */
.updating{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;gap:12px;align-items:flex-start;background:var(--warn-soft);color:var(--warn-text);border-bottom:1px solid var(--warn-line);padding:10px 18px;font-size:13.5px}
.updating .spin{margin-top:2px;flex:none}
.updating b{color:var(--text-strong)}
.launched{display:flex;gap:12px;align-items:flex-start;background:var(--accent-dim);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 15px;margin-bottom:.9rem;font-size:13px}
.launched .spin{margin-top:2px}
.launched b{color:var(--text)}
.launched .muted{display:block;margin-top:3px;font-size:12px}
.launched .x{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;width:auto;padding:0 4px}

select{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px}

input[type=text]{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13.5px}

.go{background:var(--accent);color:var(--surface3);border:0;border-radius:9px;padding:9px 20px;font-weight:600;font-size:14px}

.go:disabled{opacity:.4;cursor:not-allowed}



/* ---------- instances ---------- */

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

.chip-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}

.chip-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}

.dot{width:9px;height:9px;border-radius:50%;flex:none}

.st-provisioning{background:var(--warn)} .st-installing{background:var(--accent)}

.st-running{background:var(--ok)} .st-stopped{background:var(--muted-2)} .st-finished{background:var(--ok)}

.st-terminated{background:var(--line)} .st-failed{background:var(--bad)}

.chip-name{font-size:13.5px;font-weight:600;font-family:ui-monospace,Consolas,monospace}

.chip-meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}

.lane{font-size:10.5px;background:var(--surface2);border:1px solid var(--line);padding:2px 8px;border-radius:99px;color:var(--muted);margin-left:auto}



/* ---------- assistant ---------- */

.ai{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}

.ai-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}

.ai-body{font-size:13.5px;color:var(--text-2);line-height:1.65}

.ai-body b{color:var(--text);font-weight:600}

table.inv{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13px}

table.inv th{background:var(--surface2);color:var(--muted);text-align:left;padding:8px 12px;font-weight:600;font-size:12px}

table.inv td{padding:8px 12px;border-top:1px solid var(--line)}

.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}



/* ---------- branding / confidentiality ---------- */

.confid{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}

.confid .cvx{height:26px;flex:none;opacity:.95}

.confid p{font-size:11.5px;line-height:1.5;color:var(--muted-2)}

.foot{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;gap:12px;

  align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}

.foot span{font-size:11.5px;color:var(--muted-2)}

.homebtn{display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--text);padding:0;border-radius:8px}

.homebtn:hover{opacity:.82}



/* ---------- instance detail ---------- */

.chip-card.clickable{cursor:pointer;transition:border-color .15s}
/* A filesystem is not a machine:amber badge, dashed edge, mount address in mono. */
.lane.lustre{background:var(--warn-soft);color:var(--warn-text);border:1px solid var(--warn-line)}
.chip-card.lustre{border-style:dashed}
.chip-card.lustre .chip-meta span:first-child{font-family:ui-monospace,Consolas,monospace}
.chip-card.clickable:hover{border-color:var(--line-strong)}

.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-top:14px}

.detail-head{display:flex;align-items:center;gap:10px;margin-bottom:.7rem}

.detail-head h3{font-size:15px;font-weight:600;font-family:ui-monospace,Consolas,monospace}

h4.dh{font-size:12px;font-weight:600;color:var(--muted);margin:1rem 0 .45rem;letter-spacing:.02em}

ul.proof{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:5px}

ul.proof li{background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;

  font-size:12.5px;font-family:ui-monospace,Consolas,monospace;color:var(--text-2)}

ul.proof li::before{content:"\2713 ";color:var(--ok);font-weight:600}

.cmd{display:flex;align-items:center;gap:9px;background:var(--accent-dim);border:1px solid var(--line);border-radius:8px;padding:8px 11px}

.cmd code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--text-2);flex:1;overflow-x:auto;white-space:nowrap}

.link{color:var(--accent);text-decoration:none;font-size:13px}

.link:hover{text-decoration:underline}



/* ---------- remote desktop ---------- */

.rdtoggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}

.rdtoggle input{width:15px;height:15px;margin:0;accent-color:var(--accent)}

.rdbox{background:var(--accent-dim);border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:.7rem}

.rdhead{display:flex;align-items:center;gap:9px;margin-bottom:.6rem;font-size:13px}

.rdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}

.rdl{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}

.rdgrid code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--text-2);

  background:var(--accent-dim);border:1px solid var(--line);border-radius:6px;padding:3px 8px;display:inline-block}



/* ---------- hero ---------- */

.hero{display:grid;grid-template-columns:1.35fr .9fr;gap:22px;align-items:center;

  background:var(--surface2);

  border-radius:16px;padding:1.7rem 1.9rem;margin-bottom:1.6rem;position:relative;overflow:hidden}

.hero::after{content:"";position:absolute;inset:0;pointer-events:none;

  background-image:linear-gradient(var(--overlay-1) 1px,transparent 1px),linear-gradient(90deg,var(--overlay-1) 1px,transparent 1px);

  background-size:38px 38px;mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 78%)}

.hero-l{position:relative;z-index:1}

.eyebrow{display:inline-block;background:var(--overlay-2);color:var(--text-strong);font-size:11px;font-weight:600;

  letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:.75rem}

.hero h1{font-size:31px;line-height:1.13;font-weight:600;letter-spacing:-.025em;color:var(--text-strong);margin-bottom:.55rem}

.hero p{font-size:14px;line-height:1.6;color:var(--text-2);max-width:47ch;margin-bottom:1.15rem}

.stats{display:flex;gap:10px;flex-wrap:wrap}

.stat{background:var(--overlay-3);border:1px solid var(--overlay-2);border-radius:11px;padding:10px 15px;min-width:96px}

.stat b{display:block;font-size:23px;font-weight:600;color:var(--text-strong);line-height:1.1}

.stat span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.hero-r{position:relative;z-index:1;display:flex;justify-content:center}

.hero-art{width:100%;max-width:300px;height:auto;border-radius:12px;background:var(--overlay-2);border:1px solid var(--overlay-2)}



/* ---------- hero art:central dogma ---------- */

/* Rungs light up left to right, so the strand reads as being transcribed

   rather than just sitting there. */

.ha-rungs line{opacity:.25;animation:haBase 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}

@keyframes haBase{0%,72%,100%{opacity:.22}18%{opacity:1}}



/* Polymerase tracks the same path the strand is drawn on. */

.ha-poly{offset-path:path("M20 95 C32 68, 48 68, 60 95 S88 122, 100 95 S128 68, 140 95");

  offset-rotate:0deg;animation:haTrack 2.8s linear infinite}

@keyframes haTrack{

  0%{offset-distance:0%;opacity:0}

  8%{opacity:.95}

  92%{opacity:.95}

  100%{offset-distance:100%;opacity:0}

}



/* Codons travelling the mRNA, in the reading direction. */

.ha-rna{stroke-dasharray:6 7;animation:haCodon 1.6s linear infinite}

@keyframes haCodon{to{stroke-dashoffset:-26}}



/* Residues settle into the fold in sequence. */

.ha-prot circle{fill:var(--ok);transform-box:fill-box;transform-origin:center;

  animation:haFold 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}

@keyframes haFold{0%,70%,100%{transform:scale(.72);opacity:.5}22%{transform:scale(1);opacity:1}}



.ha-dna path{opacity:.9}

.ha-lbl{opacity:.72;letter-spacing:.06em}



/* Slow aurora behind the panel. Sits under .hero-l/.hero-r, which are z-index 1;

   transform/opacity only so it stays on the compositor. */

.hero::before{content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;

  background:

    none;

    none;

    none;

    none;

  filter:blur(26px);animation:heroDrift 26s ease-in-out infinite alternate}

@keyframes heroDrift{

  0%{transform:translate3d(0,0,0) scale(1)}

  50%{transform:translate3d(2.5%,-3%,0) scale(1.07)}

  100%{transform:translate3d(-3%,2.5%,0) scale(1.03)}

}



@media (prefers-reduced-motion:reduce){

  .hero::before,.ha-rungs line,.ha-poly,.ha-rna,.ha-prot circle{animation:none}

  /* Hold the art in a readable state rather than wherever it froze. */

  .ha-rungs line{opacity:.85}

  .ha-prot circle{opacity:1}

  .ha-poly{opacity:0}

}

.hero-badge{position:absolute;background:var(--overlay-2);border:1px solid var(--overlay-2);color:var(--text-strong);

  font-size:11px;font-weight:500;padding:5px 11px;border-radius:99px;white-space:nowrap}

.hero-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;

  background:var(--ok);margin-right:6px;vertical-align:1px}

/* One per corner, symmetric — three badges left the composition unbalanced.

   Each dot takes its own hue so the four read as a set rather than a repeat. */

.hero-badge.b1{top:8px;left:0}

.hero-badge.b2{top:8px;right:0}

.hero-badge.b3{bottom:8px;left:0}

.hero-badge.b4{bottom:8px;right:0}

.hero-badge.b1::before{background:var(--accent)}

.hero-badge.b2::before{background:var(--warn)}

.hero-badge.b3::before{background:var(--accent)}

.hero-badge.b4::before{background:var(--ok)}

@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-r{display:none}.hero h1{font-size:25px}}



/* ---------- instance actions ---------- */

.acts{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}

.btn-ghost.danger{border-color:var(--bad-line);color:var(--bad)}

.btn-ghost.danger:hover{background:var(--bad-soft);border-color:var(--bad-line)}

.actmsg{font-size:12.5px;min-height:1.15em;margin-bottom:.5rem}



/* ---------- sticky footer + clickable stats ---------- */

/* #app is a flex column so the confidentiality footer sits at the bottom of the

   page even when a view is short, rather than floating under the content. */

#app{flex-direction:column;min-height:100vh}

#app > .view{flex:0 0 auto}

.foot{margin-top:auto}

button.stat{text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}

button.stat:hover{border-color:var(--overlay-2);background:var(--overlay-2)}



/* ---------- install progress ---------- */

.prog{display:flex;align-items:center;gap:10px;background:var(--accent-dim);border:1px solid var(--line);

  border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--text-2);margin-top:6px}

.spin{width:13px;height:13px;flex:none;border:2px solid var(--line-strong);border-top-color:var(--accent);

  border-radius:50%;animation:sp .9s linear infinite}

@keyframes sp{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.spin{animation:none}}



/* ---------- lifecycle groups ---------- */

.group{margin-bottom:1.5rem}

.group-head{display:flex;align-items:center;gap:9px;margin-bottom:.65rem}

.group-head h3{font-size:13.5px;font-weight:600;letter-spacing:.01em}

.gdot{width:9px;height:9px;border-radius:50%;flex:none}

.gcount{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;

  background:var(--surface2);border:1px solid var(--line);color:var(--muted)}

.ghint{font-size:11.5px;color:var(--muted-2);margin-left:4px}

.gdot.st-initializing{background:var(--accent)}

.gdot.st-running{background:var(--ok)}
.gdot.st-finished{background:var(--ok)}

.gdot.st-stopped{background:var(--bad)}



/* Colour the card by lifecycle so state reads at a glance, not from the label. */

.chip-card.g-initializing{border-color:var(--line-strong);background:var(--accent-dim)}

.chip-card.g-running{border-color:var(--ok-line);background:var(--ok-soft)}
.chip-card.g-finished{border-color:var(--line);background:var(--bg)}

.chip-card.g-stopped{border-color:var(--bad-line);background:var(--bg)}

.chip-card.g-initializing:hover{border-color:var(--accent)}

.chip-card.g-running:hover{border-color:var(--ok-line)}

.chip-card.g-stopped:hover{border-color:var(--bad-line)}

.dot.st-installing{background:var(--accent)}

.dot.st-failed{background:var(--bad)}

.miniprog{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;

  border-top:1px solid var(--overlay-1);font-size:11.5px;color:var(--muted)}



/* ---------- licence + cluster advice ---------- */

.lic{display:inline-block;background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-text);

  font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;margin-top:7px}

.advice{margin-top:.75rem;border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.55}

.advice.warning{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-text)}

.advice.good{background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok)}

.advice .fix{display:inline-block;margin-top:6px;opacity:.92}



/* ---------- sectioned tile view ---------- */

.appsec{margin-bottom:1.5rem}

.appsec-head{display:flex;align-items:center;gap:11px;margin-bottom:.7rem;

  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px}

.appsec-head h3{font-size:14px;font-weight:600}

.appsec-head p{font-size:12px;color:var(--muted);margin-top:1px}

.appsec-head .gcount{margin-left:auto}



/* ---------- home category cards ---------- */

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:1.5rem}

.cat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;

  text-align:left;color:var(--text);transition:border-color .15s,transform .15s}

.cat:hover{border-color:var(--line-strong);transform:translateY(-2px)}

.cat h3{font-size:16px;font-weight:600;margin-bottom:4px}

.cat p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:1rem;min-height:2.6em}

.cat-ico{display:block;width:38px;height:38px;border-radius:10px;margin-bottom:.85rem;

  background:var(--accent)}

.cat-ico.infra{background:var(--violet)}

.cat-ico.inst{background:var(--ok)}



/* Coloured cap on each category card, so the three lanes are distinguishable at

   a glance rather than by reading the heading. */

.cat{position:relative;overflow:hidden}

.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}

.cat[data-cat="science"]::before{background:var(--accent)}

.cat[data-cat="infra"]::before{background:var(--violet)}

.cat[data-cat="instances"]::before{background:var(--ok)}



/* ---------- my apps (starred) ---------- */

.myapps{background:var(--surface);border:1px solid var(--line);border-radius:14px;

  padding:1.1rem 1.3rem 1.2rem;margin-bottom:1.5rem;position:relative;overflow:hidden}

.myapps::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;

  background:var(--warn)}

.myapps-head{display:flex;align-items:center;gap:9px;margin-bottom:.9rem}

.myapps-star{color:var(--warn);font-size:15px}

.myapps-head h3{font-size:14.5px;font-weight:600}

.myapps-n{font-size:11.5px;color:var(--muted);background:var(--surface2);

  border:1px solid var(--line);border-radius:99px;padding:2px 9px}

.myapps-grid{display:flex;flex-wrap:wrap;gap:10px}

.myapp{position:relative;width:96px;background:var(--surface2);border:1px solid var(--line);

  border-radius:11px;padding:12px 8px 9px;display:flex;flex-direction:column;

  align-items:center;gap:6px;cursor:pointer;text-align:center}

.myapp:hover{border-color:var(--accent)}

.myapp .mn{font-size:11px;color:var(--muted);line-height:1.25;

  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.myapp .unstar{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;

  background:var(--surface);border:1px solid var(--line);color:var(--muted);

  font-size:12px;line-height:1;display:none;align-items:center;justify-content:center;padding:0}

.myapp:hover .unstar{display:flex}

.myapp .unstar:hover{color:var(--bad);border-color:var(--bad)}

.myapps-empty{font-size:12px;color:var(--muted)}



/* ---------- cost / burn rate ---------- */

.burn{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-start;

  background:var(--surface);border:1px solid var(--line);border-radius:12px;

  padding:.95rem 1.2rem;margin-bottom:1rem;position:relative;overflow:hidden}

.burn::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;

  background:var(--warn)}

.burn-n{display:block;font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.01em}

.burn-l{display:block;font-size:11px;color:var(--muted);margin-top:1px}

.burn-note{flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.5;margin-top:.2rem}

.chip-meta .cost{color:var(--warn)}



/* ---------- cost explorer ---------- */

.costcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:.5rem}

.costcard{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:.8rem .95rem}

.cc-l{display:block;font-size:11px;color:var(--muted)}

.cc-n{display:block;font-size:21px;font-weight:600;letter-spacing:-.01em;margin-top:2px}

.cc-s{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}

.costsrc{font-size:11px;color:var(--muted);line-height:1.5;margin:.4rem 0 1.2rem}

.costsec{margin-bottom:1.4rem}

.costsec-head{display:flex;align-items:center;gap:12px;margin-bottom:.7rem}

.costsec-head h3{font-size:14px;font-weight:600}

.costsel{margin-left:auto;background:var(--surface2);color:var(--text);

  border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px}

.urow{background:var(--surface);border:1px solid var(--line);border-radius:10px;

  padding:.7rem .9rem;margin-bottom:8px}

.uhead{display:flex;align-items:baseline;gap:9px}

.un{font-size:13.5px;font-weight:600}

.ur{font-size:10.5px;color:var(--muted);background:var(--surface2);

  border:1px solid var(--line);border-radius:99px;padding:1px 7px}

.us{margin-left:auto;font-size:13px;font-weight:600}

.ubar{height:5px;background:var(--surface2);border-radius:99px;margin:.5rem 0 .35rem;overflow:hidden}

.ufill{display:block;height:100%;background:var(--accent);border-radius:99px}

.ufill.over{background:var(--bad)}

.umeta{font-size:11px;color:var(--muted)}

.ucost{font-weight:600}

.est{color:var(--warn);cursor:help}

.cat-foot{display:flex;align-items:center;font-size:12px;color:var(--muted);

  padding-top:.8rem;border-top:1px solid var(--line)}

.cat-foot .arrow{margin-left:auto;color:var(--accent);font-size:15px}

.appsec-head.toggle{cursor:pointer}

.appsec-head h3::before{content:"\25B8 ";color:var(--muted);font-size:11px}

.appsec.open .appsec-head h3::before{content:"\25BE ";}

.appsec:not(.open) .grid{display:none}



.cat-note{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);line-height:1.5}



/* ---------- remote desktop guidance ---------- */

.rdwarn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-text);border-radius:8px;

  padding:9px 11px;font-size:12px;line-height:1.5;margin-bottom:.7rem}

.rdactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:.75rem}

.rdbtn{background:var(--accent);color:var(--surface3);text-decoration:none;font-weight:600;

  font-size:13px;padding:8px 15px;border-radius:8px;display:inline-block}

.rdbtn:hover{filter:brightness(1.08)}



/* The tile view stacks full-width rows:banner, then one block per section.

   #appgrid used to carry .grid, so the banner and every section became columns

   of a 196px auto-fit grid — the banner stretched into a full-height sliver on

   the left and the three sections were squeezed side by side. */

#appgrid{display:block}



/* ---------- theme toggle ---------- */

.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:12.5px}

.theme-toggle .theme-ico{font-size:13px;line-height:1}

.login-theme{position:absolute;top:20px;right:22px;z-index:3;

  background:var(--surface);border-color:var(--line)}



/* ---------- environment banner ---------- */

/* The environment banner is an orientation note, not an alert: brand tint on
   the surface, body text in the text colour. The token migration (Part 65)
   had mapped its old red-tinted background to --bad and painted every
   environment header solid red with red text (owner, 8 Sept 2026). */
.envbanner{display:flex;align-items:center;gap:14px;margin-bottom:.9rem;

  background:var(--sel);

  border:1px solid var(--accent);border-radius:12px;padding:1rem 1.2rem}

.envbanner h3{font-size:15.5px;font-weight:600;color:var(--text-strong)}

.envbanner p{font-size:12.5px;color:var(--text);margin-top:2px;line-height:1.5}

.envbanner p b{color:var(--text-strong)}

.env-ico{background:var(--overlay-2);border-radius:9px;padding:6px;display:flex;flex:none}

.envbanner .envhelp{margin-left:auto;border-color:var(--overlay-2);color:var(--text-strong);flex:none}

.envbanner .envhelp:hover{background:var(--overlay-2);border-color:var(--text-strong)}

.envhelp-body{display:none;background:var(--surface);border:1px solid var(--line);

  border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem;font-size:13px;line-height:1.65;color:var(--text-2)}

.envhelp-body.open{display:block}

.envhelp-body p+p{margin-top:.7rem}

.envhelp-body b{color:var(--text);font-weight:600}



/* ---------- compact catalog tiles ---------- */

.catbar{display:flex;align-items:center;gap:14px;margin-bottom:.9rem;flex-wrap:wrap}

#tilesearch{margin-left:auto;width:min(300px,60vw)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;align-items:start}

.tile2{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px;

  text-align:left;color:var(--text);transition:border-color .15s,transform .15s;display:block;width:100%}

.tile2:hover{border-color:var(--line-strong);transform:translateY(-2px)}

.tile2 h3{font-size:14px;font-weight:600;margin:9px 0 8px;line-height:1.3}

.t2-ico{display:inline-flex;background:var(--surface2);border:1px solid var(--line);

  border-radius:8px;padding:5px}

.t2-list{list-style:none;margin-bottom:11px}

.t2-list li{font-size:12px;color:var(--muted);line-height:1.65;white-space:nowrap;

  overflow:hidden;text-overflow:ellipsis}

.t2-list li.more{color:var(--muted-2);font-style:italic}

.t2-foot{display:flex;align-items:center;font-size:11.5px;color:var(--accent);

  font-weight:500;padding-top:9px;border-top:1px solid var(--line)}

.t2-foot .arrow{margin-left:auto}

.tile2.shared{border-style:dashed}



/* ---------- assistant panel (right third) ---------- */

#app{position:relative}

#agent{position:fixed;top:0;right:0;width:min(34vw,460px);height:100vh;z-index:40;

  background:var(--accent-dim);border-left:1px solid var(--line);display:flex;flex-direction:column}

#agent.hidden{transform:translateX(calc(100% - 42px))}

#agent{transition:transform .18s ease}

/* Reserve a gutter for the panel only when the window can actually afford one.

   The content column needs ~780px; the old rule reserved up to 484px at any

   width above 1100px, which at ~1150px left 711px and pushed the page into

   horizontal overflow — the layout appeared to "move to the side" with no way

   back. Below the threshold the panel simply overlays the page instead.



   The collapsed rule matters just as much:collapsing used to slide the panel

   away while #app kept the full gutter reserved, so ~400px stayed dead and the

   content never returned to full width. */

@media (min-width:1280px){

  body.has-agent #app{max-width:none;margin:0;padding-left:1.5rem;

    padding-right:calc(min(34vw,460px) + 1.5rem)}

  body.has-agent.agent-collapsed #app{padding-right:calc(42px + 1.5rem)}

}

.agent-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}

.agent-head strong{display:block;font-size:14px;font-weight:600}

.agent-sub{display:block;font-size:11px;color:var(--muted)}

#agent-toggle{margin-left:auto;padding:3px 10px;font-size:15px;line-height:1}

.agent-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}

.msg{font-size:13.5px;line-height:1.6;max-width:100%}

.msg.user{background:var(--surface2);border:1px solid var(--line);border-radius:10px;

  padding:9px 12px;align-self:flex-end;max-width:88%}

.msg.bot{color:var(--text-2)}

.msg.bot b{color:var(--text);font-weight:600}

.msg.err{color:var(--bad);font-size:12.5px}

.tools{font-size:11px;color:var(--muted-2);margin-top:5px;font-family:ui-monospace,Consolas,monospace}

.agent-suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}

.sug{background:var(--surface);border:1px solid var(--line);border-radius:99px;

  padding:5px 11px;font-size:11.5px;color:var(--muted);cursor:pointer}

.sug:hover{border-color:var(--accent);color:var(--text)}

.agent-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}

#agent-input{flex:1;background:var(--surface2);color:var(--text);border:1px solid var(--line);

  border-radius:9px;padding:9px 11px;font-size:13.5px;font-family:inherit;resize:none}

.typing{display:inline-flex;gap:3px}

.typing i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bl 1.2s infinite}

.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}

@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

@media (max-width:1100px){#agent{display:none}}



/* The collapsed panel is parked with translateX past the right edge. A fixed

   element pushed outside the viewport can still extend the scrollable area, so

   clip it rather than let the page gain a stray horizontal scrollbar that the

   user can get lost in. `clip` over `hidden` so position:sticky keeps working. */

html{overflow-x:clip}



/* Why a launch failed, shown on the chip. A dead deployment used to read

   "still provisioning", which sent people looking for a hang. */

.failwhy{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--bad);

  background:var(--bad-soft);border:1px solid var(--bad-line);border-radius:7px;padding:7px 9px}

/* Login password field */
.pwrow{display:block;margin:0 0 1rem}
.pwlbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
#pw{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;font-size:14px}
#pw:focus{outline:none;border-color:var(--accent)}
#pw:disabled{opacity:.5}

/* Collapsing the assistant used to hide the only way to bring it back.
   The panel parks with translateX(100% - 42px), so the 42px that stays on
   screen is its LEFT edge — but #agent-toggle sits at margin-left:auto, i.e.
   the right end of the header, which is precisely the part that slid away.
   The panel could then only be recovered by reloading the page, which meant
   signing in again. Reported from the deployed site.

   Fix:when parked, pin the toggle into the visible strip and hide the header
   text behind it, so the strip is a usable handle rather than a dead sliver. */
#agent .agent-head{position:relative}
#agent.hidden .agent-head{padding-left:0;padding-right:0}
#agent.hidden .agent-head > svg,
#agent.hidden .agent-head > div{opacity:0;pointer-events:none}
#agent.hidden #agent-toggle{
  position:absolute;left:0;top:0;margin:0;width:42px;height:52px;
  display:grid;place-items:center;border-radius:0;font-size:17px;
}
/* The whole parked strip reads as clickable, not just the glyph. */
#agent.hidden{cursor:pointer}
#agent.hidden .agent-log,
#agent.hidden .agent-suggest,
#agent.hidden .agent-form{pointer-events:none}

/* Below 1100px the panel is display:none, so the toggle is unreachable there
   too. Keep the button itself out of the layout in that case rather than
   leaving a control that points at something invisible. */
@media (max-width:1100px){#agent-toggle{display:none}}

/* Clovertex lockup — flower + wordmark.
   The logo used to be a single SVG containing both the mark and the word. It
   was replaced with the official flower asset, which is the mark ONLY, so the
   company name silently disappeared from the header. Set it as text beside the
   mark:it stays crisp at any zoom, follows the theme, and is selectable and
   readable to a screen reader in a way a baked-in wordmark is not. */
.cvx-lockup{display:inline-flex;align-items:center;gap:7px;line-height:1}
.cvx-lockup img{height:20px;width:auto;display:block;border-radius:3px}
.cvx-word{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);opacity:.92}
/* On the login card the lockup is the masthead, so it earns more size. */
.cvx.cvx-lockup img{height:26px}
.cvx.cvx-lockup .cvx-word{font-size:16px}

/* The hero counters are light-on-dark in BOTH themes.
   .stat span was swept into the light-theme "dark text" group along with the
   card and note styles, but unlike those its background is not white — the
   hero panel is a dark blue gradient in either theme. The result was dark
   slate text on dark blue:the labels (CATALOG TILES, MY LAUNCHES) were
   effectively invisible in light mode while the numbers above them stayed
   readable. Pin it, so a future light-theme sweep cannot silently claim it
   again. */
/* ---------- file manager ---------- */
/* A dialog rather than a view:files are a side errand from whatever the user
   was doing, and sending them to another tab loses that place. */
.fm-back{position:fixed;inset:0;background:rgba(6,10,20,.62);backdrop-filter:blur(2px);
  display:grid;place-items:center;z-index:60;padding:1.5rem}
.fm-back[hidden]{display:none}
.fm{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  width:min(860px,100%);max-height:min(80vh,720px);display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.fm-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line)}
.fm-head b{font-size:15px}
.fm-sub{color:var(--muted);font-size:12.5px}
.fm-x{margin-left:auto;background:transparent;border:0;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;padding:0 .25rem}
.fm-x:hover{color:var(--text)}
.fm-bar{display:flex;gap:.5rem;flex-wrap:wrap;padding:.75rem 1rem;
  border-bottom:1px solid var(--line)}
.fm-crumb{padding:.5rem 1rem;font-size:12.5px;color:var(--muted);min-height:1.6em}
.fm-crumb a{color:var(--accent);text-decoration:none;cursor:pointer}
.fm-crumb a:hover{text-decoration:underline}

/* Upload progress. The AWS build shows none, so a multi-gigabyte upload looks
   indistinguishable from a hang — which is exactly when users retry and make
   it worse. */
.fm-prog{height:4px;background:var(--surface2);margin:0 1rem;border-radius:2px;overflow:hidden}
.fm-prog[hidden]{display:none}
.fm-prog-in{height:100%;width:0;background:var(--accent);transition:width .18s linear}

.fm-msg{padding:.35rem 1rem;font-size:12.5px;color:var(--muted);min-height:1.2em}
.fm-msg.bad{color:var(--bad)}
.fm-list{overflow:auto;padding:.25rem .5rem 1rem;flex:1}
.fm-row{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:8px;
  cursor:pointer;font-size:13.5px}
.fm-row:hover{background:var(--surface2)}
.fm-row.on{background:var(--surface2);outline:1px solid var(--line)}
.fm-ico{width:18px;text-align:center;opacity:.85;flex:none}
.fm-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-sz,.fm-dt{color:var(--muted);font-size:12px;flex:none}
.fm-dt{width:130px;text-align:right}
.fm-sz{width:80px;text-align:right}
.fm-empty{padding:1.6rem 1rem;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:640px){.fm-dt{display:none}}

/* Answer provenance. Small and quiet when the answer is grounded in this
   platform's data; the colour does the work when it is not. */
.prov{font-size:11.5px;line-height:1.5;margin-top:.45rem;padding-top:.4rem;
  border-top:1px solid var(--line);opacity:.95}

/* A launch that installed nothing must not read as a clean success. */
.warn-not-installed {
  margin:10px 0 4px;
  padding:10px 12px;
  border-left:3px solid var(--warn);
  background:var(--warn-soft);
  border-radius:4px;
}
.warn-not-installed strong { color:var(--warn-text); font-size:13px; }
.warn-not-installed .proof { margin:6px 0; }
.warn-not-installed .muted { margin:6px 0 0; font-size:12px; }

/* --- collapsible admin sections ------------------------------------------
   The admin page rendered every section at once:spend by user, cost by
   instance, the VM inventory and the firewall table, one after another. On a
   project with real instance counts that is a long scroll to reach anything,
   and the tables are the parts you look at least often.

   Sections now open on click and remember what you left open, so the page is a
   short list of headings until you ask for detail. */
.chead{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  padding:.35rem 0;border:0;background:none;width:100%;text-align:left;color:inherit}
.chead:hover .ctitle{text-decoration:underline}
.chead:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* The arrow is the affordance, so it must be obvious which way it points and
   that it moved. */
.cchev{display:inline-block;font-size:11px;line-height:1;transition:transform .15s ease;
  color:var(--muted);flex:0 0 auto}
.chead[aria-expanded="true"] .cchev{transform:rotate(90deg)}
.ctitle{font-size:14px;font-weight:600}
/* A count next to the heading means a collapsed section still tells you whether
   it is worth opening. */
.ccount{font-size:12px;color:var(--muted);font-weight:400}
.cbody[hidden]{display:none}

/* Item 8 (2026-09-05): where a number came from, on the launch summary and the instance cards. */
.badge-basis{display:inline-block;padding:.05rem .45rem;border-radius:999px;font-size:.78em;border:1px solid transparent;white-space:nowrap}
.badge-basis.measured{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.badge-basis.mixed{background:var(--warn-soft);color:var(--warn-text);border-color:var(--warn)}
.badge-basis.estimate{background:var(--surface2);color:var(--text);border-color:var(--line)}
/* Backlog #2: per-app cluster-mode lines above the cluster advice */
.modes{margin:.5rem 0 .4rem;padding:.45rem .6rem;border-left:3px solid var(--ok);font-size:12.5px;line-height:1.45;opacity:.92}
/* Backlog #8: billing-export line under the cost cards */
.costexport{margin:.5rem 0 .8rem;padding:.5rem .7rem;border-left:3px solid var(--ok);font-size:12.5px;line-height:1.5}

/* A historical install proof must not imply a failed runtime check passed. */
ul.proof li.proof-failed{border-color:var(--danger,var(--bad))}
ul.proof li.proof-failed::before{content:"! ";color:var(--danger,var(--bad))}
/* Workbook #77 own-spend strip, #90 feedback buttons */
.myspend{margin:.4rem 0 .8rem;padding:.5rem .7rem;border-left:3px solid var(--accent);font-size:12.5px;line-height:1.5}
.myspend .bad{color:var(--bad);font-weight:600}
.fb{margin-top:.35rem;display:flex;gap:.3rem}
.fbbtn{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;padding:.1rem .35rem;opacity:.6}
.fbbtn:hover{opacity:1;border-color:var(--ok)}
.fbbtn.on{opacity:1;border-color:var(--ok);background:rgba(92,138,116,.15)}
.fbbtn:disabled{cursor:default}
/* P2: Batch/cluster detail panels */
.detail .events{margin:.3rem 0 .6rem 1rem;font-size:12.5px;line-height:1.5}
.detail .kv{display:flex;gap:.8rem;padding:.15rem 0;font-size:13px}.detail .kv span:first-child{min-width:120px;opacity:.7}

/* P1 set (AWS review): Help / Developer docs, chargeback, activity, compliance */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:1.2rem;align-items:start}
.doclist{display:flex;flex-direction:column;gap:2px;position:sticky;top:.5rem}
.doclist button{text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:.4rem .6rem;cursor:pointer;color:inherit;font:inherit;font-size:13px}
.doclist button:hover{background:rgba(92,138,116,.08)}
.doclist button.on{border-color:var(--ok);background:rgba(92,138,116,.14)}
.doclist button small{display:block;opacity:.65;font-size:11.5px;line-height:1.3}
.doclist .dl-group{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:.6rem 0 .2rem .3rem}
.docbody{min-width:0;font-size:14px;line-height:1.55}
.docbody .doc-toc{font-size:12.5px;margin:0 0 1rem;padding:.6rem .9rem;border:1px solid rgba(127,127,127,.25);border-radius:8px;columns:2;column-gap:1.2rem}
.docbody .doc-toc a{display:block;padding:.1rem 0;text-decoration:none;color:inherit;opacity:.85}
.docbody .doc-toc a.l2{padding-left:.9rem;opacity:.7}
.md h1{font-size:1.4rem;margin:.2rem 0 .8rem}.md h2{font-size:1.15rem;margin:1.6rem 0 .5rem;padding-top:.6rem;border-top:1px solid rgba(127,127,127,.25)}
.md h3{font-size:1rem;margin:1.1rem 0 .4rem}.md h4{font-size:.95rem;margin:.9rem 0 .3rem}
.md p,.md ul,.md ol{margin:.5rem 0;max-width:80ch}.md li{margin:.2rem 0}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:rgba(127,127,127,.14);padding:.05em .3em;border-radius:3px}
.md pre{background:rgba(127,127,127,.12);padding:.7rem .9rem;border-radius:8px;overflow-x:auto;font-size:12.5px;line-height:1.45}
.md pre code{background:none;padding:0}
.md table{border-collapse:collapse;font-size:12.5px;margin:.6rem 0;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid rgba(127,127,127,.3);padding:.3rem .5rem;text-align:left;vertical-align:top}
.md blockquote{margin:.6rem 0;padding:.2rem .9rem;border-left:3px solid var(--ok);opacity:.9}
.md hr{border:0;border-top:1px solid rgba(127,127,127,.3);margin:1rem 0}
.md del{opacity:.6}
.cbinputs{display:inline-flex;gap:.35rem}
.p1bar{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin:.2rem 0 .6rem;font-size:12.5px}
.p1bar select,.p1bar input{font:inherit;font-size:12.5px;padding:.2rem .35rem}
.exc{padding:.45rem .7rem;border-radius:6px;background:rgba(190,120,40,.14);border:1px solid rgba(190,120,40,.4);font-size:12.5px;margin:.3rem 0 .6rem}
.exc.ok{background:rgba(92,138,116,.12);border-color:rgba(92,138,116,.4)}
.sev{display:inline-block;padding:.05rem .45rem;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.sev-critical{background:var(--bad);color:var(--on-accent)}.sev-high{background:rgba(190,60,40,.2);color:var(--bad)}
.sev-medium{background:rgba(190,120,40,.2);color:var(--warn-text)}.sev-low{background:rgba(92,138,116,.18);color:var(--ok)}.sev-info{background:rgba(127,127,127,.18)}
.stpill{display:inline-block;padding:.05rem .45rem;border-radius:4px;font-size:11px;background:rgba(127,127,127,.15)}
.inv.fx td:nth-child(3){max-width:280px}
.inv td.wrap{white-space:normal}
.fxrow{display:flex;gap:.4rem;align-items:center}
.fxrow input{width:180px;font-size:12px}
.fxrow select{font-size:12px}
.fxrow button{font-size:12px;padding:.15rem .5rem}
@media (max-width:760px){.docs{grid-template-columns:1fr}.doclist{position:static;flex-direction:row;flex-wrap:wrap}.docbody .doc-toc{columns:1}}

/* ---------------- launch diagnosis (GF-14b, Part 57) ---------------- */
.diag { margin:.6rem 0 .9rem; padding:.7rem .9rem; border:1px solid var(--line, var(--line)); border-radius:10px; background:var(--panel-2, rgba(127,127,127,.06)); }
.diag-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.diag-list { list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.55rem; }
.diag-list li { padding:.5rem .7rem; border-left:3px solid var(--line, var(--line)); border-radius:6px; background:rgba(127,127,127,.05); }
.diag-list li.diag-err { border-left-color:var(--bad); }
.diag-list li.diag-warn { border-left-color:var(--warn); }
.diag-list li.diag-info { border-left-color:var(--line); }
.diag-list li p { margin:.3rem 0 0; font-size:12.5px; }
.diag-ev { display:block; margin-top:.3rem; font-size:11.5px; white-space:pre-wrap; word-break:break-word; opacity:.85; }
.diag-log { margin-top:.6rem; }
.diag-log summary { cursor:pointer; font-size:12.5px; }
.diag-log pre { margin:.4rem 0 0; max-height:260px; overflow:auto; font-size:11px; line-height:1.45; padding:.5rem .6rem; border-radius:6px; background:rgba(0,0,0,.06); white-space:pre-wrap; }

/* Google Cloud lockup + four-colour rule (owner's choice, 7 Sept 2026): the
   restrained treatment. Numen keeps its own identity; the rule under the header
   is Google's four brand colours as a 3px stripe, and the lockup says "on Google
   Cloud" in type. When the official partner badge artwork arrives it replaces
   the text inside .gc-lockup; nothing else changes. Never a Google-coloured
   background and never the Google logo redrawn - Google's brand rules. */
.gc-lockup{display:inline-flex;align-items:baseline;gap:.35em;font-size:13px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink,var(--text));padding:.15rem .55rem;border:1px solid var(--line,var(--line));
  border-radius:999px;white-space:nowrap}
.gc-lockup .gc-on{font-weight:400;font-size:11.5px;color:var(--muted,var(--muted))}
.gc-stripe{position:relative}
.gc-stripe::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75% 100%)}
.gc-lockup-sm{font-size:11px;padding:.05rem .45rem;margin-left:.3rem;vertical-align:middle}
.agent-head.gc-stripe{border-bottom:none}
.agent-head.gc-stripe::after{bottom:0;border-radius:0}

/* ---------------- machine metrics (Part 64) ---------------- */
.metrics{margin:.2rem 0 .8rem}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem .9rem}
.mgrid > div{display:flex;flex-direction:column;gap:.15rem;font-size:12.5px}
.mgrid b{font-size:16px;font-weight:600}
.ml{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mbar{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.mbar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.mbar.warm i{background:var(--warn)} .mbar.hot i{background:var(--bad)}
.mhist{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem}
.spark{display:block;max-width:100%}
.spark-line{fill:none;stroke:var(--accent);stroke-width:1.4}
.spark-fill{fill:var(--accent);opacity:.12}
.spark-dot{fill:var(--accent)}
.mseries{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.5rem .9rem;margin-top:.6rem}

/* ---------------- project switcher (U2) ---------------- */
.proj-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12.5px;color:var(--text)}
.proj-pill .proj-k{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.proj-pill select{border:0;background:transparent;color:var(--text);font:inherit;font-weight:600;padding:0 2px;max-width:220px}
.proj-pill:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}

/* ---------------- breadcrumbs + command palette (U2) ---------------- */
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:0 0 .5rem}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.6}
.crumbs .crumb-lane{color:var(--text-2)}
#cmdk{position:fixed;inset:0;z-index:60;background:rgba(22,29,39,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
#cmdk[hidden]{display:none}
.cmdk-card{width:min(640px,94vw);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);overflow:hidden}
#cmdk-in{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:15px;padding:14px 16px;outline:none}
#cmdk-list{list-style:none;margin:0;padding:6px 0;max-height:50vh;overflow:auto}
#cmdk-list li{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:8px 16px;font-size:13.5px;cursor:pointer}
#cmdk-list li.on{background:var(--sel)}
#cmdk-list li .muted{font-size:12px}
.cmdk-kind{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cmdk-hint{margin:0;padding:6px 16px 10px;font-size:11.5px;border-top:1px solid var(--line)}

/* ---------------- evidence chip (section 5.1; U3) ---------------- */
.ev{position:relative;display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 6px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;line-height:16px;border:1px solid transparent;vertical-align:middle;cursor:default;white-space:nowrap}
.ev i{font-style:normal;font-size:11px}
.ev-measured{color:var(--ev-measured);background:var(--ok-soft);border-color:var(--ok-line)}
.ev-estimated{color:var(--ev-estimated);background:var(--warn-soft);border-color:var(--warn-line)}
.ev-inferred{color:var(--ev-inferred);background:var(--violet-soft);border-color:var(--violet)}
.ev-synthetic{color:var(--ev-synthetic);background:var(--surface2);border-color:var(--line)}
.ev-live{color:var(--info-600);background:transparent;border-color:var(--info-600)}
.ev-cached{color:var(--muted);background:transparent;border-color:var(--line-strong)}
.ev:focus{outline:2px solid var(--accent);outline-offset:1px}
.ev-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:240px;max-width:360px;white-space:normal;padding:8px 10px;border-radius:8px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--sh-2);font-weight:400;font-size:12px;line-height:1.45}
.ev-pop b{font-weight:600;color:var(--muted);margin-right:4px}
.ev:hover .ev-pop,.ev:focus .ev-pop,.ev:focus-within .ev-pop{display:block}
.ev-synthetic-row{opacity:.7}

/* ---------------- preflight checklist (U5) ---------------- */
.pf{margin:.5rem 0 0}
.pf-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.pf-list li{display:grid;grid-template-columns:18px auto 1fr;gap:.5rem;align-items:baseline;font-size:12.5px}
.pf-list li i{font-style:normal;font-weight:700}
.pf-list li.ok i{color:var(--ok)} .pf-list li.bad i{color:var(--bad)}
.pf-list li b{font-weight:600}
.pf-list li.bad span{color:var(--bad)}
.pf-note{font-size:11.5px;margin:.35rem 0 0}
.pf-wait{font-size:12px;margin:0}

/* ---------------- licence class + qualified lanes (U6) ---------------- */
.lic-open{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.lic-restricted{background:var(--warn-soft);color:var(--warn-text);border-color:var(--warn-line)}
.lic-commercial{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.lic-noncommercial{background:var(--violet-soft);color:var(--violet);border-color:var(--violet)}
.lanes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.lq{font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--surface2)}
.lq.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.lq.off{opacity:.55;text-decoration:line-through}

/* ---------------- tables (UI standard 4.3: 40px rows, 12px cell padding) ---------------- */
.scroll{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;height:40px}
.tbl th{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:nth-child(even){background:var(--surface2)}

/* ---------------- Runs list bar + table (U4) ---------------- */
.listbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0 0 .7rem;font-size:12.5px}
.listcount{color:var(--muted);white-space:nowrap}
.listcount b{color:var(--text-strong);font-weight:600}
.listchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.fchip{font:inherit;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.fchip b{font-weight:500;color:var(--muted);margin-left:5px;font-variant-numeric:tabular-nums}
.fchip.on{background:var(--sel);border-color:var(--accent);color:var(--accent-strong)}
.fchip.on b{color:var(--accent-strong)}
.fchip.zero{opacity:.55}
.fchip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fsep{width:1px;height:16px;background:var(--line-strong);margin:0 4px}
#listq{font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);min-width:160px;margin-left:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{font:inherit;font-size:12px;padding:3px 10px;border:0;background:var(--surface);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--sel);color:var(--accent-strong);font-weight:600}
.dens{display:inline-flex;align-items:center;gap:4px;color:var(--muted);white-space:nowrap}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tbl.runs td.st{white-space:nowrap;position:relative;padding-left:16px}
.tbl.runs .rail{position:absolute;left:0;top:0;bottom:0;width:3px}
.tbl.runs .rail.st-initializing{background:var(--accent)}
.tbl.runs .rail.st-running{background:var(--ok)}
.tbl.runs .rail.st-finished{background:var(--ok);opacity:.5}
.tbl.runs .rail.st-deleting{background:var(--muted-2)}
.tbl.runs .rail.st-stopped{background:var(--warn)}
.tbl.runs .rail.st-failed{background:var(--bad)}
.tbl.runs .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.tbl.runs .stt{font-size:12.5px}
.tbl.runs .lane{white-space:nowrap}
.tbl.runs td.nm .mono{font-size:12.5px}
.tbl.runs td.det{color:var(--muted);font-size:12.5px;min-width:22ch;max-width:44ch}
.tbl.runs td.nm{white-space:nowrap}
.tbl.runs td.nm .failwhy{white-space:normal;max-width:36ch}
.tbl.runs td.st{min-width:0}
.tbl.runs td.when{white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.runs td.act{white-space:nowrap;text-align:right}
.tbl.runs td.act .btn+.btn{margin-left:4px}
.tbl.runs tr.clickable{cursor:pointer}
.tbl.runs tr.clickable:hover{background:var(--accent-dim)}
.tbl.runs tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tbl.runs tr.fresh td.nm .mono{color:var(--accent-strong)}
.tbl.runs .failwhy{margin-top:2px}
.btn.sm{font-size:12px;padding:3px 9px;width:auto;border-radius:6px}
.linkbtn{font:inherit;background:none;border:0;color:var(--accent-strong);text-decoration:underline;cursor:pointer;padding:0}
#groups.compact .tbl th,#groups.compact .tbl td{height:32px;padding:5px 10px}
#groups.compact .tbl.runs td.det{font-size:12px}

/* ---------------- role pill (U8) ---------------- */
.rolepill{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--muted);margin-left:4px;text-transform:uppercase;letter-spacing:.04em;cursor:help}
.rolepill.role-admin{color:var(--accent-strong);border-color:var(--accent);background:var(--sel)}
.rolepill.role-demo{color:var(--warn-text);border-color:var(--warn-line);background:var(--warn-soft)}
button:disabled[title]{cursor:not-allowed}

/* ---------------- assistant provenance chips + citations (U7) ---------------- */
.prov{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
/* Part 105: the record an assistant answer rests on, as console links. */
.agent-links{font-size:11.5px;line-height:1.6;margin-top:.35rem;color:var(--muted)} .agent-links .cite{margin:0 .1rem}
.prov.ungrounded{border-top-color:var(--warn-line)}
.prov-warn{color:var(--warn-text);font-weight:600;flex-basis:100%}
.prov-proj{color:var(--muted);margin-left:auto;font-size:11px}
.cite{font-family:ui-monospace,Consolas,monospace;font-size:12px;padding:0 5px;border-radius:5px;border:1px solid var(--line);background:var(--surface2);color:var(--accent-strong);text-decoration:none}
.cite:hover{border-color:var(--accent);background:var(--sel)}

/* ---------------- verification badge per OS (U6) ---------------- */
.vos{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vb{font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--surface2);cursor:help}
.vb.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.vb.warn{color:var(--warn-text);border-color:var(--warn-line);background:var(--warn-soft)}
.vb.none{font-style:italic}
.rvs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rvs .ev{font-size:10.5px;white-space:normal;line-height:1.4;text-align:left}

/* ---------------- catalogue filter rail (U6) ---------------- */
.filterrail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:.6rem 0 .8rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12.5px}
.frl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:2px}
.gcount .hid{font-weight:400;color:var(--warn-text);margin-left:6px;font-size:11px}
.rolepill.role-researcher{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}

/* ---------------- lane cards (U5) ---------------- */
.lanecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:0 0 .7rem}
.lanecard{font:inherit;text-align:left;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;position:relative}
.lanecard b{font-size:13.5px;color:var(--text-strong)}
.lanecard .lc-what{font-size:12px;color:var(--text)}
.lanecard .lc-when{font-size:11.5px;color:var(--muted)}
.lanecard .lc-state{font-size:11px;margin-top:4px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--muted);align-self:flex-start}
.lanecard.ok .lc-state{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.lanecard.warn .lc-state{color:var(--warn-text);border-color:var(--warn-line);background:var(--warn-soft)}
.lanecard.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--sel)}
.lanecard:disabled{opacity:.55;cursor:not-allowed}
.lanecard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- assistant plan card (U7) ---------------- */
.plan{margin:.4rem 0 .6rem;padding:.6rem .75rem;border:1px solid var(--accent);border-radius:8px;background:var(--surface);font-size:12.5px}
.plan-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.plan-head b{font-size:13px;color:var(--text-strong)}
.plan .kv{font-size:12.5px}
.plan-lic{color:var(--warn-text);font-size:12px;margin:.3rem 0}
.plan-form{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-top:.5rem}
.plan-name{font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);flex:1 1 200px;min-width:160px}
.plan-note{font-size:11px;margin:.35rem 0 0}

/* ---------------- Unknown rows + sortable headers (U4) ---------------- */
.tbl.runs .rail.st-unknown{background:var(--muted-2)}
.tbl.runs .dot.st-unknown{background:var(--muted-2)}
.tbl.runs tr.unknown td{color:var(--muted)}
.tbl.runs tr.unknown td.nm .mono{color:var(--muted)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--text-strong)}
.tbl th.sorted{color:var(--accent-strong)}
.tbl th.sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------------- field-level errors (U5) ---------------- */
.fld.invalid select,.fld.invalid input[type=text],.fld.invalid input[type=number]{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.ferr{display:block;font-size:12px;color:var(--bad);margin-top:3px}

/* ---------------- saved views (U4) ---------------- */
.views{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex-basis:100%}
.vchip{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.vchip button{font:inherit;font-size:12px;border:0;background:none;color:var(--text);cursor:pointer;padding:2px 8px}
.vchip .vdel{padding:2px 7px;color:var(--muted);border-left:1px solid var(--line)}
.vchip .vdel:hover{color:var(--bad)}
.vchip.on{border-color:var(--accent);background:var(--sel)}
.vchip.on .vapply{color:var(--accent-strong);font-weight:600}

/* ---------------- brand (new logo, 9 Sept 2026) ---------------- */
img.brand-mark{object-fit:contain;border-radius:6px;background:transparent}

/* ---------------- Ask-lepios question card (Part 89) ---------------- */
.clarify{margin:.4rem 0 .6rem;padding:.6rem .75rem;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface);font-size:12.5px}
.clarify-q{font-weight:600;color:var(--text-strong);font-size:13px}
.clarify-why{color:var(--muted);margin-top:2px}
.clarify-opts{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:4px;counter-reset:opt}
.clarify-opts li{counter-increment:opt}
.clarify-opt{font:inherit;width:100%;text-align:left;display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-items:baseline;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface2);color:var(--text);cursor:pointer}
.clarify-opt::before{content:counter(opt);color:var(--muted);font-variant-numeric:tabular-nums;grid-row:span 2}
.clarify-opt b{font-weight:600;color:var(--text-strong)}
.clarify-opt span{grid-column:2;font-size:12px;color:var(--muted)}
.clarify-opt:hover,.clarify-opt:focus-visible{border-color:var(--accent);background:var(--sel);outline:none}
.clarify-head{display:flex;align-items:center;gap:4px;margin-bottom:.3rem}
.clarify-n{font-size:11px;color:var(--muted);margin-right:auto;letter-spacing:.03em}
.clarify-nav{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:5px;width:22px;height:22px;line-height:1;cursor:pointer}
.clarify-nav:disabled{opacity:.35;cursor:default}
.clarify-opt .cb{display:inline-block;width:12px;height:12px;border:1px solid var(--line-strong);border-radius:3px;margin-right:2px;vertical-align:-1px;grid-column:1}
.clarify-opt.on{border-color:var(--accent);background:var(--sel)}
.clarify-opt.on .cb{background:var(--accent);border-color:var(--accent)}
.clarify-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:.5rem;font-size:12px}
.clarify-free{display:flex;gap:6px;margin-top:.5rem}
.clarify-text{font:inherit;font-size:12.5px;flex:1;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text)}

/* This page: the per-page guide link sits with the page's own actions (Part 94). */
.ws-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.thispage{white-space:nowrap}
.agent-thispage{font-size:11.5px;padding:3px 8px;margin-right:6px}

/* The sizing explanation under the metric tiles (restored 10 Sept 2026). */
.sizing-note{margin:.7rem 0 .4rem;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:78ch}
.sizing-note:empty{display:none}
.sizing-note b{color:var(--text)}
.sizing-note .modes{margin:.5rem 0;padding:.5rem .7rem;border-left:3px solid var(--line);color:var(--text)}
.sizing-note .plan{margin:.4rem 0 .6rem}

/* ---------- Workflow optimization (Part 102) ---------- */
.opt-head{margin-bottom:.6rem}
.opt-dsw{display:flex;gap:8px;flex-wrap:wrap}
.opt-ds{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.opt-ds span{font-size:11.5px;color:var(--muted)}
.opt-ds.on{border-color:var(--accent);background:var(--accent-dim);box-shadow:inset 0 0 0 1px var(--accent)}
.opt-ds:disabled{opacity:.55;cursor:not-allowed}
.opt-navbar{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:.4rem 0 1rem}
.opt-nav{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.opt-nav.on{color:var(--accent);border-bottom-color:var(--accent)}
.opt-nav:hover{color:var(--text)}
.opt-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:12px}
.opt-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:.9rem 1rem;margin-bottom:12px;min-width:0}
.opt-card h3{font-size:14px;font-weight:600;margin:0 0 .5rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.opt-card.opt-on{border-color:var(--accent)}
.opt-stat{text-align:left}
.opt-stat-v{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.opt-stat-l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.opt-stat-x{font-size:11.5px;color:var(--muted);margin-top:4px}
.opt-stat-v.good,.good{color:var(--ok)} .opt-stat-v.warn,.warn{color:var(--warn-text,var(--warn))} .opt-stat-v.bad,.bad{color:var(--bad)}
.opt-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;text-transform:capitalize}
.opt-pill.opt-good{background:var(--ok-soft);color:var(--ok)} .opt-pill.opt-warning{background:var(--warn-soft);color:var(--warn-text,var(--warn))} .opt-pill.opt-critical{background:var(--bad-soft);color:var(--bad)} .opt-pill.opt-info{background:var(--accent-dim);color:var(--accent)}
.opt-list{list-style:none;padding:0;margin:0}
.opt-list li{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.opt-list li:first-child{border-top:0}
.opt-list li i{width:9px;height:9px;border-radius:50%;flex:none;position:relative;top:1px;background:var(--muted)}
.opt-list li.opt-good i{background:var(--ok)} .opt-list li.opt-warning i{background:var(--warn)} .opt-list li.opt-critical i{background:var(--bad)}
.opt-list li a{margin-left:auto;white-space:nowrap;font-size:12px}
.opt-health.opt-critical{color:var(--bad)} .opt-health.opt-warning{color:var(--warn-text,var(--warn))}
.opt-kv{width:100%;border-collapse:collapse;font-size:13px}
.opt-kv td{padding:4px 0;vertical-align:top;border-top:1px solid var(--line)}
.opt-kv tr:first-child td{border-top:0}
.opt-kv td:first-child{color:var(--muted);width:34%;padding-right:10px}
.opt-bar{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.opt-bar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-bar-t{position:relative;height:10px;background:var(--surface2);border-radius:5px;overflow:hidden}
.opt-bar-t i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:5px}
.opt-bar-t b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.55}
.opt-bar.eff.good .opt-bar-t i{background:var(--ok)} .opt-bar.eff.warn .opt-bar-t i{background:var(--warn)} .opt-bar.eff.bad .opt-bar-t i{background:var(--bad)}
.opt-bar-v{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.opt-grouped{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 18px}
.opt-grp{padding:6px 0;border-top:1px solid var(--line)}
.opt-grp-l{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.opt-line{width:100%;height:auto;font-size:10px;fill:var(--muted)}
.opt-line polyline{stroke:var(--accent);stroke-width:2}
.opt-line circle{fill:var(--accent)}
.opt-line .opt-axis{stroke:var(--line)} .opt-line .opt-target{stroke:var(--ok);stroke-dasharray:4 4}
.opt-line .opt-ylab{fill:var(--muted)}
.opt-hist{display:flex;align-items:flex-end;gap:2px;height:110px;padding-top:6px}
.opt-hist i{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:1px}
.opt-hist-x{display:flex;justify-content:space-between;font-size:11px;margin-top:4px}
.opt-actions{padding-left:1.2rem;margin:0;font-size:13px} .opt-actions li{margin-bottom:.5rem}
.opt-quick{border-left:3px solid var(--instrument,var(--accent))}
.opt-tablewrap{overflow-x:auto}
.opt-table th{cursor:pointer;white-space:nowrap;user-select:none}
.opt-table th.asc::after{content:" \25B2"} .opt-table th.desc::after{content:" \25BC"}
.opt-table td.num,.opt-table th.num{text-align:right}
.opt-table td.mono{font-size:12.5px}
.opt-form{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;opacity:.75}
.opt-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.opt-gloss dt{font-weight:600;font-size:13px;margin-top:.6rem} .opt-gloss dd{margin:.15rem 0 0;font-size:13px;color:var(--muted)}
.opt-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt-mini div{display:flex;flex-direction:column} .opt-mini b{font-size:20px;font-variant-numeric:tabular-nums} .opt-mini span{font-size:11.5px;color:var(--muted)}
#v-optimize .ws-heading-actions{margin-bottom:.4rem}

/* Part 103: the engine service's surfaces - Get Recommendations from job
   history in the sizing panel, the Job Browser on Jobs, the live training
   and Load data forms. A live form drops the dimming the disabled ones carry. */
.opt-form.live{opacity:1}
.opt-form input[type=number],.opt-form input[type=text],.opt-form input[type=search],.opt-form select{min-width:0}
.skel{display:flex;flex-direction:column;gap:6px;padding:.4rem 0}
.skel i{display:block;height:14px;border-radius:4px;background:var(--surface2);animation:skel 1.2s ease-in-out infinite}
.skel i:nth-child(2){width:80%} .skel i:nth-child(3){width:60%} .skel i:nth-child(4){width:70%}
@keyframes skel{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.skel i{animation:none}}
.hist-rec{margin-top:.5rem} .hist-rec .hr-head{font-size:13px;margin-bottom:.3rem} .hist-rec .hr-head b{color:var(--text-strong)}
.hist-rec .opt-form{gap:8px 12px} .hist-rec .opt-form label{font-size:11.5px}
.hr-table{width:auto;min-width:360px} .hr-table th{font-size:11px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);text-align:left;padding:2px 8px}
.hr-table th.num,.hr-table td.num{text-align:right} .hr-table td{padding:2px 8px;font-size:12.5px}
.hr-sbatch{margin:.4rem 0 0;padding:.5rem .6rem;background:var(--surface2);border:1px solid var(--line);border-radius:6px;font-size:12px;white-space:pre;overflow-x:auto}
.plan.hrres{border-color:var(--line)}
.jb-toolbar{margin-bottom:.4rem} .jb-toolbar label{min-width:120px}
.opt-table.jb td,.opt-table.jb th{white-space:nowrap} .opt-table.jb td.mono{font-size:12px}
.opt-runs td,.opt-runs th{white-space:nowrap;font-size:12.5px}
.opt-confirm{border-color:var(--accent);margin-top:.6rem}
.opt-rates{margin-top:.5rem;font-size:13px} .opt-rates summary{cursor:pointer;color:var(--accent)}
.opt-card h3 .btn-ghost.sm{font-size:12px;padding:2px 9px;border-radius:6px}
#jobs-accounting{margin-top:12px}