/* Repair · the layer over onebook.css. Only what The One Book has no component for, plus the
   adaptations a two-phone room needs; each adapted rule names the One Book rule it starts from. */

html,body{min-height:100%}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
textarea,input{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frame: nav on top, the screen, the session bar at the bottom ---------- */
#app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
/* .nav (61), in flow instead of fixed: the room has no page to scroll under it */
.nav.top{position:sticky}
.nav.top .in{height:auto;min-height:var(--nav-h);padding-block:10px;justify-content:flex-start}
/* .tabs (65–67): the two of them, always on both screens; the one holding the turn takes the
   tab's current state, and their glyph breathes */
.tabs.who{flex:1;min-width:0;display:flex;gap:4px}
.tabs.who .p{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;padding:5px 12px 5px 6px;border-radius:100px;color:var(--fg-soft);transition:background .4s var(--ease),color .4s var(--ease)}
.tabs.who .p[aria-current="true"]{background:var(--deep);color:var(--on-deep)}
.tabs.who .p.away{opacity:.55}
.tabs.who .g{width:26px;height:26px;flex:none;display:grid;place-items:center}
.tabs.who .g svg{width:20px;height:20px;display:block}
.tabs.who .tx{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.tabs.who .ps{font-size:var(--fs-xs);font-weight:400;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs.who .p[aria-current="true"] .ps{color:var(--on-deep-soft)}
.tabs.who .p.ready .ps{color:var(--ink-acc)}
.navbtn.snd{width:40px;height:40px;padding:0;display:grid;place-items:center;flex:none}
.navbtn.snd svg{width:18px;height:18px}
/* breathing, on the pause orb's timing (578–598): four seconds in, six out */
@keyframes breathe4in6out{0%{transform:scale(.86)}40%{transform:scale(1.12)}100%{transform:scale(.86)}}
.breathe{animation:breathe4in6out 10s ease-in-out infinite}

.stage{padding-block:clamp(22px,4vh,40px) 28px;display:flex;flex-direction:column;gap:18px;max-width:calc(var(--col) + 2*clamp(16px,4vw,40px))}
.stage>*{margin:0}
/* .p-hero .lead (437) */
.lead{font-size:var(--t-lead);color:var(--fg-soft)}
.stage .sh{margin-bottom:0}
/* .sh (81) without its number, for screens that are not a numbered step */
.sh.solo{grid-template-columns:minmax(0,1fr)}
.stage .sh .no{font-size:clamp(64px,18vw,140px)}
.stage .sh h2{font-size:var(--t-sub)}
.stage .brief{margin:0}
.stage .status,.toc .status{margin-top:0;align-self:flex-start}
/* ol.flow (897–913) fills its third numeral, the step the book's content leaned on; Repair's rules weigh the same */
.stage ol.flow li:nth-child(3)::before{background:var(--card);color:var(--accent)}
.stage .qnote{margin-top:0}
/* the slow-down offer: a .qnote.soft, its line set like the fence note's, carrying the bar's own .sbtn.pause (onebook.css 155) */
.qnote.slow .sbtn{display:flex;margin-top:12px;min-height:44px}

/* Penguin, their name for the pause: .sbtn.pause (155) carrying the penguin. Its inks are The One Book's:
   --deep (light) for the body, --on-deep for the belly, --dawn for the beak and feet, --l2 for the cheeks;
   on a dark ground the body takes a thin --on-deep line so it does not sink into the night. */
:root{--pg-body:#17271E;--pg-belly:#F5F0E4;--pg-beak:#D9A441;--pg-cheek:#D98CA3;--pg-line:transparent}
:root:not([data-theme="light"]),.pauseov{--pg-line:rgba(245,240,228,.55)}
:root:not([data-theme="light"]){--pg-beak:#F2D48A}
.sbtn.pause{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.sbtn.pause .pg{width:22px;height:22px;flex:none;margin-block:-3px}
#pauseTitle{display:inline-flex;align-items:center;gap:9px}
#pauseTitle .pg{width:22px;height:22px}
.pauseov .pg{--pg-beak:#F2D48A}
.stage .checks{margin-top:0}

/* .session (457–467), at the foot of the screen: the clock, Ready, Pause, the checklist */
.act.session{top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.act.session .in{flex-direction:column;align-items:stretch;gap:10px;padding-block:12px}
.act .row{display:flex;gap:8px}
.act .row .sbtn{flex:1;min-height:44px}
/* the way back: an icon-only .sbtn at the row's end, opening the drawer */
.act .row .sbtn.ico{flex:0 0 48px;padding:0;display:grid;place-items:center}
.act .row .sbtn.ico svg{width:20px;height:20px}
/* an ask, in the one button's place on both phones: the asker's ink on its edge, as a turn's text box */
.act .ask{border-radius:18px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);display:flex;flex-direction:column;gap:8px}
.act .ask p{margin:0;font-size:var(--fs-md);line-height:1.4;color:var(--fg)}
.act .ask .wait{font-size:var(--fs-sm);color:var(--fg-faint)}
.act .ask .row .sbtn{min-height:48px;font-size:var(--fs-md)}
/* Agree is the one button's colours (.go above): cream on the night ground, deep on the light one */
.act .ask .sbtn.primary{background:#F5F0E4;color:#17271E;border-color:#F5F0E4}
:root[data-theme="light"] .act .ask .sbtn.primary{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
/* the primary button: on the dark ground it is the pause overlay's end button (597); on the light
   ground, .sbtn.primary (465) */
.go{width:100%;min-height:56px;border:0;border-radius:100px;background:#F5F0E4;color:#17271E;font-size:var(--fs-lg);font-weight:500;cursor:pointer;transition:opacity .4s var(--ease),transform .2s var(--ease)}
:root[data-theme="light"] .go{background:var(--deep);color:var(--on-deep)}
.go:active{transform:scale(.985)}
/* disabled stays opaque: the session bar is translucent (148), so a faded button let the page show through it */
.go:disabled,:root[data-theme="light"] .go:disabled{background:var(--card);color:var(--fg-faint);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.go .clock{font-size:inherit}
.readies{display:flex;justify-content:center;gap:18px;font-size:var(--fs-sm);color:var(--fg-faint)}
.readies span{display:flex;align-items:center;gap:7px}
.readies i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--c)}
.readies .y{color:var(--fg)}
.readies .y i{background:var(--c)}

/* ---------- the turn ---------- */
.holder{display:flex;align-items:center;gap:14px}
.holder .g{width:52px;height:52px;flex:none;display:grid;place-items:center}
.holder .g svg{width:44px;height:44px}
.holder b{display:block;font-size:var(--t-lead);line-height:1.2}
.holder .clock.grace{color:var(--ink-gold)}
.holder .clock.over{font-size:var(--fs-sm);font-weight:400;color:var(--fg-faint)}
.holder .sbtn.more{margin-left:auto;flex:none;min-height:40px}
.holder .sbtn.more:disabled{opacity:.45;cursor:default}
.tb .picks{font-size:var(--fs-sm);color:var(--fg-soft);margin-bottom:6px}
.tb .k{color:var(--fg-faint)}
.tb p+p{margin-top:6px}
/* The One Book's justification rule (1324–1330) sets quotes (.q blockquote) and short statements
   flush-left, since at a short measure justification only opens gaps. A text box here holds one
   person's own words or a one-line framing, at about 34 characters on a phone: that rule applies.
   So do the one-sentence pattern and structure lines, and the two- or three-line briefs (Not therapy, Privacy), which
   The One Book justifies at 386 for its wider column. */
.stage .tb p,.toc .tb p,.deepfig .lead,.bridgefig p,.stage .brief>span:last-child{text-align:left;text-align-last:auto;-webkit-hyphens:manual;hyphens:manual}
.tb ul{margin:0 0 8px;padding-left:18px}
/* .nt (250–257) in each person's ink, as .tb[data-tone] (1389) */
.nt[data-tone="k"] b{color:var(--ink-gold)}.nt[data-tone="j"] b{color:var(--ink-acc)}
/* .q (531–536) holding several questions */
.q blockquote+blockquote{margin-top:12px}
.q .peb{margin-bottom:12px}
/* .cert (927–928), sized for a thumb */
.picks-in{display:flex;flex-wrap:wrap;gap:8px}
.picks-in .cert{min-height:40px;padding:8px 14px;color:var(--fg-soft)}

/* The listener's questions, in the room's own panel and type (no page image) */
details.lq{border-radius:18px;overflow:hidden;border:1px solid var(--pn-line)}
details.lq summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--pn)}
details.lq summary::-webkit-details-marker{display:none}
details.lq summary .label{margin:0}
.lq-body{background:var(--pn);padding:4px 18px 14px}
.lq-body ol{margin:0;padding:0 0 0 20px;display:grid;gap:7px;font-size:var(--fs-md);line-height:1.4;color:var(--fg-soft)}
.lq-body .cr{font-size:var(--fs-sm);line-height:1.4;color:var(--fg-faint);margin-top:12px;border-top:1px solid var(--pn-line);padding-top:8px;text-align:left;hyphens:none}

/* ---------- figures: deep grounds copied from .lens2 (1421) and .orbit-fig (141, 1417) ---------- */
.deepfig{position:relative;padding:clamp(20px,3vw,36px);border-radius:24px;background:var(--deep);color:var(--on-deep);overflow:hidden;box-shadow:var(--shadow)}
.deepfig .peb{color:var(--l0)}
.deepfig svg{display:block;width:100%;height:auto}
.deepfig .lead{color:var(--on-deep-soft);margin:0 0 6px}
.deepfig .loopfig{margin-block:4px 12px}
.orbit-fig .cap{align-items:flex-end}
.orbit-fig .cap .clock{font-family:var(--f-disp);font-size:var(--fs-num-l);font-weight:400;line-height:.9;color:#F5F0E4;letter-spacing:.02em}
.lens2 .l2-line{font-size:var(--t-sub);min-height:2.3em}
.net{padding:14px 10px 6px}
.net svg{display:block;width:100%;height:auto}
.net .cap3{margin:6px 12px 10px;font-size:var(--fs-md);color:rgba(245,240,228,.86)}
/* .scn sits absolute inside a sticky frame in the book; here the figure is in the flow and sizes from its viewBox */
.stfig .scn{position:relative;height:auto}
.bridgefig{padding:16px 16px 12px}
.bridgefig .bridge-svg{display:block;width:100%;height:auto}
.bridgefig p{margin:0 0 6px;font-size:var(--fs-md);color:var(--fg-soft)}
.bridgefig .label{margin:10px 0 0}
.bridgefig ol.steplabels{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-sm);color:var(--fg-faint)}
.bridgefig ol.steplabels li.lit{color:var(--ink-acc)}
.bridgefig.mini{padding:10px 12px 8px}
.bridgefig.mini .br-head{margin-bottom:4px}

/* ---------- the drawer (.toc, 412–425) for the checklist and "How we each show up" ---------- */
.toc .panel .picks-in .cert{color:var(--fg)}
.toc .panel h3{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-gold);margin:22px 0 10px;font-weight:500}
.toc .panel .tb{margin:0 0 14px}
.toc .panel .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.toc .panel .sbtn[aria-pressed="true"]{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
/* Where we are: the book's contents list (.toc li a, 128–131) as a list to read, not links; this place in
   the accent, places done faded; then the three ways back as wide .sbtn rows */
.toc ol.where li>div{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.toc ol.where .nn{font-family:var(--f-disp);font-size:var(--fs-num);color:var(--fg-faint);line-height:1}
.toc ol.where b{display:block;font-size:var(--fs-md);line-height:1.3;font-weight:500}
.toc ol.where .s{display:block;font-size:var(--fs-sm);color:var(--fg-faint);line-height:1.4;margin-top:2px}
.toc ol.where li.on .nn,.toc ol.where li.on b{color:var(--accent)}
.toc ol.where li.done b{color:var(--fg-soft)}
.goback{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sbtn.wide{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:12px 18px;border-radius:16px;text-align:left;white-space:normal;min-height:56px}
.sbtn.wide b{font-size:var(--fs-md);font-weight:500}
.sbtn.wide span{font-size:var(--fs-sm);font-weight:400;color:var(--fg-faint)}
.sbtn.wide:disabled{opacity:.5;cursor:default}
.toc .lead.small{font-size:var(--fs-sm);margin-top:14px}
/* home: the invitation's choices and the ask, stacked for a thumb */
.when{display:flex;flex-direction:column;gap:10px}
/* a spoken turn: one quiet line while it listens, its dot breathing on the room's 4-in-6-out; no words shown */
.hear{display:grid;gap:12px}
.when .sbtn{min-height:52px;font-size:var(--fs-md)}
.when .linkish{align-self:center}
.linkish{align-self:flex-start;background:none;border:0;padding:4px 0;color:var(--fg-soft);font-size:var(--fs-md);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);cursor:pointer}

/* ---------- the pause (578–598): the choosing state before it is shared ---------- */
.pauseov .pc .go{max-width:320px;margin:18px auto 0;display:block}
/* The book's overlay (202) is 82% over a quiet page. Here the page under it is a live turn screen
   (and sometimes the white CI page), so while the overlay is open the screen under it is hidden
   and the overlay sits on the night ground alone. */
body:has(#pauseov.open) #stage,body:has(#pauseov.open) #act,body:has(#pauseov.open) .toast{visibility:hidden}
/* .cd (208) is sized for a clock; the words that replace it take the subhead size */
.pauseov .cd.up{font-size:var(--t-sub);letter-spacing:-0.02em;font-kerning:normal;margin:10px 0}
/* the card is centred (204); the book's flush-left rule for .pauseov p (1325) is there to stop
   justification, and centring stops it too while keeping the card's one axis */
.pauseov .pc p{text-align:center}
.pauseov .who-p{font-size:var(--fs-md);color:rgba(245,240,228,.86)}
.pauseov .back{font-size:var(--fs-sm);color:rgba(245,240,228,.6)}
.pauseov .later{margin-top:10px;background:none;border:0;color:rgba(245,240,228,.7);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.toast{position:fixed;left:16px;right:16px;bottom:calc(170px + env(safe-area-inset-bottom,0px));z-index:70;max-width:520px;margin:0 auto;border-radius:18px;padding:16px 18px;background:var(--deep-2);color:var(--on-deep);border:1px solid var(--c);font-size:var(--t-lead);line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:none}
.toast .peb{color:var(--c);margin-bottom:4px}

/* no silent failures: the bar just above the foot (its height is --act-h, set by app.js) */
.netbar{position:fixed;left:16px;right:16px;bottom:calc(var(--act-h,0px) + 10px);z-index:65;max-width:520px;margin:0 auto;border-radius:14px;padding:10px 14px;background:var(--bg-2);color:var(--fg-soft);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.4;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.netbar.on{opacity:1;transform:none}
.netbar.warn{border-color:var(--gold);color:var(--fg)}
body:has(#pauseov.open) .netbar{bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:95}
@media (prefers-reduced-motion:reduce){.netbar{transition:none}}

/* the safety stop */
.safety{min-height:60dvh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.safety a.sbtn{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}

@media(prefers-reduced-motion:reduce){.tabs.who .p[aria-current="true"] .g{outline:1.5px solid var(--c);outline-offset:1px;border-radius:50%}}

/* ================= stage 4 · the card and the figure each part opens with ================= */
/* the eyebrow row carries "?", which brings this part's card back (.sbtn's line and radius, round) */
.ehead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ehead .eyebrow{margin:0}
.qbtn{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg-soft);font:inherit;font-size:var(--fs-md);font-weight:500;line-height:1;cursor:pointer;display:grid;place-items:center}
.qbtn:active{transform:scale(.96)}
/* the card: the seven fields on the protocol's panel (.q, 1153), each row as the lens's label rows (.l2-row, 466) */
.card7{background:var(--pn);border:1px solid var(--pn-line);box-shadow:var(--pn-sh);border-radius:18px;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);padding:18px 20px 10px}
.card7 .peb{color:var(--ink-acc);margin-bottom:6px}
.card7 dl{margin:0}
.card7 dl>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.card7 dl>div:first-child{border-top:0}
.card7 dt{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--fg-faint);line-height:1.35}
.card7 dd{margin:0;font-size:var(--fs-md);line-height:1.45;color:var(--fg);text-align:left;hyphens:manual}
@media(max-width:360px){.card7 dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.toc .panel .card7{margin-top:14px}
/* the figures sit on the book's deep ground (.deepfig, after .lens2 1421); the bridge on its own panel */
.introfig{display:flex;flex-direction:column;gap:8px}
.introfig .peb{margin:0}
.introfig .sx-cap{opacity:1;min-height:1.5em;font-size:var(--fs-sm);color:var(--on-deep-soft);text-align:center}
.bridgefig.introfig .sx-cap{color:var(--fg-soft)}
.bridgefig.introfig .peb{color:var(--fg-faint)}
.toc .panel .introfig{margin-top:6px}
.introfig .pill{transition:none}
.introfig .loopfig{max-width:280px}
.introfig .loopstage{margin-top:4px}
/* on a step's own screen its heading names it; the card's name is for the "?" sheet */
#stage .card7>.peb{display:none}
.introfig ol.ls-steps li{padding:8px 10px;font-size:var(--fs-sm);line-height:1.3}
.introfig ol.ls-steps li.on{background:rgba(245,240,228,.07);color:var(--on-deep);border-color:var(--c)}
/* the lens wiper (The One Book styles.css 1569–1583), crossing once on a clock; each account resolves in its ink */
.lens2.introfig{margin:0}
.introfig .l2-field{cursor:default;--w:1;padding:10px 0 6px}
.introfig .l2-line{font-size:var(--t-lead);text-align:center}
.introfig .l2-line .ch.in{color:var(--c,var(--on-deep))}
.l2-shade{position:absolute;top:-8px;bottom:-8px;left:calc(var(--w)*100%);right:calc(-1*clamp(20px,3vw,36px));pointer-events:none;
  background:linear-gradient(90deg,rgba(132,199,164,.12),rgba(132,199,164,.05) 30%,rgba(132,199,164,.03))}
.l2-wipe{position:absolute;top:-14px;bottom:-14px;left:calc(var(--w)*100%);width:0;z-index:2}
.l2-wipe::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,transparent,var(--l0) 8%,var(--l0) 92%,transparent);box-shadow:0 0 18px rgba(132,199,164,.55)}
.l2-wipe .kn{position:absolute;top:50%;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--deep);border:2px solid var(--l0);display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.6),0 0 0 6px rgba(132,199,164,.08)}
.l2-wipe .kn svg{width:20px;height:20px;fill:none;stroke:var(--l0);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lens2.all .l2-wipe,.lens2.all .l2-shade{opacity:0;transition:opacity .6s var(--ease)}
@media(prefers-reduced-motion:reduce){.lens2.introfig .l2-wipe,.lens2.introfig .l2-shade{display:none}}

/* ================= stage 5 · the note, the get-ready list, the Big Five ================= */
.notebox{display:flex;flex-direction:column;gap:6px}
.notebox p{margin:0;font-size:var(--fs-md);line-height:1.45;color:var(--on-deep);text-align:left;hyphens:manual}
.notebox .lead{font-size:var(--t-lead);color:var(--on-deep)}
.notebox .k{color:var(--on-deep-soft)}
.notebox .loopfig{max-width:300px;margin-inline:auto}
.notebox .loop-steps{margin-bottom:6px}
.toc .panel .notebox{margin:0 0 14px}
/* before the first session: the book's contents rows (.toc ol.where, above), each with its own button */
.getready{background:var(--pn);border:1px solid var(--pn-line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.getready .peb{color:var(--ink-gold);margin:0}
.getready p{margin:0;font-size:var(--fs-md);line-height:1.45;color:var(--fg-soft)}
.getready ol{list-style:none;margin:0;padding:0}
.getready li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.getready li:first-child{border-top:0}
.getready .nn{font-family:var(--f-disp);font-size:var(--fs-num);color:var(--fg-faint);line-height:1}
.getready b{display:block;font-size:var(--fs-md);font-weight:500;line-height:1.3}
.getready .s{display:block;font-size:var(--fs-sm);color:var(--fg-faint);line-height:1.4}
.getready li.done b{color:var(--fg-soft)}
.getready li.done .nn{color:var(--ink-acc)}
.getready .sbtn{min-height:40px}
.getready .row{display:flex}
.stage .getready .row .sbtn{min-height:48px}
/* one statement at a time: five answers, full width for a thumb */
.bfopts{display:flex;flex-direction:column;gap:8px;margin:14px 0 6px}
.bfopts .cert{width:100%;min-height:48px;justify-content:flex-start;text-align:left;color:var(--fg)}
.toc .panel .script{margin:10px 0 0;font-size:var(--t-lead)}
/* the film is in seq.css; the turn screens are in turn.css (2026-10-27 split: one owner per file) */