/* Homestead — premium dark control surface */
:root{
  --hdr:74px; --blur:26px;
  --bg:#070708; --surf:#111113; --surf2:#161618; --surf3:#1d1d20;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --tx:#f3f3f5; --mut:#8d8d95; --dim:#5b5b63;
  --crit:#ff4d4f; --high:#ff7a45; --med:#ffb020; --low:#4a9eff; --ok:#3ddc91; --vio:#a78bfa;
  --r:20px; --r2:14px;
  --e:cubic-bezier(.22,.61,.36,1);
}
#lhV2Setup{display:grid;gap:16px}
#lhV2Setup .ui-progress.unknown .ui-bar i{animation-name:lh-v2-wait}
@keyframes lh-v2-wait{from{transform:translateX(0)}to{transform:translateX(185%)}}
html[data-theme="light"] .modalbox[data-context="longhorn-v2"]{background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox[data-context="longhorn-v2"] .ui-callout.warn b{color:#824600}
html[data-theme="light"] .modalbox[data-context="longhorn-v2"] .ui-bar{background:var(--line2)}
html[data-theme="light"] .modalbox[data-context="longhorn-v2"] .ui-bar i{background:var(--tx)}
html[data-theme="light"] .modalbox[data-context="longhorn-v2"] .ui-steps .current .ui-step-num{background:var(--tx);color:var(--surf);border-color:var(--tx)}
/* ---- themes ---- */
html[data-theme="light"]{
  --bg:#ececed; --surf:#ffffff; --surf2:#f6f6f7; --surf3:#ebebee;
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.16);
  --tx:#16161a; --mut:#5c5c66; --dim:#74747f;
  /* Status colours deep enough to read as text on white (4.5:1 or near):
     the dark theme's are made for a black ground and vanish on this one. */
  --crit:#c8232c; --high:#b8460b; --med:#9a5b00; --low:#1a64c2; --ok:#0b7a48; --vio:#6a4bd1;
}
/* Pills that are a tint, not a fill, take the deeper colours too. */
html[data-theme="light"] .pill.neutral,html[data-theme="light"] .pill.low{background:rgba(0,0,0,.05);color:var(--mut)}
html[data-theme="light"] .tag{background:rgba(0,0,0,.04);color:var(--mut)}html[data-theme="light"] .tag:hover{background:rgba(0,0,0,.07)}
html[data-theme="light"] .card,html[data-theme="light"] .abox,html[data-theme="light"] .flowwrap,
html[data-theme="light"] .side,html[data-theme="light"] .top,html[data-theme="light"] .fnode{
  background:linear-gradient(158deg,rgba(255,255,255,.82),rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 28px rgba(0,0,0,.09)}
html[data-theme="light"] .mark{background:linear-gradient(145deg,#1b1b20,#3a3a42);color:#fff}
/* Pop-up menus - the bell, every ⋯ menu, the cluster switcher, an address's
   card - and the unsaved-changes bar were drawn on a fixed near-black panel,
   which under the light theme left their theme-dark text unreadable. */
html[data-theme="light"] .actionmenu-pop,html[data-theme="light"] .fleet-menu,html[data-theme="light"] .ipam-pop{
  background:rgba(255,255,255,.98);color:var(--tx);box-shadow:0 16px 45px rgba(0,0,0,.16)}
html[data-theme="light"] .savebar{background:rgba(255,255,255,.94);box-shadow:0 12px 40px rgba(0,0,0,.12)}
html[data-theme="light"] .actionmenu-pop button:hover,html[data-theme="light"] .actionmenu-pop .bell-job:hover,
html[data-theme="light"] .fleet-menu button:hover,html[data-theme="light"] .fleet-menu button.on,
html[data-theme="light"] .ipam-btn:hover,html[data-theme="light"] .ipam-btn:focus-visible{background:rgba(0,0,0,.06)}
html[data-theme="light"] .actionmenu-pop button.danger{color:#c4282c}
html[data-theme="light"] .fleet-sep{background:var(--line)}
html[data-theme="light"] .ipam-pop-list button{border-color:var(--line);background:rgba(0,0,0,.02)}
html[data-theme="light"] .bell-job-msg{color:var(--mut)}
html[data-theme="light"] .actionmenu-pop .bell-all{color:#1a64c2}
html[data-theme="light"] #nav a.on,html[data-theme="light"] .btn.pri,html[data-theme="light"] .seg button.on,html[data-theme="light"] .seg>a.on{
  background:#16161a;color:#fff;border-color:#16161a}
html[data-theme="light"] .spark .ln{stroke:#16161a;filter:none}
html[data-theme="light"] .spark .fl{fill:rgba(0,0,0,.1)}
html[data-theme="light"] .donut .arc,html[data-theme="light"] .meter>span{stroke:#16161a;background:#16161a;filter:none}
html[data-theme="light"] .dcenter{fill:#16161a}
html[data-theme="light"] .donut .trk{stroke:rgba(0,0,0,.08)}
html[data-theme="light"] .podgrid i{background:rgba(0,0,0,.16)}
html[data-theme="light"] .podgrid i.wl{background:#16161a;box-shadow:none}
html[data-theme="light"] pre{background:rgba(0,0,0,.05);color:#2a2a30}
html[data-theme="light"] .av{color:#fff}
/* The neutral avatars (.n1-.n3, a grey disc) keep the theme's text colour. */
html[data-theme="light"] .av.n1,html[data-theme="light"] .av.n2,html[data-theme="light"] .av.n3{color:var(--tx)}

/* background variants */
html[data-bg="soft"] .bgfx{background:
  radial-gradient(120% 90% at 15% 0%, #16161c 0%, #0c0c11 45%, #08080b 100%)}
html[data-bg="soft"] .ray{display:none}
html[data-bg="soft"] .bgfx::after{background:
  radial-gradient(52% 42% at 22% 18%, rgba(120,140,255,.10), transparent 70%),
  radial-gradient(48% 40% at 80% 72%, rgba(255,150,190,.075), transparent 70%),
  radial-gradient(60% 50% at 55% 110%, rgba(90,220,190,.06), transparent 70%);
  filter:blur(28px)}
html[data-theme="light"][data-bg="soft"] .bgfx{background:
  radial-gradient(120% 90% at 15% 0%, #ffffff 0%, #eef0f4 45%, #e4e7ec 100%)}
html[data-theme="light"][data-bg="soft"] .bgfx::after{background:
  radial-gradient(52% 42% at 22% 18%, rgba(120,140,255,.16), transparent 70%),
  radial-gradient(48% 40% at 80% 72%, rgba(255,150,190,.14), transparent 70%)}
html[data-bg="plain"] .bgfx{background:var(--bg)}
html[data-bg="plain"] .ray,html[data-bg="plain"] .bgfx::after{display:none}
html[data-theme="light"][data-bg="gold"] .bgfx{background:
  linear-gradient(107deg,#f3f3f5 0%,#f3f3f5 14%,#ededf0 14%,#ededf0 27%,#f7f7f9 27%,#f7f7f9 44%,
  #ececef 44%,#ececef 62%,#f4f4f6 62%,#f4f4f6 78%,#eaeaee 78%,#eaeaee 100%)}
html[data-theme="light"][data-bg="gold"] .ray{opacity:.5}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font:14px/1.55 "Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:"cv05" 1,"ss03" 1,"tnum" 0;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* A browser gives buttons its own system font rather than the page's, so
   every button - "＋ Create volume" and the rest - takes the page's here.
   :where keeps this weaker than any button that sets a font of its own. */
:where(button){font-family:inherit}
.bignum,.midnum,.dcenter,.vipip,.fv,.lg .v1,.lg .v2,.meter+*,.mono{
  font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.tbl th,.navlbl,.crumb,.acol h4,.sec{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600}
/* ---- the backdrop the glass actually blurs: black panels + thin gold rays ---- */
.bgfx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(107deg, #0c0c0d 0%, #0c0c0d 14%, #08080a 14%, #08080a 27%,
                            #101012 27%, #101012 44%, #0a0a0c 44%, #0a0a0c 62%,
                            #0e0e10 62%, #0e0e10 78%, #08080a 78%, #08080a 100%);
}
.bgfx::after{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 45% at 20% 12%, rgba(212,175,110,.05), transparent 65%),
    radial-gradient(55% 40% at 82% 68%, rgba(212,175,110,.045), transparent 66%);
}
.ray{position:absolute;top:-30%;height:170%;width:1px;transform-origin:top center;
  transform:rotate(17deg);
  background:linear-gradient(180deg,transparent 0%,rgba(198,158,92,.42) 22%,
    rgba(232,198,130,.75) 40%,rgba(198,158,92,.4) 58%,transparent 100%)}
.ray::after{content:"";position:absolute;left:-2.5px;top:32%;width:6px;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,236,190,.95), rgba(226,190,120,.35) 45%, transparent 72%);
  filter:blur(3.5px)}
.ray.dim{background:linear-gradient(180deg,transparent,rgba(170,133,74,.3) 35%,rgba(170,133,74,.22) 65%,transparent)}
.ray.dim::after{display:none}
a{color:inherit;text-decoration:none}
.muted{color:var(--mut)} .dim{color:var(--dim)}
.small{font-size:12px} .xs{font-size:11px}
.hidden{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}
/* A thumb that can be seen on the dialogs' and pages' own grounds (#374):
   it was --surf3 on --surf, about 1.1:1. scrollbar-color is the standard
   form (Firefox, newer Chromium); strips that hide theirs set
   scrollbar-width:none, which it leaves alone. */
:root{--scroll-thumb:color-mix(in srgb,var(--tx) 26%,transparent);--scroll-thumb-hover:color-mix(in srgb,var(--tx) 42%,transparent)}
html{scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-track{background:transparent}
#app{display:flex;min-height:100vh}
/* An installed phone app owns one viewport. Content scrolls inside its
   main pane, so edge gestures cannot move the surrounding document. */
@media(max-width:900px){
  html[data-display="standalone"]{height:100%;overflow:hidden;overscroll-behavior:none}
  html[data-display="standalone"] body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
  html[data-display="standalone"] #app{flex:1;min-height:0;overflow:hidden}
  html[data-display="standalone"] .main{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}
  html[data-display="standalone"] #gate{display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain}
  html[data-display="standalone"] .gatebox{width:min(400px,100%);margin-block:auto;flex:0 0 auto}
}

/* ---------------- sidebar ---------------- */
.side{
  width:238px;flex:0 0 238px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(calc(var(--blur,26px) * 1.15)) saturate(1.3);-webkit-backdrop-filter:blur(calc(var(--blur,26px) * 1.15)) saturate(1.3);
  border-right:1px solid var(--line);box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.brand{display:flex;gap:12px;align-items:center;padding:0 20px;height:var(--hdr,74px);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.mark,.brandmark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;
  background:#101416;color:#fff;box-shadow:0 6px 20px rgba(245,158,11,.18)}
.brandmark{object-fit:contain;flex:0 0 auto}
.bname{font-weight:700;letter-spacing:.02em;font-size:15px}
.bver{font-size:10.5px;color:var(--dim);letter-spacing:.04em}
#nav{padding:16px 12px;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.navlbl{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:14px 12px 7px;font-weight:700}
#nav a{
  display:flex;gap:12px;align-items:center;padding:10px 13px;border-radius:12px;color:var(--mut);
  cursor:pointer;font-weight:600;font-size:13.5px;position:relative;
  transition:color .22s var(--e),background .22s var(--e),transform .22s var(--e);
}
#nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.75;transition:opacity .2s var(--e)}
#nav a:hover svg{opacity:1}
#nav a.on svg{opacity:1}
.iconbtn svg{width:16px;height:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}.btnicon{width:14px;height:14px;flex:0 0 auto}
/* A button keeps its label on one line; the text beside it wraps instead. */
.btn{white-space:nowrap;flex-shrink:0}
#nav a:hover{background:rgba(255,255,255,.055);color:var(--tx);transform:translateX(2px)}
#nav a.on{background:#fff;color:#0a0a0b;box-shadow:0 5px 20px rgba(255,255,255,.16)}
#nav a.on i{opacity:1}
.navbadge{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  background:var(--med);color:#15100a;font:750 10px/1 "JetBrains Mono",monospace;box-shadow:0 0 0 2px rgba(255,176,32,.12)}
.navbadge.hidden{display:none}
.sidefoot{padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.clusteralert{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-5px 0 18px;padding:12px 14px;border:1px solid rgba(255,176,32,.3);border-radius:13px;background:rgba(255,176,32,.08)}
.clusteralert.critical{border-color:rgba(255,77,79,.34);background:rgba(255,77,79,.08)}
.clusteralert.acknowledged{border-color:var(--line);background:transparent}.clusteralert>div{display:flex;flex-direction:column;gap:2px}.clusteralert b{font-size:12px}.clusteralert span{color:var(--mut);font-size:11px}

/* ---------------- persistent jobs tray ---------------- */
.jobtray{position:fixed;left:258px;right:20px;bottom:18px;z-index:42;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.jobsummary{width:min(520px,100%);min-height:54px;display:flex;align-items:center;gap:11px;padding:9px 13px;border:1px solid var(--line2);border-radius:15px;color:var(--tx);cursor:pointer;pointer-events:auto;text-align:left;background:rgba(20,20,23,.94);backdrop-filter:blur(22px);box-shadow:0 16px 50px rgba(0,0,0,.5)}
.jobsummarycopy{display:flex;flex-direction:column;min-width:0;flex:1}.jobsummarycopy b{font-size:12px}.jobsummarycopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:10.5px}
.jobpulse{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--med);box-shadow:0 0 0 5px rgba(255,176,32,.12);animation:jobpulse 1.8s ease-in-out infinite}.jobpulse.idle{background:var(--ok);box-shadow:none;animation:none}
html[data-theme="light"] .jobsummary,html[data-theme="light"] .jobpanel{background:rgba(255,255,255,.96);box-shadow:0 16px 44px rgba(0,0,0,.14)}
html[data-theme="light"] .jobchev{background:rgba(0,0,0,.04)}
@keyframes jobpulse{0%,100%{box-shadow:0 0 0 3px rgba(255,176,32,.09)}50%{box-shadow:0 0 0 7px rgba(255,176,32,.18)}}
.jobsummarypct{font:700 11px "JetBrains Mono",monospace;color:var(--mut)}.jobchev{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--mut);transition:transform .2s var(--e),background .15s}.jobchev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.jobsummary:hover .jobchev{background:rgba(255,255,255,.1);color:var(--tx)}.jobtray.open .jobchev{transform:rotate(180deg)}
.jobpanel{display:none;width:min(620px,100%);max-height:min(62vh,620px);margin-bottom:8px;overflow:hidden;border:1px solid var(--line2);border-radius:17px;background:rgba(16,16,19,.97);backdrop-filter:blur(26px);box-shadow:0 24px 70px rgba(0,0,0,.62);pointer-events:auto}.jobtray.open .jobpanel{display:block}
.jobpanelhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.jobpanelhead>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.jobpanelhead b{font-size:13px}.jobpanelhead span{color:var(--dim);font-size:10.5px}
.jobpanelhead .btn{flex:0 0 auto;white-space:nowrap}.joblist{max-height:min(53vh,530px);overflow:auto;padding:6px}
/* A job's log: its steps as a timeline, then any output, each scrolling on its own. */
.oplog-head{gap:10px;margin-bottom:8px}.oplog-head>.small{flex:1;min-width:0}
.oplog-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto}
.oplog-steps li{display:grid;grid-template-columns:62px 1fr auto;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.oplog-steps li.oplog-failed>span:nth-child(2){color:var(--crit)}.oplog-steps li.oplog-succeeded>span:nth-child(2){color:var(--ok)}
.logview.oplog-pre{height:auto;max-height:340px;margin-top:6px}
.logview.oplog-copy{max-height:120px}
.oplog-copy-progress{display:flex;align-items:baseline;gap:10px;margin:6px 0;font-size:12px}
.oplog-copy-progress>span{color:var(--mut);min-width:0}
.capacity-placement{padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:rgba(74,158,255,.05)}
.capacity-placement .ui-section{margin:0}
.jobitem{padding:11px;border-bottom:1px solid var(--line)}.jobitem:last-child{border-bottom:0}.jobitemtop,.jobfoot,.jobactions{display:flex;align-items:center;justify-content:space-between;gap:10px}.jobitemtop>div{display:flex;flex-direction:column;min-width:0}.jobitemtop b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jobitemtop span:not(.pill),.jobfoot{font-size:10px;color:var(--dim)}
.jobmeter{height:5px;margin:9px 0 7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.jobmeter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--med),var(--ok));transition:width .35s var(--e)}.jobmeter span.failed{background:var(--crit)}
.jobfoot>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jobfoot>span:last-child{flex:0 0 auto}.jobactions{justify-content:flex-end;margin-top:8px}

/* ---------------- main ---------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 30px;
  height:var(--hdr,74px);flex:0 0 auto;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(calc(var(--blur,26px) * 1.15)) saturate(1.3);-webkit-backdrop-filter:blur(calc(var(--blur,26px) * 1.15)) saturate(1.3);
}
.crumb{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.11em;font-weight:650;min-width:0;white-space:nowrap}
.crumb a,.crumb [aria-current="page"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb a{color:var(--dim);border-radius:4px;transition:color .18s var(--e)}
.crumb a:hover,.crumb a:focus-visible{color:var(--tx);outline:none}
.crumb [aria-current="page"]{color:var(--mut)}
.crumbsection{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moveitem{margin-bottom:12px}
.clhead{min-width:0}
.clurl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clver{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:26px}
.clver .iconbtn.clrecheck{width:26px;height:26px;margin-left:auto;flex:0 0 auto}
.clver .iconbtn.clrecheck .btnicon{width:13px;height:13px}
.clvernote{margin-top:10px;padding:9px 11px;font-size:11.5px;line-height:1.45}
.clver .tag{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.clver>span[id]{min-width:0;display:flex}
.clverdim{margin-top:6px}
/* Seven short steps read as one line of progress, not a grid of cards. Two
   classes, to outrank the three-column rollout layout they borrow from. */
.rollout-steps.movesteps{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:10px}
.rollout-steps.movesteps>div{padding:6px 8px;gap:6px;border-radius:9px;align-items:center}
.rollout-steps.movesteps i{margin-top:0}
.rollout-steps.movesteps b{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.rollout-steps.movesteps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.rollout-steps.movesteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scanprogress{display:inline-flex;align-items:center;gap:7px;min-height:18px;white-space:nowrap}
.scanprogress b{color:var(--med)}
.diskreason{display:block;margin-top:3px;max-width:26ch;line-height:1.35;overflow-wrap:anywhere}
.diskfindings{margin:8px 0 6px;padding-left:0;list-style:none;display:grid;gap:5px}
.diskfindings li{display:flex;align-items:center;gap:8px;font-size:12px}
.sitename{margin-bottom:14px}.sitename .row{gap:8px}.sitename input{flex:1;min-width:0}
.appfoot{display:none;padding:0 16px 22px;margin-top:-52px;color:var(--dim);
  font-size:10px;letter-spacing:.06em;text-align:center}
.crumbsep{color:var(--line2);user-select:none}
h1{margin:2px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.topright{display:flex;gap:10px;align-items:center}
.searchwrap{position:relative;display:flex;align-items:center}
.sicon{position:absolute;left:14px;pointer-events:none;color:var(--dim);font-size:13px}
.search{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--tx);border-radius:999px;
  padding:10px 16px 10px 38px;width:min(320px,30vw);outline:none;font:inherit;font-size:13px;
  transition:all .24s var(--e)
}
.search::placeholder{color:var(--dim)}
.search:focus{border-color:var(--line2);background:rgba(255,255,255,.085);width:min(400px,36vw)}
.searchresults{position:absolute;top:48px;right:0;width:min(520px,82vw);max-height:420px;overflow:auto;
  padding:7px;background:rgba(18,18,21,.96);border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.75);backdrop-filter:blur(24px);z-index:60}
.searchresults.hidden{display:none}.searchloading{padding:15px;color:var(--dim);font-size:12px}
.sresult{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:0;border-radius:11px;
  padding:10px;background:transparent;color:var(--tx);cursor:pointer}.sresult:hover{background:rgba(255,255,255,.08)}
.sresult img,.smark{width:28px;height:28px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.07);display:grid;place-items:center}
.sresult span{min-width:0}.sresult b{display:block;font-size:12.5px}.sresult small{display:block;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:15px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mut);transition:all .22s var(--e)
}
.iconbtn:hover{color:var(--tx);background:rgba(255,255,255,.1);transform:translateY(-1px)}
.update-notice{position:relative;color:var(--med)}.update-notice.has-errors{color:var(--crit)}
.update-notice>span{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  display:grid;place-items:center;background:var(--med);color:#15100a;font:750 10px/1 "JetBrains Mono",monospace;
  box-shadow:0 0 0 2px var(--surf)}.update-notice.only-errors{color:var(--crit)}.update-notice.only-errors>span{display:none}
/* Failed checks get their own mark beside the update count, never mixed into it. */
.update-notice>b{position:absolute;right:-4px;bottom:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;
  background:var(--crit);color:#fff;font:750 10px/1 "JetBrains Mono",monospace;box-shadow:0 0 0 2px var(--surf)}
.update-notice.only-errors>b{bottom:auto;top:-5px}
.spinning{animation:rot .9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

.page{padding:22px 26px 72px;max-width:1760px}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--page-gap);margin-bottom:var(--page-gap)}
/* The page's name is in the top bar; saying it again here only costs a line.
   It stays for screen readers. */
.phead h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.phead p{margin:0;color:var(--mut);font-size:12.5px}

/* ---------------- buttons ---------------- */
.btn{
  background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--tx);border-radius:12px;
  padding:9px 15px;cursor:pointer;font-size:13px;font-weight:620;display:inline-flex;align-items:center;gap:7px;
  transition:all .2s var(--e)
}
.btn:hover{background:rgba(255,255,255,.11);border-color:var(--line2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,.iconbtn:focus-visible,.tip:focus-visible{outline:2px solid var(--low);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.workloadtree{margin:0;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025)}
.workloadtree summary{display:flex;align-items:center;gap:6px;min-height:25px;padding:3px 8px;cursor:pointer;color:var(--mut);font-size:10.5px;line-height:1;white-space:nowrap;overflow:hidden;list-style:none}
.workloadtree summary::-webkit-details-marker{display:none}.workloadtree summary::before{content:"›";font-size:17px;line-height:1;transition:transform .2s var(--e)}
.workloadtree[open] summary::before{transform:rotate(90deg)}.tree-kind,.tree-branch{font-weight:700;color:var(--low)}
.tree-arrow{color:var(--dim)}.tree-hint{display:none}
.tree-body{padding:0 9px 7px}.tree-pod{border-top:1px solid rgba(255,255,255,.055);padding:7px 0 1px}
.tree-pod-head,.tree-container{display:flex;align-items:center;gap:8px;min-width:0;font-size:11.5px}
.tree-pod-head .pill,.tree-container .pill{padding:2px 7px;font-size:10px}.tree-containers{margin:7px 0 0 15px;padding-left:12px;border-left:1px solid var(--line)}
.tree-pod-head>b.mono{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-pod-head .tree-node{flex:0 1 auto;min-width:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-pod-head .pill,.tree-container .pill{flex:0 0 auto}
.tree-container>b{flex:0 1 auto;max-width:50%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-container .tree-image{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-why{margin:0 0 4px 70px;font-size:10.5px;line-height:1.35;color:var(--med);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tree-pull{margin:4px 0 2px}
/* A node card: thirty days of uptime under the head, then its meters two
   to a row where the card is wide enough, and its pods on one line. */
.node-upstrip{display:flex;align-items:center;gap:8px;margin-top:10px}
.node-upstrip .uptime-strip.mini{flex:1;min-width:0;height:12px;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px}
.node-upstrip b{min-width:44px;text-align:right}
.nodemetrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px 20px;margin-top:12px}
.nodemetrics .between{flex-wrap:nowrap;gap:8px}
.nodemetrics .between>.dim{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nodemetrics .between>.small{flex:0 0 auto}
/* A disk's name gives way before its role does: which disk is Longhorn's matters more. */
.nodemetrics .disklabel-row{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
/* Label and tags first; the use moves under them when the card is narrow,
   rather than cutting the Longhorn tag off. */
.nodemetrics .diskline-head{flex-wrap:wrap;column-gap:8px;row-gap:2px}
.nodemetrics .disklabel-row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nodemetrics .disklabel-row>.tag{flex:0 0 auto;margin-left:0}
.nodemetrics .meter{margin-top:4px}
.nodepods{display:flex;align-items:center;gap:12px;margin-top:12px}
.nodepods>span{flex:0 0 auto;white-space:nowrap}
.nodepods .podgrid{flex:1;min-width:0;margin-top:0}
.nodecard .podgrid i{width:6px;height:6px;border-radius:1.5px}
.uptime-windows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.uptime-windows>div{display:grid;gap:2px}.uptime-windows b{font-size:15px}
b.uptime-ok{color:var(--ok)}b.uptime-warn{color:var(--med)}b.uptime-bad{color:var(--crit)}b.uptime-none{color:var(--dim)}
.uptime-loghead{margin:14px 0 2px;letter-spacing:.08em}
.uptime-strip{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));gap:1px;height:26px}
.uptime-strip i{border-radius:1px;background:var(--line)}
.uptime-strip i.uptime-ok{background:var(--ok)}.uptime-strip i.uptime-warn{background:var(--med)}.uptime-strip i.uptime-bad{background:var(--crit)}
.uptime-events{display:grid;gap:5px;margin-top:6px;max-height:200px;overflow:auto}
.uptime-events>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v2list{display:grid;gap:8px;margin:6px 0}
.v2item{display:flex;gap:10px;align-items:flex-start}
.v2mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;flex:0 0 auto}
.v2mark.ok{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.v2mark.bad{background:color-mix(in srgb,var(--crit) 20%,transparent);color:var(--crit)}
.v2mark.unknown{background:var(--line2);color:var(--mut)}
.wblocked{margin:6px 0 2px;font-size:11px;line-height:1.4;color:var(--med);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tree-why.unplaced{margin-left:0}
.wrap-pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.nodeterm{height:min(62vh,560px);background:#0b0b0d;border-radius:10px;padding:6px;overflow:hidden}
.nodeterm .xterm{height:100%}
.vmstore-distro td{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:var(--surf2);padding-top:6px;padding-bottom:6px}
.pullbar{display:grid;gap:3px;margin:6px 0 2px}.pullbar .meter{height:5px}
.tree-container{padding:3px 0}.tree-branch{font-size:10px;letter-spacing:.06em;text-transform:uppercase;flex:0 0 58px}.tree-branch.init{color:var(--vio)}
.tree-image{margin-left:auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:720px){.tree-hint,.tree-image{display:none}.tree-pod-head{flex-wrap:wrap}.tree-container{flex-wrap:wrap}}
.consolebar{display:grid;grid-template-columns:1.4fr 1fr .8fr auto;gap:10px;align-items:end}.consolebar .f{margin:0}
.console-security{margin:12px 0 8px;padding:8px 10px;border-radius:9px;background:rgba(74,158,255,.08);border:1px solid rgba(74,158,255,.2);color:var(--mut);font-size:11px}
.consolestate{padding:6px 9px;border-radius:8px 8px 0 0;background:#18191d;color:var(--ok);font:600 10.5px/1.2 "JetBrains Mono",monospace;border:1px solid #292b31;border-bottom:0}
.consoleview{height:min(48vh,440px);margin:0;padding:13px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#090a0c;color:#d7dae0;border:1px solid #292b31;
  font:500 12px/1.5 "JetBrains Mono",monospace;tab-size:4}.console-stderr{color:#ff9fa3}
.consoleinput{display:flex;gap:8px;margin-top:9px}.consoleinput textarea{min-height:38px;max-height:100px;resize:vertical;font-family:"JetBrains Mono",monospace}
@media(max-width:820px){.consolebar{grid-template-columns:1fr 1fr}.consolebar .btn{align-self:stretch}.consoleview{height:42vh}}
.btn.pri{background:#fff;color:#0a0a0b;border-color:#fff}
.btn.pri:hover{background:#ededf2;box-shadow:0 8px 26px rgba(255,255,255,.2)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn.wide{width:100%;justify-content:center;padding:13px;border-radius:14px;font-size:13.5px}
.btn.danger:hover{border-color:rgba(255,77,79,.45);color:var(--crit);background:rgba(255,77,79,.09)}
.btn.ghost{background:transparent}

/* hidden means hidden, whatever display a class gives the element: a folded
   group's rows are a table body that phones show as a block, for one. */
[hidden]{display:none!important}

/* segmented toggle */
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line)}
.seg button,.seg>a{padding:8px 16px;border-radius:999px;border:0;background:transparent;color:var(--mut);
  font:inherit;font-size:12.5px;font-weight:620;cursor:pointer;transition:all .22s var(--e)}
.seg button:hover,.seg>a:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.seg button.on,.seg>a.on{background:#fff;color:#0a0a0b;box-shadow:0 3px 12px rgba(255,255,255,.18)}

/* ---------------- cards ---------------- */
.card{
  position:relative;border-radius:var(--r);padding:16px;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.028) 42%,rgba(255,255,255,.012) 100%);
  backdrop-filter:blur(var(--blur,26px)) saturate(1.25);-webkit-backdrop-filter:blur(var(--blur,26px)) saturate(1.25);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px rgba(0,0,0,.45);
  transition:transform .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(460px 180px at 80% -20%, rgba(255,255,255,.1), transparent 68%);
  transition:opacity .35s var(--e);
}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.card:hover::before{opacity:1}
.card.flat:hover{transform:none;box-shadow:none}
/* coloured wash at the bottom of a card, keyed to state */
.card.glow::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--gc,transparent));opacity:.5;
  transition:opacity .35s var(--e)
}
.card.glow:hover::after{opacity:.85}
.g-ok{--gc:rgba(61,220,145,.16)} .g-bad{--gc:rgba(255,77,79,.18)}
.g-warn{--gc:rgba(255,176,32,.16)} .g-info{--gc:rgba(74,158,255,.15)}
.g-vio{--gc:rgba(167,139,250,.16)}
.ctitle{font-size:14.5px;font-weight:660;color:var(--tx);margin:0 0 3px}
.csub{font-size:11.5px;color:var(--dim)}

.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1340px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g4,.g3,.g2{grid-template-columns:1fr}}

.bignum{font-size:36px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.midnum{font-size:28px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* pills — the coloured status chips */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;transition:all .2s var(--e)
}
.pill.crit{background:linear-gradient(135deg,#ff4d4f,#ff2d55);color:#fff;box-shadow:0 3px 14px rgba(255,77,79,.35)}
.pill.high{background:linear-gradient(135deg,#ff8a3d,#ff6a00);color:#fff;box-shadow:0 3px 14px rgba(255,122,69,.3)}
.pill.med{background:linear-gradient(135deg,#ffc247,#ffa000);color:#1a1200;box-shadow:0 3px 14px rgba(255,176,32,.3)}
.pill.low{background:rgba(255,255,255,.08);color:#d2d2da;border:1px solid var(--line2)}
.pill.ok{background:linear-gradient(135deg,#3ddc91,#12b981);color:#03251a;box-shadow:0 3px 14px rgba(61,220,145,.3)}
/* warn and info were used across the app with no style, so they read as bare text. */
.pill{white-space:nowrap}
.pill.warn{background:rgba(255,176,32,.14);color:var(--med);border:1px solid rgba(255,176,32,.34)}
.pill.info{background:rgba(74,158,255,.13);color:var(--low);border:1px solid rgba(74,158,255,.32)}
.pill.neutral{background:rgba(255,255,255,.07);color:#c9c9d1;border:1px solid var(--line)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:11.5px;font-weight:620;color:#c7c7cf;
  transition:all .2s var(--e)}
.card:hover .badge{background:rgba(255,255,255,.12)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:11px;
  font-weight:640;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#c2c2ca;margin:2px 4px 2px 0;
  transition:all .2s var(--e)}
.tag:hover{background:rgba(255,255,255,.11);border-color:var(--line2)}
.tag .dt{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{color:var(--ok);border-color:rgba(61,220,145,.26);background:rgba(61,220,145,.09)}
.tag.bad{color:var(--crit);border-color:rgba(255,77,79,.26);background:rgba(255,77,79,.09)}
.tag.warn{color:var(--med);border-color:rgba(255,176,32,.26);background:rgba(255,176,32,.09)}
.tag.gpu{color:var(--vio);border-color:rgba(167,139,250,.28);background:rgba(167,139,250,.1)}
.tag.hw{color:var(--vio);border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.1)}
.tag.capacity{color:var(--low);border-color:rgba(74,158,255,.26);background:rgba(74,158,255,.08)}
.tag.info{color:var(--low);border-color:rgba(74,158,255,.26);background:rgba(74,158,255,.09)}

.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:750;
  color:#fff;background:linear-gradient(145deg,#6d6d78,#2a2a30);flex:0 0 auto;
  box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.av.n1{background:linear-gradient(145deg,#ff7a8a,#c2374a)}
.av.n2{background:linear-gradient(145deg,#7ab6ff,#2f5fb3)}
.av.n3{background:linear-gradient(145deg,#b79cff,#5f3fb3)}
.av.appav{overflow:hidden;background:rgba(255,255,255,.08)}
.av.appav .avfallback,.av.appav img{grid-area:1/1}.av.appav img{width:100%;height:100%;object-fit:contain;padding:3px}
.tip{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:3px;border-radius:50%;
  color:var(--low);border:1px solid rgba(74,158,255,.35);font:700 10px/1 sans-serif;cursor:help;position:relative;vertical-align:1px}
.uitooltip{position:fixed;z-index:10000;width:max-content;max-width:min(320px,calc(100vw - 20px));padding:9px 11px;overflow-wrap:anywhere;white-space:normal;
  border-radius:10px;background:#111216;border:1px solid var(--line2);color:#e5e5ea;pointer-events:none;
  font:500 11.5px/1.45 Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;
  box-shadow:0 14px 40px rgba(0,0,0,.7)}
.uitooltip[hidden]{display:none}

/* detail rows (right-panel style) */
.drow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.drow:last-child{border-bottom:0}
.drow .di{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  background:rgba(255,255,255,.06);color:var(--mut);flex:0 0 auto}
.drow .dl{color:var(--mut);font-size:12.5px;flex:0 1 118px;min-width:0}
.drow .dv{font-size:12.5px;font-weight:620;flex:1;min-width:auto;text-align:right;overflow-wrap:anywhere}

/* sparkline */
.spark{width:100%;height:78px;display:block;overflow:hidden}
.spark .ln{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.4))}
.spark .fl{fill:url(#sg);opacity:.55}
.spark .base{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2.5 4.5}
.spark .band{fill:rgba(255,255,255,.05)}

/* donut */
.donut{display:block;overflow:visible}
.donut .trk{fill:none;stroke:rgba(255,255,255,.07);stroke-width:15}
.donut .arc{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:15;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.3))}
.donut .seg{fill:none;stroke-width:15;stroke-linecap:butt;opacity:.9;transition:all .2s var(--e);cursor:pointer}
.donut .seg:hover{opacity:1;stroke-width:18}
.dcenter{font-size:30px;font-weight:700;letter-spacing:-.03em;fill:#fff;font-variant-numeric:tabular-nums}
.dlabel{font-size:10.5px;fill:var(--mut)}
.legend{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.lg{display:flex;align-items:center;gap:9px;font-size:12.5px;transition:opacity .2s var(--e);cursor:default}
.lg:hover{opacity:.72}
.lg .dt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#fff}
.lg .nm{flex:1;color:#c2c2ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg .v1{font-weight:660;font-variant-numeric:tabular-nums}
.lg .v2{color:var(--dim);font-size:11px;width:36px;text-align:right;font-variant-numeric:tabular-nums}

/* flow diagram */
.flowwrap{position:relative;border-radius:var(--r);padding:22px 18px 26px;overflow-x:auto;
  background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(var(--blur,26px)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur,26px)) saturate(1.2);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.flowcols{display:flex;min-width:920px;position:relative;z-index:2}
.fcol{flex:1;display:flex;flex-direction:column;gap:10px;padding:0 12px;min-width:0}
.fcol h4{margin:0 0 10px;font-size:11.5px;font-weight:620;color:var(--dim);text-align:center}
.fnode{display:flex;align-items:center;gap:9px;padding:11px 13px 11px 15px;border-radius:12px;position:relative;
  background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);transition:all .25s var(--e)}
.fnode:hover{border-color:var(--line2);transform:translateX(3px);box-shadow:0 10px 28px rgba(0,0,0,.55)}
.fnode .accent{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:#fff;opacity:.8}
.fnode .fl1{flex:1;font-size:12.5px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode .fv{font-size:12.5px;font-weight:720;color:#d6d6de;font-variant-numeric:tabular-nums}
#flowsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#flowsvg path{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.2}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:680}
.tbl td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.tbl tbody tr{transition:background .2s var(--e)}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl.dense th{padding:8px 12px}.tbl.dense td{padding:8px 12px;font-size:12px}.eventtable .tblwrap{max-height:calc(100vh - 185px);overflow:auto}
.meter{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;min-width:64px}
.meter>span{display:block;height:100%;border-radius:99px;background:#fff;transition:width .7s var(--e)}
.meter.w>span{background:var(--med)} .meter.b>span{background:var(--crit)}
/* A drive in parts: the system's use, Longhorn's data, Longhorn's remaining room. */
.meter.split{display:flex}
.meter.split>span{border-radius:0;transition:width .7s var(--e)}
.meter.split>span:first-child{border-radius:99px 0 0 99px}
.meter.split>.seg-sys,.drivesplit .k-sys{background:var(--mut)}
.meter.split>.seg-lh,.drivesplit .k-lh{background:var(--ok)}
.meter.split>.seg-lhroom{background:var(--ok);opacity:.25}
.drivesplit{display:flex;align-items:center;gap:5px;margin-top:3px;flex-wrap:wrap}
.drivesplit i{display:inline-block;width:8px;height:8px;border-radius:2px}
.drivesplit .k-lh{margin-left:6px}
.disk-usage-caption{margin-top:3px}

/* Dashboard rankings stay compact on phones as well as on wide screens. */
.consumer-card .cardhd{padding:12px 14px 4px}
.consumer-table{table-layout:fixed}.consumer-table th{padding:6px 14px}.consumer-table th:last-child{width:94px}
.consumer-table td{padding:7px 14px;height:46px}
.consumer-identity{min-width:0}.consumer-identity>b{display:block;font-size:12.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consumer-meta{font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consumer-table .consumer-value{text-align:right;font-size:12.5px;white-space:nowrap}
.consumer-value .meter{width:68px;margin-top:4px;height:3px}
@media(max-width:560px){
  .tbl.stack.compact.consumer-table tr{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 14px;min-height:46px}
  .tbl.stack.compact.consumer-table td{height:auto;padding:0}
  .tbl.stack.compact.consumer-table td.consumer-identity{padding:0}
  .tbl.stack.compact.consumer-table .consumer-identity>b{display:block}
  .tbl.stack.compact.consumer-table .consumer-meta{display:block;font-size:11px}
  .tbl.stack.compact.consumer-table .meter{display:block}
}

.nodegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.podgrid{display:flex;flex-wrap:wrap;gap:3px;margin-top:11px}
.podgrid i{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.2);font-style:normal;
  transition:all .25s var(--e)}
.podgrid i.wl{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
.card:hover .podgrid i{background:rgba(255,255,255,.3)}
.card:hover .podgrid i.wl{background:#fff}

/* forms */
label{display:block;font-size:11.5px;color:var(--mut);margin:0 0 6px;font-weight:620}
:where(input:not([type]),input[type=text],input[type=number],input[type=password],input[type=url],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea){
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--tx);
  min-width:0;border-radius:12px;padding:10px 13px;outline:none;font:inherit;font-size:13px;transition:all .2s var(--e)}
:where(input,select,textarea):focus{border-color:var(--line2);background:rgba(255,255,255,.08)}
:where(input,textarea)::placeholder{color:var(--dim);opacity:1}
:where(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
select{color-scheme:dark}select option,select optgroup{background:var(--surf2);color:var(--tx)}
html[data-theme="light"] select{color-scheme:light}
.f{margin-bottom:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f3{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:11px}
.f4{display:grid;grid-template-columns:1fr 1fr minmax(95px,.55fr) auto auto;gap:10px;align-items:end;margin-bottom:11px}
.row-remove{align-self:end;margin-bottom:2px;color:var(--dim)}
/* A variable's value can carry a long label and a description under it; the
   key and value boxes stay level because labels keep to one line and the row
   lines up from the top. */
.env-row{align-items:start}
.env-row label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.env-row .row-remove{align-self:start;margin-top:25px}
.joinbox{padding:14px;margin:0 0 15px;border:1px solid rgba(74,158,255,.28);border-radius:13px;background:rgba(74,158,255,.06)}
.joinbox .f{margin-bottom:10px}.joinbox .note{margin:0}
.storage-guide{margin-bottom:12px}.import-device-note{margin-top:10px}
.app-profile{margin-bottom:18px;padding:15px;border:1px solid rgba(74,158,255,.28);border-radius:14px;background:rgba(74,158,255,.06)}
.app-profile.guided{border-color:rgba(61,220,145,.3);background:rgba(61,220,145,.06)}
.app-profile.dependency{border-color:rgba(255,176,32,.32);background:rgba(255,176,32,.06)}
.app-profile .settings-card-head{margin-bottom:10px}.profile-note{padding:4px 0;color:var(--mut);font-size:12px;line-height:1.45}
.app-profile .dependency-list{margin-top:10px}
.catalogue-notice{margin-bottom:14px}.catalogue-notice a{color:var(--low);text-decoration:none}.catalogue-notice a:hover{text-decoration:underline}
.deploy-volume{display:grid;gap:10px;padding:14px;margin-bottom:11px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}
.volume-title,.volume-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.volume-title>div{display:flex;align-items:center;gap:7px}
.volume-desc{margin-top:-5px}.deploy-volume-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px;align-items:end}.deploy-volume-grid>div{min-width:0}
.deploy-volume-grid .vnew{display:grid;grid-template-columns:minmax(75px,.55fr) minmax(130px,1fr);gap:10px}
.deploy-volume-grid .vnew.ram{grid-template-columns:minmax(90px,1fr)}
.deploy-volume-grid .vsub::placeholder{font-style:italic}
.deploy-volume .vcopy{margin:0;font-size:12.5px;align-items:flex-start}
.deploy-volume-grid .vnew.ram .vsc{display:none}
.deploy-volume-grid .vnew.ram>div:last-child{display:none}
.volume-foot .switch{margin:0;flex:0 0 auto}.template-source{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.035);color:var(--dim);font-size:11px;overflow-wrap:anywhere}
.hwchoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}.hwchoices .switch{padding:10px;border:1px solid var(--line);border-radius:12px;align-items:flex-start}.hwchoice>span{min-width:0;display:flex;flex-wrap:wrap;gap:5px;align-items:center}.hw-hosts{flex-basis:100%}.hw-manage{grid-column:1/-1;justify-self:start}.featurelist{display:grid;gap:10px}.featurecard{padding:14px!important}
.device-browser{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surf2)}
.device-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px;max-height:300px;overflow:auto;padding-right:4px}
.device-row{display:flex;justify-content:space-between;align-items:center;gap:9px;text-align:left;color:var(--tx);background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer}.device-row:hover{border-color:var(--line2);background:var(--surf3)}.device-row>span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px;word-break:break-all}
.switch{display:flex;gap:9px;align-items:center;cursor:pointer;user-select:none;margin-bottom:14px;font-size:13px}
.switch input{width:auto;accent-color:#fff}
.seed-note{margin:0 0 12px}.seed-editor{margin-bottom:12px;padding:14px!important}.seed-head{margin-bottom:12px}
.seed-editor textarea{min-height:220px;resize:vertical;line-height:1.55;tab-size:2}.seed-command{margin-top:9px;overflow-wrap:anywhere}
.edit-container{padding:0!important;margin-bottom:11px;overflow:hidden}.edit-container>summary{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer;list-style:none;min-width:0}.edit-container>summary::-webkit-details-marker{display:none}
.edit-container-chevron{font-size:21px;color:var(--dim);transition:transform .2s var(--e)}.edit-container[open] .edit-container-chevron{transform:rotate(90deg)}
.edit-container-title{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.edit-container-title b,.edit-container-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-container-title small{color:var(--dim);font-size:10.5px}
.edit-container-body{padding:14px;border-top:1px solid var(--line)}.subsec{margin:15px 0 9px;color:var(--mut);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
#e_containers .stepper-chip{flex-shrink:0;white-space:nowrap}
.modalbox:has(#e_containers){background:var(--surf);color:var(--tx)}
.managed-env-list{display:grid;gap:6px;margin-bottom:7px}.managed-env-list>div{display:grid;grid-template-columns:minmax(100px,1fr) minmax(130px,1.5fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(74,158,255,.05);font-size:11px}.managed-env-list>div>span:nth-child(2){color:var(--mut);overflow-wrap:anywhere}.managed-env-note,.edit-mount-note{margin:0 0 10px}
.edit-port-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(88px,.62fr) minmax(88px,.62fr) minmax(84px,.5fr) auto auto;gap:10px;align-items:end;margin-bottom:11px}
.edit-port-row .switch{margin:0 0 9px;white-space:nowrap}
.edit-port-row input:disabled{opacity:.45}.edit-mount-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}

/* full settings workspace */
.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px}
.settings-wide{grid-column:1/-1}.settings-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--module-gap);margin-bottom:var(--module-gap)}
/* A card head's buttons stay one row: squeezed beside a long title they stacked
   one above another; with the head wrapping, the row moves under the title. */
.settings-card-head>.row{flex-wrap:nowrap;flex-shrink:0}
.threshold-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.threshold-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}
.threshold-card>div:first-child{min-width:0}.threshold-values{display:flex;gap:10px;flex:0 0 auto}.threshold-values label{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:5px;margin:0;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.threshold-values input{grid-column:1/3;width:74px;padding:7px 9px;text-align:right}.threshold-values label>span:last-child{grid-column:3;grid-row:2;color:var(--dim)}
/* Media counters: its words above, three boxes in a row under them, level
   along the bottom however their labels wrap. */
.threshold-card.counters{flex-direction:column;align-items:stretch}
.smart-threshold-values{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:8px;align-items:end}.smart-threshold-values label{display:flex;flex-direction:column;gap:5px;color:var(--dim);font-size:10px}.smart-threshold-values input{width:100%;padding:7px 9px}
.warn-dot,.crit-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.warn-dot{background:var(--med)}.crit-dot{background:var(--crit)}
/* Homestead's own objects */
.self-command{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.self-command pre{flex:1;min-width:0}
.ns-new{gap:6px;flex-wrap:nowrap}.ns-new input{width:190px;padding:6px 10px;font-size:12.5px}
#nsCard .tag{margin-left:6px}
/* Notifications on this device */
#pwaCard .pwa-body{display:grid;gap:12px}
.pwa-state{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pwa-state .pill{margin-left:6px;vertical-align:1px}
.pwa-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.pwa-cats .switch{margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:11px;align-items:flex-start}
.pwa-cats .switch input{margin-top:2px}
.pwa-cats .switch>span{display:grid;gap:2px;min-width:0}
#pwaCard .sec{margin-top:4px}
.settings-list{display:grid;gap:0}.settings-list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}.settings-list-row:last-child{border-bottom:0}
.settings-list-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.settings-actions{gap:8px;margin:16px 0}
.role-summary{display:flex;flex-direction:column;gap:4px;padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.role-legend{display:grid;gap:8px;margin-top:14px}.role-legend>div{display:grid;grid-template-columns:75px 1fr;align-items:start;gap:9px}.role-legend .rolechip{justify-self:start}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}.about-grid>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.about-grid span{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.about-grid b{font-size:13px;overflow-wrap:anywhere}
.update-policy-grid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(260px,1fr);gap:14px;align-items:start;margin-bottom:14px}
.update-notify-options{display:grid;gap:8px;padding-top:21px}.maintenance-fields{grid-column:1/-1;display:grid;grid-template-columns:180px 180px 1fr;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);transition:opacity .2s var(--e)}
.maintenance-fields.muted-policy{opacity:.45}.update-days>div{display:flex;gap:5px;flex-wrap:wrap}.daypick input{position:absolute;opacity:0;pointer-events:none}.daypick span{display:grid;place-items:center;min-width:44px;height:35px;padding:0 8px;border:1px solid var(--line2);border-radius:9px;color:var(--mut);font-size:12px;cursor:pointer}.daypick input:checked+span{border-color:var(--tx);background:var(--tx);color:var(--bg);font-weight:600}.daypick input:focus-visible+span{outline:2px solid var(--vio);outline-offset:2px}

@media(max-width:900px){.settings-grid,.threshold-grid,.update-policy-grid{grid-template-columns:1fr}.settings-wide{grid-column:auto}.maintenance-fields{grid-column:auto;grid-template-columns:1fr 1fr}.update-days{grid-column:1/-1}.update-notify-options{padding-top:0}}
@media(max-width:560px){.threshold-card{align-items:flex-start;flex-direction:column}.threshold-values{width:100%}.threshold-values label{flex:1}.settings-card-head{flex-wrap:wrap}}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:15px;align-items:start}
@media(max-width:1060px){.split{grid-template-columns:1fr}}
@media(max-width:760px){.edit-port-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:6px}
  .edit-port-row .switch{grid-column:1}.edit-port-row .row-remove{grid-column:2;justify-self:end}
  .deploy-volume-grid{grid-template-columns:1fr}.deploy-volume-grid .vnew{grid-template-columns:1fr 1fr}}
.sec{margin:18px 0 9px;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--dim);font-weight:700}
pre{background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:13px;padding:15px;overflow:auto;
  font-size:11.5px;max-height:460px;line-height:1.6;color:#c6c6ce}
.logtools{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:var(--dim);font-size:11px}
.logtools .switch{margin:0}.logpick{display:flex;gap:8px;flex-wrap:wrap}.logpick label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}.logpick select{width:auto;padding:4px 8px;font-size:12px}.logsource{margin:-4px 0 6px}.logview{height:min(58vh,560px);max-height:none;white-space:pre-wrap;overflow-wrap:anywhere}
.badbg{background:var(--crit)!important}.constraintbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.blockreasons{display:flex;flex-direction:column;gap:3px;margin-top:8px;color:var(--crit);font-size:10.5px}
.dependency-list{display:grid;gap:7px}.dependency-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf2)}.dependency-row.stranded{border-color:rgba(255,77,79,.34);background:rgba(255,77,79,.06)}.dependency-danger{border-color:rgba(255,77,79,.4)!important;background:rgba(255,77,79,.08)!important;color:#ffb4b8!important}.dependency-confirm{margin-top:12px;padding:11px 12px;border:1px solid rgba(255,77,79,.3);border-radius:11px}
.volume-impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}.volume-impact{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surf2);display:grid;gap:3px}.volume-impact b{font:700 18px "JetBrains Mono",monospace}.volume-impact span{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}.volume-delete-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.volume-delete-option{display:flex;gap:10px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surf2);cursor:pointer}.volume-delete-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.volume-delete-option.danger:has(input:checked){border-color:var(--crit);box-shadow:0 0 0 1px var(--crit)}.volume-delete-option input{margin-top:3px}.volume-delete-option span{display:grid;gap:5px}.volume-delete-option small{color:var(--mut);line-height:1.5}.volume-delete-option.disabled{opacity:.48;cursor:not-allowed}

/* app store */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:14px}
/* The catalogue's front page and an app's details */
.store-section{margin-bottom:26px}
.app[role="button"]{cursor:pointer}.app[role="button"]:hover{border-color:var(--line2)}
.store-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-official{color:var(--ok);font-weight:650}
.store-tags{gap:5px;flex-wrap:wrap}
.store-why{font-size:12px;font-style:italic;color:var(--mut);line-height:1.45}
.store-card-actions{gap:6px;margin-top:auto}.store-card-actions .btn{flex:1;justify-content:center}
.store-noicon{display:grid;place-items:center;background:rgba(255,255,255,.06);border-radius:10px}
.modalbox[data-context="store"]{width:min(860px,100%)}
.store-detail-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:14px}
.store-detail-icon{width:72px;height:72px;border-radius:18px;object-fit:contain;background:rgba(255,255,255,.04);padding:6px}
.store-detail-title h3{margin:0 0 3px;font-size:21px}
.store-detail-title .store-tags{margin-top:8px}
.store-links{gap:6px;flex-wrap:wrap;margin-bottom:16px}
.store-links .btn svg{width:11px;height:11px}
.store-spot{display:flex;gap:16px;align-items:center;padding:14px;margin-bottom:16px;border:1px solid rgba(255,138,61,.35);border-radius:14px;background:rgba(255,138,61,.07)}
.store-spot p{margin:4px 0;font-size:13px;line-height:1.5}
.store-spot-badge{flex:0 0 auto;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:3px solid #ff8a3d;
  box-shadow:0 0 22px rgba(255,138,61,.45);text-align:center;font-size:10px;line-height:1.25;text-transform:uppercase;letter-spacing:.05em}
.store-spot-badge span{font-size:10px;color:var(--mut);text-transform:none;letter-spacing:0}
.store-overview{white-space:pre-line;font-size:13px;line-height:1.6;color:var(--tx);max-height:340px;overflow:auto;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);margin-bottom:14px}
.store-shots{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.store-shots img{height:130px;border-radius:10px;border:1px solid var(--line)}
.store-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.store-facts div{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;min-width:0}
.store-facts span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em}
.store-facts b{font-size:12.5px;overflow-wrap:anywhere}
@media(max-width:560px){.store-detail-head{grid-template-columns:auto minmax(0,1fr)}.store-detail-head>.btn{grid-column:1/-1}
  .store-spot{flex-direction:column;align-items:flex-start}}
.app{display:flex;flex-direction:column;gap:11px}
.app .ico{width:44px;height:44px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.06);padding:5px}
.app .nm{font-weight:680;font-size:14px}
.app .ds{font-size:12px;color:var(--mut);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.5}
.app .rp{font-size:10.5px;color:var(--dim);font-family:ui-monospace,monospace;word-break:break-all}
.store-browse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.store-modes{flex:0 0 auto}.store-metric{display:flex;align-items:center;gap:6px;color:var(--low);font:650 10.5px "JetBrains Mono",monospace}.store-metric svg{width:13px;height:13px}
.store-spotlight{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-bottom:22px;padding:20px;border-color:rgba(74,158,255,.28);background:linear-gradient(135deg,rgba(74,158,255,.11),rgba(167,139,250,.055))}
.store-spotlight-icon{width:76px;height:76px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:20px;background:rgba(255,255,255,.07)}.store-spotlight-icon img{width:58px;height:58px;object-fit:contain}.store-spotlight-icon svg{width:28px;height:28px;color:var(--low)}
.store-spotlight-copy{min-width:0}.store-eyebrow{color:var(--low);font:650 10px "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase}.store-spotlight h3{margin:3px 0 5px;font-size:20px}.store-spotlight p{margin:0;color:var(--mut);font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.store-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.store-stats span{padding:4px 8px;border:1px solid var(--line);border-radius:8px;color:var(--mut);font:600 10px "JetBrains Mono",monospace;background:rgba(255,255,255,.035)}
.store-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}.store-section-head h3{margin:0;font-size:16px}.store-section-head span{display:block;color:var(--dim);font-size:11px;margin-top:2px}.store-section-head>b{display:grid;place-items:center;min-width:32px;height:32px;border:1px solid var(--line);border-radius:10px;color:var(--mut);font:700 11px "JetBrains Mono",monospace}
@media(max-width:700px){.store-search{width:100%;flex-wrap:nowrap}.store-search .search{width:auto;min-width:0;flex:1}.store-search .btn{flex:0 0 auto}.store-browse-head{align-items:flex-start}.store-modes{max-width:100%;overflow-x:auto}.store-modes button{white-space:nowrap}.store-spotlight{grid-template-columns:58px minmax(0,1fr);gap:12px;padding:14px}.store-spotlight-icon{width:58px;height:58px;border-radius:15px}.store-spotlight-icon img{width:44px;height:44px}.store-spotlight>.btn{grid-column:1/-1}.store-spotlight h3{font-size:17px}.store-stats{margin-top:8px}}

/* cluster administration */
.cluster-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;margin-bottom:16px;border:1px solid rgba(61,220,151,.26);border-radius:18px;background:linear-gradient(135deg,rgba(61,220,151,.10),rgba(74,158,255,.045))}.cluster-hero.attention{border-color:rgba(255,176,32,.34);background:linear-gradient(135deg,rgba(255,176,32,.11),rgba(255,255,255,.025))}.cluster-hero.critical{border-color:rgba(255,77,79,.38);background:linear-gradient(135deg,rgba(255,77,79,.12),rgba(255,255,255,.025))}.cluster-hero h3{font-size:22px;margin:3px 0}.cluster-hero p{margin:0;color:var(--mut);font-size:12.5px}.cluster-kicker{color:var(--low);font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em}.cluster-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}.cluster-facts section{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--glass)}.cluster-facts span{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.cluster-facts b{font-size:16px;overflow-wrap:anywhere}.cluster-facts small{color:var(--mut);font-size:10.5px}.cluster-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cluster-wide{grid-column:1/-1}.cluster-node-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:14px}.cluster-node-card{padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}.cluster-node-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.cluster-node-metrics span{display:flex;flex-direction:column;gap:2px}.cluster-node-metrics small{font-size:10px;color:var(--dim);text-transform:uppercase}.cluster-node-metrics b{font:650 11px "JetBrains Mono",monospace}.cluster-node-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;color:var(--dim);font-size:10px}.warntext{color:var(--warn)!important}.cluster-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:8px;margin-top:14px}.cluster-service{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.022)}.cluster-service>div{display:flex;flex-direction:column;min-width:0}.cluster-service b{font-size:11px}.cluster-service span:not(.pill){font-size:10px;color:var(--dim)}.cluster-service.critical{border-color:rgba(255,77,79,.34)}.cluster-service.attention{border-color:rgba(255,176,32,.3)}.cluster-legend{margin-top:10px}.cluster-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.cluster-mini-stats span{display:flex;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--dim);font-size:10px}.cluster-mini-stats b{color:var(--tx);font:700 16px "JetBrains Mono",monospace}.cluster-csr-list,.cluster-warning-list{display:flex;flex-direction:column;gap:7px;margin:12px 0}.cluster-csr-list>div,.cluster-warning-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.cluster-csr-list span:first-child,.cluster-warning-list span:nth-child(2){display:flex;flex-direction:column;min-width:0}.cluster-csr-list b,.cluster-warning-list b{font-size:10.5px}.cluster-csr-list small,.cluster-warning-list small{color:var(--dim);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cluster-warning-list time{flex:0 0 auto;color:var(--dim);font:10px "JetBrains Mono",monospace}.cluster-onboard-preview{display:flex;align-items:center;justify-content:space-between;gap:18px}.onboard-role{padding:15px;border:1px solid rgba(74,158,255,.28);border-radius:13px;background:rgba(74,158,255,.07)}.onboard-role span{font:650 10px "JetBrains Mono",monospace;color:var(--low);text-transform:uppercase}.onboard-role b{display:block;margin:3px 0;font-size:18px}.onboard-role p{margin:0;color:var(--mut);font-size:11px}.onboard-checklist{display:flex;flex-direction:column;gap:8px;padding:0;counter-reset:onboard}.onboard-checklist li{list-style:none;display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;font-size:11px}.onboard-checklist li>span{display:grid;place-items:center;width:25px;height:25px;flex:0 0 auto;border-radius:8px;background:rgba(61,220,151,.1);color:var(--ok)}.onboard-checklist svg{width:14px;height:14px}.pxe-status{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px dashed var(--line2);border-radius:12px}.pxe-status>div{display:flex;flex-direction:column}.pxe-status span:not(.pill){color:var(--dim);font-size:10px}
@media(max-width:900px){.cluster-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cluster-layout{grid-template-columns:1fr}.cluster-wide{grid-column:auto}}
@media(max-width:600px){.cluster-hero{align-items:flex-start;padding:15px}.cluster-hero h3{font-size:18px}.cluster-facts{grid-template-columns:1fr 1fr}.cluster-facts section{padding:11px}.cluster-facts b{font-size:13px}.cluster-node-grid,.cluster-service-grid{grid-template-columns:1fr}.cluster-node-metrics{grid-template-columns:repeat(2,1fr)}.cluster-mini-stats{grid-template-columns:1fr}.cluster-warning-list>div{display:grid;grid-template-columns:auto minmax(0,1fr)}.cluster-warning-list time{grid-column:2}.cluster-onboard-preview{align-items:flex-start;flex-direction:column}.cluster-onboard-preview .btn{width:100%}.pxe-status{align-items:flex-start}}

/* modal / toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:70;padding:22px;
  backdrop-filter:blur(8px);animation:fade .2s var(--e)}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* While a dialog, a confirmation, the drawer or the phone menu is open, the
   page behind it stays where it was: a wheel over the backdrop or past the
   end of the dialog moves nothing underneath (#293). The gutter stays
   reserved so the page does not shift sideways as its scrollbar goes. The
   installed app scrolls .main instead of the page, so that is held too. */
html:has(#modal:not(.hidden)),html:has(.askdlg),html:has(.drawer.open),html:has(body.navopen){overflow:hidden;scrollbar-gutter:stable}
html[data-display="standalone"]:has(#modal:not(.hidden)) .main,html[data-display="standalone"]:has(.askdlg) .main,html[data-display="standalone"]:has(.drawer.open) .main{overflow:hidden}
.modal,.modalbox,.askdlg,.drawer{overscroll-behavior:contain}
.modalbox{background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.03));backdrop-filter:blur(40px) saturate(1.3);-webkit-backdrop-filter:blur(40px) saturate(1.3);border:1px solid var(--line2);border-radius:22px;width:min(840px,100%);
  max-height:88vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 36px 100px rgba(0,0,0,.8);animation:pop .3s var(--e)}
@keyframes pop{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modalhead{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;
  /* Nearly opaque: a blur alone does not reach through the dialog's own glass,
     so what scrolls under the title stayed readable through it. */
  background:color-mix(in srgb,var(--surf) 93%,transparent);backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2)}
#mbody{padding:22px}
/* ask() and askText(): above any open dialog, and the toast */
.askdlg{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);animation:fade .15s var(--e)}
.askbox{width:min(460px,100%);max-height:80vh;overflow-y:auto;background:color-mix(in srgb,var(--surf) 96%,transparent);border:1px solid var(--line2);
  border-radius:18px;padding:20px;box-shadow:0 30px 90px rgba(0,0,0,.75);animation:pop .2s var(--e)}
.askbox h3{margin:0 0 10px;font-size:16px}
.askmsg{margin:0 0 16px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;font-size:14px}
.askin{width:100%;margin:-4px 0 16px}
.askbtns{justify-content:flex-end;gap:8px}
#toast{position:fixed;right:22px;bottom:calc(18px + var(--tray-lift, 4px));display:flex;flex-direction:column;gap:9px;z-index:80;transition:bottom .2s var(--e)}
.tst{background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.04));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border:1px solid var(--line2);border-left:3px solid #fff;border-radius:13px;
  padding:13px 17px;min-width:250px;box-shadow:0 16px 44px rgba(0,0,0,.65);animation:slide .3s var(--e);font-size:13px}
@keyframes slide{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.tst.bad{border-left-color:var(--crit)} .tst.ok{border-left-color:var(--ok)} .tst.warn{border-left-color:var(--med)}

.empty{padding:56px 20px;text-align:center;color:var(--dim);font-size:13px}
.spin2{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.14);border-top-color:#fff;
  border-radius:50%;animation:rot .75s linear infinite;vertical-align:-3px;margin-right:8px}
.stagger>*{animation:fu .45s var(--e) both}
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*:nth-child(1){animation-delay:.02s} .stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.1s}  .stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s} .stagger>*:nth-child(6){animation-delay:.22s}
.row{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:13px}

/* inline svg icon defaults */
svg use,#nav a svg,.iconbtn svg,.sicon svg{stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- architecture view ---------- */
.arch{display:grid;grid-template-columns:1.05fr 1fr 1.25fr .85fr;gap:0;min-width:1060px;position:relative;z-index:2}
.arch.topdown{display:flex;flex-direction:column-reverse;min-width:0;gap:34px}
.arch.topdown .acol{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0}
.arch.topdown .acol h4{grid-column:1/-1;text-align:left;margin-bottom:-2px}
.flowwrap.topdown{overflow:visible;padding:22px 22px 30px}
.acol{padding:0 13px;min-width:0;display:flex;flex-direction:column;gap:12px}
.acol h4{margin:0 0 4px;font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.11em;
  text-transform:uppercase;text-align:center}
.abox{border-radius:15px;padding:13px;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  backdrop-filter:blur(calc(var(--blur,26px) * .6));-webkit-backdrop-filter:blur(calc(var(--blur,26px) * .6));
  border:1px solid var(--line);transition:all .26s var(--e)}
.abox:hover{border-color:var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.55);transform:translateY(-2px)}
.abox.sel{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 38px rgba(0,0,0,.6)}
.abox .ahd{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.abox .anm{font-size:13px;font-weight:680;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-hardware{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;flex-wrap:wrap}.arch-hardware:empty{display:none}
.copies{display:flex;flex-wrap:wrap;gap:5px}
.copy{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;font-size:10.5px;
  font-weight:620;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.26);color:#c4b5fd;
  transition:all .2s var(--e)}
.copy:hover{background:rgba(167,139,250,.22)}
.copy .cd{width:5px;height:5px;border-radius:50%;background:#3ddc91}
.copy.stale .cd{background:#ffb020}
.portchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}
.pchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;font-size:10.5px;
  font-weight:680;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.28);color:#ffc86b;
  font-variant-numeric:tabular-nums;transition:all .2s var(--e)}
.pchip:hover{background:rgba(255,176,32,.22)}
.mchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;font-size:10.5px;
  font-weight:620;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.24);color:#9fdcfd}
.archsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* Architecture: four columns left to right, joined by lines. */
:root{--arch-access:#ffb020;--arch-mount:#7dd3fc;--arch-copy:#a78bfa}
.arch-legend{gap:14px;font-size:11.5px;color:var(--mut)}
.arch-legend span{display:inline-flex;align-items:center;gap:6px}.arch-legend i{width:14px;height:3px;border-radius:2px}
.arch2wrap{position:relative;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass, rgba(255,255,255,.02))}
.arch2{position:relative;z-index:2;display:grid;grid-template-columns:minmax(120px,.7fr) minmax(190px,1.15fr) minmax(170px,1fr) minmax(220px,1.3fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.a2col{display:flex;flex-direction:column;gap:5px;min-width:0}
.a2col h4{margin:0 0 6px;font:700 10px "JetBrains Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.a2col h4 .dim{margin-left:4px}
.a2group{display:flex;flex-direction:column;gap:5px;min-width:0}
.a2group+.a2group{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.a2subhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 2px;
  color:var(--mut);font:650 10px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.a2subhead span{font-weight:500;letter-spacing:0;color:var(--dim)}
.a2jobs>summary{cursor:pointer;list-style:none;justify-content:flex-start;gap:6px}.a2jobs>summary::-webkit-details-marker{display:none}
.a2jobs>summary::before{content:"▸"/""}.a2jobs[open]>summary::before{content:"▾"/""}.a2jobs>summary>span{margin-left:auto}
.a2job{display:flex;flex-direction:column;gap:2px;padding:5px 9px;font-size:12px}
.a2jobwhen{font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2jobfailed{border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.standby-hosts{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.usage-suggest{flex-wrap:wrap;gap:8px 12px;margin:2px 0 10px}.usage-suggest .ui-help{flex:1 1 260px;margin:0}
.a2disconnected{border-color:rgba(255,77,79,.3);background:rgba(255,77,79,.035)}
.arch-head-actions{flex-wrap:wrap;justify-content:flex-end}
.a2item{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--surf2);transition:opacity .2s var(--e),border-color .2s,box-shadow .2s}
.a2wl,.a2vol{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 9px;font-size:12px}
.a2wl .av{width:20px;height:20px;border-radius:6px;font-size:10px;flex:0 0 auto}
.a2name{flex:1;min-width:0;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2meta{flex:0 0 auto;color:var(--dim);font-size:10.5px;white-space:nowrap}
.a2dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.a2act{display:none;flex:0 0 auto;border:0;background:rgba(255,255,255,.08);color:var(--tx);border-radius:6px;padding:1px 6px;cursor:pointer;font-size:11px}
.a2wl:hover .a2act{display:inline-block}.a2wl:hover .a2meta{display:none}
.a2vip{padding:8px 10px}
.a2vipip{font-size:12px;font-weight:650;margin-bottom:6px}
.a2ports{display:flex;flex-wrap:wrap;gap:4px}
.a2port{padding:2px 7px;border-radius:6px;border:1px solid rgba(255,176,32,.35);background:rgba(255,176,32,.08);color:var(--tx);font:600 10.5px "JetBrains Mono",monospace;cursor:pointer}
.a2port:hover{background:rgba(255,176,32,.2)}
.a2node{padding:8px 10px}
.a2nodehead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;font-size:12.5px}
.a2copies{display:flex;flex-wrap:wrap;gap:4px}
.a2copy{max-width:100%;padding:2px 7px;border-radius:6px;border:1px solid rgba(167,139,250,.35);background:rgba(167,139,250,.08);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2copy.stopped{border-style:dashed;color:var(--mut)}
.a2alone{opacity:.7}
.a2stopped{opacity:.55}.a2stopped .a2meta{font-style:italic}
.arch2 .dimmed{opacity:.2}
.arch2 .sel{border-color:var(--line2);box-shadow:0 0 0 1px var(--line2)}
.a2link{fill:none;stroke-width:1.2;opacity:.3;transition:opacity .2s}
.a2link.access{stroke:var(--arch-access)}.a2link.mount{stroke:var(--arch-mount)}.a2link.copy{stroke:var(--arch-copy)}
.a2link.faded{opacity:.05}.a2link.lit{opacity:.85;stroke-width:1.6}
.a2flow{fill:none;stroke-width:1.8;stroke-dasharray:4 10;animation:dash 1.4s linear infinite}
.a2flow.access{stroke:var(--arch-access)}.a2flow.mount{stroke:var(--arch-mount)}.a2flow.copy{stroke:var(--arch-copy)}
html[data-theme="light"] .a2item{background:#fff}
html[data-theme="light"] .a2act{background:rgba(0,0,0,.07)}
/* Too narrow for four columns: they pair up, and the lines, which would cross
   the page, go. Four need about 880px of board, which depends on the sidebar
   as much as the window - a 1024px window with the sidebar open has ~780 - so
   this follows the board's own width, not the window's. */
.arch2wrap{container-type:inline-size}
@container (max-width: 880px){
  .arch2{grid-template-columns:1fr 1fr;row-gap:22px;column-gap:18px}
  .archsvg{display:none}
}
@media(max-width:1000px){
  .arch2{grid-template-columns:1fr 1fr;row-gap:22px;column-gap:18px}
  .arch2wrap .archsvg{display:none}
}
@media(max-width:560px){.arch2{grid-template-columns:1fr}.arch2wrap{padding:12px}}
.archsvg path{fill:none;stroke-width:1.3}
.vipbox{text-align:center}
.vipbox .vipip{font-size:16px;font-weight:720;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---------- animated connectors ---------- */
.archsvg path.flowline{stroke-dasharray:5 9;animation:dash 1.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.archsvg circle.pulse{r:2.6;filter:drop-shadow(0 0 5px currentColor)}
.archsvg .glowpath{filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}

/* live cpu bar inside architecture workload cards */
.livebar{height:3px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:9px;position:relative}
.livebar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3ddc91,#7dd3fc);
  transition:width .9s var(--e)}
.livebar::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:sheen 2.6s var(--e) infinite}
@keyframes sheen{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

.uptime{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:620;color:#8fe3bd;
  font-family:"JetBrains Mono",ui-monospace,monospace}
.uptime .ld{width:5px;height:5px;border-radius:50%;background:#3ddc91;
  box-shadow:0 0 0 0 rgba(61,220,145,.65);animation:beat 2.4s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(61,220,145,.55)}70%{box-shadow:0 0 0 6px rgba(61,220,145,0)}100%{box-shadow:0 0 0 0 rgba(61,220,145,0)}}

/* clickable access link */
.plink{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;font-size:11px;
  font-weight:660;background:rgba(74,158,255,.12);border:1px solid rgba(74,158,255,.3);color:#8cc4ff;
  cursor:pointer;margin:2px 4px 2px 0;transition:all .2s var(--e);
  font-family:"JetBrains Mono",ui-monospace,monospace}
.plink:hover{background:rgba(74,158,255,.25);border-color:rgba(74,158,255,.55);transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(74,158,255,.22)}
.plink .ext{opacity:.65;font-size:10px}

/* ---------- settings drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(370px,94vw);z-index:90;
  background:linear-gradient(200deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  backdrop-filter:blur(40px) saturate(1.35);-webkit-backdrop-filter:blur(40px) saturate(1.35);
  border-left:1px solid var(--line2);box-shadow:none;visibility:hidden;
  transform:translateX(100%);transition:transform .38s var(--e),box-shadow .38s,visibility 0s linear .38s;overflow-y:auto}
/* Closed, it sits just past the right edge: its shadow would fall on the page. */
.drawer.open{transform:none;visibility:visible;box-shadow:-24px 0 70px rgba(0,0,0,.6);transition:transform .38s var(--e),box-shadow .38s}
.drawer h3{margin:0;font-size:15px;font-weight:680}
.drawerhd{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:var(--hdr,74px);
  border-bottom:1px solid var(--line);position:sticky;top:0;backdrop-filter:blur(20px)}
.dsec{padding:18px 20px;border-bottom:1px solid var(--line)}
.dsec h5{margin:0 0 4px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:700;
  font-family:"JetBrains Mono",ui-monospace,monospace}
.dsec p{margin:0 0 12px;font-size:11.5px;color:var(--mut)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;font-size:11.5px;font-weight:620;
  border:1px solid var(--line);background:rgba(255,255,255,.045);transition:all .2s var(--e)}
.opt:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.opt.on{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.16)}
.opt .sw{height:32px;border-radius:8px;margin-bottom:7px;border:1px solid var(--line)}
.sw-gold{background:linear-gradient(107deg,#0c0c0d,#101012 55%,#08080a);position:relative;overflow:hidden}
.sw-gold::after{content:"";position:absolute;left:30%;top:-30%;width:1px;height:160%;transform:rotate(17deg);
  background:linear-gradient(180deg,transparent,rgba(232,198,130,.9),transparent)}
.sw-soft{background:radial-gradient(120% 90% at 20% 0%,#1a1a22,#0b0b10)}
.sw-plain{background:#080809}
.rng{width:100%;accent-color:#fff;background:transparent}

/* ---------------- v1.2 additions ---------------- */
.unit{font-size:17px;font-weight:600;opacity:.55;margin-left:2px}
.kdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:1px}
.kdot.s1{background:#fff} .kdot.s2{background:#7dd3fc}
.spark .ln.s2{stroke:#7dd3fc}
.card.pad0{padding:0}
.cardhd{padding:16px 18px 2px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.clickable{cursor:pointer}
.clickable:active{transform:scale(.995)}
.note{border-radius:13px;padding:13px 15px;font-size:12.5px;color:var(--mut);
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.22)}
.note.good{background:rgba(61,220,151,.07);border-color:rgba(61,220,151,.24);color:var(--green)}
.note.bad{background:rgba(255,95,115,.07);border-color:rgba(255,95,115,.24);color:var(--red)}
.note.warn{background:rgba(255,176,32,.07);border-color:rgba(255,176,32,.26);color:var(--med)}
.vm-state-confirm{overflow-wrap:anywhere}
html[data-theme="light"] .vm-state-confirm .note.warn{color:var(--tx)}
.note code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;color:#ffc86b}
.modalbox.wide{width:min(1000px,100%)}
.abox.dimmed,.copy.dimmed{opacity:.22;filter:saturate(.4)}
.abox,.copy{transition:opacity .22s var(--e),filter .22s var(--e),transform .25s var(--e),border-color .25s var(--e)}
html[data-motion="off"] .flowline,html[data-motion="off"] .livebar::after,
html[data-motion="off"] .uptime .ld{animation:none}

/* container cards (replaces the wide table on every width) */
.cardlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.network-vips{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.netlisteners{margin-top:12px;border-top:1px solid var(--line)}
.netlisteners .drow{padding:9px 0}.netlisteners .dl{display:flex;flex-direction:column;gap:2px}
.netpath{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:"JetBrains Mono",monospace;font-size:11px}
.netpath span{padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04)}
.netpath i{font-style:normal;color:var(--low)}.netpath.big{font-size:12px;margin:10px 0}
.net-intro,.net-help{color:var(--mut);line-height:1.6;margin:0 0 16px}
html[data-theme="light"] .modalbox:has(#net_editor){background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox:has(.update-review),html[data-theme="light"] .modalbox:has(#imageQueue){background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox[data-context="operation-review"]{background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox[data-context="vm-config"]{background:var(--surf);color:var(--tx)}
.modalbox[data-context="vm-config"] .dim{color:var(--mut)}
html[data-theme="light"] .modalbox[data-context="operation-review"] .note.warn{color:#824600}
.modalbox[data-context="operation-review"] .modalhead{background:var(--surf)}
.modalbox:has(#allocationProbeDirectory) .dim{color:var(--mut)}
.vm-placement-advanced{margin:16px 0}.vm-placement-advanced summary{cursor:pointer;color:var(--mut);padding:8px 0}.vm-placement-advanced[open] summary{margin-bottom:8px}.vm-placement-advanced p,#allocationProbeDiagnostics p{overflow-wrap:anywhere}
html[data-theme="light"] #net_editor .net-access-choice:has(input:checked),html[data-theme="light"] #net_editor .net-address-choice:has(input:checked){background:#edf5ff}
.net-current-access{display:flex;flex-direction:column;gap:7px;background:var(--surf2);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 20px;overflow-wrap:anywhere}
.net-current-access small,.net-address-choice small,.net-access-choice small{color:var(--mut);font-size:12px;line-height:1.5}
.net-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--mut)}
.net-access-options{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.net-access-options legend{font-weight:600;padding:0 0 12px}
#net_editor .net-access-choice,#net_editor .net-address-choice{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surf2);margin:0;cursor:pointer;min-width:0;color:var(--tx)}
#net_editor .net-access-choice:has(input:checked),#net_editor .net-address-choice:has(input:checked){border-color:var(--low);background:rgba(80,150,255,.09)}
#net_editor .net-access-choice.disabled{opacity:.5;cursor:default}
#net_editor input[type=radio]{width:16px;height:16px;flex:0 0 16px;margin:3px 0 0;accent-color:var(--low)}
.net-access-choice>span,.net-address-choice>span:not(.tag){display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere;font-weight:400}
.net-access-choice b,.net-address-choice b{font-size:13px;line-height:1.4}
.net-address-list{display:grid;gap:8px;margin:0 0 12px}
.net-address-choice .tag{margin-left:auto;flex-shrink:0}
.net-change-note{font-size:12px;line-height:1.6;border-left:3px solid var(--low);padding:8px 12px;margin:16px 0 22px;color:var(--mut)}
.net-advanced,.net-custom-address{margin:18px 0}
.net-advanced summary,.net-custom-address summary{cursor:pointer;color:var(--mut);font-size:12px;margin-bottom:12px}
#net_editor .modalactions{display:flex;gap:10px;margin-top:22px}
#net_editor .net-port{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 100px auto!important;align-items:end;gap:10px;margin-bottom:12px}
#net_editor .net-port .f{margin:0;min-width:0}
#net_editor .net-port label{font-size:11px}
@media(max-width:600px){.net-access-options{grid-template-columns:1fr}#net_editor .net-port{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.net-address-choice .tag{font-size:10px}.net-current-access{padding:12px}}
.reviewbox{margin-top:16px;padding:14px;border:1px solid rgba(74,158,255,.28);border-radius:12px;background:rgba(74,158,255,.07)}
.deploy-capacity{min-width:0;overflow-wrap:anywhere}
.deploy-capacity .drow{display:grid;grid-template-columns:minmax(70px,.7fr) minmax(0,1.7fr);align-items:start}
.deploy-capacity .dl,.deploy-capacity .dv{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.deploy-capacity .drow{grid-template-columns:minmax(0,1fr);gap:4px}.deploy-capacity .dv{text-align:left}}
.wcard{display:flex;flex-direction:column;gap:5px;padding:10px 12px;overflow:visible;container-type:inline-size}
.whead{min-height:30px}.wtitle{min-width:0;line-height:1.1}.wtitle>.dim{margin-top:2px}
/* The three numbers take the room they need and are never cut; the ports
   take what is left and give way first. */
.wmeta{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:7px 14px;padding:4px 0;
  border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.wmeta>div{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.wmeta .dim.xs{margin:0;letter-spacing:.05em;font-size:10px;flex:0 0 auto}.wmeta .mono.small{font-size:11px}
.wmeta>div>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.waccess{display:flex;align-items:center;gap:4px;min-width:0}
.waccess .plink,.waccess .tag{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.waccess .tag.more{cursor:help;flex:0 0 auto}
.waccess .more-narrow{display:none}
.wmeta [data-tip]{cursor:help}
.whead>.row:first-child{flex:1 1 auto;min-width:0;flex-wrap:nowrap}
.wtitle>div:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whead>.row:last-child{flex:0 0 auto}
.attachlist{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.volume-reason{display:block;margin-top:2px;max-width:30ch;line-height:1.35;overflow-wrap:anywhere}
.volprogress{margin-top:6px;max-width:16ch}
.volprogress span{transition:width .6s ease}
/* Keep desktop td elements in table layout. Flex only their contents, so
   multi-line names, usage and health reasons share the same row boundaries. */
.voltable .volname-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.vol-copies{overflow-wrap:anywhere}.vol-copies .warn{color:var(--med)}
.voltable .volname b{line-height:1.3;overflow-wrap:anywhere}
.voltable .volname .mono{font-size:10px;line-height:1.3}
.voltable .volusage{min-width:150px}
.voltable .volusage-body{display:flex;flex-direction:column;align-items:stretch;gap:3px;flex:1;min-width:0}
.voltable .volusage-line{display:flex;align-items:center;gap:8px;min-width:0}
.voltable .volusage .meter{flex:1}
.voltable .volusage .mono{font-size:10px;white-space:normal;overflow-wrap:anywhere}
.voltable td{vertical-align:middle}
.voltable .volactions{width:1%;white-space:nowrap}
.voltable .volactions .row{gap:4px;flex-wrap:nowrap;justify-content:flex-end}
.voltable .iconbtn{width:28px;height:28px}
.voltable .iconbtn.danger{color:var(--red);border-color:rgba(255,95,115,.28)}
.voltable .iconbtn.danger:hover{background:rgba(255,95,115,.1)}
.snapshot-timeline{position:relative;display:flex;flex-direction:column;gap:14px;padding:12px 0}
.snapshot-timeline::before{content:"";position:absolute;top:30px;bottom:40px;left:19px;width:2px;background:var(--line)}
.snapshot-point{position:relative;display:flex;gap:14px;align-items:flex-start;min-width:0}
.snapshot-marker{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:var(--surf);border:1px solid var(--line);color:var(--low)}
.snapshot-marker svg{width:19px;height:19px}
html[data-theme="light"] .modalbox[data-context="snapshot-files"]{background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox[data-context="snapshot-files"] .ui-callout.warn b{color:#824600}
html[data-theme="light"] .modalbox[data-context="snapshot-files"] .ui-bar{background:var(--line2)}
html[data-theme="light"] .modalbox[data-context="snapshot-files"] .ui-bar i{background:var(--tx)}
html[data-theme="light"] .modalbox[data-context="snapshot-files"] .ui-steps .current .ui-step-num{background:var(--tx);color:var(--surf);border-color:var(--tx)}
.modalbox[data-context="snapshot-files"] .dim{color:var(--mut)}
.snapshot-content{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(100,140,240,.08),transparent)}
.snapshot-content .between{gap:8px;flex-wrap:wrap}.snapshot-content b{overflow-wrap:anywhere;min-width:0}
.snapshot-date{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:7px 0;font-size:12px}
.snapshot-actions{margin-top:10px;gap:6px;flex-wrap:wrap}
.snapshot-point.system .snapshot-marker{color:var(--dim)}
.snapshot-point.head .snapshot-marker{color:var(--green)}
.snapshot-point.head .snapshot-content{display:flex;gap:6px;flex-direction:column;border-color:rgba(45,210,150,.3)}
@media(max-width:560px){.snapshot-point{gap:8px}.snapshot-content{padding:10px}.snapshot-marker{width:32px;height:32px;flex-basis:32px}.snapshot-timeline::before{left:15px}}
/* volume file browser */
.filecrumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:12px}
.linkish{background:none;border:0;color:var(--low);cursor:pointer;font:inherit;padding:2px 4px;border-radius:6px}
.linkish:hover{background:rgba(74,158,255,.12)}
.filelist{display:grid;gap:4px;max-height:46vh;overflow:auto;padding-right:4px}
.filerow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.025);color:var(--tx);font:inherit;font-size:12.5px;cursor:pointer}
.filerow:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:var(--line2)}
.filerow:disabled{opacity:.45;cursor:not-allowed}
.filerow>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileicon{color:var(--dim);text-align:center}
.fileeditbar{margin-bottom:6px;gap:12px;flex-wrap:wrap}
.fileeditor{width:100%;height:min(52vh,460px);border:1px solid var(--line2);border-radius:11px;
  background:rgba(0,0,0,.35);overflow:hidden}
.fileeditor .monaco-editor,.fileeditor .monaco-editor-background,
.fileeditor .monaco-editor .margin{background:transparent}
.fileeditor-plain{width:100%;height:100%;padding:12px;border:0;background:transparent;color:var(--tx);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;line-height:1.55;resize:none;tab-size:2}
.fileeditor-plain:focus{outline:none}
.im-map{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(120px,.9fr) minmax(90px,.7fr) minmax(0,1fr) auto auto;
  gap:10px;align-items:end;margin-bottom:11px}
.im-volume{margin-bottom:11px}
.imm-size.bad{color:#ffb4b8}
.im-scratch{border:1px dashed var(--line2);border-radius:11px;padding:11px;background:rgba(167,139,250,.05)}
.im-scratch input:disabled{opacity:.5}
@media(max-width:900px){.im-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.import-advanced{margin:12px 0}
.import-advanced>summary{cursor:pointer;list-style:none;padding:6px 0}
.import-advanced>summary::-webkit-details-marker{display:none}
.import-advanced>summary::before{content:"› ";display:inline-block;transition:transform .2s var(--e)}
.import-advanced[open]>summary::before{transform:rotate(90deg)}
.vclass-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.vclass-badges .tag{white-space:nowrap}
.note.bad{border-color:rgba(255,77,79,.28);background:rgba(255,77,79,.07);color:#ffb4b8}
/* Four metrics side by side need about 415px of card with one port shown and
   about 520px with two; below that the ports shorten, then the metrics stack
   two by two, rather than any number being cut. */
@container (max-width:520px){
  .waccess .second,.waccess .more-wide{display:none}
  .waccess .more-narrow{display:inline-flex}
}
@container (max-width:420px){
  .wmeta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:3px}
}
/* a registry check that could not run is one hoverable mark, not a whole row */
.tip.unchecked-tip{color:var(--dim);border-style:dashed;background:none;margin-left:0}
.tip.warn-tip{color:var(--med);border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08);margin-left:0}
.wimg{height:19px;display:flex;align-items:center;gap:4px;word-break:normal;white-space:nowrap;line-height:19px;overflow:hidden;font-size:10px}
.wimage-name{min-width:0;overflow:hidden;text-overflow:ellipsis}.wimage-hardware{display:flex;align-items:center;gap:2px;flex:0 0 auto}.wimage-hardware:empty{display:none}
.wimg .tag{padding:1px 6px;margin:0 3px 0 0;border-radius:6px;font-size:10px;line-height:14px;vertical-align:middle}
.wfoot{display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap}.wfoot>.workloadtree{flex:1 1 108px;min-width:108px}
.wfoot>.workloadtree:not([open]) .tree-kind,.wfoot>.workloadtree:not([open]) .tree-arrow{display:none}
.wfoot>.workloadtree[open]{flex-basis:100%;order:2}
.wacts{gap:4px;flex-wrap:nowrap;padding-top:0;min-height:28px}.wacts>.btn{height:28px;padding:4px 7px;border-radius:9px;font-size:11px}
.actionmenu{position:relative;margin-left:auto}.actionmenu>summary{list-style:none;font-size:17px;line-height:1;padding:3px 8px!important;height:28px}
.actionmenu>summary::-webkit-details-marker{display:none}.actionmenu-pop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:12;width:172px;padding:6px;border:1px solid var(--line2);border-radius:11px;background:rgba(20,20,23,.98);box-shadow:0 16px 45px rgba(0,0,0,.6);backdrop-filter:blur(20px)}
.actionmenu-pop button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:var(--tx);font:600 12px "Inter Tight",sans-serif;cursor:pointer;text-align:left}.actionmenu-pop button:hover{background:rgba(255,255,255,.08)}.actionmenu-pop button.danger{color:#ff9fa3}.actionmenu-pop .btnicon{width:14px;height:14px}
.updatebar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-4px 0 16px;
  padding:13px 15px;border-radius:13px;border:1px solid rgba(255,176,32,.28);background:rgba(255,176,32,.075)}
.updatebar.quiet{border-color:var(--line);background:rgba(255,255,255,.025)}
.updatebar>div:first-child{display:flex;flex-direction:column;gap:3px}.updatebar>.row{flex:none;gap:8px}.updatebar span{font-size:11px;color:var(--dim)}
.updateerror{margin-top:9px;padding:8px 10px;border-radius:9px;color:#ffb4b8;background:rgba(255,77,79,.07);border:1px solid rgba(255,77,79,.18);font-size:10.5px}
.update-review{display:grid;gap:12px}.update-image{display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surf2)}
.update-approval{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}
.update-selectbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0}.update-selectbar>span{margin-right:auto;color:var(--dim);font-size:11px}
.update-center-row{align-items:flex-start}.update-center-row>div:nth-child(2){min-width:0;flex:1}.update-center-row .updateerror{margin-top:6px}
/* On a phone the name keeps the width; the pill and buttons go under it. */
.update-center-row>.row{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){
  .update-center-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px 12px}
  .update-center-row>.row{grid-column:2;justify-content:flex-start;gap:8px}
}
.update-pick,.update-pick-spacer{width:22px;flex:0 0 22px;display:grid;place-items:center}.update-pick{cursor:pointer;padding-top:2px}.update-pick input{width:16px;height:16px;accent-color:var(--low)}
.update-workload-review{display:grid;gap:9px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.batch-rollout-list{display:grid;gap:7px}.batch-rollout-list>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf2)}
.batch-rollout-list>div>span:first-child{display:flex;flex-direction:column;gap:3px}.batch-rollout-list .updateerror{grid-column:1/-1;margin:0}.batch-rollout-list small{color:var(--dim)}
.cleanup-nodes{display:flex;gap:8px;flex-wrap:wrap}.cleanup-nodes .switch{margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-family:"JetBrains Mono",monospace;font-size:10.5px}
.update-image>div:not(.between){display:grid;grid-template-columns:68px 1fr;gap:10px;align-items:start}.update-image span{color:var(--dim);font-size:10.5px}
.update-image code{font-size:11px;color:var(--mut);word-break:break-all}
.rollout-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rollout-meter{height:7px;margin:14px 0 18px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.rollout-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--low),var(--ok));transition:width .4s var(--e)}
.rollout-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}.rollout-steps>div{display:flex;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surf2)}
.rollout-steps i{width:9px;height:9px;margin-top:3px;flex:0 0 auto;border-radius:50%;background:var(--dim)}.rollout-steps .done i{background:var(--ok)}.rollout-steps .active i{background:var(--med);box-shadow:0 0 0 4px rgba(255,176,32,.12)}.rollout-steps .failed i{background:var(--crit)}
.rollout-steps span{display:flex;flex-direction:column;gap:4px}.rollout-steps small,.podprogress small{color:var(--dim)}
.podprogress{display:grid;gap:6px}.podprogress>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.05)}
.podprogress>div>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
@media(max-width:650px){.updatebar{align-items:flex-start}.rollout-steps{grid-template-columns:1fr}.update-image>div:not(.between){grid-template-columns:1fr}}
.nodebadges{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
.badgegroup{display:grid;gap:5px}.badgecap{color:var(--mut);font:650 10px/1.2 "JetBrains Mono",monospace;letter-spacing:.08em}
.badge-values{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.importapps{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.importapp{padding:13px}

/* ---------------- responsive ---------------- */
#navscrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:24;
  opacity:0;pointer-events:none;transition:opacity .3s var(--e)}
.only-sm{display:none!important}

@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr 1fr;min-width:0}
  .acol{padding:0 8px}
  .archsvg{display:none}
  .flowwrap{overflow-x:visible}
}
@media(max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:calc(70px + env(safe-area-inset-bottom,0px));
    height:calc(100vh - 70px - env(safe-area-inset-bottom,0px));height:calc(100dvh - 70px - env(safe-area-inset-bottom,0px));
    transform:translateX(-100%);z-index:35;overflow-y:auto;overscroll-behavior:contain;
    transition:transform .32s var(--e);box-shadow:24px 0 60px rgba(0,0,0,.5)}
  /* One scroll area reaches Settings and the footer above the bottom bar. */
  .side #nav{flex:1 0 auto;overflow:visible}
  .sidefoot{flex-shrink:0}
  body.navopen .side{transform:none}
  body.navopen #navscrim{z-index:34;opacity:1;pointer-events:auto}
  .only-sm{display:grid!important}
  .hide-sm{display:none!important}
  .page{padding:18px 16px 70px}
  .top{padding:0 16px}
  .search{width:150px;padding-left:34px}
  .search:focus{width:min(240px,50vw)}
  h1{font-size:18px}
  .grid.g3,.grid.g4,.grid.g2{grid-template-columns:1fr}
  .cardlist{grid-template-columns:1fr}
  .nodegrid{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr}
  .phead{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  .bignum{font-size:34px}
  .apps{grid-template-columns:1fr 1fr}
  .drawer{width:100%}
  .jobtray{left:16px;right:16px;bottom:12px}
}
@media(max-width:560px){
  .apps{grid-template-columns:1fr}
  /* Short stat tiles pair up on a phone rather than taking a screen each. */
  .grid.statgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .statgrid .bignum{font-size:28px}.statgrid .card{padding:14px;min-width:0}
  .statgrid .ctitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .statgrid .statwide{grid-column:1/-1}
  .wmeta{grid-template-columns:repeat(2,1fr)}
  .cardlist,.wcard,.whead,.wfoot,.wacts{min-width:0;max-width:100%}
  .whead{align-items:flex-start;gap:6px}.whead>.row:last-child{flex-wrap:wrap;justify-content:flex-end}
  .wfoot>.workloadtree{flex:1 1 100%;min-width:0}
  /* One row on a phone: the actions share it evenly and the menu keeps its own width. */
  .wacts{width:100%;flex-wrap:nowrap;gap:4px}.wacts>.btn{flex:1 1 0;min-width:0;padding:4px 5px;gap:4px}
  .actionmenu{margin-left:0;flex:0 0 auto}
  .f2,.f3,.f4,.hwchoices,.volume-impact-grid,.volume-delete-grid,.edit-port-row{grid-template-columns:1fr}
  .managed-env-list>div{grid-template-columns:1fr}.edit-container>summary .pill{display:none}.edit-container-body{padding:12px}
  .opts{grid-template-columns:1fr 1fr}
  .flowwrap.topdown{padding:14px 12px 20px}
  .arch.topdown{gap:24px}.arch.topdown .acol{grid-template-columns:minmax(0,1fr);gap:9px}
  .arch.topdown .abox .ahd{flex-wrap:wrap}
  .arch.topdown .arch-hardware{order:3;flex:1 0 calc(100% - 37px);margin-left:37px;flex-wrap:wrap}
  .wimg{height:auto;min-height:19px;flex-wrap:wrap;row-gap:1px}
  .wimage-name{flex:1 1 100%}.wimage-hardware{flex-wrap:wrap}
}

/* ---------------- auth ---------------- */
#gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:rgba(4,4,6,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#gate.hidden{display:none}
.gatebox{width:min(400px,94vw);border-radius:22px;padding:30px;
  background:linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  backdrop-filter:blur(40px) saturate(1.3);-webkit-backdrop-filter:blur(40px) saturate(1.3);
  border:1px solid var(--line2);box-shadow:0 34px 90px rgba(0,0,0,.7);
  animation:pop .35s var(--e)}
.gatebox .mark{width:46px;height:46px;border-radius:14px;font-size:21px;margin:0 auto 16px}
.gatebox h2{margin:0 0 4px;text-align:center;font-size:19px;font-weight:700}
.gatebox p.sub{margin:0 0 22px;text-align:center;color:var(--mut);font-size:12.5px}
.gateerr{border-radius:11px;padding:10px 13px;font-size:12.5px;margin-bottom:14px;
  background:rgba(255,77,79,.11);border:1px solid rgba(255,77,79,.3);color:#ffb4b8}
.gatehint{margin-top:16px;font-size:11px;color:var(--dim);text-align:center;line-height:1.6}
.gateremember{margin:4px 0 14px;justify-content:flex-start;font-size:12px;color:var(--mut)}
.whoami{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);transition:all .2s var(--e)}
.whoami:hover{background:rgba(255,255,255,.1);border-color:var(--line2)}
.whoami .nm{font-size:12.5px;font-weight:620}

.rolechip{padding:3px 9px;font-size:10px;letter-spacing:.04em;text-transform:uppercase}
body[data-role="viewer"] .btn.pri:not([data-keep]),
body[data-role="viewer"] .btn.danger{opacity:.4;pointer-events:none}

/* ---------------- top bar layout fix ----------------
   The left block previously had no flex sizing, so space-between gave it 0px
   and the hamburger + title vanished on narrow screens. */
.topleft{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.topleft>div{min-width:0}
.topleft>#hamburger{flex:0 0 auto}
.topleft h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topright{flex:0 0 auto}
#searchbtn{display:none}

/* The item a job is about, found on its page for a moment. */
.flash-find{animation:flashfind 2.6s ease}
@keyframes flashfind{0%,60%{box-shadow:0 0 0 2px var(--vio);background-color:rgba(140,120,255,.10)}100%{box-shadow:none}}
@media(prefers-reduced-motion:reduce){.flash-find{animation:none;outline:2px solid var(--vio)}}

/* What a search is narrowing the page to: only where the search box itself
   is folded behind its icon, which then carries a dot. */
.filterbar{display:none;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;
  padding:8px 10px 8px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surf);font-size:13px}
#searchbtn.filtering{position:relative}
#searchbtn.filtering::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--vio)}
@media(max-width:1080px){.filterbar{display:flex}}

/* The title and the search bar stop fitting side by side well before the
   sidebar collapses, so the search becomes an icon that overlays the bar. */
@media(max-width:1080px){
  #searchbtn.only-sm{display:grid!important}
  .searchwrap{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);
    z-index:6;display:none}
  body.searching .searchwrap{display:flex}
  /* The box takes the whole bar: what sits under it goes, refresh and the
     setup guide too. !important against .only-sm's own. */
  body.searching .topleft,body.searching #searchbtn,body.searching #setupbtn,
  body.searching #refresh,body.searching #opensettings,body.searching .whoami{display:none!important}
  .searchwrap .search{width:100%}
  .searchwrap .search:focus{width:100%}
}

@media(max-width:900px){
  .top{gap:8px;padding:0 12px}
  .topright{gap:6px}
  .iconbtn{width:34px;height:34px;font-size:13px}
  .iconbtn svg{width:15px;height:15px}
  h1{font-size:16px}
  .crumb{font-size:10px;letter-spacing:.09em}
  /* The account and drawer still open Settings; leave room for refresh. */
  #opensettings{display:none}

  /* avatar only — the name and role live in the drawer */
  .whoami{padding:3px;gap:0}
  .whoami .nm,.whoami .rolechip{display:none}
  .av{width:28px;height:28px;font-size:10px}
}

/* The gesture indicator floats below the header without moving the page. */
.pull-refresh{position:fixed;left:50%;transform:translateX(-50%);z-index:29;pointer-events:none;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:10px 16px;
  border:1px solid var(--line2);border-radius:99px;background:var(--surf);color:var(--tx);
  box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:12.5px}
.pull-refresh[hidden]{display:none}
.pull-refresh svg{width:16px;height:16px}
.pull-refresh[data-state="ready"]{border-color:var(--low)}
.pull-refresh[data-state="loading"] svg,#refresh[aria-busy="true"] svg{animation:refreshspin .8s linear infinite}
#refresh:disabled{cursor:wait}
@keyframes refreshspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pull-refresh svg,#refresh[aria-busy="true"] svg{animation:none}}
@media(max-width:420px){
  .top{padding:0 10px}
  .topleft{gap:8px}
  .crumb{display:none}
}

/* temperatures */
.t-ok{color:var(--ok)} .t-warm{color:var(--med)} .t-hot{color:var(--crit)}
.bignum.t-hot,.midnum.t-hot{color:var(--crit)}
.bignum.t-warm,.midnum.t-warm{color:var(--med)}

/* per-device host disk activity */
.diskactivity{margin-top:12px;display:grid;gap:8px}
.diskrow{display:grid;grid-template-columns:minmax(180px,2fr) repeat(6,minmax(72px,1fr)) auto;
  align-items:center;gap:14px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.025)}
.diskrow.smart-failed{border-color:rgba(255,77,79,.42);background:rgba(255,77,79,.06)}
.diskidentity{min-width:0;display:flex;flex-direction:column;gap:3px}
.diskidentity span{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diskrow>div:not(.diskidentity){display:flex;flex-direction:column;gap:3px}
.disklabel{font-size:10px;letter-spacing:.1em;color:var(--dim)}
.diskrate.read{color:#7dd3fc}.diskrate.write{color:#c4b5fd}
.smart-drive-head{gap:16px;margin-bottom:15px}.smartstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}.smartstat{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.smartstat span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.smartstat.warn b{color:var(--med)}.smartstat.bad b{color:var(--crit)}.smart-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surf2)}
@media(max-width:700px){
  .diskrow{grid-template-columns:1fr 1fr 1fr}
  .diskidentity{grid-column:1/-1}
  .diskrow>button{grid-column:1/-1}.smartstats{grid-template-columns:1fr 1fr}.smart-actions{align-items:flex-start;flex-direction:column}
}

@media(max-width:560px){
  .modal.node-detail-view{padding:0;place-items:stretch}
  .node-detail-modal{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  .node-detail-modal .modalhead{padding:13px 15px}
  .node-detail-modal #mbody{padding:12px}
  .node-detail{min-width:0;width:100%}
  .node-detail .card{min-width:0;padding:15px;border-radius:16px}
  .node-detail .node-section-head{align-items:flex-start;flex-wrap:wrap}
  .node-detail .node-section-head>div{min-width:0;flex:1 1 170px}
  .node-detail .node-section-head>.btn{flex:1 0 auto;justify-content:center}
  .node-detail .drow{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(0,1.2fr);gap:8px}
  .node-detail .drow .dl{min-width:0;flex:none}
  .node-detail .drow .dv{min-width:0;text-align:right;overflow-wrap:anywhere}
  .node-detail .drow .tag{white-space:normal;text-align:left}
  .node-detail .diskrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  .node-detail .diskidentity,.node-detail .diskrow>button{grid-column:1/-1}
  .node-detail .diskidentity span{white-space:normal;overflow-wrap:anywhere}
  .node-detail>.row:last-child .btn{width:100%;justify-content:center}
}


/* ---------------- move workload ---------------- */
.tag.movable{cursor:pointer;padding-right:7px}
/* Dashboard top row: the charts take up whatever height the row has, and the
   storage donut sits beside its figures so it does not set a tall row alone. */
.dashcard{display:flex;flex-direction:column}
.dashcard>.spark{flex:1 1 78px;min-height:78px;height:auto}
.dashcard .spark .ln{vector-effect:non-scaling-stroke}
.dashnums{gap:26px;margin-top:12px;flex-wrap:wrap;row-gap:12px}
.storagecard{container-type:inline-size}
.storbody{display:flex;align-items:center;gap:16px;margin-top:10px}
.nodecard{display:flex;flex-direction:column}
.nodecard>.nodebadges{margin-top:auto;padding-top:10px}
.nodecard>.nodepods{margin-bottom:12px}
.stordonut{flex:0 0 auto;display:grid;place-items:center}
.storstats{flex:1 1 auto;min-width:0}
.storstats .drow{padding:8px 0}
.storstats .drow .dl{flex:0 1 auto}
@container (max-width:290px){
  .storbody{flex-direction:column;align-items:stretch;gap:6px}
}
/* Node cards and the tables beside them: names and lists shorten, numbers never break. */
.nowrap{white-space:nowrap}
/* Every segmented control is the pill one above; a two-way icon switch, such
   as cards or rows, only needs tighter buttons. */
.seg{flex:0 0 auto}
.seg.iconseg{padding:3px}
.seg.iconseg button{padding:6px 10px;display:grid;place-items:center}
.seg .btnicon{width:15px;height:15px}
.btn.iconic{padding:5px 8px;gap:0;min-width:30px}
/* Containers as rows: every workload on one line, its actions as icons. */
.wltable-wrap{overflow:visible;container-type:inline-size;container-name:container-rows}
/* Uptime is an extra column only when the list itself has room for it. */
.wltable .wl-uptime{display:none}
@container container-rows (min-width:1100px){.wltable .wl-uptime{display:table-cell}}
.pill.slim{padding:2px 8px;font-size:11px;box-shadow:none}
/* A page's shape while its data is on the way, and a page shown from last time. */
.skel{display:block;position:relative;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.045)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.075) 50%,transparent 75%);animation:glint 1.6s var(--e) infinite}
@keyframes glint{to{transform:translateX(100%)}}
html[data-theme="light"] .skel{background:rgba(0,0,0,.055)}
html[data-theme="light"] .skel::after{background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%)}
html[data-motion="off"] .skel::after{animation:none}
.skel-card{border-radius:var(--r2)}
.skel-actions{gap:8px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.skel-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:14px;margin-bottom:14px}
.skel-table{padding:4px 16px}
.skel-row{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.skel-row:last-child{border-bottom:0}
#views.refreshing{opacity:.78;transition:opacity .25s}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.sortbar{display:none}
@media(max-width:560px){
  .sortbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:12px;color:var(--mut)}
  .sortbar select{margin-left:6px;padding:5px 8px;font-size:12px;width:auto}
}
th.sortable:hover{color:var(--tx)}
th.sortable[aria-sort="ascending"]::after{content:" ↑";color:var(--tx)}
th.sortable[aria-sort="descending"]::after{content:" ↓";color:var(--tx)}
.wltable td{vertical-align:middle}
.wltable .wl-name{max-width:280px}.wltable .wtitle{min-width:0}
.wltable .wtitle>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wltable .wl-image{max-width:280px}
.wltable .wl-imagetext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;color:var(--dim)}
.wltable .wl-image .tag{padding:1px 6px;font-size:10px;margin-top:3px}
.wltable .wl-actions{width:1%}.wltable .wl-actions .wacts{justify-content:flex-end;gap:4px;flex-wrap:nowrap;min-height:0}
.wltable .actionmenu{margin-left:0}
.wltable .waccess .plink,.wltable .waccess .tag{padding:2px 7px}
@media(max-width:1320px){.wltable .wl-image{display:none}}
@media(max-width:1060px) and (min-width:561px){.wltable .wl-access{display:none}}
/* Onboarding: a form in sections, then one plan's three ways to boot and its timeline. */
.modalbox[data-context="onboard"]{width:min(1080px,100%)}
/* Adding a host: a guide to Harvester's installer */
.guide-step{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.guide-step h4{margin:0;display:flex;gap:9px;align-items:center;font-size:13.5px}
.guide-step h4 span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);font-size:12px}
.guide-step p{margin:0;font-size:12.5px;color:var(--mut);line-height:1.5}
.guide-copy{display:flex;align-items:center;gap:6px;min-width:0}
.guide-copy code{font-size:11.5px;overflow-wrap:anywhere;user-select:all}
.guide-screens{display:grid;border-top:1px solid var(--line)}
.guide-screen{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.5}
.guide-screen>span{color:var(--dim);font-weight:600}
.guide-screen .guide-copy{display:inline-flex}
.guide-joined{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.guide-joined.ok{border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.07)}
.guide-joined span{font-size:12px;color:var(--mut)}
@media(max-width:560px){.guide-screen{grid-template-columns:1fr;gap:2px}}
.onboard-args{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;max-height:220px}
/* Cleanup rows on the Cluster page, and a removal's steps. */
.cleanup-card{padding:4px 14px}
.cleanup-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.cleanup-row:last-child{border-bottom:0}
.cleanup-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}.cleanup-row span{font-size:12px;color:var(--mut)}
.cleanup-row.bad b{color:var(--crit)}
.removal-steps{margin:0 0 10px;padding-left:20px;font-size:13px;line-height:1.7}
.removal-steps.done li::marker{color:var(--ok)}
.removal-entry{align-items:center;gap:12px}.removal-entry p{margin:0}
.removal-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.removal-mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.removal-mode:has(input:checked){border-color:var(--line2);background:rgba(255,255,255,.05)}
.removal-mode input{margin-top:3px}.removal-mode div{display:flex;flex-direction:column;gap:3px}
.removal-mode span{font-size:12px;color:var(--mut);line-height:1.45}
.removal-stuck{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:12px;color:var(--mut)}
.removal-stuck span{padding:2px 8px;border:1px solid var(--line);border-radius:7px;font-family:"JetBrains Mono",monospace;font-size:11px}
/* The way back to the dialog underneath, named for it. */
.modaltitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.modalback{align-self:flex-start;max-width:100%;border:0;background:none;padding:0;color:var(--low);font:600 11.5px "Inter Tight",sans-serif;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modalback:hover{text-decoration:underline}
.modalback[hidden]{display:none}
/* Tables marked "stack" become one small card per row on a phone: the first
   cell is the row's title, the rest are labelled lines, actions sit at the foot. */
@media(max-width:560px){
  .tblwrap:has(> table.stack){overflow:visible}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack thead{display:none}
  .tbl.stack tr{padding:11px 14px;border-bottom:1px solid var(--line)}
  .tbl.stack tbody tr:last-child{border-bottom:0}
  .tbl.stack td{border:0;padding:3px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-width:0;max-width:none;text-align:right;white-space:normal}
  .tbl.stack td::before{content:attr(data-label);flex:0 0 auto;color:var(--dim);font:600 10px/1.4 "JetBrains Mono",monospace;
    letter-spacing:.08em;text-transform:uppercase;text-align:left}
  .tbl.stack td>*{min-width:0}
  .tbl.stack td:first-child{display:block;text-align:left;padding-bottom:6px}
  .tbl.stack td:first-child::before,.tbl.stack td[data-label=""]::before,.tbl.stack td[colspan]::before{content:none}
  .tbl.stack td[data-label=""]{justify-content:flex-start;padding-top:7px}
  .tbl.stack td[colspan]{display:block;text-align:center}
  .tbl.stack td .row{justify-content:flex-end;flex-wrap:wrap}
  .tbl.stack td[data-label=""] .row,.tbl.stack td:first-child .row{justify-content:flex-start}
  .tbl.stack .meter{min-width:90px}
  .tbl.stack td.imgname,.tbl.stack td.cell-name,.tbl.stack td.cell-nodes,.tbl.stack td.cell-tags{min-width:0;max-width:none}
  .tbl.stack td.cell-tags{white-space:normal;justify-content:space-between}
}
/* Image cache: a name the table can squeeze to nothing, and a notice whose
   unbroken image name pushed its button out of the box. */
.imgtable td.imgname{min-width:220px;max-width:420px;word-break:break-all}
.imgtable td:nth-child(3),.imgtable td:nth-child(4){white-space:nowrap}
.prepull-note{gap:12px;align-items:center}.prepull-note>span{min-width:0;overflow-wrap:anywhere}.prepull-note>.btn{flex:0 0 auto}
/* Docker Compose import: the file on the left, what it becomes on the right. */
.modalbox[data-context="compose"]{width:min(1240px,100%)}
.compose{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.compose-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.compose-editorwrap{position:relative}
.compose-editor{height:min(52vh,470px);min-height:260px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:#1e1e1e}
html[data-theme="light"] .compose-editor{background:#fff}
.compose-editor>.empty{height:100%;display:grid;place-items:center}
.compose-fallback{width:100%;height:100%;border:0;resize:none;padding:12px;background:transparent;color:var(--tx);font:12.5px/1.5 "JetBrains Mono",ui-monospace,monospace}
.compose-hint{position:absolute;left:52px;top:40px;pointer-events:none;color:var(--dim);font-size:12.5px;line-height:1.6}
.compose-vars>summary{cursor:pointer;font-size:12.5px;font-weight:620;padding:4px 0}
.compose-vars textarea{width:100%;margin-top:6px;font:12px/1.5 "JetBrains Mono",ui-monospace,monospace}
.compose-opts{margin:0}
.compose-right{max-height:min(66vh,620px);overflow:auto;display:flex;flex-direction:column;gap:10px;min-width:0;padding-right:2px}
.compose-head{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.035)}
.compose-head span{font-size:12px;color:var(--mut)}
.compose-head.good{border-color:rgba(61,220,151,.28);background:rgba(61,220,151,.07)}
.compose-head.bad{border-color:rgba(255,77,79,.28);background:rgba(255,77,79,.07)}
.compose-svc{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:7px;min-width:0}
.compose-svc.bad{border-color:rgba(255,77,79,.3)}
.compose-svc-name{min-width:0}.compose-svc-name>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose-svc .between{align-items:flex-start;gap:10px}
.compose-svc .between>.row{flex-wrap:nowrap;flex:0 0 auto;gap:8px}
.compose-facts{display:flex;flex-wrap:wrap;gap:5px}
.compose-cmd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose-vols{display:flex;flex-direction:column;gap:3px;font-size:12px}
.compose-vol{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;min-width:0}
.compose-msgs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:12px}
.compose-msgs li{display:flex;gap:7px;align-items:baseline;line-height:1.45}
.compose-msgs li .linkish{flex:0 0 auto;font-size:11px}
.compose-msgs.bad li{color:#ffb4b8}.compose-msgs.warn li{color:var(--med)}.compose-msgs.info li{color:var(--mut)}
.compose-notes>summary{cursor:pointer;font-size:11.5px;color:var(--dim)}
.compose-notes .compose-msgs{margin-top:6px}
.compose-untab{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.compose-untab .compose-msgs{flex:1 1 220px}
.compose-actions{margin-top:14px;align-items:center}
.compose-actions #composeState{margin-right:auto}
@media(max-width:900px){.compose{grid-template-columns:1fr}.compose-right{max-height:none}.compose-editor{height:34vh;min-height:220px}}
.drow .dv.nowrap{overflow-wrap:normal}
.nodehead>.row:first-child{min-width:0;flex:1 1 auto;flex-wrap:nowrap}
.nodehead-acts{flex-wrap:nowrap}
.nodename{min-width:0}
.nodename>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nodehead-acts{flex:0 0 auto}
.nodecard .between>.small.mono{white-space:nowrap}
.badgegroup{min-width:0}
.badgegroup .tag{max-width:100%;min-width:0}
.badgegroup .tag.movable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.tbl td.cell-name,.tbl td.cell-nodes,.tbl td.cell-roles{max-width:170px}
.tbl td.cell-name>*,.tbl td.cell-nodes,.tbl td.cell-roles{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl td.cell-name>*{display:block}
.tbl td.cell-tags{max-width:200px;min-width:110px}
.tag{white-space:nowrap;max-width:100%}
/* Networking: the path is the point of the page, so it stays readable in a table. */
.tbl td.netsvc b{white-space:nowrap}
.tbl td.netpathcell{min-width:230px}
.tbl .netpath{gap:4px;font-size:10.5px}.tbl .netpath span{padding:2px 6px;white-space:nowrap}
.tbl td.cell-tags .tag{margin:2px 4px 2px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.tag.movable:hover{background:rgba(74,158,255,.18);border-color:rgba(74,158,255,.45);color:#9ecbff}
.tag.movable .mv{opacity:.45;font-size:10px;margin-left:1px}
.tag.movable:hover .mv{opacity:1}
.nodelink{cursor:pointer;border-bottom:1px dashed rgba(255,255,255,.25)}
.nodelink:hover{color:var(--tx);border-bottom-color:var(--low)}
.movegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.movecard{border-radius:15px;padding:14px;cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);transition:all .22s var(--e)}
.movecard:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.movecard.sel{border-color:rgba(74,158,255,.65);box-shadow:0 0 0 1px rgba(74,158,255,.4),0 12px 30px rgba(0,0,0,.55);
  background:linear-gradient(150deg,rgba(74,158,255,.16),rgba(74,158,255,.05))}
.movecard.cur{opacity:.6}
.movecard.blocked{opacity:.42;cursor:not-allowed}
.movecard.blocked:hover{transform:none;box-shadow:none;border-color:var(--line)}
@media(max-width:560px){.movegrid,.smart-threshold-values{grid-template-columns:1fr}}

/* Narrower than this the seven columns cannot fit. Rather than a card with a
   heading per line, each volume folds into three: what it is and what can be
   done to it, then its state as chips, then how full it is. No side scroll. */
@media(max-width:1080px){
  .voltable{overflow:visible}
  .voltable table,.voltable tbody,.voltable tr{display:block;width:100%}
  .voltable thead{display:none}
  .voltable tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
    padding:8px 12px;border-bottom:1px solid var(--line)}
  .voltable tr:last-child{border-bottom:0}
  /* Two classes, to outrank .tbl.dense td and its padding: a cell here is a
     chip on a line, not a table cell that needs its own breathing room. */
  .voltable .tbl td{border:0;padding:0;width:auto;min-width:0;display:flex;align-items:center;gap:6px}
  .voltable td[data-label]::before{content:none}
  .voltable .volname{flex:0 1 auto;order:0;margin-right:2px}
  .voltable .volname b{font-size:12.5px}
  .voltable .volactions{flex:0 0 auto;order:1;margin-left:auto;width:auto}
  .voltable .iconbtn{width:26px;height:26px}
  /* A flex item of its own, full width and no height: it ends the first line
     so the name keeps the actions company and nothing else joins them. */
  .voltable tr::after{content:"";flex:1 1 100%;order:2;height:0}
  .voltable td[data-label="Health"]{order:3}
  .voltable td[data-label="Mode"]{order:4}
  .voltable td[data-label="Last used"]{order:5}
  .voltable td[data-label="Attached to"]{order:6;flex:0 1 auto;flex-wrap:wrap}
  /* Why a volume is unhealthy is a sentence, so it takes a line of its own
     rather than stretching the one the chips sit on. */
  .voltable td.hasreason{flex:1 1 100%;flex-wrap:wrap}
  .voltable .volusage{order:7;flex:1 1 100%;min-width:0}
  .voltable .volusage .mono{flex:0 0 auto}
  .voltable .volume-reason{flex:1 1 100%;max-width:none;margin:0}
  .voltable .volprogress{flex:1 1 100%;max-width:none;margin:2px 0 0}
  .voltable td.empty{flex:1 1 100%;justify-content:center}
}

/* The share list is a stacked table like the rest (see the pages block). */

/* IP addresses on a phone: each address a short card - the address and its
   kind, its name, then its MAC and what has seen it - with the tick at the
   side, instead of six labelled lines, most of them empty, per address. */
.ipam-narrow{display:none}
@media(max-width:560px){
  .ipam-wide{display:none}.ipam-narrow{display:inline-block}
  .ipam-head-acts{flex-wrap:nowrap}
  .ipam-stats{gap:8px!important;margin:10px 0 12px!important}
  .ipam-stats>.card{padding:11px 12px}
  .ipam-stats .ctitle{font-size:12px}
  .ipam-stats .bignum{font-size:24px!important;margin-top:4px!important}
  .ipam-stats .csub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ipam-stats .csub:has(.btn){white-space:normal;display:flex;flex-wrap:wrap;gap:4px}
  .ipam-stats .csub .btn{margin-top:4px;padding:4px 8px;font-size:11.5px}
  .tbl.stack.ipam-table tr.ipam-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;
    grid-template-areas:"pick addr kind" "pick name seen" "pick mac mac" "pick notes notes";align-items:center;column-gap:10px;row-gap:3px;padding:9px 12px}
  .tbl.stack.ipam-table tr.ipam-row>td{display:block;padding:0;min-width:0;width:auto;text-align:left}
  .tbl.stack.ipam-table tr.ipam-row>td::before{content:none}
  .tbl.stack.ipam-table tr.ipam-row>td:empty{display:none}
  .tbl.stack.ipam-table .ip-pick{grid-area:pick;align-self:start;padding-top:2px!important}
  .ipam-table .ip-pick input{width:20px;height:20px}
  .ipam-table .ip-addr{grid-area:addr;font-size:14px;font-weight:650}
  .ipam-table .ip-kind{grid-area:kind;justify-self:end}
  .tbl.stack.ipam-table .ip-name{grid-area:name}
  .ipam-table .ip-name .ipam-line{white-space:normal;overflow:visible}
  .ipam-table .ip-seen{grid-area:seen;justify-self:end}
  .ipam-table .ip-mac{grid-area:mac;color:var(--mut)}
  .ipam-table .ip-notes{grid-area:notes;max-width:100%;overflow:hidden}
  .ipam-table .ip-notes .ipam-line{flex-wrap:nowrap;gap:4px;min-width:0;max-width:100%;width:100%}
  .ipam-table .ip-notes .ipam-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--mut)}
  .ipam-table .ip-seen .tag,.ipam-table .ip-kind .tag{font-size:10.5px;padding:2px 7px}
  .tbl.stack.ipam-table tbody.ipam-gap tr{padding:3px 12px}
  .tbl.stack.ipam-table tbody.ipam-gap td{padding:0}
  .ipam-bulk select,.ipam-bulk input{flex:1 1 40%;min-width:0}
}

/* Settings, one tab at a time, each card the full width. */
.settings-tabs{margin:0 0 14px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tabs button{white-space:nowrap}
.settings-grid[data-tab]>section{display:none;grid-column:1/-1}
.settings-grid[data-tab="homestead"]>section[data-tab="homestead"],
.settings-grid[data-tab="homestead"]>section[data-tab="about"],
.settings-grid[data-tab="updates"]>section[data-tab="updates"],
.settings-grid[data-tab="placement"]>section[data-tab="placement"],
.settings-grid[data-tab="monitoring"]>section[data-tab="monitoring"],
.settings-grid[data-tab="monitoring"]>section[data-tab="health"],
.settings-grid[data-tab="monitoring"]>section[data-tab="mqtt"],
.settings-grid[data-tab="hardware"]>section[data-tab="hardware"],
.settings-grid[data-tab="hardware"]>section[data-tab="cluster"],
.settings-grid[data-tab="hardware"]>section[data-tab="namespaces"],
.settings-grid[data-tab="fleet"]>section[data-tab="fleet"],
.settings-grid[data-tab="connections"]>section[data-tab="connections"],
.settings-grid[data-tab="connections"]>section[data-tab="apps"],
.settings-grid[data-tab="connections"]>section[data-tab="integrations"],
.settings-grid[data-tab="access"]>section[data-tab="access"],
.settings-grid[data-tab="troubleshooting"]>section[data-tab="troubleshooting"],
.settings-grid[data-tab="you"]>section[data-tab="you"],
.settings-grid[data-tab="you"]>section[data-tab="device"],
.settings-grid[data-tab="you"]>section[data-tab="general"]{display:block}
.diagnostic-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;background:var(--surf);padding:12px;border-radius:8px;font:12px/1.6 monospace}
#diagnosticRecorder{background:var(--surf);color:var(--tx);border-color:var(--line)}
#diagnosticRecorder>div{min-width:0;overflow-wrap:anywhere}
#diagnosticRecorder span{display:block;font-size:12px}
#diagnosticRecorder .btn{flex-shrink:0;background:var(--surf2);color:var(--tx);border-color:var(--line)}
/* A threshold is one row: its name, then warning and critical side by side. */
.threshold-card{padding:10px 12px;gap:12px}
.threshold-values{gap:8px}
.threshold-values input{width:64px;padding:6px 8px}
@media(max-width:560px){
  .threshold-card{flex-direction:row;align-items:center}
  .threshold-card>div:first-child .dim{display:none}
  .threshold-values{width:auto}
  .threshold-values label{flex:0 0 auto}
  .threshold-values input{width:54px}
  /* The heading keeps a readable width; the buttons move under it when they do not fit beside it. */
  .settings-card-head{flex-wrap:wrap;align-items:flex-start}
  .settings-card-head>div:first-child{flex:1 1 220px;min-width:0}
  .settings-card-head>.row{flex-wrap:wrap}
  .settings-card-head>.btn,.settings-card-head>.row .btn{padding:6px 10px;font-size:12px;white-space:nowrap}
  #mbody .settings-card-head{flex-wrap:wrap}
}

/* Container groups: a divider per group that folds, and a chip per group. */
.wgroup-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.wgroup-chips{max-width:100%;overflow-x:auto;scrollbar-width:none}
.wgroup-chips::-webkit-scrollbar{display:none}
.wgroup-chips button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;font-size:12.5px}
.wgroup-chips button .dim{font-size:11px}
.wgroup-bar>.btn{margin-left:auto}
@media(max-width:700px){
  /* One line on a phone: the chips scroll sideways, the two buttons are icons. */
  .wgroup-bar{flex-wrap:nowrap;gap:8px}
  .wgroup-chips{flex:1 1 auto;min-width:0}
  .wgroup-bar>.btn{flex:0 0 auto;padding:6px 9px}
  .wgroup-bar>.btn+.btn{margin-left:0}
}
.wgroup{margin-bottom:6px}
.wgroup-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 2px 9px;margin:0 0 10px;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.wgroup-head b{font-size:13px;letter-spacing:.02em}
.wgroup-chevron{display:inline-block;transition:transform .15s var(--e);transform:rotate(90deg);color:var(--mut)}
.wgroup-head[aria-expanded="false"] .wgroup-chevron{transform:none}
.wgroup.folded .wgroup-head{margin-bottom:4px}
.wltable tbody.grouphead td{padding:0 12px;background:rgba(255,255,255,.02)}
.wltable tbody.grouphead .wgroup-head{margin:0;border-bottom:0}
.wg-list{display:grid;gap:8px;max-height:48vh;overflow:auto;padding-right:4px}
.wg-item{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer}
.wg-item:hover{background:rgba(255,255,255,.04)}
.wg-apply{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.wg-apply .f{flex:1 1 180px;margin:0}
@media(max-width:560px){
  .wgroup-bar>.btn{margin-left:0}
  .wltable.stack tbody.grouphead tr{display:block}
  .wltable.stack tbody.grouphead td{display:block;padding:0 10px}
  .wltable.stack tbody.grouphead td::before{display:none}
}

/* Data protection: a schedule in shapes rather than cron, and plans. */
.sched-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sched-row select{width:auto}
.sched-row .inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--mut)}
.sched-row .inline input{width:auto;padding:6px 8px}
.sched-row #ls_minute{width:64px}
.sched-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.daychip{margin:0;cursor:pointer}
.daychip input{position:absolute;opacity:0;pointer-events:none}
.daychip span{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);font-size:12px;color:var(--mut)}
.daychip input:checked+span{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.daychip input:focus-visible+span{outline:2px solid var(--vio);outline-offset:2px}
.sched #lj_cron{margin-top:10px}
.sched-next{margin-top:8px;line-height:1.5}
.bad-text{color:var(--crit)}
.sched [hidden]{display:none!important}
.plan-list{display:grid;gap:10px;margin:12px 0}
.plan-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;cursor:pointer;margin:0}
.plan-card:has(input:checked){border-color:var(--vio)}
.lg-list{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.lg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;margin:0;cursor:pointer;border-bottom:1px solid var(--line)}
.lg-row:last-child{border-bottom:0}.lg-row[hidden]{display:none}
.lg-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lg-sub{display:block;overflow:hidden;text-overflow:ellipsis}.lg-tags{text-align:right}
@media (max-width:560px){.lg-row{grid-template-columns:auto minmax(0,1fr)}.lg-tags{grid-column:2;text-align:left}}
.plan-jobs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.v2line{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Placement rules in the container editor. */
.placement{margin:4px 0 12px;padding:12px 14px}
.place-level{padding:10px 0;border-top:1px solid var(--line)}
.place-level:first-of-type{border-top:0;padding-top:4px}
.place-title{font-weight:650;font-size:13px;margin-bottom:6px}
.place-grid{display:grid;grid-template-columns:110px 1fr 1fr;gap:10px}
.place-grid.two{grid-template-columns:1fr 1fr}
/* The failover choice is sized to its longest option, with its explanation beside it. */
.place-grid.failover{grid-template-columns:max-content 1fr;align-items:start}
.place-grid.failover select{width:auto;min-width:max-content}
.place-grid .f{margin:0}
@media(max-width:700px){.place-grid,.place-grid.two,.place-grid.failover{grid-template-columns:1fr}}
.aff-row{display:grid;grid-template-columns:1fr 120px auto;gap:8px;align-items:center;margin-bottom:8px}
.aff-row .row-remove{margin-top:0}
@media(max-width:560px){.aff-row{grid-template-columns:1fr 96px auto}}

/* Portal: a tile per web interface, in sections. */
.portal-section{margin-bottom:8px}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:12px}
.portal-tile{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;color:inherit;text-decoration:none;
  transition:transform .15s var(--e),border-color .15s var(--e)}
.portal-tile:hover{transform:translateY(-1px);border-color:var(--line2)}
.portal-tile:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
.portal-text{display:grid;gap:2px;min-width:0}
.portal-text>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--tx)}
.portal-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.portal-icon.img{background:rgba(255,255,255,.9);padding:5px}
.portal-icon.img img{width:100%;height:100%;object-fit:contain}
.portal-icon.letter{font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--mut)}
.portal-icon.sm{width:34px;height:34px;border-radius:9px}
.portal-icon.sm svg{width:19px;height:19px}
.portal-dot{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.portal-dot.up{background:var(--ok)}
.portal-dot.down{background:var(--crit)}
.portal-dot.slow{background:var(--med)}
.portal-empty{padding:28px}
.pe-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:10px 12px;margin-bottom:8px}
.pe-fields{display:grid;gap:6px;min-width:0}
.pe-line{display:grid;grid-template-columns:1fr 1.4fr;gap:6px}
.pe-line:nth-child(2){grid-template-columns:1fr 1fr}
.pe-line:nth-child(2):has(.pe-iconurl){grid-template-columns:1fr 1fr 1.2fr}
.pe-fields input,.pe-fields select{padding:6px 9px;font-size:12.5px}
.pe-move{display:flex;flex-direction:column;gap:4px}
.pe-move .iconbtn{width:28px;height:26px}
@media(max-width:560px){
  .portal-grid{grid-template-columns:1fr 1fr;gap:8px}
  .portal-tile{flex-direction:column;align-items:flex-start;gap:8px;padding:11px}
  .portal-text>.dim:not(.mono){display:none}
  .pe-line,.pe-line:nth-child(2),.pe-line:nth-child(2):has(.pe-iconurl){grid-template-columns:1fr}
  .pe-row{grid-template-columns:1fr auto}
  .pe-icon{display:none}
}

/* Harvester releases and upgrade progress on the Cluster page. */
.release-list{display:grid;gap:8px;margin-top:12px}
.release-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px}
.release-row .pill{margin-left:4px}
/* The text keeps its width; the buttons go under it when the row is narrow. */
.release-row{flex-wrap:wrap}.release-row>div:first-child{flex:1 1 220px;min-width:0}
.upgrade-live{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px}
.upgrade-live.running{border-color:rgba(245,158,11,.45)}
.upgrade-live.failed{border-color:rgba(239,68,68,.5)}
.upgrade-steps{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.upgrade-step{padding:4px 10px;border-radius:999px;font-size:11.5px;border:1px solid var(--line2);color:var(--mut)}
.upgrade-step.done{color:var(--ok);border-color:rgba(48,186,120,.45)}
.upgrade-step.running{color:var(--tx);border-color:rgba(245,158,11,.6)}
.upgrade-step.failed{color:var(--crit);border-color:rgba(239,68,68,.6)}
.upgrade-nodes{margin-top:4px}
.upgrade-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);margin:10px 0;overflow:hidden}
.upgrade-bar span{display:block;height:100%;border-radius:inherit;background:var(--med);transition:width .4s var(--e)}
.upgrade-bar.succeeded span{background:var(--ok)}
.upgrade-bar.failed span{background:var(--crit)}

/* VM console: the screen fills the dialog's width at the VM's aspect. */
.vmc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.vmc-tools{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.disk-tags{gap:5px;flex-wrap:wrap;margin:6px 0 2px;align-items:center}.node-tags{margin:0 0 10px}
.sc-tags{gap:6px;flex-wrap:wrap}
.addon-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.addon-row:first-of-type{border-top:0}
@media (max-width:560px){.addon-row{flex-direction:column}}
.vmc-paste{margin-bottom:8px}.vmc-paste textarea{width:100%;min-height:64px;resize:vertical;font-family:"JetBrains Mono",monospace}
.vmc-screen{width:100%;height:max(240px,min(calc(88vh - 300px),720px));background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.vmc-wrap{position:relative}
.vmc-wrap:fullscreen .vmc-screen{height:100vh;border-radius:0;border:0}
/* The field a phone's keyboard types into: there to be focused, not seen.
   16px, or iOS zooms the page when it takes focus. */
.vmc-keys{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;resize:none;font-size:16px;pointer-events:none}

/* IP addresses (IPAM) on the Networking page. */
.network-tabs{margin:0 0 14px}
.ipam-subnets{margin-bottom:4px;max-width:100%;overflow-x:auto}
.ipam-subnets button{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.ipam-tools{margin:4px 0 10px;flex-wrap:wrap;gap:8px}
.ipam-tools select{width:auto}
/* The bulk bar stays in view under the top bar while the list scrolls, so a
   change to addresses far down does not mean scrolling back up to it. */
.ipam-bulk{flex-wrap:wrap;gap:6px;position:sticky;top:calc(var(--hdr,74px) + 8px);z-index:6;margin:0 0 10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surf2) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.ipam-bulk input,.ipam-bulk select{padding:5px 8px;font-size:12px;width:auto}
.ipam-table tr.ipam-warn td:first-child{box-shadow:inset 3px 0 0 var(--med)}
.ipam-flag{display:inline-block;margin-right:6px;font-size:11.5px}
.ipam-flag.warn{color:var(--med)}
.ipam-flag.info{color:var(--mut)}
.ipam-empty{padding:28px}
.ipam-subnet{padding:12px;margin-bottom:10px}
.ipam-subnet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:560px){.ipam-subnet-grid{grid-template-columns:1fr 1fr}}
.ipam-cat{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:7px;vertical-align:-6px;border-radius:6px;
  background:rgba(255,255,255,.06);color:var(--tx)}
.ipam-cat svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ipam-unifi-name{font-style:italic;color:var(--mut)}
.ipam-bulk[hidden]{display:none}

/* Helm */
.helm-values{max-height:420px;overflow:auto;white-space:pre;font-size:12px;padding:10px;border-radius:9px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
textarea.helm-values{width:100%;white-space:pre}
.helm-values-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.helm-values-pair pre{margin:0;max-height:330px}
.helm-results{display:grid;gap:6px;margin-bottom:8px;max-height:360px;overflow:auto}
.helm-hit{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;text-align:left;padding:8px 10px;cursor:pointer;color:inherit;font:inherit;margin:0}
.helm-hit img,.helm-hit-blank{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#fff;display:grid;place-items:center;color:#333;font-weight:700;font-size:12px}
tr.clickable{cursor:pointer}
@media(max-width:560px){.helm-values-pair{grid-template-columns:1fr}}

/* MQTT settings and the long-term history card. */
.mqtt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.history-card{margin-top:18px}
.hist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.hist-chart .spark{width:100%;height:56px;margin-top:4px}
.hist-nodes{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
.hist-node{display:flex;gap:8px;align-items:center}
@media(max-width:900px){.mqtt-grid,.hist-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mqtt-grid,.hist-grid{grid-template-columns:1fr}}
.platform-missing{padding:28px}
#nav a[hidden]{display:none}

/* Resources: kinds beside their objects. */
.res-layout{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:start}
.res-kinds{padding:10px;position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto}
.res-filter{margin-bottom:8px}
.res-kind-select{display:none}
.res-group{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:12px 6px 4px}
.res-kind{display:block;width:100%;text-align:left;background:none;border:0;color:var(--tx);font:inherit;font-size:13px;padding:5px 8px;border-radius:7px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-kind:hover{background:rgba(255,255,255,.05)}
.res-kind.on{background:rgba(255,255,255,.1);font-weight:650}
.res-head{margin-bottom:10px;gap:10px;flex-wrap:wrap}
.res-head select{width:auto}
.res-yaml{width:100%;min-height:52vh;white-space:pre}
@media(max-width:800px){
  .res-layout{grid-template-columns:1fr}
  .res-kinds{position:static;max-height:none}
  .res-kind-list,.res-filter{display:none}
  .res-kind-select{display:block}
}

/* IP rows: two short lines, one-line badges, notes that open on hover. */
.ipam-table td{vertical-align:middle;padding-top:6px;padding-bottom:6px}
.ipam-name .ipam-line{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;align-items:flex-start}
.ipam-line{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
div.ipam-line.dim{display:block}
.ipam-name .ipam-line>b,.ipam-name .ipam-line>.ipam-unifi-name{min-width:0;overflow-wrap:anywhere}
.ipam-name .ipam-line.dim{overflow-wrap:anywhere}
.ipam-name .ipam-cat{flex-shrink:0}
@media(min-width:561px){
  .ipam-table .ip-addr{width:1%;padding-right:8px}
  .ipam-table .ip-addr>.dim{display:block}
  .ipam-table .ipam-name{min-width:clamp(160px,24vw,340px)}
}
/* Notes take what width is left: no width of their own, all of the cell's. */
.ipam-table td.ipam-notes{width:100%}
.ipam-notes .ipam-line{max-width:0;min-width:100%}
.ipam-note{overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:12px}
.ipam-notes .tag{flex:0 0 auto}
.ipam-flag{margin-right:0;cursor:help}
.ipam-gap td{padding:0 12px;background:rgba(255,255,255,.015)}
.ipam-gap-head{display:flex;align-items:center;gap:10px;width:100%;padding:5px 2px;background:none;border:0;color:var(--mut);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.ipam-gap-head:hover{color:var(--tx)}
.ipam-gap-head[aria-expanded="false"] .wgroup-chevron{transform:none}
.ipam-free td{padding-top:3px;padding-bottom:3px;background:rgba(255,255,255,.015)}
@media(max-width:560px){
  .ipam-gap tr,.ipam-gap td{display:block}
  .ipam-gap td::before{display:none}
  .ipam-name,.ipam-notes{max-width:none}
}
.ipam-doc{cursor:pointer;font-size:12px;color:var(--mut)}
.ipam-doc:hover{color:var(--tx);text-decoration:underline}
.ipam-free td{padding-top:2px;padding-bottom:2px;font-size:12.5px}
.podprogress small.pod-blocked{display:block;color:var(--med);white-space:normal;margin-top:2px}

/* Virtual machines */
.vm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.vm-card{display:flex;flex-direction:column;gap:10px;padding:14px}
.vm-title{display:flex;gap:10px;align-items:center;cursor:pointer;color:inherit;text-decoration:none;min-width:0}
.vm-title b{font-size:14.5px}
.vm-desc{margin-top:-4px}
.vm-problem{margin:0;font-size:12px}
.vm-restart{color:var(--med)}
.vm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px}
.vm-facts.wide{grid-template-columns:repeat(3,1fr)}
.vm-facts>div{display:grid;gap:2px;min-width:0}
.vm-facts span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.vm-facts b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-actions{flex-wrap:wrap;gap:6px;margin-top:auto}
.vm-actions>.actionmenu{margin-left:auto}
.vm-name{min-width:0}.vm-name>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-head>.pill{flex:0 0 auto}
.vm-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:-4px}
/* The address line: whole, copyable, with the network it is on. */
.vm-addr{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;font-size:13px}
.vm-ip{font-size:14px;font-weight:650;letter-spacing:.01em}
.vm-copy{width:24px;height:24px;padding:0;display:inline-grid;place-items:center}
.vm-copy svg{width:13px;height:13px}
.vm-net{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.vm-specs{display:flex;flex-wrap:wrap;gap:4px 0;font-size:12.5px;color:var(--mut)}
.vm-specs>span:not(:last-child):not(:has(+ .vm-host))::after{content:"·";margin:0 7px;color:var(--dim)}
/* What a running VM uses: CPU and RAM as meters, disk traffic as rates. */
.vm-usage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.vm-usage>div{min-width:0}
.vm-usage span{font-size:10.5px;letter-spacing:.06em;color:var(--mut)}
.vm-usage b{font-size:12px;font-weight:600;white-space:nowrap}
.vm-usage .meter{margin-top:5px;min-width:0}
.vm-io{display:flex;flex-direction:column;gap:2px;margin-top:3px;font-size:12px}
.vm-usage .vm-io span{font-size:12px;letter-spacing:0;color:inherit;white-space:nowrap}
.vm-table .vm-io{margin-top:0}
.vm-table .vm-sub{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-usage-none{padding-top:8px;border-top:1px solid var(--line)}
.vm-cell-use{min-width:96px}.vm-table td>.pill{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}.vm-cell-use .meter{margin-bottom:4px}
.vm-host{margin-left:auto;color:var(--tx)}
.vm-host::before{content:"on ";color:var(--dim)}
.vm-table .vm-addr{flex-wrap:nowrap}
.vm-table .vm-actions{flex-wrap:nowrap}
.vm-iconbtn{padding-left:9px;padding-right:9px}.vm-iconbtn .btnicon{margin:0}
@media(max-width:560px){.vm-grid{grid-template-columns:1fr}.vm-facts,.vm-facts.wide{grid-template-columns:1fr 1fr}}

/* A pill that opens something: the update count beside the layout switch. */
.pillbtn{cursor:pointer;font:inherit;font-size:11px;font-weight:650;border-style:solid}.pillbtn:hover{filter:brightness(1.15)}
.vm-filling{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:10px 0 2px;font-size:12px}.vm-filling .rollout-meter{grid-column:1/-1;margin:0}
.ve-table td{vertical-align:top}.ve-table select,.ve-table input{min-width:0}.ve-table .vd_bus,.ve-table .vn_model{min-width:92px}
.vm-edit-tabs{flex-wrap:wrap}.vm-edit-tabs .seg{flex-wrap:wrap;max-width:100%;min-width:0;border-radius:18px}
.vm-passthrough-table{table-layout:fixed}
.vm-passthrough-table td{vertical-align:top;overflow-wrap:anywhere}
.pd-add.reviewbox{border-color:color-mix(in srgb,var(--vio) 35%,transparent);background:color-mix(in srgb,var(--vio) 7%,transparent)}
.pd_rom{display:block;width:100%;max-width:100%;min-width:0;margin-top:8px;font:inherit;font-size:12px;color:var(--mut)}
.pd_rom::file-selector-button{margin-right:8px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--surf3);color:var(--tx);font:inherit;cursor:pointer}
.vd-add{margin-top:10px;padding:12px}.vd-add .f2{margin-top:8px}
.lh-node{margin-top:10px;display:grid;gap:4px}.lh-largest{gap:6px;flex-wrap:wrap;margin-top:4px}
.lh-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 18px;margin-top:6px}
.lh-v2{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:6px}.lh-v2-nodes{display:flex;gap:6px;flex-wrap:wrap}
.badtext{color:var(--crit)}
.lh-tight{display:inline-block;margin-top:8px;cursor:pointer}
.disk-card{padding:11px 0;border-bottom:1px solid var(--line)}.disk-card:last-of-type{border-bottom:0}
.disk-lh{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);display:grid;gap:6px}
.disk-lh>.between{flex-wrap:wrap;gap:2px 10px}.disk-lh>.between>span{min-width:0}
.disk-lh-acts{gap:6px;flex-wrap:wrap}.slimtag{padding:0 5px;font-size:10px;margin-left:4px}
.clsteps{display:grid;gap:6px;margin-top:10px}.clstep{display:flex;gap:8px;font-size:11.5px;align-items:flex-start}
.clstep>span{width:16px;flex:none;text-align:center;font-weight:700}.clstep.done>span{color:var(--ok)}.clstep.todo>span{color:var(--med)}
.clstep .btn{margin-top:5px}.clguide{text-align:left;max-width:520px;margin:12px auto 0;display:grid;gap:6px;font-size:12px}
.rc-uses{display:grid;gap:6px}.rc-uses>div{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.rc-uses .small{color:var(--mut);margin-left:auto}
.rc-space{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rc-space>div{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:11px}
.rc-room{margin-top:10px;display:grid;gap:6px}
.rc-steps{display:grid;gap:10px}.rc-step{display:grid;grid-template-columns:22px 1fr;gap:4px 8px;align-items:center;color:var(--dim)}
.rc-step.done{color:var(--tx)}.rc-step.done>span{color:var(--ok)}.rc-step.active{color:var(--tx);font-weight:650}
.rc-copy{grid-column:2;display:grid;gap:4px;font-weight:400}
@media(max-width:650px){.rc-space{grid-template-columns:1fr}}
.vm-why{grid-column:1/-1;margin:4px 0 0;font-size:11.5px}
.health-list{display:grid;gap:2px}.health-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.health-row:last-child{border-bottom:0}.health-row>.tag{justify-self:start}
@media(max-width:650px){.health-row{grid-template-columns:1fr}}
.vip-own{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px;margin-bottom:16px}
.vip-chip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:12px}
.vip-name{display:grid;min-width:0}.vip-name span{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vip-chip .tag{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.vip-name b{overflow-wrap:anywhere}
.vip-section{margin:22px 0}.vip-section-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.vip-section-heading h3{margin:0}.vip-section-heading p{margin:6px 0}
.vip-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;list-style:none;margin:14px 0}.vip-steps li{display:grid;align-content:start;gap:6px;border-left:2px solid var(--line);padding-left:12px;font-size:12px}.vip-steps li>span{color:var(--dim);line-height:1.6}
.vip-default-summary{line-height:1.7}.vip-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:12px}
.vip-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surf)}.vip-card.is-default{border-color:var(--ok)}
.vip-card-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.vip-card-heading>b{overflow-wrap:anywhere}.vip-card .tag{white-space:normal;height:auto;max-width:100%;overflow-wrap:anywhere}
.vip-card-label{color:var(--dim);font-size:12px;overflow-wrap:anywhere}.vip-card-default,.vip-card-usage{display:grid;gap:6px;line-height:1.5;overflow-wrap:anywhere}.vip-card-default .tag{justify-self:start}
.vip-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}.vip-card-actions .btn{white-space:normal}
.vip-section .dim,.vip-steps li>span,.vip-card-label,.vip-add-form .dim{color:var(--mut)}
.vip-check{display:flex;align-items:flex-start;gap:10px;margin:16px 0;line-height:1.6;font-size:12px;font-weight:400;color:var(--tx)}.vip-check input[type=checkbox]{flex:none;width:16px;height:16px;margin:3px 0;accent-color:var(--ok)}.vip-check>span{min-width:0}.vip-check>span>span{display:block;margin-top:4px}
#va_result:not(:empty){padding:12px;border:1px solid var(--line);border-radius:10px;line-height:1.6;overflow-wrap:anywhere}
#net_editor .dim,#snapshot_live .dim{color:var(--mut)}
@media(max-width:650px){.vip-steps{grid-template-columns:1fr}.vip-card{padding:12px}}
.primary-ports{display:grid;gap:8px}
.priv-fields{display:grid;gap:8px;margin-bottom:6px}

/* ================================================================ dialogs
   The components in js/ui.js, and the rules every dialog shares. The design
   guide is docs/design.md; scripts/audit_dialogs.mjs checks each dialog. */
#mbody{display:flex;flex-direction:column;gap:16px;padding:22px 24px 0}
#mbody>*{margin-top:0;margin-bottom:0}
#mbody>:last-child:not(.ui-actions){margin-bottom:22px}
#mbody>.btn,#mbody>button,#mbody>a{align-self:flex-start}
/* Section labels read as headings, not as code. */
#mbody .sec{margin:6px 0 -6px;font:650 13px "Inter Tight",sans-serif;text-transform:none;letter-spacing:0;color:var(--tx)}
/* A note is information unless it says otherwise: amber is for real risk. */
.note{background:rgba(255,255,255,.035);border-color:var(--line2);color:var(--mut);line-height:1.55}
.note b{color:var(--tx)}
.note.warn{background:rgba(255,176,32,.07);border-color:rgba(255,176,32,.26);color:var(--med)}
.note.warn b{color:inherit}

.ui-lead{font-size:14px;line-height:1.6;color:var(--mut)}
.ui-lead b,.ui-lead strong{color:var(--tx)}
.ui-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line2);background:rgba(255,255,255,.035);font-size:13px;line-height:1.55;color:var(--mut)}
.ui-callout b{display:block;color:var(--tx);font-size:13.5px;margin-bottom:2px}
.ui-callout-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.07);color:var(--tx)}
.ui-icon{width:15px;height:15px;stroke-width:2}
.ui-callout.ok{border-color:rgba(61,220,145,.28);background:rgba(61,220,145,.06)}.ui-callout.ok .ui-callout-icon{background:rgba(61,220,145,.16);color:var(--ok)}
.ui-callout.warn{border-color:rgba(255,176,32,.32);background:rgba(255,176,32,.07)}.ui-callout.warn .ui-callout-icon{background:rgba(255,176,32,.16);color:var(--med)}
.ui-callout.bad{border-color:rgba(255,77,79,.34);background:rgba(255,77,79,.07)}.ui-callout.bad .ui-callout-icon{background:rgba(255,77,79,.16);color:var(--crit)}
.ui-callout.warn b{color:#ffd48a}.ui-callout.bad b{color:#ffb4b8}

.ui-section{display:grid;gap:10px}
.ui-section>header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ui-section h4{margin:0;font:650 13px "Inter Tight",sans-serif;color:var(--tx)}
.ui-section-aside{font-size:12px;color:var(--mut)}

.ui-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--line)}
.ui-facts>div{padding:10px 13px;background:var(--surf)}
.ui-facts dt{font-size:11.5px;color:var(--mut);margin-bottom:3px}
.ui-facts dd{margin:0;font-size:13px;color:var(--tx);font-weight:600;overflow-wrap:anywhere}

.ui-checklist,.ui-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ui-checklist li,.ui-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:11px;align-items:start;padding:9px 2px}
.ui-checklist li+li{border-top:1px solid var(--line)}
.ui-check-mark,.ui-step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);color:var(--mut);font:700 12px "Inter Tight",sans-serif}
.ui-check-mark>.spin2{margin:0;border-color:var(--line2);border-top-color:currentColor}
.ui-checklist .ok .ui-check-mark{border-color:transparent;background:rgba(61,220,145,.16);color:var(--ok)}
.ui-checklist .warn .ui-check-mark{border-color:transparent;background:rgba(255,176,32,.16);color:var(--med)}
.ui-checklist .bad .ui-check-mark{border-color:transparent;background:rgba(255,77,79,.16);color:var(--crit)}
.ui-checklist .skip{opacity:.55}
.ui-check-title,.ui-step-title{font-size:13.5px;font-weight:600;color:var(--tx);padding-top:2px}
.ui-check-detail,.ui-step-detail{font-size:12.5px;line-height:1.55;color:var(--mut);margin-top:3px}
.ui-steps li{position:relative}
.ui-steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:36px;bottom:-4px;width:1.5px;background:var(--line2)}
.ui-steps .done .ui-step-num{border-color:transparent;background:rgba(61,220,145,.16);color:var(--ok)}
.ui-steps .current .ui-step-num{border-color:#fff;background:#fff;color:#0a0a0b}
.ui-steps .todo{opacity:.6}
.ui-steps.guide .ui-step-num{border-color:var(--line2);color:var(--tx)}

.ui-progress{display:grid;gap:6px}
.ui-progress-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut)}.ui-progress-head b{color:var(--tx);font-family:"JetBrains Mono",monospace}
.ui-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.ui-bar i{display:block;height:100%;border-radius:inherit;background:#fff;transition:width .4s var(--e)}
.ui-progress.ok .ui-bar i{background:var(--ok)}.ui-progress.warn .ui-bar i{background:var(--med)}.ui-progress.bad .ui-bar i{background:var(--crit)}
.ui-progress.unknown .ui-bar i{animation:ui-indeterminate 1.3s ease-in-out infinite}
@keyframes ui-indeterminate{from{transform:translateX(0)}to{transform:translateX(185%)}}
.ui-progress-detail{font-size:12px;color:var(--mut)}

.ui-meter{position:relative;height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;min-width:80px}
.ui-meter i{position:absolute;top:0;bottom:0}
.ui-meter .now{left:0;background:rgba(255,255,255,.55);border-radius:5px 0 0 5px}
.ui-meter .after{background:var(--ok)}
.ui-meter.warn .after{background:var(--med)}.ui-meter.bad .after{background:var(--crit)}
.wl-inline-detail .wl-detail-volumes{grid-column:1/-1}
.wl-inline-detail .wl-detail-volumes .row{gap:6px;flex-wrap:wrap}
.ui-meter .freed{background:repeating-linear-gradient(135deg,var(--crit) 0 3px,transparent 3px 6px);opacity:.8}
.ui-meter .mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.35)}

