/* The real web app on top of the prototype kit: real viewport and safe areas instead of a drawn phone, a framed
   column on desktop, and the screens the prototype did not have (join, ask your AI, music, sources detail,
   compare, admin). Colors and sizes come from theme.css tokens. */
:root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --top: calc(var(--safe-t) + 8px); }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { display: block; background: var(--bone); }
.phone { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0 !important; box-shadow: none !important; margin: 0 auto; }
.status, .homebar { display: none; }
#screens { position: absolute; inset: 0; }
.scr { padding: var(--top) 0 calc(var(--safe-b) + 10px); }
.scr.tabbed { padding-bottom: 0; }
.scr.tabbed .body { padding-bottom: calc(110px + var(--safe-b)); }
.scr.tabbed:not(:has(> .nav))::before { top: var(--top); }
.tabbar { height: calc(58px + var(--safe-b)); padding-bottom: var(--safe-b); }
.tabbar .tab { padding-top: 7px; }
.body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
input, textarea, select { font-size: 16px; } /* no zoom on iOS focus */

/* a small tablet: one calm column, framed (from 768 px, web/desk.css uses the whole window) */
@media (min-width: 700px) and (max-width: 767.98px) {
  body { background: radial-gradient(120% 90% at 50% 0%, var(--stage-1), var(--stage-2)); display: grid; place-items: center; }
  .phone { width: 430px; height: min(920px, calc(100dvh - 48px)); border-radius: 40px !important;
    box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .18), 0 50px 100px -30px rgb(var(--ink-rgb) / .45), 0 30px 60px -40px rgb(var(--ink-rgb) / .4) !important; }
  :root { --top: 14px; --safe-b: 0px; }
}

