/* 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;
  /* the type scale (core/stick-os/UI-DIRECTION.md "A real type scale"): iOS text styles for the web, by size and weight */
  --t-large: 28px; --t-title: 22px; --t-head: 17px; --t-body: 16px; --t-call: 15px; --t-sub: 14px; --t-foot: 13px; --t-cap: 12px;
  --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(> .view.wide: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; }
/* the sidebar folds to an icon rail and resizes (2026-10-25); its width is --rail-w, set by the page per browser */
.rail-brand .rail-fold { margin-left: auto; width: 32px; height: 32px; color: var(--text-3); }
.rail-brand .rail-fold:hover { color: var(--text); background: var(--fill); }
.rail-fold .fold-arrow { transition: transform var(--dur) var(--ease); transform-origin: 14.5px 12px; }
body.rail-mini .rail-fold .fold-arrow { transform: scaleX(-1); }
.rail-grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: 2; }
.rail-grip::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background var(--dur); }
.rail-grip:hover::after, .rail-grip:focus-visible::after, body.rail-dragging .rail-grip::after { background: var(--accent); }
.rail-grip:focus-visible { outline: none; }
body.rail-dragging { cursor: col-resize; user-select: none; }
body.is-app { transition: grid-template-columns var(--dur) var(--ease); }
body.rail-dragging.is-app { transition: none; }
.rail-scrim { display: none; }
@media (min-width: 861px) {
  /* every collapsed rule names the sidebar (#rail): rail-mini stays on body through every page change, and the setup
     wizard's own .rail-brand must keep its mark and word */
  body.is-app.rail-mini .rail { padding: 20px 12px 16px; align-items: stretch; overflow-x: hidden; }
  body.is-app.rail-mini .rail .rail-brand { justify-content: center; padding: 0; }
  body.is-app.rail-mini .rail .rail-brand .mark, body.is-app.rail-mini .rail .rail-brand .word, body.is-app.rail-mini .rail .rail-home,
  body.is-app.rail-mini .rail .nav-i span, body.is-app.rail-mini .rail .who-n, body.is-app.rail-mini .rail #signout span,
  body.is-app.rail-mini .rail .rail-who .live-chip { display: none; }
  body.is-app.rail-mini .rail .rail-brand .rail-fold { margin: 0 auto 20px; }
  body.is-app.rail-mini .rail .nav-i { justify-content: center; padding: 0; min-height: 44px; }
  body.is-app.rail-mini .rail .rail-who { flex-direction: column; justify-content: center; padding: 16px 0 4px; }
  body.is-app.rail-mini .rail .rail-who .btn { flex: 0 0 auto; width: 44px; justify-content: center; padding: 0; }
  body.is-app.rail-mini #signout .ic { margin-right: 0; }
}
#signout .ic { margin-right: 6px; }

/* 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 var(--t-cap)/1.3 var(--sans); letter-spacing: .06em; 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: var(--t-foot); 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; }

/* ---------- TEMPLATE additions (core/hosted/web/TEMPLATE.md): the page header's actions, two panes, the search
   field, the designed empty state, avatars with a tone. Every page is built from the components of this file; a new
   look starts here, never in one page's corner (owner 2026-10-25: "why don't we have a template? why do you keep
   inventing?"). ---------- */
:root {
  --ic-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
  --ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3Cpath d='M9 10.5h6'/%3E%3C/svg%3E");
}
/* the page header with actions on the right (title and subtitle in .page-t, buttons and chips in .page-acts) */
.page-h.has-acts { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.page-t { min-width: 0; flex: 1 1 auto; }
.page-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; }
/* the header's picker (the stick on Texts; owner 2026-10-26: "the drop-down selector for the stick is not good
   contrast"): an opaque surface with a visible edge, never the translucent fill (a native list drew its options over
   that fill: light text on a light popup in dark mode), and the open list's options in the page's own colors */
.page-acts select { width: auto; min-height: var(--ctl-h-sm); padding: 0 36px 0 14px; border: 1px solid var(--input-line); border-radius: var(--r-cap);
  background-color: var(--group); color: var(--text); font-size: 14px; font-weight: 600; background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; }