.ui-table-wrap{border:1px solid var(--line);border-radius:13px;overflow:auto}
.ui-table{width:100%;border-collapse:collapse;font-size:13px}
.ui-table th{text-align:left;font-size:11.5px;font-weight:600;color:var(--mut);padding:9px 13px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}
.ui-table td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.ui-table tr:last-child td{border-bottom:0}
.ui-table .num{text-align:right;font-family:"JetBrains Mono",monospace;white-space:nowrap}
.ui-table .grow{width:40%}
.ui-table .sub{display:block;font-size:12px;color:var(--mut);margin-top:3px;font-weight:400}
.ui-empty{padding:18px;text-align:center;color:var(--mut);font-size:13px;border:1px dashed var(--line2);border-radius:13px}

.ui-more{border-top:1px solid var(--line);padding-top:4px}
.ui-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;padding:6px 0;font-size:13px;font-weight:600;color:var(--mut)}
.ui-more summary::-webkit-details-marker{display:none}
.ui-more summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s var(--e)}
.ui-more[open] summary::before{transform:rotate(45deg)}
.ui-more summary:hover{color:var(--tx)}
.ui-more-body p,.ui-callout-body p,.ui-callout-body ul{margin:0}
.ui-more-body{display:grid;gap:10px;padding:6px 0 4px;font-size:12.5px;line-height:1.6;color:var(--mut)}

