/* Roostack components and page layout (docs/DESIGN.md). Uses only purpose
   tokens and scales from tokens.css. The gallery (/design) shows every
   component; add new ones there too. */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
:root { font-family: var(--font-sans); font-size: 17px; line-height: var(--leading); accent-color: var(--accent); }
body { margin: 0; background: var(--bg); color: var(--fg); }
[x-cloak] { display: none !important; }
a { color: var(--accent); text-underline-offset: 2px; }
h1 { font-size: var(--text-2xl); line-height: 1.2; margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
h1 + h2, .heading h2 { margin-top: 0; }
p { margin: 0 0 var(--space-3); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
small, .hint { color: var(--muted); }
.hint { font-size: var(--text-sm); }
.error { color: var(--bad); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- Layout ---------- */
main { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
.narrow { max-width: 460px; margin: var(--space-6) auto; }
.medium { max-width: 680px; margin: var(--space-5) auto; }
.section { margin-top: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }

/* Top bar: the brand mark and the current page use the highlight colour. */
.topbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold);
  font-size: var(--text-lg); text-decoration: none; color: var(--fg); }
/* The brand mark (brandmark.go, generated by assets/brand/generate.py):
   text colour on a soft-highlight tile, highlight comb, online light. */
.brand-mark { width: 28px; height: 28px; flex: none; display: block; }
.bm-f-fg { fill: var(--fg); } .bm-s-fg { stroke: var(--fg); }
.bm-f-hi { fill: var(--highlight); }
.bm-f-soft { fill: var(--highlight-soft); } .bm-s-soft { stroke: var(--highlight-soft); }
.bm-f-led { fill: var(--ok-on-fg); }
/* Once the lab has a name, it's the title: a small "Roostack" above it,
   and a larger mark beside both. The bar keeps about its usual height. */
.topbar:has(.brand-stack) { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand:has(.brand-stack) { gap: var(--space-3); }
.brand:has(.brand-stack) .brand-mark { width: 34px; height: 34px; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-eyebrow { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  font-weight: var(--weight-medium); }
.brand-lab { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent; white-space: nowrap; }
.topbar nav a:hover { color: var(--fg); }
.topbar nav a.active { color: var(--fg); font-weight: var(--weight-medium); border-bottom-color: var(--highlight); }
.topbar nav .spacer { flex: 1; }
.topbar nav form { margin: 0; }
.menu-toggle { display: none; background: none; color: var(--fg); font-size: 1.3rem; padding: var(--space-1) var(--space-2); }
@media (max-width: 640px) {
  .menu-toggle { display: block; margin-left: auto; }
  /* The brand shrinks (a long lab name ends in "…") so the menu button
     stays beside it, rather than wrapping and widening the page. */
  .brand { flex: 1 1 0; min-width: 0; }
  .topbar nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .topbar nav.open { display: flex; }
  .topbar nav .spacer { display: none; }
  .topbar nav a.active { border-bottom-color: transparent; border-left: 3px solid var(--highlight); }
  .topbar nav form { padding: var(--space-2) var(--space-3); }
}
.theme-toggle { background: none; border: 0; color: var(--muted); padding: var(--space-2); font-size: var(--text-sm); }
.theme-toggle:hover { color: var(--fg); background: none; }
footer.site { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4) var(--space-6);
  font-size: var(--text-sm); color: var(--muted); }
footer.site a { color: var(--muted); }
footer.site .version { font-family: var(--font-mono); font-size: 0.95em; }

/* ---------- Card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-1); }
.card > :last-child { margin-bottom: 0; }
/* A heading row: title on the left, a link or action on the right. */
.heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); }
.heading h1, .heading h2 { margin: 0; }
.back { display: inline-block; margin-bottom: var(--space-3); font-size: var(--text-sm); }
/* The row above a page's title: back link (or setup step) left, the page's
   help right, even when there's nothing on the left. */
.page-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3); }
.page-top > * { margin-bottom: 0; }
.page-help { margin-left: auto; font-size: var(--text-sm); white-space: nowrap; }
.page-help > .icon { width: 1.05em; height: 1.05em; margin-right: 0.3em; vertical-align: -0.15em; color: currentColor; }

/* ---------- Facts (label / value list) ---------- */
/* ---------- Icons (icons.go) ---------- */
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.2em; color: var(--muted); }

