/* Ready Time business app, design handoff v1 (tokens 2.1). Loaded after shared/nikba.css and maps its variables to the new tokens. */
:root{
  --brand:#5B2A6E;
  --bg:#F7F6F7; --surface:#FFFFFF; --ink:#141216; --ink-2:#5E5A62; --ink-3:#6C6770; --ink-3-soft:#8E8992; --line:#E7E4E8;
  --primary:var(--brand); --on-primary:#FFFFFF;
  --tint:color-mix(in srgb,var(--primary) 9%,var(--surface));
  --tint-2:color-mix(in srgb,var(--primary) 16%,var(--surface));
  --tint-ink:color-mix(in srgb,var(--primary) 78%,#000);
  --now:#D93A3A; --on-now:#FFFFFF; --bad-ink:#A8352E;
  --warn-bg:#FFF4DB; --warn-ink:#7A5200; --warn-line:#E9C66F;
  --ok-bg:#E6F4EC; --ok-ink:#1E6B45; --off-bg:#EFECEF; --off-ink:#4A464D;
  --scrim:rgba(20,18,22,.38);
  --font-ui:'Assistant','Segoe UI',Arial,sans-serif;
  --font-display:'Bellefair','Frank Ruhl Libre','Times New Roman',serif;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --dur-fast:140ms; --dur:240ms; --dur-slow:420ms; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-sheet:0 -8px 30px rgba(20,18,22,.14);
  --shadow-fab:0 6px 18px color-mix(in srgb,var(--primary) 35%,transparent);
  /* legacy (nikba) names → new tokens */
  --surface-2:var(--bg); --line-strong:color-mix(in srgb,var(--ink-3-soft) 45%,var(--line));
  --primary-ink:var(--on-primary); --primary-soft:var(--tint); --primary-2:var(--tint-ink);
  --ok:#2E8B57; --ok-soft:var(--ok-bg); --warn:#B88A00; --warn-soft:var(--warn-bg); --bad:var(--now); --bad-soft:color-mix(in srgb,var(--now) 12%,var(--surface));
  --pending:var(--warn-bg); --approved:var(--ok-bg); --cancelled:color-mix(in srgb,var(--now) 14%,var(--surface)); --done:var(--tint-2);
  --radius:var(--r-lg); --radius-s:var(--r-md); --pill:var(--r-pill);
  --shadow:0 1px 2px rgba(20,18,22,.05),0 8px 24px -14px rgba(20,18,22,.18);
  --font:var(--font-ui); --display:var(--font-ui);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121014; --surface:#1C191E; --ink:#F2EFF3; --ink-2:#B8B2BB; --ink-3:#9A949E; --ink-3-soft:#847E88; --line:#2E2A31;
  --primary:color-mix(in srgb,var(--brand) 50%,#fff); --on-primary:#141216;
  --tint:color-mix(in srgb,var(--primary) 14%,var(--surface)); --tint-2:color-mix(in srgb,var(--primary) 22%,var(--surface));
  --tint-ink:color-mix(in srgb,var(--primary) 70%,#fff);
  --now:#FF6B6B; --on-now:#3A0D0D; --bad-ink:#F07C72; --warn-bg:#3A2E10; --warn-ink:#F2CF7A; --warn-line:#7A6020; --ok-bg:#16301F; --ok-ink:#8FD6AE; --ok:#6FD39B; --off-bg:#2A262D; --off-ink:#C9C3CC;
  --scrim:rgba(0,0,0,.55); --shadow-sheet:0 -8px 30px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121014; --surface:#1C191E; --ink:#F2EFF3; --ink-2:#B8B2BB; --ink-3:#9A949E; --ink-3-soft:#847E88; --line:#2E2A31;
  --primary:color-mix(in srgb,var(--brand) 50%,#fff); --on-primary:#141216;
  --tint:color-mix(in srgb,var(--primary) 14%,var(--surface)); --tint-2:color-mix(in srgb,var(--primary) 22%,var(--surface));
  --tint-ink:color-mix(in srgb,var(--primary) 70%,#fff);
  --now:#FF6B6B; --on-now:#3A0D0D; --bad-ink:#F07C72; --warn-bg:#3A2E10; --warn-ink:#F2CF7A; --warn-line:#7A6020; --ok-bg:#16301F; --ok-ink:#8FD6AE; --ok:#6FD39B; --off-bg:#2A262D; --off-ink:#C9C3CC;
  --scrim:rgba(0,0,0,.55); --shadow-sheet:0 -8px 30px rgba(0,0,0,.5); --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark}

[hidden]{display:none!important}
body{font-family:var(--font-ui);font-size:15px;line-height:1.45;background:var(--bg)}
h1{font-family:var(--font-ui);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.01em}
h2{font-size:20px;font-weight:700}
.tab{font-variant-numeric:tabular-nums}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.wordmark{font-family:var(--font-display);font-weight:400}
.wordmark i{background:var(--primary)}
.empty .big{font-family:var(--font-ui);font-weight:700;font-size:16px}

/* layout: phone column, centred on desktop (week view widens) */
.shell{display:block;min-height:100dvh}
.appmain{max-width:480px;margin:0 auto;min-height:100dvh}
.appmain.wide{max-width:1100px}
.content{max-width:none;padding:18px 16px calc(110px + env(safe-area-inset-bottom))}
.topbar{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.topbar .title{font-weight:700}
.tabbar,.tabbar.tabbar{position:fixed;inset-inline:0;bottom:0;top:auto;height:auto;width:auto;flex-direction:row;display:grid;grid-template-columns:repeat(4,1fr);max-width:480px;margin:0 auto;padding:6px 6px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);border-left:0;z-index:30}
.tabbar .brand{display:none!important}
.tabbar button,.tabbar.tabbar button{flex-direction:column;justify-content:center;gap:2px;font-size:11.5px;width:auto;min-width:0;padding:6px 0;color:var(--ink-3)}
.tabbar button svg{width:22px;height:22px}
.tabbar button[aria-current="page"]{color:var(--primary);font-weight:600}
.tabbar button .badge,.tabbar.tabbar button .badge{position:absolute;top:2px;inset-inline-start:calc(50% + 6px);right:auto;margin:0;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--now);color:var(--on-now);font-size:11px;font-weight:700}
@media (min-width:520px){.tabbar{border-inline:1px solid var(--line);border-radius:18px 18px 0 0}}
.fab{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));inset-inline-end:max(18px,calc(50vw - 240px + 18px));width:56px;height:56px;border-radius:18px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:var(--shadow-fab);z-index:31;transition:transform var(--dur-fast)}
.fab:active{transform:scale(.94)}
.fab svg{width:26px;height:26px}

/* buttons, fields, chips */
.btn{border-radius:var(--r-md);font-weight:600;min-height:42px;transition:transform var(--dur-fast),background var(--dur-fast)}
.btn:active{transform:scale(.97)}
.btn.primary,.btn.pri{background:var(--primary);color:var(--on-primary)}
@media (hover:hover) and (pointer:fine){.btn.primary:hover,.btn.pri:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}}
.btn.sec{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ok{background:var(--primary);color:var(--on-primary)}
.btn.danger{background:var(--bad-soft);color:var(--now)}
.icon-btn{background:var(--tint);color:var(--tint-ink)}
.input,select.input,textarea.input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);font-size:16px}
.input:focus{border-color:var(--primary);box-shadow:none}
.field label{font-size:13px;color:var(--ink-2)}
.err{color:var(--now);font-size:13px;margin-top:5px}
.toggle{width:44px;height:26px;border-radius:13px}
/* the switch stays 26px to the eye, but a thumb gets the full 44px (::after is the knob) */
.toggle::before{content:"";position:absolute;top:50%;left:50%;width:100%;height:44px;transform:translate(-50%,-50%)}
.toggle::after{width:20px;height:20px}
.toggle[aria-checked="true"]{background:var(--primary)}
.toggle[aria-checked="true"]::after{transform:translateX(-18px)}
.seg{background:var(--line);padding:3px;gap:0}
.seg button{min-height:36px;min-width:44px;padding:0 14px;font-size:13px;font-weight:400}
.seg button[aria-pressed="true"]{background:var(--surface);font-weight:600;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:14px;background:var(--bg)}
.chips button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.card{border-radius:var(--r-lg)}
.avatar,.av{width:38px;height:38px;border-radius:50%;background:var(--tint-2);color:var(--tint-ink);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.notice{background:var(--tint);color:var(--tint-ink);border-radius:var(--r-md)}
.notice.warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice.ok{background:var(--ok-bg);color:var(--ok-ink)}
.kpi b{font-family:var(--font-ui);font-weight:700}
.slotgrid button{border-radius:var(--r-md);border-color:var(--line)}

/* sheet + toast */
.sheet-bg{background:var(--scrim)}
.sheet{border-radius:22px 22px 0 0;box-shadow:var(--shadow-sheet);max-height:88dvh;max-width:480px;animation:sup var(--dur) var(--ease) both}
@keyframes sup{from{transform:translateY(40%);opacity:.6}}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.sheet h2{font-size:20px;font-weight:700}
@media (min-width:900px){.sheet-bg{align-items:flex-end}.sheet{border-radius:22px 22px 0 0}.sheet .grab{display:block}}
.toast,.toast.ok,.toast.bad{left:50%;right:auto;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));width:calc(min(100vw,480px) - 32px);border-radius:var(--r-md);padding:11px 14px;background:var(--ink);color:var(--bg);text-align:start}
.toast.bad{background:var(--now);color:var(--on-now)}

/* screen header */
.shead{margin-bottom:2px}
.eyebrow{font-size:13px;color:var(--ink-3);letter-spacing:.02em}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.hrow .acts{display:flex;gap:6px;align-items:center}
.summary{font-size:14px;color:var(--ink-2);margin-top:4px}
.summary b{color:var(--ink);font-weight:600}
/* .sec is a section heading; .btn.sec is a secondary button: the heading rules never reach the button */
.sec:where(:not(.btn)){font-size:12px;color:var(--ink-3);margin:6px 2px 4px;letter-spacing:.03em}
.plain{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--tint-ink);padding:6px 8px;border-radius:var(--r-pill)}
.plain svg{width:16px;height:16px}

/* week strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:16px 0 14px;align-items:stretch}
.strip button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 8px;border-radius:var(--r-md);color:var(--ink-2);transition:background var(--dur-fast)}
.strip button.nav{color:var(--ink-3);justify-content:center}
.strip button.nav svg{width:18px;height:18px}
.strip .d{font-size:12px}
.strip .n{font-size:18px;font-weight:600;color:var(--ink)}
.strip .dots{display:flex;gap:2px;height:4px;margin-top:3px}
.strip .dots i{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.strip button.off{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--line) 70%,transparent) 6px 7px)}
.strip button.off .n{color:var(--ink-3);font-weight:500}
.strip button.off .d{color:var(--ink-3)}
.strip button[aria-current="true"]{background:var(--primary);color:var(--on-primary)}
.strip button[aria-current="true"] .n{color:var(--on-primary)}
.strip button[aria-current="true"] .dots i{background:var(--on-primary);opacity:.7}
.strip button.today:not([aria-current="true"]) .n{color:var(--primary)}

/* now card */
.now{background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px}
.now .lab{font-size:12px;opacity:.82;display:flex;justify-content:space-between}
.now .who{font-size:22px;font-weight:700;margin-top:2px;line-height:1.15}
.now .svc{font-size:13px;opacity:.85}
.now .note{margin-top:8px;font-size:13px;background:color-mix(in srgb,var(--on-primary) 14%,transparent);border-radius:var(--r-sm);padding:6px 9px;white-space:pre-line}
.now .bar{height:4px;border-radius:2px;background:color-mix(in srgb,var(--on-primary) 22%,transparent);margin:12px 0 10px;overflow:hidden}
.now .bar i{display:block;height:100%;background:var(--on-primary);border-radius:2px;margin-inline-start:0;animation:fill 900ms var(--ease) both;transform-origin:right}
@keyframes fill{from{transform:scaleX(0)}}
.now .acts{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:6px 11px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--on-primary) 16%,transparent);color:var(--on-primary)}
.chipbtn svg{width:15px;height:15px}

