/* ============================================================
   qlaas DMI — owner app, door and helper pages.
   One design system with qlaas.co.uk and the qlaas console: tokens, the qlaas curve,
   flat frosted glass, Sora for language and Inter Tight for data. Ported from
   UIE-founder/qlaas (web/src/styles/tokens.css, glass.css, app/src/styles/console.css).
   Nothing here introduces a new colour, typeface, radius or shadow.
   ============================================================ */
@font-face { font-family: Sora; src: url(/static/sora.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(/static/inter-tight.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper:#F4F3EF; --stone:#E4E2DC; --ash:#A3A19B; --graphite:#5A5853; --slate:#2B2A28; --ink:#121211; --ink-2:#1B1B19;
  --brass:#B09260; --brass-deep:#7A6236; --signal:#B0583F; --signal-deep:#8E3F2B; --lichen:#7F9078; --lichen-deep:#56654F; --steel:#71808C;
  --font-sans: Sora, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-data: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --t-display: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --t-body: 1rem; --t-small: .875rem; --t-cap: .6875rem;
  --margin: clamp(1.25rem, 5vw, 5rem);
  --gutter: clamp(1.25rem, 2.2vw, 2rem);
  --pad-pane: clamp(1.5rem, 3.2vw, 3rem);
  --content: 1280px;
  --q-shape: superellipse(1.25);
  --r-loop: 999px; --r-pane: clamp(28px, 3.4vw, 48px); --r-card: 28px;
  --blur: blur(26px) saturate(0) brightness(1.04);
  --glass-dark: rgb(18 18 17 / .72); --glass-dark-2: rgb(18 18 17 / .86);
  --glass-light: rgb(244 243 239 / .14); --glass-light-2: rgb(244 243 239 / .22);
  --tint-on-light: rgb(18 18 17 / .06); --tint-on-light-2: rgb(18 18 17 / .12);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* light ground (the console's stone body with paper panes) */
  --bg: var(--stone); --bg-pane: var(--paper); --fg: var(--ink); --fg-muted: #5E5C57;
  --rule: rgb(18 18 17 / .14); --field: rgb(18 18 17 / .5); --focus: var(--ink);
  --accent: var(--brass-deep); --allow: var(--lichen-deep); --stepup: var(--brass-deep); --deny: var(--signal-deep); --info: var(--steel);
  --tint: var(--tint-on-light); --tint-2: var(--tint-on-light-2);
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-hov: var(--slate);
  --btn2-bg: var(--tint-on-light); --btn2-fg: var(--ink); --btn2-hov: var(--tint-on-light-2);
  color-scheme: light;
}
/* dark heads (page openings) and the dark theme share one set of values */
.dark, :root[data-theme="dark"] {
  --bg: var(--ink); --bg-pane: var(--ink-2); --fg: var(--paper); --fg-muted: #A9A7A1;
  --rule: rgb(244 243 239 / .16); --field: rgb(244 243 239 / .45); --focus: var(--paper);
  --accent: var(--brass); --allow: var(--lichen); --stepup: var(--brass); --deny: var(--signal); --info: var(--steel);
  --tint: var(--glass-light); --tint-2: var(--glass-light-2);
  --btn-bg: rgb(244 243 239 / .92); --btn-fg: var(--ink); --btn-hov: var(--paper);
  --btn2-bg: var(--glass-light); --btn2-fg: var(--paper); --btn2-hov: var(--glass-light-2);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink); --bg-pane: var(--ink-2); --fg: var(--paper); --fg-muted: #A9A7A1;
    --rule: rgb(244 243 239 / .16); --field: rgb(244 243 239 / .45); --focus: var(--paper);
    --accent: var(--brass); --allow: var(--lichen); --stepup: var(--brass); --deny: var(--signal);
    --tint: var(--glass-light); --tint-2: var(--glass-light-2);
    --btn-bg: rgb(244 243 239 / .92); --btn-fg: var(--ink); --btn-hov: var(--paper);
    --btn2-bg: var(--glass-light); --btn2-fg: var(--paper); --btn2-hov: var(--glass-light-2);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); font-weight: 300; line-height: 1.65; letter-spacing: .003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg, video { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
pre, code, kbd, samp, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.mono { font-size: .8125rem; font-weight: 350; word-break: break-all; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .875rem; color: var(--fg); text-decoration: none; }
.wordmark { display: inline-block; height: 22px; background: currentColor; aspect-ratio: 470.9 / 182;
  -webkit-mask: url(/static/brand/qlaas-wordmark.svg) no-repeat left center / contain; mask: url(/static/brand/qlaas-wordmark.svg) no-repeat left center / contain; }
.brand .os { font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- Type ---------- */
h1, .t-h1 { font-size: var(--t-display); font-weight: 250; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
h2 { font-size: var(--t-h3); font-weight: 300; line-height: 1.28; letter-spacing: -.02em; margin: 0 0 1.25rem; }
.eyebrow, .label { display: flex; align-items: center; gap: 1rem; width: max-content; max-width: 100%; margin: 0 0 1.5rem;
  font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; color: var(--fg-muted); }
.eyebrow::before, .label::before { content: ""; width: 1.5rem; height: 1px; background: var(--accent); flex: none; }
.sub { color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.6; max-width: 38rem; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--t-small); line-height: 1.6; }
.cap { font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- Fields: the website's underline input ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  width: 100%; min-height: 48px; padding: .25rem 0 .75rem; border: 0; border-bottom: 1px solid var(--field); border-radius: 0; background: transparent;
  font: 300 var(--t-body)/1.5 var(--font-sans); color: var(--fg); -webkit-appearance: none; appearance: none; transition: border-color .4s var(--ease-soft); }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--fg); padding-bottom: calc(.75rem - 1px); }
input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
input[aria-invalid="true"] { border-bottom: 2px solid var(--deny) !important; }
textarea { min-height: 6.5rem; resize: vertical; }
select { padding-right: 1.75rem; cursor: pointer; background: no-repeat right 2px top 45% / 12px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237F7D77' stroke-width='1.2'/%3E%3C/svg%3E"); }
select option { color: var(--ink); background: var(--paper); }
::placeholder { color: var(--ash); opacity: 1; }
input[type=time], input[inputmode=numeric], input[type=tel] { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border-radius: 7px; corner-shape: var(--q-shape); background: var(--tint-2); vertical-align: middle; transition: background-color .3s var(--ease-soft); }
input[type=radio] { border-radius: 999px; }
input[type=checkbox]:checked { background: var(--fg) no-repeat center / 12px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23F4F3EF' stroke-width='1.5'/%3E%3C/svg%3E"); }
.dark input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23121211' stroke-width='1.5'/%3E%3C/svg%3E"); }
input[type=radio]:checked { background: var(--fg); box-shadow: inset 0 0 0 7px var(--fg), inset 0 0 0 11px var(--bg-pane); }
.field { display: grid; gap: .625rem; margin: 0 0 2rem; }
.field > label, .policy-grid > label, .conds legend { font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; color: var(--fg-muted); }
.field > label.check { display: flex; align-items: center; gap: .75rem; font-size: var(--t-small); font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--fg); }
.field > label .muted { letter-spacing: .08em; text-transform: none; }
.prefix { display: flex; align-items: baseline; gap: .25rem; border-bottom: 1px solid var(--field); }
.prefix:focus-within { border-bottom: 2px solid var(--fg); }
.prefix span { color: var(--fg-muted); }
.prefix input { border: 0 !important; padding-bottom: .75rem !important; }

/* ---------- Buttons: loops ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; padding: 0 1.75rem;
  border: 0; border-radius: var(--r-loop); corner-shape: var(--q-shape); background: var(--btn2-bg); color: var(--btn2-fg);
  font: 500 var(--t-cap)/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft); }
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--btn2-hov); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { background: var(--btn-hov); }
.btn.ghost { background: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--tint); }
.btn.bad { background: transparent; color: var(--deny); }
.btn.bad:hover:not(:disabled) { background: var(--tint); }
.btn.good { background: var(--allow); color: var(--paper); }
.btn.sm { min-height: 44px; padding: 0 1.25rem; }
.btn.lg { min-height: 56px; padding: 0 2.25rem; }
.btn.block { width: 100%; }

/* ---------- Chips, pills, tags: small loops ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: var(--r-loop); corner-shape: var(--q-shape);
  background: var(--tint); color: var(--fg); font: 400 var(--t-small)/1 var(--font-sans); transition: background-color .4s var(--ease-soft); }
.chip:hover { background: var(--tint-2); }
.pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 28px; padding: 0 .9rem; border-radius: var(--r-loop); corner-shape: var(--q-shape);
  background: var(--tint); color: var(--fg-muted); font: 500 .625rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.pill.good, .pill.vip { color: var(--allow); }
.pill.warn { color: var(--stepup); }
.pill.bad { color: var(--deny); }
.pill.info, .pill.agent { color: var(--info); }
.plat { margin-left: .5rem; font: 500 .625rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; corner-shape: var(--q-shape); background: var(--ash); }
.dot.on { background: var(--allow); }

/* ---------- Layout ---------- */
.wrapx { width: 100%; max-width: calc(var(--content) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.row { display: flex; align-items: center; gap: .75rem; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 1rem; }

/* page opening: a quiet dark head band (the console's page head) */
.head { background: var(--ink); color: var(--paper); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 80px; flex-wrap: wrap; padding-block: .75rem; }
.top-meta { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; font-size: var(--t-small); color: var(--fg-muted); }
.top-meta .live { display: inline-flex; align-items: center; gap: .5rem; margin-right: .5rem; }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { margin-bottom: 1.25rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.door { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .375rem .375rem .375rem 1.5rem; border-radius: var(--r-loop); corner-shape: var(--q-shape); background: var(--tint); max-width: 100%;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.door code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 350; }
.door input { border: 0 !important; min-height: 44px !important; padding: 0 !important; }

/* body: stone ground, paper panes */
.body { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4rem, 7vw, 6rem); }
.grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: start; }
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
.card { position: relative; background: var(--bg-pane); border-radius: var(--r-pane); corner-shape: var(--q-shape); padding: var(--pad-pane); min-width: 0; }
.card + .card, .grid > div > section + section, aside > section + section { margin-top: var(--gutter); }
.card h2 { margin-bottom: 1.5rem; }
.status-card { margin-bottom: var(--gutter); }

/* hairline lists */
.list, .checks { list-style: none; margin: 0; padding: 0; }
.list li { padding: .875rem 0; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list:empty::after { content: "Nothing yet."; display: block; padding: .875rem 0; border-top: 1px solid var(--rule); color: var(--fg-muted); font-size: var(--t-small); }
details summary { cursor: pointer; color: var(--fg-muted); font-size: var(--t-small); min-height: 44px; display: flex; align-items: center; }
details[open] > summary { margin-bottom: 1rem; }
.matrix { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: .8125rem; font-weight: 350; }
.matrix th, .matrix td { text-align: left; padding: .625rem .5rem; border-top: 1px solid var(--rule); vertical-align: top; }
.matrix th { color: var(--fg-muted); font: 500 var(--t-cap)/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.t-native, .t-line { color: var(--allow); } .t-user-client, .t-link { color: var(--stepup); } .t-deflect { color: var(--info); } .t-none { color: var(--deny); }
.table-scroll { overflow-x: auto; }

/* "Everything OK?" */
.checks li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .25rem 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.checks li:last-child { border-bottom: 1px solid var(--rule); }
.checks .sdot { width: 10px; height: 10px; margin-top: .45rem; border-radius: 3px; corner-shape: var(--q-shape); background: var(--ash); }
.checks li[data-state="ok"] .sdot { background: var(--allow); }
.checks li[data-state="warn"] .sdot { background: var(--stepup); }
.checks li[data-state="bad"] .sdot { background: var(--deny); }
.checks .what b { font-weight: 400; }
.checks .what .detail { color: var(--fg-muted); }
.checks .fix { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; color: var(--fg-muted); font-size: .8125rem; }
#status-note { margin-top: 1rem; }
#status-note:empty { display: none; }

/* inbox and threads */
.convo { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); cursor: pointer; }
.convo:last-child { border-bottom: 1px solid var(--rule); }
.convo:hover .name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px; corner-shape: var(--q-shape); background: var(--tint); font: 400 .8125rem/1 var(--font-data); letter-spacing: .04em; }
.convo .body { min-width: 0; flex: 1; padding: 0; }
.convo .name { font-weight: 400; font-size: .9375rem; }
.convo .last { color: var(--fg-muted); font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inbox:empty::after { content: "No contact yet. When someone writes to your link, or an agent reaches your line, it appears here."; display: block; padding: 1rem 0; border-top: 1px solid var(--rule); color: var(--fg-muted); font-size: var(--t-small); }
.thread { display: flex; flex-direction: column; gap: .5rem; max-height: 360px; overflow: auto; margin: 1rem 0; }
.bubble { max-width: 82%; padding: .75rem 1.125rem; border-radius: 20px; corner-shape: var(--q-shape); background: var(--tint); font-size: .9375rem; }
.bubble.out { align-self: flex-end; background: var(--fg); color: var(--bg-pane); }
.bubble .meta { display: block; margin-top: .25rem; font: 350 .6875rem/1.4 var(--font-data); opacity: .7; }
.bubble .vm { margin: .5rem 0 .25rem; } .bubble .vm audio { width: 100%; max-width: 280px; }
#thread-reply { align-items: flex-end; }
#thread-reply select { width: auto; flex: none; }

/* live contact */
.ring { background: var(--ink); color: var(--paper); }
.ring .who { font-size: var(--t-h2); font-weight: 250; letter-spacing: -.035em; line-height: 1.1; }
.why { margin: 1rem 0 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--fg-muted); }
.why li { padding-left: 1.25rem; position: relative; }
.why li::before { content: ""; position: absolute; left: 0; top: .8em; width: .75rem; height: 1px; background: var(--accent); }
.pickups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: 1.5rem; }
.pickup { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-height: 64px; padding: .875rem 1.25rem; text-align: left; border: 0; border-radius: 22px; corner-shape: var(--q-shape); background: var(--tint); color: inherit; }
.pickup:hover:not(:disabled) { background: var(--tint-2); }
.pickup b { font-weight: 400; font-size: .9375rem; }
.pickup span { font-size: .75rem; color: var(--fg-muted); line-height: 1.4; }
.pickup.primary { background: var(--btn-bg); color: var(--btn-fg); }
.pickup.primary span { color: inherit; opacity: .7; }
.transcript { display: flex; flex-direction: column; gap: .5rem; max-height: 300px; overflow: auto; margin-top: 1.25rem; }
.turn { max-width: 88%; padding: .75rem 1.125rem; border-radius: 20px; corner-shape: var(--q-shape); background: var(--tint); font-size: .9375rem; }
.turn.caller { align-self: flex-end; background: var(--tint-2); }
.turn.system { align-self: center; background: transparent; color: var(--fg-muted); font-size: .8125rem; padding: .25rem; }
.turn .spk { display: block; margin-bottom: .25rem; font-size: .625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.security { margin: .5rem 0; font-size: var(--t-small); } .security .sec { margin: .125rem 0; } .security .sec.failed { color: var(--deny); }
.security .sas { font-family: var(--font-data); font-size: 1.0625rem; letter-spacing: .12em; }

/* contact policy */
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem var(--gutter); }
.policy-grid > label { display: grid; gap: .625rem; }
.policy-grid > label.inline { display: flex; align-items: center; gap: .75rem; font-size: var(--t-small); font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--fg); }
.policy-grid .span { grid-column: 1 / -1; }
.policy-grid input, .policy-grid select, .policy-grid textarea { font-size: var(--t-small); }
@media (max-width: 560px) { .policy-grid { grid-template-columns: 1fr; } }

/* results, notices */
.result, .notice { padding: 1.125rem 1.5rem; border-radius: var(--r-card); corner-shape: var(--q-shape); background: var(--tint); font-size: var(--t-small); line-height: 1.6; margin-top: 1rem; }
.result.ok { color: var(--allow); } .result.bad { color: var(--deny); } .result.busy { color: var(--fg-muted); }
.result details { color: var(--fg-muted); font-size: .8125rem; margin-top: .5rem; }
.error { color: var(--deny); font-size: var(--t-small); margin: .25rem 0 0; }
.error:empty { display: none; }
.managed { font-size: .8125rem; color: var(--info); }
.hint { font-size: var(--t-small); color: var(--fg-muted); margin: 1rem 0; min-height: 1em; }
.status:empty { display: none; }
.status { margin-top: 1rem; min-height: 1.5rem; font-size: var(--t-small); color: var(--fg-muted); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; align-content: center; background: var(--ink); color: var(--paper); }
.login .inner { width: 100%; max-width: 30rem; margin-inline: auto; padding: 2rem var(--margin); }
.login h1 { font-size: var(--t-h2); margin: 2.5rem 0 1rem; }
.login .sub { font-size: var(--t-body); margin-bottom: 2.5rem; }
.login form { gap: 1.5rem; }

/* ---------- Setup and Settings: one screen per step ---------- */
body.setup-open #main { display: none; }
.setup { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.setup-inner { max-width: 44rem; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) var(--margin) max(3rem, env(safe-area-inset-bottom)); }
.setup-top { display: flex; align-items: center; justify-content: space-between; min-height: 80px; margin-bottom: 2rem; }
.setup .step { background: var(--bg-pane); border-radius: var(--r-pane); corner-shape: var(--q-shape); padding: var(--pad-pane); }
.step-title { font-size: var(--t-h2); font-weight: 250; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 1rem; outline: none; text-wrap: balance; }
.step .sub { font-size: var(--t-body); margin-bottom: 2.5rem; }
.step-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2.5rem; }
@media (max-width: 520px) { .step-actions .btn { flex: 1 1 100%; } }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.tabs button { min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: var(--r-loop); corner-shape: var(--q-shape); background: var(--tint); font: 400 var(--t-small)/1 var(--font-sans); }
.tabs button[aria-current="step"] { background: var(--fg); color: var(--bg); }
.tabs .sep { flex-basis: 100%; height: 0; }
.tabs .sub { display: none; }
@media (max-width: 640px) {
  /* one scrolling row on phones instead of four wrapped rows */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding: 0 var(--margin); scroll-padding-inline: var(--margin); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; }
}
a[data-url] { overflow-wrap: anywhere; }
.door-card h1 + .sub { margin-top: 1rem; }
#np-section h3 { font-size: var(--t-cap); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); margin: 2.5rem 0 0; }
.option-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.option-card:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.option-card strong { font-weight: 400; }
.option-card p { margin: .25rem 0 0; max-width: 28rem; }
.providers { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.provider { position: relative; display: flex; flex-direction: column; gap: .25rem; min-height: 72px; padding: 1rem 1.25rem; border-radius: 22px; corner-shape: var(--q-shape); background: var(--tint); cursor: pointer; }
.provider input { position: absolute; opacity: 0; pointer-events: none; }
.provider b { font-weight: 400; }
.provider span { font-size: .75rem; color: var(--fg-muted); }
.provider:has(input:checked) { background: var(--fg); color: var(--bg-pane); }
.provider:has(input:checked) span { color: inherit; opacity: .7; }
.provider:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
details.bring { margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.bring summary { color: var(--fg); font-size: var(--t-small); }
.conds { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.conds label { display: flex; align-items: center; gap: .75rem; font-size: var(--t-small); }
.codes { display: grid; gap: .5rem; margin: 1rem 0; }
.codes .code-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: center; padding: 1rem 1.25rem; border-radius: 22px; corner-shape: var(--q-shape); background: var(--tint); }
.codes .code-row b { font-weight: 400; font-size: var(--t-small); grid-column: 1 / -1; }
.codes code { font-size: 1rem; word-break: break-all; }
.codes .small { grid-column: 1 / -1; }

/* ---------- Door (the page people and agents reach) ---------- */
.door-head { background: var(--ink); color: var(--paper); }
.door-head .top { min-height: 72px; }
.door-intro { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); max-width: 40rem; }
.door-intro h1 { margin-bottom: 1rem; }
.door-page { width: 100%; max-width: calc(40rem + 2 * var(--margin)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--margin) 4rem; }
.door-card { background: var(--bg-pane); border-radius: var(--r-pane); corner-shape: var(--q-shape); padding: var(--pad-pane); }
.door-card + .door-card { margin-top: var(--gutter); }
.door-card .stack { gap: 1.75rem; }
.door-card .field { margin: 0; }
.big-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; }
.big-actions .btn { flex: 1 1 180px; min-height: 56px; }
.secondary { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.secondary p { margin: 0 0 .5rem; }
body[data-mode="full"] .secondary { border-top: 0; padding-top: 0; }
body[data-mode="message_first"] .full-only { display: none !important; }
#request-call-wrap { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: .5rem; gap: 1.25rem; }
#request-call-wrap label.small { display: flex; align-items: center; gap: .75rem; }
.video-wrap { position: relative; margin-top: 1.5rem; border-radius: 28px; corner-shape: var(--q-shape); overflow: hidden; background: var(--ink-2); aspect-ratio: 16 / 10; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.video-wrap video.self { position: absolute; right: 12px; bottom: 12px; width: 28%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; corner-shape: var(--q-shape); }
.foot { margin-top: 2.5rem; font-size: .8125rem; line-height: 1.6; color: var(--fg-muted); }
.foot a { color: var(--fg-muted); }

/* lab */
.door-page > .brand { margin-bottom: 1.5rem; }
.door-card .sub + .field { margin-top: 1.75rem; }
.door-card .field + .big-actions { margin-top: 1.25rem; }
.door-card details { margin-top: 1rem; }
.meter { height: 6px; border-radius: 999px; background: var(--tint); overflow: hidden; margin-top: .5rem; }
.meter span { display: block; height: 100%; width: 0; background: var(--fg); transition: width .08s; }
#results li[data-ok="false"] strong { color: var(--deny); }
#results li[data-ok="true"] strong { color: var(--allow); }

@media (max-width: 640px) {
  .top-meta .btn.ghost { display: none; }
  .door { width: 100%; }
}
@media (prefers-reduced-transparency: reduce) { .btn, .door { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* devices: start — Devices settings tab (web/static/devices.js) */
.pair-box { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gutter); margin: 1rem 0 1.5rem; }
.pair-box img { width: 232px; height: 232px; border-radius: 16px; background: #fff; }
.pair-code { font-size: 1.75rem; letter-spacing: .12em; margin: 0 0 .5rem; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.device-row p { margin: .25rem 0 0; }
/* devices: end */

/* utilities (CSP forbids inline style attributes) */
.mt-1 { margin-top: 1rem; } .mt-15 { margin-top: 1.5rem; } .mt-2 { margin-top: 2rem; } .mb-1 { margin-bottom: 1rem; }
.claim-code { margin: .75rem 0; font: 300 2rem/1.1 var(--font-data); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#channels-deflect, #agent-note { margin-top: var(--gutter); }