:root {
  --bg: #05070c;
  --bg-2: rgba(255, 255, 255, .035);
  --bg-3: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .16);
  --fg: #eef2fa;
  --fg-dim: #9fabc4;
  --fg-faint: #6b7893;
  --accent: #6ea8fe;
  --accent-rgb: 110, 168, 254;
  --accent-ink: #3f6ea8;
  --accent-dim: #3f6ea8;
  --good: #3ecf8e;
  --warn: #ffb648;
  --bad: #ff6b7a;
  --secret: #a78bfa;
  --brand-1: #6ea8fe;
  --brand-2: #a78bfa;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  --lift: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 60px -32px rgba(0, 0, 0, .95);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/* Light is its own set of steps, not an inversion: translucent white glass
   becomes translucent ink, borders gain weight, and the accent needs a darker
   step before it can carry text. Applied by a data-theme attribute the server
   stamps from a cookie, so there is no flash before the stylesheet lands. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-2: rgba(10, 20, 45, .035);
  --bg-3: rgba(10, 20, 45, .06);
  --line: rgba(10, 20, 45, .11);
  --line-2: rgba(10, 20, 45, .2);
  --fg: #0d1526;
  --fg-dim: #46536b;
  --fg-faint: #6b7a93;
  --good: #0a8f3c;
  --warn: #9a6400;
  --bad: #c0362f;
  --secret: #6d41c8;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 34px -22px rgba(10, 20, 45, .4);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6fb;
    --bg-2: rgba(10, 20, 45, .035);
    --bg-3: rgba(10, 20, 45, .06);
    --line: rgba(10, 20, 45, .11);
    --line-2: rgba(10, 20, 45, .2);
    --fg: #0d1526;
    --fg-dim: #46536b;
    --fg-faint: #6b7a93;
    --good: #0a8f3c;
    --warn: #9a6400;
    --bad: #c0362f;
    --secret: #6d41c8;
    --glass: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
    --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 34px -22px rgba(10, 20, 45, .4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--fg);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Ambient light rather than a flat fill: three soft colour washes over ink,
   fixed so they do not slide around while a timeline scrolls. */
