/* ===========================================================================
   hemi.hemishthanki.com — admin center.
   Same design ideology as x.hemishthanki.com and subs.hemishthanki.com:
   Google Sans + a geneticker-style shell (sticky sidebar on desktop, a
   horizontally scrolling tab strip on mobile), monochrome X black/white theme,
   light + dark (auto / manual toggle), Roboto Mono for figures.
   =========================================================================== */

/* ------------------------------------------------------------ tokens ------- */
:root {
  color-scheme: light;   /* so forcing Light on a dark OS themes native controls light too */
  --bg: #f7f9fa;
  --panel: #ffffff;
  --panel2: #eef3f4;
  --ink: #0f1419;
  --ink2: #536471;
  --line: #e1e8ed;
  --line-strong: #cfd9de;
  --accent: #0f1419;            /* X is monochrome: black button in light mode… */
  --on-accent: #ffffff;
  --accent-hover: #272c30;
  --accent-ink: #0f1419;
  --accent-tint: rgba(15,20,25,.08);
  --accent-tint-strong: rgba(15,20,25,.14);
  --danger: #d9364c;
  --ok: #2aa565;

  --font-display: 'Google Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Google Sans Text', 'Google Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-btn: 10px;
  --shell-max: 1280px;
  --side-w: 268px;
  --main-max: 1120px;   /* content column cap — shell is LEFT-anchored (not centred) so the
                           sidebar hugs the left edge under the brand; no space wasted on its left */
  --topbar-h: 60px;
  --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --e2: 0 6px 20px rgba(16,24,40,.10);
  --dur: .16s;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --scrim: rgba(0,0,0,.5);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: #16181c;
  --panel2: #1f2226;
  --ink: #e7e9ea;
  --ink2: #8b98a5;
  --line: #2f3336;
  --line-strong: #3d4145;
  --accent: #eff3f4;            /* …and white button in dark mode, like x.com's Post button */
  --on-accent: #0f1419;
  --accent-hover: #d7dbdc;
  --accent-ink: #eff3f4;
  --accent-tint: rgba(255,255,255,.10);
  --accent-tint-strong: rgba(255,255,255,.16);
  --danger: #f2607a;
  --ok: #4fd28a;
  --e1: 0 1px 2px rgba(0,0,0,.5);
  --e2: 0 10px 30px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000; --panel: #16181c; --panel2: #1f2226;
    --ink: #e7e9ea; --ink2: #8b98a5; --line: #2f3336; --line-strong: #3d4145;
    --accent: #eff3f4; --on-accent: #0f1419; --accent-hover: #d7dbdc;
    --accent-ink: #eff3f4; --accent-tint: rgba(255,255,255,.10); --accent-tint-strong: rgba(255,255,255,.16);
    --danger: #f2607a; --ok: #4fd28a;
    --e1: 0 1px 2px rgba(0,0,0,.5); --e2: 0 10px 30px rgba(0,0,0,.6); --scrim: rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
h1 { letter-spacing: -.6px; }
h2 { letter-spacing: -.4px; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--panel2); padding: 1px 5px; border-radius: 6px; }
[hidden] { display: none !important; }
.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; }
::selection { background: var(--accent-tint-strong); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Material Symbols: hide until the icon font is confirmed loaded (app.js adds
   .icons-ready to <html>), so a blocked Google Fonts request never flashes raw
   ligature words. */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; flex: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
html:not(.icons-ready) .material-symbols-rounded { visibility: hidden; }

/* ---------------------------------------------------------- buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.btn .material-symbols-rounded { font-size: 20px; }
.btn-filled { background: var(--accent); color: var(--on-accent); }
.btn-filled:hover:not(:disabled) { background: var(--accent-hover); }
.btn-tonal { background: var(--panel2); color: var(--ink); border-color: var(--line); }
.btn-tonal:hover:not(:disabled) { border-color: var(--line-strong); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--panel2); border-color: var(--line-strong); }
.btn-text { background: none; color: var(--accent-ink); }
.btn-text:hover:not(:disabled) { background: var(--accent-tint); }
.btn-danger { background: var(--panel2); color: var(--danger); border-color: var(--line); }
.btn-danger:hover:not(:disabled) { border-color: var(--danger); }
/* A destructive action that sits BESIDE the primary one (deleting a profile from
   its own dialog): text weight, so it never competes with Save, but red. */
.btn-text.is-danger { color: var(--danger); }
.btn-text.is-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 14px 20px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: none; background: transparent; color: var(--ink2); cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--panel2); color: var(--ink); }
.icon-btn .material-symbols-rounded { font-size: 22px; }
.icon-btn.spinning .material-symbols-rounded { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- fields -------- */
.field { display: block; text-align: left; }
.field + .field { margin-top: 14px; }
.field-label {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--ink2); margin: 0 0 6px 2px; letter-spacing: .1px;
}
.field-box {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-btn);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field-icon { color: var(--ink2); font-size: 20px; }
.field-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--ink);
  font-family: var(--font-body); font-size: 15px; padding: 12px 0;
}
.field-box input::placeholder { color: var(--ink2); opacity: .8; }