/* day list */
.alist{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);text-align:start;width:100%}
.arow .t{font-weight:600;font-size:16px}
.arow .t small{display:block;font-weight:400;font-size:12px;color:var(--ink-3)}
.arow .nm{font-weight:600;font-size:15px}
.arow .sv{font-size:13px;color:var(--ink-2)}
.arow .pr{font-size:13px;color:var(--ink-3);text-align:end}
.arow .st{display:block;font-size:11.5px;color:var(--warn-ink)}
.arow.past{opacity:.45}
.arow.pend .nm::after{content:" · ממתין";font-weight:400;font-size:12px;color:var(--warn-ink)}
.arow.new{animation:flash 1.4s var(--ease)}
@keyframes flash{0%{background:var(--tint-2)}100%{background:transparent}}
.blockrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0;padding:9px 12px;border-radius:var(--r-md);background:repeating-linear-gradient(135deg,var(--bg) 0 8px,var(--line) 8px 10px);font-size:13px;color:var(--ink-2);width:100%;text-align:start}
.gapbox{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;padding:9px 12px;border:1.5px dashed color-mix(in srgb,var(--primary) 30%,var(--line));border-radius:var(--r-md);font-size:13px;color:var(--tint-ink)}
.gapbox button{font-size:13px;font-weight:600;color:var(--primary);white-space:nowrap}
.dayempty{padding:28px 8px;text-align:center;color:var(--ink-2)}
.dayempty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* week timeline */
.wk{--ax:36px;--px:72px;--hl:var(--line);--hh:color-mix(in srgb,var(--line) 45%,transparent);margin-top:14px;display:grid;grid-template-columns:var(--ax) repeat(var(--days,6),minmax(0,1fr));column-gap:3px}
.wk .hd{font-size:11px;color:var(--ink-3);text-align:center;padding-bottom:6px;cursor:pointer}
.wk .hd b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.wk .hd.today b{color:var(--primary)}
.wk .axis{position:relative}
.wk .axis span{position:absolute;inset-inline-start:0;font-size:10.5px;font-weight:600;color:var(--ink-2);transform:translateY(-50%);line-height:1}
/* an hour line, and a fainter half-hour line, every --px */
.wk .col{position:relative;background:repeating-linear-gradient(to bottom,var(--hl) 0 1px,transparent 1px calc(var(--px) / 2),var(--hh) calc(var(--px) / 2) calc(var(--px) / 2 + 1px),transparent calc(var(--px) / 2 + 1px) var(--px));border-radius:4px}
.wk .col.today{background-color:var(--tint)}
.wk .col.closed{background-color:color-mix(in srgb,var(--line) 45%,transparent)}
.blk{position:absolute;inset-inline:1px;border-radius:5px;background:color-mix(in srgb,var(--c,var(--brand)) 20%,var(--surface,#fff));border-inline-start:3px solid var(--c,var(--brand));color:var(--ink);font-size:10.5px;line-height:1.2;padding:3px 4px;overflow:hidden;text-align:start}
.blk.wreq{background:var(--warn-bg);color:var(--warn-ink);outline:1.5px dashed var(--warn-line);outline-offset:-1.5px}
.blk.off{background:repeating-linear-gradient(135deg,var(--bg) 0 6px,var(--line) 6px 8px);color:var(--ink-3)}
.wk .nowline{position:absolute;inset-inline:-3px;height:0;border-top:2px solid var(--now);z-index:2;background:none}
.wk .nowline::before{content:"";position:absolute;inset-inline-start:-3px;right:auto;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--now)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}

/* requests */
.req{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:10px;position:relative;overflow:hidden;transition:height var(--dur-slow) var(--ease),margin var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease),opacity var(--dur)}
.req .top{display:flex;gap:10px;align-items:center}
.req .top .who{flex:1;min-width:0}
.req .nm{font-weight:600}
.req .meta{font-size:12px;color:var(--ink-3)}
.pillx{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:var(--r-pill);background:var(--tint-2);color:var(--tint-ink);margin-inline-start:6px;vertical-align:1px;font-weight:400}
.req .slot{margin:12px 0 2px;font-size:20px;font-weight:700}
.req .slot s{color:var(--ink-3);font-weight:400;font-size:16px;margin-inline-end:6px}
.req.earlyreq .slot s{display:block;font-size:14px;margin:0 0 2px}
.req .sv{font-size:13px;color:var(--ink-2)}
.req .cnote{font-size:13px;color:var(--ink-2);margin-top:6px}
.flag{display:flex;gap:7px;align-items:flex-start;margin-top:10px;font-size:13px;background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r-sm);padding:7px 10px}
.flag svg{width:16px;height:16px;margin-top:1px}
.req .acts{display:flex;gap:8px;margin-top:12px}
/* four actions fit a 320–375px phone: they share the row (approve gets more), never run past the card */
.req .acts .btn{flex:1 1 0;min-width:0;padding:0 8px;white-space:nowrap;font-size:14px;height:48px;min-height:48px;margin:0}
.req .acts .btn.pri{flex:1.7 1 0}
.req .done{position:absolute;inset:0;background:var(--ok-bg);color:var(--ok-ink);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;opacity:0;pointer-events:none;transition:opacity var(--dur)}
.req.ok .done:not(.rej){opacity:1}
.req .done.rej{background:var(--off-bg);color:var(--off-ink);border-radius:inherit;transition:opacity 300ms ease}
.req.rej .done.rej{opacity:1}
.req .done.rej svg{stroke-dasharray:none;stroke-dashoffset:0;stroke-width:1.9;animation:none}
.req .done.rej svg .slash{stroke-dasharray:18;stroke-dashoffset:18;stroke-width:2.2}
.req.rej .done.rej svg .slash{animation:strike 340ms 140ms linear forwards}
@keyframes strike{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.req .done.rej svg .slash{stroke-dashoffset:0;animation:none}}
.req .done svg{width:26px;height:26px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30}
.req.ok .done svg{animation:draw 420ms 80ms var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* a row leaves the list by collapsing its grid track: nothing here animates a layout property */
.collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows 300ms var(--ease-out)}
.collapse>.collapse-h{overflow:hidden;min-height:0}
.collapse.gone{grid-template-rows:0fr}
.collapse.gone .req,.collapse.gone .okrow{transform:scale(.96);opacity:0;transition:transform 300ms var(--ease-out),opacity 200ms ease}
@media (prefers-reduced-motion:reduce){.collapse,.collapse.gone .req,.collapse.gone .okrow{transition:none}}
/* the same moment on any approval row (studio requests, …): app.js approveFlash */
.okrow{position:relative;overflow:hidden;transition:height var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease),margin var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}
.okrow>.okdone{position:absolute;inset:0;z-index:2;background:var(--ok-bg);color:var(--ok-ink);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;opacity:0;pointer-events:none;transition:opacity var(--dur);border-radius:inherit}
.okrow.ok>.okdone{opacity:1}
.okrow>.okdone svg{width:24px;height:24px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30}
.okrow.ok>.okdone svg{animation:draw 420ms 80ms var(--ease) forwards}
@media (prefers-reduced-motion:reduce){.okrow{transition:none}.okrow.ok>.okdone svg{animation:none;stroke-dashoffset:0}}

/* clients */
.sbox{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px;height:44px;margin:14px 0 6px;color:var(--ink-3)}
.sbox input{flex:1;border:0;background:none;font:inherit;color:var(--ink);outline:none;height:100%;min-width:0}
.sbox:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.sheet:focus{outline:none}
.sbox svg{width:20px;height:20px}
.wchip{font-size:11.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn-ink);white-space:nowrap}

