/* doors.css — the shared component sheet for the small worlds that stand at the
 * doors of the app: login, onboarding, the questionnaire, the shadchan request,
 * and the offline shell. Every rule here is signup's vocabulary (pages/signup)
 * lifted out so five worlds do not carry five diverging copies.
 *
 * Every value is a token from tokens.css. No literal colours, px, radii,
 * shadows, durations or curves appear in this file. Logical properties only.
 */

*{box-sizing:border-box; margin:0; padding:0}
html,body{block-size:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--ground);
  font-size:var(--text-body); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
a{color:inherit}
:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:var(--focus-offset); border-radius:var(--r-focus)}
.ltr{direction:ltr; unicode-bidi:isolate}
.vh{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- shell: the phone is the whole screen; a wide window holds a centred column ---------- */
.app{block-size:100%; display:flex; justify-content:center; background:var(--ground)}
.frame{
  position:relative; inline-size:100%; block-size:100%; background:var(--ground);
  overflow:hidden; display:flex; flex-direction:column;
  padding-block-start:env(safe-area-inset-top);
  padding-inline-start:env(safe-area-inset-left);
  padding-inline-end:env(safe-area-inset-right);
}
/* media queries cannot read var(); this is --bp-wide from tokens.css */
@media (min-width:520px){
  .app{background:radial-gradient(120% 80% at 50% 0%, var(--ground-glow) 0%, var(--ground-0) 62%), var(--ground-wide)}
  .frame{max-inline-size:var(--content-max); box-shadow:var(--frame-ring)}
}

/* ---------- views: enter from below with a soft spring; never sideways ---------- */
.view{position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  padding-block-start:inherit; padding-inline:inherit; background:var(--ground)}
.view[hidden]{display:none}
.view.entering{animation:viewIn var(--d-slow) var(--spring-soft) backwards}
@keyframes viewIn{from{opacity:0; transform:translateY(var(--enter-y)) scale(var(--enter-scale))} to{opacity:1; transform:none}}
.scroll{flex:1 1 auto; min-block-size:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column}

/* ---------- type steps ---------- */
.t-display{font-size:calc(var(--text-display) * var(--script-display-scale)); font-weight:var(--weight-heavy); letter-spacing:var(--tracking-display); line-height:var(--leading-display)}
.t-title{font-size:calc(var(--text-title) * var(--script-display-scale)); font-weight:var(--weight-heavy); letter-spacing:var(--tracking-display); line-height:var(--leading-title)}
.t-heading{font-size:var(--text-heading); font-weight:var(--weight-bold); letter-spacing:var(--tracking-heading); line-height:var(--leading-snug)}
.t-subhead{font-size:var(--text-subhead); font-weight:var(--weight-bold); letter-spacing:var(--tracking-subhead); line-height:var(--leading-snug)}

.press{transition:transform var(--d-press) var(--out), box-shadow var(--d-press) var(--out), background-color var(--d-quick) var(--ease)}
.press:active{transform:scale(var(--press-scale)); box-shadow:var(--press-1)}
.dotmark{inline-size:var(--dot); block-size:var(--dot); border-radius:var(--r-pill); background:var(--accent); flex:0 0 auto}

/* ---------- the step chrome: labeled back, rungs, "Step N of M" ---------- */
.step-top{padding:var(--s6) var(--gutter) 0; flex:0 0 auto}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); min-block-size:var(--tap-min)}
.back{display:inline-flex; align-items:center; gap:var(--s1); min-block-size:var(--tap-min);
  margin-inline-start:calc(-1 * var(--s2)); padding-inline:var(--s2); border-radius:var(--r-pill);
  font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink); text-decoration:none}