/* Standalone inputs (text, password, select) styled to match .field-box. */
.input, select.input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 12px 12px; transition: border-color var(--dur), box-shadow var(--dur);
  appearance: none; -webkit-appearance: none;
}
select.input { height: 46px; padding-right: 38px; cursor: pointer; }
.input::placeholder { color: var(--ink2); opacity: .8; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* ------------------------------------------------------------ login -------- */
.login {
  min-height: 100dvh; display: grid; grid-template-rows: 1fr auto;
  /* `safe` matters: the account page's card is far taller than a login form, and
     plain centring would push its top edge above the viewport where it cannot be
     scrolled back to. Safe alignment falls back to start when the item overflows,
     while still centring the short cards this was written for. */
  justify-items: center; align-items: safe center;
  padding: 24px; padding-bottom: calc(24px + var(--safe-b));
}
.login-card {
  width: min(400px, 100%); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e2);
  padding: 30px 26px 28px;
}
.brand-lockup { text-align: center; margin-bottom: 22px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-mark .material-symbols-rounded { font-size: 27px; visibility: visible; }
.brand-title { font-size: 22px; margin: 14px 0 4px; }
.brand-sub { color: var(--ink2); font-size: 14px; margin: 0; }
.login-card .field { margin-top: 14px; }
/* .panel-note carries a panel's 16/20px inset, which reads as a stray indent
   inside a login card that has its own padding. .section-label needs breathing
   room from the lockup above it for the same reason: both were written for the
   console's panel stack, not for this card. */
.login-card .panel-note { padding: 0; }
.login-card .section-label { margin-top: 18px; }
/* The centred lockup used by the gate (/gate/) and the account page
   (account.hemishthanki.com). Both markups predate these rules and were falling
   back to bare browser defaults for the heading and the seal. */
.login-seal { display: block; margin: 0 auto 18px; border-radius: 50%; }
.login-title { font-size: 22px; margin: 0 0 6px; text-align: center; }
.login-sub { color: var(--ink2); font-size: 14px; margin: 0 0 4px; text-align: center; }
.login-actions { display: grid; gap: 10px; margin-top: 16px; }
.login-foot { padding: 18px; color: var(--ink2); font-size: 13px; }
.login-foot a { color: var(--ink2); text-decoration: none; }
.login-foot a:hover { color: var(--ink); }

/* ----------------------------------------------------------- topbar -------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px;
  min-height: var(--topbar-h); padding: 11px 22px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; background: none; border: none; cursor: pointer; padding: 0; }
.topbar .brand-mark { width: 34px; height: 34px; border-radius: 50%; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.3px; }
.brand-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink2); white-space: nowrap;
  padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line);
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* The drawer furniture is mobile-only; the desktop rail is always on screen. */
.nav-toggle, .drawer-close, .nav-scrim { display: none; }

/* ------------------------------------------------------------ shell -------- */
.shell {
  display: flex; align-items: flex-start; gap: 26px; max-width: none;
  margin: 0; padding: 26px 22px calc(80px + var(--safe-b));
}
.shell > .main { flex: 1 1 auto; min-width: 0; max-width: var(--main-max); }
.main:focus, .view:focus { outline: none; }

/* --------------------------------------------------------- sidebar --------- */
.sidebar {
  position: sticky; top: calc(var(--topbar-h) + 26px + env(safe-area-inset-top, 0px)); flex: none; width: var(--side-w);
  display: flex; flex-direction: column; gap: 6px;
}
.side-profile {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--e1);
}
.side-profile .av {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); overflow: hidden;
}
.side-profile .av img { width: 100%; height: 100%; object-fit: cover; }
.side-profile .av .material-symbols-rounded { font-size: 23px; visibility: visible; }
.side-profile .sp-text { display: flex; flex-direction: column; min-width: 0; }
.sp-name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mode { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-eyebrow {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ink2); padding: 6px 8px 8px; margin: 0;
}
.side-group { display: block; }
.side-nav, .nav-foot { display: flex; flex-direction: column; gap: 3px; }
.nav-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.side-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%;
  border-radius: var(--radius-sm); border: none; background: none; text-align: left; cursor: pointer;
  color: var(--ink2); font-family: var(--font-display); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background var(--dur), color var(--dur);
}
.side-item .material-symbols-rounded { font-size: 21px; flex: none; }
.side-item .side-label { flex: 1; min-width: 0; }
.side-item:hover { background: var(--panel2); color: var(--ink); }
.side-item.is-on { background: var(--accent-tint); color: var(--accent-ink); }
.side-item.is-on .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.si-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  padding: 1px 8px; border-radius: 999px; background: var(--panel2); color: var(--ink2); flex: none;
}
.side-item.is-on .si-badge { background: var(--accent-tint-strong); color: var(--accent-ink); }
.si-badge[hidden] { display: none; }
.si-badge.lock { background: var(--accent-tint-strong); color: var(--accent-ink); }
.side-item.danger:hover { color: var(--danger); }
.side-item.danger:hover .material-symbols-rounded { color: var(--danger); }

