/* Cloud's own additions to Roostack's design system (css/app.css, copied
   by tools/sync-design.sh). Purpose tokens only, as Roostack's. */
.add-lab { position: relative; }
.add-lab-how { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(22rem, 80vw); z-index: 10;
  padding: var(--space-3) var(--space-4); }
.add-lab-how p { margin: 0 0 var(--space-2); }
.add-lab-how p:last-child { margin: 0; }
/* "Cloud" in the highlight colour, as in Roostack Cloud's wordmark. */
.brand-cloud { color: var(--highlight); }
.recovery-codes pre.output { max-height: none; }
.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); }
/* The Security page's forms: a comfortable width, left-aligned in the card. */
.security-form { max-width: 28rem; }
/* Where you're logged in: one browser a row, its details below its name,
   Log out at the side (stacks at phone width without scrolling). */
.sessions { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.sessions li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.sessions li small { display: block; margin-top: var(--space-1); }


/* ---------- The admin console (DESIGN §3f) ---------- */
/* A strip across the top that can't be mistaken for the customers'
   website, saying which console it is. */
/* It stays at the top while the page scrolls, one line high, and the
   sidebar fits under it (full height, less the strip). */
.admin { --admin-strip: 30px; }
.admin-strip { position: sticky; top: 0; z-index: 25; height: var(--admin-strip); box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; padding: 0 var(--space-4);
  background: var(--fg); color: var(--bg); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; }
.admin-strip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-strip a { color: var(--bg); }
.admin .shell { min-height: calc(100vh - var(--admin-strip)); }
.admin .sidebar { top: calc(var(--admin-strip) + 8px); height: calc(100vh - var(--admin-strip) - 16px); }
@media (max-width: 900px) {
  /* The drawer covers the strip while it's open. */
  .admin .sidebar { top: 0; height: auto; }
}
.admin-strip strong { color: var(--highlight-soft); }
.search-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--space-3); }
.search-row input[type=search] { flex: 1 1 16rem; }
/* A number of days in a sentence ("The last 7 days"): the CSP refuses
   style attributes, so its width is here. */
.search-row .inline-form { flex-wrap: nowrap; gap: var(--space-2); }
.search-row input.days { width: 6em; margin-top: 0; }
/* A table cell whose words belong together (an edge's dot and name). */
td.nowrap { white-space: nowrap; }
/* Facts as a list of names and values. */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }
.two-col > .card { margin: 0; }
table.records td.num, table.records th.num, table.list td.num, table.list th.num { text-align: right; }
/* Which console and where, at the sidebar's foot (a warning pill: never
   bare status text on the sidebar). */
.env { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--warn-bg); color: var(--warn); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env .icon { width: 13px; height: 13px; color: currentColor; vertical-align: 0; }
.audit-detail { font-family: var(--font-mono); font-size: 0.85em; color: var(--muted); overflow-wrap: anywhere; }
/* The monitor's page (Gatus), framed: most of the window under the
   header. */
.monitor-frame { display: block; width: 100%; height: calc(100vh - var(--admin-strip) - 200px); min-height: 480px;
  margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }

/* ---------- The portal's labs (DESIGN §3f) ---------- */
/* A card per lab on the account's page. */
.lab-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.lab-card { margin: 0; }
.lab-card .card-head { margin-bottom: var(--space-3); }
.lab-card h2 a { color: var(--fg); text-decoration: none; }
.lab-card h2 a::after { content: " →"; color: var(--muted); font-weight: var(--weight-normal); }
.lab-card dl.facts { margin: 0; font-size: var(--text-sm); }
/* Visitors a day: an SVG bar a day (the CSP allows no inline styles),
   today's paler while it's still counting; the value in each title. */
.visitors-chart { display: block; width: 100%; max-width: 40rem; height: 90px; margin: var(--space-3) 0 var(--space-1);
  border-bottom: 1px solid var(--border); }
.visitors-chart rect { fill: var(--chart-1); }
.visitors-chart rect.today { fill: var(--chart-1); fill-opacity: 0.45; }
.visitors-chart rect:hover { fill-opacity: 0.75; }
.bars-axis { display: flex; justify-content: space-between; max-width: 40rem; font-size: var(--text-sm); color: var(--muted); }
/* Backups against the quota: the space bar's look, in SVG. */
.space-chart { display: block; width: 100%; max-width: 28rem; height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); margin: var(--space-1) 0 var(--space-2); }
.space-chart.space-warning { border: 2px solid var(--warn); }
.space-chart rect { stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.space-chart .space-services { fill: var(--chart-1); }
.space-chart .space-backups { fill: var(--chart-2); }
.space-chart .space-guests { fill: var(--chart-3); }
.space-chart .space-other { fill: var(--muted); }
.danger-zone { border-color: var(--bad); }

/* Text areas as the design system's inputs (roost.ac/report, abuse
   cases); it has none of its own yet. */
textarea { 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); resize: vertical; }
textarea:focus-visible { border-color: var(--highlight); }
/* roost.ac/report's field for bots: off-screen, never seen or reached by
   people (aria-hidden, no tab stop). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Abuse cases (DESIGN §3f): usable from a phone ---------- */
/* Each action in its own fold, one open at a time on a small screen. */
.case-actions details { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
.case-actions details:first-of-type { border-top: 0; }
.case-actions summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
.case-actions form { margin-top: var(--space-2); }
.case-actions button { width: 100%; }
/* Suspensions on a case: one a block, not a table, to read on a phone. */
.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.stack-list li:last-child { border-bottom: 0; }
.stack-list p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
/* The names queue (DESIGN §3f): approve beside a fold to refuse, and the
   folds as a case's. */
.decide { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.decide details, .stack-list details { flex: 1 1 16rem; }
.stack-list summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
@media (min-width: 641px) { .case-actions button { width: auto; } }
@media (max-width: 480px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: var(--space-2); }
}
.passkey-login { margin-top: var(--space-4); }
.notices { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.notices li { padding: var(--space-2) 0 0; border-bottom: 1px solid var(--border); }
.notices small { display: block; color: var(--muted); font-weight: var(--weight-normal); }
.notices div.check { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.notices .badge { flex: none; }
.account-switch { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.account-switch label { margin: 0; }