/* Section «Клиент»: the client card (4 tabs) and its nested screens.
   Ported from client.html local styles; scoped to this section's screens (client, client.*) so other
   sections keep their own look. Every colour is a kit token. */
#ph:is([data-screen="client"],[data-screen^="client."]){
  i[data-i]{font-style:normal;display:inline-flex}

  /* identity row + the one main value on the board */
  .hd.hx{flex-wrap:wrap;row-gap:2px}
  .who{flex-basis:100%;display:flex;align-items:center;gap:12px;min-width:0;padding-top:4px}
  .who .tx{flex:1;min-width:0}
  .who h3{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who .sub{margin-top:2px;text-wrap:pretty}
  .av.lg{width:56px;height:56px;border-radius:18px;font-size:18px}
  .hero{flex-basis:100%;padding:8px 2px 2px}
  .hero .k{font-size:14px;color:var(--ink-2)}
  .hero .big{font:700 34px/1.05 var(--font-d);letter-spacing:-.02em;margin-top:4px}
  .hero .big small{font-size:20px;font-weight:600;color:var(--ink-2);letter-spacing:0}
  .hero .s2{font-size:15px;color:var(--ink-2);margin-top:4px}

  /* four tabs, content-sized, spare width shared */
  .tabs[role=tablist]{display:flex;gap:4px;flex:none;margin:0;padding:0;overflow:visible}
  .tabs .chip{flex:1 1 auto;min-width:0;min-height:44px;padding:0 8px;font-size:14px;font-weight:600;letter-spacing:-.01em;justify-content:center;gap:4px}
  .tabs .chip .cnt{min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:var(--surface-1);font:700 11.5px/20px var(--font);text-align:center;padding:0 5px}
  .tabs .chip.dis{opacity:.45}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* a fact with its action on it */
  .arow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .arow:first-of-type,h4+.arow{border-top:0;padding-top:2px}
  .arow .tx{flex:1;min-width:0}
  .arow .tx b{display:block;font-size:16px;font-weight:600;text-wrap:balance}
  .arow .tx span{display:block;font-size:14px;color:var(--ink-2);text-wrap:pretty}
  .arow .mini{width:40px;height:52px;border-radius:10px;overflow:hidden;flex:none;box-shadow:var(--sh-img)}
  .arow .mini svg{display:block;width:100%;height:100%}
  .arow .ic{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--ink-2)}
  .arow .ic svg{width:20px;height:20px}
  .arow .ic.mp{background:var(--mp-soft);color:var(--mp)}
  .btn.sm{flex:none;min-height:44px;padding:0 12px;font-size:14px}
  .lnk{all:unset;box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;gap:4px;padding:0 4px;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;flex:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-3)}
  .lnk:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
  .lnk[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

  /* key-value row with an edit action */
  .kv{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
  .kv:first-of-type,h4+.kv{border-top:0}
  .kv .tx{flex:1;min-width:0}
  .kv .tx small{display:block;font-size:13px;color:var(--ink-3);font-weight:600}
  .kv .tx b{display:block;font-size:16px;font-weight:600;text-wrap:pretty}

  /* week grid: training and food per day */
  .wk2{display:grid;grid-template-columns:44px repeat(7,1fr);gap:5px;align-items:center;font-size:12.5px}
  .wk2 .h{color:var(--ink-3);font-weight:600;text-align:center;text-transform:uppercase}
  .wk2 .l{color:var(--ink-2);font-weight:600}
  .wk2 i{display:grid;place-items:center;height:26px;border-radius:8px;background:var(--grid-off)}
  .wk2 i svg{width:14px;height:14px}
  .wk2 i.on{background:var(--ok-soft);color:var(--ok)}.wk2 i.pt{background:var(--danger-soft);color:var(--danger)}
  .wk2 i.rest{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
  .wk2 i.none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3);opacity:.5}
  .lgd{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:8px}
  .lgd span{display:inline-flex;align-items:center;gap:5px}
  .lgd i{width:16px;height:16px;border-radius:5px;display:inline-grid;place-items:center;background:var(--grid-off)}
  .lgd i svg{width:10px;height:10px}
  .lgd i.on{background:var(--ok-soft);color:var(--ok)}.lgd i.pt{background:var(--danger-soft);color:var(--danger)}
  .lgd i.rest{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}.lgd i.none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3);opacity:.5}

  .pdays{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
  .pdays>*{background:var(--surface-2);border-radius:12px;padding:8px 10px;font-size:13px;color:var(--ink-2)}
  .pdays b{display:block;font-size:15px;color:var(--ink)}
  .meter{height:6px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:8px}
  .meter i{display:block;height:100%;border-radius:999px;background:var(--fill)}

  /* meal slots: an unmarked meal is an empty cell */
  .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
  .slots>div{border-radius:12px;padding:8px;background:var(--surface-2);font-size:12.5px;color:var(--ink-2);min-height:58px;line-height:1.3;min-width:0}
  .slots b{display:block;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
  .slots>div.miss{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)}

  .m2x2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m2x2>div{background:var(--surface-2);border-radius:12px;padding:8px 10px}
  .m2x2 small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
  .m2x2 b{font:700 17px/1.3 var(--font-d);font-variant-numeric:tabular-nums}

  /* form photo thumbnails */
  .fstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:4px 14px}
  .fstrip::-webkit-scrollbar{display:none}
  .fthumb{flex:none;width:74px;border:0;padding:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
  .fthumb .im{aspect-ratio:3/4;border-radius:12px;overflow:hidden;position:relative;background:var(--surface-2);box-shadow:var(--sh-img);display:block}
  .fthumb .im svg{display:block;width:100%;height:100%}
  .fthumb .t{display:block;font-size:12.5px;color:var(--ink-2);margin-top:5px;white-space:nowrap;line-height:1.2}
  .fthumb .t b{display:block;font-size:13px;color:var(--ink);font-weight:600}
  .fthumb.on .im{box-shadow:0 0 0 3px var(--accent)}
  .fthumb.up .im{background:transparent;border:1.5px dashed var(--ink-3);box-shadow:none;display:grid;place-items:center;color:var(--ink-2)}
  .fthumb.up .im svg{width:24px;height:24px}
  .fthumb .new{position:absolute;top:6px;left:6px;width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface-1)}
  .fthumb .nb{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 13px/26px var(--font);text-align:center;font-style:normal}
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .fgrid .fthumb{width:auto}

  /* single choice rows and radio cards */
  .rlist{display:flex;flex-direction:column}
  .rlist .ro{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 2px;border-top:1px solid var(--line);cursor:pointer}
  .rlist .ro:first-child{border-top:0}
  .rlist .ro:focus-visible,.rcards .ro:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
  .rd{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-3);flex:none;display:grid;place-items:center}
  .ro[aria-checked="true"] .rd{box-shadow:inset 0 0 0 2px var(--accent)}
  .ro[aria-checked="true"] .rd::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent)}
  .ro .tx{flex:1;min-width:0}
  .ro .tx b{display:block;font-size:16px;font-weight:600}
  .ro .tx span{display:block;font-size:14px;color:var(--ink-2);text-wrap:pretty}
  .rcards{display:flex;flex-direction:column;gap:8px}
  .rcards .ro{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;border-radius:16px;background:var(--surface-2);cursor:pointer}
  .rcards .ro[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface-1)}

  /* number field: − input + with suffix, label above */
  label:has(.numf){display:block;min-width:0}
  .numf{display:flex;align-items:center;background:var(--surface-2);border-radius:14px;min-height:52px;padding:4px;min-width:0}
  .numf .ibtn{width:40px;background:transparent;box-shadow:none;font:600 22px/1 var(--font);color:var(--ink)}
  .numf input{flex:1;width:0;min-width:0;border:0;background:transparent;text-align:center;font:700 20px/1 var(--font-d);color:var(--ink);font-variant-numeric:tabular-nums;padding:0}
  .numf input:focus-visible{outline:2px solid var(--focus);border-radius:8px}
  .numf .suf{font-size:14px;color:var(--ink-2);margin-right:2px}
  .numf.k input{font-size:30px}
  .flabel{display:block;font:600 13px/1.2 var(--font);color:var(--ink-2);margin:0 0 6px}
  .hint{font-size:13.5px;color:var(--ink-2);margin-top:6px;text-wrap:pretty}
  .hint.err{color:var(--danger)}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .two>*{min-width:0}
  .mbar3{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;margin:12px 0 6px}
  .mbar3 i{display:block;height:100%}

  /* collapsible */
  .coll{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;cursor:pointer}
  .coll .tx{flex:1;min-width:0}
  .coll .tx b{display:block;font-size:16px;font-weight:600}
  .coll .tx span{display:block;font-size:14px;color:var(--ink-2);text-wrap:pretty}
  .coll .chv svg{width:18px;height:18px;color:var(--ink-3);transition:transform var(--t) var(--ease)}
  .coll[aria-expanded="true"] .chv svg{transform:rotate(180deg)}
  .coll:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
  .vrow{display:flex;align-items:center;gap:10px;min-height:44px;border-top:1px solid var(--line);font-size:16px}
  .vrow>span{flex:1}
  .vrow b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  .vrow b small{font-weight:500;color:var(--ink-3);font-size:13px}
  .vrow .ibtn{width:44px;height:44px;background:var(--surface-2);box-shadow:none;font:600 20px/1 var(--font);color:var(--ink)}

  /* the «⋯» menu popover */
  .cl-scrim{position:absolute;inset:0;background:var(--scrim);z-index:29;opacity:.55}
  .pmenu{position:absolute;right:12px;top:92px;z-index:30;width:272px;padding:6px!important;border-radius:18px!important;box-shadow:var(--sh-2)!important;animation:cl-pop .16s var(--ease) both}
  .pmenu button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border-radius:12px;cursor:pointer}
  .pmenu button:focus-visible,.pmenu button:hover{background:var(--surface-2)}
  .pmenu button svg{width:20px;height:20px;color:var(--ink-2);flex:none}
  .pmenu .tx b{display:block;font-size:16px;font-weight:600}
  .pmenu .tx span{display:block;font-size:13px;color:var(--ink-2);text-wrap:pretty}
  .pmenu hr{border:0;border-top:1px solid var(--line);margin:4px 8px}
  .pmenu .dg,.pmenu .dg svg{color:var(--danger)}
  .pmenu .proto .tx b{font-size:14px;color:var(--ink-2)}

  /* workouts feed */
  .wmeta{font-size:14px;color:var(--ink-2);margin-top:-6px;text-wrap:pretty}
  .exi{padding:10px 0 2px;border-top:1px solid var(--line)}
  .exi b{font-size:15px;font-weight:600}
  .sets{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .sets span{font-size:14px;background:var(--surface-2);border-radius:8px;padding:5px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .sets span.wu{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3)}
  .wrow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;cursor:pointer}
  .wrow .tx{flex:1;min-width:0}
  .wrow .tx b{display:block;font-size:16px;font-weight:600}
  .wrow .tx>span{display:block;font-size:14px;color:var(--ink-2)}
  .wrow .tx .pill{display:inline-flex;width:auto;margin-top:4px}
  .wrow .chv svg{width:18px;height:18px;color:var(--ink-3);transition:transform var(--t) var(--ease)}
  .wrow[aria-expanded="true"] .chv svg{transform:rotate(180deg)}
  .wrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
  .dlt{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
  .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:16px}
  .mrow:first-of-type,h4+.mrow{border-top:0}
  .mrow b{font-weight:600;font-variant-numeric:tabular-nums}

  /* rule rows */
  .rrow{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 0;border-top:1px solid var(--line)}
  .rrow:first-of-type,h4+.rrow{border-top:0}
  .rrow .tx{flex:1;min-width:0}
  .rrow .tx b{display:block;font-size:16px;font-weight:600}
  .rrow .tx b .pill{margin-left:6px;vertical-align:middle;font-size:11px}
  .rrow .tx>span{display:block;font-size:14px;color:var(--ink-2);text-wrap:pretty}
  .rrow .ibtn{width:44px;height:44px;background:transparent;box-shadow:none;color:var(--ink-3)}
  button.rrow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
  button.rrow:first-child{border-top:0}
  button.rrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:10px}
  .achips{display:flex;gap:6px;flex-wrap:wrap}
  .achips .chip{min-height:44px;padding:0 6px 0 12px}
  .achips .chip svg{width:16px;height:16px;color:var(--ink-3)}

  .skel{display:block;background:var(--surface-3);border-radius:8px;height:14px;animation:cl-pulse 1.2s var(--ease) infinite alternate}
  .dim{opacity:.55}
  .btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}

  /* empty state */
  .emp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 14px}
  .emp .ico{width:56px;height:56px;border-radius:18px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2)}
  .emp .ico svg{width:26px;height:26px}
  .emp h4{font-size:18px;margin:4px 0 0;display:block}
  .emp p{margin:0;font-size:15px;color:var(--ink-2);text-wrap:pretty}
  .emp .btn{flex:none;margin-top:8px;width:100%}

  /* case requests */
  .req{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
  .req:first-of-type{border-top:0}
  .req b{font-size:16px;font-weight:600}
  .req>span{font-size:14px;color:var(--ink-2)}
  .req .pill{justify-self:start;margin-top:4px}
  button.req{all:unset;box-sizing:border-box;display:grid;gap:2px;width:100%;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
  button.req:first-child{border-top:0}

  .chips{display:flex;gap:6px;flex-wrap:wrap}
  .chips .chip{min-height:44px}
  .seg.fit button{flex:1 1 auto!important;padding:0 10px;white-space:nowrap}
  .seg button{min-height:40px}
  .seg.full{display:flex}
  .seg.full button{flex:1}
  .tog{flex:none}
  .tog::before{content:"";position:absolute;inset:-8px -4px}
  .diff>span{text-wrap:pretty}
  .diff small{font-size:13px}
  .quote{text-wrap:pretty}
  textarea{width:100%;min-height:84px;border:0;border-radius:14px;background:var(--surface-2);padding:12px;font:16px/1.4 var(--font);color:var(--ink);resize:none;box-sizing:border-box}
  textarea::placeholder{color:var(--ink-3)}
  .tfield{width:100%;min-height:48px;border:0;border-radius:14px;background:var(--surface-2);padding:0 14px;font:16px var(--font);color:var(--ink);box-sizing:border-box}
  .row2{display:flex;gap:10px}
  .row2>.btn.sec{flex:0 0 auto}

  /* log a workout: one set per row, numbers from the digit keyboard */
  .setr{display:grid;grid-template-columns:22px 1fr 14px 1fr 44px;align-items:center;gap:6px;padding:4px 0}
  .setr .sn{font:600 14px var(--font);color:var(--ink-3);text-align:center}
  .setr .x{font-size:14px;color:var(--ink-3);text-align:center}
  .setr .fld{display:flex;align-items:center;background:var(--surface-2);border-radius:12px;min-height:44px;padding:0 10px;gap:4px;min-width:0}
  .setr .fld input{flex:1;width:0;min-width:0;border:0;background:transparent;font:700 18px var(--font-d);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;padding:0}
  .setr .fld input:focus-visible{outline:2px solid var(--focus);border-radius:6px}
  .setr .fld span{font-size:13px;color:var(--ink-2)}
  .setr .ibtn{width:44px;height:44px;background:transparent;box-shadow:none;color:var(--ink-3)}
  .sethd{display:grid;grid-template-columns:22px 1fr 14px 1fr 44px;gap:6px;font:600 12px var(--font);color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
  .sethd span:nth-child(2),.sethd span:nth-child(4){text-align:right;padding-right:10px}

  /* weight chart */
  .wchart{display:block;width:100%;height:110px}

  /* photo review */
  .cmp{max-height:430px;margin-inline:auto;width:100%}
  .cmp .hdl{touch-action:none}
  .cmp.side svg g{transform:scaleX(.72);transform-origin:60px 80px}
  .cmp.back svg ellipse{opacity:.85}
  .vcm2{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
  .vcm2:first-child{border-top:0;padding-top:0}
  .vcm2 small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
  .vcm2 p{margin:2px 0 0;font-size:15px;text-wrap:pretty}
  .vcm2 .me{width:36px;height:36px;border-radius:12px;background:var(--surface-3);display:grid;place-items:center;font:700 13px var(--font)}
  .inp input{min-width:0}
  .inp .ibtn.send{background:var(--accent);color:var(--on-accent)}

  /* invite code */
  .qr{width:168px;height:168px;margin:4px auto;display:grid;grid-template-columns:repeat(21,1fr);background:#FFFFFF;padding:10px;border-radius:14px;box-shadow:var(--sh-1)}
  .qr i{background:#111111}.qr i.o{background:transparent}
  .code{font:700 26px/1.1 var(--font-d);letter-spacing:.12em;text-align:center}

  /* offline banner */
  .offb .ic{color:var(--ink-2)}
  .mlist2{display:flex;flex-direction:column}
}
@keyframes cl-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes cl-pulse{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  #ph:is([data-screen="client"],[data-screen^="client."]) :is(.pmenu,.skel){animation:none}
}
/* phone: the board starts under the safe area, the menu follows it */
@media (max-width:520px){
  #ph:is([data-screen="client"],[data-screen^="client."]) .pmenu{top:calc(58px + env(safe-area-inset-top,0px))}
}
/* core app.css: on phones «#ph:not(.has-tabs) .ptoast{bottom}» outranks the «toast goes top while a sheet is open» rule,
   so the toast gets top+bottom and stretches over the screen. Keep it a toast on this section's screens. */
#ph:is([data-screen="client"],[data-screen^="client."]):has(>.psheet.open) .ptoast{bottom:auto!important}
#ph:is([data-screen="client"],[data-screen^="client."]) .kv.wrapr{flex-wrap:wrap}
#ph:is([data-screen="client"],[data-screen^="client."]) .kv.wrapr .tx{flex-basis:100%}
#ph:is([data-screen="client"],[data-screen^="client."]) .kva{display:flex;gap:12px;margin:-4px 0 0 -4px}