.back:active{background:var(--sunk)}
.back svg{inline-size:var(--icon-lg); block-size:var(--icon-lg); stroke:var(--ink); fill:none; stroke-width:var(--stroke-chevron); stroke-linecap:round; stroke-linejoin:round}
[dir="rtl"] .back svg{transform:scaleX(-1)} /* "back" is a direction — it mirrors. Ticks never do. */
.quietlink{min-block-size:var(--tap-min); padding-inline:var(--s3); border-radius:var(--r-pill); display:inline-flex; align-items:center;
  font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink-2); text-decoration:none}
.quietlink:active{background:var(--sunk)}
.progress{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-block:var(--s4) var(--s5)}
.rungs{display:flex; gap:var(--rung-gap); flex:1}
.rungs i{flex:1; block-size:var(--rung-h); border-radius:var(--r-rung); background:var(--line-2); overflow:hidden; position:relative}
.rungs i::after{content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-pop) var(--spring-soft); transition-delay:var(--rd, 0ms)}
[dir="rtl"] .rungs i::after{transform-origin:right}
.rungs.filled i.on::after{transform:scaleX(1)}
/* a long script: one bar, not thirty rungs */
.bar{flex:1; block-size:var(--rung-h); border-radius:var(--r-rung); background:var(--line-2); overflow:hidden; position:relative}
.bar::after{content:""; position:absolute; inset:0; background:var(--accent); transform:scaleX(var(--fill, 0)); transform-origin:left;
  transition:transform var(--d-pop) var(--spring-soft)}
[dir="rtl"] .bar::after{transform-origin:right}
.stepno{font-size:var(--text-caption); font-weight:var(--weight-medium); color:var(--ink-3); white-space:nowrap}
.step-top .lede, .lede{margin-block-start:var(--s3); font-size:var(--text-body-sm); font-weight:var(--weight-regular); color:var(--ink-2); line-height:var(--leading-loose)}
.lede b{font-weight:var(--weight-bold); color:var(--ink)}

.block{padding:var(--s8) var(--gutter) 0}
.block:first-of-type{padding-block-start:var(--s6)}
.block.tight{padding-block-start:var(--s5)}
.block .sub{margin-block-start:var(--s1); font-size:var(--text-small); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-normal)}
.stepfoot{padding:var(--s10) var(--gutter) var(--s10); font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-airy)}
.stepfoot a{font-weight:var(--weight-bold); color:var(--ink-2)}

/* ---------- the gate: one primary, and the line that says what's missing ---------- */
.gobar{position:relative; flex:0 0 auto; z-index:var(--z-dock); background:var(--ground);
  padding:var(--s4) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom))}
.gobar::before{content:""; position:absolute; inset-block-end:100%; inset-inline:0; block-size:var(--dock-fade);
  background:linear-gradient(to bottom, var(--ground-0), var(--ground)); pointer-events:none}
.go{inline-size:100%; min-block-size:var(--control-lg); border-radius:var(--r-btn); font-size:var(--text-subhead); font-weight:var(--weight-bold);
  background:var(--sunk); color:var(--ink-3); box-shadow:none; display:flex; align-items:center; justify-content:center; gap:var(--s2);
  transition:background var(--d-base) var(--ease), color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), transform var(--d-press) var(--out)}
.go.ready{background:var(--accent); color:var(--accent-ink); box-shadow:var(--lift-2)}
.go.ready.armed{animation:armed var(--d-arm) var(--spring) backwards}
@keyframes armed{0%{transform:scale(1)}34%{transform:scale(var(--arm-scale))}70%{transform:scale(var(--arm-settle))}100%{transform:scale(1)}}
.go.ready:active{transform:scale(var(--press-scale-plate)); background:var(--accent-press)}
.go .tk{inline-size:0; block-size:var(--icon-md); overflow:hidden; opacity:0; display:grid; place-items:center;
  transition:inline-size var(--d-base) var(--spring), opacity var(--d-quick) var(--ease)}
