/* V.E.Y.R hosted home: the customer's web console (hosted_web.py serves it).
   The look (owner 2026-10-13: "minimalistic yet premium", "take examples from Apple and Starlink", "rework all pages"):
   one calm surface per group and nothing inside it but rows (Apple settings' grouped lists), a large confident page
   title over quiet secondary text, hierarchy by type and spacing instead of boxes and borders, one accent (blue) and
   status colors only where a state is meant, an 8 px rhythm, Home's one big calm state on top (Starlink), details and
   rarely used actions behind a quiet disclosure or a More menu. Dark and light follow the system. System fonts only;
   nothing loads from anywhere but this home. Phones first: most customers open it on one. */
:root {
  color-scheme: dark;
  --bg: #08090a; --bg-auth: #08090a; --group: #161618; --group-hi: #202023; --raised: #1c1c1f;
  --fill: rgb(118 118 128 / .22); --fill-hi: rgb(118 118 128 / .32); --sep: rgb(255 255 255 / .085);
  --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8a8a8f;
  --accent: #0a84ff; --accent-fill: #0b6bdc; --accent-fill-hi: #1a78e6; --accent-text: #4aa3ff; --accent-tint: rgb(10 132 255 / .16);
  --ok: #30d158; --ok-text: #4cd474; --ok-tint: rgb(48 209 88 / .15); --ok-fill: #1f7a37;
  --warn: #ff9f0a; --warn-text: #ffb340; --warn-tint: rgb(255 159 10 / .15);
  --fail: #ff453a; --fail-text: #ff6961; --fail-tint: rgb(255 69 58 / .15);
  --off: #636366;
  --input-bg: rgb(255 255 255 / .05); --input-line: #5f5f63;
  --shadow: 0 24px 64px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4);
  --scrim: rgb(0 0 0 / .55); --bar: rgb(8 9 10 / .82);
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r-group: 16px; --r-ctl: 12px; --r-cap: 999px;
  --ctl-h: 44px; --ctl-h-sm: 32px;
  --ease: cubic-bezier(.22, 1, .36, 1); --dur: 200ms;
  --rail-w: 272px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f2f2f7; --bg-auth: #ffffff; --group: #ffffff; --group-hi: #f7f7fa; --raised: #ffffff;
    --fill: rgb(118 118 128 / .12); --fill-hi: rgb(118 118 128 / .2); --sep: rgb(60 60 67 / .14);
    --text: #1d1d1f; --text-2: #5d5d62; --text-3: #6e6e73;
    --accent: #0071e3; --accent-fill: #0066cc; --accent-fill-hi: #0077ed; --accent-text: #0062c4; --accent-tint: rgb(0 113 227 / .1);
    --ok: #28a745; --ok-text: #1d7d38; --ok-tint: rgb(40 167 69 / .12); --ok-fill: #1d7d38;
    --warn: #e08600; --warn-text: #a35200; --warn-tint: rgb(224 134 0 / .13);
    --fail: #e0352b; --fail-text: #c4161c; --fail-tint: rgb(224 53 43 / .1);
    --off: #aeaeb2;
    --input-bg: #ffffff; --input-line: #8e8e93;
    --shadow: 0 24px 64px rgb(0 0 0 / .18), 0 2px 8px rgb(0 0 0 / .08);
    --scrim: rgb(0 0 0 / .32); --bar: rgb(242 242 247 / .84);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); background: var(--bg); font: 400 15px/1.5 var(--sans);
  letter-spacing: -.008em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; overflow-x: hidden; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); }
p { margin: 8px 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-tint); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; overflow-wrap: anywhere; }
.muted { color: var(--text-2); }
.small { font-size: 14px; }
.center { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--r-cap); background: var(--raised); color: var(--text); }
.skip:focus { top: 16px; box-shadow: var(--shadow); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -4px; }
.ic.sm { width: 16px; height: 16px; vertical-align: -3px; }
.ic.ok { color: var(--ok); }
.mark { width: 28px; height: 28px; border-radius: 8px; flex: none; display: block; }
.mark.lg { width: 56px; height: 56px; border-radius: 15px; }
.word { font-weight: 650; letter-spacing: .18em; font-size: 13px; }
.view:not([hidden]) { animation: rise .36s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- buttons, links, pills, dots ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0;
  border-radius: var(--r-cap); background: var(--fill); color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background var(--dur) var(--ease), color var(--dur), transform var(--dur) var(--ease), opacity var(--dur); }