body {
  background:
    radial-gradient(1100px 580px at 10% -12%, rgba(110, 168, 254, .16), transparent 62%),
    radial-gradient(900px 480px at 90% -6%, rgba(167, 139, 250, .13), transparent 58%),
    radial-gradient(800px 620px at 50% 112%, rgba(62, 207, 142, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* A trace of grain stops large dark areas reading as flat plastic. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* App shell: topbar keeps its natural height (it wraps on a phone) and the
   body below fills whatever is left. dvh tracks Safari's collapsing toolbar;
   vh is the fallback for browsers without it. */
body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.app > .topbar { flex: none; }
body.app > .console,
body.app > .main,
body.app > #session-view,
body.app > .center-page { flex: 1; min-height: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 9px 12px;
}
button {
  cursor: pointer;
  background: rgba(255, 255, 255, .055);
  white-space: nowrap;
  font-weight: 650;
  transition: background .14s, border-color .14s, transform .14s;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent-dim); outline-offset: 1px; border-color: var(--accent-dim);
}
textarea { resize: vertical; font-family: var(--mono); font-size: 13px; }

.btn-primary {
  background: linear-gradient(180deg, #8ebbff, var(--accent));
  border-color: #7fb0ff;
  color: #06101f;
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(110, 168, 254, .95);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #a3c8ff, #7fb4ff); }
.btn-danger { color: #ffb3ba; border-color: rgba(255, 107, 122, .35); background: rgba(255, 107, 122, .09); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 107, 122, .16); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--fg); }
.btn-sm { padding: 4px 8px; font-size: 12px; border-radius: 6px; }

.mono { font-family: var(--mono); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- shell ---- */
.topbar {
  display: flex; align-items: center; gap: 13px;
  min-height: 56px; padding: 0 17px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 9px;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center; font-size: 12px; color: #06101f; font-weight: 800;
  box-shadow: 0 6px 16px -7px rgba(110, 168, 254, .9);
  flex: none;
}
.badge {
  font-size: 11px; padding: 4px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--fg-dim); background: rgba(255, 255, 255, .04);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700; white-space: nowrap;
}
.badge-admin { color: #dcc4ff; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .13); }
.badge-good { color: #8df0c4; border-color: rgba(62, 207, 142, .35); background: rgba(62, 207, 142, .1); }
.badge-warn { color: #ffd089; border-color: rgba(255, 182, 72, .35); background: rgba(255, 182, 72, .1); }
.badge-bad { color: #ffb3ba; border-color: rgba(255, 107, 122, .35); background: rgba(255, 107, 122, .1); }
.badge-secret { color: #dcc4ff; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .13); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.dot.on { background: var(--good); animation: beat 2.6s infinite; }
@keyframes beat {
  0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); }
  70% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}
.dot.off { background: var(--fg-faint); }

/* ---- cards / panels ---- */
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }
.card-pad { padding: 16px; }
.panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); font-weight: 700; }

/* ---- console layout ---- */
.console { display: grid; grid-template-columns: 290px 1fr; min-height: 0; }
.console.has-rail { grid-template-columns: 290px 1fr 268px; }
.sidebar {
  border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent);
}
.sidebar-head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.device-list { overflow-y: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.device {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
  padding: 11px; border-radius: 13px; border: 1px solid transparent; background: transparent;
}
.device:hover { background: rgba(255, 255, 255, .045); transform: none; }
.device.active {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(167, 139, 250, .05));
  border-color: rgba(var(--accent-rgb), .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Gradient initials with a presence dot: which device is talking should be
   readable without reading. */
.device-av {
  width: 36px; height: 36px; border-radius: 11px; flex: none; position: relative;
  display: grid; place-items: center; font: 700 12px var(--mono); color: #0a1020;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
}
.device-av i {
  position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--good); border: 2.5px solid #0b0e15;
}
.device-unread {
  background: linear-gradient(180deg, #8ebbff, var(--accent)); color: #06101f;
  font: 700 10.5px var(--sans); border-radius: 99px; padding: 3px 7px; flex: none;
  box-shadow: 0 6px 14px -7px rgba(110, 168, 254, .9);
}
.device-name { font-weight: 600; font-size: 13px; }
.device-meta { font-size: 11px; color: var(--fg-faint); font-family: var(--mono); }

.sidebar-foot {
  border-top: 1px solid var(--line); padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sidebar-foot #me { display: block; max-width: 100%; flex: 1; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head { padding: 13px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.timeline {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(900px 320px at 50% -14%, rgba(110, 168, 254, .06), transparent);
}
.composer {
  border-top: 1px solid var(--line); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025));
}

/* ---- items ---- */
.item { max-width: min(760px, 92%); display: flex; flex-direction: column; gap: 6px; }
.item.mine { align-self: flex-end; align-items: flex-end; }
.item-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-faint); font-family: var(--mono); }
.bubble {
  border: 1px solid var(--line); background: var(--glass); border-radius: 16px;
  padding: 13px 15px; width: 100%; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}
.item.mine .bubble {
  background: linear-gradient(165deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05));
  border-color: rgba(var(--accent-rgb), .32);
}
.bubble-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--fg-dim); }
.bubble pre {
  margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}
