/* console.css — the Contabo monitor's whole look.
   Self-sufficient: the system's own typeface, no outside stylesheet, no CDN.
   One curve said once: 6px on anything you type in, 8px on cards, 999px on pills. */

:root{
  --bg:#f6f7f8; --card:#fff; --line:#e2e5e9; --line-soft:#eef0f3;
  --ink:#1c2024; --dim:#6b7480; --faint:#9aa3ad;
  --ok:#2f7d46; --ok-bg:#e9f4ec;
  --warn:#8a5a00; --warn-bg:#fdf3e0;
  --bad:#a52020; --bad-bg:#fcebeb;
  --go:#1f5d8c; --go-ink:#fff;
  --r-in:6px; --r-card:8px;
  --row:30px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15181b; --card:#1c2024; --line:#2d3338; --line-soft:#24292e;
    --ink:#e6e9ec; --dim:#98a1ab; --faint:#6e7781;
    --ok:#6cc189; --ok-bg:#1b2d22;
    --warn:#dca94a; --warn-bg:#2e2616;
    --bad:#e98a8a; --bad-bg:#2e1d1d;
    --go:#4f93c4; --go-ink:#0d1216;
  }
}
:root[data-theme="dark"]{
  --bg:#15181b; --card:#1c2024; --line:#2d3338; --line-soft:#24292e;
  --ink:#e6e9ec; --dim:#98a1ab; --faint:#6e7781;
  --ok:#6cc189; --ok-bg:#1b2d22;
  --warn:#dca94a; --warn-bg:#2e2616;
  --bad:#e98a8a; --bad-bg:#2e1d1d;
  --go:#4f93c4; --go-ink:#0d1216;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:13.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0;font-weight:600}
[hidden]{display:none !important}

/* ── the band at the top ─────────────────────────────────────────────────── */
.console-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 16px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.console-top-name strong{font-size:14px}
.console-top-name .console-dim{margin-left:8px;font-size:12px}
.console-top-right{display:flex;align-items:center;gap:10px}
.console-who{font-size:12px}
.console-dim{color:var(--dim)}

/* ── the page ────────────────────────────────────────────────────────────── */
.console-wrap{max-width:1060px;margin:0 auto;padding:14px 16px 40px}
.console-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:11px 12px 12px; margin:0 0 10px;
}
.console-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 9px}
.console-card-top h2{font-size:13px;letter-spacing:.01em}
.console-card-top .console-dim{font-size:12px;text-align:right}
.console-say{margin:0;color:var(--dim);font-size:12.5px}

/* ── the verdict, answer first ───────────────────────────────────────────── */
.console-verdict{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--r-card); padding:11px 13px; margin:0 0 10px;
}
.console-verdict-ok{border-left-color:var(--ok)}
.console-verdict-warn{border-left-color:var(--warn)}
.console-verdict-critical{border-left-color:var(--bad)}
.console-verdict-line{display:flex;align-items:center;gap:9px}
.console-verdict-line h1{font-size:16px}
.console-verdict-dot{width:9px;height:9px;border-radius:999px;background:var(--faint);flex:0 0 auto}
.console-verdict-ok .console-verdict-dot{background:var(--ok)}
.console-verdict-warn .console-verdict-dot{background:var(--warn)}
.console-verdict-critical .console-verdict-dot{background:var(--bad)}
.console-verdict-sub{margin:5px 0 0 18px;color:var(--dim);font-size:12.5px}

.console-findings{list-style:none;margin:8px 0 0;padding:0}
.console-finding{
  display:grid; grid-template-columns:14px minmax(0,1fr) 62px; column-gap:8px; align-items:center;
  min-height:var(--row); padding:2px 8px; margin:0 0 3px;
  border:1px solid var(--line-soft); border-radius:var(--r-card); cursor:pointer;
}
.console-finding>*{min-width:0}
.console-finding:hover{background:var(--line-soft)}
.console-finding:focus-visible{outline:2px solid var(--go);outline-offset:1px}
.console-finding-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.console-finding-critical{background:var(--bad-bg);border-color:var(--bad-bg)}
.console-finding-warn{background:var(--warn-bg);border-color:var(--warn-bg)}
.console-finding .console-fold{grid-column:1/-1}
.console-finding .console-fold-in p{margin:2px 0 6px 22px;color:var(--dim);font-size:12.5px}