/* ------------------------------------------------------- view header ------- */
.view-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.85rem); font-weight: 700; margin: 0; letter-spacing: -.5px; flex: 1; min-width: 0; }
.appbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.view { display: block; }

/* ------------------------------------------------------------ cards -------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e1); }
.panel + .panel { margin-top: 18px; }
.panel-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--panel2); color: var(--ink); flex: none; }
.panel-ic .material-symbols-rounded { font-size: 23px; }
.panel-heading { flex: 1; min-width: 0; }
.panel-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0; }
.panel-sub { margin: 2px 0 0; color: var(--ink2); font-family: var(--font-mono); font-size: 12px; }
.panel-body { padding: 18px 20px; }
.panel-note { margin: 0; padding: 16px 20px; color: var(--ink2); font-size: 13.5px; border-bottom: 1px solid var(--line); }

.section-label { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink2); margin: 26px 2px 12px; }
.section-label:first-child { margin-top: 4px; }
.row-gap > * + * { margin-top: 16px; }

/* ------------------------------------------------------- stat tiles -------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--e1);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--panel2); color: var(--ink); margin-bottom: 4px; }
.stat-ic .material-symbols-rounded { font-size: 23px; }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.stat-label { color: var(--ink2); font-family: var(--font-mono); font-size: 11.5px; }

/* ------------------------------------------------------ service status ----- */
/* The card grid these rules used to draw is gone: Services and Access merged into
   one row list, so a subdomain's status, its lock and who may enter are stated in
   one place instead of a card in one tab and a row in another. Only the status
   indicator survived, and it now sits in a row's actions column. */
.svc-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink2); flex: none; }
.svc-status[data-status="online"] .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.svc-status[data-status="online"] { color: var(--ok); }
.svc-status[data-status="offline"] .dot { background: var(--danger); }
.svc-status[data-status="offline"] { color: var(--danger); }
.svc-status[data-status="checking"] .dot { background: var(--ink2); animation: pulse 1s ease-in-out infinite; }
/* A host with no probe in the catalogue: no dot at all rather than a grey one
   that reads as "offline". */
.svc-status[data-status="unknown"] { display: none; }
@keyframes pulse { 50% { opacity: .35; } }
/* The status text is the first thing to go when a row runs out of width — the
   coloured dot beside it already carries the state. */