.bubble.script { border-left: 2px solid var(--good); }
.bubble.secret {
  border-left: 2px solid var(--secret);
  background: linear-gradient(165deg, rgba(167, 139, 250, .15), rgba(167, 139, 250, .03));
}
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.secret-cover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.secret-cover .lock { font-size: 18px; }
/* Day dividers keep a long session legible. */
.day-divider {
  display: flex; align-items: center; gap: 14px; color: var(--fg-faint);
  font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.day-divider::before, .day-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.empty { margin: auto; text-align: center; color: var(--fg-faint); max-width: 420px; display: flex; flex-direction: column; gap: 10px; }

/* ---- pairing / modal ---- */
.modal-back {
  position: fixed; inset: 0; background: rgba(5, 8, 13, .76); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  width: 100%; max-width: 440px; border: 1px solid var(--line-2);
  border-radius: 20px; padding: 24px; max-height: 92dvh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(22, 27, 38, .96), rgba(12, 15, 22, .97));
  box-shadow: var(--lift);
}
.qr { background: #fff; padding: 10px; border-radius: 12px; display: block; width: 240px; height: 240px; margin: 0 auto; }
/* The code is the one thing on the page worth looking at. */
.paircode {
  font-family: var(--mono); font-size: 40px; font-weight: 800; letter-spacing: .13em;
  text-align: center; padding: 22px 12px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .16), rgba(167, 139, 250, .06) 60%, transparent);
  border: 1px solid rgba(var(--accent-rgb), .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(var(--accent-rgb), .85);
  background-clip: padding-box;
}
.paircode-label {
  font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); text-align: center; margin-bottom: 4px; opacity: .9;
}
.countdown { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.countdown.urgent { color: var(--warn); }

/* ---- centered single-purpose pages ---- */
.center-page { min-height: 100%; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.center-card {
  width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: 22px; padding: 30px;
  background: var(--glass); box-shadow: var(--lift); backdrop-filter: blur(18px);
}
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px; font-weight: 600; background: #fff; color: #1f2328; border: none; border-radius: 8px;
}
.gbtn:hover { background: #f1f3f5; }
.code-input {
  font-family: var(--mono); font-size: 28px; font-weight: 700; text-align: center; letter-spacing: .16em;
  text-transform: uppercase; width: 100%; padding: 16px; border-radius: 14px;
}

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2);
}
td { padding: 9px 10px; border-bottom: 1px solid #1b212e; vertical-align: middle; }
tr:hover td { background: #141924; }
.table-wrap { overflow: auto; max-height: 60vh; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat-n { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1.1; }
.stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); font-weight: 600; margin-top: 4px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--fg-dim); padding: 9px 14px; font-weight: 600; }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.page { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---- toasts / banners ---- */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; align-items: center; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 14px;
  font-size: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); animation: pop .16s ease-out;
}
.toast.good { border-color: #255043; color: var(--good); }
.toast.bad { border-color: #4a2a2f; color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.banner { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); font-size: 13px; }
.banner.bad { border-color: #4a2a2f; background: #241416; color: #ffc0c0; }
.banner.warn { border-color: #4e3c1d; background: #241c0f; color: #ffdfa8; }

.typing { font-size: 12px; color: var(--fg-faint); font-style: italic; height: 16px; }

@media (max-width: 1100px) {
  .console.has-rail { grid-template-columns: 290px 1fr; }
}

@media (max-width: 760px) {
  /* The device list becomes a drawer: a phone should show the conversation,
     not spend 40% of the screen on a list you already chose from. */
  .console, .console.has-rail { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .sidebar {
    position: fixed; left: 0; right: 0; top: 0; z-index: 40;
    max-height: 78dvh; border-right: none; border-bottom: 1px solid var(--line-2);
    border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    transform: translateY(-102%); transition: transform .2s ease;
    padding-top: env(safe-area-inset-top);
  }
  body.devices-open .sidebar { transform: translateY(0); }
  .device-list { max-height: none; }
  #scrim { position: fixed; inset: 0; background: rgba(5, 8, 13, .6); z-index: 35; }
  .mobile-only { display: inline-flex !important; }

  /* Wrap is the safety net: the console bar fits on one row, the admin bar
     has more controls than a phone can hold and spills onto a second. */
  .topbar { gap: 4px 8px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); min-height: 46px; flex-wrap: wrap; }
  .topbar .brand { font-size: 14px; }
  /* Measured at 390px: the bar was already full, and the lockup needs 23px it
     does not have. Both names go and the two marks stay - the tenant logo
     still leads, which is the part that has to survive. Same trade the remote
     session header already made, and the one the countdown and #me make. */
  .topbar .co-name, .topbar .brand-wordmark, .topbar .brand-name { display: none; }
  .topbar .brand.co { gap: 7px; }
  .topbar .co-rule { height: 14px; }
  .topbar .co-mark { width: 14px; height: 14px; }
  /* The wide logo has no text to drop, so it gives up width instead. */
  .topbar .brand-logo.wide { height: 22px; max-width: 124px; }
  /* Who you are signed in as does not earn a whole row on a phone; the admin
     console still shows it, and Sign out is right there. */
  .topbar #me { display: none; }
  #ws-status .faint { display: none; }

  /* Long labels do not fit; the short form lives in data-short. */
  .countdown { font-size: 0; }
  .countdown::after { content: attr(data-short); font-size: 11px; font-family: var(--mono); }

  .main-head { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  /* The Admin link already says "admin"; the duplicate badge, the rename
     button and the byte counts all lose to screen space here. */
  #role-badge, #rename-btn, .item-head .bytes, #refreshed { display: none; }
  /* Drop the spacer and let the device/operator labels take the slack, so the
     End session button stays on the first row instead of forcing a second. */
  #session-view .topbar .grow { display: none; }
  #session-view .topbar .col { flex: 1; min-width: 0; }
  .timeline { padding: 12px; gap: 12px; }
  .item { max-width: 100%; }
  .bubble pre { max-height: 300px; font-size: 12px; }

  .composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  /* Kind and label share a row: stacking them cost a whole field of height
     in a composer that already competes with the conversation. */
  .composer .row.wrap { flex-wrap: nowrap; gap: 6px; }
  .composer select { width: 44%; flex: none; }
  .composer input { flex: 1; min-width: 0; }
  .composer textarea { min-height: 76px; height: 76px; }
  #hint { display: none; }

  .center-page { padding: 16px; align-items: start; padding-top: max(16px, 6dvh); }
  .center-card { padding: 20px 18px; }
  .code-input { font-size: 22px; letter-spacing: .12em; padding: 12px; }
  .paircode { font-size: 24px; letter-spacing: .08em; padding: 10px; }
  .modal { padding: 16px; border-radius: 14px; }

  .page { padding: 14px 12px 48px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .stat { padding: 11px; }
  .stat-n { font-size: 21px; }
  .table-wrap { max-height: none; }
  th, td { white-space: nowrap; }
  .tabs { overflow-x: auto; }

  /* Bottom-anchored toasts sit right on top of the composer and the send
     button on a phone; drop them in from the top instead. */
  .toasts { bottom: auto; top: calc(58px + env(safe-area-inset-top)); }
  .toast { animation: pop-top .16s ease-out; }
}

@keyframes pop-top { from { opacity: 0; transform: translateY(-6px); } }

/* iOS zooms the page in whenever a focused field is under 16px. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
}

/* Touch targets: 32px is fine with a mouse, not with a thumb. */
@media (pointer: coarse) {
  button, select { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 7px 11px; }
  .tab { min-height: 42px; }
  .device { padding: 12px 10px; }
  .item-actions button { min-height: 34px; }
}

.mobile-only { display: none; }

/* ---- utilities ----
   The CSP forbids inline style attributes (style-src 'self'), so every
   one-off spacing/size tweak in the markup lives here instead. */
.m0 { margin: 0; }
.g0 { gap: 0; } .g1 { gap: 1px; } .g5 { gap: 5px; } .g6 { gap: 6px; } .g8 { gap: 8px; }
.g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g18 { gap: 18px; }
.pad-h { padding: 0 18px; }
.pad10 { padding: 10px; }
.divider-top { border-top: 1px solid var(--line); padding-top: 14px; }

.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; }
.t17 { font-size: 17px; } .t18 { font-size: 18px; } .t28 { font-size: 28px; }
.t32 { font-size: 32px; } .t34 { font-size: 34px; }

.center { text-align: center; }
.jc { justify-content: center; }
.min0 { min-width: 0; min-height: 0; }
.fit { width: auto; }
.vh100 { height: 100vh; height: 100dvh; }
.clip { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w200 { max-width: 200px; } .w220 { max-width: 220px; } .w320 { max-width: 320px; }
.dashed-btn { text-align: center; padding: 9px; border: 1px dashed var(--line-2); border-radius: 8px; }

/* ---- per-tenant branding ----
   Colours come from /brand.css; this is the shape of the mark itself. */
.tenant-tag { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }

/* Links inside a handed-over payload: visible, and never wide enough to push
   the bubble past the screen on a phone. */
.bubble a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.bubble a:hover { color: var(--fg); }

/* The second door on the login page: same shape as the Google button so both
   read as equal choices, in the app's own colours rather than Google's. */
.gbtn-secondary { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line-2); }
.gbtn-secondary:hover { background: #1f2636; border-color: var(--accent-dim); }

/* ---- per-tenant resources (remote side) ----
   Standard company links, rendered from tenants.json. Public: they show
   before any session exists. */
.resources { display: grid; gap: 10px; }
.resource {
  display: flex; gap: 13px; align-items: center; padding: 14px 15px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--glass); text-decoration: none; color: inherit;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.resource:hover {
  transform: translateY(-2px); border-color: var(--line-2); text-decoration: none;
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .95);
}
.resource-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: var(--fg); background: linear-gradient(150deg, rgba(var(--accent-rgb), .3), rgba(167, 139, 250, .16));
  border: 1px solid rgba(var(--accent-rgb), .28);
}
.resource b { display: block; font-size: 14px; color: var(--fg); }
.resource small { display: block; font-size: 12.5px; color: var(--fg-faint); margin-top: 2px; }
.resource-go { color: var(--fg-faint); flex: none; }
.resource.primary {
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .17), rgba(167, 139, 250, .06) 70%, transparent);
}
.resource.primary .resource-ic {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .75), var(--accent)); color: #06101f;
  border-color: transparent; box-shadow: 0 10px 22px -11px rgba(var(--accent-rgb), .9);
}