.btn:hover { background: var(--fill-hi); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent-fill); color: #fff; }
.btn.primary:hover { background: var(--accent-fill-hi); }
.btn.danger { color: var(--fail-text); }
.btn.danger:hover { background: var(--fail-tint); }
.btn.ghost { background: transparent; color: var(--accent-text); }
.btn.ghost:hover { background: var(--accent-tint); }
.btn.sm { min-height: var(--ctl-h-sm); padding: 0 14px; font-size: 14px; }
.btn.wide { width: 100%; min-height: 48px; border-radius: var(--r-ctl); font-size: 16px; }
.btn.flat { width: 100%; border-radius: 0; background: transparent; color: var(--accent-text); box-shadow: inset 0 1px var(--sep); }
.btn[disabled] { opacity: .4; cursor: default; transform: none; }
.btn.round { width: 36px; min-height: 36px; height: 36px; padding: 0; border-radius: 50%; flex: none; }
.btn.primary.ok { background: var(--ok-fill); color: #fff; }
.btn.primary.ok:hover { background: var(--ok-fill); filter: brightness(1.08); }
.link { border: 0; background: none; padding: 6px 0; color: var(--accent-text); font-weight: 500; font-size: 15px; cursor: pointer; min-height: 32px; }
.link:hover { text-decoration: underline; }
.link.sm { font-size: 14px; padding: 2px 0; min-height: 0; }
.link.inline { padding: 0; min-height: 0; font-size: inherit; font-weight: inherit; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill); color: var(--text); cursor: pointer; flex: none; transition: background var(--dur); }
.iconbtn:hover { background: var(--fill-hi); }
.iconbtn.plain { background: transparent; color: var(--accent-text); }
.iconbtn.plain:hover { background: var(--fill); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; padding: 2px 10px; border-radius: var(--r-cap); white-space: nowrap;
  background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.pill.ok { color: var(--ok-text); background: var(--ok-tint); }
.pill.warn { color: var(--warn-text); background: var(--warn-tint); }
.pill.fail { color: var(--fail-text); background: var(--fail-tint); }
.pill.acc { color: var(--accent-text); background: var(--accent-tint); }
.pill:empty { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--off); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.fail { background: var(--fail); }
.dot.acc { background: var(--accent); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 650; letter-spacing: .02em;
  color: #fff; background: linear-gradient(160deg, #8e8e93, #5e5e63); }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.avatar:empty { display: none; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .flabel { color: var(--text-2); font-size: 14px; font-weight: 500; padding: 0; }
input, select, textarea { width: 100%; min-height: var(--ctl-h); padding: 10px 14px; border: 1px solid var(--input-line); border-radius: var(--r-ctl);
  background: var(--input-bg); color: var(--text); font-size: 16px; transition: border-color var(--dur), box-shadow var(--dur); }
select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input[aria-invalid="true"] { border-color: var(--fail); }
input[disabled], select[disabled] { opacity: .5; }
.code-in { font-family: var(--mono); font-size: 24px; letter-spacing: .4em; text-align: center; min-height: 56px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
legend { margin-bottom: 8px; }
.hint { color: var(--text-3); font-size: 13px; line-height: 1.5; margin: 0; }
.hint.ok { color: var(--ok-text); } .hint.warn { color: var(--warn-text); } .hint.bad { color: var(--fail-text); }
.err { color: var(--fail-text); background: var(--fail-tint); padding: 12px 14px; border-radius: var(--r-ctl); margin: 0; font-size: 14px; }
.note { color: var(--ok-text); background: var(--ok-tint); padding: 12px 14px; border-radius: var(--r-ctl); margin: 16px 0 0; font-size: 14px; }
.note.bad { color: var(--warn-text); background: var(--warn-tint); }
.pw { position: relative; }
.pw input { padding-right: 72px; }
.pw .reveal-pw { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.meter { height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--fail); border-radius: 2px; transition: width var(--dur) var(--ease), background var(--dur); }
.meter i.l2 { background: var(--warn); } .meter i.l3 { background: var(--accent); } .meter i.l4 { background: var(--ok); }
.check { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 500; margin: 24px 0 16px; cursor: pointer; min-height: 32px; }
.check input { width: 22px; min-height: 22px; height: 22px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; gap: 2px; border-radius: 10px; background: var(--fill); }
.seg button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; transition: background var(--dur), box-shadow var(--dur); }
.seg button[aria-checked="true"] { background: var(--raised); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .18), 0 0 0 .5px rgb(0 0 0 / .04); }
@media (prefers-color-scheme: dark) { .seg button[aria-checked="true"] { background: #636366; } }
.choices { gap: 0; border-radius: var(--r-ctl); background: var(--fill); padding: 0; overflow: hidden; }
.choices legend { padding: 0; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; color: var(--text); cursor: pointer; transition: background var(--dur); }
.choice + .choice { box-shadow: inset 0 1px var(--sep); }
.choice:hover { background: var(--fill); }
.choice input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; min-height: 22px; height: 22px; margin: 0; padding: 0;
  border: 1.5px solid var(--input-line); border-radius: 50%; background: transparent; display: grid; place-items: center; }
.choice input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--dur) var(--ease); }
.choice input:checked { border-color: var(--accent); }
.choice input:checked::after { transform: scale(1); }
.choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice b { display: block; font-weight: 500; }
.choice small { display: block; color: var(--text-2); font-size: 14px; margin-top: 2px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btns .btn.primary { margin-left: auto; }

/* a quiet disclosure: options, a long string, a rarely used form */
details.disc > summary, details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 500; font-size: 15px; min-height: 40px; }
details.disc > summary::-webkit-details-marker, details.fold > summary::-webkit-details-marker, details.faq > summary::-webkit-details-marker, details.whatsnew > summary::-webkit-details-marker, details.more-m > summary::-webkit-details-marker { display: none; }
details.disc > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); }
details.disc[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.disc-b { display: grid; gap: 16px; padding-top: 8px; }
/* a disclosure that is a row of a group (Apple settings' "Change your password  >") */
details.row-disc { box-shadow: inset 0 1px var(--sep); }
.group > details.row-disc:first-child { box-shadow: none; }
details.row-disc > summary { min-height: 52px; padding: 12px 16px; color: var(--accent-text); justify-content: space-between; gap: 14px; border-radius: inherit; }
details.row-disc > summary > span:last-of-type { flex: 1; }
details.row-disc > summary:hover { background: var(--fill); }
details.row-disc > summary::after { color: var(--text-3); transform: rotate(-45deg); width: 8px; height: 8px; }
details.row-disc[open] > summary::after { transform: rotate(45deg); }
details.row-disc > .card-b { padding-top: 0; }
details.row-disc > .card-b > .form:first-child { margin-top: 4px; }
details.row-disc .row-ic { color: var(--accent-text); }

/* ---------- signed out: one calm column ---------- */
body.is-auth { background: var(--bg-auth); }
body.is-auth main { max-width: 440px; margin: 0 auto; padding: max(8vh, 32px) 24px 64px; }
.auth-top { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; text-align: center; }
.auth-host { margin: 0; color: var(--text-3); font-size: 14px; overflow-wrap: anywhere; }
.auth-card { padding: 0; }
.auth-card.center { display: grid; place-items: center; min-height: 50vh; }
.auth-card h1 { font-size: 30px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; text-align: center; }
.auth-card > .kicker, .auth-card > .lede { text-align: center; }
.auth-card h1:focus { outline: none; }
.lede { color: var(--text-2); font-size: 16px; margin: 8px 0 0; }
.kicker { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; color: var(--accent-text); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.auth-card .form > .btn.wide { margin-top: 8px; }
.auth-card > .links, .auth-card > .hint, .auth-card .form > .links { margin-top: 24px; }
.auth-card > .hint { text-align: center; }
.first { margin-top: 40px; padding-top: 24px; box-shadow: inset 0 1px var(--sep); }
.first h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.first ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.first li::marker { color: var(--text-3); font-weight: 600; }
.first a { overflow-wrap: anywhere; }
.who-chip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-cap); background: var(--fill); color: var(--text); font-size: 15px; min-width: 0; }
.who-chip span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-chip .link { margin-left: auto; flex: none; }
.dots { display: flex; gap: 6px; margin: 0 auto 24px; padding: 0; list-style: none; max-width: 160px; }
.dots li { flex: 1; height: 4px; border-radius: 2px; background: var(--fill-hi); transition: background var(--dur); }
.dots li.done { background: var(--accent-fill); opacity: .55; }
.dots li[aria-current="step"] { background: var(--accent); }
.totp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 8px; }
.totp img { border-radius: 14px; background: #fff; padding: 10px; display: block; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.steps li::marker { color: var(--text-3); font-weight: 600; }
.steps b { color: var(--text); font-weight: 600; }
.steps code { font-family: var(--mono); font-size: 12.5px; background: var(--fill); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; color: var(--text); }
.keybox { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-ctl); background: var(--fill); }
.keybox .key { font-size: 15px; letter-spacing: .1em; color: var(--text); }
.keybox .btn { justify-self: start; }
.codes { list-style: none; margin: 24px 0 16px; padding: 20px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
  border-radius: var(--r-group); background: var(--fill); font-size: 16px; letter-spacing: .06em; counter-reset: rc; }