/* ---------- A lab's address (setup-domain): two choices (SPEC.md §6.6) ---------- */
.address-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.address-choice { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin: 0; }
.address-choice.recommended, .address-choice.chosen { border: 2px solid var(--accent); }
.address-choice p { margin: 0; }
.address-choice-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }
.address-choice-title .icon { color: var(--accent); }
.address-choice > button, .address-choice > .button { justify-self: start; }
.address-name { display: flex; align-items: center; gap: var(--space-1); margin: 0; }
.address-name input { flex: 1; min-width: 0; }
.address-name span:last-child { color: var(--muted); }
.address-waiting { margin: var(--space-1) 0; font-size: var(--text-sm); }
.address-waiting-text { color: var(--warn); }
.address-waiting-text .icon { color: var(--warn); margin-right: var(--space-1); }
/* Linking to Roostack Cloud (SPEC.md §6.6): the code to compare, while it waits. */
.cloud-waiting { margin-top: var(--space-3); }
.cloud-waiting-title { font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.cloud-waiting-title .icon { color: var(--warn); margin-right: var(--space-1); }
.cloud-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.link-code { font-family: var(--font-mono); font-size: 1.4em; letter-spacing: 0.1em; padding: var(--space-1) var(--space-3);
  background: var(--surface-2); border-radius: var(--radius); }
.cloud-linked { color: var(--ok); }
.name-check { display: block; }
.name-taken { color: var(--bad); }
.server-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--fg);
  font-weight: var(--weight-medium); white-space: nowrap; }
.server-chip .icon { width: 0.95em; height: 0.95em; color: var(--accent); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
dl.facts dt { color: var(--muted); }
/* break-word only breaks long words when they don't fit (anywhere also
   shrinks the column, breaking domains mid-word). */
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
dl.facts dt .icon, .with-icon .icon { margin-right: var(--space-2); }
/* After a link's text, in the link's colour: it opens in a new window. */
.new-window .icon { width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.05em; color: currentColor; }
/* Rows separated by lines, for cards with many facts (Settings → Servers). */
dl.facts-lined { gap: 0 var(--space-4); }
dl.facts-lined > dt, dl.facts-lined > dd { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
dl.facts-lined > dt:first-of-type, dl.facts-lined > dt:first-of-type + dd { border-top: 0; }
dl.facts-lined > dd > p:first-child { margin-top: 0; }
.space-list { display: grid; grid-template-columns: max-content auto; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0;
  font-size: var(--text-sm); }
.space-list dt { color: var(--muted); }
.space-list dt.sub { padding-left: var(--space-4); }
.space-list dd { margin: 0; }
@media (max-width: 480px) {
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { margin-top: var(--space-2); font-size: var(--text-sm); }
  dl.facts-lined > dd { border-top: 0; padding-top: 0; }
}

/* ---------- Notice: info (default), ok, warn, error ---------- */
.notice { background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.notice > :last-child { margin-bottom: 0; }
.notice-ok { background: var(--ok-bg); border-left-color: var(--ok); }
.notice-warn { background: var(--warn-bg); border-left-color: var(--warn); }
.notice-error { background: var(--bad-bg); border-left-color: var(--bad); }

/* ---------- Buttons: primary (default), secondary, danger, quiet ---------- */
button, a.button { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit;
  font-weight: var(--weight-medium); padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, a.button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.55; cursor: default; filter: none; }
button.secondary, a.button.secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
button.secondary:hover, a.button.secondary:hover { background: var(--surface-2); filter: none; }
button.danger, a.button.danger { background: var(--bad); color: var(--bad-fg); }
/* Quiet: looks like a link (for small or less important actions). */
button.quiet { background: none; border: 0; padding: 0; color: var(--accent); font-weight: var(--weight-normal);
  text-decoration: underline; text-underline-offset: 2px; }
button.quiet.danger { color: var(--bad); background: none; }
button.quiet:hover { filter: none; }
.actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-4); }

/* ---------- Forms ---------- */
form label { display: block; margin-bottom: var(--space-4); font-weight: var(--weight-medium); }
form label small { display: block; font-weight: var(--weight-normal); margin-top: var(--space-1); }
input, select { display: block; width: 100%; margin-top: var(--space-2); padding: 10px 12px; font: inherit;
  color: inherit; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); }