/* ── the meters ──────────────────────────────────────────────────────────── */
.console-meters{display:block}
.console-meter{
  display:grid; grid-template-columns:86px minmax(90px,1fr) 212px; column-gap:12px;
  align-items:center; min-height:26px; font-size:12.5px;
}
.console-meter>*{min-width:0}
.console-meter-label{color:var(--dim)}
.console-meter-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.console-bar{display:block;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.console-bar i{display:block;width:0;height:100%;min-width:3px;border-radius:999px;background:var(--ok);transition:width .25s ease}
.console-bar-warn i{background:var(--warn)}
.console-bar-critical i{background:var(--bad)}
.console-inline-warn{margin:8px 0 0;padding:5px 9px;border-radius:var(--r-in);background:var(--warn-bg);color:var(--warn);font-size:12.5px}

/* ── the lists: fixed columns, read straight down ────────────────────────── */
.console-grid{display:block}
.console-head,.console-row{
  display:grid; column-gap:10px; align-items:center;
  min-height:var(--row); padding:2px 8px;
}
.console-head>*,.console-row>*{min-width:0}
.console-head{
  font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--faint);
  min-height:22px; border-bottom:1px solid var(--line-soft); margin-bottom:2px;
}
.console-row{border:1px solid var(--line-soft);border-radius:var(--r-card);margin:0 0 3px;cursor:pointer}
.console-row:hover{background:var(--line-soft)}
.console-row:focus-visible{outline:2px solid var(--go);outline-offset:1px}
.console-row-flat{cursor:default;border-color:transparent;box-shadow:inset 0 -1px 0 var(--line-soft);border-radius:0;margin:0}
.console-row-flat:hover{background:transparent}
.console-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.console-c{text-align:center}
.console-n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.console-grid-sites .console-head,.console-grid-sites .console-row{grid-template-columns:minmax(0,1fr) 86px 74px 94px}
.console-grid-svc   .console-head,.console-grid-svc   .console-row{grid-template-columns:minmax(0,1fr) 86px 104px}
.console-grid-sec   .console-row{grid-template-columns:232px 92px minmax(0,1fr)}
.console-grid-jail  .console-head,.console-grid-jail  .console-row{grid-template-columns:148px 94px 98px minmax(0,1fr)}
.console-grid-ledger .console-head,.console-grid-ledger .console-row{grid-template-columns:minmax(0,1fr) 112px 112px}
.console-row .console-fold{grid-column:1/-1}

.console-caret{display:inline-block;width:12px;color:var(--faint);transition:transform .25s ease;transform-origin:45% 50%}
.console-row.open .console-caret,.console-finding.open .console-caret,.console-more-head[aria-expanded="true"] .console-caret{transform:rotate(90deg)}

/* the detail a row opens, lined up under the row it belongs to */
.console-detail{display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:12px;row-gap:1px;margin:3px 0 7px;font-size:12.5px}
.console-detail dt{color:var(--faint)}
.console-detail dd{margin:0;color:var(--dim);overflow-wrap:anywhere}

/* ── a fold that slides the whole way to nothing ─────────────────────────── */
.console-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.console-fold-in{overflow:hidden;min-height:0}
.open>.console-fold,.console-more-head[aria-expanded="true"]+.console-fold{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){.console-fold{transition:none}.console-caret{transition:none}}

.console-more{margin:9px 0 0;border-top:1px solid var(--line-soft);padding-top:7px}
.console-more-head{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--dim);font:inherit;font-size:12.5px;
}
.console-more-head:hover{color:var(--ink)}
.console-more-head:focus-visible{outline:2px solid var(--go);outline-offset:2px}
.console-more .console-fold-in>*{padding-top:6px}

/* ── pills, one height, one curve ────────────────────────────────────────── */
.console-pill{
  display:inline-block;min-width:52px;height:18px;line-height:18px;padding:0 8px;
  border-radius:999px;background:var(--line);color:var(--dim);
  font-size:11px;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;
}
.console-pill-ok{background:var(--ok-bg);color:var(--ok)}
.console-pill-warn{background:var(--warn-bg);color:var(--warn)}
.console-pill-bad{background:var(--bad-bg);color:var(--bad)}

.console-hush{margin:1px 0 7px}