.codes li { counter-increment: rc; }
.codes li::before { content: counter(rc) ". "; color: var(--text-3); display: inline-block; min-width: 2.2em; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.auth-card .acts { margin-top: 0; margin-bottom: 12px; justify-content: center; }
.out-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 24px; background: var(--ok-tint); color: var(--ok); }
.out-ic .ic { width: 30px; height: 30px; stroke-width: 2; }
#out-again, #notice-go { margin-top: 32px; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--fill-hi); border-top-color: var(--text-2); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skipbox { display: grid; gap: 8px; padding-top: 8px; }

/* ---------- signed in: the sidebar and the page column ---------- */
body.is-app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
body.is-app main { min-width: 0; width: 100%; max-width: 840px; margin: 0 auto; padding: 56px 48px 96px; outline: none; }
body.is-app main:has(> #v-texts:not([hidden])) { max-width: 1180px; }
.rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; padding: 24px 16px 16px; height: 100vh; overflow: auto; box-shadow: inset -1px 0 var(--sep); }
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-width: 0; }
.rail-home { margin: 8px 10px 24px; color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-i { white-space: nowrap; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-weight: 450; font-size: 15px; text-align: left; cursor: pointer; transition: background var(--dur), color var(--dur); }
.nav-i .ic { color: var(--text-2); }
.nav-i:hover { background: var(--fill); }
.nav-i[aria-current="page"] { background: var(--fill-hi); font-weight: 600; }
.nav-i[aria-current="page"] .ic { color: var(--accent-text); }
.rail-who { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 16px 6px 4px; min-width: 0; }
.who-n { min-width: 0; flex: 1; line-height: 1.3; }
.who-n b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-n span { display: block; color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-who .btn { flex: 1 1 100%; justify-content: flex-start; padding: 0 4px; margin-top: 8px; min-height: 36px; border-radius: 10px; }
.phonebar { display: none; }

/* page titles, sections, groups */
.page-h { margin: 0 0 40px; }
.page-h h1 { font-size: 34px; font-weight: 700; letter-spacing: -.026em; line-height: 1.12; }
.page-h h1:focus { outline: none; }
.page-h p { color: var(--text-2); font-size: 16px; margin: 12px 0 0; max-width: 60ch; }
.sec-h { margin: 56px 0 16px; outline: none; }
.sec-h h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.sec-h p { color: var(--text-2); margin: 8px 0 0; max-width: 62ch; }
.page-h + .sec-h { margin-top: 0; }
.card { min-width: 0; margin: 0; }
.view.app > .card, .view.app > .grid2, .view.app > .card + .card { margin-top: 32px; }
.view.app > .page-h + .card, .view.app > .page-h + .grid2, .view.app > .sec-h + .card, .view.app > .sec-h + .grid2,
.view.app > .rule + .card { margin-top: 0; }
.view.app > .card.sec { margin-top: 56px; }
.card-h { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; min-height: 32px; }
.card-h h2 { margin: 0; font: 600 13px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.card-h h2:focus { outline: none; }
.card.sec > .card-h { padding: 0 0 16px; }
.card.sec > .card-h h2 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; text-transform: none; color: var(--text); }
.card-h .end { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.card-h .end .pill { background: transparent; padding: 0; min-height: 0; font-weight: 500; }
.card-h .end .pill:not(.ok):not(.warn):not(.fail):not(.acc) { color: var(--text-3); }
.group { background: var(--group); border-radius: var(--r-group); min-width: 0; }
.group > * + *:not(details) { box-shadow: inset 0 1px var(--sep); }
.group > [hidden] + * { box-shadow: none; }
.card-b { padding: 16px; }
.card-b > :first-child { margin-top: 0; }
.card-b > :last-child { margin-bottom: 0; }
.card-b.tight:not(:has(> :not([hidden]))) { display: none; }
.card-b > .btn:only-child { margin: 0; }
.pad { padding: 16px; margin: 0; }
.card-f { display: flex; flex-direction: column; }
.card-f .btn { width: 100%; justify-content: flex-start; min-height: 52px; padding: 0 16px; border-radius: 0; background: transparent; color: var(--accent-text); font-weight: 500; }
.card-f .btn + .btn { box-shadow: inset 0 1px var(--sep); }
.card-f .btn:last-child { border-radius: 0 0 var(--r-group) var(--r-group); }
.card-f .btn:hover { background: var(--fill); }
.card-f .btn.danger { color: var(--fail-text); }
.card-f .btn:active { transform: none; }
.note-s { color: var(--text-3); font-size: 13px; padding: 8px 16px 0; margin: 0; max-width: 72ch; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.big-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-tint); color: var(--accent-text); }
.big-ic.dim { background: var(--fill); color: var(--text-3); }
.big-ic .ic { width: 28px; height: 28px; }
.prose p { margin: 0 0 12px; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose b { color: var(--text); font-weight: 600; }
.big { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; font-family: var(--display); }
.fp { font-size: 13px; color: var(--text-2); }
.page-foot { margin-top: 48px; padding: 0 16px; color: var(--text-3); font-size: 13px; max-width: 72ch; }
.page-foot p { margin: 4px 0; }

/* rows: a state dot or an icon, a name and a line, a value on the right, maybe one button */
.rows { display: flex; flex-direction: column; }
.row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; min-width: 0; --lead: 0px; }
.row:has(> .dot) { --lead: 22px; }
.row:has(> .row-ic) { --lead: 46px; }
.rows > .row + .row::before, .rows > .app-qr + .row::before, .todo > .todo-i + .todo-i::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(16px + var(--lead)); height: 1px; background: var(--sep); }
.row-n { min-width: 0; flex: 1 1 auto; }
.row-n b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-n b.mono { font-size: 15px; letter-spacing: 0; }
.row-n > span { display: block; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-n > span.wrap { white-space: normal; }
.row-n > span .dot { width: 6px; height: 6px; vertical-align: 2px; margin-right: 2px; }
.row-v { flex: none; text-align: right; font-size: 15px; color: var(--text-2); max-width: 45%; }
.row-v.ok { color: var(--ok-text); } .row-v.warn { color: var(--warn-text); } .row-v.fail { color: var(--fail-text); } .row-v.acc { color: var(--accent-text); }
.row-v small { display: block; color: var(--text-3); font-size: 12px; }
.row > .btn { flex: none; }
.row-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--fill); color: var(--text-2); flex: none; }
.row-ic .ic { width: 18px; height: 18px; }
.row.sub { padding-left: 62px; min-height: 48px; --lead: 22px; }
.row-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; flex: none; max-width: 56%; }
.row-n span.relink, .row-n span.held { color: var(--warn-text); white-space: normal; }
.empty { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 56px; color: var(--text-2); }
.empty .ic { width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--fill); color: var(--text-3); }
/* a long technical string, only on demand */
details.tech { display: block; margin-top: 2px; font-size: 14px; }
details.tech > summary { display: inline; list-style: none; cursor: pointer; color: var(--accent-text); }
details.tech > summary::-webkit-details-marker { display: none; }
details.tech[open] > summary { color: var(--text-3); }
details.tech .mono { display: block; color: var(--text-2); margin-top: 2px; white-space: normal; }
/* the More menu on a row: the rarely used actions */
details.more-m { position: relative; }
details.more-m > summary { list-style: none; }
details.more-m > summary .ic { width: 18px; height: 18px; }
.menu-p { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; display: grid; gap: 2px;
  background: var(--raised); border-radius: 14px; box-shadow: var(--shadow), 0 0 0 .5px var(--sep); animation: pop .18s var(--ease) both; }
