/* The status panel. A dark theme with one acid green as the brand colour.
   State comes from attributes app.js sets (contract in index.html): data-st, data-lvl, --p, data-open, data-desk.
   The page answers first (the sentence in #state), the buttons come second, and a row costs one
   line until it is opened. Phone 390 is the first size, not the last. */

:root {
  color-scheme: dark;
  --bg: #0f1216;
  --panel: #171c23;
  --panel-2: #1d232c;
  --line: #2a323d;
  --track: #46505e; /* the meter's empty line: lighter than --line, so a low number still sits on a visible line */
  --text: #eef1f5;
  --muted: #9aa4b2;
  --faint: #8c96a5;
  --brand: #c8f31d;
  --ok: #c8f31d;
  --warn: #f5b400;
  --red: #ff5a52;
  --red-bg: #3a1517;
  --radius: 12px;
  --gap: 16px;
  --tap: 38px;   /* a control's height; 44 px on a touch screen */
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (pointer: coarse), (max-width: 640px) { :root { --tap: 44px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h, 60px) + 10px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-f], .meter b { font-variant-numeric: tabular-nums; }

/* buttons and fields */
.btn {
  font: inherit; font-weight: 600; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; cursor: pointer; min-height: var(--tap);
}
.btn:hover { border-color: var(--muted); }
.btn:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, .seat-head:focus-visible, .off-head:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.btn-brand { background: var(--brand); color: #0f1216; border-color: var(--brand); }
.btn-brand:hover { filter: brightness(1.08); border-color: var(--brand); }
.btn-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.btn-arm { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.btn-stop { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.btn-stop:disabled { opacity: .35; cursor: default; }
.btn-ghost { background: transparent; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; padding-inline: 6px; }
.btn-quiet:hover { color: var(--text); border-color: transparent; text-decoration: underline; }
.btn-small { padding: 4px 10px; font-size: 13px; min-height: 32px; }
@media (pointer: coarse), (max-width: 640px) { .btn-small { min-height: var(--tap); font-size: 14px; } }
input, select {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; min-height: var(--tap); width: 100%;
}
/* iOS zooms in on a field under 16 px when it gets focus and stays there */
@media (max-width: 820px), (pointer: coarse) { input, select, textarea { font-size: 16px; } }

.fold-head { all: unset; display: inline-flex; align-items: center; gap: 10px; }
.fold-head .chev { display: none; }
.account-cols { display: none; }
.chev { flex: none; width: 7px; height: 7px; border: solid var(--faint); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
[data-open] > .seat-head .chev, [data-open] > .off-head .chev { transform: translateY(2px) rotate(-135deg); }

/* brand */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; }
.brand-sub { color: var(--muted); font-weight: 500; padding-left: 10px; border-left: 1px solid var(--line); }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(100%, 360px); display: grid; gap: 8px; padding: 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.login-card .brand { margin-bottom: 14px; }
.login-card h1 { font-size: 22px; margin-bottom: 8px; }
.login-card label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.login-card .btn { margin-top: 10px; min-height: 44px; }
.login-error { color: var(--red); font-size: 14px; }
.login-error:empty { display: none; }

/* top bar: one row at every width, it stays on top while the page scrolls */
.panel { max-width: 1320px; margin: 0 auto; padding: 0 16px 28px; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px 16px;
  margin: 0 -16px; padding: 10px 16px; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.top.stuck { border-bottom-color: var(--line); }
.top .brand { margin-right: auto; min-width: 0; }
.age { color: var(--muted); font-size: 13px; white-space: nowrap; }
.age time { color: var(--faint); }
.glance {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; font-size: 14px; text-decoration: none; color: var(--muted); background: var(--panel);
}
.glance::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.glance { position: relative; }
.glance::after { content: ""; position: absolute; inset: -8px -6px; }   /* the pill is 30 px high, its target 46 */
.glance[data-lvl="ok"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.glance[data-lvl="warn"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.glance[data-lvl="red"] { color: #0f1216; background: var(--red); }
body[data-stale] .glance { display: none; }
.foot { display: none; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* stale banner */
.banner {
  display: none; margin: 8px 0 var(--gap); padding: 12px 16px; border-radius: var(--radius);
  background: var(--red-bg); border: 1px solid var(--red); color: #ffd9d6; font-weight: 600;
}
body[data-stale] .banner { display: block; }
body[data-stale] .grid { filter: grayscale(1); }

/* the answer first: one sentence, then what it is made of. The one loud thing on the page. */
.state { padding: 14px 0 4px; }
.state-h { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.state[data-lvl="ok"] .state-h { color: var(--ok); }
.state[data-lvl="warn"] .state-h { color: var(--warn); }
.state[data-lvl="red"] .state-h { color: var(--red); }
.state[data-lvl="wait"] .state-h { color: var(--muted); }
.state-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.state-list:empty { display: none; }
.state-list a {
  display: flex; align-items: center; gap: 9px; min-height: var(--tap); padding: 6px 14px 6px 12px;
  color: var(--text); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.state-list a:hover { border-color: var(--muted); }
.state-list a::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.state-list li[data-lvl="red"] a::before { background: var(--red); }

/* grid. The source order is the phone's order: answer, desks, controls, agents, accounts, services, log.
   A laptop places the cards by name, so services and the host sit in the first row there. */
.grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: "state state state state state state state state state state state state"
                       "desk desk desk desk desk ctl ctl ctl ctl side side side"
                       "seats seats seats seats seats seats seats seats seats seats seats seats"
                       "accounts accounts accounts accounts accounts accounts accounts side2 side2 side2 side2 side2"; }
.state { grid-area: state; } .desk { grid-area: desk; } .controls { grid-area: ctl; } .side { grid-area: side; }
.seats { grid-area: seats; } .accounts { grid-area: accounts; } .side2 { grid-area: side2; }
.side, .side2 { display: grid; gap: var(--gap); min-width: 0; }
.desk, .controls { align-self: stretch; }
/* no command table yet: no buttons, so the desks take the controls' place and the accounts the log's */
body:not([data-cmds]) :is(.controls, .side2) { display: none; }
body:not([data-cmds]) .grid { grid-template-areas: "state state state state state state state state state state state state"
                       "desk desk desk desk desk desk desk desk desk side side side"
                       "seats seats seats seats seats seats seats seats seats seats seats seats"
                       "accounts accounts accounts accounts accounts accounts accounts accounts accounts accounts accounts accounts"; }

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "state state" "desk desk" "ctl side" "seats seats" "accounts accounts" "side2 side2"; }
  body:not([data-cmds]) .grid { grid-template-areas: "state state" "desk side" "seats seats" "accounts accounts"; }
}
@media (max-width: 640px) {
  .grid, body:not([data-cmds]) .grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .side, .side2 { gap: 12px; }
  .brand-sub, .top-only, .age-w, .age-at { display: none; }
  .foot { display: flex; }
  .card { padding: 14px; }
  .state { padding-top: 6px; }
  .state-list { display: grid; }
}

/* cards */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-width: 0; position: relative;
}
.card:target, .seat:target, .account:target { outline: 2px solid var(--brand); outline-offset: 3px; }
.card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h2 { font-size: 16px; font-weight: 650; }
.card-note { color: var(--faint); font-size: 13px; }

/* dots and state words */
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; display: inline-block; }
.seat[data-st="busy"] .seat-head .dot, .desks li[data-st="busy"] > .dot { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 1.6s ease-out infinite; }
.seat[data-st="wait"] .seat-head .dot, .desks li[data-st="up"] > .dot, .daemon[data-st="up"] > .dot { background: var(--ok); }
.seat[data-st="up"] .seat-head .dot { background: var(--warn); }
.seat[data-st="down"] .seat-head .dot, .desks li[data-st="down"] > .dot, .daemon[data-st="down"] > .dot { background: var(--red); }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

.st { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seat[data-st="busy"] .st::after { content: "working"; color: var(--ok); }
.seat[data-st="wait"] .st::after { content: "ready"; }
.seat[data-st="up"] .st::after { content: "not listening"; color: var(--warn); }
.seat[data-st="down"] .st::after { content: "down"; color: var(--red); }
.seat[data-st="off"] .st::after { content: "off"; }
.daemon[data-st="up"] .st::after { content: "up"; }
.daemon[data-st="down"] .st::after { content: "down"; color: var(--red); }
.daemon[data-st="off"] .st::after { content: "off"; }
.desks li[data-st="up"] .st::after { content: "up"; color: var(--ok); }
.desks li[data-st="busy"] .st::after { content: "working"; color: var(--ok); }
.desks li[data-st="off"] .st::after { content: "off"; }
.desks li[data-st="down"] .st::after { content: "down"; color: var(--red); }

/* meters: label | bar | number. Fixed label and number columns, so in a card every bar starts and ends at the same x */
.meter {
  display: grid; grid-template-columns: var(--mk, 4.6rem) minmax(24px, 1fr) var(--mv, 3.1rem); align-items: center; gap: 0 10px;
  --p: 0; --c: var(--ok);
}
.meter-k { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter > b { grid-column: 3; grid-row: 1; font-size: 14px; text-align: right; white-space: nowrap; }
.meter-bar {
  grid-column: 2; grid-row: 1; height: 6px; border-radius: 3px; background: var(--track);
  position: relative; overflow: hidden; display: block;
}
.meter-bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%);
  background: var(--c); border-radius: 3px; transition: width .4s ease;
}
.meter-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.cap40 .meter-bar::after { left: 40%; }
.cap90 .meter-bar::after { left: 90%; }
.meter:not(.cap40, .cap90) .meter-bar::after { display: none; }
.meter[data-lvl="warn"] { --c: var(--warn); }
.meter[data-lvl="red"] { --c: var(--red); }
.meter[data-lvl="warn"] > b { color: var(--warn); }
.meter[data-lvl="red"] > b { color: var(--red); }
.meters { display: grid; gap: 10px; }

/* desks: who is up, what they run on, how full it is */
.desks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.desks:empty { display: none; }
.desks li { display: flex; align-items: center; gap: 7px; }
.desks li b { font-size: 16px; }
.desk-on { margin: 12px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--muted); font-size: 13px; }
.desk-on b { color: var(--text); font-size: 15px; }
.desk-email { overflow-wrap: anywhere; }
.desk-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--faint); font-size: 13px; }
.desk-on .desk-name { color: var(--text); font-size: 15px; font-weight: 600; }
.desk-name:empty { display: none; }

/* controls: the unit's buttons, second on a phone */
.controls { display: flex; flex-direction: column; gap: 12px; }
.controls .card-h { margin-bottom: 0; }
.action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: end; }
.action label, .action-k { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.desk-pick .pick { grid-column: 1 / -1; }
.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.local-ask { display: flex; gap: 8px; }
.local-ask input { flex: 1; min-width: 0; }
body:not([data-local]) .local-ask { display: none; }
.local-answer {
  padding: 10px 12px; border-radius: 8px; background: var(--panel-2);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px;
}
.local-answer:empty:not([data-st]) { display: none; }
.local-answer[data-st="queued"]:empty::before, .local-answer[data-st="running"]:empty::before { content: "Local is thinking …"; color: var(--muted); }
.local-answer[data-st="failed"] { color: var(--red); }
.controls-end { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }

/* services and the host */
.daemons .list { display: grid; }
.daemon { display: flex; align-items: center; gap: 10px; min-height: 34px; border-top: 1px solid var(--line); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.daemon:first-child { border-top: 0; }
.daemon .st { margin-left: auto; font-family: system-ui, sans-serif; }
.daemon[data-st="down"] { color: var(--red); }
.daemon[data-st="off"] { color: var(--faint); }
.mac .card-h { justify-content: space-between; }
.power { color: var(--muted); font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
.power span { display: none; }
#mac[data-ac] .power-ac { display: inline; }
#mac:not([data-ac]) .power-batt { display: inline; color: var(--warn); }
#mac[data-charging] .power-charging { display: inline; }
#mac[data-charging] .power-charging::before { content: ", "; }

/* agents: one short block per running seat, the controls behind a press; the off ones fold into one row */
.seats .list, .seats .offlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.seat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; min-width: 0; padding-bottom: 10px; }
.seat-head, .off-head {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 6px 12px 2px;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.seat-name { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-head .st { margin-left: auto; }
.seat-host { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.seat-host:empty { display: none; }
.seat-line { padding: 0 12px; min-height: 22px; }
.seat-model { min-width: 0; font-size: 12px; font-weight: 400; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-line .meter { --mk: 3.6rem; --mv: 2.7rem; }
.seat-line .meter > b { font-size: 13px; }
.seat[data-nomodel] .seat-model { display: none; }
.seat[data-noctx] .seat-line { display: none; }
.seat-room { padding: 3px 12px 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat[data-open] .seat-room { white-space: normal; overflow-wrap: anywhere; }
.seat[data-norooms] .seat-room { display: none; }
.seat-more { display: none; gap: 10px; margin-top: 10px; padding: 10px 12px 0; border-top: 1px solid var(--line); }
.seat[data-open] .seat-more { display: grid; }
body:not([data-cmds]) .seat-more:has(.seat-waits:empty) { display: none; }
.seat-waits { color: var(--muted); font-size: 13px; display: grid; gap: 3px; padding-left: 14px; list-style: disc; }
.seat-waits:empty { display: none; }
.seat-acts { display: none; }
body[data-cmds] .seat-acts { display: grid; }
.seat[data-st="up"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.seat[data-st="down"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--panel-2)); }
.seat[data-st="off"] .seat-name { color: var(--muted); }
body[data-cmds] .seat:is([data-st="down"], [data-st="up"]) .seat-relaunch { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

.off-group { margin-top: 10px; }
.off-head { border: 1px dashed var(--line); padding: 6px 12px; color: var(--muted); }
.off-head:hover { border-color: var(--muted); }
.off-count { flex: none; font-weight: 600; color: var(--text); }
.off-names { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offlist { margin-top: 10px; }
.off-group:not([data-open]) .offlist { display: none; }
.off-group[data-open] .off-names { visibility: hidden; }

/* model + effort pick: model | effort | Apply. Own dropdown in the panel's look: the select is the hidden value
   holder, app.js builds .dd next to it. Shown only under body data-cmds; Apply shows after a change. */
.pick { display: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; --fh: var(--tap); }
body[data-cmds] .pick { display: grid; }
.pick-f { min-width: 0; }
.pick-apply { min-height: var(--fh); }
.pick:not([data-changed]) .pick-apply { visibility: hidden; }
.pick[data-changed] .pick-apply { background: var(--brand); color: #0f1216; border-color: var(--brand); }

.dd { position: relative; min-width: 0; }
.dd-btn {
  display: block; width: 100%; height: var(--fh); padding: 0 32px 0 12px; position: relative;
  font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat .dd-btn { font-size: 14px; }
.dd-btn:hover { border-color: var(--muted); }
.dd-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dd-btn::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .15s;
}
.dd[data-open] .dd-btn { border-color: var(--brand); }
.dd[data-open] .dd-btn::after { border-color: var(--brand); transform: translateY(-25%) rotate(-135deg); }
.pick[data-changed] .dd-btn { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.dd-list {
  display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content;
  max-height: 280px; overflow-y: auto; padding: 4px; gap: 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 36px rgb(0 0 0 / .5);
}
.dd[data-open] .dd-list { display: grid; }
.pick-f + .pick-f .dd-list { left: auto; right: 0; }
.dd-opt {
  display: flex; align-items: center; gap: 14px; justify-content: space-between; position: relative;
  min-height: 36px; padding: 6px 10px 6px 30px; border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.dd-opt:hover, .dd-opt[data-active] { background: var(--line); }
.dd-opt[aria-selected="true"], .dd-opt[aria-selected="true"][data-active] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 600; }
.dd-opt[aria-selected="true"]::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 4px; height: 9px;
  border: solid var(--brand); border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg);
}
.dd-opt[data-cur]::after {
  content: "now"; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
@media (max-width: 640px) {
  .pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pick-apply { grid-column: 1 / -1; justify-self: start; }
  .pick:not([data-changed]) .pick-apply { display: none; }
  .dd-opt { min-height: 44px; }
}

/* accounts: one row each, the three windows side by side. A row with something running on it carries the brand dot. */
.accounts .list { display: grid; }
.account {
  display: grid; grid-template-columns: minmax(150px, 215px) minmax(0, 1fr) auto; align-items: center; gap: 0 20px;
  grid-template-areas: "label wins login" "email wins login" "users wins login" "meta wins login" "res res res";
  padding: 12px 0; border-top: 1px solid var(--line);
}
.account:first-child { border-top: 0; padding-top: 2px; }
.account:last-child { padding-bottom: 2px; }
.account-h { display: contents; }
.account-head { all: unset; grid-area: label; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; }
.account-head b { font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.account-head .chev { display: none; }
.account[data-open] > .account-h .account-head .chev { transform: translateY(2px) rotate(-135deg); }
.account-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.account[data-used] .account-head b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.account-email { grid-area: email; color: var(--muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-users, .account-state { grid-area: users; font-size: 13px; color: var(--muted); white-space: nowrap; }
.account-users:not(:empty)::before { content: "used by "; }
.account[data-desk] .account-users { color: var(--brand); }
.account-state { color: var(--faint); }
.account[data-state="ok"] .account-state, .account-users:empty, .account-state:empty, .account-email:empty { display: none; }
.account[data-state="not logged in"] .account-head b { color: var(--faint); }
.account[data-state="not logged in"] .account-email { visibility: hidden; }
.account-login {
  grid-area: login; display: none; position: relative; min-width: 7.6em; justify-content: center;
  background: transparent; border-color: transparent; color: var(--faint); font-weight: 500; align-self: center;
}
body[data-cmds] .account-login { display: inline-flex; align-items: center; }
.account-login:hover { color: var(--text); border-color: var(--line); }
.account[data-state="not logged in"] .account-login { background: var(--panel-2); color: var(--text); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.account[data-state] .account-login[data-st] { color: transparent; cursor: progress; }
.account-login[data-st]::after {
  content: "Browser…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-left: 14px; color: var(--muted);
}
.account-login[data-st]::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 0 var(--warn);
}
.account-login[data-st="running"]::before { animation: pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .account-login::before { animation: none !important; } }
.wins { grid-area: wins; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.wins:empty { display: none; }
.win { min-width: 0; }
.win .meter { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.win .meter-k { grid-column: 1; grid-row: 1; }
.win .meter > b { grid-column: 2; grid-row: 1; }
.win .meter-bar { grid-column: 1 / -1; grid-row: 2; height: 5px; }
.win-reset { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-meta { grid-area: meta; font-size: 12px; color: var(--faint); white-space: nowrap; }
.account-meta:has(.account-cache:empty) { display: none; }
.account-login-result { grid-area: res; margin-top: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-login-result[data-st="done"] { color: var(--ok); }
.account-login-result[data-st="failed"] { color: var(--warn); }
.desk-tag {
  display: none; font-size: 12px; font-weight: 600; color: var(--bg); background: var(--brand); border-radius: 4px; padding: 0 6px;
}
.win-w { display: none; }   /* "in 3 d 0 h" under a bar reads as its reset; the word costs the column its width */
@media (max-width: 1080px) {
  .account { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px;
    grid-template-areas: "label email users" "wins wins wins" "meta meta meta" "login login login" "res res res"; }
  .wins { gap: 0 12px; margin-top: 8px; }
  .account-meta { margin-top: 6px; }
  /* the note takes the free end of the name's line when nobody runs on the account */
  .account:not([data-used]):not([data-state="not logged in"], [data-state="no data"]) .account-meta { grid-area: users; margin-top: 0; }
  .account-login { justify-self: start; margin-top: 8px; border-color: var(--line); color: var(--muted); }
  /* a logged-in row keeps its Log in again behind a press; a row that is not logged in shows its one control */
  .account { cursor: pointer; }
  .account-head { cursor: pointer; min-height: var(--tap); }
  .account-head .chev { display: block; }
  body[data-cmds] .account[data-state="ok"]:not([data-open]) .account-login { display: none; }
}
@media (max-width: 640px) {
  .account-login { justify-self: start; margin-top: 10px; }
}

/* commands: the newest five, the full answer behind a press */
.cmd-log { display: grid; gap: 6px; }
.cmd {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; cursor: pointer;
}
.cmd time { color: var(--faint); font-variant-numeric: tabular-nums; }
.cmd b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; overflow-wrap: anywhere; }
.cmd-result { grid-column: 1 / -1; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd:not([data-open]) .cmd-result { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
.cmd-result:empty { display: none !important; }
.cmd[data-st="queued"] .st::after { content: "queued"; }
.cmd[data-st="running"] .st::after { content: "running"; color: var(--warn); }
.cmd[data-st="done"] .st::after { content: "done"; color: var(--ok); }
.cmd[data-st="failed"] .st::after { content: "failed"; color: var(--red); }
.cmd[data-st="cancelled"] .st::after { content: "cancelled"; color: var(--faint); }
.cmd-cancel { grid-column: 1 / -1; justify-self: start; }
.cmd[data-st="failed"] .cmd-result { color: var(--red); }
.cmd[data-st="failed"]:not([data-open]) .cmd-result { display: block; white-space: pre-wrap; }
.cmd-more { margin-top: 6px; }

/* account seats: one row per account, name then No seat then Premium. No seat is the quiet one. */
.kv-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 8px; overflow: hidden; }
.kv-row {   /* app.js orders the rows by account number, so the top line is clipped by the list, not dropped on the first child */
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 2px 8px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); margin-top: -1px;
}
.kv-name { grid-column: 1; grid-row: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-row[data-here] .kv-here { display: inline-block; margin-left: 6px; vertical-align: middle; }
.kv-mail { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-mail:empty { display: none; }
.kv-row > .kv-btn { grid-row: 1 / span 2; }
.kv-row:has(.kv-mail:empty) > .kv-btn { grid-row: 1; }
.kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; white-space: nowrap; }
.kv-release { min-width: 6.5em; background: transparent; color: var(--muted); border-style: dashed; font-weight: 500; }
.kv-release:hover { color: var(--text); }
.kv-premium { min-width: 7.25em; background: var(--panel-2); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.kv-premium:hover { border-color: var(--brand); }
.kv-login { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); font-weight: 500; }
.kv-login:hover { color: var(--text); }
.kv-login:disabled { cursor: progress; }
.kv-btn[data-st]::before, .kv-login[data-st]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.kv-btn[data-st="running"]::before, .kv-login[data-st="running"]::before { box-shadow: 0 0 0 0 var(--warn); animation: pulse 1.6s ease-out infinite; }
.kv-btn:disabled { cursor: default; color: var(--muted); border-color: var(--line); }
.kv-btn[data-st] { cursor: progress; }
.kv-btn:disabled:not([data-st]) { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .kv-btn::before, .kv-login::before { animation: none !important; } }

/* confirm dialog */
.confirm {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; width: min(92vw, 380px);
}
.confirm::backdrop { background: rgb(0 0 0 / .6); }
.confirm p { font-size: 16px; margin-bottom: 18px; }
.confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- phone: no scroll for its own sake. A row is one or two
   lines until it is pressed; what is rarely read folds shut. ------------------------------------------------- */
@media (max-width: 640px) {
  .top:not(.stuck) .glance { display: none; }
  .desk-meta { display: none; }

  /* agents: name and state, then the context bar; the rooms come with the press */
  .seat:not([data-open]) .seat-room { display: none; }
  .seat { padding-bottom: 8px; }

  /* accounts: a table. Name, then the three windows as a bar and a number; the rest comes with the press */
  .account-cols, .account:not([data-open]) { display: grid; grid-template-columns: 5rem repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: center; }
  .account-cols { color: var(--faint); font-size: 12px; padding-bottom: 4px; }
  .account:not([data-open]) { grid-template-areas: "label wins wins wins"; padding: 0; min-height: var(--tap); }
  .account:not([data-open]):first-child, .account:not([data-open]):last-child { padding: 0; }
  .account:not([data-open]) :is(.account-email, .account-users, .account-state, .account-meta, .win-reset, .account-login-result) { display: none; }
  .account:not([data-open]) .wins { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; margin: 0; }
  .account:not([data-open]) .win { grid-row: 1; }
  .account:not([data-open]) .win[data-kind="five_hour"] { grid-column: 1; }
  .account:not([data-open]) .win[data-kind="seven_day"] { grid-column: 2; }
  .account:not([data-open]) .win[data-kind="seven_day_fable"] { grid-column: 3; }
  .account:not([data-open]) .win:not([data-kind="five_hour"], [data-kind="seven_day"], [data-kind="seven_day_fable"]) { display: none; }
  .account:not([data-open]) .win .meter { grid-template-columns: minmax(0, 1fr); gap: 3px 0; }
  .account:not([data-open]) .win .meter-k { display: none; }
  .account:not([data-open]) .win .meter > b { grid-column: 1; grid-row: 1; text-align: left; font-size: 14px; }
  .account:not([data-open]) .win .meter-bar { grid-column: 1; grid-row: 2; height: 4px; }
  .account[data-state="not logged in"]:not([data-open]) .account-state { display: block; grid-column: 2 / -1; }
  .account[data-open] { padding: 10px 0 12px; }

  /* services and the host: one card, the services as a row of names */
  .side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; gap: 10px; }
  .side .card { background: none; border: 0; border-radius: 0; padding: 0; }
  .side .card-h { margin-bottom: 6px; }
  .daemons .list { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .daemon { border: 0; min-height: 28px; gap: 7px; }
  .daemon .st { margin-left: 0; }
  #mac { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; padding-top: 10px; border-top: 1px solid var(--line); }
  #mac .card-h { display: contents; }
  #mac .card-h h2 { grid-column: 1; grid-row: 1; }
  #mac .meter { grid-column: 2; grid-row: 1; --mk: 0rem; gap: 0 10px; }
  #mac .meter-k { display: none; }
  #mac .meter-bar { grid-column: 1 / span 2; }
  #mac .power { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
  #mac[data-ac] .power { display: none; }

  /* a card that folds: shut until its head is pressed */
  .fold-head { cursor: pointer; min-height: var(--tap); width: 100%; justify-content: space-between; }
  .fold-head .chev { display: block; }
  .card:has(.fold-head) .card-h { margin-bottom: 0; }
  .card:has(.fold-head) .card-h h2 { flex: 1 0 100%; }
  .card:has(.fold-head) .card-h { align-items: center; row-gap: 0; }
  .card:has(.fold-head):not([data-open]) > :not(.card-h), .card:has(.fold-head):not([data-open]) .card-h > :not(h2) { display: none; }
  .card:has(.fold-head)[data-open] .card-h { margin-bottom: 10px; }
  .card[data-open] .fold-head .chev { transform: translateY(2px) rotate(-135deg); }
}