@media (max-width: 700px) { .svc-status .svc-status-text { display: none; } }

/* ------------------------------------------------------------ forms -------- */
/* checkbox pills for subdomain selection */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.chk {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-btn); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink2); user-select: none;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.chk .material-symbols-rounded { font-size: 19px; }
.chk:hover { border-color: var(--line-strong); }
.chk input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.chk.on { border-color: transparent; background: var(--accent-tint); color: var(--accent-ink); }

/* Lock / Unlock button (replaced the toggle switch — a lock is consequential
   enough that the control should name the action rather than imply it).
   min-width holds the row steady as the label swaps between the two words. */
.lock-btn { min-width: 108px; flex: none; }
.lock-btn .material-symbols-rounded { font-size: 18px; }
.lock-btn.is-locked { color: var(--accent-ink); border-color: var(--accent-tint-strong); }
.lock-btn.is-locked:hover:not(:disabled) { border-color: var(--accent); }

/* ------------------------------------------------------------ rows --------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: none; }
.row-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--panel2); color: var(--ink2); flex: none; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-meta { color: var(--ink2); font-family: var(--font-mono); font-size: 11.5px; margin-top: 3px; }
.row-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.row-click { cursor: pointer; transition: background var(--dur); }
.row-click:hover { background: var(--panel2); }
.row-chev { color: var(--ink2); display: inline-flex; align-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--panel2); color: var(--ink2); }
.chip .material-symbols-rounded { font-size: 15px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.tag .material-symbols-rounded { font-size: 13px; }
.tag-off { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.tag-locked { background: var(--accent-tint-strong); color: var(--accent-ink); }
.tag-open { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.tag-disabled { background: var(--panel2); color: var(--ink2); }

/* ------------------------------------------------------ messages/notes ----- */
.msg { min-height: 1.2em; margin: 12px 0 0; font-family: var(--font-body); font-size: 13.5px; display: flex; align-items: center; gap: 7px; justify-content: center; }
.msg:empty { margin: 0; min-height: 0; }
.msg .material-symbols-rounded { font-size: 18px; }
.msg-err { color: var(--danger); }
.msg-ok { color: var(--ok); }
.note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin: 0 0 16px; }
.note .material-symbols-rounded { font-size: 20px; flex: none; }
.note-warn { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.note-info { background: var(--panel2); color: var(--ink2); }
.empty { text-align: center; color: var(--ink2); padding: 30px 20px; font-size: 13.5px; }

/* ------------------------------------------------------------ dialog ------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 50; }
.dialog { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px; }
.dialog-card {
  width: min(560px, 100%); max-height: 90dvh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e2); padding: 26px;
  animation: dialogIn .18s var(--ease);
}
@keyframes dialogIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.dialog-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 4px; letter-spacing: -.3px; }
.dialog-sub { margin: 0 0 20px; color: var(--ink2); font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* -------------------------------------------------- access-tab extras ------ */
.sd-stats { margin-bottom: 4px; }
.sd-lockrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.sd-lockrow .row-main { flex: 1; }

/* ---------------------------------------------------------- profiles ------- */
/* Initials stand in for a photo: a profile has no avatar to upload, but a round
   monogram still makes a list of people scan as people rather than as records. */
.av-i {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: .4px;
}
/* The grant picker: one person per row, chosen with a checkbox. Access GRANTS by
   selecting an existing profile — it never creates one, so an account can't be
   born inside a subdomain dialog and then forgotten about. */
.pick-list { display: grid; gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-btn); user-select: none;
  transition: background var(--dur), border-color var(--dur);
}
.pick:hover { border-color: var(--line-strong); }
.pick.on { border-color: transparent; background: var(--accent-tint); }
.pick:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 2px var(--accent-tint); }
.pick input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.pick .av-i { width: 34px; height: 34px; font-size: 12.5px; }
/* A selected row is tinted with the very token the monogram uses, which would
   dissolve it into the background — lift it back onto the panel colour. */