.menu-p .btn { justify-content: flex-start; width: 100%; background: transparent; border-radius: 8px; min-height: 40px; font-weight: 500; }
.menu-p .btn:hover { background: var(--fill); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Home: one calm state on top (the Starlink idea), what to do next, the overview ---------- */
.home-head { margin-bottom: 32px; }
.home-head p { font-size: 15px; color: var(--text-3); margin-top: 8px; overflow-wrap: anywhere; }
.hero { background: var(--group); border-radius: 24px; padding: 32px 32px 0; overflow: hidden; }
.state { display: flex; align-items: center; gap: 20px; }
.orb { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--fill); }
.orb .dot.lg { width: 16px; height: 16px; }
.orb:has(.dot.ok) { background: var(--ok-tint); }
.orb:has(.dot.warn) { background: var(--warn-tint); }
.orb:has(.dot.fail) { background: var(--fail-tint); }
.orb:has(.dot.ok)::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--ok-tint); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgb(48 209 88 / .22); } 50% { box-shadow: 0 0 0 10px rgb(48 209 88 / 0); } }
.state-w { min-width: 0; }
.state-t { font: 700 30px/1.15 var(--display); letter-spacing: -.026em; }
.state-t.warn { color: var(--warn-text); } .state-t.fail { color: var(--fail-text); } .state-t.off { color: var(--text-2); }
.state-s { color: var(--text-2); font-size: 16px; margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px -32px 0; box-shadow: inset 0 1px var(--sep); }
.stats:empty { display: none; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 24px 32px; min-width: 0; border: 0; background: transparent; color: var(--text);
  text-align: left; cursor: pointer; transition: background var(--dur); }