.ui-ack{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;margin:0;padding:12px 14px;border:1px solid var(--line2);border-radius:13px;
  font-size:13px;font-weight:500;color:var(--tx);cursor:pointer;line-height:1.5}
.ui-ack input{width:17px;height:17px;margin:1px 0 0;accent-color:#fff}
.ui-ack:has(input:checked){border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
/* Confirmations written before UI.ack - any checkbox whose id says confirm - look the same. */
#mbody label:has(>input[type=checkbox][id*="onfirm" i]){display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;margin:0;
  padding:12px 14px;border:1px solid var(--line2);border-radius:13px;font-size:13px;font-weight:500;color:var(--tx);line-height:1.5}
#mbody label:has(>input[type=checkbox][id*="onfirm" i]:checked){border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
#mbody label>input[type=checkbox][id*="onfirm" i]{width:17px;height:17px;margin:1px 0 0}

.ui-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.ui-field{display:grid;gap:6px;min-width:0;align-content:start}.ui-field.wide{grid-column:1/-1}
.ui-field label{margin:0}
.ui-help{font-size:12px;color:var(--mut);line-height:1.5}
.ui-stack{display:grid;gap:14px}
#selfDataFlow>*,#selfDataReview>*,#selfDataFinal>*{margin-top:0;margin-bottom:0}
#selfDataReview:empty,#selfDataFinal:empty{display:none}
#selfDataReview,#selfDataFinal{display:grid;gap:14px}
/* Nothing in a dialog is smaller than 10px. */
#mbody .disklabel,#mbody .smartstat span,#mbody .store-spot-badge{font-size:10px}
.volume-delete-option b{font-size:13.5px}.volume-delete-option small{font-size:12.5px}
.ui-list{margin:4px 0 0;padding-left:18px;display:grid;gap:3px}

.ui-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:650;white-space:nowrap;
  background:rgba(255,255,255,.07);color:var(--mut);border:1px solid var(--line2)}