.pick.on .av-i { background: var(--panel); }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-sub { color: var(--ink2); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A hint under a field, for the one place a value has consequences the label
   can't carry on its own (the username can never be changed afterwards). */
.field-hint { display: block; margin-top: 5px; color: var(--ink2); font-size: 12px; }

/* ---------------------------------------------------------- insights ------ */
/* Every chart here plots MAGNITUDE in the single accent hue. Nothing encodes
   identity by colour, so there is no categorical palette to get wrong and no
   value that can only be read by matching a swatch — each mark is named and
   numbered beside it, and the charts stay legible in both themes and in print. */

/* Range filter: ONE row, above everything it scopes. */
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  border: none; background: none; cursor: pointer; color: var(--ink2);
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  padding: 6px 13px; border-radius: 999px; transition: background var(--dur), color var(--dur);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* Column chart. The 2px flex gap IS the separator between marks — no borders. */
.chart-wrap { padding: 4px 2px 0; }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 116px; }
.chart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-col i {
  display: block; width: 100%; max-width: 24px; min-height: 2px;
  background: var(--accent); border-radius: 4px 4px 0 0;   /* rounded data-end, square at the baseline */
}
.chart-col.is-empty i { background: var(--line); }
/* The axis band lives inside the flow, so the card can never crop it. */
.chart-axis { display: flex; gap: 2px; margin-top: 7px; }
/* Every column gets a slot so ticks stay aligned, but a tick is allowed to spill
   over its neighbours: at 90 columns a slot is ~3px wide and clipping to it would
   shred the date. Only every Nth slot carries text, so the spill lands on blanks. */
.chart-axis span {
  flex: 1 1 0; min-width: 0; text-align: center; color: var(--ink2);
  font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
  overflow: visible; white-space: nowrap;
}
.chart-axis span:first-child { text-align: left; }
.chart-axis span:last-child { text-align: right; }
.chart-note { margin: 10px 0 0; color: var(--ink2); font-size: 12.5px; }

/* The table twin every chart ships, so no value is reachable only by hovering. */
.chart-details { margin-top: 10px; }
.chart-details summary {
  cursor: pointer; color: var(--ink2); font-family: var(--font-display);
  font-weight: 600; font-size: 12px; padding: 4px 0; list-style: none;
}
.chart-details summary::-webkit-details-marker { display: none; }
.chart-details summary::before { content: "▸ "; }
.chart-details[open] summary::before { content: "▾ "; }
.chart-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.chart-table th, .chart-table td {
  text-align: left; padding: 5px 8px 5px 0; font-family: var(--font-mono);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line); color: var(--ink2);
}
.chart-table tr:first-child th { color: var(--ink); font-weight: 600; }
.chart-table td { text-align: right; color: var(--ink); }

/* Ranked bar list — the value always sits beside the mark, never only in a tooltip. */
.barlist { display: grid; gap: 13px; }
.bl-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: baseline; }
.bl-label { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.bl-label .material-symbols-rounded { font-size: 18px; color: var(--ink2); }
.bl-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-val { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--panel2); }
.bl-fill { height: 100%; min-width: 3px; background: var(--accent); border-radius: 0 4px 4px 0; }
.bl-sub { grid-column: 1 / -1; color: var(--ink2); font-family: var(--font-mono); font-size: 11px; margin-top: -2px; }

/* Behaviour tags: a qualitative label that always carries its number in the
   tooltip, so it can be checked rather than taken on faith. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.btag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--panel2); color: var(--ink2); cursor: default; }
.btag .material-symbols-rounded { font-size: 15px; }
.btag.is-on { background: var(--accent-tint); color: var(--accent-ink); }
.btag.is-warn { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }

.ins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Small print under a panel or a chart. `.ins-sub` was written for Insights and
   then used in Profiles and Security too; `.meta-note` is the same thing under a
   name that doesn't claim a tab. Prefer .meta-note outside Insights. */
.ins-sub, .meta-note { color: var(--ink2); font-size: 12.5px; margin: 0; }
/* Held at reduced opacity while refetching — no skeleton flash, no layout jump. */
.is-stale { opacity: .45; transition: opacity var(--dur); }

/* ============================================================ MOBILE =======
   <=820px: the sidebar slides in from the left as a navigation drawer, opened by
   the hamburger in the topbar. Same rail, same rows, same pills as the desktop
   sidebar — there is one navigation metaphor here, just an off-canvas one. */