/* ---- quick send (operator side) ---- */
.rail { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent); }
.rail-head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rail-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.snippet {
  display: flex; gap: 11px; align-items: center; padding: 11px; border-radius: 12px; width: 100%;
  border: 1px solid var(--line); background: var(--glass); text-align: left;
}
.snippet:hover { border-color: rgba(110, 168, 254, .4); transform: translateX(-2px); }
.snippet-ic {
  width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: #8df0c4; background: linear-gradient(150deg, rgba(62, 207, 142, .28), rgba(62, 207, 142, .1));
  border: 1px solid rgba(62, 207, 142, .26);
}
.snippet-ic.secret {
  color: #dcc4ff; background: linear-gradient(150deg, rgba(167, 139, 250, .3), rgba(167, 139, 250, .1));
  border-color: rgba(167, 139, 250, .3);
}
.snippet b { display: block; font-size: 12.5px; font-weight: 650; }
.snippet small {
  display: block; font: 10.5px var(--mono); color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-foot { padding: 13px; border-top: 1px solid var(--line); }

/* ---- segmented control ----
   All three payload kinds visible at once: the choice decides whether the
   payload is destroyed on read, which is too important for a dropdown. */
.seg { display: inline-flex; background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2);
       border-radius: 11px; padding: 3.5px; gap: 3px; }