.ui-chip.ok{background:rgba(61,220,145,.12);color:var(--ok);border-color:transparent}
.ui-chip.warn{background:rgba(255,176,32,.13);color:var(--med);border-color:transparent}
.ui-chip.bad{background:rgba(255,77,79,.13);color:#ff8f93;border-color:transparent}
.ui-chip.info{background:rgba(74,158,255,.13);color:#8fc2ff;border-color:transparent}

/* The buttons end every dialog, pinned to its bottom edge while the rest scrolls. */
.ui-actions{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:4px -24px 0 !important;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surf) 94%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.ui-actions-start,.ui-actions-end{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ui-actions-end{margin-left:auto}
.ui-actions.legacy{justify-content:flex-end}
.ui-actions.legacy>.btn.pri,.ui-actions.legacy>.btn.danger{order:2}
.ui-actions .btn{min-height:38px}
.ui-actions .btn.danger:not(:disabled){background:var(--crit);border-color:var(--crit);color:#fff}
.ui-actions .btn.danger:not(:disabled):hover{background:#ff6668;border-color:#ff6668}

@media(max-width:640px){
  .modal{padding:0;place-items:end stretch}
  .modalbox{width:100%!important;max-height:94dvh;border-radius:20px 20px 0 0;border-bottom:0}
  .modalhead{padding:14px 16px}
  #mbody{padding:16px 16px 0;gap:14px}
  .ui-actions{margin:4px -16px 0 !important;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .ui-actions,.ui-actions-end{flex-direction:column-reverse;align-items:stretch}
  .ui-actions-end,.ui-actions-start{width:100%;flex-direction:column-reverse}
  .ui-actions .btn{width:100%;justify-content:center}
  .ui-actions.legacy{flex-direction:column}
  .ui-actions.legacy>.btn.pri,.ui-actions.legacy>.btn.danger{order:-1}
  .ui-fields{grid-template-columns:1fr}
  .volume-delete-grid{grid-template-columns:1fr}
  .ui-facts{grid-template-columns:1fr 1fr}
  /* Tables become cards: each cell on its own line, with its column's label. */
  .ui-table thead{display:none}
  .ui-table,.ui-table tbody,.ui-table tr,.ui-table td{display:block;width:auto!important}
  .ui-table tr{padding:10px 13px;border-bottom:1px solid var(--line)}
  .ui-table tr:last-child{border-bottom:0}
  .ui-table td{padding:3px 0;border:0;text-align:left!important}
  .ui-table td[data-label]:not([data-label=""]):not(:first-child)::before{content:attr(data-label);display:block;font:500 11px "Inter Tight",sans-serif;color:var(--mut);margin-bottom:2px}
  .ui-table td:first-child{font-weight:600;padding-bottom:6px}
}
html[data-theme="light"] .ui-facts>div{background:var(--surf)}
html[data-theme="light"] .ui-callout.warn b{color:#8a5200}html[data-theme="light"] .ui-callout.bad b{color:#a1242a}
html[data-theme="light"] .ui-steps .current .ui-step-num{background:#16161a;border-color:#16161a;color:#fff}
html[data-theme="light"] .ui-meter .now{background:rgba(0,0,0,.35)}html[data-theme="light"] .ui-bar i{background:#16161a}

/* ================================================================ pages
   The page rules in docs/design.md; scripts/audit_pages.mjs checks every
   page at desktop and phone widths. */
/* Section headings read as headings - the same as a dialog's - not as code. */
.sec{margin:26px 0 12px;font:650 13.5px/1.35 "Inter Tight",sans-serif;text-transform:none;letter-spacing:0;color:var(--tx)}
.sec .dim,.sec small{font-weight:500;color:var(--mut)}

/* How a page works: collapsed guidance in place of a wall of notes. */
.ui-guide{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);margin-bottom:16px}
.ui-guide>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:12px 15px;font-size:13px;font-weight:600;color:var(--mut)}
.ui-guide>summary::-webkit-details-marker{display:none}
.ui-guide>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s var(--e)}
.ui-guide[open]>summary::before{transform:rotate(45deg)}
.ui-guide>summary:hover{color:var(--tx)}
.ui-guide-body{display:grid;gap:10px;padding:0 15px 14px;font-size:13px;line-height:1.6;color:var(--mut)}
.ui-guide-body b{color:var(--tx)}

/* A set of values: the same panel as UI.facts in a dialog. */
.about-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--line)}
.about-grid>div{border:0;border-radius:0;background:var(--surf);padding:10px 13px}
.about-grid span{font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--mut)}

/* Stat cards: a grid of the same card, two to a row on a phone. */
.ui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.ui-stat .bignum{margin-top:8px}

@media(max-width:560px){
  /* A stacked table's row is a compact card: the first cell its title, the
     rest two to a line with their label above them, long values and
     actions across the whole card. */
  .tbl.stack tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px;padding:12px 14px}
  .tbl.stack td{display:block;padding:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  .tbl.stack td::before{display:block;margin-bottom:2px;font:500 11px/1.4 "Inter Tight",sans-serif;letter-spacing:0;text-transform:none;color:var(--mut)}
  .tbl.stack td:first-child,.tbl.stack td[data-label=""],.tbl.stack td[colspan],.tbl.stack td[data-wide]{grid-column:1/-1}
  .tbl.stack td:first-child{padding-bottom:2px;order:-1}
  /* Short values first, so they pair up; long ones and actions after. */
  .tbl.stack td[data-wide]{order:1}.tbl.stack td[data-label=""]{order:2}
  .tbl.stack tr>td:first-child{order:-1}
  .tbl.stack td .row,.tbl.stack td[data-label=""] .row{justify-content:flex-start}
  .tbl.stack td[data-label=""]{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
  .tbl.stack td .meter{min-width:0}
  /* A card's actions beside its title, not on a line of their own; the
     title keeps their width clear. Compact tables place their own. */
  .tbl.stack:not(.compact) td[data-top]{grid-row:1;grid-column:1/-1;justify-self:end;align-self:start;width:auto!important;justify-content:flex-end;flex-wrap:nowrap;padding-top:0;z-index:1}
  .tbl.stack:not(.compact) tr:has(>td[data-top])>td:first-child{grid-row:1;padding-right:calc(var(--acts, 0px) + 10px)}
  .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ui-stats>.statwide{grid-column:1/-1}
  .about-grid,.ui-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  /* Stat cards written before UI.stats pair up the same way. */
  .grid.statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.statgrid>.statwide{grid-column:1/-1}
}
@media(max-width:600px){
  /* Short items two to a row, not one tall box each. */
  .cluster-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cluster-service{flex-direction:column;align-items:flex-start;gap:6px;padding:10px}
  .cluster-service .pill{padding:2px 9px;font-size:11px;min-height:0}
  .cluster-mini-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.cluster-mini-stats span{font-size:11px}
@media(max-width:650px){
  /* A health item: its name and detail, its state beside it - not a line of its own. */
  .health-row{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .health-row>.tag{grid-column:2;grid-row:1;justify-self:end}
  .health-row>:not(.tag){grid-column:1}
}
@media(max-width:560px){
  /* A move's steps as a row of small chips that wrap, not a grid of boxes. */
  .rollout-steps.movesteps{display:flex;flex-wrap:wrap;gap:6px}
  .rollout-steps.movesteps>div{flex:0 0 auto;padding:4px 9px;border-radius:13px}
  .rollout-steps.movesteps b{font-size:11px}
}

/* ================================================================ density
   One set of sizes for the controls every page shares, tighter than before:
   a professional tool shows more at once. docs/design.md, "Density". */
.btn{padding:7px 13px;border-radius:10px;font-size:13px;min-height:32px}
.btn.sm{padding:4px 10px;border-radius:8px;font-size:12px;min-height:28px}
.iconbtn{width:34px;height:34px}
.seg{padding:3px;gap:2px}
.seg button,.seg>a{padding:6px 13px;font-size:12.5px}
.pill{padding:3px 10px;font-size:11px}
.tag{padding:2px 8px;border-radius:7px}
label{margin:0 0 5px}
.f{margin-bottom:12px}
:where(input:not([type]),input[type=text],input[type=number],input[type=password],input[type=url],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea){
  padding:7px 11px;border-radius:9px;min-height:34px}
textarea{min-height:0}
.phead{margin-bottom:var(--page-gap);gap:var(--page-gap)}
.phead h2{margin-bottom:2px}
.grid{gap:12px}
.ctitle{margin-bottom:2px}

@media(max-width:560px){
  .page{padding:12px 12px 64px}
  .card{padding:13px;border-radius:16px}
  .grid,.ui-stats{gap:10px}
  .phead{margin-bottom:12px;gap:10px}
  .phead p{font-size:12.5px;line-height:1.45}
  .phead .row{gap:7px}
  .sec{margin:18px 0 8px}
  .bignum{font-size:28px}
  .ui-stat .bignum{margin-top:6px}
  .csub{font-size:11.5px}
  /* 16px text stops a phone zooming in on a field it is typing into. */
  :where(input:not([type]),input[type=text],input[type=number],input[type=password],input[type=url],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea){
    font-size:16px;padding:6px 10px;min-height:36px}
  .btn{min-height:34px;padding:6px 12px}
  .btn.sm{min-height:30px;padding:4px 9px}
  /* Secondary actions leave the row for its "…" menu. */
  .sm-more{display:none!important}
}
.actionmenu-pop .sm-only{display:none}
@media(max-width:560px){.actionmenu-pop .sm-only{display:flex}}

/* A compact list (tbl stack compact): on a phone each row is two or three
   short lines - the name with its status beside it, then its figures inline,
   label and value - never a labelled box per value. */
@media(max-width:560px){
  .tbl.stack.compact tr{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 12px}
  .tbl.stack.compact td::before{display:inline;margin:0 5px 0 0;font-size:11.5px}
  .tbl.stack.compact td[data-status]{grid-column:2;grid-row:1;justify-self:end;order:0;text-align:right!important;width:auto!important}
  .tbl.stack.compact td[data-status]::before{display:none}
  .tbl.stack.compact td[data-sm-hide]{display:none}
  .tbl.stack.compact td[data-actions]{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:4px}
  .tbl.stack.compact td .meter{display:none}
  .tbl.stack.compact td>div{display:inline}
  .tbl.stack.compact tr>td:first-child{grid-column:1;grid-row:1}
  .tbl.stack.compact td:first-child>div,.tbl.stack.compact td:first-child .dim{display:block}
  .tbl.stack.compact td[data-actions]>div{display:flex;flex-wrap:nowrap}
}

/* Updating apps: one line each - the app, and its image from and to. */
.upd-apps{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px}
.upd-apps li{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:9px 12px;font-size:13px}
.upd-apps li+li{border-top:1px solid var(--line)}
.upd-name{display:inline-flex;align-items:center;gap:6px;min-width:0}
.upd-name .dim{font-size:12px}
.upd-change{display:inline-flex;align-items:center;gap:5px;color:var(--mut);font-size:12px;white-space:nowrap}
.upd-change code{font:500 12px "JetBrains Mono",monospace;color:var(--tx)}
.upd-flag{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font:700 11px "Inter Tight",sans-serif;color:#1a1200;background:var(--med)}
.upd-flag.bad{background:var(--crit);color:#fff}
.upd-ok{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:500;color:var(--tx);cursor:pointer}
.upd-ok input{width:16px;height:16px;margin:0;accent-color:#fff}
@media(max-width:640px){
  .ui-actions:has(.upd-ok){flex-direction:column}
  .ui-actions:has(.upd-ok) .ui-actions-start{flex-direction:row}
}

/* ================================================================ linked clusters
   The switch leads the breadcrumb; on a phone, where the breadcrumb is
   hidden, it stays. docs/multi-cluster.md. */
.fleet-switch{display:inline-flex;align-items:center;gap:5px;max-width:190px;padding:2px 8px 2px 6px;border:1px solid var(--line2);
  border-radius:999px;background:rgba(255,255,255,.04);color:var(--mut);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.fleet-switch:hover,.fleet-switch:focus-visible{color:var(--tx);border-color:var(--mut);outline:none}
.fleet-switch svg{width:11px;height:11px;flex:0 0 auto}
.fleet-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fleet-caret{font-size:9px;opacity:.7}
@media(max-width:420px){
  .crumb:has(.fleet-switch){display:flex}
  .crumb:has(.fleet-switch)>:not(.fleet-switch){display:none}
}
.fleet-menu{position:fixed;z-index:60;width:260px;max-width:calc(100vw - 16px);padding:6px;border:1px solid var(--line2);border-radius:12px;
  background:rgba(20,20,23,.98);box-shadow:0 16px 45px rgba(0,0,0,.6);backdrop-filter:blur(20px)}
.fleet-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border:0;border-radius:8px;background:transparent;
  color:#f2f2f4;font:600 12.5px "Inter Tight",sans-serif;cursor:pointer;text-align:left}
.fleet-menu button:hover,.fleet-menu button.on{background:rgba(255,255,255,.08)}
.fleet-menu button svg{width:14px;height:14px;flex:0 0 auto;color:#a4a4ad}
.fleet-item{display:flex;flex-direction:column;min-width:0}
.fleet-item b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fleet-item span{font-size:11px;font-weight:500;color:#9a9aa3}
.fleet-sep{height:1px;margin:5px 4px;background:rgba(255,255,255,.09)}
.fleet-via{padding:6px 9px 4px;font-size:11px;color:#9a9aa3}
.fleet-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--dim)}
.fleet-dot.ok{background:var(--ok)}.fleet-dot.warn{background:var(--med)}.fleet-dot.bad{background:var(--crit)}
.fleet-dot.all{width:10px;height:10px;background:conic-gradient(var(--ok) 0 33%,var(--low) 0 66%,var(--vio) 0)}
.tag.cluster-tag{color:var(--vio);border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.09);font-size:10px;padding:1px 6px;vertical-align:middle}
.fleet-pick{display:grid;gap:8px}
.fleet-pick .btn{justify-content:flex-start;gap:10px;min-height:42px}
.fleet-pick .btn .dim{margin-left:auto}
.fleet-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px}
.fleet-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px}
.fleet-list li+li{border-top:1px solid var(--line)}
.fleet-row{min-width:0}
.fleet-sub{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--dim)}
.fleet-sub .mono{font-size:11px}
.fleet-address{display:flex;gap:8px}
.fleet-address input{flex:1;min-width:0}
/* SMB credential forms use the shared solid surface in light mode. */
html[data-theme="light"] .modalbox[data-context="smb-access"]{background:var(--surf);color:var(--tx)}
html[data-theme="light"] .modalbox[data-context="cluster-shutdown"]{background:var(--surf);color:var(--tx)}
.seg.fleet-mode{display:inline-flex;width:auto;flex-wrap:wrap;max-width:100%}
.fleet-mode button{white-space:nowrap}
#fleetCard>.fleet-list,#fleetCard>.ui-section{margin-top:14px}
.settings-grid>section[hidden]{display:none!important}
.fleet-movegrid{margin-top:14px}
#fleetMovesCard #movesList:not(:empty){margin-top:12px}

/* ================================================================ address fields
   An <input data-ipam> gets a button inside its box that offers free
   addresses from IP addresses (ipam-picker.js). */
.ipam-field{position:relative;display:block;min-width:0}
.ipam-field>input{width:100%;padding-right:38px}
.ipam-field:has(>input[hidden]),.ipam-field:has(>input[style*="display:none"]),.ipam-field:has(>input[style*="display: none"]){display:none}
.fleet-address .ipam-field,.row>.ipam-field{flex:1}
.ipam-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:26px;padding:0;
  border:0;border-radius:7px;background:transparent;color:var(--dim);cursor:pointer}
.ipam-btn:hover,.ipam-btn:focus-visible{color:var(--tx);background:rgba(255,255,255,.08);outline:none}
.ipam-btn svg{width:14px;height:14px}
.ipam-pop{position:fixed;z-index:80;width:320px;max-width:calc(100vw - 16px);max-height:min(380px,60vh);overflow:auto;padding:10px;
  border:1px solid var(--line2);border-radius:12px;background:rgba(20,20,23,.98);box-shadow:0 16px 45px rgba(0,0,0,.6);backdrop-filter:blur(20px);color:#f2f2f4}
.ipam-pop-head{display:flex;flex-direction:column;gap:2px;margin:0 2px 8px}
.ipam-pop-head b{font-size:12.5px}
.ipam-pop-head .dim{color:#9a9aa3}
.ipam-pop-subnet+.ipam-pop-subnet{margin-top:10px}
.ipam-pop-cidr{margin:0 2px 5px;font:600 11px "JetBrains Mono",monospace;color:#9a9aa3}
.ipam-pop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:4px}
.ipam-pop-list button{padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.03);
  color:#f2f2f4;font:500 12px "JetBrains Mono",monospace;text-align:left;cursor:pointer}
.ipam-pop-list button:hover,.ipam-pop-list button:focus-visible{background:rgba(255,255,255,.1);outline:none}
.ipam-pop-list button.on{border-color:var(--ok);color:var(--ok)}
.ipam-pop-empty{padding:6px 2px;font-size:12px;color:#b4b4bc}
.fleet-row-acts{gap:10px;align-items:center}
.fleet-out-switch{margin:0;gap:6px;font-size:12px;white-space:nowrap}
.fleet-out-help{margin-top:8px}
@media(max-width:560px){
  .fleet-list li{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .fleet-list li>:last-child:not(.fleet-row){grid-column:2}
  .fleet-row-acts{justify-content:space-between}
}

/* Configuration backup: the parts, one line each (config-backup.js). */
.cfg-parts{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px}
.cfg-parts li+li{border-top:1px solid var(--line)}
.cfg-part{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;cursor:pointer}
.cfg-part.off{cursor:default;opacity:.55}
.cfg-part input{margin-top:3px;flex:0 0 auto}
.cfg-part-text{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.cfg-part-text .ui-help{flex-basis:100%;margin:0}
.cfg-part-note{flex-basis:100%;font-size:11.5px;color:var(--med)}
/* Backing up needs only the names: two to a line, the details on hover. */
.cfg-parts.compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cfg-parts.compact li+li{border-top:0}
.cfg-parts.compact li{border-bottom:1px solid var(--line)}
.cfg-parts.compact li:nth-last-child(-n+2){border-bottom:0}
.cfg-parts.compact .cfg-part{padding:8px 12px}
.cfg-parts.compact .ui-help{display:none}

/* Events: a filter bar, and on a phone each event three short lines - what
   and its reason, where and when, then the message - not a box per value. */
.event-tabs{flex:0 0 auto}
.evfilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.evfilters .evf{width:auto;min-width:0;min-height:32px;padding:5px 30px 5px 10px;font-size:12.5px}
.evfilters .evf-text{flex:1 1 180px;max-width:280px;padding-right:10px}
.ev-when-sm{display:none}
@media(max-width:560px){
  .evfilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .evfilters .evf{width:100%;min-height:36px}
  .evfilters .evf-text{grid-column:1/-1;max-width:none}
  .evfilters .evf-clear{grid-column:1/-1}
  .ev-when-sm{display:inline}
  .tbl.stack.compact.evtable tr{padding:9px 12px}
  .tbl.stack.compact.evtable td.ev-msg,.tbl.stack.compact.evtable td.ev-from{grid-column:1/-1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tbl.stack.compact.evtable td.ev-msg::before,.tbl.stack.compact.evtable td.ev-from::before{display:none}
}
.fleet-mig{gap:7px}
.fleet-mig .fleet-dot{background:var(--dim)}.fleet-mig.on .fleet-dot{background:var(--ok)}
.move-sources{margin-top:12px}

/* Homestead's own update: its mark and the new release on the top bar, apart
   from apps' image updates; the same parts in its dialog and on About. */
/* An icon button like its neighbours: Homestead's mark, and a dot saying a
   release is waiting. The version is in its tooltip and dialog. */
.hs-notice{position:relative}
.hs-notice img{width:18px;height:18px}
.hs-notice>span{display:none}
.hs-notice>i{position:absolute;right:-3px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--surf)}
.hs-release{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid rgba(61,220,145,.4);border-radius:12px;background:rgba(61,220,145,.06)}
.hs-release.current{border-color:var(--line);background:transparent}
.hs-release b{font-size:17px}
.hs-parts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hs-part{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.hs-part>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-part>div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-actions{gap:8px;flex-wrap:wrap}

/* Networking › Nodes & addresses: a card per node, an address per row, a
   port per line - port → what answers → where. */
.addr-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:8px}
.addr-node{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surf)}
.addr-node-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.addr-node-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.addr-loose{border-style:dashed}
.addr-row{padding:10px 0 0;border-top:1px solid var(--line);min-width:0}
.addr-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.addr-head .addr-state{margin-left:auto}
.addr-reason{margin-top:6px;color:var(--mut)}
.addr-unrouted .addr-reason,.addr-unannounced .addr-reason{color:var(--crit)}
.addr-listeners{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.addr-listener{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px}
.addr-port{min-width:64px;font-size:12px;font-weight:650}
.addr-arrow{color:var(--dim)}
.addr-svc{display:flex;flex-direction:column;min-width:0}
.addr-svc b,.addr-svc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-none{margin-top:6px}
.addr-kept{margin-bottom:12px}
@media (max-width:560px){
  .addr-nodes{grid-template-columns:1fr}
  .addr-node{padding:12px}
  .addr-listener{grid-template-columns:auto minmax(0,1fr) auto}
  .addr-arrow{display:none}
}

/* Architecture: an address says what it is and where it lives; a node its
   addresses. */
.a2vipip{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.a2vip.a2broken{border-color:var(--crit)}
.a2why{margin:-2px 0 6px;color:var(--crit);font-size:10.5px}
.a2addrs{display:flex;flex-wrap:wrap;gap:4px;margin:-2px 0 7px}
.a2addr{font-size:10.5px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--mut)}
.a2addr.vip{border-color:var(--arch-access);color:var(--tx)}

/* An open "…" menu, lifted to the page so no card clips it (ui.js). */
.actionmenu-portal{position:fixed;top:0;left:0;width:0;height:0;z-index:75}
.actionmenu-portal>summary{display:none}
.actionmenu-portal>.actionmenu-pop{z-index:75}

/* Homestead updates: linked clusters, each with a tick to include it. */
.hs-fleet{display:flex;flex-direction:column;gap:6px}
/* Clusters to update: the tickbox on the left of each, the change on the right -
   under the name on a phone, never apart from the cluster it belongs to. */
.hs-clusters{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hs-cluster{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;min-width:0;margin:0;color:var(--tx);font-size:13px;font-weight:400;text-transform:none;letter-spacing:0}
.hs-cluster.single{grid-template-columns:minmax(0,1fr) auto}
.hs-cluster.fixed{cursor:default}
.hs-cluster>input{width:18px;height:18px;margin:0;align-self:start;margin-top:2px}
.hs-cluster-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.hs-cluster-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.hs-cluster-meta{overflow-wrap:anywhere}
.hs-cluster-parts{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.hs-cluster-state .pill{white-space:nowrap}
.hs-note{margin:0}
.hs-channel{border-top:1px solid var(--line);padding-top:4px}
@media (max-width:560px){
  .hs-cluster{grid-template-columns:22px minmax(0,1fr)}
  .hs-cluster.single{grid-template-columns:minmax(0,1fr)}
  .hs-cluster-state{grid-column:2}
  .hs-cluster.single .hs-cluster-state{grid-column:1}
}
.hs-part-end{gap:8px;flex-wrap:nowrap}
.hs-pick{display:inline-flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.hs-pick input{width:16px;height:16px}
@media (max-width:560px){.hs-part-end{flex-direction:column;align-items:flex-end;gap:4px}}
.hs-update,.hs-fleet,.hs-parts{min-width:0;max-width:100%}
.hs-part>div:first-child{flex:1 1 auto}
.hs-part .pill{white-space:nowrap}
@media (max-width:560px){.hs-part{flex-wrap:wrap}.hs-part-end{margin-left:auto}}

/* VM Hardware tab: folded sections, each summarised on one line. */
.vh{display:flex;flex-direction:column;gap:2px}
.vh-presets{gap:8px;flex-wrap:wrap;margin-bottom:6px}
.vh-sec summary{justify-content:flex-start}
.vh-sec summary>span:first-child{color:var(--tx)}
.vh-sum{margin-left:auto;font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.vh-body{display:grid;gap:8px;padding:6px 0 10px}
.vh-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vh-check{display:flex;align-items:center;gap:8px;font-size:13px}
#vh_notes{display:grid;gap:6px;margin-top:8px}
@media (max-width:560px){.vh-sum{max-width:55%}.vh-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}

/* ISO library */
.iso-lib .iso-folders,.iso-lib .iso-files{display:flex;flex-direction:column;gap:6px}
.iso-folder,.iso-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.iso-file>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.iso-file>div:first-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iso-dirs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.iso-crumb{font-size:12px;color:var(--mut)}
.iso-lib{grid-template-columns:minmax(0,1fr)}
.iso-lib>*{min-width:0}
.iso-keep{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.iso-keep input{width:72px}

/* Setting up a disk: the choices, one line each. */
.disk-choices{display:flex;flex-direction:column;gap:8px}
.disk-choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.disk-choice>span{display:flex;flex-direction:column;gap:2px}
.disk-choice small{color:var(--mut);font-size:12px}

/* A host's partition tables, drawn to scale (host-os.js). */
.pmaps{margin-top:12px}
.pmap-disk{margin:10px 0}
.pmap{display:flex;gap:2px;height:30px;margin-top:6px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.pmap-seg{min-width:6px;display:flex;align-items:center;padding:0 6px;overflow:hidden;font:600 10.5px/1 "JetBrains Mono",monospace;
  color:#fff;background:var(--mut)}
.pmap-seg>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmap-seg.sys{background:#5b7cc4}.pmap-seg.data{background:#3f9d73}.pmap-seg.lvm{background:#8a6cc4}
.pmap-seg.other{background:#a07a3c}.pmap-seg.free{background:transparent;color:var(--mut);
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(127,127,127,.18) 6px 8px)}
.pmap-list{margin-top:5px;line-height:1.5}
.pmap-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.pmap-key .pmap-seg{display:inline-block;width:12px;min-width:12px;height:12px;padding:0;border-radius:3px}
.hos-updates{display:flex;flex-wrap:wrap;gap:4px;max-height:220px;overflow:auto}

/* OS updates across the hosts (host-os.js). */
.osu-days{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.osu-results{margin:8px 0 0;padding-left:18px}

/* The first-run checklist (welcome.js) and Homestead's own address (views-network.js). */
.welcome-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.welcome-step{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px}
.welcome-step.done{opacity:.75}
.welcome-mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--ok)}
.welcome-step.done .welcome-mark{border-color:var(--ok)}
.welcome-act{margin-top:8px}
.self-address{margin:0 0 14px}

/* The live demo on GitHub Pages says what it is - at the top of every page,
   scrolling away with it: stuck there, it covered the app's own top bar. */
.demobanner{flex:0 0 auto;position:relative;z-index:1;padding:6px 14px;text-align:center;font-size:12.5px;
  background:var(--med);color:#1a1300;font-weight:600}
.demobanner a{color:inherit;text-decoration:underline;margin-left:6px}

/* Import: the steps of bringing apps in from an Unraid or Docker server. */
.importstep-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.importstep{display:flex;gap:11px;align-items:flex-start;min-width:0}
.importstep-n{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  border:1px solid var(--line2);color:var(--med)}
.importsource .ok-t{color:var(--ok)} .importsource .med-t{color:var(--med)}
@media (max-width:760px){.importstep-row{grid-template-columns:1fr}}

/* A page header: one main button and a ⋯ beside it, on one line. */
.phead .actionmenu{margin-left:0}
.phead .actionmenu>summary.btn{font-size:17px;line-height:1;height:auto}
.phead .actionmenu>summary.btn.pri{font-size:inherit;line-height:inherit}
.actionmenu-pop{width:auto;min-width:172px;max-width:280px}
/* The bell: what wants attention, in one place. */
.bellmenu{margin-left:0}
.actionmenu.bellmenu>summary.iconbtn{list-style:none;position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0!important;font-size:inherit;line-height:1}
@media(max-width:900px){.actionmenu.bellmenu>summary.iconbtn{width:34px;height:34px}}
.bellmenu>summary::-webkit-details-marker{display:none}
.bellmenu.has-news>summary{color:var(--tx)}
.bellmenu>summary>span{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center;
  font:700 10px "Inter Tight",sans-serif;background:var(--med);color:#1a1300;box-shadow:0 0 0 2px var(--surf)}
.bellmenu>summary>b{position:absolute;right:-4px;bottom:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;
  font:700 9px "Inter Tight",sans-serif;background:var(--crit);color:#fff;box-shadow:0 0 0 2px var(--surf)}
.bellpop{min-width:230px}
.bell-head{font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 9px 4px}
.bell-empty{padding:10px;color:var(--mut);font-size:12px}
body.searching .bellmenu{display:none}

/* Colour means state. Green, amber and red say healthy, needs attention and
   failed; blue marks what opens something (ports, VIPs, links); purple marks
   hardware a workload uses from its host. Everything else - groups,
   clusters, avatars, roles, progress - stays neutral. */
.tag.cluster-tag{color:var(--mut);border-color:var(--line2);background:rgba(255,255,255,.04)}
.av.n1,.av.n2,.av.n3{background:var(--surf3);color:var(--tx)}
.g-info,.g-vio{--gc:rgba(255,255,255,.05)}
.jobmeter span,.rollout-meter span,.livebar>span{background:var(--mut)}
.meter.split>.seg-sys,.drivesplit .k-sys{background:var(--dim)}
.meter.split>.seg-lh,.drivesplit .k-lh{background:var(--mut)}
.meter.split>.seg-lhroom{background:var(--mut);opacity:.25}
html[data-theme="light"] .tag.cluster-tag{background:rgba(0,0,0,.03)}
/* A page's summary: one line, the numbers behind it on tap. */
.sumline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:11px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r2);
  background:rgba(255,255,255,.025);font-size:13px;color:var(--mut)}
.sumline b{color:var(--tx);font-weight:700}
.sumitem{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sumitem .tag{padding:2px 8px}
.sumtoggle{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--low);font:600 12.5px "Inter Tight",sans-serif;cursor:pointer;padding:2px 0}
.sumtoggle .chev{transition:transform .2s var(--e)}.sumtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sumdetail{margin:-4px 0 18px}
.sumdetail>.statgrid,.sumdetail>.grid{margin-bottom:0}
@media(max-width:640px){.sumline{gap:6px 12px;font-size:12.5px}.sumtoggle{margin-left:0}}
html[data-theme="light"] .sumline{background:rgba(0,0,0,.02)}
/* A card's or row's buttons: two, then ⋯, on one line. */
.actionbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.actionbar>.actionmenu{margin-left:0}
.vip-card-actions .actionbar,.wacts .actionbar{width:100%}
.wacts .actionbar>.actionmenu,.vip-card-actions .actionbar>.actionmenu{margin-left:auto}
/* Tabs of a page family (Containers, Images, Schedules, Import...), first in
   the page header; the header's actions line up with them. */
.phead:has(.pagetabs){align-items:flex-start}
.pagetabs{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.pagetabs a{white-space:nowrap;text-decoration:none}
/* The phone's bottom bar. */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:40;grid-template-columns:repeat(5,1fr);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line2);
  background:rgba(12,12,14,.92);backdrop-filter:blur(var(--blur))}
.bottombar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:var(--mut);font-size:10.5px;font-weight:600;text-decoration:none}
.bottombar a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.bottombar a.on{color:var(--tx)}
html[data-theme="light"] .bottombar{background:rgba(255,255,255,.92)}
@media(max-width:900px){
  .page{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .jobtray{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .appfoot{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
/* Settings: its sections in a column beside them; on a phone, a list first. */
.settings-layout{display:grid;grid-template-columns:var(--workspace-rail) minmax(0,1fr);gap:var(--workspace-gap);align-items:start}
.settings-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--hdr) + 12px)}
.settings-nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;border:0;background:transparent;
  color:var(--mut);padding:9px 12px;border-radius:12px;cursor:pointer;font:inherit}
.settings-nav button b{display:block;font-size:13.5px;font-weight:650;color:var(--tx)}
.settings-nav button small{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.settings-nav button:hover{background:rgba(255,255,255,.05)}
.settings-nav button.on{background:rgba(255,255,255,.08)}
.settings-nav button i{font-style:normal;color:var(--dim);display:none}
/* A section's icon, as the main menu draws its own: dimmed until chosen. */
.settings-nav .settings-nav-icon{width:18px;height:18px;flex:0 0 auto;align-self:flex-start;margin-top:1px;color:var(--mut);opacity:.75;transition:opacity .2s var(--e),color .2s var(--e)}
.settings-nav .settings-nav-icon+span{flex:1;min-width:0}
.settings-nav button:hover .settings-nav-icon,.settings-nav button.on .settings-nav-icon{opacity:1;color:var(--tx)}
.settings-back{display:none}
html[data-theme="light"] .settings-nav button.on{background:rgba(0,0,0,.06)}
@media(max-width:900px){
  .settings-layout{grid-template-columns:1fr}
  .settings-nav{position:static;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;gap:0;background:rgba(255,255,255,.025)}
  .settings-nav button{border-radius:0;padding:13px 14px;border-top:1px solid var(--line)}
  .settings-nav button:first-child{border-top:0}
  .settings-nav button.on{background:transparent}
  .settings-nav button i{display:block;font-size:18px}
  .settings-layout[data-open="0"] .settings-main{display:none}
  .settings-layout[data-open="1"] .settings-nav{display:none}
  .settings-back{display:flex;align-items:center;width:100%;border:0;border-radius:10px;background:var(--ok);color:#062a1b;
    font:650 13px "Inter Tight",sans-serif;padding:10px 12px;margin-bottom:12px;cursor:pointer}
}
/* Containers: the count and the group chips share the line under the tabs. */
.phead>div:first-child:has(.wgroup-bar){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:8px;min-width:0}
.phead>div:first-child:has(.wgroup-bar)>.pagetabs{grid-column:1/-1;justify-self:start;margin-bottom:2px}
.phead .wgroup-bar{margin:0;justify-self:start;min-width:0}
/* A header's actions stay on one line beside its title on the desktop. */
@media(min-width:901px){.phead>.row{flex-wrap:nowrap;flex-shrink:0}}
/* The VM card, in the container card's shape. */
.vm-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:8px}
.vm-meta .vm-copy{width:22px;height:22px;margin-left:4px;vertical-align:middle}
.vm-meta .vm-copy svg{width:12px;height:12px}
/* Settings: its groups, setting rows, service rows and the save bar. */
.settings-nav-group{font:600 10px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:12px 12px 4px}
.settings-nav-group:first-child{padding-top:2px}
.srows{display:flex;flex-direction:column}
.srow{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.srows>.srow:first-child{border-top:0;padding-top:4px}
.srow-l{flex:1;min-width:0}
.srow-l b{display:block;font-size:13px;font-weight:620}
.srow-l small{display:block;color:var(--dim);font-size:11.5px;margin-top:1px}
.srow-c{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;justify-content:flex-end}
.srow-c input[type=text],.srow-c input[type=url],.srow-c select{width:auto;min-width:220px;max-width:340px}
.srow-c .rng{width:160px}
.appearance-seg .opt{border:0;background:transparent;color:var(--mut);padding:6px 12px;border-radius:99px;font:inherit;font-size:12px;font-weight:620;cursor:pointer}
.appearance-seg .opt.on{background:#fff;color:#0a0a0b}
html[data-theme="light"] .appearance-seg .opt.on{background:#16161a;color:#fff}
.toggle{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 38px}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.toggle span{position:absolute;inset:0;border-radius:99px;background:var(--surf3);border:1px solid var(--line2);transition:background .2s var(--e);pointer-events:none}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--mut);transition:all .2s var(--e)}
.toggle input:checked+span{background:var(--tx)}
.toggle input:checked+span::after{left:19px;background:var(--bg)}
.toggle input:focus-visible+span{outline:2px solid var(--low);outline-offset:2px}
.svcrow{display:flex;align-items:center;gap:12px;padding:8px 0}
.svcrow-l{flex:1;min-width:0}
.svcrow-l b{font-size:13px;font-weight:650}
.svcrow-l small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.savebar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;border:1px solid var(--line2);
  border-radius:var(--r2);background:rgba(20,20,23,.94);backdrop-filter:blur(var(--blur));box-shadow:0 12px 40px rgba(0,0,0,.45)}
.savebar>span{margin-right:auto;color:var(--med);font-weight:650;font-size:13px}
html[data-theme="light"] .savebar{background:rgba(255,255,255,.95)}
.update-days{display:flex;flex-wrap:wrap;gap:6px}
/* Homestead's own release leads Updates. */
.settings-grid>#homesteadUpdateCard{order:-1}
@media(max-width:900px){
  /* A switch or a button stays beside its label; a wide control takes the next line. */
  .srow{flex-wrap:wrap}.srow-c{flex:0 0 auto;margin-left:auto}
  .srow:has(select) .srow-c,.srow:has(input[type=text]) .srow-c,.srow:has(input[type=url]) .srow-c,.srow:has(.rng) .srow-c,.srow:has(.appearance-seg) .srow-c{flex:1 1 100%;margin-left:0;justify-content:flex-start}
  .srow-c input[type=text],.srow-c input[type=url],.srow-c select{min-width:0;width:100%;max-width:none}
  .savebar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
/* Diagrams (diagrams.js): the README graphic's vocabulary, in the theme's colours. */
.diagram{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r2);background:rgba(255,255,255,.02);padding:10px 12px}
.diagram svg{display:block;width:100%;height:auto;max-height:340px}
.diagram figcaption{color:var(--dim);font-size:11.5px;margin-top:4px}
.dg-t{fill:var(--tx);font:500 12px "Inter Tight",sans-serif}
.dg-more{cursor:pointer}.dg-more .dg-link{fill:var(--low);text-decoration:underline}.dg-more:hover .dg-link,.dg-more:focus-visible .dg-link{fill:var(--tx)}
.dg-s{font-size:11px}.dg-xs{font-size:10px}.dg-xxs{font-size:9px}.dg-b{font-weight:700}
.dg-mono{font-family:"JetBrains Mono",monospace}
.dg-dim{fill:var(--dim)}.dg-blue{fill:var(--low)}.dg-on-amber{fill:#1a1300;font-weight:800}
.dg-line{fill:none;stroke:var(--dim);stroke-width:1.5}.dg-blue-line{stroke:var(--low)}.dg-dash-line{stroke-dasharray:4 3}
.dg-arrowhead{fill:var(--dim)}
.dg-faint{opacity:.45}.dg-dash{stroke-dasharray:4 3}
.dg-node{fill:rgba(255,255,255,.02);stroke:var(--line2);stroke-width:1.3}.dg-node.dg-bad{stroke:var(--crit)}
.dg-app{fill:color-mix(in srgb,var(--med) 16%,transparent);stroke:var(--med);stroke-width:1.2}
.dg-vm{fill:none;stroke:var(--med);stroke-width:1.2}.dg-vm-tag{fill:var(--med)}
.dg-vip{fill:color-mix(in srgb,var(--low) 14%,transparent);stroke:var(--low);stroke-width:1.3}.dg-vip-dot{fill:var(--low)}
.dg-ring{fill:none;stroke:var(--low);stroke-width:1.3}
.dg-port{fill:none;stroke:var(--low);stroke-width:1.2}
.dg-lan,.dg-src{fill:none;stroke:var(--line2);stroke-width:1.2}
.dg-track{fill:var(--surf3)}.dg-sys{fill:var(--dim)}.dg-vol{fill:var(--ok)}.dg-vol-room{fill:color-mix(in srgb,var(--ok) 25%,transparent)}
.dg-vol-box{fill:color-mix(in srgb,var(--ok) 16%,transparent);stroke:var(--ok);stroke-width:1.2}
.dg-empty{fill:none;stroke:var(--line2);stroke-width:1.2}
/* Ports (Diagram.ports): cable colour is link state; a bond is violet, its
   active member solid and a backup dashed; LAN networks dashed blue. */
.dg-green{fill:var(--ok)}.dg-amber{fill:var(--med)}.dg-red{fill:var(--crit)}.dg-violet{fill:var(--vio)}
.dg-up{fill:none;stroke:var(--ok);stroke-width:2}
.dg-down{fill:none;stroke:var(--crit);stroke-width:1.6;stroke-dasharray:4 3}
.dg-active{fill:none;stroke:var(--vio);stroke-width:2.2}
.dg-standby{fill:none;stroke:var(--vio);stroke-width:1.6;stroke-dasharray:5 4}
.dg-nic{fill:var(--surf3);stroke:var(--line2);stroke-width:1.2}.dg-nic.dg-bad{stroke:var(--crit)}
.dg-led-up{fill:var(--ok)}.dg-led-down{fill:var(--crit)}.dg-led-warn{fill:var(--med)}.dg-led-off{fill:var(--dim)}
.dg-bond{fill:color-mix(in srgb,var(--vio) 14%,transparent);stroke:var(--vio);stroke-width:1.4}.dg-bond.dg-warn{stroke:var(--med)}
.dg-bridge{fill:none;stroke:var(--tx);stroke-width:1.2;stroke-opacity:.55}
.dg-vlan{fill:none;stroke:var(--low);stroke-width:1.2;stroke-dasharray:4 3}
.port-led{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--dim)}
.port-led.up{background:var(--ok)}.port-led.warn{background:var(--med)}.port-led.down{background:var(--crit)}
.port-count.warn{color:var(--med);font-weight:600}
.ports-picture{overflow-x:auto;margin-bottom:10px}
.ports-picture .diagram{margin:0;min-width:540px}.ports-picture .diagram svg{max-height:none}
#nodePorts .ui-callout{margin-bottom:8px}
#netUplinks{margin-top:14px}
.uplink-net{display:grid;gap:8px;padding-block:10px;border-top:1px solid var(--line)}.uplink-net:first-child{border-top:0;padding-top:0}
.uplink-head{gap:10px;flex-wrap:wrap}.uplink-head>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.uplink-checks{display:flex;gap:14px;flex-wrap:wrap}
.uplink-nic{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap}.uplink-nic.taken{opacity:.55}
/* A long form in steps. */
.stepper-head{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.stepper-chip{display:inline-flex;align-items:center;flex-shrink:0;white-space:nowrap;gap:7px;border:1px solid var(--line2);background:transparent;color:var(--mut);border-radius:99px;padding:5px 12px 5px 5px;font:600 12.5px "Inter Tight",sans-serif;cursor:pointer}
.stepper-chip span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surf3);font-size:11px}
.stepper-chip.on{color:var(--tx);border-color:var(--tx)}.stepper-chip.on span{background:var(--tx);color:var(--bg)}
.stepper-chip.done span{background:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--tx)}
.stepper-pane{display:flex;flex-direction:column;gap:10px}
.stepper-pane[hidden]{display:none}
@media(max-width:640px){.stepper-chip{padding:4px 10px 4px 4px;font-size:12px}.stepper-head{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
/* The node page: its sections as Settings lays them out. */
.node-pane{display:flex;flex-direction:column;gap:12px;min-width:0}
.node-pane[hidden]{display:none}
.node-picture .diagram{border:0;padding:0;margin:0;background:none;width:100%}
.node-picture .diagram svg{max-width:560px;max-height:none}
#nodePage .settings-back{margin-bottom:4px}

.diagram svg{margin:0 auto}
#im_volumes{margin-top:6px}
.node-drive-back{display:inline-block;margin-bottom:10px;font-size:13px}
.dialog-more{margin-top:6px}
/* On a phone the header's count and group chips stack, and the chips scroll
   inside their row - wider, they would widen the page and push the bottom
   bar off the screen. */
@media(max-width:900px){
  .phead>div:first-child:has(.wgroup-bar){grid-template-columns:minmax(0,1fr)}
  .phead .wgroup-bar{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .phead>div:first-child{min-width:0;max-width:100%}
}
/* Running jobs live in the bell: a ring turns round it while any run, and
   its list opens with them. Nothing floats over the page. */
#jobTray{display:none!important}
.bellmenu.running>summary::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--low);border-right-color:var(--low);animation:bellspin 1.2s linear infinite}
@keyframes bellspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bellmenu.running>summary::before{animation:none;border-color:var(--low)}}
.bellpop{min-width:300px;max-width:360px}
.actionmenu-pop .bell-job{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;min-width:0;border:0;background:transparent;color:var(--tx);text-align:left;padding:7px 9px;border-radius:8px;cursor:pointer;font:inherit}
.actionmenu-pop .bell-job:hover{background:rgba(255,255,255,.06)}
.bell-job-top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;min-width:0}
.bell-job-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bell-job-top span{color:var(--mut);font-family:"JetBrains Mono",monospace;font-size:11px}
.bell-job-msg{display:block;color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bell-job .jobmeter{margin:2px 0 0}
.actionmenu-pop .bell-all{display:block;width:100%;margin-top:4px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--low);font:600 12px "Inter Tight",sans-serif;padding:8px 9px 4px;text-align:left;cursor:pointer}
#jobsDialogList{max-height:none}
@media(max-width:900px){
  /* On a phone the bell's list is a sheet from the bottom of the screen. */
  .actionmenu-portal .bellpop{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;max-width:none;min-width:0;
    border-radius:16px 16px 0 0;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));max-height:75vh;overflow:auto}
  .page{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.node-drives{display:flex;flex-direction:column;gap:12px;min-width:0}
.node-drives[hidden]{display:none}

/* The setup guide: Settings' layout, its rail of chapters and steps with
   each step's state, and the step open beside them. On a phone the rail is
   a list above the step, which opening a step scrolls to. */
.setup-nav{gap:1px;max-height:calc(100vh - var(--hdr) - 40px);overflow:auto}
.setup-chapter{font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 12px 4px}
.setup-chapter:first-child{padding-top:2px}
.settings-nav button.setup-step{justify-content:flex-start;padding:7px 12px;font-size:13px;color:var(--mut)}
.settings-nav button.setup-step.on{color:var(--tx);font-weight:650}
.setup-mark{width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:1.5px solid var(--line2,rgba(255,255,255,.18));display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1}
.setup-mark.done{background:var(--ok);border-color:var(--ok);color:#06140c}
.setup-mark.done.confirmed{background:var(--surf3);border-color:var(--mut);color:var(--tx)}
.setup-mark.attention{border-color:var(--med);color:var(--med)}
.setup-mark.skipped{border-style:dashed;opacity:.6}
.setup-card .ui-lead{max-width:72ch}
.setup-layout .settings-main,.setup-card{min-width:0}
.setup-card .stepper-chip{flex-shrink:0;white-space:nowrap}
.setup-storage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:14px 0}
.setup-storage-recipe{display:flex;flex-direction:column;min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surf2)}
.setup-storage-recipe .row{flex-wrap:wrap;gap:8px}
.setup-storage-name{display:block;overflow-wrap:anywhere;color:var(--mut);margin-top:8px}
.setup-storage-recipe p{margin:10px 0 0}
.setup-storage-action{margin-top:auto;padding-top:16px}
.setup-storage-action .btn{max-width:100%;white-space:normal}
.setup-picker{display:none}
#setupStep{scroll-margin-top:calc(var(--hdr) + 12px)}
.setup-body{margin:12px 0 4px;overflow-x:auto}
.setup-body .diagram{margin:0}
.setup-meter{display:inline-block;width:120px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;vertical-align:middle}
.setup-meter span{display:block;height:100%;background:var(--ok)}
html[data-theme="light"] .setup-meter{background:rgba(0,0,0,.08)}
@media(max-width:900px){
  .setup-nav{max-height:none}
  .setup-layout .setup-nav{display:none}
  .setup-picker{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mut);min-width:0}
  .setup-picker select{width:100%;min-height:44px}
  .settings-nav button.setup-step{padding:11px 14px}
}
/* The demo's offer pulses within the book icon, clear of notification badges. */
.iconbtn.setupbtn{color:var(--mut);font:inherit}
.iconbtn.setupbtn.pulse svg{animation:setuppulse 1.8s ease-in-out infinite}
@keyframes setuppulse{0%,100%{opacity:1;color:var(--tx)}50%{opacity:.4;color:var(--mut)}}
@media(prefers-reduced-motion:reduce){.iconbtn.setupbtn.pulse svg{animation:none}}
html[data-motion="off"] .iconbtn.setupbtn.pulse svg{animation:none}
.setup-return{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 26px;border-bottom:1px solid #1f8758;background:var(--ok);color:#062a1b;position:sticky;top:var(--hdr);z-index:20}
.setup-return .btn{background:#0b3524;border-color:#0b3524;color:#fff}
.setup-return .btn:hover{background:#104d35;border-color:#104d35}
.setup-return .iconbtn{color:#062a1b;background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15)}
.setup-return-copy{min-width:0;font-size:13px}
.setup-return .row{flex-shrink:0;gap:8px}
.setup-return .iconbtn{width:32px;height:32px}
@media(max-width:900px){.setup-return{padding:10px 12px;gap:8px}.setup-return-copy{font-size:12px}.setup-return .btn{padding:8px 10px}}

/* Collections: metric comparisons and compact lists with inline detail.
   These use the same surfaces, meters, facts and action bars as the pages. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.node-comparisons{display:grid;gap:12px;min-width:0}
.node-comparison{overflow:hidden}
.comparison-table{table-layout:fixed;min-width:calc(116px + var(--comparison-columns)*220px)}
.tblwrap.comparison-scroll:has(>table.stack){overflow-x:auto;overflow-y:hidden}
.comparison-scroll{overscroll-behavior-x:contain;scrollbar-width:auto}
.comparison-scroll:focus-visible{outline:2px solid var(--mut);outline-offset:-2px}
.comparison-table th:first-child{position:sticky;left:0;z-index:1;background:var(--surf)}
.single-node-summary{max-width:760px}
.single-node-summary .nodemetrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.single-node-summary .nodemetrics>div:nth-child(n+3):not(.between){grid-column:1/-1}
.single-node-summary .nodemetrics>.between{flex-direction:column;align-items:flex-start;gap:4px}
.single-node-summary .nodename>div{white-space:normal;overflow:visible;line-height:1.4}
.comparison-disk{display:grid;gap:6px}
.comparison-disk-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;min-height:38px;font-size:12.5px;overflow-wrap:anywhere}
.comparison-disk-tags{display:flex;align-items:start;gap:4px;min-height:24px}
.comparison-disk-capacity{display:flex;gap:8px;flex-wrap:wrap}
.comparison-table .comparison-disk .meter{margin:0}
.comparison-table .podgrid{margin-top:6px;gap:3px}
.comparison-table .podgrid i{width:6px;height:6px;border-radius:1.5px}
.node-comparison .comparison-table .podgrid i.wl,.single-node-summary .nodecard .podgrid i.wl{background:var(--tx);box-shadow:none}
.comparison-table .node-upstrip{margin:0}
.comparison-table .node-upstrip>.dim:first-child{display:none}
.comparison-table th,.comparison-table td{width:auto;text-align:left;vertical-align:top;overflow-wrap:anywhere;white-space:normal;border-bottom:1px solid var(--line)}
.comparison-table th:first-child{width:116px}
.comparison-table tbody th{font:500 11.5px/1.5 "Inter Tight",sans-serif;text-transform:none;letter-spacing:0;color:var(--mut)}
.comparison-table thead th{padding:0 12px;vertical-align:middle}
.comparison-table td{padding:10px 12px}
.comparison-table .selected{background:var(--surf2)}
.comparison-select{display:block;width:100%;min-height:44px;padding:10px 0;background:none;border:0;color:var(--tx);text-align:left;font:650 13px/1.4 "Inter Tight",sans-serif;cursor:pointer;overflow-wrap:anywhere}
.comparison-select:focus-visible,.collection-disclosure:focus-visible{outline:2px solid var(--mut);outline-offset:-2px;border-radius:6px}
.comparison-select[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--mut)}
.comparison-short-name{display:none}
.comparison-table .tag{display:inline-flex;margin:0 4px 4px 0;white-space:normal;max-width:100%}
.comparison-table .meter{margin-top:6px;min-width:0}
.comparison-note{display:block;margin-top:6px;color:var(--mut);font-size:11.5px}
.comparison-disks,.comparison-detail-disks{display:grid;gap:12px}
.comparison-disks .diskline-head{flex-wrap:wrap;gap:3px}
.comparison-disks .disklabel-row{flex-wrap:wrap}
.comparison-table .actionbar{justify-content:flex-start}
.node-comparison-detail{display:none}
.collection-disclosure{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:0;border:0;background:none;color:var(--tx);text-align:left;font:inherit;cursor:pointer}
.collection-disclosure .wtitle{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere;white-space:normal}
.collection-chevron{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:var(--mut);transition:transform .15s var(--e)}
.collection-chevron .btnicon{width:16px;height:16px}
.collection-disclosure[aria-expanded=true] .collection-chevron{transform:rotate(180deg)}
.wltable .wl-row-meta{margin:3px 0 0 37px;overflow-wrap:anywhere;white-space:normal}
.wltable .wl-name{max-width:none;min-width:160px;width:27%}
.wltable .wl-state-tags{gap:4px;flex-wrap:wrap}
.wltable .wl-actions .actionbar{justify-content:flex-end;flex-wrap:nowrap}
.wltable .wl-actions .actionbar>.btn{gap:0;min-width:30px;padding:4px 7px}
.wltable .wl-actions .actionbar>.btn svg{width:14px;height:14px}
.wltable tr.wl-expanded{background:var(--surf2)}
.wltable .wl-detail-row>td{padding:0;white-space:normal}
.wl-inline-detail{padding:12px 16px 16px;background:var(--surf2);border-bottom:1px solid var(--line)}
.wl-inline-detail .about-grid{margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,.75fr)}
.wl-inline-detail .workloadtree{margin:10px 0 0}
.wl-detail-actions{display:none}
.wl-detail-hardware{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.collection-mobile-head{display:none}
html[data-theme="light"] .collection-mobile-summary .pillbtn.warn{color:#8a5200}
html[data-theme="light"] .collection-mobile-summary .pillbtn.crit{color:#a1242a}
/* Mobile collection controls use the existing portalled action menu. */
.list-options>summary.btn{min-height:44px;height:auto;padding:8px 12px!important;font-size:13px;line-height:1.4;gap:6px}
.list-options-pop{top:calc(100% + 6px);bottom:auto;min-width:min(310px,calc(100vw - 16px));max-width:calc(100vw - 16px);padding:8px 12px;background:var(--surf);color:var(--tx)}
.list-options-pop .list-option-setting,.list-options-pop .sortbar label{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;margin:0;font-size:13px;color:var(--tx)}
.list-options-pop .list-option-setting,.list-options-pop .sortbar{border-bottom:1px solid var(--line)}
.list-options-pop select{width:136px;margin:0;font-size:16px;min-height:38px}
.list-options-pop .list-option-setting input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--tx)}
.list-options-pop .sortbar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding-bottom:2px}
.list-options-pop .sortbar:empty{display:none}
.list-options-pop .sortbar select{margin:0;font-size:16px;min-height:38px}
.list-options-pop .sortbar [data-sort-flip]{align-self:flex-end;margin-bottom:6px}
.list-options-pop>button{min-height:44px;padding-inline:0;font-size:13px}
@media(max-width:560px){
  /* Tabs, one toolbar, one status line. Rows keep their existing layout. */
  .collection-page>.phead{display:block;margin-bottom:8px}
  .collection-page>.phead>div:first-child{width:100%;min-width:0}
  .collection-page>.phead>div:first-child>p,.collection-page>.phead .wgroup-bar,.collection-page>.phead>.row{display:none}
  /* Every page's tabs fill the width, so moving between pages of one family
     (Machines and Import, say) never resizes the switcher under your finger.
     A tab never shrinks below its label; a family that does not fit scrolls. */
  .pagetabs{display:flex;width:100%;margin:0}
  .pagetabs>a{flex:1 0 auto;min-height:40px;display:flex;align-items:center;justify-content:center;padding:6px 10px}
  .phead>div:first-child:has(>.pagetabs){align-self:stretch;width:100%;min-width:0}
  .phead>div:first-child:has(.wgroup-bar)>.pagetabs{justify-self:stretch}
  .collection-mobile-head{display:block;margin-bottom:12px}
  .collection-mobile-toolbar{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:7px}
  .wl-group-select,.collection-mobile-scope{flex:1;min-width:0}
  .wl-group-select{width:0;min-height:44px;padding:7px 10px;font-size:13px;font-weight:600;text-overflow:ellipsis}
  .collection-mobile-scope{font-size:13px;color:var(--mut)}
  .collection-mobile-toolbar>.btn{min-height:44px}
  .collection-mobile-toolbar .list-options{position:static;margin:0;flex:0 0 auto}
  .collection-mobile-summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px;min-height:26px;font-size:12.5px;color:var(--mut)}
  .collection-mobile-summary .pillbtn{padding:3px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:12.5px}
  .collection-mobile-summary .pillbtn.warn{color:var(--med)}
  .collection-mobile-summary .pillbtn.crit{color:var(--crit)}
  /* A matrix is the deliberate exception to stacked item rows: four compact
     host columns remain visible together; long fields move below it. */
  .tbl.stack.comparison-table{display:table;width:100%;min-width:calc(56px + var(--comparison-columns)*clamp(56px,(100vw - 82px)/4,86px))}
  .tbl.stack.comparison-table thead{display:table-header-group}
  .tbl.stack.comparison-table tbody{display:table-row-group}
  .tbl.stack.comparison-table tr{display:table-row;padding:0;width:auto}
  .tbl.stack.comparison-table th,.tbl.stack.comparison-table td{display:table-cell;width:auto;padding:8px 4px;text-align:left;vertical-align:middle;font-size:12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
  .tbl.stack.comparison-table th:first-child{width:56px;font-size:11.5px}
  .tbl.stack.comparison-table td::before{content:none}
  .tbl.stack.comparison-table tr.comparison-extra{display:none}
  .comparison-table .meter{min-width:0;width:100%}
  .comparison-table .podgrid{gap:1px;margin-top:4px}
  .comparison-table .podgrid i{width:3px;height:3px;border-radius:1px}
  .comparison-table .node-upstrip{display:grid;grid-template-columns:1fr auto;gap:3px}
  .comparison-table .node-upstrip .mini{grid-column:1/-1;gap:1px;height:8px}
  .comparison-table .node-upstrip b{min-width:0;text-align:left;font-size:11px}
  .comparison-table .node-upstrip>.dim:last-child{font-size:10px}
  .comparison-select{font-size:12px;min-height:40px;padding:4px 0;text-align:center}
  .comparison-table .tag{padding:2px 4px;font-size:10.5px;margin:0 0 3px}
  .comparison-full-name,.comparison-note{display:none}
  .comparison-short-name{display:block}
  .comparison-table .cluster-tag{font-size:10px;text-transform:none;letter-spacing:0}
  .single-node-summary .nodemetrics>div:nth-child(-n+2) .between{flex-direction:column;align-items:flex-start;gap:4px}
  .single-node-summary .nodemetrics>div:nth-child(-n+2) .small.mono{white-space:normal}
  .single-node-summary .nodemetrics>div:nth-child(-n+2) .small.mono .dim{display:block}
  .node-comparison-detail{display:block;padding:13px}
  .node-comparison-head{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:14px}
  .node-comparison-head>div:first-child{min-width:0;overflow-wrap:anywhere}
  .node-comparison-head .actionbar{flex-shrink:0}
  .node-comparison-detail .about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .node-comparison-detail .about-grid .tag{white-space:normal;max-width:100%}
  .comparison-detail-disks .diskline-head{flex-wrap:wrap;gap:3px}
  .comparison-detail-disks .disklabel-row{flex-wrap:wrap}
  /* Running rows are two short lines, stopped rows one. Actions and long
     facts appear inline on demand, without a second title or a modal. */
  .tbl.stack.compact.wltable tr.wl-row{display:grid;grid-template-columns:24px auto minmax(0,1fr) auto;grid-template-areas:"name name name status" ". cpu ram status";align-items:center;gap:2px 9px;padding:6px 12px}
  .tbl.stack.compact.wltable tr.wl-off{grid-template-areas:"name name name status"}
  .tbl.stack.compact.wltable .wl-row>td{display:block;padding:0;min-width:0;width:auto;grid-column:auto;grid-row:auto;order:0;text-align:left}
  .tbl.stack.compact.wltable .wl-row>td::before{content:none}
  .tbl.stack.compact.wltable .wl-row>.wl-name{grid-area:name;min-width:0}
  .tbl.stack.compact.wltable .wl-row>.wl-status{grid-area:status;text-align:right!important;align-self:start;padding-top:3px;max-width:86px}
  .tbl.stack.compact.wltable .wl-state-tags{display:flex;justify-content:flex-end;gap:3px}
  .tbl.stack.compact.wltable .wl-row>.wl-cpu{grid-area:cpu;font-size:11.5px;line-height:1.4}
  .tbl.stack.compact.wltable .wl-row>.wl-ram{grid-area:ram;font-size:11.5px;line-height:1.4}
  .tbl.stack.compact.wltable .wl-row>.wl-cpu::before,.tbl.stack.compact.wltable .wl-row>.wl-ram::before{content:attr(data-label) " ";display:inline;font-size:11.5px;color:var(--mut);margin:0}
  .tbl.stack.compact.wltable .wl-row>.wl-image,.tbl.stack.compact.wltable .wl-row>.wl-access,.tbl.stack.compact.wltable .wl-row>.wl-actions,
  .tbl.stack.compact.wltable .wl-row>.wl-uptime,
  .tbl.stack.compact.wltable tr.wl-off>.wl-cpu,.tbl.stack.compact.wltable tr.wl-off>.wl-ram,.wltable .wl-row-meta{display:none}
  .wltable .collection-disclosure .av{width:24px;height:24px;flex:0 0 24px}
  .wltable .collection-disclosure .wtitle{font-size:13px}
  .tbl.stack.compact.wltable tr.wl-detail-row{display:block;padding:0}
  .tbl.stack.compact.wltable tr.wl-detail-row>td{display:block;padding:0;width:100%;text-align:left}
  .tbl.stack.compact.wltable .wl-inline-detail{display:block;padding:10px 12px 12px}
  .wl-inline-detail .about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wl-inline-detail .wl-detail-image,.wl-inline-detail .wl-detail-access{grid-column:1/-1}
  .tbl.stack.compact.wltable .wl-name .wl-row-meta{display:none}
  .phead .seg.iconseg:not(.phone-keep){display:none}
  .wl-detail-actions{display:block;margin-top:12px}
  .wl-detail-actions .actionbar{justify-content:flex-end}
}
@media(max-width:350px){
  .collection-mobile-toolbar .list-options-label{display:none}
  .collection-mobile-toolbar .list-options>summary.btn{width:44px;justify-content:center;padding:8px!important}
}

/* Metrics settle into new observations; motion preferences apply to bars too. */
html[data-motion="off"] .meter>span,html[data-motion="off"] .ui-bar i{transition:none}
@media(prefers-reduced-motion:reduce){.meter>span,.meter.split>span,.ui-bar i{transition:none}}

/* Three short milestones keep the disk preparation flow compact on phones. */
.modalbox[data-context="disk-v2"] .ui-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.modalbox[data-context="disk-v2"] .ui-steps li{gap:7px;padding:6px 0;grid-template-columns:24px minmax(0,1fr);align-items:center}
.modalbox[data-context="disk-v2"] .ui-steps li::before{display:none}
.modalbox[data-context="disk-v2"] .ui-step-num{width:24px;height:24px}

/* Dialog standard: opaque shared shell, one action footer, Section rail. */
.modalbox{background:var(--surf);color:var(--tx)}
.dialog-rail{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:22px;align-items:start;min-width:0}
.dialog-rail>.stepper-head{grid-column:1;grid-row:1 / span 30;display:flex;flex-direction:column;align-items:stretch;gap:4px;position:sticky;top:calc(var(--modalhead-h, 0px) + 14px);margin:0;padding:0 12px 16px 0;border-right:1px solid var(--line);min-width:0}
.dialog-rail .stepper-chip{display:block;white-space:normal;text-align:left;padding:11px 12px;border:0;border-radius:8px;min-height:40px;width:100%;color:var(--mut);font-size:12.5px}
.dialog-rail .stepper-chip.on{background:var(--surf3);color:var(--tx)}
.dialog-rail>.stepper-pane,.dialog-rail>.dialog-rail-content{grid-column:2;grid-row:1;min-width:0;min-height:300px}
.dialog-rail .stepper-pane .ui-lead{margin-top:0}
.dialog-section-picker{display:none}
.dialog-rail>.stepper-foot,.dialog-rail>.ui-actions{grid-column:1 / -1;grid-row:31;margin-top:20px!important}
.dialog-rail>.dialog-rail-notice{grid-column:1 / -1;grid-row:30;min-width:0}
.dialog-rail .ui-more{margin-top:12px}
.ui-more>summary{min-height:32px;display:flex;padding:7px 0;color:var(--mut)}
.ui-more[open]>summary{color:var(--tx)}
.ui-actions{background:var(--surf);backdrop-filter:none;align-items:center;flex-direction:row;flex-wrap:wrap}
.ui-actions-start,.ui-actions-end{flex-direction:row;align-items:center;flex-wrap:nowrap;width:auto;min-width:0}
.ui-actions-start{margin-right:auto}
.ui-actions-end{margin-left:auto}
.ui-actions-end:has(>[data-dialog-dismiss]){display:contents}
.ui-actions [data-dialog-dismiss]{margin-right:auto}
.ui-actions .btn{width:auto;min-width:0;justify-content:center;white-space:normal}
.ui-actions-start:has(input){flex-basis:100%;margin:0}
.ui-actions.legacy{justify-content:space-between}
.ui-actions.legacy>.btn.pri,.ui-actions.legacy>.btn.danger{order:2;margin-left:auto}
.stepper-foot [data-finish]{display:contents}
.stepper-foot [data-finish][hidden]{display:none}
.dialog-master-detail{grid-template-columns:200px minmax(0,1fr)}
.dialog-master-nav{grid-column:1;grid-row:1;min-width:0;padding-right:12px;border-right:1px solid var(--line)}
.dialog-master-nav button{display:block;width:100%;border:0;border-radius:8px;background:transparent;color:var(--tx);padding:11px 10px;text-align:left;font:500 12.5px "Inter Tight",sans-serif;overflow-wrap:anywhere;cursor:pointer}
.dialog-master-nav button[aria-current]{background:var(--surf3)}
.dialog-master-nav small{display:block;font-size:11.5px;color:var(--mut);margin-top:3px}
.dialog-master-nav .needs-attention{color:var(--crit)}
.dialog-master-content{grid-column:2;grid-row:1;min-width:0}
.dialog-master-content .jobitem{padding:0;border:0;background:none}
.dialog-master-content .jobitemtop{margin-bottom:12px}
.dialog-master-content .jobfoot{margin:12px 0;gap:12px;overflow-wrap:anywhere}
.dialog-master-content .jobactions{gap:8px;flex-wrap:wrap}
/* Log and Dismiss belong to the job, not to what it is asking for: they sit
   at the start of the row, its own actions at the end. */
.jobactions-side{display:flex;gap:6px;margin-right:auto}
.dialog-master-content .jobmeter.unknown{display:none}
.dialog-master-content .ui-more{margin-top:18px}
.jobs-dialog-actions{margin-top:18px}
@media(max-width:640px){
 .dialog-rail{display:block}
 .dialog-rail>.stepper-head{display:none}
 .dialog-section-picker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;color:var(--mut)}
 .dialog-section-picker select{flex:1;min-width:0;font-size:16px;height:44px}
 .dialog-rail>.stepper-pane,.dialog-rail>.dialog-rail-content{min-height:0}
 .ui-actions,.ui-actions-start,.ui-actions-end{flex-direction:row;align-items:center}
 .ui-actions{gap:8px}
 .ui-actions .btn{min-height:44px;font-size:12.5px;padding-left:12px;padding-right:12px;max-width:100%}
 .ui-actions.legacy{flex-direction:row}
 .ui-actions.legacy>.btn.pri,.ui-actions.legacy>.btn.danger{order:2}
 .ui-actions-end{justify-content:flex-end}
 .ui-actions-start:has(input){flex-basis:100%}
 .ui-more>summary{min-height:44px}
 .dialog-master-nav{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;margin:0 0 18px}
 .dialog-master-nav button{min-height:44px}
}

@media(max-width:640px){.dialog-master-nav{max-height:230px;overflow:auto}}

.ui-more>summary::before{flex:0 0 6px}
.dialog-master-content .jobitemtop b{font-size:14px;white-space:normal;overflow-wrap:anywhere}
.dialog-master-content .jobfoot{font-size:13px;color:var(--mut);align-items:flex-start}
.dialog-master-content .jobfoot>span:first-child{white-space:normal;overflow:visible;text-overflow:clip}
.dialog-master-nav .ui-section{margin:0 0 14px}

/* Setup guides share the section picker; their steps are externally managed. */
@media(max-width:640px){.setup-card>.stepper-head{display:none}}
.ui-actions[hidden]{display:none}
.ui-actions-end:empty{display:none}
.vmc-paste .ui-actions{position:static}

/* Shared page/module layout owns placement; features supply content and actions. */
:root{--page-gap:14px;--module-gap:16px;--workspace-gap:18px;--workspace-rail:230px}
.settings-card-head>div:first-child{min-width:0}
.page-actions,.module-actions{align-items:center;justify-content:flex-end;max-width:100%}
.settings-main{min-width:0}
.savebar[hidden]{display:none}
@media(max-width:760px){.page-actions,.module-actions{flex-wrap:wrap}}

/* Dashboard composition: a reading-order grid shared by view and editor. */
.dashboard-canvas{container-type:inline-size;min-width:0;width:100%}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--module-gap);align-items:stretch}
.dashboard-widget{grid-column:var(--widget-column,auto) / span var(--widget-span);grid-row:var(--widget-row,auto);position:relative;min-width:0;display:flex;flex-direction:column}
.dashboard-widget-content{min-width:0;flex:1;display:flex;flex-direction:column;min-height:var(--widget-height)}
.dashboard-widget-content>.card{height:100%;flex:1;margin:0;min-width:0}
.dashboard-widget .hist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-widget .portal-grid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin-bottom:0}
.dashboard-widget .portal-section+.portal-section{margin-top:14px}
.dashboard-widget .portal-section .sec{margin-top:0}
.dashboard-nodes>.node-comparisons>.node-comparison{border:0;background:none}
.dashboard-empty{text-align:center;padding:44px 20px}
.dashboard-edit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);background:var(--surf);border-radius:12px;margin-bottom:18px;position:sticky;top:0;z-index:12}
.dashboard-edit-toolbar .row{gap:8px;flex-wrap:wrap}
.dashboard-edit-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.dashboard-workbench{min-width:0}
.dashboard-canvas-label{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--mut);margin:0 0 12px}
.dashboard-canvas[data-editing]{padding:12px;border:1px dashed var(--line);border-radius:14px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px}
.dashboard-canvas[data-editing] .dashboard-widget{border:1px solid var(--line);border-radius:12px;background:var(--surf);box-shadow:0 3px 14px #0001;isolation:isolate}
.dashboard-canvas[data-editing] .dashboard-widget.selected{outline:2px solid var(--tx);outline-offset:2px}
.dashboard-widget-tools{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 8px;border-bottom:1px solid var(--line);position:relative;z-index:3;min-width:0}
.dashboard-grip{border:0;background:none;color:var(--tx);cursor:grab;touch-action:none;font:inherit;display:flex;gap:7px;align-items:center;min-width:0;text-align:left;min-height:32px;border-radius:6px}
.dashboard-grip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.dashboard-select{position:absolute;inset:48px 0 0;z-index:1;background:transparent;border:0;border-radius:0 0 12px 12px;cursor:pointer}
.dashboard-resize{position:absolute;bottom:1px;right:1px;z-index:3;border:0;border-radius:8px 0 10px 0;background:var(--surf);color:var(--tx);width:32px;height:32px;cursor:nwse-resize;touch-action:none}
.dashboard-widget.dragging{opacity:.65;outline:2px dashed var(--tx)}
.dashboard-widget.drop-target{outline:3px solid var(--tx);outline-offset:4px}
.dashboard-widget.drag-source{opacity:.25}
.dashboard-drag-preview{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;opacity:.82}
.dashboard-drag-preview>.dashboard-canvas[data-editing]{padding:0;border:0;border-radius:0;background:none;height:0}
.dashboard-drag-preview .dashboard-widget{margin:0;will-change:transform;box-shadow:0 16px 44px #0005!important}
.dashboard-drag-preview .dashboard-widget-tools{cursor:grabbing}

.dashboard-canvas[data-editing] .dashboard-widget-content{pointer-events:none;user-select:none}
.dashboard-canvas[data-editing] .dashboard-widget-content>.card{border:0;border-radius:0 0 12px 12px;box-shadow:none;padding-bottom:32px}
.dashboard-library{position:sticky;top:78px;max-height:calc(100vh - 100px);overflow-y:auto;padding:16px}
.dashboard-catalog{display:grid;gap:4px;max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.dashboard-catalog-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--tx);text-align:left;cursor:pointer;font:inherit;width:100%}
.dashboard-catalog-item:hover,.dashboard-catalog-item.on{border-color:var(--line);background:var(--hover)}
.dashboard-catalog-item b{font-size:12.5px;display:block}
.dashboard-catalog-item small{display:block;color:var(--mut);font-size:11.5px;line-height:1.5;margin-top:2px}
.dashboard-inspector{border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:16px;outline:none}
.dashboard-inspector>label{display:block;margin-bottom:12px;font-size:12px;color:var(--mut)}
.dashboard-inspector select{display:block;width:100%;margin-top:5px}
.dashboard-order{display:flex;gap:8px;margin-bottom:12px}
.dashboard-library .ui-guide{margin-top:18px}
.dashboard-phone{max-width:390px;margin:0 auto;border:5px solid var(--line)!important;border-radius:24px!important;padding:12px!important}
.dashboard-grip:focus-visible,.dashboard-select:focus-visible,.dashboard-resize:focus-visible,.dashboard-catalog-item:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
@container (max-width:760px){
  .dashboard-widget{grid-column:span 12;grid-row:auto}
  .dashboard-widget-content{min-height:0}
  .dashboard-resize{display:none}
}
@container (max-width:560px){
  .dashboard-widget .hist-grid{grid-template-columns:minmax(0,1fr)}
  .dashboard-widget .history-card>.between{flex-wrap:wrap;gap:10px}
  .dashboard-widget .comparison-table{min-width:0;width:100%}
  .dashboard-widget .comparison-table th,.dashboard-widget .comparison-table td{padding:8px 4px;overflow-wrap:anywhere}
  .dashboard-widget .comparison-table th:first-child{width:56px}
  .dashboard-widget .comparison-extra,.dashboard-widget .comparison-full-name,.dashboard-widget .comparison-note{display:none}
  .dashboard-widget .comparison-short-name{display:block}
  .dashboard-widget .comparison-table .meter{min-width:0}
  .dashboard-widget .comparison-select{font-size:11.5px;padding:4px 0;min-height:40px}
  .dashboard-widget .node-comparison-detail{display:block;padding:10px}
  .dashboard-widget .node-comparison-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
  .dashboard-widget .about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-widget .about-grid>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .dashboard-widget .about-grid .tag{white-space:normal;max-width:100%;overflow-wrap:anywhere}
  .dashboard-widget .hist-node{flex-wrap:wrap}
  .dashboard-widget .storbody{flex-wrap:nowrap}
}
@media(max-width:1100px){
  .dashboard-edit-layout{grid-template-columns:minmax(0,1fr)}
  .dashboard-library{position:static;max-height:none;grid-row:1}
  .dashboard-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dashboard-inspector{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
  .dashboard-inspector>.settings-card-head{width:100%;margin-bottom:0}
  .dashboard-inspector>label{flex:1;min-width:120px;margin-bottom:0}
  .dashboard-order{margin-bottom:0}
}
@media(max-width:600px){
  .dashboard-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-catalog-item small{display:none}
  .dashboard-library{padding:12px}
  .dashboard-edit-toolbar{position:sticky}
  .dashboard-canvas-label{flex-wrap:wrap}
  .dashboard-canvas[data-editing]{padding:8px}
  .dashboard-grip,.dashboard-resize,.dashboard-widget-tools>.iconbtn{min-height:44px}
  .dashboard-select{top:60px}
  .dashboard-edit-layout{gap:14px}
}

.dashboard-library-toggle{display:none}
@media(max-width:1100px){
  .dashboard-library-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;border:0;background:none;color:var(--tx);font:inherit;padding:6px 0;min-height:36px;cursor:pointer}
  .dashboard-library-toggle span{color:var(--mut);font-size:12px}
  .dashboard-library[data-panel-open="false"]>.dashboard-library-body{display:none}
  .dashboard-library[data-panel-open="true"]>.dashboard-library-body{margin-top:14px}
}

/* The shared Portal list's compact variant fits narrow dashboard widgets. */
.portal-compact .portal-tile{flex-direction:row;align-items:center;min-height:68px;padding:10px 12px;gap:10px}
.portal-compact .portal-text{flex:1}
.portal-compact .portal-icon{width:36px;height:36px}

/* Shared mobile page contract: compact chrome, paired facts and controls,
   full-width long inputs, and neutral navigation. See docs/design.md. */
.workspace-location{display:none}
@media(max-width:900px){
  :root{--page-gap:10px;--module-gap:12px;--workspace-gap:12px}
  .page{padding:12px 12px 80px}
  .phead{gap:8px;margin-bottom:10px}
  .page-summary-optional{display:none}
  .pagetabs{margin-bottom:0;min-height:40px;align-items:center}
  .pagetabs a{min-height:40px;display:flex;align-items:center}
  .phead>.row:empty{display:none}
  .workspace-location{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-width:0;border-bottom:1px solid var(--line);padding-bottom:6px}
  .workspace-location .settings-back{flex:0 0 auto;width:auto;min-height:44px;padding:8px 4px;margin:0!important;background:transparent;color:var(--tx);border-radius:8px}
  .workspace-current{margin-left:auto;min-width:0;text-align:right;font-size:12px;font-weight:600;color:var(--mut);overflow-wrap:anywhere}
  .settings-back:hover{background:var(--hover)}
  .settings-back:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
  .settings-main .card{container-type:inline-size}
  .srow{column-gap:10px;row-gap:6px}
  .srow-l{flex:1 1 90px}
  .srow:has(.rng) .srow-c,.srow:has(.appearance-seg) .srow-c{flex:0 1 auto;margin-left:auto;justify-content:flex-end}
  .srow-c .rng{width:clamp(90px,25vw,140px)}
  .srow-c .appearance-seg{max-width:100%}
  .srow-c .appearance-seg button{min-height:40px;padding:7px 10px}
  .dashboard-edit-layout,.dashboard-canvas-label{display:none}
  .dashboard-mobile-notice{padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
  .dashboard-edit-toolbar [onclick="Dashboard.preview()"],.dashboard-edit-toolbar [onclick="Dashboard.reset()"],.dashboard-edit-toolbar [onclick^="Dashboard.history("]{display:none}
}
/* Chart and figures share a row down to a small phone. Never shrink numbers. */
@container (max-width:400px){
  .storbody{display:grid;grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr);gap:10px;align-items:center}
  .stordonut svg{width:100%;max-width:110px;height:auto}
  .storstats .drow{padding:6px 0;gap:6px}
  .storstats .drow .dl{font-size:11px}
}
@media(max-width:360px){
  .srow:has(.appearance-seg){align-items:flex-start}
  .srow:has(.appearance-seg) .srow-c{flex:1 1 100%;justify-content:flex-start;margin:0}
}

/* Shared compact status/advice rows: status always has a text equivalent. */
.ui-status-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--mut);margin-right:8px}
.ui-status-dot.ok{background:var(--ok,#24bc88)}.ui-status-dot.bad{background:var(--crit)}.ui-status-dot.warn{background:var(--med)}.ui-status-dot.info{background:var(--low)}
.ui-insight-row{display:flex;align-items:flex-start;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.ui-insight-row:last-child{border-bottom:0}.ui-insight-row>.ui-status-dot{margin:6px 0 0}.ui-insight-row>div:first-of-type{flex:1;min-width:0}
.ui-insight-row b,.ui-insight-row small{display:block;overflow-wrap:anywhere}.ui-insight-row small{color:var(--mut);font-size:12px;margin-top:4px}
.ui-insight-action{display:flex;align-items:flex-end;flex-direction:column;gap:6px}.ui-insight-action .btn{padding:5px 9px;font-size:12px}
.insight-summary{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;font-weight:600;margin:10px 0}.insight-summary span{color:var(--mut);font-weight:400}
.insight-widget{height:100%;min-width:0}.insight-widget .settings-card-head .btn{font-size:12px;padding:5px 8px}
#clusterHealth{margin-bottom:var(--page-gap,14px)}

/* Node summaries use the widget's available width, including editor previews. */
.node-compact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr));gap:16px 14px}
.node-compact-host{min-width:0;font-size:12px;line-height:1.35}
.node-compact-heading{display:flex;align-items:center;gap:7px;min-width:0}
.node-compact-heading button{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;min-width:0}
.node-compact-state{font-size:11px;margin:3px 0 9px}
.node-compact-metric{display:grid;grid-template-columns:45px minmax(32px,1fr) 28px;align-items:center;gap:5px;margin:3px 0}
.node-compact-metric>span:first-child,.node-compact-line>span{color:var(--mut)}
.node-compact-metric b{text-align:right;font-size:12px}.node-compact-metric .meter{margin:0;min-width:0;width:100%}
.node-compact-line{display:flex;justify-content:space-between;gap:8px;margin:3px 0;min-width:0}
.node-compact-line b{font-size:11.5px;font-weight:550;overflow-wrap:anywhere;text-align:right;min-width:0}
.node-compact-warning{display:block;background:none;border:0;color:var(--med);padding:5px 0 0;text-align:left;font:inherit;font-size:11px;line-height:1.4;overflow-wrap:anywhere;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#clusterHealth{scroll-margin-top:90px}
.dashboard-nodes .single-node-summary{max-width:none;min-width:0}
.dashboard-nodes .nodecard{min-width:0}
.dashboard-nodes .nodehead{flex-wrap:wrap}

/* Shared dense resource list for container and VM dashboard widgets. */
.dashboard-resource-widget{container-type:inline-size;display:flex;flex-direction:column}
.dashboard-resource-widget>[data-insight]{display:flex;flex-direction:column;min-height:0;max-height:calc(var(--resource-list-height) - 76px)}
.dashboard-resource-scroll{overflow:auto;min-height:0;scrollbar-width:thin}
.dashboard-resource-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.dashboard-resource-table th{position:sticky;top:0;background:var(--surf);z-index:1;color:var(--mut);font-weight:500;text-align:left}
.dashboard-resource-table th,.dashboard-resource-table td{padding:4px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.dashboard-resource-table th:nth-child(2){width:78px}.dashboard-resource-table th:nth-child(3){width:54px}.dashboard-resource-table th:nth-child(4){width:72px}
.dashboard-resource-table td:nth-child(n+3),.dashboard-resource-table th:nth-child(n+3){text-align:right;white-space:nowrap}
.dashboard-resource-name{display:flex;align-items:center;gap:7px;min-width:0}.dashboard-resource-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-resource-state{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dashboard-resource-state.ok{color:var(--ok)}.dashboard-resource-state.warn{color:var(--med)}.dashboard-resource-state.bad{color:var(--crit)}.dashboard-resource-state.neutral{color:var(--mut)}
.dashboard-resource-footer{display:flex;justify-content:space-between;gap:12px;padding-top:9px;color:var(--mut);font-size:11px}
@container(max-width:360px){.dashboard-resource-table{font-size:11px}.dashboard-resource-table th,.dashboard-resource-table td{padding:4px 2px}.dashboard-resource-table th:nth-child(2){width:62px}.dashboard-resource-table th:nth-child(3){width:40px}.dashboard-resource-table th:nth-child(4){width:60px}.dashboard-resource-name{gap:5px}.dashboard-resource-name .ui-status-dot{width:6px;height:6px}}

.dashboard-resource-widget>.settings-card-head{flex-direction:row;align-items:center;flex-wrap:nowrap}
.dashboard-resource-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));column-gap:18px;align-items:start}
@container(max-width:637px){.dashboard-resource-columns{row-gap:0}}
html[data-theme="light"] .dashboard-resource-state.ok{color:#167347}
html[data-theme="light"] .dashboard-resource-state.warn,html[data-theme="light"] .node-compact-warning,html[data-theme="light"] .node-compact-state.t-warm{color:#8a5200}
html[data-theme="light"] .dashboard-resource-state.bad{color:#a1242a}

.architecture-cluster+.architecture-cluster{margin-top:24px}

/* Mobile notifications reuse the standard dialog, with comfortable action rows. */
.notification-center{display:grid;gap:6px;min-width:0}
.notification-center>button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surf2);color:var(--tx);font:inherit;font-size:13px;text-align:left;white-space:normal;cursor:pointer}
.notification-center>button svg{width:18px;height:18px;flex:none}.notification-center>button.danger{color:var(--crit)}
.notification-center .bell-head{padding:10px 0 2px;font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--mut)}
.notification-center .bell-job{display:flex;flex-direction:column;align-items:stretch}
.notification-center .bell-job-msg{white-space:normal;color:var(--mut);line-height:1.4}
.notification-center .bell-job-top b{white-space:normal}
.notification-center .bell-all{margin:0;padding:10px 12px;color:var(--tx);font-size:13px;border:1px solid var(--line)}
html[data-theme="light"] .notification-center>button.danger{color:#a1242a}

/* Full-page creation forms reuse the same rail and actions as dialogs. */
.deploy-form{max-width:1200px;margin:0 auto}
.deploy-form .stepper-pane{min-height:340px}
.section-page>.stepper-foot{position:static;margin-left:0!important;margin-right:0!important;padding:14px 0 0;background:var(--surf)}
.deploy-summary .dv{overflow-wrap:anywhere;min-width:0}
@media(max-width:900px){.deploy-form .stepper-pane{min-height:0}}

/* Short related form fields retain a useful pair at phone widths. */
.f2.compact-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.f2.compact-fields>.f{min-width:0}

/* Editor controls and widget lists share quiet, theme-aware scrollbars. */
.dashboard-library,.dashboard-catalog,.dashboard-group-list,.dashboard-resource-scroll{scrollbar-width:thin;scrollbar-color:var(--mut) transparent}
.dashboard-library::-webkit-scrollbar-thumb,.dashboard-catalog::-webkit-scrollbar-thumb,.dashboard-group-list::-webkit-scrollbar-thumb,.dashboard-resource-scroll::-webkit-scrollbar-thumb{background:var(--mut);border:2px solid var(--surf);border-radius:8px}
.dashboard-library::-webkit-scrollbar-track,.dashboard-catalog::-webkit-scrollbar-track,.dashboard-group-list::-webkit-scrollbar-track,.dashboard-resource-scroll::-webkit-scrollbar-track{background:var(--surf)}
.dashboard-inspector .dashboard-check{display:flex;align-items:center;gap:8px;color:var(--tx);min-height:30px;font-size:12px;margin:0}
.dashboard-check input{width:auto;flex:0 0 auto;margin:0}
.dashboard-group-options{border:1px solid var(--line);border-radius:8px;padding:8px;margin:0 0 12px;min-width:0}
.dashboard-group-options legend{color:var(--mut);font-size:12px;padding:0 4px}
.dashboard-group-list{max-height:130px;overflow:auto;overflow-wrap:anywhere}
.dashboard-inspector #dashboardGroupOptions{width:100%}
.dashboard-portal>#dashboardPortal{max-height:calc(var(--resource-list-height) - 76px)}
/* auto-fill keeps a short group's empty columns, so every group's links line up at one width. */
.dashboard-widget .portal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:0 16px}
.portal-list .portal-tile{min-height:36px;padding:5px 2px;gap:8px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;margin:0}
.portal-list .portal-icon{height:22px;width:22px;font-size:10px;flex:0 0 22px}
.portal-list .portal-icon svg{height:16px;width:16px}
.portal-list .portal-text{min-width:0}.portal-list .portal-text b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-list .portal-dot{position:static;flex:0 0 7px;margin-left:auto}
@media(max-width:900px){.portal-list .portal-tile{min-height:44px}}

@media(min-width:1101px){
  .dashboard-inspector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dashboard-inspector>.settings-card-head,.dashboard-inspector>#dashboardGroupOptions,.dashboard-inspector>.dashboard-order,.dashboard-inspector>.btn{grid-column:1 / -1}
  .dashboard-inspector>label{min-width:0;margin:0}
  .dashboard-inspector .dashboard-check{align-self:end;min-height:36px}
  .dashboard-inspector select{min-width:0;padding-left:8px;padding-right:8px}
}

.dashboard-custom{display:flex;flex-direction:column;min-width:0}
.dashboard-custom-body{min-width:0;flex:1}
.dashboard-custom-frame{display:block;width:100%;border:0;background:transparent;color-scheme:normal}
.dashboard-custom-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;max-height:440px}
.dashboard-custom-field{grid-column:1 / -1;width:100%}
.dashboard-custom-field input,.dashboard-custom-field textarea{display:block;width:100%;margin-top:5px;min-width:0}
.dashboard-custom-field textarea{resize:vertical;font-family:var(--mono);font-size:12px;max-height:320px}

/* A text field's suggestions (ui.js): under the field and its width, above it
   when there is no room below, above dialogs. */
.suggest-pop{position:fixed;z-index:75;margin:0;padding:4px;list-style:none;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line2);border-radius:11px;background:var(--surf2);color:var(--tx);box-shadow:0 16px 45px rgba(0,0,0,.45)}
.suggest-pop li{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;overflow-wrap:anywhere}
.suggest-pop li:hover,.suggest-pop li[aria-selected="true"]{background:var(--surf3)}

/* Back to top (ui.js): bottom-right, above the job tray and the phone's
   bottom bar; hidden near the top and while an overlay is open. */
.backtop{position:fixed;right:22px;bottom:calc(18px + var(--tray-lift, 4px));z-index:41;display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line2);border-radius:50%;background:var(--surf2);color:var(--tx);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--e),transform .2s var(--e),visibility 0s .2s,bottom .2s var(--e)}
.backtop.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--e),transform .2s var(--e),bottom .2s var(--e)}
.backtop svg{width:18px;height:18px;transform:rotate(180deg);stroke:currentColor;fill:none;stroke-width:1.9}
.backtop:hover{background:var(--surf3)}
.backtop:focus-visible{outline:2px solid var(--low);outline-offset:2px}
html:has(#modal:not(.hidden)) .backtop:not(.dialog-backtop),html:has(.askdlg) .backtop,html:has(.drawer.open) .backtop,html:has(body.navopen) .backtop{display:none}
@media(max-width:900px){.backtop{right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px) + var(--tray-lift, 4px) - 4px)}}
@media(prefers-reduced-motion:reduce){.backtop,.backtop.on{transition:none}}