.go .tk svg{inline-size:var(--icon-md); block-size:var(--icon-md); fill:none; stroke:var(--accent-ink); stroke-width:var(--stroke-icon-lg); stroke-linecap:round; stroke-linejoin:round}
.go.done .tk{inline-size:var(--icon-md); opacity:1}
.go.busy{background:var(--accent-press); color:var(--accent-ink)}
.go.busy .lbl{opacity:var(--muted-opacity)}
.need{margin-block-start:var(--s3); text-align:center; font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); min-block-size:var(--s5)}
.need.badword{color:var(--bad)}
.gobar .ghostbtn{margin-block-start:var(--s3)}

/* ---------- selections ---------- */
.list{margin-block-start:var(--s4); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-in); box-shadow:var(--lift-1); overflow:hidden}
.list.tight{margin-block-start:0}
.pick{display:flex; align-items:center; gap:var(--s4); inline-size:100%; min-block-size:var(--control-md); padding:var(--s3) var(--s4); text-align:start; position:relative;
  transition:background var(--d-quick) var(--ease)}
.pick + .pick::before{content:""; position:absolute; inset-block-start:0; inset-inline-start:var(--list-inset); inset-inline-end:0; block-size:var(--line-w); background:var(--line)}
.pick:active{background:var(--sunk)}
.pick .mk{inline-size:var(--mark); block-size:var(--mark); border-radius:var(--r-pill); border:var(--line-w-mark) solid var(--line-2); flex:0 0 auto; display:grid; place-items:center;
  transition:border-color var(--d-quick) var(--ease), background var(--d-quick) var(--ease)}
.pick .mk::after{content:""; inline-size:var(--mark-dot); block-size:var(--mark-dot); border-radius:var(--r-pill); background:var(--accent-ink); transform:scale(0); transition:transform var(--d-base) var(--spring)}
.pick .t{font-size:var(--text-body); font-weight:var(--weight-medium)}
.pick .t small{display:block; font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); margin-block-start:var(--line-w); line-height:var(--leading-normal)}
.pick[aria-checked="true"]{background:var(--accent-quiet)}
.pick[aria-checked="true"] .mk{border-color:var(--accent); background:var(--accent)}
.pick[aria-checked="true"] .mk::after{transform:scale(1)}
/* the checkbox variant: a tick, not a dot. The tick never mirrors. */
.pick.tickbox .mk::after{display:none}
.pick.tickbox .mk svg{inline-size:var(--icon-sm); block-size:var(--icon-sm); stroke:var(--accent-ink); fill:none; stroke-width:var(--stroke-icon); stroke-linecap:round; stroke-linejoin:round;
  transform:scale(0); transition:transform var(--d-base) var(--spring)}
.pick.tickbox[aria-checked="true"] .mk svg{transform:scale(1)}
/* a plain row: a label, a value, an onward chevron */
.rowbtn{display:flex; align-items:center; gap:var(--s3); inline-size:100%; min-block-size:var(--control-md); padding:var(--s3) var(--s4); text-align:start; position:relative;
  text-decoration:none; transition:background var(--d-quick) var(--ease)}
.rowbtn + .rowbtn::before{content:""; position:absolute; inset-block-start:0; inset-inline-start:var(--s4); inset-inline-end:0; block-size:var(--line-w); background:var(--line)}
.rowbtn:active{background:var(--sunk)}
.rowbtn .tx{flex:1; min-inline-size:0}
.rowbtn b{display:block; font-size:var(--text-body); font-weight:var(--weight-medium)}
.rowbtn span{display:block; font-size:var(--text-caption); color:var(--ink-3); margin-block-start:var(--line-w)}
.rowbtn > svg.chev{inline-size:var(--icon-sm); block-size:var(--icon-sm); stroke:var(--ink-3); fill:none; stroke-width:var(--stroke-icon); stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
[dir="rtl"] .rowbtn > svg.chev{transform:scaleX(-1)} /* "onward" is a direction — it mirrors */
.plates{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-block-start:var(--s4)}
.plates.stack{grid-template-columns:1fr}
.plate{background:var(--surface); border:var(--line-w-strong) solid var(--line); border-radius:var(--r-in); padding:var(--s4); text-align:start; min-block-size:var(--plate-min);
  box-shadow:var(--lift-1); display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s1);
  transition:border-color var(--d-quick) var(--ease), background var(--d-quick) var(--ease), transform var(--d-press) var(--out), box-shadow var(--d-press) var(--out)}