input:focus-visible, select:focus-visible { border-color: var(--highlight); }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
legend { font-weight: var(--weight-medium); padding: 0; margin-bottom: var(--space-2); }
label.check { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
label.check input { margin-top: 5px; }
label.check small { display: block; font-weight: var(--weight-normal); }
.with-suffix { display: flex; align-items: center; gap: var(--space-2); }
.with-suffix input { flex: 1; }
.with-suffix span { color: var(--muted); font-weight: var(--weight-normal); margin-top: var(--space-2); }
.with-prefix { display: flex; align-items: center; gap: var(--space-1); }
.with-prefix input { flex: 1; }
.with-prefix > span { color: var(--muted); font-weight: var(--weight-normal); margin-top: var(--space-2); font-family: var(--font-mono); }
/* A dropdown inside a sentence ("Restart automatically at [04:00]"). */
select.inline { display: inline-block; width: auto; margin: 0 0 0 var(--space-2); padding: var(--space-1) var(--space-2); }
.inline-form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inline-form label { margin: 0; }
p.error[role="alert"] { background: var(--bad-bg); color: var(--bad); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); }

/* ---------- Status pill and badge ---------- */
.status, .badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.status { background: var(--surface-2); color: var(--muted); }
.status-running { background: var(--ok-bg); color: var(--ok); }
.status-starting { background: var(--warn-bg); color: var(--warn); }
.status-failed { background: var(--bad-bg); color: var(--bad); }
.status-installing { background: var(--accent-soft); color: var(--accent); }
.status-waiting { background: var(--warn-bg); color: var(--warn); }
.status .spinner { width: 0.7em; height: 0.7em; vertical-align: -0.05em; }

/* ---------- Install steps (install-steps, install-line) ---------- */
ol.install-steps { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
ol.install-steps li { display: grid; grid-template-columns: 1.4em 1fr auto; gap: var(--space-2); align-items: baseline; color: var(--muted); }
ol.install-steps li.step-done { color: var(--fg); }
ol.install-steps li.step-done .mark { color: var(--ok); }
ol.install-steps li.step-now { color: var(--fg); font-weight: var(--weight-medium); }
ol.install-steps .mark { text-align: center; }
ol.install-steps small { color: var(--muted); font-weight: var(--weight-normal); white-space: nowrap; }
.address-pending { color: var(--muted); overflow-wrap: anywhere; }
.install-line { font-size: var(--text-sm); color: var(--muted); margin: var(--space-1) 0; }
.badge { background: var(--accent-soft); color: var(--accent); }
.badge-highlight { background: var(--highlight-soft); color: var(--highlight); }

/* ---------- Lists: bordered rows ---------- */
ul.rows, ul.kept, ul.users { list-style: none; padding: 0; margin: var(--space-3) 0; }
ul.rows > li, ul.kept > li, ul.users > li { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
ul.rows > li:last-child, ul.kept > li:last-child, ul.users > li:last-child { border-bottom: 1px solid var(--border); }
.row-split, ul.kept > li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  overflow-wrap: anywhere; }
.row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
ul.guests .row-split { flex-wrap: wrap; }
ul.guests .row-split > strong { flex: 1 1 10em; } /* the buttons go underneath when there isn't room */
ul.guests .guest-space { margin: var(--space-2) 0 var(--space-1); }
ul.plain { list-style: none; padding: 0; margin: var(--space-2) 0; }
ul.plain li { margin: var(--space-2) 0; }

/* ---------- Disclosure (details) ---------- */
details > summary { cursor: pointer; color: var(--muted); font-size: var(--text-sm); }
details > summary:hover { color: var(--fg); }
details.technical { margin: var(--space-1) 0 var(--space-5); }
/* An open disclosure's contents are indented under it, with a line down
   the left tying them to their summary. Not for logs, action lists or tiles. */
details:not(.activity-details, .action, .user-actions, .tile > details)[open] > :not(summary) {
  margin: 0 0 0 var(--space-2); padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--accent-soft); }