/* Networking › What needs attention (#305): each item, why, and Show. */
.net-attention{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.net-attention li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.net-attention li:first-child{border-top:0}
.net-attention b{overflow-wrap:anywhere}
/* A CPU or memory amount with its unit (UI.quantity, #311). */
.qty{display:flex;gap:6px;min-width:0}.qty .qty-text{flex:1 1 auto;min-width:0}.qty .qty-unit{flex:0 0 auto;width:auto}
.qty.bad .qty-text{border-color:var(--crit)}
.qty-said{display:flex;flex-wrap:wrap;gap:0 6px}.qty-read:empty{display:none}
.qty-read:not(:empty)+.qty-usage::before{content:"· ";color:var(--dim)}
.qty-warn{color:var(--crit)}
/* Networking in sections (views-network.js): what needs attention on each
   section's line, and the path a connection takes on the Overview. */
.network-pane{display:flex;flex-direction:column;gap:14px;min-width:0}
.network-pane>.note{margin:0}
.net-nav-due{color:var(--med);font-weight:600}
.net-path{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:10px}
.net-path>i{align-self:center;color:var(--dim);font-style:normal}
.net-path-step{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line2);background:rgba(255,255,255,.02);color:var(--tx);border-radius:12px;padding:8px 12px;font:inherit;cursor:pointer;min-width:0}
.net-path-step b{font-size:13px}.net-path-step small{color:var(--mut);font-size:11.5px}
.net-path-step:hover{border-color:var(--tx)}.net-path-step:focus-visible{outline:2px solid var(--low);outline-offset:2px}
@media(max-width:640px){.net-path{flex-direction:column}.net-path>i{transform:rotate(90deg)}}
.bond-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.bond-compare>div{min-width:0}.bond-compare .ports-picture .diagram{min-width:420px}
/* A node's duties: one line each, cut short with its tooltip saying the rest. */
.tag.duty{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* Logos picked from the app store: a grid of tiles, and the list of apps with none. */
.logo-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;max-height:min(46vh,360px);overflow:auto;padding:2px}
.logo-tile{display:grid;justify-items:center;align-content:start;gap:6px;padding:12px 6px 10px;border:1px solid var(--line2);border-radius:12px;background:var(--surf2);color:var(--tx);cursor:pointer;font:inherit;text-align:center;min-width:0}
.logo-tile:hover{border-color:var(--mut)}
.logo-tile.on{border-color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.logo-tile .logo-name{font-size:12.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av.av-logo{width:44px;height:44px;border-radius:12px}
.logo-field{gap:8px;flex-wrap:nowrap}.logo-field input{flex:1;min-width:0}
.logo-inline{display:grid;gap:8px;margin-top:8px}
.logo-fix{display:grid;border:1px solid var(--line2);border-radius:12px;max-height:min(52vh,460px);overflow:auto}
.logo-fix-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-top:1px solid var(--line2)}
.logo-fix-row:first-child{border-top:0}
.logo-fix-pick,.logo-fix-guess{display:flex;align-items:center;gap:9px;min-width:0}
.logo-fix-pick input{flex:none;margin:0;width:16px;height:16px}.logo-fix-nobox{flex:none;width:16px}
.logo-fix-pick{color:var(--tx);font-weight:inherit;text-transform:none;letter-spacing:0;font-size:inherit}
.logo-fix-name{display:grid;gap:2px;min-width:0}
.logo-fix-name b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-fix-name .xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-fix-name .pill{justify-self:start}
.logo-fix-acts{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:640px){
  .logo-fix-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .logo-fix-acts{grid-column:1/-1;justify-content:flex-start}
  .logo-tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
/* Answering: whether each app answers at its address (uptime.js). */
.answer-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.answer-dot.up{background:var(--ok)}.answer-dot.slow{background:var(--med)}.answer-dot.down{background:var(--crit)}
.answer-dot.off,.answer-dot.unknown{background:var(--surf3)}
.answer-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.answer-state.big{font-size:15px}.answer-state.big .answer-dot{width:10px;height:10px}
.answer-strip{display:inline-flex;gap:2px;align-items:stretch;height:14px;min-width:0}
.answer-strip i{flex:1 1 0;min-width:2px;max-width:6px;border-radius:1px;background:color-mix(in srgb,var(--ok) 75%,transparent)}
.answer-strip i.slow{background:var(--med)}.answer-strip i.down{background:var(--crit)}.answer-strip i.none{background:var(--surf3)}
.answer-strip.wide{display:flex;height:28px;gap:3px}.answer-strip.wide i{max-width:none;border-radius:2px}
.wanswer{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:6px 0;margin:0;
  background:none;border:0;border-top:1px solid var(--line);color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.wanswer .dim.xs{letter-spacing:.05em;font-size:10px}
.wanswer .answer-why{grid-column:3/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wanswer:hover .answer-state{text-decoration:underline}
.tagbtn{cursor:pointer;font:inherit;border:0}
.answer-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.answer-day{display:grid;gap:4px}.answer-axis{display:flex;justify-content:space-between}
.answer-figures{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.answer-figures>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px}
.answer-figures b{font-size:18px}
.answer-modes{display:grid;gap:8px}
.answer-mode{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.answer-mode input{margin-top:3px;flex:none}.answer-mode>span{display:grid;gap:1px}
.answer-path{margin-left:26px}
/* A VM's logo beside its name in rows. */
.tbl td.cell-name>.vm-name-cell,.tbl.stack.compact td.cell-name>.vm-name-cell{display:flex;align-items:center;gap:10px;min-width:0}
.vm-name-text{min-width:0}
/* An OS logo is a tile of its own: it fills the avatar rather than sitting in a circle. */
.av.appav.os-logo{border-radius:9px;background:none;box-shadow:none}.av.appav.os-logo img{padding:0}
.vm-edit-logo{gap:10px;align-items:center;flex-wrap:wrap}

/* The Monitoring page (uptime.js). */
.answer-strip i.dip{background:color-mix(in srgb,var(--crit) 55%,var(--ok))}
.mon-table .mon-bars{min-width:240px;width:40%}
.mon-table .answer-strip.mon{height:22px;gap:2px}
.mon-table .mon-target{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crit-text{color:var(--crit)}.med-text{color:var(--med)}
@media (max-width:640px){
  .tbl.stack.compact.mon-table td.mon-target{display:none}
  .tbl.stack.compact.mon-table td.mon-bars{grid-column:1/-1;min-width:0;width:auto;justify-content:stretch}
  .tbl.stack.compact.mon-table td.mon-bars .answer-strip{width:100%;height:20px}
  .tbl.stack.compact.mon-table td.mon-bars::before{display:none}
}

/* The Monitoring dashboard widget. */
.mon-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.mon-count{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px}
.mon-count b{font-size:20px}.mon-count.down b{color:var(--crit)}.mon-count.slow b{color:var(--med)}
.mon-list{display:grid;gap:2px}
.mon-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 4px;border:0;border-radius:8px;
  background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.mon-item:hover{background:var(--surf2)}
.mon-item>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-name{display:grid;min-width:0}.mon-name b,.mon-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-list.bars .mon-item{grid-template-columns:auto minmax(110px,1fr) minmax(0,2fr) auto}
.answer-strip.mon-mini{height:16px;width:100%}
.mon-allup{padding:6px 2px}
/* Restore tests on Data Protection. */
.restore-tests{margin:6px 0 18px}.restore-head{align-items:center;gap:12px;flex-wrap:wrap}
.restore-table .restore-why{max-width:420px;white-space:normal}
@media (max-width:560px){
  .tbl.stack.compact.restore-table tr{grid-template-columns:minmax(0,1fr)}
  .tbl.stack.compact.restore-table td{white-space:normal;min-width:0}
  .tbl.stack.compact.restore-table td[data-actions]{justify-self:end}
}

/* The sign-in in front of Homestead (Cloudflare Access) has lapsed (auth.js). */
.signin-lapsed{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:10000;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--surf2);color:var(--tx);box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:13.5px;max-width:calc(100vw - 32px)}

/* Filling up: the storage forecast on Volumes (views-storage.js). */
.forecast-card{margin-bottom:14px}.forecast-list{display:grid;gap:8px;margin-top:10px}
.forecast-row{display:flex;align-items:center;gap:12px;min-width:0}.forecast-row .tag{flex:none}
.forecast-name{display:grid;min-width:0}.forecast-name b,.forecast-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forecast-empty{margin-top:8px}.forecast-tag{justify-self:start;align-self:flex-start;width:max-content;max-width:100%}
@media (max-width:560px){.forecast-row{align-items:flex-start;flex-direction:column;gap:4px}.forecast-name span{white-space:normal}}

/* Change history (changes.js). */
.history-list{display:grid;gap:10px;max-height:min(60vh,560px);overflow:auto}
.history-entry{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px}
.history-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.history-app{font-weight:600}
.history-acts{margin-left:auto}
.history-rows{display:grid;gap:4px}
.history-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:10px;font-size:12.5px;align-items:baseline}
.history-field{color:var(--mut);overflow-wrap:anywhere}.history-values{overflow-wrap:anywhere}
@media (max-width:560px){.history-row{grid-template-columns:minmax(0,1fr)}.history-field{font-size:11.5px}}

/* Homestead's data (views-settings.js). */
.hd-volume{display:grid;gap:6px;margin:10px 0}.hd-table{margin-top:6px}
/* If this host goes down (impact.js). */
.impact-chips{gap:6px;flex-wrap:wrap}.impact-list{display:grid;gap:2px}
.impact-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:7px 2px;border-top:1px solid var(--line)}
.impact-row:first-child{border-top:0}.impact-row>.impact-text:first-child{grid-column:1/3}
.impact-text{display:grid;gap:2px;min-width:0}.impact-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Search logs (logsearch.js). */
.ls-form{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center}
.ls-form>*{margin:0;min-height:38px}.ls-form select{width:auto;max-width:220px}
.ls-opts{display:flex;gap:16px;flex-wrap:wrap}.ls-opts .switch{margin:0;font-size:12.5px}
.ls-summary{margin-bottom:6px}
.ls-list{display:grid;max-height:min(56vh,540px);overflow:auto;border:1px solid var(--line2);border-radius:10px}
.ls-row{display:grid;gap:3px;padding:7px 10px;border-top:1px solid var(--line);min-width:0}.ls-row:first-child{border-top:0}
.ls-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px}.ls-when{color:var(--mut);font-size:11.5px}
.ls-app{font-weight:600;padding:0;border:0;background:none;cursor:pointer}
.ls-line{display:block;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:none;padding:0}
.ls-line mark{background:color-mix(in srgb,var(--med) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:640px){.ls-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ls-form input{grid-column:1/-1}.ls-form select{max-width:none;width:100%}.ls-form .btn{grid-column:1/-1;justify-content:center}}

/* Schedules (schedules.js). */
.sched-tag{display:inline-flex;align-items:center;gap:3px}.sched-tag .btnicon{width:11px;height:11px}
.sched-days{display:flex;flex-wrap:wrap;gap:6px}
.sched-day{position:relative;display:inline-flex}.sched-day input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sched-day span{min-width:44px;text-align:center;padding:6px 8px;border:1px solid var(--line2);border-radius:8px;font-size:12.5px}
.sched-day input:checked+span{background:var(--tx);border-color:var(--tx);color:var(--bg);font-weight:600}
.sched-day input:focus-visible+span{outline:2px solid var(--tx);outline-offset:2px}
.sched-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.sched-presets .btn{font-size:12px;padding:4px 10px}
.sched-preview{display:grid;gap:6px}.sched-next{display:flex;flex-wrap:wrap;gap:6px}
.sched-list{display:grid}.sched-item{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr) auto;gap:12px;align-items:center;padding:9px 2px;border-top:1px solid var(--line)}
.sched-item:first-child{border-top:0}.sched-name{display:grid;min-width:0}.sched-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-what{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}
@media (max-width:560px){.sched-item{grid-template-columns:minmax(0,1fr) auto}.sched-what{grid-column:1/-1;grid-row:2}.sched-tag{display:none}}

/* Monitoring: which port to ask (uptime.js). */
.monitoring-row .monitoring-port select{width:auto;max-width:220px}
.answer-port select{width:auto;max-width:100%}
@media (max-width:560px){.monitoring-row{flex-wrap:wrap}.monitoring-row .monitoring-port,.monitoring-row .monitoring-port select{width:100%;max-width:none}}

/* Groups dialog: filter, keep ticks, a section per group (views-workloads.js). */
.wg-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.wg-tools select{width:auto;max-width:220px}
.wg-selbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.wg-selbar b{margin-right:auto;font-size:13px}
.wg-group{border:1px solid var(--line2);border-radius:10px;padding:4px}
.wg-head{display:flex;align-items:center;gap:8px;padding:2px 4px}
.wg-fold{display:flex;align-items:center;gap:8px;flex:1;min-width:0;background:none;border:0;color:inherit;padding:6px 2px;cursor:pointer;text-align:left;font:inherit}
.wg-fold b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-fold .btnicon{transition:transform .15s}
.wg-fold[aria-expanded=false] .btnicon{transform:rotate(-90deg)}
.wg-members{display:grid;gap:2px}.wg-members .wg-item{grid-template-columns:auto auto 1fr}
@media (max-width:560px){.wg-tools{grid-template-columns:minmax(0,1fr)}.wg-tools select{max-width:none;width:100%}}

/* When it is down (uptime.js). */
.outage-actions .switch{margin:0}
.outage-unit{display:flex;align-items:center;gap:8px}.outage-unit input{width:90px}
.outage-url{display:flex;gap:8px;align-items:center}.outage-url input{flex:1;min-width:0}
@media (max-width:560px){.outage-url{flex-wrap:wrap}.outage-url .btn{width:100%;justify-content:center}}

/* Data protection: the cards filter the Volumes list (views-protect.js). */
.pf-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.pf-jump{padding:0;margin:0 0 2px}
.pf-group{display:inline-flex;align-items:center;margin:0 6px 6px 0}.pf-group .tagbtn{margin:0}
.pf-group .tagbtn[aria-pressed=true]{outline:2px solid var(--tx);outline-offset:1px}
.pf-edit{display:inline-grid;place-items:center;width:24px;height:24px;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:6px}
.pf-edit:hover{color:var(--tx);background:var(--surf2)}.pf-edit .btnicon{width:13px;height:13px}
.pf-bar{display:grid;gap:8px;margin-bottom:10px}
.pf-shows{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:none;color:var(--mut);font:inherit;font-size:12.5px;cursor:pointer}
.pf-chip[aria-pressed=true]{background:var(--tx);color:var(--bg);border-color:var(--tx);font-weight:600}
.pf-chip .pf-n{font-variant-numeric:tabular-nums;opacity:.75}
.pf-more{display:grid;grid-template-columns:auto minmax(0,260px);gap:8px;justify-content:start}.pf-more select{width:auto}
@media (max-width:560px){.pf-more{grid-template-columns:minmax(0,1fr)}.pf-more select{width:100%}}

/* Users and roles (#350): the role chosen where it is shown. */
.users-filter{margin-bottom:10px}
.role-select{width:auto;max-width:100%;padding:5px 9px;font-size:12.5px}
.roles-table td.center,.roles-table th:not(:first-child){text-align:center}

/* Back to top inside a long dialog (ui.js, #374): pinned to the box's
   bottom-right corner as it scrolls, taking no room of its own. */
.dialog-backtop{position:sticky;bottom:16px;left:auto;right:auto;margin:-40px 16px 0 auto;display:grid;z-index:3}

/* A page one level down says how to go up (#382); the sidebar does on a desktop. */
.phead .page-back{display:none}
@media (max-width:900px){.phead .page-back{display:inline-flex;align-items:center;margin-top:6px;padding:8px 4px 8px 0;min-height:40px;border:0;background:transparent;color:var(--tx);font:600 14px "Inter Tight",sans-serif;cursor:pointer}}

/* Helm's filters, in view (views-helm.js, #383). */
.helm-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.helm-controls input{flex:1 1 220px;max-width:340px;min-width:0}
@media (max-width:560px){.helm-controls input{max-width:none;flex-basis:100%}}

/* A card's housekeeping action, quieter than its real one (#370). */
.btn.quiet{background:transparent;border-color:var(--line);color:var(--mut)}.btn.quiet:hover{color:var(--tx);border-color:var(--line2)}

/* Host actions → Apps (move.js, #375). */
.hostapps-strip{display:flex;gap:6px;flex-wrap:wrap}
.hostapps-down,.hostapps-hosts{display:grid;gap:8px}
.hostapps-app{padding:6px 0;border-top:1px solid var(--line)}.hostapps-app:first-child{border-top:0}
.hostapps-host{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px}
.hostapps-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hostapps-meter{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:10px;align-items:center}
.hostapps-names{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:560px){.hostapps-meter{grid-template-columns:minmax(0,1fr)}}

/* Files: a two-pane manager (filemanager.js). Side by side where there is
   room; on a phone, two tabs with one pane at a time. */
.modalbox.wide[data-context="volume-files"]{width:min(1280px,100%)}
.fm{display:grid;gap:10px;min-width:0}
.fm-tabs{display:none}
.fm-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}
.fm-pane{display:grid;gap:6px;align-content:start;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surf)}
.fm-pane.active{border-color:color-mix(in srgb,var(--low) 55%,var(--line))}
.fm-panehead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.fm-panehead select{flex:1 1 160px;min-width:0;max-width:100%}
.fm-tools{display:flex;gap:4px;margin-left:auto}
.fm-tools label.iconbtn{cursor:pointer}
.fm-state{font-size:12px;color:var(--mut)}
.fm-state.stopped{color:var(--med)}
.fm-list{display:grid;max-height:min(52vh,520px);overflow:auto;border:1px solid var(--line);border-radius:10px}
.fm-row{display:grid;grid-template-columns:28px minmax(0,1fr) 72px 90px minmax(70px,110px) 110px;gap:8px;align-items:center;padding:6px 8px;border-top:1px solid var(--line);cursor:default;user-select:none}
.fm-row:first-child{border-top:0}
.fm-row:hover{background:color-mix(in srgb,var(--tx) 4%,transparent)}
.fm-row.on{background:color-mix(in srgb,var(--low) 14%,transparent)}
.fm-headrow{position:sticky;top:0;z-index:1;background:var(--surf2);font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.fm-headrow:hover{background:var(--surf2)}
.fm-up{cursor:pointer}
.fm-name{display:flex;align-items:center;gap:6px;min-width:0}
.fm-name>span:last-child,.fm-name .linkish{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.fm-icon{width:14px;color:var(--mut);flex:none}
.fm-check{display:grid;place-items:center}
.fm-own{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-size,.fm-when{white-space:nowrap}
.fm-empty{padding:18px;text-align:center}
.fm-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:36px}
.fm-count{font-weight:600;margin-right:4px}
.fm-panel{padding:12px;border:1px solid var(--line2);border-radius:12px;background:var(--surf2)}
.fm-perms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.fm-bit{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.fm-permrow{display:grid;grid-template-columns:70px repeat(3,auto);gap:10px;align-items:center;margin:4px 0}
.fm-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:1100px){.fm-row{grid-template-columns:28px minmax(0,1fr) 64px 84px}.fm-own,.fm-when{display:none}}
@media (max-width:760px){
  .fm-tabs{display:flex;gap:6px}
  .fm-tabs button{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--mut);font:inherit}
  .fm-tabs button.on{color:var(--tx);border-color:color-mix(in srgb,var(--low) 55%,var(--line))}
  .fm-panes{grid-template-columns:minmax(0,1fr)}
  .fm-pane{display:none}.fm-pane.active{display:grid}
  .fm-row{grid-template-columns:28px minmax(0,1fr) 64px}.fm-perm{display:none}
  .fm-headrow .fm-perm{display:none}
  .fm-perms{grid-template-columns:minmax(0,1fr)}
  .fm-actions{position:sticky;bottom:0;background:var(--surf);padding:8px 0;z-index:2}
}

/* AI agent requests (#417) */
.agent-list{display:grid;gap:14px}
.agent-req{display:grid;gap:12px}
.agent-req.target{border-color:var(--vio)}
.agent-req-head{gap:10px;flex-wrap:wrap;align-items:flex-start}
.agent-req-detail{margin:0;overflow-wrap:anywhere}
.agent-req-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.agent-raw{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}