/* ==========================================================================================================================
   PERITALE V2 FLOW: THE ONE DESIGN LAYER (22.10.2026, Revital: "many fonts, sizes, kinds of design; some cards with an outer border,
   some filled as I asked").  SINGLE SOURCE: unified/design/flow-design.css.  unified/build.py copies it, unchanged, to
     capture-prototype/design-unify.css   postvideo-prototype/design-unify.css   postmapping-voice/site/public/css/design-unify.css
   and every part's HTML links it LAST, so it wins over the part's own stylesheet.  Do not edit the copies.
   Her rules honoured here: cards and chips FILLED pale pink, NO outline border; chosen = solid pink; chips are pills (elliptical)
   and equal width inside a group; one font (Heebo); one button pair; instruction bubble stays at the TOP (take) and the
   hearing "I heard it" button stays large + full width.  Base: ux/DESIGN_SYSTEM_FLOW.md (tokens), amended where it conflicts with her
   fill/no-outline rule (outlined chips, 1px-line cards, outlined secondary button are replaced by fills).
   ========================================================================================================================== */
:root{
  /* surfaces: ONE fill for every card / chip / input / secondary button, a deeper one for small controls and nested surfaces */
  --fill:#FBEAF3; --fill-2:#F6D9E9; --fill-ctl:#F4C2DC;
  --sel:var(--pk-ink);            /* chosen state: solid pink, white text (5.8:1) */
  --r-chip:26px;                  /* chips are pills / ellipses */
  /* ONE type scale (px): display 56 / title 28 / h2 20 / lead 18 / body 16 / small 14 (buttons 17). Same tokens in all three parts. */
  --t-display:56px; --t-title:28px; --t-h2:20px; --t-lead:18px; --t-body:16px; --t-small:14px; --t-btn:17px;
  --lh-title:1.2; --lh-h2:1.3; --lh-lead:1.5; --lh-body:1.55; --lh-small:1.4;
  /* spacing scale 4 / 8 / 12 / 16 / 24 / 32 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --btn-h:56px; --hit:48px; --hit-min:44px;
  --font:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#FFFFFF; --surface:#FFFFFF; --canvas:#FFFFFF;
  --track-off:var(--fill-ctl);
}

/* ---------- 1. ONE font family, everywhere (Heebo; the logo PNG is the only serif) ---------- */
html,body,button,input,select,textarea,h1,h2,h3,h4,p,li,a,span,div,label,summary,small,b,strong{font-family:var(--font)}
.near-line{font-family:var(--font)}                 /* size stays: the 11px test line IS the measurement */
html{background:var(--bg)}body{background:var(--bg);color:var(--ink)}
@media (min-width:600px){body{background:#F6EEF2}}

/* ---------- 2. type roles ---------- */
.eyebrow,.guide-label,.results h3,.signal h3{font-size:var(--t-small);font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--pk-ink)}
h1,html[dir=rtl] h1,.h1{font-size:var(--t-title);line-height:var(--lh-title);font-weight:700;letter-spacing:0;color:var(--ink);text-wrap:balance}
h2,.h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:0}
.lead,.lede,.sheet-p{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:400;color:var(--ink-2);text-wrap:balance}
.lead b,.lead strong,.lede b,.lede strong{font-weight:inherit}
/* labels (a line that names the thing below it) */
.cards-label,.age-label,.field>label,.field>.lab,.ctx .q,.dry-h,.base-label{font-size:var(--t-body);line-height:1.3;font-weight:600;color:var(--ink)}
.small,.note,.foot,.effect,.age-help,.cta-note,.status,.need-note,.c-detail,.counter,.chatstatus,.rv-n,.safe-note,.r-desc,.scale-txt,.part,.remain,.tag,.err,.up-line,.light p,.mic-meter,.face-note,.ends,.sig-val,.dc-bar{font-size:var(--t-small);line-height:var(--lh-small)}
.consent,.consent-items,.switch-text,.intro-ask,.res-row,.res-wait,.checks li,.hint,.pv-text,.pv-title,.panel-actions .pa,.rule3 li,.rule3 li b,.chips li,.intro-step .chips-big li,#intro2 .chips-big li,.up-line.err{font-size:var(--t-body);line-height:1.4}
.consent-items,.consent-items .c-detail,.c-detail{font-size:var(--t-small)}
.light strong{font-size:var(--t-body)}
.effect,.age-help,.cta-note,.status{color:var(--ink-3);font-weight:500}

/* ---------- 3. links: ONE style ---------- */
/* stand-alone link (a thing to tap): pink ink, 600, no underline, a small chevron says "tap" */
.link,.lang-switch,.switch-link,.c-detail summary,.needs-row summary,.panel-actions .pa,.btn.ghost,.btn-ghost,.plan-card .cur,.top .save-later,.more-d summary,.cap-item details summary,.wsh-x{
  color:var(--pk-ink);font-size:var(--t-body);font-weight:600;text-decoration:none;background:none;border:0;min-height:var(--hit);display:inline-flex;align-items:center;gap:6px}
.needs-row summary::after,.c-detail summary::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);margin-inline-start:6px;margin-top:-3px;flex:none}
.needs-row[open] summary::after,.c-detail[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.c-detail summary{min-height:var(--hit-min);font-size:var(--t-small)}
.more-d summary::after{content:none}
/* the consent sentences carry their own inline 'details' link: underlined like any inline link, no chevron */
.consent-items .c-detail summary{display:inline;min-height:0;text-decoration:underline;text-underline-offset:3px;font-size:var(--t-small)}
.consent-items .c-detail summary::after{content:none}
/* link inside running text: same colour and weight, underlined (colour is never the only cue) */
.consent a,.report a,p a{color:var(--pk-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- 4. buttons: ONE pair.  primary = solid pink; secondary = pale-pink fill, pink text, no outline ---------- */
.btn{border-radius:var(--r-pill);min-height:var(--btn-h);font-size:var(--t-btn);font-weight:700;border:0;padding:0 var(--s-5)}
.btn-accent,.btn.primary{background:var(--pk-ink);color:#fff;border:0}
@media (hover:hover){.btn-accent:hover,.btn.primary:hover{background:var(--pk-deep)}}
.btn-accent:active,.btn.primary:active{background:var(--pk-deep)}
.btn-outline,.btn.secondary,.skip-light{background:var(--fill);color:var(--pk-ink);border:0}
@media (hover:hover){.btn-outline:hover,.btn.secondary:hover{background:var(--fill-2)}}
.skip-light{background:#fff;color:var(--pk-ink);min-height:var(--btn-h)}
/* disabled = the SAME primary, dimmed (never a different washed colour) */
.btn-accent:disabled,.btn-accent[disabled],.btn.primary[disabled],.btn[disabled]{background:var(--pk-ink);color:#fff;opacity:.4;border:0;cursor:default}
.btn-outline:disabled,.btn.secondary[disabled]{background:var(--fill);color:var(--pk-ink);opacity:.5}
.btn.ghost[disabled]{background:none;color:var(--ink-3);opacity:1}
.auth .btn{background:var(--fill);color:var(--ink);border:0}
.btn-near{min-height:64px}
/* the hearing-check answer button stays LARGE and full width (her 22.10 22:25 rule); the wrapper stretches so width:100% means the screen */
.soundcheck{align-items:stretch}.sound-ask{align-self:stretch;width:100%}
.sound-level i{background:var(--fill-ctl)}.sound-level i.lit{background:var(--pk-ink)}
.sound-ask .btn,.soundcheck .btn,#soundBtn,#soundHeard{width:100%;min-height:64px}

/* ---------- 5. cards: pale-pink fill, NO outline border ---------- */
.card,.card.tint,.card.flat,.card.blush,.card.offer,.card.is-accent,.card.score,
.hub-item,.med,.rv,button.rv,.rv-sec,.answer,.sym,.sub-q,.plan,.tool,.daily,.demo,.stim,.symkey,.safe-line,.redo,.receipt-box,.code,.preview,.beep,.bright,.note-route,.report,.plan-strip,.cover,.rater{
  background:var(--fill);border:0;box-shadow:none;border-radius:var(--r-lg)}
.card.is-accent,.card.offer{background:var(--fill-2);border:0;box-shadow:none}
.plan[aria-checked=true],.tool[aria-checked=true],.sym[data-on=true]{background:var(--fill-ctl);border:0;box-shadow:none}
.redo{border-inline-start:0}
.cover,.plan-strip{border-radius:var(--r-pill)}
.sym[data-on=true]{box-shadow:none}
.answer{background:transparent;padding:var(--s-2) 0}                /* wrapper of the chips, not a card of its own */
.rater,.sub-q{background:var(--fill-2);border-radius:var(--r-lg)}
.card .card,.card .med,.card .rv,.card .sub-q{background:#fff}
/* a chip / option sitting on a filled card is one step deeper so it still reads as a chip */
.card .chip,.card .opt,.card .copt,.card .dry-row,.card .sv,.card .scale button,.answer .chip,.sheet .chip,.rater .sv,.rater .subq .row button,.card .pad button{background:var(--fill-2)}
.card .chip[aria-pressed=true],.answer .chip[aria-pressed=true],.sheet .chip[aria-pressed=true],.rater .sv.on,.card .scale button[aria-checked=true],.card .opt.on,.card .copt.on,.card .dry-row.on,.rater .subq .row button.on{background:var(--sel)}
.sym-body{background:transparent}
.sym{overflow:hidden}
.intro-step .chips li,.rule3 li,.chips li,.intro-step .chips-big li,#intro2 .chips-big li{background:var(--fill);border:0;border-radius:var(--r-md)}
.rule3 li,.chips li{border-radius:var(--r-lg)}
.chips .ico{background:transparent;color:var(--pk-ink)}                         /* icon only, no extra circle */
.rule3 .chip-dot{background:var(--pk-ink)!important}                           /* ONE accent colour (was blue / magenta / green) */
.rule3 li b{color:var(--ink)}
.lock .veil{background:rgba(255,255,255,.92)}
.divider,.data-line,.foot{border-color:var(--line)}
.scene-photo,.stills img{border-radius:var(--r-lg)}
.mode-chip.m-practice{background:var(--fill);color:var(--explain);box-shadow:none}

/* ---------- 6. chips / options / scale buttons: pill, pale-pink fill, no outline; chosen = solid pink ---------- */
.chip,.opt,.copt,.dry-row,.subq .row button,.pad button,.sv,.scale button,.tab,.tabs button,.seg2,.modebar,.side-btn,.ctx .ans button,.pill,.pill-btn,.lang-pill,.part,.remain,.tag{
  background:var(--fill);border:0;box-shadow:none;color:var(--ink)}
.chip,.opt,.copt,.dry-row,.subq .row button,.ctx .ans button{border-radius:var(--r-chip)}
@media (hover:hover){.chip:hover,.opt:hover,.dry-row:hover,.sv:hover,.subq .row button:hover{background:var(--fill-2)}}
.chip.on,.chip[aria-pressed=true],.opt.on,.copt.on,.dry-row.on,.subq .row button.on,.sv.on,.scale button[aria-checked=true],.ctx .ans button.on,.tabs button[aria-selected=true],.seg2 button.on,.modebar button[aria-pressed=true]{
  background:var(--sel);color:#fff;border:0;box-shadow:none;font-weight:700}
.chip.sugg{border-style:solid}
.chip .mark,.chip .tick,.opt .box{background:#fff;border:0}                    /* marks are white discs on the pink fill, no outline */
.chip.on .mark,.chip[aria-pressed=true] .mark,.chip[aria-pressed=true] .tick,.opt.on .box{background:#fff;border:0}
.chip.on .mark::after,.chip[aria-pressed=true] .mark::after,.chip[aria-pressed=true] .tick::after{border-color:var(--pk-ink)}
.opt.on .box::after{border-color:var(--pk-ink)}
.chip.on .c-val,.chip[aria-pressed=true] .c-val,.dry-row.on .c-val{background:#fff;color:var(--pk-ink)}
.chip[aria-pressed=true] .c-name{color:#fff}
.chip.none{background:var(--fill)}
.chip.none.on{color:#fff}
.seg2,.modebar,.seg{background:var(--fill);border:0;border-radius:var(--r-pill)}
.seg2 button,.modebar button,.seg button{color:var(--ink-2)}
.seg button[aria-pressed=true]{background:#fff;color:var(--pk-ink);box-shadow:none}
.pad button:active{background:var(--fill-2)}
.tab,.tabs button{border-radius:var(--r-pill)}
/* equal width inside a group: grid columns are equal; chips fill their cell */
.chips,.chips.col,.copts{align-items:stretch}
.chips .chip,.chipwrap>.chip{width:100%}

/* pills in the header and counters: the same filled pill everywhere */
.pill,.pill-btn,.lang-pill,.part,.remain{border-radius:var(--r-pill);color:var(--ink);font-weight:600;font-size:var(--t-small)}
.lang-pill,.pill,.pill-btn{min-height:var(--hit-min);min-width:var(--hit-min);padding:0 var(--s-4)}
.part,.remain{padding:6px 14px}
.remain{align-self:flex-start;margin-block:var(--s-1)}
.tag{padding:2px 10px}

/* ---------- 7. inputs / selects / toggles / checkboxes: filled, no outline ---------- */
.input,textarea.input,.age-selects select,.freerow input,.freerow select,.rtext,.wtype textarea,.wmac-edit input,select,input[type=text],input[type=number],input[type=email],input[type=tel],textarea{
  background:var(--fill);border:0;border-radius:var(--r-md);color:var(--ink);font-size:var(--t-body)}
.age-selects select{min-height:52px;font-size:var(--t-body);padding:0 var(--s-3)}
.input:focus,.age-selects select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.consent .tick .box{width:24px;height:24px;border:0;background:var(--fill-ctl);border-radius:7px}
.consent .tick input:checked + .box{background:var(--pk-ink);border:0}
.switch .track,.toggle input{background:var(--fill-ctl)}
.switch .knob{background:#fff;box-shadow:0 1px 3px rgba(122,15,77,.35)}
.switch input:checked + .track,.toggle input:checked{background:var(--pk-ink)}
.check-row input{accent-color:var(--pk-ink)}
.sticky-cta,.nav.sticky,.composer,.offer-bar{border-top:0}
.nav.sticky,.composer,.offer-bar{box-shadow:0 -10px 24px -14px rgba(26,16,20,.18)}
.top{border-bottom:0}
.sheet-wrap .sheet,.sheet{box-shadow:var(--shadow-sheet,0 -8px 32px -12px rgba(26,16,20,.22))}
.timeline{border-inline-start-color:var(--fill-ctl)}

/* ---------- 8. chat: a real chat.  Peritale bubble = pale pink, hers = solid pink ---------- */
.bubble.sys,.bub.q{background:var(--fill);border:0;color:var(--ink)}
.bubble.me,.bub.a{background:var(--sel);border:0;color:#fff;font-weight:500}
.bubble.me .via,.bub.a .via{color:#fff;opacity:.85}
.bubble.me.listening{background:var(--fill-2);border:0;color:var(--pk-deep)}
.bubble.me.pending{opacity:.8}
.bub.hint{background:none}
.mic.busy{background:var(--pk-ink);opacity:.4;color:#fff}

/* ---------- 9. layout: normal top spacing, no scrollbar strip ---------- */
.sheet,.main,.sheet-inner,.composer,.report,.tabs{scrollbar-width:none}
.sheet::-webkit-scrollbar,.main::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none;width:0;height:0}
/* take intro screens: content starts at the top (was pushed to the bottom of the sheet leaving a big empty gap) */
#app.mirror .sheet.glass-full .sheet-inner,.sheet-inner{justify-content:flex-start}
.sheet-inner{min-height:100%}
#app.mirror .sheet.glass-full{background:#fff}
section.sheet{padding-inline:var(--gutter,20px)}
.intro-step{display:flex;flex-direction:column;gap:var(--s-3);flex:1 1 auto}
.intro-step.hidden{display:none}
.intro-step h1{margin:0}
.intro-step .eyebrow{margin:0}
.intro-step .lead{margin:0}
.intro-step .cards-label{margin-top:var(--s-4)}
.intro-step .chips-big,.rule3{margin:0}
.intro-step .rule3{gap:var(--s-2)}
.intro-step .toggles{gap:var(--s-1)}
.intro-step .switch{padding:var(--s-1) 0}
.intro-step .scene-photo{margin:0}
.intro-step .soundcheck{margin:var(--s-2) 0}
.intro-step .age-field{margin:var(--s-2) 0}
.intro-step .consent{margin:0;gap:var(--s-2)}
.intro-step .needs-row{border-top:0;margin:0}
.intro-step .sticky-cta{margin:auto calc(-1 * var(--gutter,20px)) 0;padding:var(--s-3) var(--gutter,20px) calc(var(--s-5) + var(--safe-bottom,0px));background:#fff}
section.sheet{padding-top:calc(76px + var(--safe-top,0px))}
section.sheet.glass-bottom{padding-top:var(--s-4)}
.intro-step .remain{margin:0}

/* ---------- 10. take: instruction bubble stays at the TOP; only its colours / type come from the tokens ---------- */
.panel,.panel .instr h2,.panel .instr p{font-family:var(--font)}
.panel{background:rgba(255,255,255,.97);border-radius:var(--r-lg)}
.panel .hint{font-size:var(--t-body)}
.bubble{box-shadow:none}
.read{background:var(--fill);border-inline-start:0;border-radius:var(--r-md);color:var(--pk-deep)}
.mic-meter .mm-bars i{background:var(--fill-ctl)}
.checks .tick{border:0;background:var(--fill-ctl)}
.checks li.warn .tick{border:0;background:var(--fill-2)}
.finale,.nowait-veil{background:#fff}

/* ---------- 11. report / widget surfaces (part C) ---------- */
.report .rrow,.rv-sec .rrow{border-bottom-color:var(--fill-2)}
.report{background:transparent}
/* the phone mock-up of the widget (.wph and everything inside) keeps its own design, as agreed 20.10: only the font is shared */
.daily{border:0}
.dc-grid>div{background:#fff}
.demo-note,.her-words{background:var(--fill)}
.tabs{padding-block:var(--s-1)}
.tab,.tabs button{font-size:var(--t-body)}
.hub-item{min-height:var(--hit)}
.tool .ico{background:#fff}

/* ---------- 23.10 refinement (her note: the first screens read as huge colour blocks, not refined) ----------
   same rules (pale-pink fill, no outline) but a fainter tint, tighter blocks and smaller radii, so cards read as quiet surfaces */
:root{--fill:#FDF4F9; --fill-2:#FAE6F0}
.intro-step .chips li,.intro-step .chips-big li,#intro2 .chips-big li,.rule3 li,.chips li{padding:8px 12px;min-height:0;font-size:var(--t-small);line-height:1.35;border-radius:var(--r-md)}
#intro2 .chips-big{gap:6px}
#intro2 .chips-big li{min-height:0}
.rule3{gap:6px}
.rule3 li,.chips li{border-radius:var(--r-md)}