.seg button {
  background: transparent; border: 0; color: var(--fg-dim); font: 650 12.5px var(--sans);
  padding: 7px 13px; border-radius: 8px; min-height: 0;
}
.seg button:hover:not(:disabled) { transform: none; background: rgba(255, 255, 255, .05); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  color: var(--fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.seg button[aria-pressed="true"][data-kind="secret"] {
  background: linear-gradient(180deg, rgba(167, 139, 250, .38), rgba(167, 139, 250, .16)); color: #eaddff;
}
.seg button[aria-pressed="true"][data-kind="script"] {
  background: linear-gradient(180deg, rgba(62, 207, 142, .32), rgba(62, 207, 142, .13)); color: #a9f3cf;
}

/* ---- waiting state on the remote ---- */
.waiting-row { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 56px; height: 56px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--mono); color: var(--fg-dim); }

@media (max-width: 760px) {
  .rail { display: none; }
  .resource { padding: 11px 12px; }
  .resource-ic { width: 34px; height: 34px; border-radius: 11px; }
  .paircode { font-size: 29px; padding: 16px 10px; }
  .center-card { padding: 20px 18px; border-radius: 18px; }
  .seg button { padding: 8px 11px; font-size: 12px; }
}

/* ---- sub tabs (conversation / resources on the remote) ---- */
.subtabs { display: flex; gap: 3px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.subtab {
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--fg-faint);
  font: 650 13px var(--sans); padding: 12px 12px; border-radius: 0;
}
.subtab:hover:not(:disabled) { background: transparent; color: var(--fg); transform: none; }
.subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ---- admin: posture, controls, activity ---- */
.finding { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.finding:last-child { border-bottom: 0; }
.finding-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.finding b { display: block; font-size: 14px; }
.finding p { margin: 3px 0 0; font-size: 13px; color: var(--fg-dim); max-width: 70ch; }
/* status never travels alone: colour + icon + word */
.lvl { display: inline-flex; align-items: center; gap: 6px; font: 650 12px var(--sans); white-space: nowrap; }
.lvl-good    { color: #5ddc84; } .finding-ic.good    { background: rgba(12, 163, 12, .12);  color: #5ddc84; border: 1px solid rgba(12, 163, 12, .26); }
.lvl-warning { color: #fab219; } .finding-ic.warning { background: rgba(250, 178, 25, .12); color: #fab219; border: 1px solid rgba(250, 178, 25, .26); }
.lvl-serious { color: #ec835a; } .finding-ic.serious { background: rgba(236, 131, 90, .12); color: #ec835a; border: 1px solid rgba(236, 131, 90, .26); }
.lvl-critical{ color: #ff8a8a; } .finding-ic.critical{ background: rgba(208, 59, 59, .14);  color: #ff8a8a; border: 1px solid rgba(208, 59, 59, .3); }

.facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.facet { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 15px; padding: 15px; }
.facet h4 { margin: 0; font-size: 13px; }
.facet .cap { font: 11px var(--mono); color: var(--fg-faint); margin: 2px 0 12px; }
.plot { display: flex; align-items: flex-end; gap: 2px; height: 74px; }
.plot .bar { flex: 1; background: #3987e5; border-radius: 4px 4px 0 0; min-height: 2px; }
.plot .bar:hover { filter: brightness(1.35); }
.plot .bar.peak { background: #5aa0f0; }
.facet .axis { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--fg-faint);
               margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }

.tenant-card { display: flex; gap: 15px; align-items: flex-start; padding: 16px 17px; }
.tenant-card dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 9px 0 0; font-size: 13px; align-items: baseline; }
.tenant-card dt { color: var(--fg-faint); font: 11.5px var(--mono); white-space: nowrap; }
.tenant-card dd { margin: 0; }

/* ---- link payload: a card with a real target, not a line of text ---- */
.link-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid rgba(255, 182, 72, .3); background: linear-gradient(140deg, rgba(255, 182, 72, .12), transparent 70%);
  text-decoration: none; color: inherit; min-height: 44px;
}
.link-card:hover { border-color: rgba(255, 182, 72, .5); text-decoration: none; }
.link-host { font: 700 13.5px var(--sans); color: var(--fg); flex: none; }
.link-path { font: 12px var(--mono); color: var(--fg-faint); flex: 1; min-width: 0; }
.link-open { font: 650 12.5px var(--sans); color: #ffd089; flex: none; }

/* ---- command palette ---- */
.palette-back {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center;
  padding: 12vh 20px 20px; background: rgba(4, 6, 11, .66); backdrop-filter: blur(4px);
}
.palette {
  width: 100%; max-width: 560px; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 27, 38, .98), rgba(12, 15, 22, .99));
  box-shadow: var(--lift); display: flex; flex-direction: column; max-height: 70dvh;
}
.palette-input {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  padding: 17px 19px; font-size: 16px; width: 100%;
}
.palette-input:focus { outline: none; border-color: var(--line); }
.palette-list { overflow-y: auto; padding: 8px; flex: 1; }
.palette-group {
  font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); padding: 11px 11px 6px;
}
.palette-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px 11px;
  font-weight: 500;
}
.palette-item.on {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .2), rgba(167, 139, 250, .06));
  border-color: rgba(var(--accent-rgb), .36);
}
.palette-item:hover:not(:disabled) { transform: none; }
.palette-item-hint { font: 11.5px var(--mono); color: var(--fg-faint); max-width: 45%; }
.palette-empty { padding: 22px 12px; text-align: center; color: var(--fg-faint); font-size: 13.5px; }
.palette-hint {
  display: flex; gap: 16px; padding: 10px 19px; border-top: 1px solid var(--line);
  font: 11px var(--mono); color: var(--fg-faint);
}
@media (max-width: 760px) { .palette-back { padding-top: 6vh; } }