.plate:active{transform:scale(var(--press-scale-plate)); box-shadow:var(--press-1)}
.plate b{font-size:var(--text-body); font-weight:var(--weight-bold)}
.plate span{font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-normal)}
.plate[aria-checked="true"]{border-color:var(--accent); background:var(--accent-quiet)}
.plates.mini .plate{min-block-size:var(--control-lg); justify-content:center}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-start:var(--s4)}
.chip{min-block-size:var(--tap-min); padding-inline:var(--s4); border-radius:var(--r-pill); background:var(--surface); border:var(--line-w-strong) solid var(--line);
  font-size:var(--text-small); font-weight:var(--weight-medium); color:var(--ink-2); display:flex; align-items:center; gap:var(--s2); box-shadow:var(--lift-1);
  transition:border-color var(--d-quick) var(--ease), background var(--d-quick) var(--ease), color var(--d-quick) var(--ease), transform var(--d-press) var(--out), box-shadow var(--d-press) var(--out)}
.chip:active{transform:scale(var(--press-scale-chip)); box-shadow:var(--press-1)}
.chip[aria-checked="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); animation:chipPop var(--d-pop) var(--spring)}
@keyframes chipPop{0%{transform:scale(1)}40%{transform:scale(var(--chip-pop-scale))}100%{transform:scale(1)}}
/* the three-way firmness control: preference / strongly prefer / dealbreaker */
.segment{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s2); margin-block-start:var(--s3)}
.segment .seg{min-block-size:var(--tap-min); border-radius:var(--r-pill); background:var(--surface); border:var(--line-w-strong) solid var(--line); box-shadow:var(--lift-1);
  font-size:var(--text-caption); font-weight:var(--weight-bold); color:var(--ink-2); padding-inline:var(--s2); text-align:center; line-height:var(--leading-snug);
  transition:border-color var(--d-quick) var(--ease), background var(--d-quick) var(--ease), color var(--d-quick) var(--ease), transform var(--d-press) var(--out)}
.segment .seg:active{transform:scale(var(--press-scale-chip))}
.segment .seg[aria-checked="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.firmhead{margin-block-start:var(--s8); font-size:var(--text-small); font-weight:var(--weight-bold)}
.firmhead small{display:block; margin-block-start:var(--s1); font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-normal)}
/* the reveal */
.reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-slow) var(--spring-soft)}
.reveal.show{grid-template-rows:1fr}
.reveal > div{overflow:hidden}
.reveal .inner{padding-block-start:var(--s6)}

/* ---------- stamps: confirmation where the action happened, and its error twin ---------- */
.stamp{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-base) var(--spring-soft);
  background:var(--good-quiet); border:var(--line-w) solid var(--good-line); border-radius:var(--r-in); margin-block-start:var(--s4)}
.stamp.show{grid-template-rows:1fr}
.stamp > span{overflow:hidden; display:block}
.stamp .in{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4)}
.stamp .tick{inline-size:var(--mark); block-size:var(--mark); border-radius:var(--r-pill); background:var(--good); flex:0 0 auto;
  display:grid; place-items:center; margin-block-start:var(--line-w); color:var(--accent-ink); font-size:var(--text-small); font-weight:var(--weight-heavy)}