details:not(.activity-details, .action, .user-actions, .tile > details)[open] > summary + * { margin-top: var(--space-2); padding-top: var(--space-2); }
details:not(.activity-details, .action, .user-actions, .tile > details)[open] > :last-child { margin-bottom: var(--space-2); padding-bottom: var(--space-2); }
details:not(.activity-details, .action, .user-actions, .tile > details)[open] > :is(ul, ol) { padding-left: calc(var(--space-3) + 1.25em); }
details.action { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
details.action > summary { color: var(--fg); font-size: var(--text-base); font-weight: var(--weight-medium); }
.user-actions > summary { color: var(--accent); margin-top: var(--space-1); }
.user-actions form { margin: var(--space-3) 0; }

/* ---------- Activity (live status + collapsed log) ---------- */
.activity { margin: var(--space-3) 0; }
.activity-status { margin: 0 0 var(--space-2); }
.activity-status.ok { color: var(--ok); }
.activity-status.failed { color: var(--bad); }
pre.output { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85em;
  max-height: 16em; overflow: auto; }
.activity-log { max-height: 24em; }
.spinner { display: inline-block; width: 0.8em; height: 0.8em; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -0.1em; }
/* 0.8s: static/app.js keeps spinners in step by this. */
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------- Secrets and codes ---------- */
.secret { display: block; margin: var(--space-2) 0; padding: var(--space-3); font-size: var(--text-lg);
  letter-spacing: 0.05em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-wrap: anywhere; user-select: all; }
code.secret { display: inline-block; font-size: 1.1em; padding: var(--space-1) var(--space-2); }
.secret-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0; overflow-wrap: anywhere; }
.copy-box { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0; }
.copy-box pre.output { flex: 1; min-width: 0; margin: 0; }
.qr-box { margin: var(--space-3) 0; }
svg.qr { display: block; width: 200px; height: 200px; border-radius: var(--radius-sm); }
.recovery { font-size: var(--text-lg); text-align: center; }
.steps li { margin-bottom: var(--space-3); }
/* A checklist whose steps are marked by their state's dot, not numbers. */
.public-steps { list-style: none; padding-left: 0; }
.public-steps .qr-box { margin: var(--space-2) 0; }
.public-steps small { display: block; }

/* ---------- Home ---------- */
.attention { margin-bottom: var(--space-5); }
.attention ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.attention .item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-3) var(--space-4); }
.attention .item a { white-space: nowrap; font-weight: var(--weight-medium); }
.item-problem { background: var(--bad-bg) !important; border-left-color: var(--bad) !important; }
.item-warning { background: var(--warn-bg) !important; border-left-color: var(--warn) !important; }
.all-good { color: var(--ok); font-weight: var(--weight-medium); margin: 0 0 var(--space-5); }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.tile { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.tile > details { align-self: stretch; }
.tile h2 { margin: 0; }
@media (max-width: 640px) {
  .attention .item { flex-direction: column; align-items: flex-start; }
}

/* ---------- Services ---------- */
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.service { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.service h2 { margin: 0; }
.service h2 a { color: var(--fg); }
.service a { overflow-wrap: break-word; }
form.port { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-bottom: var(--space-4); }

/* ---------- Misc page parts ---------- */
.tz-banner { margin-bottom: var(--space-5); }
.provider { border-left: 3px solid var(--border); padding-left: var(--space-3); margin-bottom: var(--space-3); }
table.compare { border-collapse: collapse; margin: var(--space-3) 0; width: 100%; }
table.compare th { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; color: var(--muted);
  font-weight: var(--weight-medium); width: 5em; }
table.compare td { padding: var(--space-2) 0; overflow-wrap: anywhere; }
ul.scope { margin: var(--space-1) 0 var(--space-3); padding-left: var(--space-5); }
ul.scope li { margin-bottom: var(--space-1); }

@media print {
  .topbar, button, form, .hint, footer.site { display: none !important; }
  .recovery { border: 2px solid #000; }
}
a.danger-link { color: var(--bad); font-size: var(--text-sm); }
form.later { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ---------- Theme picker (Account) ---------- */
/* Each preview is a tiny page in its own palette and mode: the page
   background, a card, a line of text, and the accent and highlight. The
   backgrounds are what tell similar themes (Catppuccin flavours) apart. */
.theme-choice { align-items: center; }
.theme-previews { display: inline-flex; gap: var(--space-2); flex-shrink: 0; }
.theme-preview { display: inline-flex; padding: 6px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border-strong); }
.tp-card { display: inline-flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); }
.tp-text { width: 34px; height: 4px; border-radius: 2px; background: var(--fg); opacity: 0.85; }
.tp-dots { display: inline-flex; gap: 3px; }
.tp-accent, .tp-highlight { width: 12px; height: 12px; border-radius: 3px; }
.tp-accent { background: var(--accent); }
.tp-highlight { background: var(--highlight); }
/* Accent choices: a light and a dark dot per colour. */
.accents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 var(--space-3); }
.accents legend { grid-column: 1 / -1; }
.accent-choice { align-items: center; margin-bottom: var(--space-2); font-weight: var(--weight-normal); }
.accent-dots { display: inline-flex; gap: 2px; }
.accent-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1px solid var(--border); }