@media (max-width: 820px) {
  .shell { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 14px calc(28px + var(--safe-b)); }
  .shell > .main { max-width: none; }
  .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .brand-tag { display: none; }

  .nav-toggle { display: inline-grid; }
  .drawer-close { display: inline-grid; align-self: flex-end; margin-bottom: 2px; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(86vw, 300px);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(16px + var(--safe-b));
    background: var(--panel); border-right: 1px solid var(--line); box-shadow: var(--e2);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    /* visibility (not just the transform) so a closed drawer is out of the tab order */
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, 0, 0, 1), visibility .24s linear;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transition: opacity .24s, visibility .24s linear;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

  .btn { min-height: 44px; }
  .stat-grid { grid-template-columns: 1fr; }
  .chk-grid { grid-template-columns: 1fr 1fr; }
  .appbar-actions { margin-left: auto; }
  /* Access rows: the Lock button now occupies the space the chevron used to
     share, so drop the chevron here — the whole row is still tappable. */
  .row { padding: 14px; gap: 10px; }
  .row-click .row-chev { display: none; }
  .lock-btn { min-width: 0; padding: 8px 12px; }
}

@media (min-width: 821px) and (max-width: 1040px) {
  :root { --side-w: 220px; }
  .shell { gap: 18px; }
}
/* Large monitors: widen sidebar + content (still left-anchored — the sidebar keeps hugging
   the left edge; the extra room grows the content, not a left gutter). */
@media (min-width: 1500px) { :root { --side-w: 288px; --main-max: 1280px; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ========================================================== HOME STUDIO =====
   The home-page editor (#/home). Layout: a live preview canvas on the left —
   the real page, rendered by the same template Publish uses, inside a scaled
   iframe — and an inspector rail on the right (Page / Sidebar / Theme). All
   studio-only classes carry the hs- prefix so none of it can leak into the
   console's own components. */
.hs-wrap { display: flex; gap: 18px; align-items: flex-start; }
.hs-canvas { flex: 1 1 auto; min-width: 0; position: sticky; top: calc(var(--topbar-h) + 14px + env(safe-area-inset-top, 0px)); }
.hs-canvas-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hs-canvas-bar .seg button { padding: 5px 11px; }
.hs-canvas-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); margin-left: auto; }
.hs-frame-box {
  position: relative; overflow: hidden;
  height: calc(100dvh - var(--topbar-h) - 205px); min-height: 400px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
}
.hs-frame { display: block; border: none; transform-origin: top left; background: transparent; }
.hs-frame-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink2); font-size: 13.5px; padding: 24px; text-align: center; }

.hs-rail { flex: none; width: 340px; min-width: 0; }
.hs-tabs .seg { display: flex; width: 100%; }
.hs-tabs .seg button { flex: 1; }
.hs-rail-body { margin-top: 12px; display: grid; gap: 12px; align-content: start; }

/* Inspector lists (sections / sidebar tree). */
.hs-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e1); overflow: hidden; }
.hs-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line); transition: background var(--dur); user-select: none;
}
.hs-row:last-child { border-bottom: none; }
.hs-row:hover { background: var(--panel2); }
.hs-row.is-sel { background: var(--accent-tint); }
.hs-row.hs-sub { padding-left: 36px; }
.hs-row-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--panel2); color: var(--ink2); flex: none; }
.hs-row-ic .material-symbols-rounded { font-size: 18px; }
.hs-row.is-sel .hs-row-ic { background: var(--accent-tint-strong); color: var(--accent-ink); }
.hs-row-main { flex: 1; min-width: 0; }
.hs-row-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-row-meta { color: var(--ink2); font-family: var(--font-mono); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.hs-row-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.hs-mini-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 8px; border: none; background: transparent; color: var(--ink2); cursor: pointer;
  transition: background var(--dur), color var(--dur), opacity var(--dur);
}
.hs-mini-btn:hover:not(:disabled) { background: var(--accent-tint); color: var(--ink); }
.hs-mini-btn:disabled { opacity: .3; cursor: default; }
.hs-mini-btn .material-symbols-rounded { font-size: 17px; }
.hs-drag-handle { cursor: grab; color: var(--ink2); }
.hs-row.hs-dragging { opacity: .35; }
.hs-row.hs-drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.hs-row.hs-drop-below { box-shadow: inset 0 -2px 0 var(--accent); }