.stamp .tick svg{inline-size:var(--icon-sm); block-size:var(--icon-sm); stroke:currentColor; fill:none; stroke-width:var(--stroke-icon); stroke-linecap:round; stroke-linejoin:round}
.stamp.show .tick{animation:pop var(--d-pop) var(--spring) var(--d-stagger) backwards}
@keyframes pop{from{transform:scale(0)} to{transform:scale(1)}}
.stamp b{display:block; font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--good-ink)}
.stamp small{display:block; font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--good-ink-2); margin-block-start:var(--line-w-mark); line-height:var(--leading-loose)}
.stamp .grow{flex:1; min-inline-size:0}
.stamp .act-in{margin-block-start:var(--s3); min-block-size:var(--control-sm); padding-inline:var(--s4); border-radius:var(--r-pill); background:var(--surface);
  border:var(--line-w) solid var(--line-2); font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink); box-shadow:var(--lift-1); display:inline-flex; align-items:center}
.stamp.bad{background:var(--bad-quiet); border-color:var(--bad-line)}
.stamp.bad .tick{background:var(--bad)}
.stamp.bad b{color:var(--bad-ink)}
.stamp.bad small{color:var(--bad-ink)}

/* ---------- fields ---------- */
.field{margin-block-start:var(--s5)}
.field > label{display:block; font-size:var(--text-small); font-weight:var(--weight-bold); margin-block-end:var(--s2)}
.input{inline-size:100%; min-block-size:var(--control-md); background:var(--surface); border:var(--line-w-strong) solid var(--line); border-radius:var(--r-in);
  padding:var(--s3) var(--s4); font:inherit; font-size:var(--text-body); font-weight:var(--weight-medium); color:var(--ink); box-shadow:var(--lift-1)}
.input::placeholder{color:var(--ink-3); font-weight:var(--weight-regular)}
.input.bad{border-color:var(--bad)}
.input:disabled{background:var(--sunk); color:var(--ink-3); box-shadow:none}
/* a typing box's size is compose.css's; the doors keep only their leading */
textarea.input{min-block-size:var(--compose-min); line-height:var(--leading-loose)}
.fieldnote{margin-block-start:var(--s2); font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-loose)}
.fieldnote.goodword{color:var(--good-ink-2)}
.fieldnote.badword{color:var(--bad)}
.fieldrow{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); margin-block-end:var(--s2)}
.fieldrow label{margin-block-end:0; font-size:var(--text-small); font-weight:var(--weight-bold)}
.fieldrow{align-items:center}
.fieldrow .quietlink{min-block-size:var(--tap-min); margin-block:calc((var(--s6) - var(--tap-min)) / 2); padding-inline:var(--s2); margin-inline-end:calc(-1 * var(--s2)); font-size:var(--text-caption)}
.phone-row{display:grid; grid-template-columns:2fr 3fr; gap:var(--s3)}
select.input{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:calc(100% - var(--s4) - var(--s1)) 50%, calc(100% - var(--s4)) 50%;
  background-size:var(--s1) var(--s1), var(--s1) var(--s1); background-repeat:no-repeat}
[dir="rtl"] select.input{background-position:calc(var(--s4) + var(--s1)) 50%, var(--s4) 50%}
input[type=tel].input, input[type=password].input, input.code{direction:ltr; text-align:start; font-family:var(--font-mono); font-size:var(--text-body-sm)}
[dir="rtl"] input[type=tel].input, [dir="rtl"] input[type=password].input{text-align:end}
input[type=password].input{letter-spacing:var(--s1)}
/* the 6-digit code: one wide mono field, digits spaced */
input.code{font-size:var(--text-title); font-weight:var(--weight-heavy); letter-spacing:var(--s3); text-align:center; min-block-size:var(--control-lg)}
[dir="rtl"] input.code{text-align:center}
/* the password field with its show/hide */
.pwwrap{position:relative}
.pwwrap .input{padding-inline-end:calc(var(--tap-min) + var(--s3))}
.pwwrap .eye{position:absolute; inset-block-start:50%; transform:translateY(-50%); inset-inline-end:var(--s1); inline-size:var(--tap-min); block-size:var(--tap-min);
  display:grid; place-items:center; border-radius:var(--r-pill); color:var(--ink-2)}