/* small helpers */
.demo { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.demo i { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.err-t { color: var(--danger); font-size: 14px; margin-top: 10px; min-height: 18px; }
.hint { font-size: 14px; color: var(--muted); line-height: 1.4; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.spin.lg { width: 28px; height: 28px; }

/* join */
.jfield { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.jfield label { font-size: 13px; font-weight: 600; color: var(--ink-2); padding-left: 4px; }
.jfield input { height: 56px; border-radius: var(--r-m); border: .5px solid var(--hair); background: var(--card); box-shadow: var(--sh-1); padding: 0 16px; outline: 0; font-size: 17px; }
.jfield input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgb(var(--clay-rgb) / .14); }

/* link rows with live status */
.frow .t span.err { color: var(--danger); }
.frow .x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.frow.is-failed .ok { display: none; }
.frow .spin { flex: none; }

/* ask your AI */
.aicard { margin-top: 18px; padding: 18px; }
.aicard .lede { font: italic 400 20px/1.3 var(--serif); color: var(--ink-2); letter-spacing: -.01em; }
.aicard .full { margin-top: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); background: var(--tint); border-radius: var(--r-s); padding: 12px 14px; }
.aibtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.aibtn { height: 50px; border-radius: 14px; background: var(--card); border: .5px solid var(--hair); box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 600; transition: transform .25s var(--spring-pop); }
.aibtn:active { transform: scale(.96); }
.aibtn .gl2 { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; }
.tips { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tips div { display: flex; gap: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.tips b { color: var(--clay); font-weight: 600; font-variant-numeric: tabular-nums; }
textarea.paste { height: 180px; }
.parsed { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--green); }
.parsed i { width: 20px; height: 20px; border-radius: 50%; background: var(--green-bg); display: grid; place-items: center; }

/* music */
.mcard { margin-top: 18px; padding: 18px; }
.mcard h3 { font: 400 26px/1.05 var(--serif); letter-spacing: -.015em; margin-bottom: 6px; }
.sp-glyph { width: 40px; height: 40px; border-radius: 12px; background: #1ed760; display: grid; place-items: center; float: right; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: .5px; background: var(--hair); }
.achips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.achip { height: 34px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--card); border: .5px solid var(--hair); display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; animation: rise .35s var(--spring-b); }
.achip button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }

/* voice */
.vmodes { margin-top: 18px; }
.vtype { height: 200px; }
.vnote { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }

/* weaving */
.weave .wv-count { margin-top: 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.weave .wv-err { margin-top: 18px; text-align: center; padding: 0 28px; }

details.more summary { cursor: pointer; font-weight: 600; color: var(--deep); font-size: 15px; padding: 6px 0; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }

/* home extras */
.fresh { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; }
.fresh .t { flex: 1; } .fresh b { display: block; font-size: 15px; } .fresh span { font-size: 13px; color: var(--muted); }

/* sources */
.srow .t span.st { display: block; }
.srow .t span.err { color: var(--danger); }
.srow .t span.busy { color: var(--clay); }
.addrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.addbtn { height: 54px; border-radius: var(--r-m); background: var(--card); border: .5px solid var(--hair); box-shadow: var(--sh-1); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14.5px; font-weight: 600; text-align: left; }
.addbtn .glyph { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.rec { padding: 12px 14px; }
.rec b { display: block; font-size: 14px; margin-bottom: 4px; }
.rec p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; white-space: pre-wrap; max-height: 9.5em; overflow: hidden; }
.rec.open p { max-height: none; }
.rec a { font-size: 12.5px; color: var(--deep); }
.sig { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 8px 0; border-top: .5px solid var(--hair-2); }
.sig:first-child { border-top: 0; }
.sig b { flex: none; width: 104px; font-weight: 600; color: var(--clay); }
.sig q { color: var(--ink-2); font-style: italic; quotes: none; }
.src-hero { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.src-hero h1 { font: 400 34px/1.02 var(--serif); letter-spacing: -.02em; }
.src-hero span { font-size: 13.5px; color: var(--muted); word-break: break-all; }

/* compare */
.inv-card { margin-top: 16px; padding: 22px 20px; text-align: center; }
.inv-card .meds { display: flex; justify-content: center; margin-bottom: 14px; }
.inv-card .meds svg { flex: none; }
.inv-card .meds .q { width: 72px; height: 72px; margin-left: -16px; border-radius: 50%; border: 1.5px dashed rgb(var(--ink-rgb) / .25); display: grid; place-items: center; font: 400 30px var(--serif); color: var(--muted); background: var(--bone); }
.inv-card h3 { font: 400 28px/1.05 var(--serif); letter-spacing: -.018em; }
.inv-card p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.linkbox { margin-top: 14px; display: flex; align-items: center; gap: 8px; background: var(--tint); border-radius: 14px; padding: 6px 6px 6px 14px; }
.linkbox span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); text-align: left; }
.linkbox button { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--ink); color: var(--card); font-weight: 600; font-size: 14px; }
.prow .pmark { flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.writing { text-align: center; padding: 40px 10px; }
.writing p { font: italic 400 22px/1.3 var(--serif); color: var(--ink-2); margin-top: 14px; }

/* settings */
.reclink { word-break: break-all; font-size: 13.5px; background: var(--tint); border-radius: 12px; padding: 12px 14px; margin-top: 12px; color: var(--ink-2); }

/* admin */
.adm { font-size: 13.5px; }
.adm table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.adm td, .adm th { text-align: left; padding: 6px 6px; border-top: .5px solid var(--hair-2); font-variant-numeric: tabular-nums; }
.adm th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.adm .num { text-align: right; }
.adm .tile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm .tile div { padding: 12px; }
.adm .tile b { display: block; font: 400 30px/1 var(--serif); }
.adm .tile span { font-size: 12px; color: var(--muted); }
.demo-pos { position: absolute; top: calc(var(--top) + 6px); right: 16px; z-index: 3; }
.h-acts .demo { margin-right: 4px; }
.prow { width: 100%; text-align: left; }
a.row { color: inherit; text-decoration: none; }
/* A focused input inside a sliding screen must never scroll the frame sideways. */
.phone, #screens { overflow: hidden; overflow: clip; }
.svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; padding: 0 8px; gap: 7px; }
.svc .glyph { flex: none; }

/* personal marks (web/mark.js); colors come from --mark-* in theme.css */
.jm { display: block; color: var(--mark-ink, var(--ink)); }
.wl-art { width: 240px; max-width: 70%; margin: 56px auto 0; }
.wl-art .jm { width: 100%; height: auto; }
.wl-brand { font-size: 30px; }
.wv-art { width: 200px; }
.wv-art .jm { width: 100%; height: auto; }
.reveal { align-items: center; justify-content: center; text-align: center; padding-left: 24px; padding-right: 24px; }
.rv-mark { width: 260px; max-width: 72vw; }
.rv-mark .jm { width: 100%; height: auto; }
.rv-name { margin-top: 22px; font: 400 52px/1 var(--serif); letter-spacing: -.02em; }
.rv-more { margin-top: 12px; max-width: 300px; }
.rv-foot { width: 100%; margin-top: 28px; padding: 0; }
.reveal.on .rv-name { animation: rise2 1s var(--ease-out) 1.8s both; }
.reveal.on .rv-more { animation: rise2 1s var(--ease-out) 2.1s both; }
.reveal.on .rv-foot { animation: rise2 1s var(--ease-out) 2.4s both; }
.h-top .who { margin-top: 0; gap: 12px; }
.h-top .who b { font-size: 26px; }
.h-top .who .sharp { margin-top: 2px; font-size: 16px; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.area-b { background: var(--card); border: .5px solid var(--hair); border-radius: var(--r-m); padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; box-shadow: var(--sh-1); }
.area-b i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.area-b b { font: 400 18px/1.1 var(--serif); }
.area-b small { font-size: 12px; color: var(--muted); }
.inv .inv-mark { margin: 12vh auto 0; width: 200px; max-width: 60vw; }
.inv .inv-mark .jm { width: 100%; height: auto; }
.inv h1 { margin: 26px auto 0; max-width: 320px; }
.inv.on h1 { animation: rise2 1s var(--ease-out) 1.4s both; }
.scr.on > .foot:has([data-a="inviteJoin"]), .scr.on > .foot:has([data-a="acceptInvite"]) { animation: rise2 1s var(--ease-out) 1.8s both; }
.p-marks { display: flex; justify-content: center; margin: 4px 0 12px; }
.p-marks .jm { max-width: 100%; height: auto; }
.row .jm { flex: none; }

/* ---------- B2: pair-first flow. Tokens only, so both themes, light and dark, style these. ---------- */
/* compare landing: one quiet line under the invitation */
.inv .inv-sub { margin: 12px auto 0; max-width: 300px; color: var(--muted); font-size: 15px; }
.inv.on .inv-sub { animation: rise2 1s var(--ease-out) 1.6s both; }

/* links: one field that takes anything, then a quiet list of platforms; each opens a small field in place, and an
   added platform becomes its source row (handle, live status, Retry or Read the rest, remove) */
#linkF .add { height: 44px; padding: 0 16px; }
#linkF + .err-t { min-height: 0; margin: 8px 2px 0; }
#linkF + .err-t:empty { margin: 0; }
.pl-h0 { margin-top: 26px; }
.plist { border-top: .5px solid var(--hair); }
.pl { border-bottom: .5px solid var(--hair); }
.pl .glyph { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; flex: none; }
.pl-h, .pl.soon { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 2px; text-align: left; color: var(--ink); }
.pl-t { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-i { flex: none; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--muted); }
.pl-i svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.pl.open .pl-i svg { transform: rotate(45deg); }
.pl.soon { opacity: .42; }
.pl-v { flex: none; font-size: 13px; color: var(--muted); }
/* the row's field is the same field as the top one (each theme draws it), smaller and indented under the label */
.field.pl-f { margin: 0 0 14px 46px; height: 50px; padding-right: 4px; animation: rise .32s var(--ease-out); }
.field.pl-f input { font-size: 16px; }
.field.pl-f .add { height: 44px; }
.pl.src { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 2px; }
/* Only a row drawn for the first time rises in; status updates never replay it (I1: no flashing while reading). */
.pl.src.new { animation: rise .4s var(--ease-out); }
.pl.src .t { flex: 1; min-width: 0; }
.pl.src .t b { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl.src .t span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pl.src .t span.busy { color: var(--ink-2); }
.pl.src .t span.err { color: var(--danger); }
.pl.src .spin { flex: none; margin-right: 13px; }
.pl.src .ok { opacity: 1; transform: none; }
.pl.src .rm { flex: none; width: 44px; height: 44px; margin: 0 -12px 0 -8px; display: grid; place-items: center; color: var(--muted); }
.pl.src .rm svg { width: 11px; height: 11px; }
.pill-b { position: relative; flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-btn); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .35); white-space: nowrap; }
.pill-b::after { content: ""; position: absolute; inset: -6px -2px; }
.pill-b[disabled] { opacity: .4; }
.pl-more { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 2px; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.pl-more svg { color: var(--muted); }

/* "Also you?" chips: one tap to add, a small x to dismiss */
.also:empty { display: none; }
.also-h { margin: 20px 2px 8px; font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); font-weight: 600; }
.sgs { display: flex; flex-wrap: wrap; gap: 8px; }
.sg { display: inline-flex; align-items: center; max-width: 100%; border: .5px dashed rgb(var(--ink-rgb) / .4); border-radius: var(--r-s); background: transparent; animation: rise .35s var(--spring-b); }
.sg-add { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 4px 7px 10px; text-align: left; color: var(--ink); }
.sg-add svg { flex: none; width: 11px; height: 11px; color: var(--ink-2); }
.sg-add span { min-width: 0; }
.sg-add b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-add small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.sg-x svg { width: 10px; height: 10px; }

/* ask your AI as the wait step */
.readline { min-height: 18px; margin: 2px 2px 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-how { margin-top: 12px; }

/* first-run footers with a quiet second choice */
.foot .later { display: block; margin: 0 auto; padding: 6px 12px; color: var(--muted); font-weight: 500; }

/* share step */
.meds { display: flex; justify-content: center; margin-bottom: 14px; }
.meds svg { flex: none; }
.meds .q { width: 72px; height: 72px; margin-left: -16px; border-radius: 50%; border: 1.5px dashed rgb(var(--ink-rgb) / .25); display: grid; place-items: center; font: 400 30px var(--serif); color: var(--muted); background: var(--bone); }
.share-b { text-align: center; }
.share-b .sub { max-width: 320px; margin: 0 auto; }
.share-b #cmpLink { margin-top: 8px; }
.share-meds { margin: 6vh 0 18px; }
.share-meds .q { width: 88px; height: 88px; }

/* home: the main action first, the rest one tap away */
.h-cmp { margin-top: 22px; padding: 22px 20px; text-align: center; }
.h-cmp h3 { font: 400 28px/1.08 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.h-cmp p { margin: 6px 0 16px; font-size: 14.5px; color: var(--ink-2); }
.home .plist { margin-top: 2px; }
.h-more { margin-top: 28px; }
.h-areas summary { list-style: none; cursor: pointer; }
.h-areas summary::-webkit-details-marker { display: none; }
.h-areas[open] summary .chev { transform: rotate(90deg); }
.h-areas .areas { padding: 0 12px 12px; }
.h-more > .row, .h-areas { border-top: 1px solid var(--line); }
.h-more > :first-child { border-top: 0; }
.h-areas .row { border-top: 0; }

/* pair page */
.p-hero .upd { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.p-hero .upd .spin { width: 12px; height: 12px; }
.writing p.hint { margin: 8px auto 0; max-width: 290px; font: 400 15px/1.45 var(--sys); color: var(--muted); }
.writing.sm { padding: 26px 10px 10px; }
.writing.sm p { font-size: 18px; }
.thin { margin-top: 22px; padding: 14px 16px; border: .5px solid var(--hair); border-radius: var(--r-m); display: flex; align-items: center; gap: 12px; }
.thin p { flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.thin .lnk { flex: none; padding: 6px 0; }
.more-b { margin-top: 26px; text-align: center; }
.more-b .btn2 { width: 100%; }
.more-b .hint { margin-bottom: 10px; }
.long { margin-top: 10px; }
.l-intro { font: 400 21px/1.35 var(--serif); color: var(--ink); text-wrap: pretty; }
.pa.ls h4 { margin-top: 8px; font: 400 21px/1.2 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.note.sm { font-size: 18px; }
.note.sm b { font-size: 18px; }
.qs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qs li { font: italic 400 19px/1.3 var(--serif); color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--hair); }

/* the cards row lines up with the page margin when it snaps */
.hscroll { scroll-padding-inline: 20px; }
.h-cmp p, .share-b .sub, .inv .inv-sub { text-wrap: balance; }

/* ---------- B3: the onboarding ladder. Tokens only, so both themes, light and dark, style these. ---------- */
/* join: the consent line, quiet and complete */
.consent { margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.sheet .consent { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* where the person is: one small mark per step, never a percent */
.steps { display: flex; gap: 6px; align-items: center; }
.steps i { width: 18px; height: 3px; border-radius: 2px; background: rgb(var(--ink-rgb) / .14); transition: background-color .4s var(--ease-out), width .4s var(--ease-out); }
.steps i.done { background: var(--ink); }
.steps i.in_progress { background: rgb(var(--ink-rgb) / .5); }
.steps i.skipped { background: transparent; box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .45); }
.steps i.cur { width: 28px; background: var(--clay); }
.foot .later:empty { display: none; }

/* values quiz: one statement, six large answers */
.qz { display: flex; flex-direction: column; }
.qz-i { display: flex; flex-direction: column; flex: 1; }
.qz-n { margin: 6px 2px 0; font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); font-variant-numeric: tabular-nums; }
.qz-p { margin: 18px 2px 0; font-size: 15px; color: var(--muted); }
.qz-s { margin: 8px 0 22px; font: 400 29px/1.16 var(--serif); letter-spacing: -.014em; color: var(--ink); text-wrap: pretty; min-height: 3.5em; }
/* the answer control: six dots in a row, each larger than the last (the earlier product's quiz, 11 Nov). One tap answers.
   Themes set the tokens: --qz-dot (the dot), --qz-ring (the target's ring), --qz-on (the chosen ring and fill). */
.qz-dots { --qz-dot: var(--ink); --qz-ring: rgb(var(--ink-rgb) / .2); --qz-on: var(--ink);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: center; margin-top: 4px; }
.qz-d { aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent;
  box-shadow: inset 0 0 0 .5px var(--qz-ring); transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out), transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.qz-d i { display: block; width: calc(22% + var(--s) * 9%); aspect-ratio: 1; border-radius: 50%; background: var(--qz-dot); opacity: calc(.2 + var(--s) * .1);
  transition: opacity .25s var(--ease-out), transform .35s var(--spring-b); }
.qz-d:active { transform: scale(.94); }
.qz-d:focus-visible { outline: 2px solid var(--qz-on); outline-offset: 2px; }
.qz-d.on { box-shadow: inset 0 0 0 1.5px var(--qz-on); background: rgb(var(--ink-rgb) / .04); }
.qz-d.on i { opacity: 1; background: var(--qz-on); transform: scale(1.12); }
@media (hover: hover) { .qz-d:hover { box-shadow: inset 0 0 0 1px var(--qz-on); } .qz-d:hover i { opacity: .85; } }
.qz-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.qz-ends span:last-child { text-align: right; }
@media (prefers-reduced-motion: reduce) { .qz-d, .qz-d i { transition: none; } .qz-d.on i { transform: none; } }
.qz-low { margin-top: 14px; min-height: 40px; }
.qz-back { color: var(--muted); font-weight: 500; padding: 8px 2px; }
.qz-about { font-size: 11.5px; line-height: 1.45; color: var(--faint); padding: 4px 2px; }
.qz-done { margin-top: 18vh; }

/* tell us: the questions as a short list, each with its answers and their status */
.tqs { margin-top: 18px; display: flex; flex-direction: column; }
.tq { border-top: .5px solid var(--hair); padding: 2px 0 6px; }
.tq:last-child { border-bottom: .5px solid var(--hair); }
.tq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px 8px; text-align: left; font: 400 21px/1.22 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.tq-q svg { flex: none; width: 12px; height: 12px; color: var(--muted); }
.tq-s { display: flex; align-items: center; gap: 10px; padding: 6px 2px 6px 12px; margin: 0 0 4px; border-left: 1px solid var(--hair); animation: rise .4s var(--ease-out); }
.tq-s .t { flex: 1; min-width: 0; }
.tq-s .t b { display: block; font-size: 14px; font-weight: 600; }
.tq-s .t span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-s .t span.busy { color: var(--ink-2); }
.tq-s .t span.err { color: var(--danger); white-space: normal; }
.tq-s .ok { color: var(--ink-2); display: grid; place-items: center; }
.tq-s .rm { width: 28px; height: 28px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; display: grid; place-items: center; }
/* M1: an outline pill (kit.css gives .retry an ink fill; with ink text that was invisible) */
.tq-s .retry { flex: none; height: 30px; padding: 0 12px; border-radius: var(--r-btn); font-size: 13px; font-weight: 600; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .35); }
.tq-s .spin { flex: none; }

/* one answer: write or paste, or record */
.tq-h { font-size: 32px; }
.tq-ta { height: 200px; }
.tq-count { margin: 6px 4px 0; font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; min-height: 0; }
.tq-pv { margin-top: 12px; padding: 14px 16px; border: .5px solid var(--hair); border-radius: 16px; }
.pv-t { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv-m { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-m .lnk { padding: 4px 0 4px 14px; font-size: 14px; }
/* the inline composer and recorder: in place under the question, everywhere */
.cmp { margin-top: 10px; }
.cmp .tq-ta { height: 132px; }
/* R2 (12 Nov): the composer stacks at phone width. A compact one-line voice button, then the save button full width. */
.cmp-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px; }
.cmp-vr { min-width: 0; }
.cmp-vr:empty { display: none; }
.cmp-save { width: 100%; height: 50px; }
.cmp-save:not(:disabled) { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.cmp-st .tq-s { margin-top: 6px; }
.vr-go { width: auto; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; border: .5px solid rgb(var(--ink-rgb) / .28); text-align: left; color: var(--ink); white-space: nowrap; }
.vr-go svg { flex: none; width: 18px; height: 18px; color: var(--clay); }
.vr-go b { display: block; font-size: 14.5px; font-weight: 600; }
.vr-go small { display: none !important; }
.vr-go-old small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.vr { padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 .5px var(--hair); background: var(--card); animation: rise .4s var(--ease-out) both; }
.vr-top { display: flex; align-items: center; gap: 10px; }
.vr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: wt-b 1.6s ease-in-out infinite; }
.vr.paused .vr-dot { background: var(--faint); animation: none; }
.vr-time { flex: none; min-width: 3.2em; font: 400 26px/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.vr-meter { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; }
.vr-meter i { flex: none; width: 2.5px; height: 32px; border-radius: 2px; background: var(--clay); transform: scaleY(.08); }
.vr.paused .vr-meter i { background: rgb(var(--ink-rgb) / .25); }
.vr-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.vr-b { min-height: 44px; padding: 0 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.vr-done { min-height: 44px; padding: 0 22px; border-radius: var(--r-btn); background: var(--btn-ink, var(--ink)); color: var(--bone); font-size: 15px; font-weight: 600; }
.vr-note { margin-top: 8px; font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.vr-note.err { font-family: var(--sys); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--danger); }
.vr-bar { flex: 1; height: 2px; background: rgb(var(--ink-rgb) / .12); border-radius: 1px; overflow: hidden; }
.vr-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s linear; }
.vr.failed .vr-ctl { margin-top: 8px; }
.tq-c { padding: 0 0 10px; }
.reassure { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.reassure a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vr, .vr-dot { animation: none; } }

/* Ask your AI: three beats, then the prompt, then the paste box */
.ai-beats { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: b; display: flex; flex-direction: column; gap: 10px; }
.ai-beats li { counter-increment: b; position: relative; padding-left: 30px; font-size: 15px; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
.ai-beats li::before { content: counter(b); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 .5px var(--hair); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ai-beats b { color: var(--ink); font-weight: 600; }
.aicard .lede { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; }
.aicard .more { margin-top: 8px; }
.ai-n { min-height: 16px; margin: 6px 4px 0; font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ai-got { margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 .5px var(--hair); background: var(--card); animation: rise .4s var(--ease-out) both; }
.ai-got .ok { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--green); box-shadow: inset 0 0 0 1px currentColor; opacity: 1; transform: none; }
.ai-got .t { flex: 1; min-width: 0; }
.ai-got .t b { display: block; font-size: 15px; font-weight: 600; }
.ai-got .t span { display: block; font-size: 13px; color: var(--muted); }

/* while you wait: one thing to do, in place */
.wd-w { margin: 22px 0 8px; width: 100%; text-align: left; }
.wd-amb:empty { display: none; }
.wd-ready { margin-bottom: 14px; padding: 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2), inset 0 0 0 .5px var(--hair); }
.wd-rt b { display: block; font: 400 22px/1.2 var(--serif); color: var(--ink); }
.wd-rt span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.wd-ready .btn { width: 100%; margin-top: 12px; }
/* B11: the ready bar. Slides in at the bottom of the phone when the wait is over and stays until tapped; whatever was
   being done (the atlas, an answer) stays where it is. */
.ready-bar { position: absolute; z-index: 120; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; text-align: left; }
.ready-bar .wd-rt { flex: 1; min-width: 0; }
.ready-bar .wd-rt b { font-size: 19px; line-height: 1.2; }
.ready-bar .wd-rt span { font-size: 12.5px; }
.ready-bar .btn { width: auto; flex: none; margin: 0; padding: 0 22px; min-height: 46px; }
.phone:has(.tabbar:not(.off)) .ready-bar { bottom: 96px; }
.wd { padding: 16px 16px 10px; border-radius: var(--r-l); box-shadow: inset 0 0 0 .5px var(--hair); background: rgb(var(--card-rgb) / .6); }
.wd-k { font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.wd-h { margin-top: 8px; font: 400 23px/1.18 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.wd-why { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.wd .aibtns { margin-top: 12px; }
.wd-paste { height: 96px; margin-top: 10px; }
.wd-act { display: flex; justify-content: flex-end; margin-top: 8px; }
.wd-lf { margin-top: 12px; }
.wd-skip, .wd-stop { display: block; min-height: 44px; margin: 6px auto 0; color: var(--muted); font-weight: 500; }
.wd-qz .qz-n { margin-top: 10px; }
.wd-qz .qz-p, .wd-qz .qz-frame { display: none; }
.wd-qz .qz-s { font-size: 21px; min-height: 2.4em; margin: 6px 0 14px; }
.wd-qz .qz-low { min-height: 0; margin-top: 4px; }
.wd-got { margin-top: 10px; font: 400 19px/1.3 var(--serif); color: var(--ink-2); }
.weave .wd-w { max-width: 420px; padding: 0 16px; box-sizing: border-box; }
/* With the waiting view under it the portrait wait can be taller than the phone: it scrolls, nothing is squeezed. */
.scr.weave { justify-content: safe center; overflow-y: auto; padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: 104px; }
.scr.weave > * { flex-shrink: 0; }

/* the progress view: home until the portrait opens */
.pg-hero { text-align: center; padding-top: 4vh; }
.pg-mark { width: 148px; margin: 0 auto; }
.pg-mark .jm { width: 100%; height: auto; }
.pg-t { margin: 20px auto 0; max-width: 320px; font-size: 32px; }
.pg-main { margin-top: 22px; }
.pg-time { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.pg-steps { margin-top: 26px; border-top: .5px solid var(--hair); }
.pg-s { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: .5px solid var(--hair); text-align: left; color: var(--ink); }
.pg-s > i { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .45); }
.pg-s.done > i { background: var(--ink); box-shadow: none; }
.pg-s.in_progress > i { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.pg-s span { flex: 1; font-size: 16px; }
.pg-s em { font-style: normal; font-size: 13px; color: var(--muted); }
.pg-s.done span { color: var(--muted); }
.pg-s .chev { color: var(--faint); flex: none; }
.ghosts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ghost { position: relative; min-height: 118px; padding: 14px; border-radius: var(--r-m); border: .5px dashed rgb(var(--ink-rgb) / .3); display: flex; flex-direction: column; gap: 8px; }
.ghost > i { display: block; height: 6px; border-radius: 3px; background: rgb(var(--ink-rgb) / .08); }
.ghost .g-ar { width: 34px; height: 6px; border-radius: 3px; background: rgb(var(--clay-rgb) / .35); margin-bottom: 4px; }
.ghost .g-two { display: flex; margin-bottom: 4px; }
.ghost .g-two i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .3); }
.ghost .g-two i + i { margin-left: -8px; }
.ghost small { margin-top: auto; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.ghosts .ghost:only-child { grid-column: 1 / -1; }

/* home: "Finish your portrait", one compact block */
.fin { margin-top: 22px; padding: 14px 16px; }
.fin-h { display: flex; align-items: baseline; justify-content: space-between; }
.fin-h b { font: 400 22px/1.1 var(--serif); letter-spacing: -.01em; }
.fin-h span { font-size: 13px; color: var(--muted); }
.fin-next { width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: .5px solid var(--hair); text-align: left; }
.fin-next .t { flex: 1; min-width: 0; }
.fin-next b { display: block; font-size: 16px; font-weight: 600; }
.fin-next .t span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.fin-next .chev { color: var(--faint); }
.fin-o { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 4px; }
.fin-o button { font-size: 14px; color: var(--ink-2); padding: 4px 0; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }

/* settings: your compare links */
.lrow { min-height: 52px; }
.lrow .lnk { flex: none; padding: 6px 0; font-size: 14px; }

/* pair page: a rewrite is queued */
.p-hero .upd .lnk { margin-left: 10px; padding: 0; font-size: 13px; }
.scr [hidden] { display: none !important; }
.pv-m > span:last-child { flex: none; display: flex; }

/* ---------- B5: in person (Show my code, the event and prepared landings, the waiting view) and QA fixes ---------- */
/* Show my code. The plate is the one place with fixed colors: a camera needs dark modules on white in every theme. */
.qr-b { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr-plate { width: min(300px, 78vw); min-width: 260px; aspect-ratio: 1; margin: 2vh auto 0; background: #fff; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 0 0 .5px var(--hair); }
.qr-plate .qrc { display: block; width: 100%; height: 100%; }
.qr-plate .qrc path { fill: #000; }
@keyframes qr-in { from { opacity: 0; } }
.qr-l { margin-top: 22px; font: 400 26px/1.1 var(--serif); letter-spacing: -.014em; color: var(--ink); }
.qr-ev { margin-top: 6px; font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.qr-url { display: flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 14px; }
.qr-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.qr-url .pill-b { height: 36px; }
.lv { width: 100%; margin-top: 8px; text-align: left; }
.lv-empty { margin-top: 26px; text-align: center; font-size: 14px; color: var(--faint); }
.lv-l { border-top: .5px solid var(--hair); }
.lv-r { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 2px; border-bottom: .5px solid var(--hair); color: var(--ink); text-align: left; }
.lv-r .lv-m { flex: none; width: 40px; height: 40px; }
.lv-r .lv-m svg { width: 40px; height: 40px; }
.lv-r b { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-r .lv-s { font-size: 14px; color: var(--muted); }
.lv-r .lv-s.s-ready { color: var(--ink); font-weight: 600; }
.lv-r .chev { color: var(--faint); }
.lv-new { animation: rise .5s var(--ease-out) both; }

/* the in-person landings: the host's note in their own voice */
.pv-note { margin: 18px auto 0; max-width: 300px; }
.pv-note blockquote { font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); text-wrap: balance; }
.pv-note figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.pv-note figcaption::before { content: "— "; }
.inv.on .pv-note { animation: rise2 1s var(--ease-out) 1.6s both; }
.inv.gone { padding-top: 26vh; }

/* "Are these you?": rows that un-draw when removed, one way to add another */
.pk-r { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 2px; overflow: hidden; }
.pk-r .t { flex: 1; min-width: 0; }
.pk-r .t b { display: block; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-r .t span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.pk-r .rm { flex: none; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--muted); }
.pk-r .rm svg { width: 11px; height: 11px; }
.pk-r .strike { position: absolute; left: 46px; right: 40px; top: 50%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.pk-r.undraw .strike { transform: scaleX(1); transition: transform .26s var(--ease-out); }
.pk-r.undraw .t, .pk-r.undraw .glyph { opacity: .35; transition: opacity .26s; }
.pk-add { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 2px; color: var(--ink-2); font-size: 16px; border-bottom: .5px solid var(--hair); }
.pk-add .pl-i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; box-shadow: inset 0 0 0 .5px var(--hair); }
.pk-f { margin-top: 12px; }

/* pending usernames from a paste of several: the site is asked in the row */
.pl.pend .t span.err { color: var(--ink-2); }
.pend-c { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pend-c .pill-b { height: 32px; }

/* the waiting view: two marks drawing above honest steps */
.wt { padding: 30px 6px 10px; display: flex; justify-content: center; }
.wt-s { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.wt-s li { display: flex; align-items: center; gap: 12px; font: italic 400 22px/1.2 var(--serif); color: var(--faint); transition: color .4s; }
.wt-s li i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.wt-s li.cur { color: var(--ink); }
.wt-s li.cur i { background: currentColor; animation: wt-b 1.6s ease-in-out infinite; }
.wt-s li.done { color: var(--muted); }
.wt-s li.done i { background: currentColor; }
@keyframes wt-b { 50% { opacity: .3; } }
.h-two { display: flex; gap: 8px; margin-top: 16px; }
.h-two > * { flex: 1 1 0; }
.h-two.col > * { flex: none; width: 100%; }
.h-two .btn2 { height: 54px; }
.h-two.col { flex-direction: column; }
.writing .h-two { max-width: 320px; margin-left: auto; margin-right: auto; }

/* the pair page: the queued rewrite line, in-place text crossfade, two quiet actions */
/* R2 (12 Nov): page state is a quiet note in the hero's top corner, never a warning box under the title. Fresh: nothing. */
.p-hero { position: relative; }
.p-hero .upd { position: absolute; top: -2px; right: 0; margin: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; color: var(--muted); max-width: 60%; text-align: right; }
.p-hero .upd.soon .lnk { margin: 0; padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / .3); text-underline-offset: 3px; }
.p-hero .upd.soon > span::after { content: '\00b7'; margin-left: 6px; }
.p-hero .upd[data-held] { position: static; max-width: none; display: block; margin: 8px auto 0; text-align: center; }
.p-hero:has(.upd:not([data-held])) .p-marks { margin-top: 18px; }
/* Area by area: a heading per group, the area name, one line. */
.pa-sec.s { color: var(--clay); }
.pa.pa-l .top { justify-content: space-between; }
.pa.pa-l p { margin-top: 4px; }
.xf { display: grid !important; }
.xf > span { grid-area: 1 / 1; }
.foot.duo { flex-direction: row; }
.foot.duo > * { flex: 1; height: 50px; }
.wt.sm { padding: 26px 6px 10px; justify-content: flex-start; }
.wt.sm .wt-s { gap: 10px; }
.wt.sm .wt-s li { font-size: 17px; }
.foot .duo-r { display: flex; gap: 8px; }
.foot .duo-r > * { flex: 1; height: 50px; }
.btn2.wide { width: 100%; justify-content: center; }
.sp-home { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }

/* quiz: the framing line, the reflection, "10 more" */
.qz-frame { margin: 4px 2px 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.qz-ref { margin-top: 14px; font: 400 21px/1.35 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.qz-more { margin-top: 22px; width: 100%; }
.qz-about-l { display: block; margin: 14px auto 0; font-size: 13px; color: var(--muted); }
.qz-cite { font-size: 13px !important; color: var(--muted) !important; }

/* reveal: one quiet line under the name */
.rv-line { margin: 12px auto 0; max-width: 300px; font: italic 400 19px/1.3 var(--serif); color: var(--ink-2); text-wrap: balance; }
.reveal.on .rv-line { animation: rise2 1s var(--ease-out) 2.1s both; }

/* Tell us: the answer row opens the transcript; the share switch */
.tq-s button.t { text-align: left; color: var(--ink); }
.tq-priv { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 2px 0 12px; font-size: 14px; color: var(--ink-2); text-align: left; }
.tq-w .sw-row { border-left: 1px solid var(--hair); margin-bottom: 6px; }
.sw { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .3); transition: background-color .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--ink-rgb) / .45); transition: transform .25s var(--ease-out), background-color .2s; }
.sw-row[aria-checked="true"] .sw { background: var(--ink); }
.sw-row[aria-checked="true"] .sw::after { transform: translateX(16px); background: var(--bone); }
.src-sw { margin-top: 12px; padding: 4px 12px; }
.pv-src { padding: 4px 12px; }
.pv-r { display: flex; align-items: center; gap: 10px; }
.pv-r .sw-row { padding-left: 0; }
/* M2: each source by name, then who sees it (or why it could not be read) */
.pv-r { min-height: 44px; }
.pv-r .pv-n { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-r .vis-r { flex: none; }
.pv-r .src-st { flex: none; }
.tr-t { margin-top: 14px; max-height: 46vh; overflow: auto; white-space: pre-wrap; font-size: 15px; line-height: 1.5; color: var(--ink); }
.tr-ta { margin-top: 14px; width: 100%; height: 40vh; }
.tr-b { margin-top: 14px; justify-content: center; }
.tr-b > * { min-width: 140px; }

/* admin: People */
.adm-seg { margin: 4px 0 12px; }
.adm-p { border-top: .5px solid var(--hair-2); }
.adm-p summary { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 10px; align-items: baseline; padding: 10px 2px; list-style: none; cursor: pointer; }
.adm-p summary::-webkit-details-marker { display: none; }
.adm-p summary small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.adm-p summary span { color: var(--ink-2); }
.adm-tl { padding: 0 2px 12px; }
.adm-tl div { display: grid; grid-template-columns: 52px 1fr; gap: 0 10px; padding: 3px 0; font-size: 12.5px; }
.adm-tl small { grid-column: 2; color: var(--muted); }
.adm-tl .btn2 { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .wt-s li.cur i { animation: none; }
  .pk-r.undraw .strike { transition: none; }
  .lv-new { animation: qr-in .3s ease both; }
}

/* sharing model, step 1: the x on your own lines, the Undo toast, the one-time glance during the first wait */
.toast.act { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
/* B7: a toast that can be seen can be tapped. It sits above every screen, sheet and alert; pointer events stay on while
   it fades out, and only once it has faded does it turn hidden, so nothing behind it takes a tap meant for Undo. */
.toast { z-index: 200; visibility: hidden; transition: transform .35s var(--ease-out), opacity .25s, visibility 0s linear .3s; }
.toast.on { visibility: visible; transition: transform .35s var(--ease-out), opacity .25s, visibility 0s; }
.toast-u { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
.mini-w { position: relative; flex: none; display: flex; }
.mini-w .hide-x, .edge .hide-x, .hc-w .hide-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); }
.mini-w .hide-x svg, .edge .hide-x svg, .hc-w .hide-x svg, .gl-r .x svg { width: 10px; height: 10px; }
.edge .acts .lnk.sm { font-size: 13px; color: var(--muted); padding: 6px 0; }
.glance { margin: 18px 0 6px; padding-top: 14px; border-top: .5px solid var(--hair); }
.gl-h { font-family: var(--label); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); margin: 0 2px 6px; }
.gl-r { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: .5px solid var(--hair-2); font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.gl-r span { flex: 1; min-width: 0; padding: 8px 2px; }
.gl-r .x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); margin-right: -10px; }
.mini-w { scroll-snap-align: start; }
/* the small text actions beside section titles (Show my code, See all) get a 44 px hit area without moving */
.sec-row button { position: relative; }
.sec-row button::after { content: ""; position: absolute; inset: -16px -10px; }

/* B6: conference blockers. Tokens only, so every theme (light and dark) carries it. */
/* offline: one quiet line at the top of the screens that wait */
.offl { margin: 4px 0 10px; padding: 9px 14px; border-radius: var(--r-m); box-shadow: inset 0 0 0 .5px var(--hair); font-size: 14px; line-height: 1.35; color: var(--ink-2); text-align: center; }
/* the waiting view when we need a little more: one line, two equal ways, another link as the quiet third */
.need { padding: 26px 0 6px; text-align: center; }
.need-l { margin: 0 auto; max-width: 310px; font: italic 400 22px/1.3 var(--serif); color: var(--ink-2); text-wrap: balance; }
.need-s { width: 100%; margin-top: 18px; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.way { min-height: 88px; padding: 14px 12px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .2); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; text-align: left; color: var(--ink); }
.way b { font: 400 19px/1.15 var(--serif); letter-spacing: -.01em; }
.way span { font-size: 13px; color: var(--muted); }
.way:active { transform: scale(.98); }
.need-k { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--muted); font-weight: 500; }
/* Back to <You> & <Them>: one line, cut if long */
.nav-b.to-pair { max-width: calc(100% - 60px); }
.nav-b.to-pair span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-done { margin-top: 8px; }
.sp-done .lnk { color: var(--muted); font-weight: 500; min-height: 44px; }
/* the x on a pair-page line about you */
.note { position: relative; }
.note .line-x, .pa .line-x, .could .line-x { flex: none; width: 44px; height: 44px; margin: -10px -12px -10px auto; display: grid; place-items: center; color: var(--muted); }
.line-x svg { width: 10px; height: 10px; }
.note span { flex: 1; min-width: 0; }
.could .cy { position: relative; }
.could .cy .line-x { position: absolute; top: -12px; right: -14px; margin: 0; color: rgb(255 255 255 / .55); }
/* Show my code: a generous white quiet zone, the code drawn on whole device pixels */
.qr-plate { padding: 14px; box-sizing: border-box; display: grid; place-items: center; }
.qr-plate.px .qrc { width: auto; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.qr-plate .qrc path { stroke: #000; stroke-width: .06; }
.qr-end { padding-top: 26vh; }
.qr-end .sub { max-width: 300px; margin: 10px auto 0; }
.inv-open { padding-top: 34vh; }
@media (max-height: 680px) {
  /* M6: no fixed size for the pair marks here. A 112 px square (from when this was one mark) squeezed two side-by-side
     marks into icons on any screen under 680 px tall, which is iPhone Safari with its toolbars (WebKit's 393 x 659). */
  .need { padding-top: 14px; }
  .way { min-height: 76px; }
}
/* 44 px hit areas on the in-person screens, without changing how the text actions look */
.scr > .foot .lnk.later { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.pl .pill-b { position: relative; }
.pl .pill-b::after { content: ""; position: absolute; inset: -6px -4px; }
/* the plate never shrinks in the column (on a short screen it was squashed and cut the code) */
.qr-b > .qr-plate { flex: none; }
/* Sign in (L1): email, the six-digit code, the one consent line under "Send code" */
.foot .agree { margin: 2px 8px 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.agree a, .sheet .consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; padding: 10px 0; margin: -10px 0; }
.code6 input { font: 600 26px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .5em; text-indent: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.code6 input::placeholder { letter-spacing: .5em; }
.em-to { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.resend { margin-top: 6px; }
.resend .lnk { min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; color: var(--ink-2); font-weight: 500; }
.resend .lnk:disabled { color: var(--muted); opacity: 1; }

/* Host page (hosts only): friends link, event link, prepared invites. Kit buttons as they are; layout only. */
.host .sec { margin-top: 26px; }
.h-card { margin-top: 10px; padding: 16px; }
.h-card .btn { width: 100%; }
.h-p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.4; }
.h-ct { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h-ct b { font-size: 17px; }
.h-n { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-acts { margin-top: 12px; }
.h-acts > * { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.h-main { margin-top: 12px; }
.h-main .btn { width: 100%; }
.h-rvb { color: var(--danger); }
.h-new { margin-top: 10px; }
.h-list { margin-top: 10px; }
.h-list .lrow .lnk + .lnk { margin-left: 14px; }
.h-pool { margin-top: 10px; padding: 0 4px; }
.h-qr { width: min(260px, 70vw); min-width: 0; margin-top: 16px; }
textarea.h-paste { height: 120px; }
/* Add to Home Screen (Y1): one quiet line near the bottom of Home, and the steps sheet. */
.hm-ins { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 4px 4px; border-top: .5px solid var(--hair); }
.hm-ins .hi-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--ink); }
.hm-ins .hi-go svg { flex: none; color: var(--muted); }
.hm-ins .hi-go b { display: block; font-size: 14.5px; font-weight: 500; }
.hm-ins .hi-go small { display: block; font-size: 13px; color: var(--muted); }
.hm-ins .hi-x { flex: none; color: var(--muted); }
.ins-steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.ins-steps li { counter-increment: st; position: relative; padding-left: 36px; font-size: 15.5px; line-height: 1.45; }
.ins-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; background: var(--tint); color: var(--ink); }
.ig { display: inline-block; vertical-align: -3px; margin: 0 1px; color: var(--ink); }
.ri .ig { color: #fff; vertical-align: 0; }
/* Own edges (Y1): the add box under the list, and a quiet mark on the ones the person wrote. */
.ea { margin-top: 26px; }
.ea .sec { display: block; }
.ea-help { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.scr .ea textarea { margin-top: 10px; width: 100%; height: 84px; min-height: 0; resize: none; border-radius: var(--r-m); border: .5px solid var(--hair); padding: 12px 14px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); }
.ea-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ea-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ea-full { margin-top: 22px; }
.card.edge.own .how { font-style: italic; }

/* ================= P1 (11 Nov): the screens after onboarding, brought up to the approved showcase ==========   Home (the profile), Compare, the cards, the reveal, the pair page, Show my code, and the small touches
   (web/touch.js). Each look adds its own flavor in web/themes/*.css. */

/* pairs: two marks side by side, never stacked (web/pairs.js) */
.jm2 { display: block; max-width: 100%; height: auto; overflow: visible; }
.pz-two { display: inline-flex; align-items: center; gap: 4px; }
.pz-two > svg, .pz-two > .avatar, .pz-two > .cmp-them { flex: none; }
.pz-av { width: 30px; height: 30px; font: 400 13px var(--serif); }
.prow .pmark.pz-w { width: auto; min-width: 64px; height: 40px; justify-content: start; }
.pz-anim .pz-th { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pz-draw .9s cubic-bezier(.45,.05,.3,1) calc(.9s + var(--i) * .18s) forwards; }
.pz-anim .pz-stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pz-draw .7s cubic-bezier(.45,.05,.3,1) .5s forwards; }
.pz-anim .jm-sprig { animation: pz-pop var(--sp-soft-ms, .8s) var(--sp-soft, cubic-bezier(.3,1.25,.5,1)) .9s both; transform-box: fill-box; transform-origin: 50% 70%; }
@keyframes pz-draw { to { stroke-dashoffset: 0; } }
@keyframes pz-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* an empty place for the other person: a dotted ring that breathes (12 Kind when empty) */
.cmp-them { --s: 104px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); }
.cmp-them i { position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgb(var(--ink-rgb) / .32); animation: breathe 5s ease-in-out infinite alternate; }
.cmp-them.sm i { inset: 6%; border-width: 1px; }
@keyframes breathe { from { opacity: 1; } to { opacity: .45; } }

/* Compare */
.cmp-t { margin-top: 10px; }
.cmp-hero { margin-top: 18px; padding: 26px 20px 22px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); text-align: center; }
.cmp-two { display: flex; justify-content: center; align-items: center; gap: 28px; }
.cmp-me svg { display: block; width: 104px; height: auto; }
.cmp-l { margin-top: 18px; font: 400 30px/1.05 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.cmp-s { margin: 8px auto 0; max-width: 290px; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.cmp-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cmp-acts .btn2 { width: 100%; height: 54px; }
#cmpLink:not(:empty) { margin-top: 14px; text-align: left; }
.cmp-empty { margin-top: 34px; text-align: center; }
.cmp-empty p { font: 400 22px/1.2 var(--serif); }
.cmp-empty .s { margin-top: 6px; font: 400 14.5px/1.4 var(--sys); color: var(--muted); }
.sec-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Home: the profile */
.hm { position: relative; padding-bottom: 40px; }
.hm-av { position: absolute; top: 4px; right: 20px; z-index: 2; }
.hm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; }
.hm-mark { width: 168px; }
.hm-mark svg { display: block; width: 100%; height: auto; }
.hm-k { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hm-name { margin-top: 4px; font: 400 46px/1 var(--serif); letter-spacing: -.02em; }
.hm-line { margin-top: 8px; max-width: 300px; font: italic 400 19px/1.3 var(--serif); color: var(--ink-2); text-wrap: balance; }
.hm-sec { margin-top: 6px; }
.hm-grow { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); text-align: center; }
.hm-grow p { font-size: 15px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.hm-grow .btn2 { margin-top: 12px; height: 50px; width: 100%; }
.hg-t { margin-left: 8px; font-weight: 400; color: var(--muted); }
.hm-q { margin-top: 28px; padding: 18px 18px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); }
.hm-q .sec { display: block; margin: 0; }
.hq-t { margin-top: 8px; font: 400 25px/1.15 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.hq-why { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.hm-q .btn2 { margin-top: 14px; height: 44px; min-height: 44px; }
/* the cards row: the next card peeks, a count, dots */
.h-deck { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 8px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.h-deck::-webkit-scrollbar { display: none; }
.hc-w { position: relative; flex: none; width: calc(100% - 58px); max-width: 300px; scroll-snap-align: start; display: flex; }
.hc-w .hide-x { z-index: 1; }
.hc { flex: 1; width: 100%; min-height: 196px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; text-align: left; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); border: .5px solid var(--hair-2); }
.hc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hc .ar { color: var(--muted); }
.hc .ar i { background: var(--c); }
.hc-w .hc-h { padding-right: 26px; }
.hc-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc b { font: 400 27px/1.06 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.hc-p { font-size: 14px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-f { margin-top: auto; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.hc.yes .hc-f { color: var(--green); }
.h-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.h-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--ink-rgb) / .18); transition: background .3s, transform .3s; }
.h-dots i.on { background: var(--ink); transform: scale(1.2); }
/* start a pair, when there is none yet */
.hm-start { margin-top: 30px; padding: 18px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.hm-st-two { display: flex; gap: 6px; align-items: center; grid-row: span 1; }
.hm-st-two svg { width: 44px; height: auto; }
.hm-start .t b { display: block; font: 400 21px/1.15 var(--serif); }
.hm-start .t p { margin-top: 2px; font-size: 14px; color: var(--muted); }
.hm-st-a { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.hm-st-a .btn2 { flex: 1 1 auto; }
.hm-wait .pill-b { margin-left: auto; }
/* what is left: one quiet row */
.hl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-c { height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .28); }
.hl-c.on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.hm .ed-mini { padding: 2px 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); }
/* Field guide's table of contents */
.toc { margin-top: 18px; border-top: 1px solid var(--hair); }
.toc button { display: grid; grid-template-columns: 30px auto 1fr auto; align-items: baseline; gap: 6px; width: 100%; min-height: 38px; padding-top: 11px; text-align: left; }
.toc .num { color: var(--clay); font: italic 400 16px/1 var(--serif); }
.toc b { font: 400 19px/1 var(--serif); white-space: nowrap; }
.toc .lead { border-bottom: 1.4px dotted rgb(var(--ink-rgb) / .3); transform: translateY(-4px); min-width: 12px; }
.toc em { font: italic 400 15px/1 var(--serif); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }

/* cards: a count on every card, the small mark above that answers back */
.ic-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ic-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ic-vig { display: none; }
.cd-mark { width: 44px; height: 44px; display: grid; place-items: center; }
.cd-mark svg { width: 34px; height: auto; }
/* T1: the note after a vote sits in the open space above the two buttons, clear of the card (it covered the card's top edge). */
.cd-said { position: absolute; left: 0; right: 0; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); z-index: 30; text-align: center; font-size: 13px; color: var(--muted); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cd-said.on { opacity: 1; transform: none; }
.ic-seal { position: absolute; right: 14px; bottom: 10px; width: 74px; mix-blend-mode: multiply; opacity: 0; transform: scale(1.35) rotate(-8deg); pointer-events: none; }
.ic-seal svg { width: 100%; height: auto; display: block; }
.ic.sealed .ic-seal { opacity: .92; transform: rotate(-8deg); transition: opacity .12s, transform .26s cubic-bezier(.3,1.25,.5,1); }

/* the reveal: 05 The portrait arrives */
.reveal.on .rv-name, .reveal.on .rv-more, .reveal.on .rv-foot { animation: none; }
.rv-mark { width: 150px; }
.rv-name { margin-top: 18px; }
.rv-line { margin-top: 8px; font: italic 400 18px/1.3 var(--serif); color: var(--ink-2); }
.rv-full { position: absolute; inset: 0; z-index: 40; background: var(--bone); overflow: hidden; }
.rv-art { position: absolute; left: 50%; top: 44%; width: 500px; margin: -250px 0 0 -250px; }
.rv-art > svg { display: block; width: 500px; height: auto; }
[data-mark="fieldguide"] .rv-art { top: 0; height: 100%; margin: 0; left: max(16px, 50% - 280px); right: max(16px, 50% - 280px); width: auto; display: grid; place-items: center; }
[data-mark="fieldguide"] .rv-art > svg { width: 100%; }
.rv-play .rv-mark { opacity: 0; }
.rv-peek { position: relative; width: 100%; max-width: 330px; height: 118px; margin-top: 26px; }
.rv-peek > * { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--sh-2); border: .5px solid var(--hair-2); }
.rv-back.b1 { transform: translateY(-10px) scale(.95); opacity: .9; }
.rv-back.b2 { transform: translateY(-20px) scale(.9); opacity: .75; }
.rv-front { padding: 14px 16px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.rv-fh { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.rv-fh .ar i { background: var(--c); }
.rv-front b { font: 400 25px/1.05 var(--serif); letter-spacing: -.015em; }
.rv-foot { margin-top: 22px; }

/* the pair page: names under the two marks, a thread as you read */
.p-names { display: flex; justify-content: space-around; max-width: 340px; margin: -4px auto 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p-read { position: relative; }
.tx-thread { position: absolute; left: -12px; top: 30px; bottom: 0; width: 1px; background: rgb(var(--ink-rgb) / .1); pointer-events: none; }
.tx-thread i { position: absolute; inset: 0; background: var(--clay); transform-origin: top; transform: scaleY(0); }
.p-read .pa, .p-read .note { position: relative; }
.p-read .pa::before, .p-read .note::before { content: ""; position: absolute; left: -15px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--bone); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .25); transition: background .3s, box-shadow .3s, transform .47s var(--sp-snap, ease); }
.p-read .pa.on::before { background: var(--c, var(--clay)); box-shadow: none; transform: scale(1.25); }
.p-read .note.on::before { background: var(--clay); box-shadow: none; transform: scale(1.25); }

/* Show my code */
.qr-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qr-mk svg { display: block; width: 96px; height: auto; margin: 8px auto 0; }
.qr-h { margin-top: 14px; font: 400 32px/1.05 var(--serif); letter-spacing: -.018em; }
.qr-s { margin: 8px auto 0; max-width: 290px; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.qr-card { margin-top: 20px; padding: 16px 16px 14px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-2); }
.qr-card .qr-plate { margin-top: 0; width: min(256px, 68vw); min-width: 220px; }
.qr-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; text-align: left; }
.qr-who b { display: block; font: 400 22px/1 var(--serif); }
.qr-who small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.qr-pl svg { display: block; width: 84px; height: auto; }
.qr-share { margin-top: 18px; width: 100%; max-width: 330px; height: 52px; }

/* the touches' layers */
.tx-ghost, .tx-ring { position: absolute; z-index: 60; pointer-events: none; box-shadow: 0 0 0 1px var(--ink); }
.tx-ring { box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .55); }
.tx-bloom { position: absolute; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--clay-rgb) / .45), rgb(var(--clay-rgb) / 0)); mix-blend-mode: soft-light; }
.btn .tx-bloom { background: radial-gradient(closest-side, rgb(255 255 255 / .35), rgb(255 255 255 / 0)); mix-blend-mode: normal; }
.btn, .btn2, .pill { overflow: hidden; }
.tx-open { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.tx-struck { position: relative; }
.tx-struck::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform-origin: left; animation: tx-strike .24s cubic-bezier(.6,0,.25,1) both; }
.tx-struck > * { opacity: .4; transition: opacity .24s; }
@keyframes tx-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .cmp-them i { animation: none; }
  .pz-anim .pz-th, .pz-anim .pz-stem { animation: none; stroke-dashoffset: 0; }
  .pz-anim .jm-sprig { animation: none; }
  .tx-thread { display: none; }
}
.share-two { margin-bottom: 18px; }
.hm-q .cmp { margin-top: 12px; }
.hq-s { margin-top: 4px; font-size: 14px; color: var(--muted); }
/* Links step (I1): per-row message and what skipping means (the reassurance line is O1's .reassure). */
.pl-e { margin: -8px 0 12px 46px; font-size: 13.5px; line-height: 1.35; color: var(--danger); }
.pl-e:empty { display: none; }
.foot .skip-why { margin: 2px auto 0; max-width: 300px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-wrap: balance; }

/* Test runs (Host page, Test the flow; docs/decisions/2026-11-11-test-runs.md). The strip sits above every screen while
   a host tests the flow as a new person; screens move down under it. Unmissable on purpose: a dark band, not the paper. */
.test-strip { position: absolute; z-index: 60; left: 0; right: 0; top: 0; min-height: var(--ts-h, 44px); box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 6px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  background: #2b2118; color: #f6efe4; font-size: 13px; line-height: 1.2; box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.test-strip[hidden] { display: none; }
.test-strip .ts-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.test-strip .ts-t b { font-weight: 650; font-size: 12.5px; line-height: 1.15; }
.test-strip .ts-t span { opacity: .7; font-size: 11.5px; }
.test-strip .ts-b { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgb(246 239 228 / .35); color: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.test-strip .ts-main { background: #f6efe4; color: #2b2118; border-color: #f6efe4; }
.test-strip .ts-cap { flex-basis: 100%; font-size: 12px; color: #ffd9a8; }
.phone.testing { --ts-h: calc(env(safe-area-inset-top, 0px) + 56px); }
.phone.testing .scr { top: var(--ts-h); padding-top: 10px; }
.phone.testing:has(.test-strip.capped) { --ts-h: calc(env(safe-area-inset-top, 0px) + 88px); }
.t-card .t-l { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.t-card .t-starts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-card .t-looks { grid-template-columns: 1fr 1fr 1fr; }
.t-card .t-pick { min-height: 40px; padding: 6px 10px; border-radius: 12px; border: .5px solid rgb(var(--ink-rgb) / .22); font-size: 14px; font-weight: 600; color: var(--ink-2); background: rgb(var(--card-rgb) / .6); }
.t-card .t-pick.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.t-card .t-sub { margin: 8px 2px 0; }
.t-card .jfield { margin-top: 12px; }
.t-card .btn { margin-top: 18px; }
.t-card .t-cost { margin: 12px 2px 0; font-size: 13px; }
.test-code { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; margin-top: 18px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgb(var(--ink-rgb) / .35); text-align: left; color: var(--ink-2); font-size: 13px; }
.test-code b { font: 600 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; color: var(--ink); }
.t-set { margin-top: 12px; }

/* ---------- B11: the visibility icon, everywhere (one look, one tap behavior) ---------- */
.vis-i { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -10px; border-radius: 50%; color: var(--muted); flex: none; }
.vis-i .vis-g, .vis-r .vis-g, .vis-o .vis-g { display: block; width: 16px; height: 16px; }
.vis-i:active { color: var(--ink); }
.hc-w .vis-i, .hm-best .vis-i, .edge .vis-i { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; }
.hm-best { position: relative; margin-bottom: 12px; }
.hm-best-b { all: unset; display: block; width: 100%; cursor: pointer; }
.hm-best .ic.static { min-height: 0; }
.hm-best .ic-h { padding-right: 30px; }
.edge { position: relative; }
.edge h4 { padding-right: 26px; }
.note .vis-i, .cy .vis-i, .pa .vis-i { margin-left: auto; }
.vis-r { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.vis-r .chev { color: var(--muted); }
.sw-row:has(.vis-r) { display: flex; padding: 2px 12px; }
.vis-sh .s2 { margin-top: 4px; }
.vis-opts { margin-top: 14px; display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; box-shadow: inset 0 0 0 .5px var(--hair); }
.vis-o { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; text-align: left; font-size: 16px; color: var(--ink); }
.vis-o + .vis-o { border-top: .5px solid var(--hair); }
.vis-o span { flex: 1; }
.vis-o i { color: var(--clay); display: grid; }
.vis-o.on { font-weight: 600; }
.vis-k { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vis-k dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vis-k dd { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.hm-quiet { opacity: .92; }
.hm-quiet .sec { color: var(--muted); }
.wm-vis { display: inline-flex; align-items: center; gap: 8px; }
/* The Sources hub (B12): a quiet shelf. Rows are one line of name and one of example; the state sits on the right in
   small type; an open row grows in place under a hairline. Calm with forty entries: nothing here animates but the open. */
.hub .hub-line { margin-top: 6px; font-size: 15px; color: var(--muted); }
.hub .hub-q { margin-top: 16px; }
.hub .hub-q input::-webkit-search-cancel-button { opacity: .5; }
.hub .field .hub-file { font-size: 14px; font-weight: 600; color: var(--deep); background: transparent; box-shadow: none; border: 0; padding: 0 8px; width: auto; }
.hub-s .sec-row { margin-top: 24px; }
.hub-g { margin-top: 0; }
.hub-e { border-top: 1px solid var(--line); }
.hub-e:first-child { border-top: 0; }
.hub-r { display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; text-align: left; min-height: 58px; }
.hub-r .glyph { width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; flex: none; }
.hub-r .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-r .t b { font-size: 15.5px; font-weight: 600; }
.hub-r .t small { font-size: 13px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-st { font-size: 13px; color: var(--muted); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.hub-st.busy { color: var(--clay); }
.hub-st.err { color: var(--danger); }
.hub-st.wait { color: var(--muted); font-style: italic; }
.hub-e.on { background: rgb(var(--ink-rgb) / .025); }
.hub-x { padding: 0 14px 14px 56px; animation: rise .3s var(--ease-out); }
.hub-x .field { margin-top: 0; height: 48px; }
.hub-x .row2 { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-x .hub-ta { height: 110px; margin-top: 10px; }
.hub-l { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); margin: 2px 0 8px; }
.hub-x .err-t { min-height: 0; margin-top: 6px; }
.hub-i { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 10px; margin-top: 6px; border-left: 1px solid var(--hair); }
.hub-i .t { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; font-size: 14px; }
.hub-i .t span { font-size: 12.5px; color: var(--muted); }
.hub-i .t span.busy { color: var(--clay); }
.hub-i .t span.err { color: var(--danger); }
.hub-i .d { font-size: 12px; color: var(--faint); }
.hub-i .rm { flex: none; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.hub-none { margin-top: 18px; }
.hub .cmp { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .hub-x { animation: none; } }
/* ---------- B10 (11 Nov): onboarding v2. Tokens only, so every look and dark mode style these. ---------- */
/* Collapsed title in the onboarding nav: the step marks rise to the top edge and the small title sits under them,
   so the two never overlap (founder's iPhone 17, 11 Nov). */
.nav:has(> .steps) .steps { transition: transform .3s var(--ease-out); }
.nav.tt-on:has(> .steps) .steps { transform: translateY(-14px); }
.nav:has(> .steps) .nav-tt { top: 66%; font-size: 14px; max-width: min(260px, calc(100% - 112px)); }
/* Bare handle typed in the links field: "Which one is @name?" with one chip per platform, right under the field. */
.hchips { margin-top: 10px; }
.hk-q { font-size: 14px; color: var(--ink-2); margin: 0 2px 8px; }
.hk-q b { color: var(--ink); font-weight: 600; }
.hk-l { display: flex; flex-wrap: wrap; gap: 8px; }
.hk { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--card); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .3); transition: background-color .2s, color .2s, transform .12s; }
.hk:active { transform: scale(.96); }
.hk.busy { opacity: .55; }
.hk.on { background: var(--ink); color: var(--card); box-shadow: none; }
.hk.on svg { width: 11px; height: 11px; }
/* Ask your AI: Copy prompt first, then three quiet "Open in" buttons with each app's mark. */
.ai-s .sub { margin-top: 8px; }
.ai-copy { width: 100%; margin-top: 22px; gap: 8px; }
.ai-copy svg { width: 18px; height: 18px; }
.ai-open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ai-app { height: 44px; border-radius: var(--r-btn); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .22); background: transparent; }
.ai-app:active { transform: scale(.97); }
.ai-mk { width: 17px; height: 17px; flex: none; color: var(--ink); }
.ai-open.sm { margin-top: 8px; }
.ai-open.sm .ai-app { height: 38px; font-size: 13px; }
.ai-copy-s { width: 100%; margin-top: 12px; gap: 8px; }
.ai-full { margin-top: 14px; }
.ai-full summary { font-size: 14px; color: var(--muted); cursor: pointer; }
.ai-full .full { margin-top: 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
/* While your AI writes: the atlas at about 80% of the screen, the question under it, the paste box docked below. */
.ai-w .lt { font-size: clamp(26px, 7.4vw, 31px); }
/* R2 (12 Nov): paste first. The answer box and Continue lead; the prompt and the apps sit under them; the atlas is a quiet fold. */
.ai-main { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ai-main .ai-ta { margin: 0; height: 132px; min-height: 132px; resize: vertical; }
.ai-main .ai-n { margin: 0; min-height: 0; } .ai-main .ai-n:empty, .ai-main .err-t:empty { display: none; }
.ai-again { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-again > .lnk { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink-2); padding: 8px 0; margin-right: auto; }
.ai-again > .lnk svg { width: 16px; height: 16px; }
.ai-open.ai-logos { margin: 0; display: flex; gap: 6px; }
.ai-open.ai-logos .ai-app { width: 40px; height: 40px; padding: 0; }
.ai-open.ai-logos .ai-app span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ai-fold { margin-top: 26px; border-top: .5px solid var(--hair); }
.ai-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 14px 0 6px; color: var(--muted); font-size: 15px; }
.ai-fold > summary::-webkit-details-marker { display: none; }
.ai-fold > summary::after { content: '+'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--muted); }
.ai-fold[open] > summary::after { content: '\2212'; }
.ai-fold > summary small { font-size: 12px; letter-spacing: .04em; opacity: .75; }
.ai-fold .ai-atlas { margin-top: 4px; min-height: 0; }
.ai-fold .ai-atlas .wm { min-height: 0; }
.ai-atlas .wm-lede { display: none; }
.ai-atlas .wm-head { justify-content: flex-end; }
.ai-fold .ai-atlas .wm-svg { aspect-ratio: auto; height: 58svh; min-height: 280px; }
.ai-foot { gap: 6px; padding-top: 6px; }
.ai-foot .later { font-size: 13.5px; padding: 4px 12px; }
/* The quiz's first screen. */
.qz-intro { margin-top: 10vh; }
.qz-intro .sub { margin-top: 10px; }
.qz-how { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--muted); }
/* The placeholder "Paste a link, or type your @handle" fits a 393 px phone (the typed text stays 16 px: no zoom on iOS). */
#linkIn::placeholder { font-size: 14.5px; letter-spacing: -.01em; }
/* M4: both at least 44 px, with clear room between seeing and removing */
.hub-i .vis-i { width: 44px; height: 44px; margin: 0 14px 0 0; }
/* M5: work held by a daily cap. One calm line, no spinner, no next step. */
.held-line { margin: 14px auto 0; max-width: 320px; text-align: center; color: var(--ink-2, inherit); font-size: 15px; line-height: 1.45; }
.src .t .held { color: var(--ink-2, inherit); }
/* FG1: stamp and seal on sign-in. The code settles and a hand-drawn check is pressed beside it (Field guide adds its
   red contour seal). Reduced motion: the end state at once. */
.code6 { position: relative; }
/* R2 (12 Nov): the moment is pressed where the eye already is: the seal lands over the middle of the code, the check
   is drawn large beside it, about 600 ms in all. */
.code6.sealed input { color: rgb(var(--ink-rgb) / .55); transition: color .3s; }
.ec-check { position: absolute; right: 2px; top: 50%; width: 38px; height: 30px; margin-top: -2px; fill: none; stroke: var(--clay, var(--ink)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ec-draw .3s cubic-bezier(.45,.05,.3,1) .08s forwards; pointer-events: none; }
.ec-seal { position: absolute; left: 50%; top: 50%; width: 88px; margin: -30px 0 0 -44px; mix-blend-mode: multiply; opacity: 0; transform: scale(1.5) rotate(-14deg); animation: ec-press .32s cubic-bezier(.3,1.25,.5,1) .04s forwards; pointer-events: none; }
.ec-seal svg { display: block; width: 100%; height: auto; }
@keyframes ec-draw { to { stroke-dashoffset: 0; } }
@keyframes ec-press { to { opacity: .9; transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .ec-check { animation: none; stroke-dashoffset: 0; } .ec-seal { animation: none; opacity: .9; transform: rotate(-10deg); } .code6.sealed input { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ic.sealed .ic-seal { transition: none; } }

/* H1 walk polish (11 Nov) */
/* Sources hub: a connected link shows its handle in ink, with a small green dot. */
.hub-r .t small.hub-on { color: var(--ink-2); display: block; }
.hub-r .t small.hub-on::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
/* T1: added but not read yet (the reader is paused): a hollow dot in muted ink. */
.hub-r .t small.hub-on.hub-wait { color: var(--muted); }
.hub-r .t small.hub-on.hub-wait::before { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.hub-waiting .sec { color: var(--muted); }
/* Privacy and data: the source name on the first line, who sees it under it. */
.pv-r .pv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 0; }
.pv-r .pv-t .pv-n { flex: none; max-width: 100%; }
.pv-r .pv-t .vis-r { padding-left: 0; margin-left: 0; min-height: 28px; font-size: 13px; color: var(--muted); }
/* Home reflections: the "From" chips, the same on every card. */
.hc-f.src { flex-wrap: wrap; }
.hc-f.src span { height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--tint); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
/* Links: the platforms not added yet get their own head under "Your links". */
.pl-h1 { margin-top: 18px; }
/* Test strip: one compact row. */
.test-strip { flex-wrap: nowrap; min-height: 0; }
.test-strip .ts-t { flex-direction: row; overflow: hidden; }
.test-strip .ts-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-strip .ts-b { flex: none; height: 30px; }
.test-strip.capped { flex-wrap: wrap; }
.phone.testing { --ts-h: calc(env(safe-area-inset-top, 0px) + 44px); }
/* Six-oval pair page: the drawing as wide as the other looks, the two names under the two marks. */
.p-marks.vn > svg { width: min(300px, 100%); height: auto; }
.p-names.vn { justify-content: space-between; width: min(300px, 100%); max-width: none; }
.p-names.vn span { width: 38%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pair page: room above the marks so nothing sits under the nav bar on first paint. */
.p-hero { padding-top: 18px; }
.p-hero .p-marks { margin-top: 10px; }
/* Held portrait: one quiet way back. */
.wv-out { display: block; margin: 14px auto 0; }

/* L1, 11 Nov: the platforms on a prepared invite, as small logos tinted by the look's ink (decorative beside the count). */
.h-logos { display: flex; flex-wrap: wrap; gap: 7px; margin: 3px 0 1px; color: var(--ink-2); }
.h-logos .lg { width: 14px; height: 14px; display: block; }
/* Seals in dark mode: multiply on a dark card turns the red nearly black. Print them normally and a little brighter
   so the red reads on every look's dark page. */
@media (prefers-color-scheme: dark) {
  .ic-seal, .ec-seal { mix-blend-mode: normal; filter: brightness(1.55) saturate(1.15); }
}
/* R2 (12 Nov): the ready notice on the portrait wait replaces the header line and stays in reach at the top. */
.ready-bar.ready-top { position: sticky; top: 8px; left: auto; right: auto; bottom: auto; z-index: 30; margin: 18px 0 6px; }
.phone:has(.tabbar:not(.off)) .ready-bar.ready-top { bottom: auto; }
/* R2 (12 Nov): Sources grouped by state: Needs a look, Read, then Add more by kind. */
.hub-more-h { margin: 40px 0 0; font: 400 26px/1.1 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.hub-more-h + .hub-s { margin-top: 6px; }
.hub-need .sec { color: var(--clay); }
.hub-more-h + .hub-s .sec-row, .hub-more-h + .hub-s .sec { margin-top: 10px; }
/* R2 (12 Nov): a source not read yet is said calmly in normal ink; a paused read is quieter still with a small clock
   dot; the Host page's reader line is a clear but calm notice. */
.soft { color: var(--ink-2); }
.paused { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.paused::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.h-reader { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-l); font-size: 14px; line-height: 1.4; color: var(--ink); background: rgb(var(--clay-rgb, 181 82 58) / .08); box-shadow: inset 3px 0 0 var(--clay); }
/* R2c: on the desk the atlas moves to the side pane, so the empty fold goes too. */
.ai-fold:not(:has(.ai-atlas)) { display: none; }
/* F3: what to do while the AI writes, a titled optional section that arrives in place */
.ai-wait { margin-top: 30px; padding-top: 22px; border-top: .5px solid var(--hair); }
.ai-wait[hidden] { display: none; }
.ai-wait .aw-k { font: 500 var(--label-size, 11px)/1 var(--label, inherit); letter-spacing: var(--label-track, .08em); text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ai-wait .aw-h { font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; margin: 0; }
.ai-wait .aw-l { color: var(--ink-2); margin: 6px 0 12px; font-size: 15.5px; line-height: 1.4; }
.ai-wait .ai-atlas { min-height: 0; }
.ai-wait .ai-atlas .wm { min-height: 0; }
.ai-wait .ai-atlas .wm-svg { aspect-ratio: auto; height: 46svh; min-height: 260px; }
.ai-wait.aw-in { animation: awIn .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes awIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ai-wait.aw-in { animation: none; } }
/* S2: plate caption in other looks (scenes only draw in Field guide; this stays quiet if one ever shows). */
.vig-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-calm { margin: 12px 0 2px; font-size: 14px; color: var(--muted); }
.toc .toc-none { color: var(--faint); }
.pl.src .t .paused::before { display: none; }
/* U2 (12 Nov): blank Home areas say one line with one way in (the same line as the world preview's), never an empty frame. */
.hw-none, .toc-gap { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 10px; }
.toc-gap { margin-top: 14px; }
.hw-none p, .toc-gap p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.hw-none .lnk, .toc-gap .lnk { flex: none; font-weight: 600; color: var(--clay); font-size: 14px; }
.hub-i .lnk.sm { flex: none; }
.ea-row .btn2 { height: 40px; padding: 0 20px; }
.ea-row .btn2:disabled { opacity: .45; }

/* X1 (12 Nov): Your AI subtitle, which AI wrote an answer, More at the foot of a section, numbered export steps. */
.ai-sub { font-size: 15px; line-height: 1.4; color: var(--ink); margin: 4px 0 10px; }
.ai-sub small { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.ai-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.ai-who-l { font-size: 12.5px; color: var(--ink-2); margin-right: 2px; }
.ai-who .chip { padding: 0 11px; height: 30px; cursor: pointer; border: 0; }
.ai-who .chip.on { background: var(--ink); color: var(--paper, #fff); box-shadow: none; }
.ai-who-n { font-size: 12px; color: var(--ink-2); margin: 4px 0 0; min-height: 0; }
.ai-who-n:empty { display: none; }
.ai-add { width: 100%; justify-content: center; margin-top: 10px; }
.hub-more-row { display: flex; justify-content: center; margin-top: 6px; }
.hub-more-b { position: relative; font-size: 13.5px; color: var(--ink-2); padding: 8px 14px; background: none; border: 0; }
.hub-more-b::after { content: ""; position: absolute; inset: -6px 0; }
.m-wait { margin-top: 10px; }
.howto-l { margin: 14px 0 16px; padding-left: 22px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.howto-l li::marker { color: var(--ink-2); font-weight: 600; }
/* M1: connector v0 (Connect your AI, the Home line, the review of what the AI sent) */
.cn-steps { margin: 8px 0 0 20px; padding: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cn-s { align-items: flex-start; gap: 12px; }
.cn-s .t b { display: block; margin-top: 2px; white-space: normal; }
.cn-k { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); }
.cn-s .t .cn-m { overflow: visible; text-overflow: clip; }
.cn-s .t .cn-rs { overflow: visible; white-space: normal; }
.cn-m { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--ink-3, var(--ink-2)); white-space: normal; }
.cn-rs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cn-r { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.15)); background: transparent; color: var(--ink-2, inherit); }
.cn-b { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.cn-line .lnk { font-size: 15px; }

/* ================= D1 (12 Nov): So true and Not me, one look everywhere ================= */
/* Nothing chosen: two equal, quiet outlined pills (no darker border on either, nothing faded). Chosen: So true filled
   clay with a check, like the clay stamp on the card; Not me filled a soft ink tint. The other one stays as it was.
   Keyboard focus is an outline only for keyboard users (:focus-visible), offset so it never reads as a choice. */
:root .vote .pill, :root[data-theme] .vote .pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: .5px solid rgb(var(--ink-rgb) / .3); color: var(--ink); opacity: 1; box-shadow: none; }
:root .vote.voted .pill, :root[data-theme] .vote.voted .pill { opacity: 1; box-shadow: none; }
.vote .pill .vk { display: none; flex: none; }
:root .vote .pill.yes.sel, :root[data-theme] .vote .pill.yes.sel { background: var(--clay); border-color: var(--clay); color: var(--card); }
:root .vote .pill.no.sel, :root[data-theme] .vote .pill.no.sel { background: rgb(var(--ink-rgb) / .08); border-color: rgb(var(--ink-rgb) / .55); color: var(--ink); }
.vote .pill.yes.sel .vk { display: block; }
.vote .pill:focus:not(:focus-visible) { outline: none; }
.vote .pill:focus-visible { outline: 2px solid rgb(var(--ink-rgb) / .5); outline-offset: 3px; }
.ins-vote { margin-top: 16px; }
/* on Home's cards: small, under the card, out of the card's own tap target */
.hc-w { flex-direction: column; }
.hm-best .hc-vote, .hc-w .hc-vote { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.hc-vote .pill { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
.hc-vote .pill .vk { width: 12px; height: 12px; }
/* the phone's swipeable row stays clean: only the featured card carries them, below it, away from a sideways swipe */
.h-deck .hc-vote { display: none; }
@media (min-width: 1024px) { .h-deck .hc-vote { display: flex; } }
/* the card screen's title: "Reflections" with the count beside it */
.nav-c .nav-t { color: var(--ink); font-weight: 600; }
.nav-c .nav-n { margin-left: 8px; color: var(--muted); }

/* G3: reflections ready, on a phone: the same composed block as the laptop (the mark, one line, one button, the
   count), centered under the mark instead of a small bar at the top. Theme tokens only; every look shares it. */
.scr.weave.wv-ready { justify-content: center; }
.scr.weave.wv-ready > .wv-art { width: min(220px, 56vw); }
.scr.weave.wv-ready .ready-bar.ready-top { position: static; display: flex; flex-direction: column; align-items: center; gap: 0; width: min(340px, calc(100% - 48px)); margin: 26px auto 0; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; }
.scr.weave.wv-ready .ready-bar .wd-rt { flex: none; }
.scr.weave.wv-ready .ready-bar .wd-rt b { display: block; font: 400 30px/1.12 var(--serif); letter-spacing: -.01em; }
.scr.weave.wv-ready .ready-bar .wd-rt span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.scr.weave.wv-ready .ready-bar .btn { width: 100%; margin-top: 22px; min-height: 52px; }
.scr.weave.wv-ready .wv-count { margin-top: 14px; }

/* G3: Your taste on Home: scene names as quiet chips, a short row of rare finds, one link to the Tastes area. */
.hm-taste .ht-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hm-taste .ht-c { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; line-height: 1.2; color: var(--ink); background: rgb(var(--ink-rgb) / .05); box-shadow: inset 0 0 0 .5px var(--hair); }
.hm-taste .ht-rare { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.hm-taste .ht-rare span { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hm-taste .ht-none { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.hm-taste .ht-empty .btn2 { margin-top: 12px; }