.hs-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 11px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: none; color: var(--ink2); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.hs-add:hover { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.hs-add .material-symbols-rounded { font-size: 19px; }

/* Theme tab. */
.hs-pal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hs-pal {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; cursor: pointer;
  background: var(--panel); transition: border-color var(--dur), background var(--dur); text-align: left;
}
.hs-pal:hover { border-color: var(--line-strong); background: var(--panel2); }
.hs-pal.is-on { border-color: var(--accent); }
.hs-pal-sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.hs-pal-sw i { flex: 1; }
.hs-pal-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12px; margin-top: 6px; color: var(--ink); }
.hs-color-row { display: flex; align-items: center; gap: 10px; }
.hs-color-row + .hs-color-row { margin-top: 8px; }
.hs-color-swatch { width: 44px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; cursor: pointer; flex: none; }
.hs-color-label { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.hs-color-hex { width: 92px; flex: none; font-family: var(--font-mono); font-size: 12.5px; padding: 8px 10px; }
.hs-contrast { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.chip-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.chip-warn { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* Skin cards (mini previews of the three side-panel looks). */
.hs-skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-skin {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px; cursor: pointer;
  background: var(--panel); text-align: center; transition: border-color var(--dur);
}
.hs-skin:hover { border-color: var(--line-strong); }
.hs-skin.is-on { border-color: var(--accent); }
.hs-skin-prev { display: flex; flex-direction: column; gap: 3px; justify-content: center; height: 52px; padding: 6px; border-radius: 8px; }
.hs-skin-prev span { display: block; height: 9px; border-radius: 4px; }
.hs-skin-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 11px; margin-top: 5px; color: var(--ink2); }
.hs-skin.is-on .hs-skin-name { color: var(--ink); }

/* Add-a-section palette dialog. */
.hs-block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hs-block-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; cursor: pointer;
  background: var(--panel); text-align: left; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.hs-block-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--e1); }
.hs-block-thumb { height: 72px; border-radius: 8px; overflow: hidden; position: relative; margin-bottom: 8px; border: 1px solid var(--line); }
.hs-block-name { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
.hs-block-sub { color: var(--ink2); font-size: 11px; margin-top: 2px; line-height: 1.35; }

/* Picture picker. */
.hs-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.hs-asset { position: relative; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; cursor: pointer; background: var(--panel2); padding: 0; }
.hs-asset:hover { border-color: var(--line-strong); }
.hs-asset.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }
.hs-asset img { width: 100%; height: 68px; object-fit: cover; display: block; }
.hs-asset-name { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink2); padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-asset-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; }
.hs-asset-del .material-symbols-rounded { font-size: 14px; }

/* Icon picker. */
.hs-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.hs-icon-cell {
  display: grid; place-items: center; height: 44px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); cursor: pointer; transition: background var(--dur), border-color var(--dur);
}
.hs-icon-cell:hover { background: var(--panel2); border-color: var(--line-strong); }
.hs-icon-cell.is-on { background: var(--accent-tint); border-color: var(--accent); }
.hs-icon-cell .material-symbols-rounded { font-size: 21px; }

/* Small editors inside dialogs (button-row links, quote lines). */
.hs-mini-list { display: grid; gap: 8px; }
.hs-mini-row { display: flex; align-items: center; gap: 8px; }
.hs-mini-row .input { flex: 1; min-width: 0; }
.hs-mini-row .input.hs-narrow { flex: none; width: 110px; }

/* Appbar status. */
.hs-status { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.hs-status.is-err { color: var(--danger); }
.hs-status.is-live { color: var(--ok); }

@media (max-width: 1180px) { .hs-rail { width: 300px; } }
@media (max-width: 820px) {
  .hs-wrap { flex-direction: column; }
  .hs-canvas { position: static; width: 100%; }
  .hs-frame-box { height: 58vh; min-height: 320px; }
  .hs-rail { width: 100%; }
}