.pwwrap .eye:active{background:var(--sunk)}
.pwwrap .eye svg{inline-size:var(--icon-lg); block-size:var(--icon-lg); stroke:currentColor; fill:none; stroke-width:var(--line-w-mark); stroke-linecap:round; stroke-linejoin:round}
/* the range slider, both directions */
.rangewrap{margin-block-start:var(--s5); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-in); box-shadow:var(--lift-1); padding:var(--s4)}
.rangewrap .val{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3)}
.rangewrap .val b{font-size:calc(var(--text-title) * var(--script-display-scale)); font-weight:var(--weight-heavy); letter-spacing:var(--tracking-title)}
.rangewrap .val span{font-size:var(--text-small); font-weight:var(--weight-medium); color:var(--ink-3)}
.rangewrap input[type=range]{inline-size:100%; accent-color:var(--accent); min-block-size:var(--tap-min); margin-block-start:var(--s2)}
.rangewrap label{display:block; font-size:var(--text-caption); font-weight:var(--weight-bold); color:var(--ink-3); margin-block-start:var(--s3)}
.rangewrap label:first-child{margin-block-start:0}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}

/* ---------- buttons that are not the primary ---------- */
.ghostbtn{inline-size:100%; min-block-size:var(--control-md); border-radius:var(--r-btn); background:var(--surface); border:var(--line-w) solid var(--line-2);
  font-size:var(--text-body-sm); font-weight:var(--weight-bold); box-shadow:var(--lift-1); display:flex; align-items:center; justify-content:center; gap:var(--s2);
  text-decoration:none; color:var(--ink); transition:transform var(--d-press) var(--out), box-shadow var(--d-press) var(--out), background var(--d-quick) var(--ease)}
.ghostbtn:active{background:var(--sunk); transform:scale(var(--press-scale)); box-shadow:var(--press-1)}
.smallghost{min-block-size:var(--tap-min); padding-inline:var(--s4); border-radius:var(--r-pill); background:var(--surface); border:var(--line-w) solid var(--line-2);
  font-size:var(--text-small); font-weight:var(--weight-bold); box-shadow:var(--lift-1); display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); flex:0 0 auto; text-decoration:none}
.smallghost:active{background:var(--sunk)}
.linkline{display:inline-flex; align-items:center; gap:var(--s1); min-block-size:var(--tap-min); font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink-2);
  text-decoration:none; padding-inline:var(--s1); margin-inline-start:calc(-1 * var(--s1)); border-radius:var(--r-focus)}
.linkline:active{background:var(--sunk)}
.linkrow{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); padding:var(--s6) var(--gutter) 0}
.linkrow.center{align-items:center}

/* ---------- the door: the wordmark and the statement ---------- */
.door-top{padding:var(--s8) var(--gutter) 0; flex:0 0 auto}
.wordmark{display:flex; align-items:center; gap:var(--s2); min-block-size:var(--tap-min); font-size:var(--text-subhead); font-weight:var(--weight-heavy); letter-spacing:var(--tracking-subhead); text-decoration:none}
.wordmark img{inline-size:var(--avatar-sm); block-size:var(--avatar-sm); border-radius:var(--r-focus); display:block}
.door-top h1{margin-block-start:var(--s8)}
.rolepill{display:inline-flex; align-items:center; gap:var(--s2); min-block-size:var(--s8); padding-inline:var(--s3); border-radius:var(--r-pill);
  background:var(--surface); border:var(--line-w) solid var(--line); box-shadow:var(--lift-1); font-size:var(--text-caption); font-weight:var(--weight-bold); color:var(--ink-2); margin-block-start:var(--s6)}