/* ---------- Screen-reader-only text ---------- */
.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; }


/* ---------- Backup drive picker (setup-backup) ---------- */
.drives { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.drive { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.drive > label { margin: 0; flex: 1 1 16rem; }
.drive-unusable > label { color: var(--muted); }
.drive-erase { flex: 0 0 auto; }

.activity-status { overflow-wrap: anywhere; }

/* ---------- Backup plan (backup-plan): numbered backups and empty slots ---------- */
.plan-list { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-3); }
.plan-card { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.plan-slot { border-style: dashed; border-color: var(--border-strong); background: transparent; align-items: center; }
.plan-adding { border-color: var(--accent); }
.plan-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.plan-data { background: var(--surface-2); }
.plan-extra { background: none; border: 1px solid var(--border-strong); color: var(--accent); }
.plan-more-info { margin: 0 0 var(--space-3); }
.plan-more-info ul { padding-left: var(--space-5, 1.5rem); }
.plan-more-info li { margin-bottom: var(--space-2); }
.plan-slot .plan-num { background: none; border: 1px dashed var(--border-strong); color: var(--muted); }
.plan-body { flex: 1 1 auto; min-width: 0; }
.plan-body p { margin: 0 0 var(--space-1); }
.plan-title { font-weight: 600; }
.plan-slot .plan-title { color: var(--muted); }
.space-low { color: var(--warn); font-weight: 600; }
.space-bar { display: flex; height: 10px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden;
  border: 1px solid var(--border); margin: var(--space-1) 0 var(--space-2); max-width: 28rem; }
/* The parts of a disk's use (Settings → Servers, Storage for others):
   chart colours, with a 2px gap between segments; a swatch in the key
   matches each. Low space outlines the bar in the status colour (the
   notice under it says why). */
.space-bar > span + span { border-left: 2px solid var(--surface); }
.space-bar.space-warning { border: 2px solid var(--warn); }
.space-bar.space-problem { border: 2px solid var(--bad); }
.space-used, .space-other { background: var(--muted); }
.space-services { background: var(--chart-1); }
.space-backups { background: var(--chart-2); }
.space-guests { background: var(--chart-3); }
.space-promised { background: repeating-linear-gradient(45deg, var(--chart-3) 0 2px, transparent 2px 6px); }
.space-free { background: var(--surface-2); border: 1px solid var(--border); }
/* Reserved by the system: at the far end of the bar, after the free space. */
.space-reserved { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); }
.space-bar > .space-reserved { margin-left: auto; }
.disk + .disk { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.disk-title { margin: 0 0 var(--space-1); }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 3px; margin-right: var(--space-2);
  vertical-align: -0.05em; }
ul.guests .space-used { background: var(--chart-3); }
.plan-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.plan-where form { display: flex; gap: var(--space-2); }
.plan-manage { margin-top: var(--space-2); }
.plan-manage code { overflow-wrap: anywhere; }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.plan-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.plan-choice { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.plan-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.plan-choice span { display: grid; }
.plan-invite { margin-top: var(--space-3); }
.plan-invite label { margin-bottom: var(--space-1); font-weight: 600; }
.code-input { width: 100%; min-height: 8rem; font-family: var(--font-mono); font-size: var(--text-sm);
  word-break: break-all; resize: vertical; }
.plan-checks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-1); }
.plan-checks li { display: inline-flex; align-items: center; gap: var(--space-2); }
.plan-mark { font-weight: 700; }
.plan-checks .plan-ok .plan-mark { color: var(--ok); }
.plan-checks .plan-warn .plan-mark { color: var(--bad); }

