/* Section «Профиль» (tab 4). Carried over from profile.html (the accepted spec). Everything is scoped under
   #ph.xpf (set by the section hook while a profile screen shows), so the spec's short class names
   (.li, .gh, .opt, .meter…) cannot leak into other sections. */
#ph.xpf i[data-i]{display:inline-grid;place-items:center;font-style:normal;flex:none}
#ph.xpf i[data-i] svg{width:18px;height:18px}
#ph.xpf .pill i[data-i] svg{width:13px;height:13px}
#ph.xpf .row.between{justify-content:space-between}
#ph.xpf .hd .ibtn{flex:none}
#ph.xpf .pf-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#ph.xpf .pf-p{margin:0}
#ph.xpf .scr>*,#ph.xpf>.body>*,#ph.xpf .sheet-in>*{flex-shrink:0}
#ph.xpf .pf-pad{height:84px;flex:none}

/* board: one main value wrapping under the title */
#ph.xpf .hd.hv{flex-wrap:wrap;row-gap:4px}
#ph.xpf .hd .bv{flex-basis:100%;font:700 34px/1.05 var(--font-d);letter-spacing:-.02em;margin-top:6px}
#ph.xpf .hd .bv small{font:600 18px/1 var(--font-d);color:var(--ink-2);margin-left:6px;letter-spacing:0}
#ph.xpf .hd .bvs{flex-basis:100%;font-size:15px;color:var(--ink-2)}
#ph.xpf .ibtn.bd{position:relative}
#ph.xpf .ibtn.bd .dot{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:#fff;font:700 12px/20px var(--font);text-align:center;padding:0 5px}
#ph.xpf .av.lg{width:56px;height:56px;border-radius:18px;font-size:19px}

/* group heading (section header, 16) */
#ph.xpf .gh{font:600 16px/1.2 var(--font-d);margin:8px 2px -4px;color:var(--ink)}
#ph.xpf .gh small{font:500 14px/1.2 var(--font);color:var(--ink-3);margin-left:6px}

/* settings list: plate without padding, rows split by a hairline */
#ph.xpf .plate.lst{padding:0;overflow:hidden}
#ph.xpf .li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 14px;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink);font:inherit;box-sizing:border-box}
#ph.xpf .li+.li,#ph.xpf .li+.lx,#ph.xpf .lx+.li{border-top:1px solid var(--line)}
#ph.xpf button.li:active{background:var(--surface-2)}
#ph.xpf .li:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-plate)}
#ph.xpf .li .ic{width:36px;height:36px;border-radius:11px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;flex:none}
#ph.xpf .li .ic svg{width:19px;height:19px}
#ph.xpf .li .ic.txt{font:700 14px/1 var(--font)}
#ph.xpf .li .ic.okc{background:var(--ok-soft);color:var(--ok)}
#ph.xpf .li .ic.atc{background:var(--attn);color:var(--attn-ink)}
#ph.xpf .li .ic.otc{background:var(--out);color:var(--out-ink)}
#ph.xpf .li .tx{flex:1;min-width:0}
#ph.xpf .li .tx b{display:block;font-size:16px;font-weight:500;line-height:1.3}
#ph.xpf .li .tx>span{display:block;font-size:14px;color:var(--ink-2);line-height:1.3;margin-top:1px}
#ph.xpf .li .tx .pill{display:inline-flex;vertical-align:middle;margin:3px 4px 0 0}
#ph.xpf .li .tx .since{display:block;margin-top:3px}
#ph.xpf .li .tx .meter{display:block;height:5px;margin-top:6px;max-width:220px}
#ph.xpf .li .tog{display:inline-block;pointer-events:none}
#ph.xpf .li .val{font-size:14px;color:var(--ink-2);white-space:nowrap;flex:none}
#ph.xpf .li .val.big{font:700 20px/1 var(--font-d);color:var(--ink)}
#ph.xpf .li .chev,#ph.xpf .li .chev svg{width:18px;height:18px;color:var(--ink-3);flex:none}
#ph.xpf .li.static{cursor:default}
#ph.xpf .li.danger,#ph.xpf .li.danger .tx b{color:var(--danger)}
#ph.xpf .li.danger .ic{background:var(--danger-soft);color:var(--danger)}
#ph.xpf .li .btn{flex:none;min-height:44px;font-size:15px;padding:0 14px}
#ph.xpf .li .chev.up svg{transform:rotate(90deg)}
#ph.xpf .li .chev.dn svg{transform:rotate(-90deg)}
#ph.xpf .lx{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px 12px 62px;background:var(--surface-2)}
#ph.xpf .lx .btn{min-height:44px;font-size:15px;flex:none;padding:0 14px}

/* a row that is the switch itself (≥48 px), the track is decoration */
#ph.xpf .tgrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;border:0;background:transparent;padding:0;font:inherit;font-size:16px;color:var(--ink);text-align:left;cursor:pointer}
#ph.xpf .tgrow+.tgrow{border-top:1px solid var(--line)}
#ph.xpf .tgrow .tog{display:inline-block;pointer-events:none}
#ph.xpf .tgrow:focus-visible,#ph.xpf .li[role="switch"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}

/* labelled fields */
#ph.xpf .fld{display:flex;flex-direction:column;gap:6px}
#ph.xpf .fld>label,#ph.xpf .fld>.lb{font-size:14px;font-weight:600;color:var(--ink-2)}
#ph.xpf .fld .hint{font-size:14px;color:var(--ink-3)}
#ph.xpf .psheet .inp input{background:var(--surface-2);box-shadow:none}
#ph.xpf .fld .inp input.big{font:600 22px/1 var(--font-d);letter-spacing:.35em;text-align:center}
#ph.xpf .pf-chips{display:flex;flex-wrap:wrap;gap:6px}
#ph.xpf .pf-chips .chip{min-height:44px}

/* buttons */
#ph.xpf .btn.danger{background:var(--danger);color:#fff}
#ph.xpf .btn.quiet{background:transparent;color:var(--ink-2);box-shadow:none;min-height:44px}
#ph.xpf .btn.quiet.dz{color:var(--danger)}
#ph.xpf .btn[aria-disabled="true"],#ph.xpf .btn:disabled{opacity:.45;cursor:default}
#ph.xpf .btn.sm{flex:none;min-height:44px;font-size:15px;padding:0 14px}
#ph.xpf .dock.col{flex-direction:column;align-items:stretch}
#ph.xpf .dock.col>.btn{flex:none;width:100%}
#ph.xpf .psheet .dock{margin-top:4px}
/* a two-button dock is taller than the shell expects: lift the toast above it */
#ph.xpf:not(.has-tabs):has(>.body>.dock.col) .ptoast{bottom:calc(148px + env(safe-area-inset-bottom,0px))}
#ph.xpf .lnk{border:0;background:none;color:var(--ink);font:600 15px/1.2 var(--font);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 2px;cursor:pointer;text-align:left;align-self:flex-start}
#ph.xpf .lnk.m2{color:var(--ink-2)}

/* meter */
#ph.xpf .meter{display:block;height:8px;border-radius:999px;background:var(--track);overflow:hidden}
#ph.xpf .meter i{display:block;height:100%;border-radius:999px;background:var(--fill)}

/* radio option cards (tariff ladder, specialist picker, quiz) */
#ph.xpf .opts{display:grid;gap:8px}
#ph.xpf .opt{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 14px;border:0;border-radius:var(--r-plate);background:var(--surface-1);box-shadow:var(--sh-1);text-align:left;cursor:pointer;color:var(--ink);font:inherit;box-sizing:border-box}
#ph.xpf .opt .rd{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3);flex:none}
#ph.xpf .opt[aria-checked="true"]{box-shadow:0 0 0 2px var(--accent),var(--sh-1)}
#ph.xpf .opt[aria-checked="true"] .rd{box-shadow:inset 0 0 0 7px var(--accent)}
#ph.xpf .opt .tx{flex:1;min-width:0}
#ph.xpf .opt .tx b{display:block;font-size:16px;font-weight:600}
#ph.xpf .opt .tx>span{display:block;font-size:14px;color:var(--ink-2);margin-top:1px}
#ph.xpf .opt .tx .pill{margin-top:3px}
#ph.xpf .opt .pr{text-align:right;flex:none}
#ph.xpf .opt .pr b{display:block;font:700 18px/1.1 var(--font-d);white-space:nowrap}
#ph.xpf .opt .pr span{font-size:13px;color:var(--ink-3)}
#ph.xpf .opt:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#ph.xpf .psheet .opt{box-shadow:none;background:var(--surface-2)}
#ph.xpf .psheet .opt[aria-checked="true"]{box-shadow:0 0 0 2px var(--accent)}

/* quiz */
#ph.xpf .qa{display:grid;gap:6px;margin-top:10px}
#ph.xpf .qa .opt{box-shadow:none;background:var(--surface-2);min-height:48px;padding:10px 12px}
#ph.xpf .qa .opt[aria-checked="true"]{box-shadow:0 0 0 2px var(--accent)}
#ph.xpf .qa .opt.wrong[aria-checked="true"]{box-shadow:0 0 0 2px var(--out-ink)}
#ph.xpf .qa .opt.wrong[aria-checked="true"] .rd{box-shadow:inset 0 0 0 7px var(--out-ink)}
#ph.xpf .qa .opt .tx b{font-weight:500;font-size:16px}
#ph.xpf .qfb{font-size:15px;margin-top:8px;display:flex;gap:6px;align-items:flex-start;border:0;background:none;padding:0;font-family:inherit;text-align:left}
#ph.xpf .qfb svg{width:16px;height:16px;flex:none;margin-top:2px}
#ph.xpf .qfb.ok{color:var(--ok)}
#ph.xpf button.qfb.no{color:var(--out-ink);min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-items:center}
#ph.xpf .plate.qwrong{box-shadow:0 0 0 2px var(--attn-line),var(--sh-1)}
#ph.xpf .plate h4.q{display:block;line-height:1.3}

/* bullet list */
#ph.xpf .bl{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:16px}
#ph.xpf .bl li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
#ph.xpf .bl li svg{width:20px;height:20px;color:var(--ink-3);margin-top:2px}
#ph.xpf .bl li.ok svg{color:var(--ok)}

/* reminders */
#ph.xpf .rm{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 14px;min-height:64px}
#ph.xpf .rm+.rm{border-top:1px solid var(--line)}
#ph.xpf .rm .tx{all:unset;box-sizing:border-box;flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;cursor:pointer}
#ph.xpf .rm .tx:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
#ph.xpf .rm .tx b{display:block;font-size:16px;font-weight:500;line-height:1.3}
#ph.xpf .rm .tx span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
#ph.xpf .rm .ck{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink-3)}
#ph.xpf .rm .ck>span{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;display:grid;place-items:center}
#ph.xpf .rm .ck svg{width:16px;height:16px;opacity:0}
#ph.xpf .rm.done .ck{color:var(--ok)}
#ph.xpf .rm.done .ck>span{background:var(--ok-soft)}
#ph.xpf .rm.done .ck svg{opacity:1}
#ph.xpf .rm.done .tx b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
#ph.xpf .rm .av.nb{background:var(--surface-2);color:var(--ink-2)}

/* course progress */
#ph.xpf .csegs{display:flex;gap:4px;flex:none}
#ph.xpf .csegs i{flex:1;height:4px;border-radius:3px;background:var(--track)}
#ph.xpf .csegs i.on{background:var(--ink)}
#ph.xpf .pf-demo{background:var(--surface-2);border-radius:14px;padding:4px 12px}

/* case shots with the client's face mask */
#ph.xpf .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#ph.xpf .shot{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-img)}
#ph.xpf .shot svg{width:100%;height:100%;display:block}
#ph.xpf .shot .cap2{position:absolute;left:6px;bottom:6px;font:600 12px/1.2 var(--font);background:var(--surface-1);color:var(--ink);border-radius:7px;padding:3px 6px}
#ph.xpf .fig{font-size:15px;display:grid;gap:4px}
#ph.xpf .fig div{display:flex;justify-content:space-between;gap:10px}
#ph.xpf .fig span:last-child{font-weight:600}

/* confirm / success */
#ph.xpf .who{display:flex;align-items:center;gap:12px}
#ph.xpf .t20{font-size:20px!important;line-height:1.2}
#ph.xpf .okm{width:64px;height:64px;border-radius:22px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;margin:0 auto 12px}
#ph.xpf .okm svg{width:30px;height:30px}
#ph.xpf .pf-done{text-align:center;padding:22px 16px}
#ph.xpf .pf-done h4{justify-content:center;font-size:20px;margin-bottom:6px}
#ph.xpf .pf-soft{background:var(--surface-2);border-radius:14px;min-height:52px}

/* stat tiles */
#ph.xpf .gt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#ph.xpf .plate.gtile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:108px;padding:12px 14px;border:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit;width:100%;box-sizing:border-box}
#ph.xpf .gtile .ic{width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;margin-bottom:6px}
#ph.xpf .gtile .ic svg{width:18px;height:18px}
#ph.xpf .gtile b{font:700 20px/1.15 var(--font-d);letter-spacing:-.01em}
#ph.xpf .gtile>span:not(.ic){font-size:14px;color:var(--ink-2);line-height:1.25}
#ph.xpf .gtile .meter{width:100%;margin-top:6px;height:6px}
#ph.xpf .gtile.attn .ic{background:var(--attn);color:var(--attn-ink)}
#ph.xpf .gtile.ok .ic{background:var(--ok-soft);color:var(--ok)}
#ph.xpf .gtile:focus-visible,#ph.xpf .card-l:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#ph.xpf .plate.card-l{display:block;width:100%;border:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit;box-sizing:border-box}
#ph.xpf .card-l .big{font:700 26px/1 var(--font-d)}
#ph.xpf .wsum span{display:block;line-height:1.3;margin-top:3px;font-size:13px}

/* tabs as a full-width segmented control */
#ph.xpf .seg.full{display:flex;flex:none}
#ph.xpf .seg.full button{flex:1;font-size:15px;min-height:44px}
#ph.xpf .seg.full button b{font-weight:600;color:var(--ink-3);margin-left:4px}
#ph.xpf .seg button{min-height:44px}

/* banner with one action */
#ph.xpf .note.bnr{display:flex;align-items:center;gap:12px}
#ph.xpf .note.bnr>div{flex:1;min-width:0}
#ph.xpf .note.bnr .btn{flex:none;min-height:44px}
#ph.xpf .note.calm{background:var(--surface-2);color:var(--ink)}

/* member load rows */
#ph.xpf .row.wrap{flex-wrap:wrap}
#ph.xpf .row.wrap>.btn{flex:1 1 auto;min-height:44px}

/* current palette: two colour dots on the «Палитра» row */
#ph.xpf .pf-dots{display:flex;gap:4px;flex:none}
#ph.xpf .pf-dots i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}

/* step rows inside a sheet */
#ph.xpf .pf-srow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;min-height:48px}
#ph.xpf .pf-srow+.pf-srow{border-top:1px solid var(--line)}
#ph.xpf .stp{display:flex;align-items:center;gap:6px}
#ph.xpf .stp button{width:44px;height:44px;border-radius:12px;border:0;background:var(--surface-2);color:var(--ink);font:700 20px/1 var(--font);cursor:pointer}
#ph.xpf .stp b{min-width:36px;text-align:center;font:700 20px/1 var(--font-d)}
#ph.xpf .pf-q{display:grid;gap:6px}
#ph.xpf .pf-q .seg{width:100%;display:flex}
#ph.xpf .pf-q .seg button{flex:1}
#ph.xpf .pf-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#ph.xpf .pf-head h4{flex:1}

/* signed-out screen */
#ph.xpf .pf-brand{font:800 34px/1 var(--font-d);letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){#ph.xpf .tog::after{transition:none}}