/* my business */
.linkcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.linkcard .k{font-size:12px;color:var(--ink-3)}
.linkcard .u{font-weight:600;direction:ltr;text-align:right;word-break:break-all;margin:2px 0 10px;user-select:all}
.linkcard .row{display:flex;gap:6px;flex-wrap:wrap}
.qr{width:96px;height:96px;padding:6px;background:#fff;border-radius:var(--r-sm);display:grid;place-items:center}
.qr img{width:84px;height:84px;display:block}
.qr.pop{animation:pop 520ms var(--ease)}
@keyframes pop{40%{transform:scale(1.08) rotate(-2deg)}}
.smallbtn{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:7px 11px;border-radius:var(--r-pill);background:var(--tint);color:var(--tint-ink)}
.smallbtn svg{width:16px;height:16px}
.brandbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-top:10px}
.brandbox .k{font-size:14px;font-weight:600}
.brandbox .h{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.swr{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.swr button{aspect-ratio:1;border-radius:50%;background:var(--c);transition:transform var(--dur-fast)}
.swr button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.swr button:active{transform:scale(.9)}
.preview{margin-top:14px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#fff;color:#1A1A1A;direction:rtl}
.preview .cover{height:46px;background:color-mix(in srgb,var(--brand) 30%,#D9D2CB)}
.preview .in{padding:10px 12px 12px}
.preview .ttl{font-family:var(--font-display);font-size:24px;line-height:1}
.preview .sub{font-size:11.5px;color:#6B6B6B;margin:2px 0 8px}
.preview .svc{background:color-mix(in srgb,var(--brand) 8%,#fff);border-radius:10px;padding:7px 10px;font-size:12.5px;display:flex;justify-content:space-between;color:color-mix(in srgb,var(--brand) 85%,#000)}
.preview .cta{margin-top:8px;background:var(--brand);color:#fff;border-radius:var(--r-pill);text-align:center;padding:8px;font-size:13px;font-weight:600}
.pk{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.group{margin-top:20px}
.group .sec:where(:not(.btn)){margin-bottom:6px}
.set{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.set button{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:start;border-bottom:1px solid var(--line)}
.set button:last-child{border-bottom:0}
.set button:active{background:var(--bg)}
.set .ic{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--tint-ink);display:grid;place-items:center;flex:none}
.set .ic svg{width:18px;height:18px}
.set .lb{flex:1}
.set .v{font-size:13px;color:var(--ink-3);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set .chev{color:var(--ink-3)}
.set .chev svg{width:16px;height:16px}
.addon{font-size:11px;padding:1px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2);margin-inline-start:6px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px}
.opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-3);flex:none;margin-top:1px}
.opt[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}
.opt[aria-pressed="true"] .rd{border-color:var(--primary);background:radial-gradient(var(--primary) 0 45%,transparent 50%)}
.opt small{display:block;color:var(--ink-3);font-size:12.5px}
.trialbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--tint);color:var(--tint-ink);font-size:13.5px}
.trialbar a{font-weight:600;color:var(--tint-ink);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}
.stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-2);margin-top:12px}
.stats b{display:block;font-size:17px;color:var(--ink)}
.okbox{display:flex;gap:8px;align-items:center;background:var(--ok-bg);color:var(--ok-ink);border-radius:var(--r-sm);padding:8px 10px;font-size:13px}
.okbox svg,.flag svg{width:16px;height:16px}
.okbox.off,.okbox.muted{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}

/* service colour on day rows */
.arow{position:relative;padding-inline-start:12px}
.arow::before{content:'';position:absolute;inset-block:10px;inset-inline-start:0;width:4px;border-radius:2px;background:var(--c,transparent)}
/* month view */
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}
.mgrid .mh{font-size:12px;color:var(--ink-3);text-align:center;padding:4px 0}
.md{min-height:62px;border:1px solid var(--line);border-radius:10px;padding:5px 4px;display:flex;flex-direction:column;align-items:stretch;gap:3px;background:var(--surface,#fff);text-align:start}
.md b{font-size:14px;font-weight:600}
.md .mn{font-size:11px;color:var(--ink-2)}
.md .mdots{display:flex;flex-wrap:wrap;gap:2px}
.md .mdots i{width:7px;height:7px;border-radius:50%}
.md.out{opacity:.4}.md.off{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px)}
.md.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
/* cancellation tiers + message preview */
.tierbox{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tier{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tier.off{opacity:.75}
.bubble{background:var(--bg);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:14px;line-height:1.5}
.bubble:last-child{margin-bottom:0}
/* a card of short numbers: one row each, the label on one side and the number on the other (settings ← הודעות ללקוחות) */
.numrows h3{margin:0 0 4px}
.numrows>.field{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:8px 0;min-height:56px;border-bottom:1px solid var(--line)}
.numrows>.field:last-child{border-bottom:0;padding-bottom:0}
.numrows>.field>label{flex:1;min-width:0;font-size:14.5px;color:var(--ink)}
.numrows>.field>.input,.numrows>.field>input{flex:none;width:84px;text-align:center;font-variant-numeric:tabular-nums}
.bubble small{display:block;font-weight:600;color:var(--ink-3);margin-bottom:3px}

/* slot mode picker */
.modes{display:flex;flex-direction:column;gap:8px}
.mode{text-align:start;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;background:var(--surface,#fff)}
.mode b{font-size:15px;display:flex;align-items:center;gap:8px}
.mode span{font-size:13px;color:var(--ink-2);line-height:1.45}
.mode[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;background:color-mix(in srgb,var(--brand) 6%,var(--surface,#fff))}
.slotdemo{margin-top:12px;padding:12px;border-radius:14px;background:var(--surface-2,#f3f1eb);display:flex;flex-direction:column;gap:10px}
.slotdemo .sdh b{display:block;font-size:14px}.slotdemo .sdh span{font-size:12.5px;color:var(--ink-2)}
.slotdemo .sdbar{position:relative;height:22px;border-radius:8px;background:var(--surface,#fff);border:1px solid var(--line);overflow:hidden}
.slotdemo .sdbook{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink-3,#888) 22%,transparent);font-size:10.5px;font-style:normal;color:var(--ink-2);display:grid;place-items:center}
.slotdemo .sdtick{position:absolute;top:4px;bottom:4px;width:3px;margin-inline-start:-1px;border-radius:2px;background:var(--brand)}
.slotdemo .sdtimes{display:flex;flex-wrap:wrap;gap:6px}
.slotdemo .sdtimes span{font-size:13px;padding:4px 10px;border-radius:99px;background:var(--surface,#fff);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));color:var(--ink)}
.slotdemo small{font-size:12px;color:var(--ink-2);line-height:1.45}
.mode .rec{font-size:11px;font-weight:600;color:var(--on-brand,#fff);background:var(--brand);border-radius:99px;padding:1px 8px}

/* design page */
.designentry{width:100%;text-align:start;cursor:pointer}
.designentry .row{align-items:center}
.dpal{display:flex;gap:6px;margin-top:10px}.dpal i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.theme{padding:8px;border:2px solid transparent;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.theme[aria-pressed="true"]{border-color:var(--ink)}
.theme .tc{display:flex;flex-direction:column;gap:6px;padding:8px;align-items:flex-start}
.theme .tc b{font-size:18px;font-weight:400}.theme .tc i{width:70%;height:10px}
.theme .tn{font-size:12px;font-weight:600;color:#333}
.palette{display:flex;flex-wrap:wrap;gap:8px}
.palette button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,0,0,.08)}
.palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--ink)}
.customc{width:34px;height:34px;border-radius:50%;border:2px dashed var(--ink-3);display:grid;place-items:center;font-weight:700;color:var(--ink-2);position:relative;overflow:hidden;cursor:pointer}
.customc input{position:absolute;inset:0;opacity:0;cursor:pointer}
.imgrow{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.imgrow:first-of-type{border-top:0}
.thumb{width:84px;height:56px;border-radius:10px;background:var(--bg) center/cover;display:grid;place-items:center;font-size:12px;color:var(--ink-3);flex:none}
.thumb.hero{width:56px;border-radius:50%}
.imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;margin-top:10px}
.imggrid .gi{aspect-ratio:1;border-radius:10px;background:var(--bg) center/cover;position:relative}
.imggrid.tall .gi{aspect-ratio:9/16;background-position:top}
.gi .gx,.gi .gm{position:absolute;top:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:24px}
.gi .gx{left:4px}.gi .gm{right:4px}
.designgrid{display:grid;gap:16px}
.pvwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pvwrap .k{font-size:13px;color:var(--ink-3)}
.phone{width:300px;height:600px;border-radius:32px;border:8px solid #1d1b1e;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.pvframe{width:390px;height:780px;border:0;transform:scale(.7487);transform-origin:top right}
@media (min-width:900px){.appmain:has(.designgrid){max-width:980px}.designgrid{grid-template-columns:1fr 320px;align-items:start}.pvwrap{position:sticky;top:16px}}
/* forms builder */
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;background:var(--surface,transparent);color:var(--ink)}
.fchip[aria-pressed="true"]{border-color:var(--primary);background:var(--tint);font-weight:600}
.fchip:disabled{opacity:.6}
.fchip small{color:var(--ink-3);font-weight:400}
.qed{border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin-bottom:10px;display:grid;gap:8px}
.qed>.row{gap:8px;align-items:center}
.qed>.row select{flex:1;min-width:0}
.qed textarea{resize:vertical}
.qbtns{display:flex;gap:2px}
.qbtns .icon-btn{width:34px;height:34px;font-size:16px}
.qbtns .icon-btn:disabled{opacity:.3}
.list .item.yes{background:var(--warn-bg)}
.list .item .ic svg{width:20px;height:20px;color:var(--primary)}
/* team */
.staffchips{display:flex;gap:6px;overflow-x:auto;margin:12px 0 2px;padding-bottom:2px;scrollbar-width:none}
.staffchips button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:14px;background:var(--bg);color:var(--ink)}
.staffchips button i{width:9px;height:9px;border-radius:50%}
.staffchips button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.arow .pr .who{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.arow .pr .who::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--w);margin-inline-end:4px;vertical-align:1px}
.blk.lane{inset-inline-start:calc(var(--l) * 100% / var(--n) + 1px);inset-inline-end:auto;width:calc(100% / var(--n) - 2px);padding:3px 2px}
.blk .wdot{position:absolute;top:3px;inset-inline-end:3px;width:6px;height:6px;border-radius:50%}
.grid-2>*{min-width:0}.grid-2 input[type=date],.grid-2 input[type=time]{min-width:0;width:100%;box-sizing:border-box}
.thumb.logo{background-size:contain;background-repeat:no-repeat;background-color:#fff;border:1px solid var(--line)}
.provs{display:grid;gap:6px}
.provs button{padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);text-align:start;font-weight:600}
.provs button[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}

.blk .bn{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .bs{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:9.5px;opacity:.85;word-break:break-word}
.syncing{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.syncing::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);animation:sync 1s ease-in-out infinite alternate}
@keyframes sync{from{opacity:.25}to{opacity:1}}
/* platform admin inside a business */
.adminbar{position:sticky;top:0;z-index:30;display:flex;gap:10px;align-items:center;justify-content:space-between;background:#2B2B30;color:#fff;font-size:13px;padding:8px 14px;border-radius:0 0 12px 12px;margin:0 0 6px}
.adminbar a{color:#ffd88a;white-space:nowrap;font-weight:600}
.pwwrap{position:relative}
.pwwrap .input{padding-left:44px}
.pwwrap .eye{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--muted,#777);cursor:pointer;border-radius:8px}
.pwwrap .eye:focus-visible{outline:2px solid var(--brand)}
.typelist{display:flex;flex-wrap:wrap;gap:6px;max-height:184px;overflow:auto;margin-top:8px;padding:2px}
.typelist button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.typelist button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
/* tap-to-book on the timeline, hours outside opening time, personal events */
.wk .col{cursor:cell}
.wk .offh{position:absolute;inset-inline:0;background:color-mix(in srgb,var(--ink-3-soft) 22%,var(--surface));pointer-events:auto;border-radius:3px}
.blk.off.pers{background:color-mix(in srgb,#5B6B7A 16%,var(--surface));color:var(--ink);border-inline-start:3px solid #5B6B7A;font-weight:600}
.gapbox.clickable{cursor:pointer}
.gapbox .gapadd{font-size:12px;opacity:.75;font-weight:400}
.chipx{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:var(--tint,#f4f0f5);font-size:13px}
.infobtn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink-3);background:none;color:var(--ink-2);font:italic 700 14px/1 Georgia,serif;display:grid;place-items:center;cursor:pointer;margin-top:12px;flex:none}
.infobtn[aria-expanded="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.infotext{margin-top:8px;padding:10px 12px;border-radius:var(--r-md,10px);background:var(--tint,#f4f0f5);line-height:1.55}
/* loading screen: a little calendar fills itself with appointments, the wordmark breathes, friendly lines rotate */
.boot{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;background:radial-gradient(60% 45% at 50% 38%,color-mix(in srgb,var(--primary,#5B2A6E) 9%,transparent),transparent 70%)}
.bootcal{position:relative;width:148px;height:116px;border-radius:20px;background:var(--surface,#fff);box-shadow:0 18px 40px color-mix(in srgb,var(--primary,#5B2A6E) 18%,transparent),0 2px 6px rgba(0,0,0,.05);overflow:hidden;animation:bcIn .7s cubic-bezier(.2,.8,.2,1) both,bcFloat 3.2s ease-in-out .7s infinite}
.bc-top{height:24px;background:var(--primary,#5B2A6E);display:flex;gap:44px;justify-content:center;align-items:center}
.bc-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.75)}
.bc-grid{position:absolute;inset:24px 0 0;display:grid;grid-template-columns:repeat(5,1fr)}
.bc-grid span{border-inline-start:1px solid color-mix(in srgb,var(--ink,#1a1719) 7%,transparent)}
.bc-grid span:first-child{border:0}
.bc-p{position:absolute;height:15px;border-radius:5px;background:var(--primary,#5B2A6E);opacity:0;animation:bcPill 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.bc-p.p1{top:34px;inset-inline-start:8px;width:44px;animation-delay:.2s}
.bc-p.p2{top:56px;inset-inline-start:38px;width:58px;background:color-mix(in srgb,var(--primary,#5B2A6E) 55%,#E8A0B4);animation-delay:.55s}
.bc-p.p3{top:78px;inset-inline-start:66px;width:40px;background:color-mix(in srgb,var(--primary,#5B2A6E) 35%,#7DC4AE);animation-delay:.9s}
.bc-p.p4{top:56px;inset-inline-start:104px;width:34px;background:color-mix(in srgb,var(--primary,#5B2A6E) 45%,#F0A57E);animation-delay:1.25s}
.bc-ok{position:absolute;bottom:9px;inset-inline-end:9px;width:24px;height:24px;border-radius:50%;background:#2F9E6B;display:grid;place-items:center;opacity:0;animation:bcOk 3.6s ease-out 1.6s infinite}
.bc-ok svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:bcTick 3.6s ease-out 1.6s infinite}
.bootmark{font-size:46px;letter-spacing:-.01em;animation:bootIn .8s .15s cubic-bezier(.2,.7,.2,1) both}
.bootmark i{width:12px;height:12px;animation:bootDot 1.4s ease-in-out 1s infinite}
.bootmsg{position:relative;height:22px;width:260px;text-align:center;font-size:15px;color:var(--ink-2,#5f5a5d)}
.bootmsg span{position:absolute;inset:0;opacity:0;animation:bootMsg 6.6s ease-in-out infinite}
.bootmsg span:nth-child(2){animation-delay:2.2s}.bootmsg span:nth-child(3){animation-delay:4.4s}
@keyframes bcIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes bcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bcPill{0%{opacity:0;transform:translateY(-10px) scaleX(.4)}14%{opacity:1;transform:none}78%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(4px)}}
@keyframes bcOk{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.12)}20%{transform:scale(1)}55%{opacity:1}70%,100%{opacity:0}}
@keyframes bcTick{0%,8%{stroke-dashoffset:24}25%,100%{stroke-dashoffset:0}}
@keyframes bootIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bootDot{0%,100%{transform:translateY(2px) scale(1)}50%{transform:translateY(2px) scale(1.4)}}
@keyframes bootMsg{0%{opacity:0;transform:translateY(8px)}6%,28%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.bootcal,.bc-p,.bc-ok,.bc-ok svg,.bootmark,.bootmark i{animation:none;opacity:1;stroke-dashoffset:0}.bootmsg span{animation:none}.bootmsg span:first-child{opacity:1}}
/* cached first screen: visible at once, taps wait for the live data */
html.booting .appmain button,html.booting .appmain a,html.booting .tabbar,html.booting .fab,html.booting .wk .col{pointer-events:none}
/* page templates picker */
.laycard{margin-bottom:12px}
.layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.lay{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;--lb:color-mix(in srgb,var(--primary) 55%,#e9d9cf);--lt:#efe6df;--li:#3a3236;--lm:#d9d2d6}
.lay[aria-checked="true"]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.lay .lt{width:100%;aspect-ratio:60/44;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:#faf8f7}
.lay .lt svg{width:100%;height:100%;display:block}
.lay .lt.auto{font:600 18px/1 var(--font-display,serif);color:var(--ink-3)}
.lay .ln{font-size:12px;color:var(--ink-2)}
.autofillhow{background:var(--tint);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:14px;line-height:1.5}
.autofillhow ol{margin:6px 0;padding-inline-start:20px}
.autofillhow .tiny{margin-top:4px}
/* fixed breaks (business hours) */
.wk .offh.brk{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--line) 70%,transparent) 0 5px,transparent 5px 10px);font-size:10px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blockrow.brk{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--line) 60%,transparent) 0 6px,transparent 6px 12px);color:var(--ink-3)}
.field .tfield{width:100%}
button.color-dot{width:24px;height:24px;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer}
/* drag-to-select a time range on the timeline */
.wk .dsel{position:absolute;inset-inline:1px;z-index:3;background:color-mix(in srgb,var(--brand) 22%,transparent);border:2px solid var(--brand);border-radius:6px;font-size:11px;font-weight:600;color:var(--ink);padding:2px 4px;pointer-events:none}
body.dragsel{user-select:none;-webkit-user-select:none}
.wk .col{-webkit-touch-callout:none}
/* assistant */
.aifab{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));inset-inline-start:max(18px,calc(50vw - 240px + 18px));z-index:40;display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 16px;border-radius:99px;background:var(--surface);color:var(--primary);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-weight:600;font-size:14px}
.aifab .aiic,.aifab .aiic svg{width:20px;height:20px;display:inline-flex}
.aifab{padding-inline-start:4px;height:50px}.aifab .tvwrap{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FFE1EC,#EFE3FF)}
.aihero{display:flex;justify-content:center;margin:-6px 0 2px;transition:margin .3s var(--ease-out)}.aihero .tvwrap{width:132px;height:142px;transition:width .3s,height .3s}.aihero.small .tvwrap{width:74px;height:80px}
.aisheet{max-height:88dvh;display:flex;flex-direction:column}
.aibody{display:flex;flex-direction:column;min-height:0;flex:1}
.ailist{flex:1;min-height:220px;max-height:62dvh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px}
.aimsg{display:flex;flex-direction:column;gap:6px;max-width:88%}
.aimsg.user{align-self:flex-start}
.aimsg.assistant{align-self:flex-end}
.aitext{white-space:pre-wrap;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.5}
.aimsg.user .aitext{background:var(--primary);color:var(--on-primary,#fff);border-end-start-radius:4px}
.aimsg.assistant .aitext{background:var(--surface-2);color:var(--ink);border-end-end-radius:4px}
.aicard{border:1px solid var(--line-strong);background:var(--surface);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.aihello{padding:6px 2px;display:flex;flex-direction:column;gap:4px}
.aiinput{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:10px}
.aiinput textarea{min-height:44px;resize:none;flex:1}
.aidots{display:flex;gap:4px}.aidots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:aib 1s infinite}.aidots i:nth-child(2){animation-delay:.15s}.aidots i:nth-child(3){animation-delay:.3s}
@keyframes aib{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* drag an appointment: bottom edge resizes, long-press moves */
.wk .blk .rsz{position:absolute;inset-inline:0;bottom:-3px;height:12px;cursor:ns-resize;touch-action:none}
.wk .blk .rsz::after{content:"";position:absolute;bottom:4px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:color-mix(in srgb,var(--c,var(--brand)) 70%,transparent);opacity:.7}
.wk .blk.dragging{opacity:.35}
.wk .blk{-webkit-touch-callout:none}
/* appointment sheet: pencil, services dropdown, "does it fit" line */
.askedit{position:absolute;top:8px;inset-inline-end:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--surface);border:1px solid var(--line)}
.askedit svg{width:18px;height:18px}
.askedit[aria-pressed="true"]{background:var(--primary);color:var(--on-primary,#fff);border-color:var(--primary)}
/* (p125: the treatments dropdown of an appointment was replaced by svcPicker, below) */
.fitline{font-size:13px;font-weight:500;border-radius:10px;padding:8px 12px;margin:-4px 0 12px}
.fitline.ok{background:var(--ok-soft,#e6f4ec);color:var(--ok,#2f9e6b)}
.fitline.warn{background:var(--warn-soft,#fff4e0);color:var(--ink)}
.fitline.bad{background:var(--bad-soft,#fde8e8);color:var(--bad,#c0392b)}
.pushcard .main{display:flex;flex-direction:column;gap:2px}
.appmain{padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important}
.aisugg{margin-top:4px}
.aisugg .chipx{border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;padding:7px 12px}

/* day closed to clients: clearly shaded, label in the header; hand-booked appointments still sit on top */
.wk .col.closed{background:color-mix(in srgb,var(--ink-3-soft) 22%,var(--surface))}
.wk .col.closed.blk{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--line-strong) 70%,transparent) 0 7px,color-mix(in srgb,var(--line) 60%,transparent) 7px 14px)}
.wk .hd.shut small{display:block;font-size:10px;font-weight:600;color:var(--bad);line-height:1.3}
.wk .hd.shut.dayoff small{color:var(--ink-3);font-weight:500}

/* onboarding: Ready Time guides each step */
.toriguide{display:flex;align-items:flex-end;gap:10px;margin:0 0 14px}
.toriguide .tvwrap{width:84px;height:90px}
.tgsay{flex:1;min-height:48px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);border-radius:16px 16px 4px 16px;padding:10px 13px;font-size:15px;line-height:1.45;margin-bottom:10px;position:relative}

.aimsgtxt{white-space:pre-wrap;font-size:14.5px;background:var(--surface-2);border-radius:10px;padding:8px 10px;margin-top:4px}
.aiatt{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2);padding:6px 4px 0}
.aiclip{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);font-size:19px}
.btn .tvwrap{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#FFE1EC,#EFE3FF);margin-inline-end:6px}

/* Ready Time says hello on the first visit */
.thello{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .7s,backdrop-filter .7s}
.thello.go{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.thcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:0 24px;animation:thIn .6s cubic-bezier(.2,.8,.2,1) both}
.thcard .tvwrap{width:230px;height:246px;transition:transform .9s cubic-bezier(.6,0,.3,1),opacity .9s ease;transform-origin:center}
.thsay{font-size:28px;font-weight:800;color:var(--ink)}.thsub{color:var(--ink-2);font-size:17px}
.thello.go .thsay,.thello.go .thsub{opacity:0;transition:opacity .25s}
@keyframes thIn{from{opacity:0;transform:scale(.85) translateY(18px)}}
.thtip{position:fixed;z-index:45;background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);border-radius:16px 16px 4px 16px;padding:10px 14px;font:inherit;font-size:15px;font-weight:600;max-width:240px;animation:thIn .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .35s}
.thtip.out{opacity:0}
.aifab .tvwrap.pop{animation:thPop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes thPop{0%{transform:scale(.6)}100%{transform:scale(1)}}

.onblogo{width:64px;height:64px;border-radius:16px;border:1.5px dashed var(--line-strong);display:grid;place-items:center;overflow:hidden;background:var(--surface-2);color:var(--ink-3);font-size:24px;flex:none}
.onblogo img{width:100%;height:100%;object-fit:contain}
.btn.lg .tvwrap{width:34px;height:34px}

.obprev{position:sticky;top:0;z-index:5;margin:0 auto 10px;max-width:440px;text-align:center;font-size:13px;font-weight:600;padding:8px 12px;border-radius:99px;background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn-line)}

/* social with Ready Time */
.socialentry{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 12%,var(--surface,#fff)),var(--surface,#fff));font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.socialentry .tvwrap{width:46px;height:46px;border-radius:50%;background:var(--surface,#fff)}
.socialentry>span{flex:1;display:flex;flex-direction:column}.socialentry small{color:var(--ink-3);font-size:13px}
.social .chips{display:flex;flex-wrap:wrap;gap:6px}
.social .chip{border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink);border-radius:99px;padding:7px 13px;font:inherit;font-size:14px;cursor:pointer}
.social .chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.social .toriguide{margin-bottom:12px}
.socsec{font-size:17px;margin:22px 0 8px}
.soccard{margin-bottom:10px;padding:12px 14px}
.soccard.posted{opacity:.95}
.sochead{display:flex;gap:10px;align-items:flex-start;width:100%;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.socbadge{flex:none;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--tint-2,#eee);color:var(--brand)}
.soct{display:flex;flex-direction:column}.soct small{color:var(--ink-3);font-size:12px}
.socwhy{font-size:13px;color:var(--ink-2,var(--ink-3));margin:8px 0 0}
.socdet{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.socdet small{display:block;font-size:12px;color:var(--ink-3);margin-bottom:2px}
.socdet ol{margin:0;padding-inline-start:20px;font-size:14px}
.soctext{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.55;background:var(--tint,#f6f3f7);border-radius:12px;padding:10px 12px;margin:6px 0}
.socstats{font-size:13px;color:var(--ink-3);margin-top:6px}
.socrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--line)}
.socrow small{grid-column:1/-1;color:var(--ink-3);font-size:12px}
.socrow .up{color:var(--ok,#1a7f4b)}.socrow .down{color:var(--ink-3)}
.socgap{margin-top:12px}

.socrev{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:12px 14px}
.socrev p{margin:4px 0 0;font-size:14px;color:var(--ink-2,var(--ink))}
.socrev b{color:#C98A00}

/* "ביומן" from a request: the block glows in its place for a few seconds */
/* p127: the glow has to beat the calendar's arrival stagger. Both .calanim .cin and .arow.glow are two classes, and
   .cin is written later in this file, so an appointment opened from a request did the entry animation and never
   pulsed at all - in the day view only, which is the default view. When we deliberately point at one appointment,
   that wins over the ambient stagger. */
.blk.glow,.arow.glow,.calanim .arow.glow,.calanim .blk.glow{z-index:5;animation:reqGlow 1.1s ease-in-out 5;outline:2px solid var(--brand)}
@keyframes reqGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 0%,transparent),0 0 18px 4px color-mix(in srgb,var(--brand) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.blk.glow,.arow.glow{animation:none}}
/* p127: the way back after "לפתוח ביומן". Sits under the calendar heading, quiet, and goes when she uses it. */
.peekback{margin:0 0 12px;justify-content:center;gap:6px}
.peekback svg{width:17px;height:17px;transform:scaleX(-1)}
/* iPhone home-screen app: after the keyboard closes (or during a call) iOS can leave the page's viewport short, and
   anything pinned with bottom:0 floats in the middle of the screen. In the installed app, pin the bars to the large
   viewport (the full screen) instead, which that bug does not shrink. */
@media (display-mode: standalone){@supports (height:100lvh){
  /* only while that bug is on (html.vbfix, set in app.js): pinned by top, iOS repositions the bar late during a fast
     scroll and it floats mid-screen, so normally the bars stay pinned by bottom */
  html.vbfix .tabbar,html.vbfix .tabbar.tabbar{top:var(--vb,100lvh);bottom:auto;translate:0 -100%}
  html.vbfix .fab,html.vbfix .fab.fab{top:calc(var(--vb,100lvh) - 102px - env(safe-area-inset-bottom));bottom:auto;translate:0 -100%}
  /* Rady is not in this rule any more (p125): pinRady() in app.js puts her just above the tab bar on every scroll and
     resize, which keeps her on screen in this mode too (pinned by top here, iOS repositioned her late and she vanished) */
}}

.req .meta .pastreq{color:var(--bad,#B3261E);font-weight:600}

/* ═══ 2026-10 polish layer: calm motion, depth and small delights (no layout logic changes) ═══ */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}
html{-webkit-tap-highlight-color:transparent}
::selection{background:var(--tint-2)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1{font-size:30px;letter-spacing:-.02em}
/* a soft arrival when the screen changes (never on live data updates) */
.appmain.enter>.content{animation:pageIn .16s ease-out both}
@keyframes pageIn{from{opacity:0}}
/* tab bar: a soft pill under the active tab, icons that answer the touch */
.tabbar,.tabbar.tabbar{background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px)}
.tabbar button{position:relative;isolation:isolate;transition:color .2s}
.tabbar button::before{content:"";position:absolute;top:3px;left:50%;width:56px;height:30px;margin-left:-28px;border-radius:99px;background:var(--tint);opacity:0;transform:scale(.55);transition:opacity .2s,transform .4s var(--ease-spring);z-index:-1}
.tabbar button[aria-current="page"]::before{opacity:1;transform:none}
.tabbar button svg{transition:transform .4s var(--ease-spring)}
.tabbar button:active svg{transform:scale(.86)}
.tabbar button .badge{animation:badgeIn .5s var(--ease-spring) both}
@keyframes badgeIn{from{transform:scale(.9);opacity:0}}
/* buttons: tactile press, depth on the main action */
.btn{transition:transform .15s var(--ease-out),background-color .2s,box-shadow .25s var(--ease-out)}
.btn.primary,.btn.pri,.btn.ok{box-shadow:0 8px 18px -10px color-mix(in srgb,var(--primary) 85%,transparent)}
.btn:active{transform:scale(.965)}
.fab{border-radius:20px;box-shadow:0 12px 26px -10px color-mix(in srgb,var(--primary) 75%,transparent);transition:transform .18s var(--ease-out)}
.fab:active{transform:scale(.9)}
.seg{border-radius:99px}
.seg button{border-radius:99px;transition:background-color .2s,box-shadow .25s,color .2s}
.seg button[aria-pressed="true"]{box-shadow:0 2px 8px -2px rgba(20,18,22,.18)}
/* "now" card: a little more presence */
.now{background:linear-gradient(140deg,var(--primary),color-mix(in srgb,var(--primary) 72%,#E79BB5));box-shadow:0 18px 34px -18px color-mix(in srgb,var(--primary) 90%,transparent);border-radius:22px;position:relative;overflow:hidden}
.now::after{content:"";position:absolute;width:220px;height:220px;top:-110px;inset-inline-end:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none}
/* agenda rows and lists answer the touch */
.arow{transition:background-color .2s}
.arow:active{background:var(--tint)}
.req{border-radius:20px;box-shadow:var(--shadow)}
/* client avatars: one soft colour per client */
.av[style*="--h"]{background:hsl(var(--h) 55% 92%);color:hsl(var(--h) 38% 32%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .av[style*="--h"]{background:hsl(var(--h) 22% 22%);color:hsl(var(--h) 55% 80%)}}
:root[data-theme="dark"] .av[style*="--h"]{background:hsl(var(--h) 22% 22%);color:hsl(var(--h) 55% 80%)}
/* sheets travel their own full height on an iOS drawer curve, and close faster than they open */
.sheet{border-radius:26px 26px 0 0;animation:sheetUp .3s var(--ease-drawer) both}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet-bg{animation:scrimIn .2s ease both}
@keyframes scrimIn{from{opacity:0}}
.sheet-bg.closing{animation:scrimOut .2s ease both;pointer-events:none}
@keyframes scrimOut{to{opacity:0}}
.sheet-bg.closing>.sheet{animation:sheetDown .2s var(--ease-out) both}
@keyframes sheetDown{to{transform:translateY(100%)}}
/* Ready's avatar in the corner stays calm while you work: only a blink; it moves when it has something to say */
.tvwrap.mini .tv:not(.happy):not(.talk):not(.think) :is(.tv-body-all,.tv-head,.tv-arm,.tv-clip,.tv-mic){animation:none}
.aifab{transition:transform .18s var(--ease-out)}
.aifab:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.appmain.enter>.content,.sheet,.sheet-bg.closing,.sheet-bg.closing>.sheet,.tabbar button .badge{animation:none}}

/* 2026-10-13 bigger bottom navigation: easier to hit with a thumb, readable labels */
.tabbar,.tabbar.tabbar{padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
.tabbar button,.tabbar.tabbar button{gap:4px;font-size:13.5px;padding:9px 0 7px;min-height:62px}
.tabbar button svg{width:27px;height:27px}
.tabbar button::before{top:4px;width:68px;height:38px;margin-left:-34px}
.tabbar button .badge,.tabbar.tabbar button .badge{top:3px;inset-inline-start:calc(50% + 8px);min-width:19px;height:19px;font-size:12px;border-radius:10px}
@media not (display-mode: standalone){.fab,.aifab{bottom:calc(102px + env(safe-area-inset-bottom))}}
.toast,.toast.ok,.toast.bad{bottom:calc(110px + env(safe-area-inset-bottom));
  opacity:0;transform:translate(-50%,120%);transition:opacity 160ms ease,transform 200ms var(--ease-out)}
.toast.in{opacity:1;transform:translate(-50%,0);transition:opacity 240ms ease,transform 320ms var(--ease-drawer)}
.toast.out{opacity:0;transform:translate(-50%,120%);transition:opacity 160ms ease,transform 200ms var(--ease-out)}
.appmain{padding-bottom:calc(168px + env(safe-area-inset-bottom)) !important}

/* ═══ 2026-10-13 calendar: greeting, live stats, the next client up front, a day that reads like a timeline ═══ */
.dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 4px}
.dst{display:flex;align-items:center;gap:9px;padding:11px 11px 10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -22px rgba(0,0,0,.35)}
.dst b{display:block;font-size:19px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.dst small{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-top:2px;white-space:nowrap}
.ringsv{flex:none;transform:rotate(-90deg)}
.ringsv circle{fill:none;stroke-width:4.5}
.ringsv .rb{stroke:color-mix(in srgb,var(--primary) 14%,transparent)}
.ringsv .rf{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p))}
.dstats.run .rf,.nowx .rf{animation:ringIn 1.5s .15s var(--ease-out) both}
@keyframes ringIn{from{stroke-dashoffset:100}}
.calanim .dst{animation:upIn .7s var(--ease-out) both}.calanim .dst:nth-child(2){animation-delay:.06s}.calanim .dst:nth-child(3){animation-delay:.12s}
@keyframes upIn{from{opacity:0;transform:translateY(12px)}}
.shead .summary .lnk{font:inherit;color:var(--warn-ink,var(--primary));font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:360px){.dst{flex-direction:column;align-items:flex-start;gap:6px}}
/* week strip: a load bar under each day, the chosen day in a gliding pill */
.strip{position:relative}
.strip .spill{position:absolute;top:0;left:0;border-radius:var(--r-md);background:var(--primary);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--primary) 90%,transparent);transition:transform .55s var(--ease-spring),width .3s;pointer-events:none;z-index:0}
.strip button{position:relative;z-index:1}
.strip.pilled button[aria-current="true"]{background:transparent}
.strip .ld{width:22px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink-3-soft) 25%,transparent);margin-top:5px;overflow:hidden}
.strip .ld i{display:block;height:100%;border-radius:4px;background:var(--primary);transition:width 1s var(--ease-out)}
.calanim .strip .ld i{animation:ldIn 1.1s .2s var(--ease-out) both}
@keyframes ldIn{from{width:0}}
.strip button[aria-current="true"] .ld{background:color-mix(in srgb,var(--on-primary) 30%,transparent)}
.strip button[aria-current="true"] .ld i{background:var(--on-primary)}
/* the current / next client */
.now.nowx{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:16px 16px 14px;margin:14px 0 16px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 62%,#2A1222));box-shadow:0 22px 40px -24px color-mix(in srgb,var(--primary) 95%,transparent)}
.calanim .now.nowx{animation:heroIn .8s .12s var(--ease-spring) both}
@keyframes heroIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.now.nowx::before{content:"";position:absolute;z-index:-1;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),transparent 62%);top:-120px;inset-inline-end:-60px;animation:nxGlow 9s ease-in-out infinite alternate}
@keyframes nxGlow{to{transform:translate(-40px,40px) scale(1.2)}}
.now.nowx::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(120%);animation:nxSweep 5.5s 1.5s ease-in-out infinite}
@keyframes nxSweep{0%{transform:translateX(120%)}35%,100%{transform:translateX(-120%)}}
.nowx .lab{font-size:12.5px;font-weight:700;letter-spacing:.02em;opacity:.9;justify-content:flex-start}
.nowx .lab .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7CF0B0;margin-inline-end:7px;box-shadow:0 0 0 0 rgba(124,240,176,.7);animation:livePulse 1.8s infinite;vertical-align:1px}
@keyframes livePulse{70%,100%{box-shadow:0 0 0 8px rgba(124,240,176,0)}}
.nowx .nrow{display:flex;align-items:center;gap:12px;margin-top:10px}
.nowx .nav2{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:17px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.45)}
.nowx .nwho{flex:1;min-width:0}
.nowx .who{font-size:21px;font-weight:800;margin:0}
.nowx .cd{position:relative;width:66px;height:66px;flex:none}
.nowx .cd .ringsv .rb{stroke:rgba(255,255,255,.22)}.nowx .cd .ringsv .rf{stroke:#fff}
.nowx .cd>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-weight:800;font-size:19px;line-height:1}
.nowx .cd small{display:block;font-size:10.5px;font-weight:700;opacity:.85;margin-top:2px}
.nowx .acts{margin-top:12px}
.nowx .chipbtn{background:rgba(255,255,255,.17);color:var(--on-primary);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nowx .chipbtn.pri{background:#fff;color:var(--primary);font-weight:700}
.nowx .chipbtn svg{width:16px;height:16px}
/* appointments as cards on a rail, height follows the length */
.alist.xl{gap:8px;position:relative;padding-inline-start:0}
.alist.xl .arow{position:relative;min-height:var(--h,66px);align-items:start;padding:12px 14px 12px 12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 10px 22px -22px rgba(0,0,0,.4);grid-template-columns:50px 1fr auto;transition:transform .2s var(--ease-out),box-shadow .3s}
.alist.xl .arow::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:4px;border-radius:4px;background:var(--c,var(--primary))}
.alist.xl .arow:active{transform:scale(.985)}
.alist.xl .arow .mid{display:flex;gap:10px;align-items:flex-start;min-width:0}
.alist.xl .av2{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:var(--c,var(--primary))}
.alist.xl .ptag{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:800;color:var(--warn-ink,#9A6200);background:color-mix(in srgb,var(--warn,#C98A00) 16%,transparent);border-radius:99px;padding:1px 7px;vertical-align:1px}
.alist.xl .arow.pend{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--warn,#C98A00) 7%,var(--surface)) 0 8px,var(--surface) 8px 16px)}
.alist.xl .arow.past{opacity:.5}
.alist.xl .pr{align-self:end}
.alist.xl .gapbox{position:relative;overflow:hidden;border-radius:18px}
.alist.xl .gapbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--primary) 12%,transparent) 50%,transparent 65%);transform:translateX(120%);animation:nxSweep 4.5s 1s ease-in-out infinite}
.alist.xl .blockrow{border-radius:18px}
.calanim .cin{animation:rowIn .6s var(--ease-out) both;animation-delay:calc(.18s + var(--i) * 55ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-18px)}}
.nowmark{position:relative;height:2px;margin:4px 0;background:var(--now,#E0475B);border-radius:2px}
.nowmark::before{content:"";position:absolute;inset-inline-start:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--now,#E0475B);animation:nowPulse 1.6s infinite}
@keyframes nowPulse{0%{box-shadow:0 0 0 0 rgba(224,71,91,.55)}70%,100%{box-shadow:0 0 0 9px rgba(224,71,91,0)}}
.nowmark span{position:absolute;inset-inline-end:0;top:-10px;background:var(--now,#E0475B);color:var(--on-now,#fff);font-size:11px;font-weight:800;border-radius:99px;padding:2px 8px}
@media (prefers-reduced-motion:reduce){.calanim .cin,.calanim .dst,.calanim .now.nowx,.now.nowx::before,.now.nowx::after,.alist.xl .gapbox::after,.nowmark::before,.dstats.run .rf,.nowx .rf,.calanim .strip .ld i{animation:none}.strip .spill{transition:none}}
.nowx .cd .ringsv{width:66px;height:66px;position:absolute;inset:0}
.dst .ringsv{width:38px;height:38px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .now.nowx{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 58%,#14080F),color-mix(in srgb,var(--primary) 30%,#0C060A));color:#fff}:root:not([data-theme="light"]) .nowx .chipbtn.pri{color:#2A1530}}
:root[data-theme="dark"] .now.nowx{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 58%,#14080F),color-mix(in srgb,var(--primary) 30%,#0C060A));color:#fff}
:root[data-theme="dark"] .nowx .chipbtn.pri{color:#2A1530}

/* design centre: fine controls */
.lookrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.lookrow:first-child{border-top:0}
.lookrow.col{flex-direction:column;align-items:stretch}
.lookrow .lk{font-weight:600;font-size:14.5px;white-space:nowrap}
.lookrow .seg{flex-wrap:wrap;justify-content:flex-end}
.lookrow .seg button{font-size:13px;padding:6px 11px}
.fontsel{max-width:210px;height:40px;padding:0 10px;font-size:15px}
.lksec{margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.lookrow.col .seg{justify-content:stretch;display:grid;grid-template-columns:1fr 1fr;margin-top:8px}
.galpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.galpick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:1.5px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface);transition:border-color .2s,transform .2s var(--ease-spring)}
.galpick button:active{transform:scale(.96)}
.galpick button[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.galpick svg{width:46px;height:40px;fill:currentColor;stroke:currentColor;stroke-width:0}
.galpick svg [fill="none"]{stroke-width:2}
.moodseg{flex-wrap:wrap}
/* ── first steps: welcome card, guided tour, overview, questions ── */
.twel{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--ink) 38%,transparent);animation:twBg .3s ease both}
.twel.out{opacity:0;transition:opacity .25s}
@keyframes twBg{from{opacity:0}}
.twcard{width:min(380px,100%);background:var(--surface);border-radius:28px;padding:18px 22px 20px;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.4);animation:twIn .5s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes twIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.twface{width:140px;height:150px;margin:-70px auto 0}
.twface .tvwrap{width:100%;height:100%}
.twcard h2{font-size:24px;font-weight:800;margin:4px 0 6px}
.twcard p{color:var(--ink-2);font-size:16px;margin:0 0 16px;line-height:1.5}
.twskip{margin-top:10px;color:var(--ink-3);font-size:14.5px;font-weight:600}
/* Rady's welcome + terms (devNotice): the face sits above the card, so the overlay scrolls with room for it on short screens */
.twel.terms{overflow-y:auto;padding:86px 16px 20px}
.twel.terms .twcard{margin-block:auto}
.twterms h2{font-size:23px;line-height:1.3}
.twterms h2.twq{margin:6px 0 16px}
.twterms p{margin-bottom:10px}
.twlist{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:start}
.twlist li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px;background:var(--surface-2,#f3f1eb);color:var(--ink);font-size:15px;line-height:1.5}
.twlist .twe{flex:none;font-size:18px;line-height:1.4}
.twlist a{font-weight:600;overflow-wrap:anywhere}
.twchk{display:flex;gap:10px;align-items:flex-start;text-align:start;font-size:15px;line-height:1.5;margin:4px 2px 14px;cursor:pointer}
.twchk input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--brand)}
.twchk a{font-weight:600}
.tqs{display:flex;flex-direction:column;gap:8px}
.tqs .chipx{justify-content:center;text-align:center;padding:11px 14px;font-size:15px}
.tour{position:fixed;inset:0;z-index:85;opacity:0;transition:opacity .28s}
.tour.on{opacity:1}
.tspot{position:fixed;border-radius:24px;box-shadow:0 0 0 9999px rgba(18,10,20,.58),0 0 0 3px color-mix(in srgb,var(--primary) 70%,#fff);transition:left .45s cubic-bezier(.3,.9,.25,1),top .45s cubic-bezier(.3,.9,.25,1),width .45s cubic-bezier(.3,.9,.25,1),height .45s cubic-bezier(.3,.9,.25,1),border-radius .45s;pointer-events:auto}
.tspot.none{box-shadow:0 0 0 9999px rgba(18,10,20,.58)}
.ttip{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;background:var(--surface);border-radius:22px;padding:16px 18px 12px;box-shadow:0 24px 50px -18px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.25,1.1)}
.ttip.in{opacity:1;transform:none}
.ttip.mid{top:50%!important;bottom:auto!important;transform:translateY(-50%)}
.ttip.mid:not(.in){transform:translateY(-44%)}
.ttip .te{font-size:30px;line-height:1;margin-bottom:6px}
.ttip b{display:block;font-size:19px;font-weight:800}
.ttip p{margin:4px 0 10px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.tlink{display:block;width:100%;margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--primary) 45%,transparent);background:var(--tint);color:var(--ink);font:inherit;font-size:14px;font-weight:700;direction:ltr;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfoot{display:flex;align-items:center;gap:10px}
.tdots{display:flex;gap:5px;flex:1}
.tdots i{width:6px;height:6px;border-radius:9px;background:var(--line);transition:width .3s,background .3s}
.tdots i.done{background:color-mix(in srgb,var(--primary) 45%,var(--line))}
.tdots i.on{width:18px;background:var(--primary)}
.tfoot .plain{color:var(--ink-3);font-weight:600}
.tovgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tov{display:flex;flex-direction:column;gap:3px;padding:14px 12px;border-radius:18px;background:var(--tint);animation:twIn .45s cubic-bezier(.2,.9,.25,1.1) both}
.tov:nth-child(2){animation-delay:.04s}.tov:nth-child(3){animation-delay:.08s}.tov:nth-child(4){animation-delay:.12s}.tov:nth-child(5){animation-delay:.16s}.tov:nth-child(6){animation-delay:.2s}.tov:nth-child(7){animation-delay:.24s}.tov:nth-child(8){animation-delay:.28s}.tov:nth-child(9){animation-delay:.32s}.tov:nth-child(10){animation-delay:.36s}
.tov .te{font-size:26px;line-height:1.1}
.tov b{font-size:15.5px}
.tov small{color:var(--ink-2);font-size:13px;line-height:1.4}
.tourentry{background:var(--surface)}
.tourico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--tint);flex:none}
@media (prefers-reduced-motion:reduce){.twcard,.tov,.ttip,.tspot{animation:none;transition:none}}
/* onboarding: ready-made looks for the business type */
.looks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.looktile{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 12px;border-radius:20px;border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:transform .25s cubic-bezier(.2,.9,.25,1.2),border-color .2s,box-shadow .25s}
.looktile:active{transform:scale(.97)}
.looktile.on{border-color:var(--primary);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--primary) 70%,transparent)}
.lkph{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;aspect-ratio:9/12;border-radius:14px;background:var(--ls);overflow:hidden;padding:0 10px 10px}
.lkhd{align-self:stretch;margin:0 -10px;height:38%;background:linear-gradient(160deg,color-mix(in srgb,var(--lb) 55%,var(--lp)),var(--lb));flex:none}
.lknm{font-family:var(--lf);font-size:15px;line-height:1.1;color:var(--li);text-align:center;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lkrow{align-self:stretch;height:12px;border-radius:var(--lr);background:var(--lp);border:1px solid var(--ll)}
.lkrow.s{margin-inline-end:30%}
.lkbtn{margin-top:auto;align-self:stretch;padding:5px 0;border-radius:99px;background:var(--lb);color:#fff;font-size:10.5px;font-weight:700;text-align:center;mix-blend-mode:normal}
.lkph.arch .lkhd{width:58%;align-self:center;margin:10px 0 0;height:36%;border-radius:999px 999px 10px 10px}
.lkph.cover .lkhd{height:44%}
.lkph.full .lkhd{position:absolute;inset:0;height:auto;margin:0;opacity:.9}.lkph.full .lknm{position:relative;margin-top:34%;color:#fff}.lkph.full .lkrow{position:relative;opacity:.85}.lkph.full .lkbtn{position:relative}
.lkph.editorial .lkhd{height:30%;margin:10px 0 0;align-self:stretch;border-radius:4px}.lkph.editorial .lknm{font-size:19px}
.lkph.split .lkhd{height:100%;position:absolute;inset:0 50% 0 0;margin:0}.lkph.split .lknm,.lkph.split .lkrow,.lkph.split .lkbtn{position:relative;align-self:flex-end;width:44%;margin-top:0}.lkph.split .lknm{margin-top:30%;font-size:13px}
.lkph.glass .lkhd{height:55%}.lkph.glass .lknm{margin-top:-30px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--lp) 75%,transparent)}
.lkph.pop .lkhd{width:64px;height:64px;flex:none;margin:12px 0 0;align-self:center;border-radius:50%}
.lkph.card .lkhd{height:30%}.lkph.card .lknm{margin-top:-14px;padding:5px 10px;border-radius:10px;background:var(--lp);box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}
.lkph.minimal .lkhd{height:0}.lkph.minimal .lknm{margin-top:22%;font-size:17px}
.lkname{font-weight:800;font-size:14px;text-align:center}
.lkrec{position:absolute;top:-9px;inset-inline-start:10px;background:var(--primary);color:var(--on-primary);font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--primary) 70%,transparent)}
.lkchk{position:absolute;top:16px;inset-inline-end:16px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-size:13px;font-weight:900;animation:twIn .35s cubic-bezier(.2,.9,.25,1.3) both}
.obmore summary{cursor:pointer;font-weight:700;list-style:none}.obmore summary::-webkit-details-marker{display:none}
.obmore[open] summary{margin-bottom:10px}
.ttip .thead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ttip .tface{width:38px;height:38px;flex:none}.ttip .tface .tvwrap{width:100%;height:100%}
.ttip .thead .te{font-size:26px;margin:0}
.ttip .tcount{margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--ink-3);background:var(--tint);padding:3px 9px;border-radius:99px}
.ttip.in .tface{animation:tfHop .6s cubic-bezier(.3,1.6,.5,1) .1s both}
@keyframes tfHop{from{transform:translateY(8px) scale(.7);opacity:0}}
/* onboarding: the design questions */
.qzbody{margin-top:6px}
.box.qzout .qzbody,.box.qzout h1,.box.qzout .lead{opacity:0;transform:translateX(-18px);transition:opacity .2s,transform .2s}
.qzbody>*{animation:qzIn .4s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes qzIn{from{opacity:0;transform:translateX(22px)}}
.qzgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qzlist{display:flex;flex-direction:column;gap:10px}
.qzopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 16px;border-radius:20px;border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.2,.9,.25,1.3),border-color .2s,box-shadow .2s;animation:qzPop .45s cubic-bezier(.2,.9,.25,1.2) both}
.qzgrid .qzopt:nth-child(2),.qzlist .qzopt:nth-child(2){animation-delay:.06s}.qzgrid .qzopt:nth-child(3),.qzlist .qzopt:nth-child(3){animation-delay:.12s}.qzgrid .qzopt:nth-child(4){animation-delay:.18s}
@keyframes qzPop{from{opacity:0;transform:translateY(14px) scale(.95)}}
.qzopt:active{transform:scale(.95)}
.qzopt.on{border-color:var(--primary);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--primary) 70%,transparent)}
.qzlist .qzopt{flex-direction:row;justify-content:flex-start;gap:14px;padding:16px 18px}
.qze{font-size:34px;line-height:1}.qzlist .qze{font-size:28px}
.qzopt b{font-size:16px}
.qzsw{display:flex;gap:4px}.qzsw i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.qzcolors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;justify-items:center}
.qzc{width:58px;height:58px;border-radius:50%;border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 6px 14px -8px rgba(0,0,0,.4);cursor:pointer;animation:qzPop .4s cubic-bezier(.2,.9,.25,1.3) both;transition:transform .18s}
.qzc:active{transform:scale(.88)}
.qzc.on{outline:3px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.qzopt,.qzc,.qzbody>*{animation:none}}
/* treatments list: category headers + move up/down */
.svcathead{font-size:13px;font-weight:700;color:var(--primary);padding:12px 2px 4px}
.svcathead:first-child{padding-top:4px}
.svmove{display:flex;gap:2px;margin-inline-start:auto}
.svmove .icon-btn{width:30px;height:30px;font-size:11px;opacity:.7}
.svmove .icon-btn:disabled{opacity:.18}
/* onboarding: team at the hours step */
.obteam{margin-top:14px}
.obteam h3{margin:0}
.obmember{padding:10px 0;border-top:1px solid var(--line)}
.obmember:first-of-type{border-top:0}
.obteam>.btn{margin-top:6px}
/* login / new business: two plain tabs above the form (not a second pill switch) */
.seg.authtabs{background:none;padding:0;border-radius:0;border-bottom:1px solid var(--line);gap:0}
.seg.authtabs button{border-radius:0;background:none!important;box-shadow:none!important;font-size:16px;padding:10px 4px;border-bottom:2.5px solid transparent;margin-bottom:-1px;color:var(--ink-3)}
.seg.authtabs button[aria-pressed="true"]{border-bottom-color:var(--primary);color:var(--ink);font-weight:700}

/* team member photo (editor + list) */
.mphoto-row{display:flex;align-items:center;gap:14px}
.mphoto img,.mphoto .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-weight:600;font-size:22px}
.mphoto-btns{display:flex;flex-direction:column;gap:6px}
img.avatar{object-fit:cover}
/* partners: whose settings am I editing */
.scopebar{display:flex;flex-direction:column;gap:3px;background:var(--primary-soft,#f3eef6);border:1px solid color-mix(in srgb,var(--primary,#5B2A6E) 25%,#fff);border-radius:14px;padding:11px 14px;margin-bottom:12px;font-size:13.5px}
.scopebar b{font-size:15px}
.scopebar.biz{background:#f6f6f4;border-color:var(--line)}
.scopebar .lnk{align-self:flex-start;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--primary,#5B2A6E);background:none;border:0;padding:0;text-decoration:underline}
.mphoto-pos{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.mphoto-pos input[type=range]{width:100%;accent-color:var(--brand)}
.mphoto-pos small{font-size:11px;color:var(--ink-3)}

/* a studio: a column per person (day view: fills the width; week: scrolls sideways, the hours stay put) */
.wkscroll{overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:thin;overscroll-behavior-x:contain}
.wk.wkst{column-gap:2px}
.wk.wkst .hd{border-inline-end:2px solid var(--line);padding-bottom:4px}
.wk.wkst .mhd{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--c) 80%,var(--ink));background:color-mix(in srgb,var(--c) 14%,var(--bg));border-radius:7px;padding:4px 2px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.wk.wkst .axis{position:sticky;inset-inline-start:0;z-index:4;background:var(--bg)}
.wk.wkst .cnr{position:sticky;inset-inline-start:0;z-index:4;background:var(--bg)}
.wk.wkst .col.dayend{margin-inline-end:4px}
.wk.wkst .blk{font-size:12px}
.dview{display:flex;justify-content:flex-end;margin-top:6px}
.ctag{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:700;color:var(--ok-ink,#1e6b45);background:var(--ok-bg,#e8f4ec);border-radius:999px;padding:1px 7px;vertical-align:middle}

/* team member: which treatments (checked list, grouped like the services screen) */
.svcpick{display:grid;gap:2px;margin-top:6px}
.svcpick-cat{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.03em;margin:10px 2px 2px}
.svcpick-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;min-height:44px}
.svcpick-row.on{border-color:var(--primary);background:var(--tint)}
.svcpick-row input{width:20px;height:20px;accent-color:var(--primary);flex:none;margin:0}
.svcpick-row .grow{flex:1;min-width:0}
.svcpick-bar{display:flex;align-items:center;gap:12px;margin-top:6px}
.svcpick-bar .grow{flex:1}
.linkbtn{background:none;border:0;color:var(--primary);font-weight:600;font-size:14px;padding:6px 2px;cursor:pointer}
/* treatment records per service: "חסר תיעוד", typed record fields, the fields editor */
.nrtag,.alist.xl .nrtag{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:800;color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-radius:99px;padding:1px 7px;vertical-align:1px}
.nrhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.nrhead .nrtag{margin:0}
.blk .nrdot{position:absolute;bottom:3px;inset-inline-end:3px;width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--surface)}
.tabbar button .tdot{position:absolute;top:5px;inset-inline-start:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.nrlist .item{text-align:start}
.nrgo{flex:none;font-size:13px;font-weight:600;color:var(--primary);padding:6px 12px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);border-radius:99px}
.recgrp{font-size:13px;font-weight:700;color:var(--primary);padding:8px 2px 0;border-top:1px solid var(--line);margin-top:4px}
.recgrp:first-child{border-top:0;padding-top:0;margin-top:0}
.prevhint{display:block;margin-top:6px;padding:0;background:none;border:0;font-size:12.5px;color:var(--ink-3);text-align:start;cursor:pointer}
.prevhint b{font-weight:600;color:var(--ink-2,var(--ink));text-decoration:underline dotted;text-underline-offset:3px}
.ferr{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--bad)}
.field.bad .input,.field.bad .recchips button{border-color:var(--bad)}
.recnum{display:flex;align-items:center;gap:8px}
.recnum .input{flex:1;min-width:0}
.recnum .unit{flex:none;font-size:14px;color:var(--ink-3);min-width:2.5em}
.recchips.yn button{min-width:72px;justify-content:center;text-align:center}
.rfcard{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.rfcard .row>.input{flex:1;min-width:0}
.rfcard .rftypes button{padding:6px 10px;font-size:13px}
.rfcard .rfadd .input{flex:1;min-width:0}
.rfcard .chipx .plain{padding:0 2px;font-size:12px;min-height:0}
.rfreq{align-self:flex-start;font-size:13px;padding:5px 11px}
/* treatment record: "חשוב לזכור" (amber), the filled record in the appointment, products taken home, the follow-up */
.rembox{border-inline-start:4px solid var(--warn-ink);padding:10px 12px;margin:0 0 10px;font-size:14px;line-height:1.45}
.rembox>b:first-child{display:block;font-size:13px;letter-spacing:.01em;margin-bottom:2px}
.rembox .remline small{opacity:.75}
p.rembox{margin:2px 0}
.recbox .recread-h{margin-bottom:6px}
.recbox p{margin:3px 0;font-size:14px}
.recfu{display:flex;flex-direction:column;gap:8px}
.recfu .recnum .input{max-width:96px}
.takebox{display:flex;flex-direction:column;gap:8px}
.takelist{display:flex;flex-direction:column;gap:8px}
.takelist:empty{display:none}
.takeitem{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.takeitem .recchips button{padding:6px 10px;font-size:13px}
.takesw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.takesw>.input[type=number]{width:72px;flex:none}
.takesw>select{flex:1;min-width:150px}
.takesw .unit{font-size:14px;color:var(--ink-3)}
.takefound:empty{display:none}
.carelist .careitem{flex-wrap:wrap;gap:8px}
.carelist .careitem .main{flex:1 1 100%;min-width:0}
.careacts{gap:6px;align-items:center;flex:none;margin-inline-start:auto}
.catov{flex-wrap:wrap;gap:8px}
.list .catov .main{flex:1 1 100%}
.catovf{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3)}
.recsvc{margin:4px 0 14px;padding:12px 12px 4px;border:1px solid var(--line);border-radius:14px}
.recsvc-h{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:2px}
.recsvc-f{width:100%;text-align:start;margin:2px 0 8px;padding:10px 0 6px;border-top:1px solid var(--line);border-radius:0;background:none}
.recsvc-f small{display:block;white-space:normal}
.svctools .svcpick-row{min-height:40px;padding:8px 12px}
.svctools .svcpick-row small{color:var(--ink-3);font-size:11.5px;margin-inline-start:auto}
.svctools .svcpick-row.lock{opacity:.75;cursor:default}
.toolsub{margin:0 0 6px;padding-inline-start:14px;border-inline-start:2px solid var(--line)}
.cardmore{display:block;margin:14px auto 0;padding:8px 12px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer}
.svalso{display:inline-flex;flex-wrap:wrap;gap:4px;margin-inline-start:6px;vertical-align:2px}
.svalso span{font-size:11px;font-weight:600;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:0 7px;line-height:17px}
/* onboarding (and the sign-in boxes): each group of fields gets room, so the next title never sits right under the
   previous input on a phone */
.auth .box > .field{margin-bottom:0}
.auth .box > .field + *, .auth .box > .card + *, .auth .box > p.tiny + *{margin-top:24px}
.auth .box > * + .field, .auth .box > * + .card{margin-top:24px}
.auth .box > .steps + *{margin-top:20px}
.auth .box > .field > label{font-size:15px;font-weight:600;color:var(--ink)}
.auth .box > .field + p.tiny{margin-top:8px!important}
.auth .box > .btn.primary.lg{margin-top:28px}
.auth .box > .btn.ghost + .btn, .auth .box > .btn + .btn.ghost{margin-top:8px}
/* "העסק מוכן": two separate choice cards, each obviously tappable (border, arrow), no merging shadows */
.twopts{display:flex;flex-direction:column;gap:12px;margin-top:4px;text-align:start}
.twopt{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line-strong,var(--line));color:var(--ink);box-shadow:none;transition:transform .12s,border-color .15s,background .15s}
.twopt:active{transform:scale(.98)}
.twopt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.twopt .twe{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--surface-2,#f3f1eb)}
.twopt .twt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.twopt .twt b{font-size:16.5px;font-weight:700}
.twopt .twt small{font-size:13px;color:var(--ink-2)}
.twopt .twc{flex:none;font-size:24px;line-height:1;color:var(--ink-3)}
.twopt.main{background:var(--brand);border-color:var(--brand);color:var(--on-brand,#fff)}
.twopt.main .twe{background:color-mix(in srgb,#fff 18%,transparent)}
.twopt.main .twt small,.twopt.main .twc{color:color-mix(in srgb,var(--on-brand,#fff) 82%,transparent)}
.tfoot .tprev{padding-inline:12px;white-space:nowrap;flex:none}
.tfoot .btn{white-space:nowrap}
.tdots{min-width:0;overflow:hidden}
.twopt .twt{text-align:start;align-items:flex-start}
/* the calendar body owns horizontal swipes (day / week / month); the page never pans sideways. The week grid keeps its own
   sideways scroll (wkv), and vertical scrolling stays native */
.calbody{position:relative}
.calbody:not(.wkv){touch-action:pan-y pinch-zoom}
.appmain{overflow-x:clip}
html,body{overscroll-behavior-x:none}
/* "העסק שלי" entry cards: the icon is a fixed 46px circle with the icon centred (".socialentry>span" made it a stretched
   ellipse with the icon at its top) */
.socialentry>.tourico{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;flex-direction:initial;border-radius:50%;line-height:1;text-align:center}
.socialentry>.tourico>svg{display:block}
.socialentry>.tvwrap{flex:0 0 46px}
.socialentry>span:not(.tourico){min-width:0}
/* titles above panels: one rhythm everywhere (a section title sits 22px below the previous panel and 10px above its own) */
.appmain .sec:where(:not(.btn)){margin:22px 4px 10px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.appmain .content > .sec:where(:not(.btn)):first-child,.appmain .shead + .sec:where(:not(.btn)){margin-top:8px}
.appmain :is(h2,h3,.sec,.tipline,summary,.mcal-legend) + :is(.card,.set,.list){margin-top:10px}
.appmain .card + :is(h2,h3,.sec){margin-top:24px}
.appmain details > summary + *{margin-top:12px}
/* treatments: drag handle (finger / mouse / arrow keys) */
.svlist .dragh{flex:none;width:40px;height:44px;margin-inline:-6px 2px;display:grid;place-items:center;color:var(--ink-3);cursor:grab;touch-action:none;border-radius:10px;-webkit-user-select:none;user-select:none}
.svlist .dragh:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.svlist .item{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.svlist .item.dragging{transition:none;position:relative;z-index:3;background:var(--surface);box-shadow:0 12px 30px -10px rgba(0,0,0,.35);border-radius:14px}
body.svdrag{-webkit-user-select:none;user-select:none;cursor:grabbing}
body.svdrag .svlist .item:not(.dragging){pointer-events:none}
/* blocked client (per business): the red chip, the box on the card, the block sheet */
.bchip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);background:var(--bad-soft);color:var(--bad);white-space:nowrap;vertical-align:middle;margin-inline-start:8px;flex:none}
.item .bchip{margin-inline-start:0}
.blkbox{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--bad-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);font-size:14px}
.blkbox .bchip{margin:0}
.blkbox details{margin-top:4px}
.blkbox summary{cursor:pointer;color:var(--ink-2)}
.evbox{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.evrow{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13.5px;border-top:1px solid var(--line)}
.evrow:first-child{border-top:0}
.evrow span{color:var(--ink-2);flex:none}
.evrow b{font-weight:600;text-align:end;min-width:0;overflow-wrap:anywhere}
.evrow b small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:1px}
.bradios{display:flex;flex-direction:column;gap:6px}
.bradio{display:flex;gap:10px;align-items:center;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font-size:15px}
.bradio:has(input:checked){border-color:var(--bad);background:var(--bad-soft)}
.bradio input{width:20px;height:20px;margin:0;accent-color:var(--bad);flex:none}
.bradios + .input{margin-top:8px}
.bfut{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.bfut p{margin:0}
.bfa{padding:8px 0;border-top:1px solid var(--line)}
.bfa .tiny{min-width:0;text-align:end}
.bfa .flag{margin-top:6px}
.bwa{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.bwa input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--brand)}
.bwa small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px;line-height:1.45}
/* address: floor (number or ground) + apartment on one row */
.addr2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.addr2 .field{margin-bottom:14px;min-width:0}
.flrow{display:flex;gap:6px;align-items:stretch}
.flrow .input{flex:1;min-width:0;text-align:center}
.flrow .input:disabled{opacity:1;background:var(--surface-2);color:var(--ink-2)}
.flgnd{flex:none;padding:0 12px;border:1px solid var(--line-strong,var(--line));border-radius:99px;font-size:13.5px;color:var(--ink-2);background:var(--surface);transition:background-color .2s,color .2s,border-color .2s}
.flgnd[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.hint.addrhint{display:block;margin:-6px 0 14px;font-size:13px;color:var(--ink-3)}
.auth .box > .field + .addr2{margin-top:14px}
.auth .addr2 .field > label{font-size:15px;font-weight:600;color:var(--ink)}
.auth .box > .addrhint + .field{margin-top:20px}
.flrow .input:disabled::placeholder{color:var(--ink-2);opacity:1}
/* the grid: the exact range in every block, half-hour hairlines, quiet free windows; the service colours, the dashed pending
   style and dark mode as everywhere */
.wkbar{display:flex;justify-content:flex-end;margin:10px 0 -4px}
.zseg{font-size:12px}.zseg button{padding:4px 10px;min-height:28px}
.wk .blk{display:flex;flex-direction:column;gap:1px;font-size:10.5px;line-height:1.25;padding:3px 5px;container-type:inline-size}
.wk .blk .br{display:flex;flex-wrap:wrap;justify-content:flex-end;font-size:10.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;overflow:hidden;max-height:2.6em}
.wk .blk:has(>.b1){padding-inline:4px 3px}
.wk .blk .b1,.wk.wkst .blk .b1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:10.5px;letter-spacing:-.015em}
.wk .blk .b1 .tab{font-weight:700;color:color-mix(in srgb,var(--c,var(--brand)) 55%,var(--ink))}
.wk .blk.wreq .b1 .tab,.wk .blk.off .b1 .tab{color:inherit}
@container (max-width:84px){.wk .blk .b1 .te,.wk .blk .b1 .bx{display:none}.wk .blk .b1,.wk.wkst .blk .b1{text-overflow:clip;font-size:9.5px}}
.wk .blk .bn{font-weight:600}
.wk .blk.wreq .br{color:inherit}
.wk .blk.off{justify-content:flex-start}.wk .blk.off .br{color:inherit;font-weight:600}
.wk.wkst .blk,.wk.wkst .blk .br{font-size:11px}
.wk .gap{position:absolute;inset-inline:3px;z-index:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:4px;overflow:hidden;border-radius:7px;font-size:10px;line-height:1.3;background:color-mix(in srgb,var(--primary) 4%,transparent);color:var(--ink-3-soft);text-align:center;cursor:pointer}
.wk .gap>*{pointer-events:none;white-space:nowrap}
.wk .col{container-type:inline-size}
/* a narrow column (the week on a phone): the free windows stay tappable but unmarked, the grid stays calm */
@container (max-width:72px){.wk .gap{background:none}.wk .gap>*{display:none}}
.wk .offh.brk{z-index:0}
/* four views in the calendar header (יום / 3 ימים / שבוע / חודש): one line on a 390px phone, the switch drops under the title on a narrower one */
.shead h1{white-space:nowrap}.shead .hrow{flex-wrap:wrap;row-gap:6px}
.seg[aria-label="תצוגה"] button{white-space:nowrap;padding:0 10px}
@media (max-width:400px){.seg[aria-label="תצוגה"] button{padding:0 6px}}

/* onboarding: the free month and the add-ons (p123 notes #9) */
.obtrial{margin-top:14px}
.obtrial h3{margin:0 0 6px;font-size:16px}
.obtrial>.tiny{margin:10px 0 0;line-height:1.55}
.obadd{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.obadd:first-of-type{border-top:0}
.obaddck{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg,#E6F4EA);color:var(--ok-ink,#1E6B3A)}
.obaddck svg{width:15px;height:15px;stroke-width:2.4}
.obaddm{display:flex;flex-direction:column;gap:2px;min-width:0}
.obaddm small{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.obaddp{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
/* round 3: add-on × plan, the price after the trial */
.obptab{margin:12px 0 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:13px}
.obptab>div{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));align-items:center;border-top:1px solid var(--line)}
.obptab>div:first-child{border-top:0}
.obptab span{padding:9px 10px;min-width:0}
.obptab [role=rowheader]{color:var(--ink);font-weight:500;line-height:1.35}
.obptab [role=cell]{text-align:center;color:var(--ink-2);font-weight:600}
.obptab .hd{background:var(--bg)}
.obptab .hd span{font-size:11.5px;font-weight:600;color:var(--ink-3);text-align:center}
.obptab .hd span:first-child{text-align:start}
.obptab .all{background:var(--tint)}
.obptab .all span{color:var(--tint-ink)}
.obtl{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.obtl li{position:relative;padding-inline-start:20px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.obtl li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.obtl li b{color:var(--ink)}
/* ─── round 3: move and swap requests ("עכשיו → מבקש/ת"; a swap explained in plain words) ─── */
.req.rqx{padding:16px 16px 14px}
.rqtop{display:flex;align-items:center;gap:12px;width:100%;font:inherit;color:inherit;text-align:start;background:none;border:0;padding:0;cursor:pointer;min-height:44px}
.rqtop .av{flex:none}
.rqwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rqwho b{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--ink)}
.rqwho b em{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink-3)}
.rqwho b em.new{background:var(--tint);color:var(--tint-ink)}
.rqwho small{font-size:12.5px;color:var(--ink-3)}
.rqflag{color:var(--warn-ink);font-weight:600}
.rqmore{flex:none;display:inline-flex;align-items:center;gap:1px;font-size:12.5px;color:var(--ink-3)}
.rqmore svg{width:14px;height:14px}
.rqpair{display:flex;flex-direction:column;margin:14px 0 10px}
.rqrow{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;padding:12px 14px;border-radius:14px}
.rqrow.now{background:var(--bg);border:1px dashed var(--line-strong);color:var(--ink-3);padding-block:10px}
.rqrow.now b{font-size:15px;font-weight:500;color:var(--ink-2)}
.rqrow.to{background:var(--tint);color:var(--tint-ink)}
.rqrow.to b{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--tint-ink)}
.rql{font-size:12px;font-weight:600}
.rqarr{position:relative;z-index:1;width:26px;height:26px;margin:-7px 0;margin-inline-start:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--primary)}
.rqsv{font-size:13px;color:var(--ink-2);line-height:1.5}
.rqfit{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600}
.rqfit svg{width:15px;height:15px;flex:none;stroke-width:2.4}
.rqfit.ok{color:var(--ok-ink)}.rqfit.warn{color:var(--warn-ink)}.rqfit.bad{color:var(--bad)}
.rqacts{display:flex;gap:8px;align-items:center;margin-top:14px}
.rqacts .btn{height:50px;min-height:50px;margin:0;font-size:15px;white-space:nowrap;padding:0 16px}
.rqacts .rqok{flex:1 1 auto;gap:6px}
.rqacts .rqok svg{width:18px;height:18px;stroke-width:2.4}
.rqacts .btn.sec{flex:0 0 auto}
.rqwa{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok-ink);text-decoration:none;transition:transform var(--dur-fast) var(--ease)}
.rqwa:active{transform:scale(.94)}
.rqwa svg{width:22px;height:22px}
.rqsheet{margin:0 0 14px}
.rqsheet .rqpair{margin:0}
.swapgrp .sec:where(:not(.btn)){margin-top:4px}
.swtitle{margin:14px 0 4px;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.swwhen{display:flex;flex-direction:column;gap:1px;margin-bottom:2px}
.swwhen b{font-size:14px;font-weight:600;color:var(--ink-2)}
.swx{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.swwhat{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.swstate{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--tint);color:var(--tint-ink)}
.swstate>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.swstate b{font-size:14px;font-weight:700}
.swstate small{font-size:12.5px;line-height:1.5;opacity:.9}
.swpulse{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent);animation:swpulse 1.8s var(--ease) infinite}
@keyframes swpulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.swpulse{animation:none}}
.swpref{font-size:13.5px;color:var(--ink-2)}
.swpref b{color:var(--ink);font-weight:600}
.swopts{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:2px}
.swopt{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.swopt:last-child{border-bottom:0;padding-bottom:0}
.swopt>b{font-size:14.5px;font-weight:600;color:var(--ink)}
.swopt small{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.swopt .swkeep{margin-top:8px;height:46px;min-height:46px}
.swchips{display:flex;gap:8px;margin-top:8px}
.swchip{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:transform var(--dur-fast) var(--ease),border-color var(--dur)}
.swchip small{font-size:11.5px;color:var(--ink-3)}
.swchip b{font-size:17px;font-weight:700}
.swchip:active{transform:scale(.96);border-color:var(--primary)}
.swchip.busy{opacity:.5}
.swtalk{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.swtalk>span{display:flex;flex-direction:column;gap:2px}
.swtalk b{font-size:14.5px;font-weight:600}
.swtalk .rqwa{width:46px;height:46px}
.swsheet .swtitle{margin-top:0}
.edgate .editor-start,.edgate .editor-start~*:not(.cvtail){display:none!important}
.edgate .cvedit{margin-top:16px;gap:8px}
.edgate .cvtail{margin-top:12px!important}
.cvappt>.stack:empty,.edgate>.stack:empty{display:none}
.cvappt>.stack:empty+.cvedit,.edgate>.stack:empty+.cvedit{margin-top:4px}

/* round E: compact move / swap request cards (the full window opens from the name or the times) */
.req.rqc{padding:12px 14px}
.rqc .rqline{display:flex;align-items:center;gap:10px;margin-top:10px;width:100%}
.rqc .rqmv{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:44px;padding:0;background:none;border:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.rqc .rqfrom{color:var(--ink-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.rqc .rqmv b{font-size:16px}
.rqc .rqto-ar{display:inline-flex;color:var(--ink-3)}
.rqfitc{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:18px}
.rqfitc svg{width:13px;height:13px;stroke-width:2.6}
.rqfitc.ok{color:var(--ok-ink);background:color-mix(in srgb,var(--ok-ink) 12%,transparent)}.rqfitc.warn{color:var(--warn-ink);background:color-mix(in srgb,var(--warn-ink) 12%,transparent)}.rqfitc.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.rqc .cvracts{display:flex;gap:8px;flex:none;align-items:center}
.rqc .cvracts button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0}
.rqc .cvracts .cvok{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.rqc .cvracts svg{width:20px;height:20px}
.rqc .rqsw{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;min-height:44px;padding:0;background:none;border:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.rqc .rqsw b{font-size:16px;grid-row:1/3}
.rqc .rqswst{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.rqc .rqswif{font-size:12px;color:var(--ink-3)}
.rqsheet .rqfit{margin-top:10px}
.rqswst .swpulse{margin-top:0}
.btn.cvedit,.sheet .btn.cvedit{margin-top:16px!important}
.stack:empty+.btn.cvedit{margin-top:4px!important}

/* ═══ p123: the owner's layout choices (was the review's option B: the appointment sheet, the requests, the clients list, the
   client card and the plan screen). The day calendar, העסק שלי and the team screen keep the layout above. ═══ */
/* ─── חלון תור: the time as the headline, four round quick actions, the editor behind one button ─── */
.cvappt .ask{padding:4px 2px 0;background:none;border:0}
.cvappt .cvwhen{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.cvappt .cvwhen b{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;align-self:flex-start}
.cvappt .cvwhen span{font-size:14px;color:var(--ink-2)}
.cvq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0 4px}
.cvq>a,.cvq>button{display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:12.5px;color:var(--ink-2);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;min-height:44px}
.cvq i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--tint-ink);font-style:normal;transition:transform var(--dur-fast) var(--ease)}
.cvq>:first-child i{background:var(--primary);color:var(--on-primary)}
.cvq>:active i{transform:scale(.94)}
.cvq i svg{width:22px;height:22px}
.cvq i>span{display:grid;place-items:center}
.cvappt .cvedit{margin-top:16px;gap:8px}
/* round 3 (note: equal space above and below "שינוי מועד, טיפולים או הערה" while the editor is closed) */
.cvappt:not(.edopen) .cvtail{margin-top:12px!important}
.cvappt .cvedit svg{width:18px;height:18px}
.cvappt:not(.edopen) .editor-start,.cvappt:not(.edopen) .editor-start~*:not(.cvtail){display:none!important}

/* ─── בקשות: under the requested day, one row each, approve / decline as round buttons ─── */
.cvday{margin:0 0 18px}
.cvdh{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 8px}
.cvdh b{font-size:15px;font-weight:700;color:var(--ink)}
.cvdh span{font-size:12.5px;color:var(--ink-3)}
.cvreqs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.req.cvreq{display:flex;align-items:center;gap:8px;margin:0;padding:12px 12px 12px 10px;border:0;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid var(--line)}
.req.cvreq:last-child{border-bottom:0}
/* a move request sits in the same day list as the plain ones, so it is a row of that list too */
.cvreqs>.req.rqc{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid var(--line);padding:12px 12px 12px 10px}
.cvreqs>.req:last-child{border-bottom:0}
.cvrmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;font:inherit;color:inherit;text-align:start;background:none;border:0;padding:0;cursor:pointer}
.cvrt{flex:none;width:58px;display:flex;flex-direction:column;align-items:flex-start;font-size:21px;font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.cvrt small{font-size:11.5px;font-weight:500;color:var(--ink-3)}
/* p127: a row that outlived its day heading (the last of a merged card) says which day it is on */
.cvrt .cvrd{font-size:11px;font-weight:600;color:var(--tint-ink);letter-spacing:.01em}
.cvrw{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-start:12px;border-inline-start:2px solid var(--tint-2)}
.cvrw b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cvrw b em{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink-3)}
.cvrw b em.new{background:var(--tint);color:var(--tint-ink)}
.cvrw small{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvrw .cvrmv{color:var(--ink-3);text-decoration:line-through}
.cvrw .cvrflag{display:flex;align-items:center;gap:4px;color:var(--warn-ink)}
.cvrw .cvrflag svg{width:13px;height:13px}
.cvracts{display:flex;gap:8px;flex:none}
.cvracts button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:transform var(--dur-fast) var(--ease)}
.cvracts button:active{transform:scale(.92)}
.cvracts .cvok{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.cvracts svg{width:20px;height:20px}
.cvracts span{display:grid;place-items:center}

/* p127: one card for a client who has more than one request waiting. It reuses .req (so the confirmation overlays and
   the collapse-on-leave come for free) and .cvracts (the same 44px round approve / decline). What is new is only the
   header that names how many appointments it holds, and the per-row overlay: .req .done is absolute, so each row has
   to be a positioned box of its own or the confirmation would cover the whole card. */
.cvmulti{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
.cvmulti + .req,.req + .cvmulti{border-top:1px solid var(--line)}
.cvmh{padding:12px 12px 10px}
.cvmh b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cvmh b em{font-style:normal;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink-3)}
.cvmh b em.new{background:var(--tint);color:var(--tint-ink)}
.cvmh small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvmh small.cvrflag{display:flex;align-items:center;gap:4px;color:var(--warn-ink);white-space:normal}
.cvmh small.cvrflag svg{width:13px;height:13px}
.cvmrow{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;padding:10px 12px 10px 10px;border-top:1px solid var(--line)}
/* the row is 44px tall, but the tap target is the button inside it, so the button is what has to fill it */
.cvmd{flex:1;min-width:0;align-self:stretch;min-height:44px;display:flex;align-items:center;gap:12px;font:inherit;color:inherit;text-align:start;background:none;border:0;padding:0;cursor:pointer}
.cvmd .cvrt{font-size:19px}
.cvmw{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-start:12px;border-inline-start:2px solid var(--tint-2)}
.cvmw b{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* three 44px controls leave the text column narrow, and "3 שבועות אחרי" was being cut to "3 שבעות א…".
   A second line costs nothing here and clipped text is a bug. */
.cvmw small{font-size:12.5px;color:var(--ink-2);white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.cvmrow.ok .done:not(.rej),.cvmrow.rej .done.rej{opacity:1}
.cvmrow.rej .done.rej svg .slash{animation:strike 340ms 140ms linear forwards}
/* one primary action and nothing beside it: the calendar peek lives on each row, where it has a single day to open */
.cvmall{padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--bg)}
.cvmall .btn.block{margin:0}
/* p127: an appointment answered while she is still on the screen. The row keeps its height and its place; only the
   controls give way to a tag, so nothing below it moves. */
.cvmh b em.settled{background:var(--ok-bg);color:var(--ok-ink)}
.cvmh b em.settled.no{background:var(--off-bg);color:var(--off-ink)}
.cvmrow.wasok{background:var(--ok-bg)}
.cvmrow.wasno{background:var(--off-bg)}
.cvmrow.wasok .cvrt,.cvmrow.wasok .cvmw b{color:var(--ok-ink)}
.cvmrow.wasno .cvrt,.cvmrow.wasno .cvmw b{color:var(--off-ink)}
.cvmrow.wasok .cvmw{border-inline-start-color:color-mix(in srgb,var(--ok-ink) 30%,transparent)}
.cvmrow.wasno .cvmw{border-inline-start-color:color-mix(in srgb,var(--off-ink) 30%,transparent)}
.cvmrow.wasok .cvmw small{color:color-mix(in srgb,var(--ok-ink) 72%,transparent)}
.cvmrow.wasno .cvmw small{color:color-mix(in srgb,var(--off-ink) 72%,transparent)}
.cvmtag{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:0 12px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok-ink);white-space:nowrap}
.cvmtag.no{background:var(--off-bg);color:var(--off-ink)}
.cvmtag svg{width:15px;height:15px;stroke-width:2.4}
.cvmtag .slash{stroke-dasharray:none;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.cvmrow.rej .done.rej svg .slash{animation:none;stroke-dashoffset:0}}

/* ─── לקוחות: the faces of who is coming, then the list under letters, no circles ─── */
.cvrail2{margin:14px 0 4px}
.cvrail2 .sec:where(:not(.btn)){margin:0 4px 8px}
.cvfaces{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 4px 8px;margin:0 -4px;scrollbar-width:none}
.cvfaces::-webkit-scrollbar{display:none}
.cvfaces button{flex:none;width:70px;display:flex;flex-direction:column;align-items:center;gap:3px;font:inherit;background:none;border:0;padding:0;cursor:pointer;scroll-snap-align:start;color:var(--ink)}
.cvfaces .av{width:56px;height:56px;font-size:18px;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--tint-2)}
.cvfaces b{font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvfaces small{font-size:11.5px;color:var(--ink-3)}
.cvclist{margin-top:6px}
.cvlh{position:sticky;top:0;z-index:1;font-size:13px;font-weight:700;color:var(--primary);padding:10px 6px 4px;background:var(--bg)}
.cvlet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cvcrow{display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;font:inherit;color:inherit;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.cvcrow:last-child{border-bottom:0}
.cvcrow:active{background:var(--bg)}
.cvcrow .c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cvcrow .c b{font-size:16px;font-weight:600}
.cvcrow .c small{font-size:12.5px;color:var(--ink-3)}
.cvnx{flex:none;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--tint);color:var(--tint-ink)}

/* ─── כרטיס לקוח/ה: a centred profile, round actions, the numbers as three tiles ─── */
.cvprof{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 2px}
.cvprof .cvav{width:88px;height:88px;font-size:30px;font-weight:600;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--tint-2)}
.cvprof h2{margin:14px 0 2px;font-size:24px;font-weight:700;display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.cvprof>.tiny{direction:ltr;unicode-bidi:plaintext}
.cvprof .cvq{width:100%;margin:18px 0 0}
.cvprof .cvbook{margin-top:16px;margin-bottom:6px;gap:8px}
.cvprof .stats{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.cvprof .stats span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);font-size:12px;color:var(--ink-3)}
.cvprof .stats span:nth-child(n+4){grid-column:1/-1}
.cvprof .stats b{font-size:18px;font-weight:700;color:var(--ink)}
.cvprof>div:last-child,.cvprof .flag,.cvprof .okbox{width:100%;text-align:start}

/* ─── המנוי שלי: one large figure, the add-ons as tiles, the plans side by side ─── */
.cvplanhero{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 18px 18px;border-radius:var(--r-lg);color:var(--on-primary);background:linear-gradient(140deg,color-mix(in srgb,var(--primary) 82%,#000),var(--primary));overflow:hidden}
.cvplanhero .k{font-size:13px;opacity:.85}
.cvplanhero b{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cvplanhero small{font-size:14px;opacity:.9}
.cvplanhero .bar{display:block;height:6px;margin-top:14px;border-radius:9px;background:color-mix(in srgb,var(--on-primary) 25%,transparent);overflow:hidden}
.cvplanhero .bar i{display:block;height:100%;border-radius:9px;background:var(--on-primary)}
.cvplan .addcard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cvplan .addcard>.mhead,.cvplan .addcard>p,.cvplan .addcard>.addall{grid-column:1/-1}
.cvplan .addcard .addrow{flex-direction:column;align-items:stretch;gap:10px;padding:12px;margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.cvplan .addcard .addrow .btn{width:100%}
.cvplan .addcard .addrow.on{border-color:var(--primary)}
.cvplan .plans3{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 10px;scrollbar-width:none}
.cvplan .plans3::-webkit-scrollbar{display:none}
.cvplan .plans3>.card{flex:0 0 78%;scroll-snap-align:center;margin:0}

/* ═══ p123 final: one spacing and alignment rhythm everywhere (Michael: "לא חוסר רווחים ולא חוסר יישור") ═══ */
/* the end of a page: the main area already keeps room for the tab bar and the floating buttons (168px) */
.appmain>.content{padding-bottom:16px}
/* form controls: one height, one surface; a time field looks like the inputs next to it */
.field input.input:not([type=checkbox]):not([type=radio]),.field select.input,.grid-2 input.input{height:46px;min-height:46px}
.field .tfield{min-height:46px;background:var(--bg);border-color:var(--line);border-radius:var(--r-md)}
/* two fields side by side: labels, controls and the hints under them share rows (a hint under one never pushes the other) */
.grid-2:has(>.field>.hint):not(:has(>:not(.field))){grid-template-rows:auto auto auto;align-items:start;row-gap:0}
.grid-2:has(>.field>.hint):not(:has(>:not(.field)))>.field{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px;align-content:start}
.grid-2:has(>.field>.hint):not(:has(>:not(.field)))>.field>label{align-self:end}
/* a warning, a note or a confirmation above a button: room between them */
:is(.flag,.notice,.okbox,.spwarn,.rqfit,.warnbox)+.btn{margin-top:12px}
/* helper lines under a box or a control */
:is(.aububble,.flag,.notice,.okbox,.swstate,.chips)+:is(p.tiny,div.tiny,small.tiny){margin-top:8px}
/* a heading row (title + buttons) above a search or an input */
.card>.row+:is(.input,input,.sbox,.field){margin-top:12px}
/* the requests: rows inside one rounded box are straight (the card radius of a single request does not reach them) */
.cvreqs .req.cvreq{border-radius:0}

/* p124: the store apps (shared/native.js sets html.rtapp). The page starts under the status bar, as in the installed web app
   (iPhone "default" status bar): the bar's strip is painted with the page colour and sticky headers stop under it. */
html.rtapp body{padding-top:env(safe-area-inset-top)}
html.rtapp body::before{content:"";position:fixed;top:0;inset-inline:0;height:env(safe-area-inset-top);background:var(--bg);z-index:45;pointer-events:none}
html.rtapp .topbar{top:env(safe-area-inset-top);padding-top:0}
html.rtapp .sheet{max-height:calc(92dvh - env(safe-area-inset-top))}
/* Face ID / fingerprint lock: nothing of the app shows until it opens */
html.rtlocked #app,html.rtlocked .sheet-bg,html.rtlocked .aifab,html.rtlocked .fab{visibility:hidden}
.rtlock{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--bg);padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.rtlockbox{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(340px,100%);text-align:center}
.rtlockbox img{border-radius:18px;margin-bottom:6px}
.rtlockbox b{font-size:20px;color:var(--ink)}
.rtlockbox span{color:color-mix(in srgb,var(--ink) 62%,transparent);margin-bottom:10px}
.delsheet p{line-height:1.6}

/* p124 client feedback: "תראה לי ביומן", the requested day in a popup (dayPeek) */
.peekbtn{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.peekbtn svg{width:18px;height:18px}
.cvracts .cvpeek{background:var(--tint);border-color:transparent;color:var(--tint-ink)}
.peekfit{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-md);font-weight:600;margin-bottom:10px;font-size:15px}
.peekfit svg{width:18px;height:18px;flex:none}
.peekfit.ok{background:var(--ok-bg);color:var(--ok-ink)}
.peekfit.warn{background:var(--warn-bg);color:var(--warn-ink)}
.peekfit.bad{background:var(--bad-soft);color:var(--bad)}
.peekwrap{max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overscroll-behavior:contain}
.peekgrid{position:relative;margin:12px 8px 12px 0;margin-inline-start:52px;margin-inline-end:8px}
.peekhr{position:absolute;inset-inline:-52px 0;height:0;border-top:1px solid var(--line)}
.peekhr span{position:absolute;inset-inline-start:6px;top:-9px;font-size:12px;color:var(--ink-3);background:var(--surface);padding-inline:2px}
.peekoff{position:absolute;inset-inline:0;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--ink-3-soft) 14%,transparent) 6px 7px);pointer-events:none}
.peekap,.peekbl,.peekbr,.peekreq{position:absolute;inset-inline:4px;border-radius:var(--r-sm);padding:3px 8px;overflow:hidden;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.25}
.peekap{background:color-mix(in srgb,var(--c,var(--primary)) 16%,var(--surface));border-inline-start:3px solid var(--c,var(--primary));color:var(--ink)}
.peekap.pend{border-inline-start-style:dashed}
.peekap.mine{opacity:.65}
.peekbl{background:color-mix(in srgb,var(--ink-3-soft) 18%,var(--surface));color:var(--ink-2)}
.peekbr{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink-3-soft) 10%,var(--surface)) 0 6px,var(--surface) 6px 12px);color:var(--ink-3);border:1px dashed var(--line-strong)}
.peekreq{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent),0 6px 16px -6px color-mix(in srgb,var(--primary) 60%,transparent);z-index:2;animation:peekglow 1.6s var(--ease) 2}
.peekap.half,.peekbl.half,.peekbr.half{inset-inline-end:50%}
.peekreq.half{inset-inline-start:50%}
.peekap small,.peekbl small,.peekbr small,.peekreq small{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peekap b,.peekreq b,.peekbl b,.peekbr b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes peekglow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 22%,transparent),0 6px 16px -6px color-mix(in srgb,var(--primary) 60%,transparent)}}
@media (prefers-reduced-motion:reduce){.peekreq{animation:none}}

/* ═══ p125: the form a client filled, seen from her appointment (the request card and the appointment sheet) ═══ */
.req .apptforms{margin-top:8px}
.formbtn{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;text-align:start}
.formbtn small{margin-inline-start:auto;color:var(--ink-3);font-size:12px;font-weight:500;white-space:nowrap}
.apptforms .item small{color:var(--ink-3)}
.req.cvreq{flex-wrap:wrap}
.req.cvreq>.apptforms{flex:0 0 100%;margin:8px 0 0}
.req.cvreq .formbtn{padding:6px 12px}
.req.cvreq>.apptforms .formbtn{margin:0}
/* inside the appointment sheet: one 12px gap above and below (the .ask already carries 12px under it), and a tight list */
.card.apptforms{margin:0 0 12px;padding:12px 14px}
.card.apptforms>h3{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink-2)}
.card.apptforms .list .item{padding:9px 0;min-height:0}
.card.apptforms .list .item:first-of-type{padding-top:2px}
.card.apptforms .list .item:last-of-type{padding-bottom:2px}

/* the two destructive actions at the foot of a client card: blocking can be undone, deleting takes the
   treatment file, the declarations and the notes with it. They should not look identical. */
/* a paragraph you are meant to read is not meta-data: --ink-3 is for a date stamp, not for three lines of text */
.explain{font-size:13px;line-height:1.55;color:var(--ink-2)}
.cliend{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.cliend .btn{margin:0}
.cliend .btn.blockc{color:var(--ink-2)}
.cliend .btn.delc{color:var(--bad-ink)}
.cliend .btn svg,.cliend .btn .i{width:18px;height:18px}

/* ═══ p125: choosing the treatments of an appointment (svcPicker) ═══ */
/* the field in the appointment sheet: one row that says what is chosen, and the chosen treatments as chips under it */
.svcfield{display:flex;flex-direction:column;gap:8px}
/* .svcbtn, not .svcpick: .svcpick is already the stacked list of checkable treatments (line ~914, used by the
   team member editor and the treatment sheet). Two rules of the same specificity under one name meant this one
   won everywhere and laid those lists out as a single 44px bordered row. */
.svcbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:var(--tap,44px);padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-s,12px);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;text-align:start;cursor:pointer}
.svcbtn .svcsum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcbtn .svcsum.nosvc{color:var(--ink-3);font-weight:500}
.svcbtn .svcpk{flex:none;color:var(--primary);font-weight:700}
.svcchips{display:flex;flex-wrap:wrap;gap:6px}
.svcchip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:99px;background:var(--tint);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.svcchip svg{width:14px;height:14px;color:var(--ink-3)}
.svcchip .color-dot{width:8px;height:8px}
/* the picker sheet: a sticky search and categories on top, a sticky total at the bottom */
.svcpick-body{display:flex;flex-direction:column;min-height:58vh}
.svchead{position:sticky;top:0;z-index:2;background:var(--surface);padding:2px 0 10px;display:flex;flex-direction:column;gap:8px}
/* p125: how much of the gap is left, and which treatments no longer fit it */
.svcfit{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:11px;font-size:13px;font-weight:600;background:var(--ok-bg);color:var(--ok-ink)}
.svcfit.over{background:var(--warn-bg);color:var(--warn-ink)}
.svcfit .i,.svcfit svg{width:16px;height:16px;flex:none}
.svcpick-body .svc.toolong{opacity:.55}
.svcpick-body .svc.toolong .color-dot{opacity:.6}
.svcover{font-style:normal;font-weight:600}
.svccats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.svccats::-webkit-scrollbar{display:none}
.svccats .chip{flex:none}
.svcpl{flex:1}
.svcath{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--ink-2)}
.svcath:first-child{margin-top:2px}
.svcpls{display:flex;flex-direction:column;gap:8px}
.svcpick-body .svc{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s,background-color .2s}
.svcpick-body .svc[aria-pressed="true"]{border-color:var(--primary);background:var(--tint)}
.svcpick-body .svc .tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.svcpick-body .svc .tick svg{width:14px;height:14px}
.svcpick-body .svc[aria-pressed="true"] .tick{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.svcpick-body .svc .color-dot{flex:none}
.svcpick-body .svc .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svcpick-body .svc .tx b{font-size:15px;font-weight:650;line-height:1.25}
.svcpick-body .svc .tx small{font-size:12.5px;color:var(--ink-3)}
.svcpick-body .svc .p{flex:none;font-weight:700;font-size:14px}
.svcadds{margin:2px 0 2px 0;padding:8px 10px 10px;border-inline-start:2px solid var(--line);margin-inline-start:14px;display:flex;flex-direction:column;gap:6px}
.svcadds .addh{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.svcpick-body .svc.add{padding:9px 10px;border-radius:13px}
.svcpick-body .svc.add .tx b{font-size:14px;font-weight:600}
.svcbar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 0 2px;background:var(--surface);border-top:1px solid var(--line)}
.svcbt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svcbt b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcbt small{font-size:12.5px;color:var(--ink-3)}
.svcbar .btn{flex:none;min-width:104px}

/* "פניות בווטסאפ" (p126): the link to share and the rows of people who wrote before they booked */
.ldcard>b{display:block;font-weight:600}
.ldcard>.tiny{margin:4px 0 12px}
.ldlist .item .main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldlist .lsel{width:auto;height:36px;font-size:13px;padding:0 8px;flex:none}
.ldload{display:flex;flex-direction:column;gap:8px}