.page-acts select:hover { background-color: var(--group-hi); }
select option, select optgroup { background-color: var(--raised); color: var(--text); }
select option:checked { background-color: var(--accent-fill); color: #fff; }
.page-act { display: contents; }
.view.wide > .page-h { margin-bottom: 24px; }
.view.wide > .page-h h1 { font-size: 30px; }
.view.wide > .page-h p { margin-top: 6px; font-size: 15px; }
/* two panes: a list and what it opens (Texts). A phone shows one at a time: .split.reading shows the detail. */
.split { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); height: calc(100vh - 188px); height: calc(100dvh - 188px); min-height: 520px;
  background: var(--group); border-radius: 20px; overflow: hidden; }
.split-list, .split-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.split-list { box-shadow: inset -1px 0 var(--sep); }
.split-bar { display: flex; align-items: center; gap: 8px; padding: 12px; }
/* a page whose two panes fill the window: the panes take what its header leaves */
.view.wide:has(> .split:not([hidden])) { display: flex; flex-direction: column; height: calc(100vh - 96px); height: calc(100dvh - 96px); }
body.is-app main:has(> .view.wide > .split:not([hidden])) { padding-bottom: 40px; }
.view.wide > .split { flex: 1 1 auto; height: auto; min-height: 440px; }
@media (min-width: 961px) { .split-detail:has(#to[hidden]):has(#thread-who[hidden]) .thread-head { display: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* the search field: a filled pill with its glass */
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { width: 100%; min-height: 38px; padding: 0 12px 0 36px; border: 0; border-radius: 10px; background: var(--fill); font-size: 15px; }
.search input:focus { box-shadow: 0 0 0 3px var(--accent-tint); }
/* the empty state: an icon in a circle, a short title, one sentence, maybe one action. .hero-empty is the page-wide
   one on a surface; .empty-state sits inside a pane or a card; .empty is the one-line row form inside a group. */
.hero-empty, .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.hero-empty { 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; }
.empty-state { margin: auto; padding: 32px 24px; max-width: 42ch; }
.empty-state .big-ic { margin-bottom: 8px; }
.empty-state h3 { font: 600 17px/1.3 var(--display); letter-spacing: -.012em; color: var(--text); }
.empty-state p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.empty-state .btn { margin-top: 12px; }
/* avatars carry a tone from the person's key (avatar() in app.js), the same person always the same color */
.avatar.t0 { background: linear-gradient(160deg, #8e8e93, #636366); }
.avatar.t1 { background: linear-gradient(160deg, #5aa9ff, #2f6fd6); }
.avatar.t2 { background: linear-gradient(160deg, #b28dff, #7a4fd6); }
.avatar.t3 { background: linear-gradient(160deg, #4fd18b, #23955a); }
.avatar.t4 { background: linear-gradient(160deg, #ffb35c, #e07a1f); }
.avatar.t5 { background: linear-gradient(160deg, #ff8aa8, #d6466f); }
.avatar.t6 { background: linear-gradient(160deg, #5fd3d6, #2a98a6); }
.avatar .ic { width: 55%; height: 55%; stroke-width: 1.8; vertical-align: 0; }
/* a chip that is a button (a status the person can open) */
button.pill { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
/* the banner's tones: warn (default), fail, ok */
.banner.fail { background: var(--fail-tint); color: var(--fail-text); }
.banner.ok { background: var(--ok-tint); color: var(--ok-text); }

/* 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: var(--t-body); 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: var(--t-sub); 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, built on the template's two panes (split) ---------- */
/* Google Messages / iMessage on a computer (owner 2026-10-25: "fix this page, looks very ugly ... why don't we have a
   template?"): the page header carries the line, the seal chip and "Texts on your phone"; the list pane is a bar
   (Chats and Contacts as a segmented control, New), the search and the conversations; the thread pane is its header,
   the bubbles by day and the composer pinned to the bottom. A phone shows the list, then the thread full screen. */
.messenger .convs-head { padding: 14px 14px 10px; }
.messenger .convs-head .seg { flex: 1; }
.messenger #new-conv .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.messenger .conv-search { margin: 0 14px 10px; }
/* the seal: a small lock chip in the page header; what it means and the safety code open in a popover */
.seal-note { position: relative; font-size: 12.5px; color: var(--text-3); }
.view:has(#texts-on-view[hidden]) .seal-note { display: none; }
.seal-badge { display: inline-flex; align-items: center; gap: 6px; max-width: min(320px, 70vw); min-height: var(--ctl-h-sm); padding: 0 12px; border: 0; border-radius: var(--r-cap);
  background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--dur); }
.seal-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seal-badge:hover { background: var(--fill-hi); }
.seal-note.ok .seal-badge { background: var(--ok-tint); color: var(--ok-text); }
.seal-note.bad .seal-badge { background: var(--fail-tint); color: var(--fail-text); }
/* a switch: an on/off a person flips in place (Sounds on Texts). The checkbox is the state; the track draws it, a
   label or an icon says what it is. Phone-sized: 36 x 22 track, 44 px tap height. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--ctl-h-sm); padding: 0 4px; cursor: pointer; user-select: none;
  color: var(--text-2); font-size: var(--t-foot); font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch .sw-track { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--r-cap); background: var(--fill-hi); transition: background var(--dur) var(--ease); }
.switch .sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35); transition: transform var(--dur) var(--ease); }
.switch input:checked + .sw-track { background: var(--ok); }
.switch input:checked + .sw-track::after { transform: translateX(14px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:hover .sw-track { filter: brightness(1.08); }
.switch .sw-lbl { display: inline-flex; align-items: center; gap: 4px; }
.switch input:checked ~ .sw-lbl { color: var(--text); }
.view:has(#texts-on-view[hidden]) .switch { display: none; }
.seal-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px;
  background: var(--raised); box-shadow: var(--shadow), 0 0 0 .5px var(--sep); color: var(--text-2); font-size: 13.5px; line-height: 1.45; animation: pop .18s var(--ease) both; }
.seal-pop p { margin: 0 0 8px; } .seal-pop p:last-child { margin: 0; }
.seal-code { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fill); }
.seal-code span { color: var(--text-3); font-size: 12.5px; }
.seal-code b { font-family: var(--mono); font-size: 17px; letter-spacing: .12em; color: var(--text); }
/* the conversation list: avatar, name or number, time, the last text, the unread dot */
.conv-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.conv-list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center;
  min-height: 68px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background var(--dur); }
.conv-list li .avatar { grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 15px; }
.conv-list li:hover { background: var(--fill); }
.conv-list li[aria-current="true"] { background: var(--fill-hi); }
.conv-list b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list time { font-size: 12.5px; color: var(--text-3); }
.conv-list p { grid-column: 2 / -1; margin: 0; padding-right: 20px; font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list li.unread b { font-weight: 700; } .conv-list li.unread p { color: var(--text); } .conv-list li.unread time { color: var(--accent-text); font-weight: 600; }
.dot-unread { position: absolute; right: 14px; bottom: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
/* the list with no rows: a designed empty state (its words are the page's, listWords) */
.conv-list .empty-li { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; margin: 40px auto 0; max-width: 30ch; padding: 0 12px;
  cursor: default; color: var(--text-2); font-size: 14px; line-height: 1.45; text-align: center; }
.conv-list .empty-li:hover { background: none; }
.conv-list .empty-li:not(.busy)::before { content: ""; width: 56px; height: 56px; border-radius: 50%; background: var(--fill) var(--ic-chat) center / 26px no-repeat; }
.conv-list .empty-li .link { margin-top: 4px; }
.ct-list .empty-li:not(.busy)::before { background-image: var(--ic-person); }
/* the list while the stick is asked (2026-10-25): a small spinner beside what it is doing, never an empty-state */
.conv-list .empty-li.busy::before { content: ""; display: block; width: 20px; height: 20px; margin: 0 auto 12px; border-radius: 50%;
  border: 2px solid var(--fill-hi); border-top-color: var(--text-2); animation: spin .9s linear infinite; }
/* the thread */
.thread-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; min-height: 68px; box-shadow: inset 0 -1px var(--sep); }
.thread-head .back { display: none; }
.thread-who { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; }
.thread-who .avatar { width: 36px; height: 36px; font-size: 13px; }
.thread-who[hidden] + .iconbtn { margin-left: auto; }
.thread-title { font-weight: 600; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-title small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.thread-head .to { flex: 1; min-height: 40px; border: 0; border-radius: var(--r-cap); background: var(--fill); padding: 0 16px; }
.thread-head .to:focus { box-shadow: 0 0 0 3px var(--accent-tint); }
.bubbles { list-style: none; margin: 0; padding: 8px 24px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.bubbles li { display: flex; flex-direction: column; max-width: min(72%, 520px); margin-top: 10px; }
.bubbles li.cont { margin-top: 0; }
.bubbles li.in { align-self: flex-start; align-items: flex-start; }
.bubbles li.out { align-self: flex-end; align-items: flex-end; }
.bub { padding: 9px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.4; }
.in .bub { background: var(--fill-hi); }
.out .bub { background: var(--accent-fill); color: #fff; }
.bubbles li.out + li.in, .bubbles li.in + li.out { margin-top: 14px; }
.in.more .bub { border-bottom-left-radius: 6px; } .in.cont .bub { border-top-left-radius: 6px; }
.out.more .bub { border-bottom-right-radius: 6px; } .out.cont .bub { border-top-right-radius: 6px; }
.bubbles li.pending .bub { opacity: .6; }
.bubbles li.failed .bub { background: var(--fail-tint); color: var(--fail-text); }
.bubbles li time, .bubbles .dlv { font-size: 11.5px; color: var(--text-3); margin: 4px 8px 0; }
.bubbles .dlv.bad { color: var(--fail-text); }
.bubbles .masked { letter-spacing: .1em; opacity: .7; }
.bubbles .code { font-family: var(--mono); font-size: 1.05em; letter-spacing: .08em; background: rgb(255 255 255 / .16); padding: 1px 6px; border-radius: 6px; }
.in .code { background: var(--accent-tint); color: var(--accent-text); }
.bubbles .reveal { display: block; margin-top: 4px; border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; font-size: 14px; font-weight: 600; cursor: pointer; }
.in .reveal { color: var(--accent-text); text-decoration: none; }
.bubbles .hint { display: block; margin-top: 4px; }
/* the day between texts: a quiet centered chip */
.bubbles li.day { align-self: center; max-width: none; align-items: center; margin: 18px 0 6px; }
.bubbles li.day span { padding: 3px 12px; border-radius: var(--r-cap); background: var(--fill); font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.bubbles li.empty, .bubbles .empty-li { align-self: center; margin: auto; max-width: 40ch; background: none; color: var(--text-3); text-align: center; }
.bubbles .empty-li .empty-state { padding: 24px; }
/* the composer, pinned to the bottom of the thread */
.composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px 16px; margin: 0; box-shadow: inset 0 1px var(--sep); }
.composer textarea { flex: 1; resize: none; max-height: 140px; min-height: 40px; border: 0; border-radius: 20px; padding: 9px 16px; background: var(--fill); line-height: 1.4; }
.composer textarea:focus { border: 0; box-shadow: 0 0 0 3px var(--accent-tint); }
.composer .btn.round { width: 40px; height: 40px; min-height: 40px; }
/* chats and contacts (2026-10-25): the mode switch, the sealed contact book, the contact sheet */
.seg.two { grid-template-columns: 1fr 1fr; }
.contacts { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.contacts-acts { display: flex; gap: 8px; padding: 0 14px 10px; }
.contacts-acts .btn { flex: 1; }
.ct-note { margin: 0 16px 8px; }
.ct-note:empty { display: none; }
.conv-list li.sect { display: block; min-height: 0; cursor: default; padding: 12px 12px 4px; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; background: none; }
.blocked-link { margin: 0 14px 12px; align-self: flex-start; }
button.thread-who { border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 12px; color: inherit; cursor: pointer; text-align: left; }
button.thread-who:hover { background: var(--fill); }
.ct-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ct-top .avatar:empty { display: grid; background: var(--fill-hi); }
#ct-sheet .field { margin-bottom: 12px; }
#ct-sheet textarea { width: 100%; resize: vertical; }
.ct-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ct-b #ct-del { margin-right: auto; color: var(--fail-text); }
.ct-seal { display: flex; gap: 6px; align-items: flex-start; margin: 16px 0 0 !important; }
.ct-seal .ic { flex: none; margin-top: 2px; color: var(--ok); }
.msg-count { align-self: center; flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.msg-count:empty { display: none; }
/* Texts on your phone: a sheet behind a header button, steps instead of a paragraph */
#sms-pair-sheet .steps { margin: 16px 0; }
#sms-pair-sheet .qr { margin: 8px 0 16px; }
#sms-pair-sheet .qr img { margin: 0 auto; }

/* ---------- 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); }
.ask-b.one { grid-template-columns: 1fr; }
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; }
/* THE TOAST STACK (owner 2026-10-26: "even for the console I need SSE toast notifications, premium"; the stick's toast
   family, "top right, small and fast"): top right under the safe area (a phone: top centre under the title bar, where the
   menu button stays free), one short line with a state dot, in within 0.14 s, up to 3 stacked newest on top; a tap
   dismisses one. app.js toast(msg, tone) and the live toasts (liveKey) fill #toasts. */
.toasts { position: fixed; z-index: 90; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 14px 9px 12px; cursor: pointer;
  border: 1px solid var(--sep); border-radius: var(--r-ctl); background: var(--raised); color: var(--text); box-shadow: var(--shadow);
  font-size: var(--t-sub); font-weight: 500; line-height: 1.35; animation: toast-in .14s var(--ease) both; }
.toast .dot { flex: none; }
.toast-t { min-width: 0; overflow-wrap: anywhere; }
.toast.out { animation: toast-out .14s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }
@media (max-width: 860px) {
  .toasts { left: 16px; right: 16px; width: auto; align-items: center; }
  body.is-app .toasts { top: calc(64px + env(safe-area-inset-top, 0px)); }
}
.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); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.reading > .split-list { display: none; }
  .split:not(.reading) > .split-detail { display: none; }
  .split-list { box-shadow: none; }
  .split-detail .back { display: inline-grid; }
}

/* ---------- phones: the top bar, the menu sheet ---------- */
@media (max-width: 860px) {
  body.is-app { display: block; }
  body.is-app main { padding: 8px 16px 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; }
  /* a phone: the sidebar is a drawer from the left over a scrim (2026-10-25); the fold and the resize are a computer's */
  .rail.is-open { display: flex; position: fixed; z-index: 70; inset: 0 auto 0 0; width: min(86vw, 340px); height: 100%;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); box-shadow: var(--shadow); animation: drawer .28s var(--ease) both; }
  .rail-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: var(--scrim); animation: fade .2s ease both; }
  .rail.is-open .rail-fold, .rail-grip { display: none; }
  .rail.is-open .rail-brand { padding: 4px 16px 0; }
  .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 28px; }
  .page-h h1 { font-size: var(--t-large); }
  .sec-h { margin-top: 48px; }
  .view.app > .card.sec { margin-top: 48px; }
  /* a phone: the panes go edge to edge under the title, and an open item (a thread) is full screen with its back */
  .split { margin: 0 -16px; border-radius: 0; box-shadow: inset 0 1px var(--sep); }
  .view.wide:has(> .split:not([hidden])) { height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); }
  body.is-app main:has(> .view.wide > .split:not([hidden])) { padding-bottom: 0; }
  .view.wide > .split { min-height: 320px; }
  .view:has(> .split.reading) { animation: none; }   /* a transform on the page would hold the full-screen pane inside it */
  .split.reading { position: fixed; inset: 0; z-index: 60; margin: 0; height: 100dvh; min-height: 0; box-shadow: none;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); animation: slide-in .26s var(--ease) both; }
  .view.wide > .page-h { margin: 8px 0 16px; }
  .view.wide > .page-h p { display: none; }
  .view.wide > .page-h.has-acts { align-items: center; flex-wrap: nowrap; }
  .page-acts .btn .lbl, .page-acts .switch .lbl { display: none; }
  .banner { margin: 8px 0 8px; }
  .banner + .view .page-h { margin-top: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  /* a phone's Texts header is ONE row: the title, then the switch (its track and icon), the seal as its lock alone (the
     popover keeps the words) and the phone-app button as its icon; nothing wraps under the title */
  .view.wide > .page-h.has-acts .page-acts { flex-wrap: nowrap; gap: 6px; }
  .page-acts .seal-badge > span { display: none; }
  .page-acts .seal-badge { padding-right: 10px; }
  .page-acts .switch { padding: 0; }
  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; }
/* the overview's half-width cards: a row's words wrap instead of cutting to "No phone pair..." (TEMPLATE pass 2026-10-25) */
.home-grid .row-n b, .home-grid .row-n > span { white-space: normal; }
.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; }

@keyframes drawer { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }


/* the stick's diagnostics read through the home (the stick page sheet, SECURITY-ARCHITECTURE-v1.1 P6): the text as the
   stick sealed it, scrollable, never wider than the sheet */
.diag-out { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; margin: 8px 0; padding: 10px 12px; background: var(--fill); border-radius: var(--r-group); font-size: 12px; line-height: 1.45; }
/* the connection check's result (2026-10-27): the same card the stick's own page shows, in the console's row system */
.net-card { margin: 10px 0 4px; background: var(--group, var(--fill)); border-radius: var(--r-group); overflow: hidden; }
.callout { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 10px 12px; border-radius: var(--r-group); background: var(--fill); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.callout.ok { color: var(--ok-text); background: var(--ok-tint); }
.callout.warn { color: var(--warn-text); background: var(--warn-tint); }
.callout { flex-wrap: wrap; }
.callout > span:first-child { flex: 1 1 220px; min-width: 0; }
.callout-b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.callout-b:empty { display: none; }
dialog.ask .net-card + .hint { margin-top: 8px; }

/* ---- THE STICK ORDER (2026-10-26, TEMPLATE.md "Card and list": .rows.order): a list a person reorders. Drag a row by
   its grip, or its up and down buttons (keyboard and phones); the role chip says Primary, Backup 1...; the lifted row
   floats, the others make room, the drop glides into place (app.js ordGlide: FLIP; reduced motion: none). And the
   composer's From line on Texts (.from-bar): which number a text goes from. ---- */
.rows.order > .row.ord { background: var(--group); touch-action: pan-y; }
.rows.order > .row.ord:first-child { border-radius: var(--r-group) var(--r-group) 0 0; }
.rows.order > .row.ord:last-child { border-radius: 0 0 var(--r-group) var(--r-group); }
.rows.order > .row.ord:only-child { border-radius: var(--r-group); }
.row.ord .row-v { max-width: none; }
.row.ord.fixed .row-v { margin-right: 0; }
.ord-mv { display: flex; align-items: center; gap: 2px; flex: none; margin-right: -8px; }
.ord-mv .iconbtn { width: 32px; height: 32px; }
.ord-mv .iconbtn:disabled { opacity: .3; cursor: default; background: transparent; }
.grip { display: grid; place-items: center; width: 32px; height: 40px; border: 0; padding: 0; border-radius: var(--r-ctl); background: none; color: var(--text-3);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.grip:hover { color: var(--text-2); background: var(--fill); }
.rows.order.dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.rows.order.dragging > .row.ord:not(.lifted) { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.row.ord.lifted { z-index: 3; background: var(--raised); border-radius: var(--r-ctl); box-shadow: 0 12px 32px rgb(0 0 0 / .28), 0 0 0 1px var(--sep); }
.row.ord.lifted::before { opacity: 0; }
.row.ord.lifted .grip { cursor: grabbing; color: var(--accent-text); }
/* a phone: the up and down buttons move a row (the grip stays for a mouse), the name keeps its line */
@media (max-width: 560px) { .row.ord { gap: 10px; padding-right: 12px; } .row.ord .row-v .pill { padding: 2px 8px; } .ord-mv .iconbtn { width: 30px; }
  .row.ord .grip { display: none; } .row.ord .row-n b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.from-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 10px 16px 0; color: var(--text-2); font-size: var(--t-sub); box-shadow: inset 0 1px var(--sep); }
.from-bar + .composer { box-shadow: none; }
.from-bar .pill { border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.from-bar .pill:disabled { cursor: default; }
.from-bar .pill:not(:disabled)::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }