/* Layout: a single calm column, one section per page, a thin progress rule under a quiet brand bar. Same tokens as the builder mockup. */ :root{ --bg:#ECEFED; --panel:#FAFBFA; --ink:#1A2023; --muted:#5D686C; --line:#D3D9D7; --line-strong:#B9C2BF; --accent:#2E6A5C; --accent-ink:#FFFFFF; --accent-soft:#DCEAE5; --accent-line:#9CC3B8; --note:#EEF3F1; --error:#A3392C; --error-soft:#F7E6E3; --display:"Marcellus","Trajan Pro","Cinzel",Georgia,serif; --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --r:10px; } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --bg:#111517; --panel:#192022; --ink:#E6EAE8; --muted:#97A3A5; --line:#2B3437; --line-strong:#3B474A; --accent:#74B6A4; --accent-ink:#0D1513; --accent-soft:#1D312B; --accent-line:#3E6D61; --note:#172225; --error:#F08A7A; --error-soft:#2E1C1A; color-scheme:dark}} :root[data-theme="dark"]{ --bg:#111517; --panel:#192022; --ink:#E6EAE8; --muted:#97A3A5; --line:#2B3437; --line-strong:#3B474A; --accent:#74B6A4; --accent-ink:#0D1513; --accent-soft:#1D312B; --accent-line:#3E6D61; --note:#172225; --error:#F08A7A; --error-soft:#2E1C1A; color-scheme:dark} *{box-sizing:border-box} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased} .bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)} .bar-in{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:14px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px} .brand{font-family:var(--display);font-size:17px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap} @media (max-width:480px){.brand{font-size:14px;letter-spacing:.14em}.stepinfo{font-size:11px}} .stepinfo{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right} .track{height:3px;background:var(--line)} .fill{height:3px;background:var(--accent);transition:width .35s ease} @media (prefers-reduced-motion:reduce){.fill{transition:none}} .wrap{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:32px 40px} .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,6vw,46px);line-height:1.05;margin:8px 0 10px;text-wrap:balance} h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,5vw,36px);line-height:1.1;margin:6px 0 6px;text-wrap:balance} .intro{color:var(--muted);margin:0 0 24px;max-width:60ch} .btn{font:inherit;font-size:15px;font-weight:600;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);padding:11px 20px;cursor:pointer} .btn:hover{border-color:var(--accent)} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.primary:hover{filter:brightness(1.06)} .btn.link{background:none;border:none;padding:4px 2px;color:var(--accent);font-size:14px} .btn:focus-visible,.chip:focus-visible,.card-opt:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .welcome-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px} .welcome-list li{display:flex;gap:12px;align-items:baseline;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px} .welcome-list .k{font-family:var(--mono);font-size:12px;color:var(--accent);flex:0 0 1.6em} .welcome-list small{color:var(--muted);display:block} .meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14px;margin-bottom:28px} .form{display:flex;flex-direction:column;gap:12px} .q{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:90px} .q.enter{animation:rise .32s ease-out} @keyframes rise{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.q.enter{animation:none}} .q.missing{border-color:var(--error);box-shadow:inset 3px 0 0 var(--error)} .err{display:none;color:var(--error);font-size:13.5px;font-weight:600} .q.missing .err{display:block} .qlabel{font-weight:600;font-size:16.5px;line-height:1.35;text-wrap:pretty} .req{color:var(--accent);margin-left:2px} .qlabel .optional{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px} .help{color:var(--muted);font-size:14px;margin:-4px 0 0} .heading{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:16px 2px 4px;border-bottom:1px solid var(--line)} .note{background:var(--note);border:1px solid var(--accent-line);border-radius:var(--r);padding:12px 16px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start} .note::before{content:"";flex:0 0 8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent)} input[type=text],input[type=number],input[type=time],textarea,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;padding:11px 12px;width:100%} textarea{min-height:92px;resize:vertical} input[type=number]{max-width:120px} input[type=time]{max-width:170px} select{max-width:420px} ::placeholder{color:var(--muted);opacity:.85} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{font:inherit;font-size:14.5px;text-align:left;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;line-height:1.3} .chip:hover{border-color:var(--accent)} .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .chip:disabled{opacity:.4;cursor:not-allowed} .chip small{display:block;font-size:12px;opacity:.75} .optgroup{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:100%;margin-top:4px} .timerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .or{color:var(--muted);font-size:13px;padding-inline:4px} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px} .card-opt{font:inherit;text-align:left;background:var(--bg);border:1px solid var(--line-strong);border-radius:9px;padding:12px 14px;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:3px} .card-opt b{font-weight:600;font-size:15px} .card-opt span{font-size:13px;color:var(--muted)} .card-opt:hover{border-color:var(--accent)} .card-opt:disabled{opacity:.45;cursor:not-allowed} .card-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)} .count{font-family:var(--mono);font-size:12px;color:var(--muted)} .pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px} .saved{font-size:12.5px;color:var(--muted)} .review{display:flex;flex-direction:column;gap:12px} .rsec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px} .rhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px} .rhead h3{font-family:var(--display);font-weight:400;font-size:22px;margin:0} dl{margin:0;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:6px 14px;font-size:14px} dt{color:var(--muted)} dd{margin:0;overflow-wrap:anywhere} .done{text-align:left} /* THE LEAD PARAGRAPH IS THE HEADLINE NOW. The done screen used to open with an h2, and cutting it (the seal, the eyebrow and the headline all said "received") left the one sentence that carries the promise rendering in var(--muted), the quiet colour that only ever supported a headline. The screen had no anchor. This gives the first paragraph the weight the h2 was holding without putting a second "you're all set" back on the page. */ .done .eyebrow + .intro{margin-top:14px;color:var(--ink);font-size:clamp(17px,2.4vw,20px);line-height:1.5;max-width:52ch} .seal{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;color:var(--accent);font-family:var(--display);font-size:24px;margin-bottom:14px} footer.demo{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:8px 40px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line)} footer.demo b{font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px} /* added for the full intake */ .bar-in{flex-wrap:wrap} .jump{font:inherit;font-size:13px;max-width:240px;padding:6px 8px;border-radius:8px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong)} .partintro{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:14px 18px;margin:0 0 20px;font-size:15px} .partintro b{display:block;font-family:var(--display);font-weight:400;font-size:20px;margin-bottom:2px} .parts{display:grid;gap:22px;margin:0 0 28px} .part h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 4px} .part p{color:var(--muted);margin:0 0 10px;font-size:14.5px} input.short{max-width:200px} .drange{display:flex;flex-wrap:wrap;gap:12px} .drange label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);flex:1 1 160px;max-width:220px} .addr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .addr .a0,.addr .a1{grid-column:span 6} .addr .a2{grid-column:span 3}.addr .a3{grid-column:span 1}.addr .a4{grid-column:span 2} @media (max-width:480px){.addr .a2{grid-column:span 6}.addr .a3{grid-column:span 2}.addr .a4{grid-column:span 4}} .checkline{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:16px;cursor:pointer} .checkline input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:0 0 auto} .upload{display:flex;flex-wrap:wrap;align-items:center;gap:12px;cursor:pointer} .upload input{position:absolute;opacity:0;width:1px;height:1px} .upload:focus-within .btn{outline:2px solid var(--accent);outline-offset:2px} .uphint{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere} .rows{display:flex;flex-direction:column;gap:8px} .rowhead,.rowline{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr)) 32px;gap:8px;align-items:center} .rowhead span{font-size:12px;font-family:var(--mono);color:var(--muted);letter-spacing:.04em} .rowdel{font:inherit;font-size:18px;line-height:1;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer} .rows .btn.link{align-self:flex-start} /* Three columns stop fitting well before the phone breakpoint, so a row becomes one labelled card per entry at 760px. The column headings are repeated onto each field (::before from data-label) because a stacked row of three unlabelled boxes gives no clue which one wants the link. */ @media (max-width:760px){ .rowhead{display:none} .rowline{grid-template-columns:minmax(0,1fr) 32px;gap:4px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px} .rowline input{grid-column:1} .rowline input + input{margin-top:6px} .rowline .rowdel{grid-column:2;grid-row:1;align-self:start} .rowline input[data-label]::before{content:attr(data-label)} .rowfield{grid-column:1;display:flex;flex-direction:column;gap:3px} .rowfield > span{font-size:12px;font-family:var(--mono);color:var(--muted);letter-spacing:.04em} } @media (min-width:761px){.rowfield{display:contents}.rowfield > span{display:none}} .grid{display:flex;flex-direction:column;gap:8px} .gridrow{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr);gap:10px;align-items:center;padding-block:4px;border-bottom:1px dashed var(--line)} .grid.planner .gridrow{grid-template-columns:48px minmax(0,1fr)} .gridlabel{font-weight:600;font-size:14px} @media (max-width:560px){.gridrow{grid-template-columns:1fr}} .chip.sm{font-size:13px;padding:6px 11px} .tally{font-family:var(--mono);font-size:12.5px;color:var(--accent);padding-top:4px} .switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;user-select:none} .switch input{appearance:none;width:30px;height:18px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;margin:0} .switch input::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--panel);transition:transform .15s} .switch input:checked{background:var(--accent)} .switch input:checked::after{transform:translateX(12px)} .rpart{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:18px 0 0} .grid.timed .gridrow{grid-template-columns:48px minmax(0,1fr) minmax(150px,auto)} .ptime-cell{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px} input.ptime{font:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px;width:auto;max-width:140px} .btn.link.copy{font-size:12.5px;padding:2px 0} @media (max-width:640px){.grid.timed .gridrow{grid-template-columns:1fr}} /* ---- review notes ---- */ .btn.sm{font-size:13px;padding:7px 14px} .rnbox{display:none} body.reviewing .rnbox{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--warn-ink,#7A5212);margin-top:6px;padding-top:10px} .rnlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .rnlist:empty{display:none} .rn{background:var(--warn-soft,#FBF1DC);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:14px} .rn.done{opacity:.55} .rn.done .rn-text{text-decoration:line-through} .rn-meta{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--muted)} .rn-meta b{color:var(--warn-ink,#7A5212);font-size:12.5px} .rn-text{margin:4px 0 2px;white-space:pre-wrap;overflow-wrap:anywhere} .rn-act{display:flex;gap:12px} .rn-act .btn.link,.rn .btn.link{font-size:12.5px;padding:2px 0} .rnadd{align-self:flex-start;font:inherit;font-size:13px;font-weight:600;color:var(--warn-ink,#7A5212);background:none;border:1px dashed var(--warn-ink,#7A5212);border-radius:999px;padding:5px 12px;cursor:pointer} .rncomp{display:flex;flex-direction:column;gap:8px} .rncomp textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--warn-ink,#7A5212);border-radius:8px;padding:10px;min-height:70px;width:100%} .rncomp-act{display:flex;gap:12px;justify-content:flex-end;align-items:center} .rnpage{display:none} body.reviewing .rnpage{display:block;background:var(--panel);border:1px dashed var(--warn-ink,#7A5212);border-radius:var(--r);padding:12px 14px;margin:6px 0 16px} body.reviewing .rnpage .rnbox{border-top:none;margin-top:4px;padding-top:0} .rnpage-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn-ink,#7A5212)} body.reviewing .q.has-notes{border-color:var(--warn-ink,#7A5212)} .rnfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;font:inherit;font-size:14px;font-weight:700;background:var(--warn-ink,#7A5212);color:var(--panel);border:none;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)} .rnpanel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:30;background:var(--panel);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.12);padding:calc(16px + env(safe-area-inset-top,0px)) 18px 24px;overflow:auto;display:flex;flex-direction:column;gap:10px} .rnp-head{display:flex;justify-content:space-between;align-items:center} .rnp-head b{font-family:var(--display);font-weight:400;font-size:22px} .rnp-tools{display:flex;gap:10px;align-items:center} #rnCopyArea{font:inherit;font-size:12.5px;width:100%;min-height:120px;background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:8px} .rnpanel section h4{margin:12px 0 6px;font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .rnpanel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .rn-q{font-weight:600;font-size:13.5px;margin-bottom:4px} /* ---- checklist options (replaces pill bubbles) ---- */ .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:6px} .chips .optgroup{grid-column:1/-1} .chip{display:flex;gap:10px;align-items:flex-start;border-radius:8px;background:var(--bg);padding:10px 12px;text-align:left;line-height:1.35} .chip::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--panel);box-sizing:border-box} .chip.radio::before{border-radius:50%} .chip .ct{min-width:0} .chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)} .chip[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--panel)} .chip.box[aria-pressed="true"]::before{box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .timerow .chip{width:auto} .gridrow .chips{display:flex;flex-wrap:wrap;gap:6px} .chip.sm{border-radius:999px;padding:6px 12px;background:var(--panel)} .chip.sm::before{display:none} .chip.sm[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} /* ---- dropdowns, voice notes, recommendations, availability ---- */ .q select{max-width:100%} .msel{position:relative} .msel-btn{font:inherit;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:var(--bg);color:var(--muted);border:1px solid var(--line-strong);border-radius:8px;padding:11px 12px;cursor:pointer} .msel-btn.has{color:var(--ink)} .msel-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .caret{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)} .msel.open .caret{transform:rotate(-135deg) translateY(-2px)} .msel-panel{margin-top:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.08)} .msel-panel .chips{grid-template-columns:1fr;gap:4px;max-height:340px;overflow:auto} .msel-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px} .grid .gridrow select{max-width:240px} .planner2{display:flex;flex-direction:column;gap:8px} .prow{display:grid;grid-template-columns:96px 160px 170px minmax(0,1fr);gap:8px;align-items:center;padding-block:4px;border-bottom:1px dashed var(--line)} .prow select{padding:8px 10px} @media (max-width:640px){.prow{grid-template-columns:1fr 1fr}.prow .gridlabel{grid-column:1/-1}.prow .ptime-cell{grid-column:1/-1}} /* A TAPPABLE DROPDOWN ON A PHONE, and `height` is deliberate. MEASURED in WebKit at 390x508 on the live site, 2026-10-23: the seven training-planner dropdowns were 25px tall. Apple's minimum tap target is 44px. The cause is Safari-specific - WebKit IGNORES padding AND min-height on a