.stat + .stat { box-shadow: inset 1px 0 var(--sep); padding-left: 24px; }
.stat:hover { background: var(--fill); }
.stat span { order: -1; color: var(--text-3); font-size: 13px; font-weight: 500; }
.stat b { display: flex; align-items: center; gap: 8px; font: 600 18px/1.25 var(--display); letter-spacing: -.016em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--off); flex: none; }
.stat.ok b::before { background: var(--ok); } .stat.warn b::before { background: var(--warn); } .stat.fail b::before { background: var(--fail); }
.stat.fail b { color: var(--fail-text); }
.view.app > .hero + .card { margin-top: 48px; }
.home-grid { margin-top: 48px !important; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo-i { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; --lead: 38px; }
.todo-c { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--input-line); color: #fff; }
.todo-c .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.todo-i.done .todo-c { background: var(--ok); box-shadow: none; }
.todo-n { flex: 1; min-width: 0; }
.todo-n b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.012em; }
.todo-n span { display: block; color: var(--text-2); font-size: 14px; }
.todo-i.done .todo-n b { color: var(--text-2); }
.todo-i.done .todo-n span { color: var(--text-3); }
.todo-i .btn, .todo-i .pill { flex: none; }
.todo-x { flex: none; width: 28px; min-height: 28px !important; height: 28px; padding: 0 !important; border-radius: 50% !important; font-size: 18px; line-height: 1; color: var(--text-3) !important; opacity: .7; }
.todo-x:hover, .todo-x:focus-visible { opacity: 1; background: var(--fill) !important; }
@media (hover: hover) { .todo-i:not(:hover):not(:focus-within) .todo-x { opacity: 0; } }
.todo-more { margin: 8px 0 0; padding: 0 8px; }
.todo-later { margin: 14px 0 0; }
.todo-sub { margin: 0 0 6px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--text-3); letter-spacing: .01em; }
.todo-soon { margin: 12px 0 0; padding: 0 8px; font-size: 14px; color: var(--text-3); }
#todo-card .end { display: flex; gap: 8px; align-items: center; }