/* ---- light theme: flat selectors, because relaxed CSS nesting is too
   new to depend on in a tool people open on whatever browser is to hand ---- */
:root[data-theme="light"] body { background: radial-gradient(1100px 580px at 10% -12%, rgba(var(--accent-rgb), .13), transparent 62%), radial-gradient(900px 480px at 90% -6%, rgba(167, 139, 250, .1), transparent 58%), var(--bg); }
:root[data-theme="light"] body::after { opacity: .018; }
:root[data-theme="light"] button { background: rgba(10, 20, 45, .05); }
:root[data-theme="light"] button:hover:not(:disabled) { background: rgba(10, 20, 45, .09); }
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #fff; }
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62)); }
:root[data-theme="light"] .sidebar, :root[data-theme="light"] .rail { background: linear-gradient(180deg, rgba(10, 20, 45, .022), transparent); }
:root[data-theme="light"] .bubble pre { color: #16203a; }
:root[data-theme="light"] .modal, :root[data-theme="light"] .palette { background: linear-gradient(180deg, #fff, #f7f9fd); }
:root[data-theme="light"] .palette-back { background: rgba(20, 28, 48, .4); }
:root[data-theme="light"] .paircode { color: #0d1526; }
:root[data-theme="light"] .toast { background: #fff; color: var(--fg); }
:root[data-theme="light"] .badge-good { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .3); }
:root[data-theme="light"] .badge-warn { color: #7d5200; background: rgba(154, 100, 0, .12); border-color: rgba(154, 100, 0, .3); }
:root[data-theme="light"] .badge-bad { color: #9c2b25; background: rgba(192, 54, 47, .12); border-color: rgba(192, 54, 47, .3); }
:root[data-theme="light"] .badge-admin, :root[data-theme="light"] .badge-secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .3); }
:root[data-theme="light"] .lvl-good { color: #0a6e30; }
:root[data-theme="light"] .lvl-warning { color: #7d5200; }
:root[data-theme="light"] .lvl-serious { color: #9c4a21; }
:root[data-theme="light"] .lvl-critical { color: #9c2b25; }
:root[data-theme="light"] .finding-ic.good { background: rgba(10, 143, 60, .1); color: #0a6e30; border-color: rgba(10, 143, 60, .25); }
:root[data-theme="light"] .finding-ic.warning { background: rgba(154, 100, 0, .1); color: #7d5200; border-color: rgba(154, 100, 0, .25); }
:root[data-theme="light"] .finding-ic.serious { background: rgba(156, 74, 33, .1); color: #9c4a21; border-color: rgba(156, 74, 33, .25); }
:root[data-theme="light"] .finding-ic.critical { background: rgba(192, 54, 47, .1); color: #9c2b25; border-color: rgba(192, 54, 47, .25); }
:root[data-theme="light"] .snippet-ic { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .26); }
:root[data-theme="light"] .snippet-ic.secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .26); }
:root[data-theme="light"] .resource-ic { color: var(--accent-ink); }
:root[data-theme="light"] .link-host { color: var(--fg); }
:root[data-theme="light"] .link-open { color: #7d5200; }
:root[data-theme="light"] .device-av i { border-color: #fff; }
:root[data-theme="light"] tbody tr:hover td { background: rgba(10, 20, 45, .03); }
:root[data-theme="light"] td { border-bottom-color: rgba(10, 20, 45, .07); }
:root[data-theme="light"] a { color: var(--accent-ink); }
:root[data-theme="light"] .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-ink)); border-color: var(--accent-ink); }
:root[data-theme="light"] .paircode-label { color: var(--accent-ink); }
:root[data-theme="light"] .tab.active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
:root[data-theme="light"] .subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent-ink); }
:root[data-theme="light"] .resource b, :root[data-theme="light"] .snippet b, :root[data-theme="light"] .device-name { color: var(--fg); }
:root[data-theme="light"] .qr { box-shadow: 0 16px 34px -22px rgba(10, 20, 45, .5); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body { background: radial-gradient(1100px 580px at 10% -12%, rgba(var(--accent-rgb), .13), transparent 62%), radial-gradient(900px 480px at 90% -6%, rgba(167, 139, 250, .1), transparent 58%), var(--bg); }
  :root:not([data-theme="dark"]) body::after { opacity: .018; }
  :root:not([data-theme="dark"]) button { background: rgba(10, 20, 45, .05); }
  :root:not([data-theme="dark"]) button:hover:not(:disabled) { background: rgba(10, 20, 45, .09); }
  :root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) textarea, :root:not([data-theme="dark"]) select { background: #fff; }
  :root:not([data-theme="dark"]) .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62)); }
  :root:not([data-theme="dark"]) .sidebar, :root:not([data-theme="dark"]) .rail { background: linear-gradient(180deg, rgba(10, 20, 45, .022), transparent); }
  :root:not([data-theme="dark"]) .bubble pre { color: #16203a; }
  :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .palette { background: linear-gradient(180deg, #fff, #f7f9fd); }
  :root:not([data-theme="dark"]) .palette-back { background: rgba(20, 28, 48, .4); }
  :root:not([data-theme="dark"]) .paircode { color: #0d1526; }
  :root:not([data-theme="dark"]) .toast { background: #fff; color: var(--fg); }
  :root:not([data-theme="dark"]) .badge-good { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .3); }
  :root:not([data-theme="dark"]) .badge-warn { color: #7d5200; background: rgba(154, 100, 0, .12); border-color: rgba(154, 100, 0, .3); }
  :root:not([data-theme="dark"]) .badge-bad { color: #9c2b25; background: rgba(192, 54, 47, .12); border-color: rgba(192, 54, 47, .3); }
  :root:not([data-theme="dark"]) .badge-admin, :root:not([data-theme="dark"]) .badge-secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .3); }
  :root:not([data-theme="dark"]) .lvl-good { color: #0a6e30; }
  :root:not([data-theme="dark"]) .lvl-warning { color: #7d5200; }
  :root:not([data-theme="dark"]) .lvl-serious { color: #9c4a21; }
  :root:not([data-theme="dark"]) .lvl-critical { color: #9c2b25; }
  :root:not([data-theme="dark"]) .finding-ic.good { background: rgba(10, 143, 60, .1); color: #0a6e30; border-color: rgba(10, 143, 60, .25); }
  :root:not([data-theme="dark"]) .finding-ic.warning { background: rgba(154, 100, 0, .1); color: #7d5200; border-color: rgba(154, 100, 0, .25); }
  :root:not([data-theme="dark"]) .finding-ic.serious { background: rgba(156, 74, 33, .1); color: #9c4a21; border-color: rgba(156, 74, 33, .25); }
  :root:not([data-theme="dark"]) .finding-ic.critical { background: rgba(192, 54, 47, .1); color: #9c2b25; border-color: rgba(192, 54, 47, .25); }
  :root:not([data-theme="dark"]) .snippet-ic { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .26); }
  :root:not([data-theme="dark"]) .snippet-ic.secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .26); }
  :root:not([data-theme="dark"]) .resource-ic { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .link-host { color: var(--fg); }
  :root:not([data-theme="dark"]) .link-open { color: #7d5200; }
  :root:not([data-theme="dark"]) .device-av i { border-color: #fff; }
  :root:not([data-theme="dark"]) tbody tr:hover td { background: rgba(10, 20, 45, .03); }
  :root:not([data-theme="dark"]) td { border-bottom-color: rgba(10, 20, 45, .07); }
  :root:not([data-theme="dark"]) a { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-ink)); border-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .paircode-label { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .tab.active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .resource b, :root:not([data-theme="dark"]) .snippet b, :root:not([data-theme="dark"]) .device-name { color: var(--fg); }
  :root:not([data-theme="dark"]) .qr { box-shadow: 0 16px 34px -22px rgba(10, 20, 45, .5); }
}

/* ---- brand wordmark ----
   Self-hosted rather than fetched from Google: the CSP stays 'self' only, and
   no visitor's address is handed to a third party just to draw a logo.
   One variable file covers the whole weight range. */
@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.brand-logo { width: 28px; height: 28px; border-radius: 0; object-fit: contain; flex: none; display: block; }
.brand-name { white-space: nowrap; }
/* A tenant that ships a wordmark gets its own face and spacing. */
.brand-wordmark {
  font-family: 'Brand Sans', var(--sans);
  font-weight: 400;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.brand-wordmark strong { font-weight: 700; }
.center-card .brand-logo, .brand.t18 .brand-logo { width: 40px; height: 40px; }

/* ---- co-brand lockup ----
   Tenant first, product second. The hairline is what keeps them from reading
   as two companies sharing a title bar: it gives the eye a stop, so the second
   half is understood as a label rather than another owner. The mark inherits
   var(--accent), so it is always drawn in the tenant's own colour. */
.brand.co { gap: 10px; }
.co-rule { width: 1px; height: 17px; background: var(--line-2); flex: none; }
.co-product { display: flex; align-items: center; gap: 6px; color: var(--accent); flex: none; }
.co-mark { width: 15px; height: 15px; display: block; flex: none; }
.co-mark path {
  fill: none; stroke: currentColor; stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
}
.co-name { font-size: 12px; font-weight: 600; color: var(--fg-dim); white-space: nowrap; }
/* The cards have room, so everything steps up with the tenant logo. */
.center-card .co-rule, .brand.t18 .co-rule { height: 24px; }
.center-card .co-mark, .brand.t18 .co-mark { width: 19px; height: 19px; }
.center-card .co-name, .brand.t18 .co-name { font-size: 13px; }

/* ---- wide tenant logos ----
   A horizontal lockup already spells the company name, so it replaces the
   text wordmark and keeps its own aspect instead of being squeezed square.
   max-width is the safety net: a very long lockup must not push the rest of
   the topbar onto a second row. */
.brand-logo.wide { width: auto; height: 26px; max-width: 190px; }
.center-card .brand-logo.wide, .brand.t18 .brand-logo.wide { width: auto; height: 38px; max-width: 260px; }

/* Both variants ship in the markup because the theme can be the operating
   system's choice, which the server never sees. Default to the dark-surface
   artwork and swap only where the page is actually light. */
.brand-logo.for-light { display: none; }
:root[data-theme="light"] .brand-logo.for-light { display: block; }
:root[data-theme="light"] .brand-logo.for-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo.for-light { display: block; }
  :root:not([data-theme="dark"]) .brand-logo.for-dark { display: none; }
}

.center-card .brand-wordmark, .brand.t18 .brand-wordmark { font-size: 1.5rem; }
.center-card .brand, .brand.t18 { gap: 12px; }
.topbar .brand-wordmark { font-size: 1.05rem; }