/* ---------- Settings: overview grid and area pages ---------- */
.settings-group-title { font-size: var(--text-base); color: var(--muted); font-weight: var(--weight-medium);
  margin: var(--space-5) 0 var(--space-2); }
.area-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.area-card { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-4);
  color: var(--fg); text-decoration: none; }
.area-card:hover { border-color: var(--accent); }
.area-title { font-weight: var(--weight-bold); }
.area-title::after { content: " →"; color: var(--muted); font-weight: var(--weight-normal); }
.area-summary { color: var(--muted); font-size: var(--text-sm); }
/* A per-server area with several servers: a line each, divided. */
.area-servers { display: grid; margin-top: var(--space-1); }
.area-server { display: flex; align-items: baseline; gap: 0; padding: var(--space-2) 0; border-top: 1px solid var(--border);
  font-size: var(--text-sm); }
.area-server:first-child { border-top: 0; padding-top: 0; }
.area-server .area-summary { display: inline; }
.dot-none { background: var(--border-strong); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2);
  vertical-align: 1px; background: var(--muted); }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-problem { background: var(--bad); }

/* Area pages: a sidebar of every area on desktop; on phones the page's
   back link leads to the overview instead. */
.settings-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.settings-nav a { color: var(--muted); text-decoration: none; padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.settings-nav a:hover { color: var(--fg); background: var(--surface); }
.settings-nav a.active { color: var(--fg); font-weight: var(--weight-medium); border-left-color: var(--highlight);
  background: var(--surface); }
.settings-nav .settings-home { color: var(--accent); margin-bottom: var(--space-2); }
.settings-group { margin: var(--space-3) 0 var(--space-1) var(--space-3); font-size: var(--text-sm);
  color: var(--muted); font-weight: var(--weight-medium); }
.settings-main { display: flex; flex-direction: column; gap: var(--space-4); }
.settings-main > .card, .settings-main > section { margin: 0; max-width: none; }
.settings-main > .back { align-self: flex-start; }
.settings-main > .page-top { margin-bottom: 0; }
.settings-main .back { display: none; }
@media (max-width: 760px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { display: none; }
  .settings-main .back { display: inline-block; }
  /* The account's areas: a row of tabs at the top. */
  .settings-nav.area-tabs { display: flex; flex-direction: row; flex-wrap: wrap; position: static; gap: var(--space-1); }
  .settings-nav.area-tabs a { border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: var(--space-1) var(--space-2); }
  .settings-nav.area-tabs a.active { border-bottom-color: var(--highlight); }
}

/* ---------- Data tables (e.g. DNS records) ---------- */
table.records { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-sm); }
table.records th { text-align: left; color: var(--muted); font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--border-strong); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
table.records td { border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3) var(--space-2) 0;
  overflow-wrap: anywhere; }

/* ---------- Dialogs (confirmations) ---------- */
dialog.dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4);
  background: var(--surface); color: var(--text); min-width: min(22rem, calc(100vw - 2 * var(--space-4))); max-width: min(32rem, calc(100vw - 2 * var(--space-4)));
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25); }
dialog.dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.dialog p { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
form.confirm { display: inline; }

/* ---------- Service cards ---------- */
.service-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
li.card.service { display: block; }
/* A service card's status and its Manage button, top right. */
.service-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.service-head { flex-wrap: wrap; }
.service-head > div:first-child { flex: 1 1 14rem; min-width: 0; }
/* Narrow: status and Manage go under the details, side by side. */
@media (max-width: 480px) {
  .service-actions { flex-direction: row; align-items: center; }
}
/* A tile's Open and Manage links, side by side. */
.tile-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0; }
.tile-links .install-line { margin: 0; }
.section-title { margin-top: var(--space-6); }

/* ---------- Server tiles (home) ---------- */
.server-facts li { margin: var(--space-1) 0; }

/* ---------- Server switcher (per-server settings) ---------- */
/* A heading between groups of cards on one page (Backups: each server's,
   then the whole lab's). */
.area-heading { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-2); }
h1 + .area-heading { margin-top: 0; }
.server-switcher ul { display: grid; gap: var(--space-2); }
.server-switcher li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid transparent; }
.server-switcher li.current { border-color: var(--accent); background: var(--surface-2); }
.server-switcher a { text-decoration: none; }