/* ---------- Texts: the messenger ---------- */
.hero-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 64px 24px; background: var(--group); border-radius: 24px; }
.hero-empty .big-ic { margin-bottom: 8px; }
.hero-empty p { max-width: 46ch; margin: 0 0 16px; }
.hero-empty .err { margin-top: 8px; }
.messenger { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 230px); min-height: 480px; background: var(--group); border-radius: 20px; overflow: hidden; }
.convs, .thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.convs { box-shadow: inset -1px 0 var(--sep); }
.convs-head { display: flex; gap: 8px; padding: 12px; }
.convs-head select { min-height: 40px; border-color: transparent; background-color: var(--fill); }
.seal-note { display: flex; align-items: flex-start; gap: 8px; padding: 0 16px 12px; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.seal-note .ic { margin-top: 1px; }
.seal-note.ok { color: var(--text-3); } .seal-note.ok .ic { color: var(--ok); }
.seal-note.bad { color: var(--fail-text); }
.conv-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; }
.conv-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px; border-radius: 12px; cursor: pointer; transition: background var(--dur); }
.conv-list li:hover { background: var(--fill); }
.conv-list li[aria-current="true"] { background: var(--accent-fill); color: #fff; }
.conv-list li[aria-current="true"] time, .conv-list li[aria-current="true"] p { color: rgb(255 255 255 / .82); }
.conv-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list time { font-size: 13px; color: var(--text-3); }
.conv-list p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list .empty-li { cursor: default; color: var(--text-2); grid-template-columns: 1fr; }
.thread-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; min-height: 64px; box-shadow: inset 0 -1px var(--sep); }
.thread-head .back { display: none; margin-right: auto; }
.thread-title { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to { max-width: 320px; }
.bubbles { list-style: none; margin: 0; padding: 16px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bubbles li { max-width: min(76%, 520px); padding: 8px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.38; }
.bubbles li.in { align-self: flex-start; background: var(--fill-hi); }
.bubbles li.out { align-self: flex-end; background: var(--accent-fill); color: #fff; }
.bubbles li.out time { color: rgb(255 255 255 / .75); }
.bubbles li.pending { opacity: .6; }
.bubbles li.failed { background: var(--fail-tint); color: var(--fail-text); }
.bubbles li.failed time { color: var(--fail-text); }
.bubbles li time { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.bubbles .masked { letter-spacing: .1em; opacity: .7; }
.bubbles .code { font-family: var(--mono); font-size: 1.05em; letter-spacing: .08em; background: var(--accent-tint); color: var(--accent-text); padding: 1px 6px; border-radius: 6px; }
.bubbles .reveal { display: block; margin-top: 4px; border: 0; background: none; padding: 0; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.bubbles .hint { display: block; margin-top: 4px; }
.bubbles li.day { align-self: center; background: none; color: var(--text-3); font-size: 12px; font-weight: 500; padding: 12px 8px 4px; }
.bubbles li.empty, .bubbles .empty-li { align-self: center; margin: auto; color: var(--text-3); background: none; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 16px; margin: 0; }
.composer textarea { resize: none; max-height: 140px; min-height: 40px; border-radius: 20px; padding: 8px 16px; border-color: var(--sep); background: transparent; }
.composer .btn.round { margin-bottom: 2px; }

/* ---------- Phones and computers ---------- */
.done-head { display: flex; align-items: center; gap: 10px; }
.done-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.018em; }
.done-head h3:focus { outline: none; }
.profile-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 24px; padding-top: 24px; box-shadow: inset 0 1px var(--sep); }
.deliver { display: grid; gap: 8px; }
#profile .steps { margin-top: 16px; }
.qr { margin: 0; text-align: center; }
.qr img { display: block; border-radius: 14px; background: #fff; padding: 10px; }
.qr figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; }
#pair-show .qr { justify-self: start; margin-bottom: 16px; }
#pair-show .qr img { margin: 0; }
#pair-start .btn.primary { margin-top: 8px; }
#f-add .hint.center { display: flex; align-items: center; justify-content: center; gap: 6px; }
.app-qr { display: flex; gap: 16px; align-items: center; padding: 0 16px 16px 62px; }
.app-qr img { border-radius: 12px; background: #fff; padding: 8px; }
.app-qr p { margin: 0; max-width: 30ch; font-size: 14px; }

/* ---------- Sticks, Updates ---------- */
.scan { display: grid; gap: 8px; justify-items: start; }
.scan video { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-ctl); background: #000; }
details.row-disc .row-ic { background: var(--accent-tint); }
#claim-fold > summary { justify-content: flex-start; }
.rule { display: flex; gap: 16px; align-items: flex-start; margin: -16px 0 40px; padding: 0 4px; }
.rule-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--ok-tint); color: var(--ok-text); }
.rule b { display: block; font-weight: 600; }
.rule p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.row.upd { align-items: flex-start; }
.row.upd > .row-ic { margin-top: 2px; }
.row.upd .row-n > span + span { margin-top: 2px; }
.row.upd .row-v { padding-top: 4px; }
.whatsnew { margin-top: 8px; font-size: 14px; }
.whatsnew > summary { cursor: pointer; color: var(--accent-text); font-weight: 500; list-style: none; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
.whatsnew > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -1px); transition: transform var(--dur); }
.whatsnew[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.whatsnew p { margin: 4px 0 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.row-n span.upd-line { white-space: normal; color: var(--text-2); }
.row-n span.upd-line.acc, .row-n span.upd-line.warn { color: var(--accent-text); }
.row-n span.upd-line.fail { color: var(--fail-text); }
.row-n span.card-line { white-space: normal; color: var(--text-2); }
.row-n span.card-line.acc, .row-n span.card-line.warn { color: var(--accent-text); }
.row-n span.upd-line .link { margin-left: 4px; }

/* ---------- Account ---------- */
.me-head { display: flex; align-items: center; gap: 16px; padding: 20px 16px; }
.me-n { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.dns-wrap { overflow-x: auto; margin: 8px 0 12px; border-radius: var(--r-ctl); background: var(--fill); }
.dns { width: 100%; border-collapse: collapse; font-size: 14px; }
.dns th { text-align: left; color: var(--text-3); font-size: 12px; font-weight: 600; padding: 10px 12px; }
.dns td { padding: 10px 12px; box-shadow: inset 0 1px var(--sep); vertical-align: middle; }
.dns td.mono { overflow-wrap: anywhere; word-break: break-all; }
.dns td:last-child { text-align: right; white-space: nowrap; }

/* ---------- Help ---------- */
.helps { overflow: hidden; }
details.faq + details.faq { box-shadow: inset 0 1px var(--sep); }
details.faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; transition: background var(--dur); }
details.faq > summary:hover { background: var(--fill); }
details.faq > summary h2 { font: 500 17px/1.3 var(--sans); letter-spacing: -.014em; }
details.faq > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.7px solid var(--text-3); border-bottom: 1.7px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); }
details.faq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.faq > .prose { padding: 0 20px 20px; max-width: 72ch; }
details.faq[open] > summary h2 { font-weight: 600; }

/* ---------- sheets, the toast, the banner ---------- */
dialog.ask { width: min(420px, calc(100vw - 32px)); max-width: none; padding: 24px; border: 0; border-radius: 22px; color: var(--text); background: var(--raised); box-shadow: var(--shadow); }
dialog.ask[open] { animation: sheet .28s var(--ease) both; }
@keyframes sheet { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
dialog.ask::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.ask h2 { font-size: 20px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }
dialog.ask p { color: var(--text-2); margin: 8px 0 24px; }
dialog.ask.wide { width: min(560px, calc(100vw - 32px)); }
.ask-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ask-b .btn { min-height: 48px; border-radius: var(--r-ctl); }
dialog.ask .field { margin: 0 0 16px; }
dialog.ask .err { margin: 0 0 16px; }
dialog.ask .steps { margin: 12px 0 16px; }
dialog.ask .fp { overflow-wrap: anywhere; margin: 0 0 8px; }
dialog.ask .sp-relay { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--sep, rgb(127 127 127 / .25)); }
dialog.ask .sp-relay h3 { margin: 0 0 8px; font-size: 15px; }
dialog.ask .hint { margin: 0 0 16px; }
dialog.ask .choices { margin: 0 0 16px; }
.choice.off { cursor: default; color: var(--text-3); }
.choice.off:hover { background: transparent; }
dialog.ask.is-danger #ac-yes, dialog.ask.is-danger #ask-yes { background: var(--fail); color: #fff; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  max-width: min(92vw, 520px); padding: 12px 20px; border-radius: 18px; background: rgb(28 28 30 / .94); color: #f5f5f7;
  box-shadow: var(--shadow); font-size: 14px; font-weight: 500; animation: toast .3s var(--ease) both;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.banner { display: flex; align-items: center; gap: 14px; margin: 0 0 40px; padding: 14px 16px; border-radius: var(--r-group); background: var(--warn-tint); color: var(--warn-text); }
.banner .ic { flex: none; }
.banner-t { flex: 1; min-width: 0; }
.banner-t b { display: block; color: var(--text); font-weight: 600; }
.banner-t span { display: block; font-size: 14px; color: var(--text-2); }
body.is-auth .banner, body.is-wiz .banner { display: none; }
.banner + .banner { margin-top: -28px; }
/* our service paused: what still works and what is paused, in two short lists */
.paused-list { margin: 0 0 18px; }
.paused-k { margin: 14px 0 6px; font-weight: 600; color: var(--text); }
.paused-list ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.paused-list li { margin: 4px 0; }

/* ---------- the first-run setup: full screen, one step per screen ---------- */
body.is-wiz main { max-width: 1080px; margin: 0 auto; padding: 24px 32px 48px; outline: none; }
.wz-top { display: flex; align-items: center; gap: 16px; }
.wz-top .rail-brand { padding: 0; }
.wz-count { flex: 1; margin: 0; text-align: center; color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-bar { height: 3px; margin: 24px 0 48px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.wz-bar i { display: block; height: 100%; width: 10%; border-radius: 2px; background: var(--accent); transition: width 480ms var(--ease); }
.wz-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
.wz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: sticky; top: 24px; }
.wz-steps li { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 8px; border-radius: 10px; color: var(--text-3); font-size: 14px; }
.wz-steps li.cur { color: var(--text); font-weight: 600; background: var(--fill); }
.wz-steps li.done { color: var(--text-2); }
.wz-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--fill-hi); font-size: 11px; font-weight: 700; }
.wz-steps li.cur .wz-n { box-shadow: none; background: var(--accent-fill); color: #fff; }
.wz-steps li.done .wz-n { box-shadow: none; background: var(--ok); color: #fff; }
.wz-steps li.done .wz-n .ic { width: 12px; height: 12px; vertical-align: 0; stroke-width: 2.6; }
.wz-card { min-height: min(620px, calc(100vh - 180px)); display: flex; flex-direction: column; max-width: 680px; }
.wz-card > .kicker { justify-content: flex-start; }
.wz-card h1 { font-size: 34px; font-weight: 700; letter-spacing: -.026em; line-height: 1.12; }
.wz-card h1:focus { outline: none; }
.wz-card > .lede { max-width: 60ch; font-size: 17px; margin-top: 12px; }
.wz-slot { display: grid; gap: 24px; margin-top: 32px; align-content: start; }
.wz-html > p { margin: 0; }
.wz-html > ul + p { margin-top: 16px; }
.wz-slot > .card { margin: 0 !important; }
.wz-slot > .form, .wz-slot > form { margin-top: 0; max-width: 560px; background: var(--group); border-radius: var(--r-group); padding: 16px; }
.wz-slot > .hero-empty { padding: 40px 24px; }
.wz-live:empty, .wz-html:empty { display: none; }
.wz-live { background: var(--group); border-radius: var(--r-group); }
.wz-live > .hint { padding: 12px 16px 16px; box-shadow: inset 0 1px var(--sep); }
.wz-live > .empty + .hint { box-shadow: inset 0 1px var(--sep); }
.wz-status { display: flex; align-items: center; gap: 10px; margin-top: 24px; min-height: 48px; padding: 12px 16px; border-radius: var(--r-ctl);
  background: var(--fill); color: var(--text-2); font-size: 14px; }
.wz-status:empty { display: none; }
.wz-status.ok { color: var(--ok-text); background: var(--ok-tint); }
.wz-wait { color: var(--text-3); }
.wz-nav { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 40px; }
.wz-nav #wz-next { margin-left: auto; min-width: 160px; min-height: 48px; font-size: 16px; }
.wz-nav #wz-back { min-height: 48px; }
.wz-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wz-tiles li { display: grid; gap: 4px; align-content: start; padding: 20px; border-radius: var(--r-group); background: var(--group); }
.wz-tiles .ic { color: var(--accent-text); width: 26px; height: 26px; margin-bottom: 8px; }
.wz-tiles b { font-weight: 600; }
.wz-tiles span { color: var(--text-2); font-size: 14px; }
.wz-sum { list-style: none; margin: 0; padding: 0; background: var(--group); border-radius: var(--r-group); }
.wz-sum li { display: grid; grid-template-columns: 24px 140px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 56px; padding: 10px 16px; }
.wz-sum li + li { box-shadow: inset 0 1px var(--sep); }
.wz-sum b { font-weight: 500; }
.wz-sum li > span:last-child { color: var(--text-2); font-size: 14px; }
.wz-sum li.done .todo-c { background: var(--ok); box-shadow: none; }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  body.is-app main { padding: 48px 32px 96px; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { box-shadow: inset 0 1px var(--sep); padding-left: 32px; }
  .stat:nth-child(4) { box-shadow: inset 1px 0 var(--sep), inset 0 1px var(--sep); }
}
@media (max-width: 960px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .messenger { grid-template-columns: minmax(0, 1fr); }
  .messenger.reading .convs { display: none; }
  .messenger:not(.reading) .thread { display: none; }
  .convs { box-shadow: none; }
  .thread-head .back { display: inline-grid; }
  .thread-head { justify-content: flex-start; }
  .thread-head .back + .sr + .to, .thread-head .thread-title { margin-right: auto; }
}

/* ---------- phones: the top bar, the menu sheet ---------- */
@media (max-width: 860px) {
  body.is-app { display: block; }
  body.is-app main { padding: 8px 20px calc(64px + env(safe-area-inset-bottom, 0px)); }
  .phonebar { display: flex; position: sticky; top: 0; z-index: 50; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 20px;
    padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
    background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    transition: box-shadow var(--dur); }
  .phonebar.titled { box-shadow: inset 0 -1px var(--sep); }
  .phone-title { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity var(--dur), transform var(--dur) var(--ease); }
  .phonebar.titled .phone-title { opacity: 1; transform: none; }
  .phonebar .mark { margin-right: 28px; }
  .rail { display: none; }
  .rail.is-open { display: flex; position: fixed; z-index: 45; inset: calc(56px + env(safe-area-inset-top, 0px)) 0 0 0; height: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); box-shadow: none; animation: rise .26s var(--ease) both; }
  .rail.is-open .rail-brand { display: none; }
  .rail.is-open .rail-home { margin: 8px 16px 16px; }
  .rail.is-open .nav { background: var(--group); border-radius: var(--r-group); gap: 0; padding: 0; }
  .rail.is-open .nav li + li .nav-i { box-shadow: inset 0 1px var(--sep); }
  .rail.is-open .nav li + li .nav-i { background-clip: padding-box; }
  .rail.is-open .nav-i { min-height: 52px; padding: 0 16px; font-size: 17px; border-radius: 0; }
  .rail.is-open .nav li:first-child .nav-i { border-radius: var(--r-group) var(--r-group) 0 0; }
  .rail.is-open .nav li:last-child .nav-i { border-radius: 0 0 var(--r-group) var(--r-group); }
  .rail.is-open .nav-i[aria-current="page"] { background: var(--fill); }
  .rail.is-open .rail-who { margin-top: 24px; padding: 12px 16px; background: var(--group); border-radius: var(--r-group); }
  .page-h { margin: 16px 0 32px; }
  .page-h h1 { font-size: 32px; }
  .sec-h { margin-top: 48px; }
  .view.app > .card.sec { margin-top: 48px; }
  .messenger { height: calc(100dvh - 200px); min-height: 420px; border-radius: 18px; }
  .banner { margin: 8px 0 8px; }
  .banner + .view .page-h { margin-top: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  body.is-auth main { padding: 40px 20px 48px; }
  .auth-top { margin-bottom: 24px; }
  .auth-card h1 { font-size: 28px; }
  .hero { padding: 24px 20px 0; border-radius: 20px; }
  .state { gap: 16px; align-items: flex-start; }
  .orb { width: 44px; height: 44px; margin-top: 2px; }
  .orb .dot.lg { width: 12px; height: 12px; }
  .state-t { font-size: 26px; }
  .state-s { font-size: 15px; }
  .stats { margin: 24px -20px 0; }
  .stat { padding: 16px 16px 20px 20px; }
  .stat + .stat { padding-left: 16px; }
  .stat:nth-child(3) { padding-left: 20px; }
  .stat b { font-size: 17px; }
  .row-v { max-width: 42%; }
  .row-n b, .row-n > span { white-space: normal; }
  .row.has-acts { flex-wrap: wrap; row-gap: 8px; }
  .row.has-acts > .row-n { flex: 1 1 0; }
  .row.has-acts .row-acts { max-width: 100%; flex: 1 1 100%; justify-content: flex-start; padding-left: var(--lead); }
  .row.has-acts .row-acts:empty { display: none; }
  .todo-i { flex-wrap: wrap; row-gap: 8px; }
  .todo-n { flex: 1 1 calc(100% - 80px); }
  .todo-i > .btn:not(.todo-x) { order: 3; margin-left: 38px; }
  .todo-i .pill { white-space: normal; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .totp { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .profile-body { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .qr img { margin: 0 auto; }
  .codes { grid-template-columns: minmax(0, 1fr); padding: 16px 20px; }
  .app-qr { padding-left: 16px; }
  .banner { flex-wrap: wrap; }
  .banner .btn { flex: 1 1 100%; }
  .rule { margin-top: -16px; }
  .row.upd.has-acts .row-n { flex: 1 1 calc(100% - 60px); }
  .row.upd.has-acts .row-v { display: none; }
  .hero-empty { padding: 48px 20px; }
  /* the sheets rise from the bottom on a phone */
  dialog.ask, dialog.ask.wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 90dvh; overflow: auto; }
  dialog.ask[open] { animation: up .32s var(--ease) both; }
  @keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 860px) {
  body.is-wiz main { padding: 16px 20px calc(104px + env(safe-area-inset-bottom, 0px)); }
  .wz-body { grid-template-columns: minmax(0, 1fr); }
  .wz-steps { display: none; }
  .wz-count { display: none; }
  .wz-top .rail-brand { flex: 1; }
  .wz-bar { margin: 16px 0 32px; }
  .wz-card { min-height: 0; }
  .wz-card h1 { font-size: 28px; }
  .wz-tiles { grid-template-columns: minmax(0, 1fr); }
  .wz-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bar); box-shadow: inset 0 1px var(--sep); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .wz-nav #wz-next { flex: 1; min-width: 0; }
  .wz-sum li { grid-template-columns: 24px minmax(0, 1fr); }
  .wz-sum li > span:last-child { grid-column: 2; }
}
@media (pointer: coarse) {
  :root { --ctl-h: 48px; --ctl-h-sm: 36px; }
  .nav-i { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* the app list: its actions sit under the app's name, the one that matters first */
#apps .row.has-acts { flex-wrap: wrap; row-gap: 8px; }
#apps .row-n { flex: 1 1 0; }
#apps .row-acts { flex: 1 1 100%; max-width: 100%; justify-content: flex-start; gap: 8px 20px; padding-left: var(--lead); }
#apps .row { align-items: flex-start; }
#apps .row > .row-ic { margin-top: 2px; }
#apps .row-v { padding-top: 2px; }
.row-ic:has(> .app-ic) { background: none; border-radius: 8px; overflow: hidden; }
.app-ic { display: block; width: 32px; height: 32px; border-radius: 8px; }
.row-n a.inl { color: var(--accent-text); white-space: nowrap; }
.home-grid > .card.wide { grid-column: 1 / -1; }
.rail.is-open .nav-i:focus-visible { outline-offset: -2px; }

/* ---- THE EMPTY SHELL (2026-10-23): the skeleton the stick fills, greyed while it is away; the one live-stream line ---- */
.row.ghost { pointer-events: none; }
.row.ghost .dot { background: var(--fill-hi); }
.row.ghost .row-n b, .row.ghost .row-n span { display: block; height: 10px; border-radius: 5px; background: var(--fill); }
.row.ghost .row-n b { width: 38%; margin-bottom: 8px; }
.row.ghost .row-n span { width: 62%; background: var(--fill); opacity: .7; }
.view.app.is-shell .home-grid .card-h .end { visibility: hidden; }
.view.app.is-shell .hero { padding-bottom: 32px; }
.view.app.is-shell .page-foot { display: none; }
.shell-act { margin-top: 24px; }
.shell-act:empty { display: none; }
.nav-i.is-dim { opacity: .45; }
.nav-i.is-dim .ic { color: var(--text-3); }
.live-chip { margin: 8px 6px 0; padding: 6px 10px; border-radius: var(--r-cap); background: var(--warn-tint); color: var(--warn-text); font-size: 12px; line-height: 1.3; flex: 1 1 100%; }
.live-chip.m { margin: 0 8px 0 auto; flex: none; max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.danger-card .card-h h2 { color: var(--fail-text); }
.form.pad { padding: 12px 16px 16px; }