/* ── figures ─────────────────────────────────────────────────────────────── */
.console-figures{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.console-figure{
  border:1px solid var(--line-soft);border-radius:var(--r-card);padding:6px 12px;
  display:flex;flex-direction:column;gap:1px;min-width:104px;
}
.console-figure-num{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.console-figure-cap{font-size:11px;color:var(--faint)}

/* ── buttons and boxes, all one height in a row ──────────────────────────── */
.console-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;padding:0 10px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--ink);font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
}
.console-btn:hover{background:var(--line-soft);border-color:var(--dim)}
.console-btn:focus-visible{outline:2px solid var(--go);outline-offset:1px}
.console-btn-go{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.console-btn-go:hover{background:var(--go);border-color:var(--ink);color:var(--go-ink);filter:brightness(1.08)}
.console-btn[disabled]{opacity:.55;cursor:default}

.console-in{
  height:24px;padding:0 7px;border:1px solid var(--line);border-radius:var(--r-in);
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;
}
.console-in:focus{outline:2px solid var(--go);outline-offset:-1px;border-color:var(--go)}
.console-in-num{width:62px;text-align:right;font-variant-numeric:tabular-nums}
.console-in-mid{width:132px}
.console-in-wide{width:262px}

/* ── settings: paired boxes share a width, labels in one column ──────────── */
.console-set{display:block;margin-top:7px}
.console-set-row{
  display:grid;grid-template-columns:232px max-content max-content;column-gap:10px;
  align-items:center;min-height:28px;
}
.console-set-label{color:var(--dim);font-size:12.5px}
.console-set-unit,.console-set-state{font-size:12px;color:var(--faint);width:46px}

.console-switch{
  width:34px;height:18px;border-radius:999px;border:1px solid var(--line);
  background:var(--line);padding:0;cursor:pointer;position:relative;flex:0 0 auto;
  transition:background .2s ease;
}
.console-switch i{
  position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:999px;
  background:var(--card);transition:transform .2s ease;
}
.console-switch[aria-checked="true"]{background:var(--ok);border-color:var(--ok)}
.console-switch[aria-checked="true"] i{transform:translateX(16px)}
.console-switch:focus-visible{outline:2px solid var(--go);outline-offset:2px}

/* ── the foot ────────────────────────────────────────────────────────────── */
.console-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 0;font-size:12px}

/* ── the floating note ───────────────────────────────────────────────────── */
.console-flash{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);
  max-width:min(560px,calc(100vw - 32px));
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:12.5px;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:20;
}
.console-flash.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.console-flash.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
@media (prefers-reduced-motion:reduce){.console-flash{transition:none}}

/* ── the door ────────────────────────────────────────────────────────────── */
.console-plain{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.console-door{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 26px;max-width:470px;width:100%;
}
.console-door h1{font-size:18px;margin-bottom:7px}
.console-sub{color:var(--dim);font-size:12.5px;margin:0 0 16px}
.console-fine{color:var(--faint);font-size:11.5px;margin:12px 0 0}
.console-note-bad{
  margin:0 0 14px;padding:8px 11px;border-radius:var(--r-in);
  background:var(--bad-bg);color:var(--bad);font-size:12.5px;
}
.console-door .console-btn-go{height:30px;padding:0 15px;font-size:13px}

/* ── narrow: each repeated thing becomes a small card, labels and all ────── */
@media (max-width:760px){
  .console-wrap{padding:12px 16px 36px}
  .console-meter{grid-template-columns:76px minmax(60px,1fr) minmax(0,160px)}
  .console-detail{grid-template-columns:minmax(0,1fr)}
  .console-detail dt{margin-top:4px}

  .console-head{display:none}
  .console-grid-sites .console-row,
  .console-grid-svc .console-row,
  .console-grid-sec .console-row,
  .console-grid-jail .console-row,
  .console-grid-ledger .console-row{
    grid-template-columns:minmax(0,1fr) max-content; row-gap:1px; padding:6px 8px;
  }
  .console-grid-sites .console-row>.console-n,
  .console-grid-svc .console-row>.console-n,
  .console-grid-jail .console-row>.console-n,
  .console-grid-ledger .console-row>.console-n{text-align:left;color:var(--dim);font-size:12px}
  .console-grid-sites .console-row>.console-n:nth-child(3)::before{content:'answered in '}
  .console-grid-sites .console-row>.console-n:nth-child(4)::before{content:'certificate '}
  .console-grid-svc .console-row>.console-n::before{content:'since '}
  .console-grid-jail .console-row>.console-n:nth-child(2)::before{content:'blocked now '}
  .console-grid-jail .console-row>.console-n:nth-child(3)::before{content:'blocked ever '}
  .console-grid-ledger .console-row>.console-n:nth-child(2)::before{content:'lines '}
  .console-grid-ledger .console-row>.console-n:nth-child(3)::before{content:'cost '}
  .console-grid-sec .console-row{grid-template-columns:minmax(0,1fr) max-content}
  .console-grid-sec .console-row>.console-v{grid-column:1/-1}
  /* On a phone the name IS the row. Cutting "Monitoring of LVM2 mirrors, snaps…"
     wastes the one line that matters, so it wraps here instead of ellipsing
     (measured at 600, 420 and 360px, 19 Oct 2026). */
  .console-row>.console-t{white-space:normal;overflow:visible;text-overflow:clip}
  .console-set-row{grid-template-columns:minmax(0,1fr) max-content max-content;row-gap:2px}
  .console-in{height:30px;font-size:16px}      /* a phone zooms into anything smaller */
  .console-in-wide{width:100%;max-width:100%}
  .console-btn{height:28px}
  .console-top{padding:8px 12px}
  .console-who{display:none}
}