/* ---------- the single statement screen (sent, done, refused, offline) ---------- */
.statement{margin-block:auto; padding:var(--s12) var(--gutter) var(--s8); display:flex; flex-direction:column; align-items:center; text-align:center}
.bigtick{inline-size:var(--avatar-xl); block-size:var(--avatar-xl); border-radius:var(--r-pill); background:var(--good); color:var(--accent-ink);
  display:grid; place-items:center; box-shadow:var(--lift-2); margin-block-end:var(--s6); animation:pop var(--d-pop) var(--spring) backwards}
.bigtick svg{inline-size:var(--icon-xl); block-size:var(--icon-xl); stroke:currentColor; fill:none; stroke-width:var(--stroke-icon); stroke-linecap:round; stroke-linejoin:round}
.bigtick.bad{background:var(--bad)}
.bigtick.quiet{background:var(--surface); color:var(--ink-2); border:var(--line-w) solid var(--line); box-shadow:var(--lift-1)}
.statement .body{margin-block-start:var(--s3); font-size:var(--text-body-sm); font-weight:var(--weight-regular); color:var(--ink-2); line-height:var(--leading-airy);
  max-inline-size:calc(var(--viewport) - var(--s16) - var(--s6))}
.statement .body b{font-weight:var(--weight-bold); color:var(--ink)}
.whenpill{margin-block-start:var(--s6); display:inline-flex; align-items:center; gap:var(--s2); min-block-size:var(--tap-min); padding-inline:var(--s4); border-radius:var(--r-pill);
  background:var(--surface); border:var(--line-w) solid var(--line); box-shadow:var(--lift-1); font-size:var(--text-small); font-weight:var(--weight-bold)}
.whenpill time{unicode-bidi:isolate}
.tl{margin:var(--s8) var(--gutter) 0; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-card); box-shadow:var(--lift-2); overflow:hidden; text-align:start}
.tlrow{display:flex; gap:var(--s4); padding:var(--s4) var(--s5); position:relative}
.tlrow + .tlrow::before{content:""; position:absolute; inset-block-start:0; inset-inline-start:calc(var(--s5) + var(--mark) + var(--s4)); inset-inline-end:0; block-size:var(--line-w); background:var(--line)}
.tlmk{inline-size:var(--mark); block-size:var(--mark); border-radius:var(--r-pill); flex:0 0 auto; display:grid; place-items:center; margin-block-start:var(--line-w)}
.tlmk.done{background:var(--good); color:var(--accent-ink)}
.tlmk.done svg{inline-size:var(--icon-sm); block-size:var(--icon-sm); stroke:currentColor; fill:none; stroke-width:var(--stroke-icon); stroke-linecap:round; stroke-linejoin:round}
.tlmk.now{border:var(--line-w-mark) solid var(--accent)}
.tlmk.now i{inline-size:var(--mark-dot); block-size:var(--mark-dot); border-radius:var(--r-pill); background:var(--accent);
  animation:nowPulse var(--d-breathe) ease-in-out infinite} /* the one ambient motion on this screen */
@keyframes nowPulse{0%,100%{transform:scale(var(--halo-min)); opacity:var(--halo-opacity)} 50%{transform:scale(var(--halo-max)); opacity:1}}
.tlmk.later{border:var(--line-w-mark) solid var(--line-2)}
.tlrow b{display:block; font-size:var(--text-body); font-weight:var(--weight-bold); line-height:var(--leading-snug)}
.tlrow p{margin-block-start:var(--line-w-mark); font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-2); line-height:var(--leading-loose)}
.donefoot{padding:var(--s8) var(--gutter) calc(var(--s10) + env(safe-area-inset-bottom)); text-align:center}
.donefoot .keep{font-size:var(--text-caption); font-weight:var(--weight-regular); color:var(--ink-3); line-height:var(--leading-loose)}
.protoreset{margin-block-start:var(--s5); min-block-size:var(--tap-min); padding-inline:var(--s4); border-radius:var(--r-pill);
  font-size:var(--text-caption); font-weight:var(--weight-medium); color:var(--ink-3)}
.protoreset:active{background:var(--sunk)}
.prototag{font-size:var(--text-micro); font-weight:var(--weight-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:var(--tracking-normal);
  border:var(--line-w) solid var(--line-2); border-radius:var(--r-pill); padding:var(--line-w-mark) var(--s2); white-space:nowrap}

/* ---------- the quiet language switch ---------- */
.langbtn{min-block-size:var(--tap-min); padding-inline:var(--s3); border-radius:var(--r-pill); font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink-2)}
.langbtn:active{background:var(--sunk)}

/* ---------- loading: the shape of what's coming ---------- */
.sk{display:block; border-radius:var(--r-pill); background:var(--sunk); animation:breatheSk var(--d-breathe) var(--ease) infinite}
.sk.line{block-size:var(--s3); inline-size:100%}
.sk.title{block-size:var(--s6); inline-size:70%; margin-block-start:var(--s4)}
.sk.lede{block-size:var(--s3); inline-size:88%; margin-block-start:var(--s4)}
.sk.lede2{block-size:var(--s3); inline-size:60%; margin-block-start:var(--s2)}
.sk.row{block-size:var(--control-md); inline-size:100%; border-radius:0; background:var(--sunk)}
.sk.field{block-size:var(--control-md); inline-size:100%; border-radius:var(--r-in); margin-block-start:var(--s5)}
.sk.label{block-size:var(--s3); inline-size:30%; margin-block-start:var(--s5)}
.sk.btn{block-size:var(--control-lg); inline-size:100%; border-radius:var(--r-btn)}
.sklist{margin-block-start:var(--s4); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-in); overflow:hidden; box-shadow:var(--lift-1)}
.sklist .sk.row + .sk.row{border-block-start:var(--line-w) solid var(--line)}
@keyframes breatheSk{0%,100%{opacity:1} 50%{opacity:var(--skeleton-min)}}

/* ---------- the onboarding page control: dots that move with the swipe, and "N of M" ---------- */
.dots{display:flex; justify-content:center; align-items:center; gap:var(--s2); min-block-size:var(--tap-min)}
.dots i{inline-size:var(--dot); block-size:var(--dot); border-radius:var(--r-pill); background:var(--line-2);
  transition:background var(--d-quick) var(--ease), inline-size var(--d-base) var(--spring-soft)}
.dots i.on{background:var(--accent); inline-size:var(--s5)}
.dots .stepno{margin-inline-start:var(--s2)}

/* ---------- a bottom sheet, for the small worlds that need one ---------- */
.scrim{position:absolute; inset:0; z-index:var(--z-overlay); background:var(--scrim); opacity:0; pointer-events:none; transition:opacity var(--d-base) var(--ease)}
.scrim.show{opacity:1; pointer-events:auto}
.sheet{position:absolute; inset-inline:0; inset-block-end:0; z-index:var(--z-toast); background:var(--ground);
  border-start-start-radius:var(--r-card); border-start-end-radius:var(--r-card); box-shadow:var(--lift-3);
  padding:var(--s3) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform var(--d-base) var(--spring-soft)}
.sheet.show{transform:none}
.sheet .grab{inline-size:var(--s10); block-size:var(--s1); border-radius:var(--r-pill); background:var(--line-2); margin:0 auto var(--s4)}
.sheet-h p{margin-block-start:var(--s2); font-size:var(--text-body-sm); color:var(--ink-2); line-height:var(--leading-loose)}
.sheet-foot{display:grid; gap:var(--s3); margin-block-start:var(--s6)}

/* ---------- reduced motion: states switch; the words and colours all remain ---------- */
@media (prefers-reduced-motion:reduce){
  .sk, .tlmk.now i{animation:none}
  .tlmk.now i{opacity:1; transform:none}
}