/* =====================================================================
   Angom admin · Ledger kit components
   Port of the Ledger demo kit (D:\Angom\demos\ledger-admin\src\kit.css,
   docs/design-tokens.md §4.11). Reads tokens.css variables only, and
   uses logical properties so dir="rtl" on <html> mirrors everything.
   Per-element inputs set inline by components (not tokens): --to and --i
   (odometer strips); --dirx is local to the drawer.
   ===================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-body)/var(--lh-body) var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ar) body,[dir="rtl"] body{font-family:var(--f-ar)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--red-t)}
:focus-visible{outline:var(--focus-w) solid var(--red-t);outline-offset:var(--focus-w);border-radius:var(--r-focus)}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
svg.i{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
svg.i.i16{width:var(--icon-sm);height:var(--icon-sm)}
svg.i.i14{width:var(--icon-xs);height:var(--icon-xs)}
svg.i.i12{width:var(--icon-sort);height:var(--icon-sort)}

/* ---------- buttons, chips, segmented, fields, search ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);min-height:var(--btn-h);padding:0 var(--sp-7);border-radius:var(--r-s);border:1px solid transparent;background:var(--red);color:var(--on-red);font-weight:600;font-size:var(--fs-ui);white-space:nowrap;text-decoration:none;transition:filter var(--dur-filter),transform var(--dur-press)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.gray{background:var(--fill);color:var(--ink)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost{background:transparent;color:var(--red-t);padding:0 var(--sp-4)}
.btn.sm{min-height:var(--btn-h-sm);padding:0 var(--sp-5);font-size:var(--fs-sm);border-radius:var(--r-8)}
.btn.icon{width:var(--btn-h);padding:0}
.btn.ctl{min-height:var(--hdr-ctl-h)}
.chips{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);padding:0 var(--sp-6);min-height:var(--chip-h);font-size:var(--fs-sm);font-weight:500;display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--ink-2)}
.chip:hover{background:var(--hover)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip b{font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}
.seg{display:inline-flex;background:var(--fill);border-radius:var(--r-s);padding:var(--sp-1);gap:var(--sp-1)}
.seg button{border:none;background:none;border-radius:var(--r-8);padding:0 var(--sp-6);min-height:var(--seg-h);font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-seg)}
.seg.block{display:flex}
.seg.block button{flex:1}
.field{display:grid;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.field input,.field select,.field textarea,.input{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);min-height:var(--field-h);padding:0 var(--sp-6);font-size:var(--fs-ui);color:var(--ink);width:100%}
.field textarea{padding:var(--sp-5) var(--sp-6);min-height:var(--textarea-h);resize:vertical;line-height:var(--lh-body)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:var(--focus-w) solid var(--red-t);outline-offset:-1px;border-color:transparent}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.input[aria-invalid="true"]{border-color:var(--crit-t);outline:var(--focus-w) solid var(--crit-soft)}
.ferr{color:var(--crit-t);font-size:var(--fs-xs);font-weight:600}
.fgrid{display:grid;gap:var(--sp-5)}
.fgrid.c2{grid-template-columns:1fr 1fr}
.fgrid.c3{grid-template-columns:1fr 1fr 1fr}
.search{display:flex;align-items:center;gap:var(--sp-4);border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);padding:0 var(--sp-5);min-height:var(--search-h);color:var(--muted);min-width:0}
.search svg.i{width:var(--icon-sm);height:var(--icon-sm)}
.search input{border:none;background:none;outline:none;min-width:0;width:100%;font-size:var(--fs-ui);color:var(--ink)}
.search:focus-within{outline:var(--focus-w) solid var(--red-t);outline-offset:-1px;border-color:transparent}

/* ---------- badges: tone + icon + label, never colour alone ---------- */
.st{display:inline-flex;align-items:center;gap:var(--badge-gap);border-radius:var(--r-pill);padding-block:var(--sp-1);padding-inline:var(--badge-pad-start) var(--badge-pad-end);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;line-height:var(--lh-badge)}
.st svg{width:var(--icon-badge);height:var(--icon-badge);fill:none;stroke:currentColor;stroke-width:var(--badge-stroke);stroke-linecap:round;stroke-linejoin:round}
.st.good{background:var(--good-soft);color:var(--good-t)}
.st.warn{background:var(--warn-soft);color:var(--warn-t)}
.st.crit{background:var(--crit-soft);color:var(--crit-t)}
.st.info{background:var(--info-soft);color:var(--info-t)}
.st.none{background:transparent;color:var(--muted);border:1px dashed var(--line-2)}
.stline{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ---------- cards, page head, toolbar, key-value ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card > .hd{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-7) var(--sp-8) 0;min-height:var(--card-hd-h)}
.card > .hd h3{margin:0;font-size:var(--fs-h3);font-weight:600}
.card > .hd .sp{flex:1}
.card > .bd{padding:var(--sp-7) var(--sp-8) var(--sp-8)}
.phead{display:flex;align-items:flex-end;gap:var(--sp-8);flex-wrap:wrap;margin:0 0 var(--sp-9)}
.phead h1{margin:0;font:600 var(--fs-h1)/var(--lh-h1) var(--f-disp);letter-spacing:var(--ls-h1)}
:lang(ar) .phead h1{font-family:var(--f-ar);font-weight:700;letter-spacing:0}
.phead h1:focus{outline:none}
.phead p{margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--fs-ui)}
.phead .sp{flex:1}
.phead .acts{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.toolbar .search{flex:1 1 var(--search-min);max-width:var(--search-max)}
.toolbar .sp{flex:1}
.kv{display:grid;grid-template-columns:var(--kv-key) 1fr;gap:var(--sp-4) var(--sp-7);margin:0;font-size:var(--fs-ui)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.kv dt.strong{color:var(--ink);font-weight:600}
.kv dd.strong{font-weight:700}
.kv dd.due{color:var(--warn-t);font-weight:600}
[dir="rtl"] .kv dd.ltr{text-align:right}
.note{margin:0;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-s);background:var(--fill);color:var(--ink-2);font-size:var(--fs-row)}
.note.crit{background:var(--crit-soft);color:var(--crit-t);font-weight:600}
.linkbtn{all:unset;cursor:pointer;color:var(--red-t);font-weight:600;text-decoration:underline;text-underline-offset:var(--sp-1)}
.linkbtn:focus-visible{outline:var(--focus-w) solid var(--red-t);border-radius:var(--r-bar)}
.rowbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);width:100%;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.rowbtn:hover{background:var(--hover)}
.rowbtn:focus-visible{outline:var(--focus-w) solid var(--red-t);border-radius:var(--r-focus)}
.rowbtn small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)} /* .rowbtn layout for rows that open nothing */
.av{width:var(--avatar);height:var(--avatar);border-radius:50%;display:grid;place-items:center;font-size:var(--fs-th);font-weight:700;background:var(--fill);color:var(--ink-2);flex:none}
.empty{padding:var(--sp-13);text-align:center;color:var(--muted)}

/* ---------- table ---------- */
.tblwrap{contain:inline-size;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.tbl th{position:sticky;top:0;background:var(--surface-2);text-align:start;font-size:var(--fs-th);font-weight:600;color:var(--muted);letter-spacing:var(--ls-th);padding:0 var(--sp-6);height:var(--th-h);border-bottom:1px solid var(--line);white-space:nowrap;z-index:var(--z-th)}
:lang(ar) .tbl th{letter-spacing:0}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;gap:var(--sp-2);align-items:center}
.tbl th button:focus-visible{outline:var(--focus-w) solid var(--red-t);border-radius:var(--r-bar)}
.tbl th[aria-sort="none"] button svg{opacity:.35}
.tbl th[aria-sort="ascending"] button svg{transform:rotate(180deg)}
.tbl td{padding:0 var(--sp-6);height:var(--td-h);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr.rowlink{cursor:pointer}
.tbl tbody tr.rowlink:hover{background:var(--hover)}
.tbl tbody tr.rowlink:focus-visible{outline:var(--focus-w) solid var(--red-t);outline-offset:-2px;border-radius:0}
.tbl td.r,.tbl th.r{text-align:end}
.tbl .who{display:flex;align-items:center;gap:var(--sp-5)}
.tbl small{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-tight)}
[dir="rtl"] .tbl small.ltr{text-align:right}

/* ---------- drawer (side sheet), D-61 shadow mirrored in RTL ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-scrim);z-index:var(--z-scrim)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:var(--drawer-w);background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-drawer);z-index:var(--z-drawer);display:flex;flex-direction:column;transform:translateX(calc(var(--dirx,1) * 105%));transition:transform var(--dur-drawer) var(--ease),visibility 0s linear var(--dur-drawer);visibility:hidden}
[dir="rtl"] .drawer{--dirx:-1;box-shadow:var(--shadow-drawer-rtl)}
.drawer.on{transform:none;visibility:visible;transition:transform var(--dur-drawer) var(--ease)}
.drawer .dh{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-8) var(--sp-9);border-bottom:1px solid var(--line)}
.drawer .dh h2{margin:0;font-size:var(--fs-h2);font-weight:600;flex:1;min-width:0}
.drawer .db{flex:1;overflow:auto;padding:var(--sp-9);display:grid;gap:var(--sp-9);align-content:start}
.drawer .df{display:flex;gap:var(--sp-4);padding:var(--sp-7) var(--sp-9);border-top:1px solid var(--line);flex-wrap:wrap}
.drawer .df .btn{flex:1 1 var(--drawer-btn-basis)}
.drawer form{display:contents}
.dhead{display:flex;gap:var(--sp-7);align-items:center}
.dhead.wrap{gap:var(--sp-8);flex-wrap:wrap}
.dhead .t{font-weight:600}
.dhead .s{margin-top:var(--sp-3)}
.sect h4{margin:0 0 var(--sp-4);font-size:var(--fs-th);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);font-weight:600}
:lang(ar) .sect h4{letter-spacing:0}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:var(--toast-bottom);left:50%;translate:-50% var(--toast-rise);background:var(--ink);color:var(--bg);padding:var(--sp-5) var(--sp-8);border-radius:var(--r-12);font-size:var(--fs-ui);font-weight:500;opacity:0;transition:opacity var(--dur-toast),translate var(--dur-toast);z-index:var(--z-toast);pointer-events:none;display:flex;gap:var(--sp-4);align-items:center;max-width:calc(100vw - 2 * var(--sp-8))}
.toast.on{opacity:1;translate:-50% 0}

/* ---------- charts (server-rendered SVG; the y-axis gutter follows the reading direction, D-42) ---------- */
.chart{position:relative;padding-inline-start:var(--chart-gutter)}
.chart .plot{display:block;width:100%;overflow:visible;direction:ltr}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .ax{stroke:var(--axis);stroke-width:1}
.chart .tk{fill:var(--muted);font-size:var(--fs-tick);font-variant-numeric:tabular-nums}
.chart .lbl{fill:var(--ink-2);font-size:var(--fs-label);font-weight:600;font-variant-numeric:tabular-nums}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .bar{fill:var(--bar);rx:var(--r-bar);transition:opacity var(--dur-bar)}
.chart .bar.hl{fill:var(--red-t)}
.chart.hovering .bar:not(.on){opacity:.45}
.srcnote{margin:var(--sp-4) 0 0}
@media (max-width:560px){.chart .tk.thin{display:none}} /* dense bars on a phone: every other x label, so month names never run together */
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:var(--r-9);padding:var(--tip-pad);font-size:var(--fs-xs);line-height:var(--lh-tip);white-space:nowrap;opacity:0;transition:opacity var(--dur-tip);z-index:var(--z-tip);translate:-50% calc(-100% - var(--sp-5))}
.tip.on{opacity:1}
.tip b{font-size:var(--fs-ui);font-variant-numeric:tabular-nums}
.tip .sub{opacity:.75}
.chartbar{display:flex;align-items:center;gap:var(--sp-4);justify-content:space-between}
.stack{display:flex;gap:var(--sp-1);height:var(--stack-h);border-radius:var(--r-stack);overflow:hidden}
.stack > div{height:100%;transition:opacity var(--dur-bar);min-width:var(--sp-1)}
.stack:hover > div:not(:hover){opacity:.45}
.stacklbl{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.stacklbl > div{display:grid;grid-template-columns:var(--sp-6) 1fr auto auto;gap:var(--sp-5);align-items:center;font-size:var(--fs-ui)}
.stacklbl i{width:var(--swatch);height:var(--swatch);border-radius:var(--r-swatch)}
.stacklbl b{font-variant-numeric:tabular-nums;font-weight:600}
.stacklbl span.p{color:var(--muted);font-variant-numeric:tabular-nums;min-width:var(--legend-pct);text-align:end}
.sw1{background:var(--s1)}
.sw2{background:var(--s2)}
.sw3{background:var(--s3)}

/* ---------- Saudi plate (fixed artwork colours, always LTR) ---------- */
.plate{display:inline-grid;grid-template-columns:1fr 1fr var(--plate-band-w);grid-template-rows:1fr 1fr;background:var(--plate-ground);border:var(--plate-bw) solid var(--plate-ink);border-radius:var(--plate-r);overflow:hidden;color:var(--plate-ink);direction:ltr;width:var(--plate-w);height:var(--plate-h);flex:none}
.plate span{display:grid;place-items:center;border-bottom:var(--plate-rule) solid var(--plate-ink);font:700 var(--plate-fs-lat)/1 var(--f-plate-lat);letter-spacing:var(--plate-ls-lat)}
.plate span:nth-child(-n+2){font:700 var(--plate-fs-ar)/1 var(--f-plate-ar);letter-spacing:var(--plate-ls-ar)}
.plate span:nth-child(odd){border-right:var(--plate-rule) solid var(--plate-ink)}
.plate span:nth-child(n+4){border-bottom:none}
.plate i{grid-row:1/3;grid-column:3;background:var(--plate-band);display:grid;place-items:center;color:var(--plate-band-ink);font:700 var(--plate-band-fs)/1 var(--f-plate-ar);writing-mode:vertical-rl;font-style:normal}
.plate.sm{width:var(--plate-sm-w);height:var(--plate-sm-h);border-radius:var(--plate-sm-r);border-width:var(--plate-sm-bw)}
.plate.sm span{font-size:var(--plate-sm-fs-lat)}
.plate.sm span:nth-child(-n+2){font-size:var(--plate-sm-fs-ar)}
.plate.sm i{font-size:var(--plate-sm-band-fs)}
.plate.lg{width:var(--plate-lg-w);height:var(--plate-lg-h);border-width:var(--plate-lg-bw);border-radius:var(--plate-lg-r);grid-template-columns:1fr 1fr var(--plate-lg-band-w)}
.plate.lg span{font-size:var(--plate-lg-fs-lat)}
.plate.lg span:nth-child(-n+2){font-size:var(--plate-lg-fs-ar)}
.plate.lg i{font-size:var(--plate-lg-band-fs)}

/* ---------- motion control ---------- */
.motionbtn{display:inline-flex;align-items:center;gap:var(--sp-3);border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);min-height:var(--btn-h-sm);padding-block:0;padding-inline:var(--sp-4) var(--sp-5);font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}
.motionbtn svg{width:var(--icon-xs);height:var(--icon-xs);fill:currentColor;stroke:none}
@media (prefers-reduced-motion:reduce){.motionbtn{display:none}}

/* ---------- logo, global search, header menu ---------- */
.logo{display:inline-flex;align-items:center}
.logo img{display:block;height:var(--logo-h);width:auto}
.gsearch{position:relative;flex:0 1 var(--gsearch-w);min-width:0}
.gsearch .search{width:100%}
.gres{position:absolute;top:calc(100% + var(--sp-3));inset-inline:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-12);box-shadow:var(--shadow);z-index:var(--z-gres);display:grid;max-height:60vh;overflow:auto;padding:var(--sp-2)}
.gres [role="option"]{cursor:pointer;display:flex;justify-content:space-between;gap:var(--sp-6);padding:var(--gres-pad);border-radius:var(--r-8);font-size:var(--fs-ui)}
.gres [role="option"] small{color:var(--muted);white-space:nowrap}
.gres [role="option"]:hover,.gres [role="option"].on{background:var(--fill)}
.gres [role="option"].on{outline:var(--focus-w) solid var(--red-t);outline-offset:calc(-1 * var(--focus-w))} /* active descendant: focus stays in the field */
.gres .empty{padding:var(--sp-7)}
.umenu{position:relative}
button.av{border:none;padding:0}
.dmp{position:absolute;inset-inline-end:0;top:calc(100% + var(--sp-3));z-index:var(--z-menu);width:var(--menu-w);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-12);box-shadow:var(--shadow);padding:var(--sp-6);display:grid;gap:var(--sp-5)}
.dmp .who{display:flex;align-items:center;gap:var(--sp-5)}
.dmp .who small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.dmp h6{margin:0;font-size:var(--fs-th);font-weight:600;color:var(--muted)}
.menu-veil{position:fixed;inset:0;z-index:calc(var(--z-menu) - 1)}
.menu-veil.gveil{z-index:calc(var(--z-gres) - 1)}
.hbranch{min-height:var(--hdr-ctl-h);flex:none}
.hbranch .hsel{border:none;background:transparent;min-height:0;padding:0;outline:none}
.hsel{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-s);min-height:var(--hdr-ctl-h);padding:0 var(--sp-5);font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.hsel:focus{outline:var(--focus-w) solid var(--red-t);outline-offset:-1px}

/* ---------- system states (D-70): reconnect bar and error bar ---------- */
#components-reconnect-modal{position:fixed;inset-block-start:calc(var(--sp-9) + var(--search-h) + var(--sp-10));inset-inline-start:calc(var(--shell-side-w) + var(--sp-12));inset-inline-end:auto;margin:0;width:min(var(--reconnect-w),calc(100vw - var(--shell-side-w) - 2 * var(--sp-12)));border:none;border-radius:var(--r-s);padding:var(--sp-5) var(--sp-6);background:linear-gradient(var(--crit-soft),var(--crit-soft)),var(--surface);color:var(--crit-t);font-size:var(--fs-row);font-weight:600;box-shadow:var(--shadow);z-index:var(--z-toast)}
#components-reconnect-modal[open]{display:flex;align-items:center;gap:var(--sp-6)}
#components-reconnect-modal p{margin:0;flex:1}
:root:has(.d4.rail) #components-reconnect-modal{inset-inline-start:calc(var(--shell-side-w-collapsed) + var(--sp-12));width:min(var(--reconnect-w),calc(100vw - var(--shell-side-w-collapsed) - 2 * var(--sp-12)))}
@media (max-width:900px){
  #components-reconnect-modal,:root:has(.d4.rail) #components-reconnect-modal{inset-block-start:var(--sp-6);inset-inline:var(--sp-7);width:auto}
}
.rc-state{display:none}
#components-reconnect-modal.components-reconnect-show .rc-retrying,
#components-reconnect-modal.components-reconnect-retrying .rc-retrying,
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-failed #components-reconnect-button,
#components-reconnect-modal.components-reconnect-paused .rc-paused,
#components-reconnect-modal.components-reconnect-paused #components-resume-button,
#components-reconnect-modal.components-reconnect-resume-failed .rc-failed,
#components-reconnect-modal.components-reconnect-resume-failed #components-resume-button{display:inline-flex}
#blazor-error-ui{display:none;position:fixed;inset-inline:0;bottom:0;z-index:var(--z-toast);padding:var(--sp-5) var(--sp-8);background:linear-gradient(var(--crit-soft),var(--crit-soft)),var(--surface);color:var(--crit-t);font-weight:600;font-size:var(--fs-row);border-top:1px solid var(--line)}
#blazor-error-ui .reload{margin-inline-start:var(--sp-6)}
#blazor-error-ui .dismiss{float:inline-end;cursor:pointer}

/* ---------- Phase 4: states (skeleton, error), pager, confirm dialog, live chip, inspections ---------- */
.skel td{height:var(--td-h)}
.skb{display:inline-block;width:var(--skel-bar-w);height:var(--fs-ui);border-radius:var(--r-pill);background:var(--fill);vertical-align:middle}
.skp{display:inline-block;width:var(--plate-sm-w);height:var(--plate-sm-h);border-radius:var(--plate-sm-r);background:var(--fill)}
.skx{border-radius:var(--r-s);background:var(--fill)}
.skx-odo{height:var(--skel-odo-h)}
.skx-chart{height:var(--skel-chart-h)}
.skx-weekly{height:var(--skel-weekly-h)}
.skx-split{height:var(--skel-split-h)}
.skx-drawer{height:var(--skel-drawer-h)}
.errnote{display:flex;align-items:center;gap:var(--sp-6);justify-content:space-between;flex-wrap:wrap}
.note.warnnote{background:var(--warn-soft);color:var(--warn-t);font-weight:600;margin-top:var(--sp-3)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-6);padding:var(--sp-6) 0}
.btn.block{width:100%}
.dlgscrim{z-index:var(--z-dlg-scrim)}
.dlg{position:fixed;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;width:var(--dlg-w);z-index:var(--z-dlg);padding:var(--sp-9);display:grid;gap:var(--sp-7)}
[dir="rtl"] .dlg{translate:50% -50%}
.dlg h2{margin:0;font-size:var(--fs-h2);font-weight:600}
.dlg p{margin:0}
.dlgacts{display:flex;gap:var(--sp-4);justify-content:flex-end;flex-wrap:wrap}
.dlgacts .btn{flex:1 1 var(--drawer-btn-basis)}
.livechip{display:inline-flex;align-items:center;gap:var(--sp-3);margin-inline-start:var(--sp-4);padding:var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-4);border-radius:var(--r-pill);background:var(--good-soft);color:var(--good-t);font-size:var(--fs-xs);font-weight:600;vertical-align:middle}
.livechip i{width:var(--live-dot);height:var(--live-dot);border-radius:var(--r-pill);background:currentColor;animation:live-pulse var(--dur-pulse) infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 var(--good-soft)}70%{box-shadow:0 0 0 var(--pulse-ring) transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.livechip i{animation:none}}
.insp2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--sp-6)}
.insp{display:grid;gap:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-12);padding:var(--sp-6)}
.thumbs{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.thumbs img{width:var(--thumb);height:var(--thumb);object-fit:cover;border-radius:var(--r-8);background:var(--fill);display:block}
.activity.trail div{padding-inline:0;align-items:baseline;flex-wrap:wrap}
.activity.trail small{flex-basis:100%;padding-inline-start:calc(var(--activity-time-w) + var(--sp-5))}
.listrow small,.kv dd small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400}
/* ---------- Phase 4 stage B: shared controls (kit.css .steps, .pick, .switch; screens-admin §4.3, §4.4, §4.19) ---------- */
.btn.prev svg{transform:scaleX(-1)}
[dir="rtl"] .btn.prev svg{transform:none}
[dir="rtl"] .btn.next svg{transform:scaleX(-1)}
.seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-seg)}
.seg button[disabled]{opacity:.45;cursor:not-allowed}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.steps.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{font-size:var(--fs-xs);color:var(--muted);border-top:var(--steps-border) solid var(--line-2);padding-top:var(--sp-3)}
.steps li.done{border-color:var(--ink);color:var(--ink-2)}
.steps li.cur{border-color:var(--red-t);color:var(--ink);font-weight:600}
.pick{display:grid;gap:var(--sp-4)}
.pick.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick .opt{display:flex;align-items:center;gap:var(--sp-5);border:1px solid var(--line-2);border-radius:var(--r-12);padding:var(--sp-5) var(--sp-6);cursor:pointer;font-size:var(--fs-ui);color:var(--ink);font-weight:500}
.pick .opt:has(input:checked){border-color:var(--ink);background:var(--fill)}
.pick .opt:focus-within{outline:var(--focus-w) solid var(--red-t);outline-offset:1px}
.pick .opt input{accent-color:var(--ink);margin:0;width:auto;min-height:0;padding:0;border:none;flex:none}
.pick .opt > span{flex:1}
.pick .opt > .st{flex:none}
.pick .opt .optx{display:grid;gap:var(--sp-1);min-width:0}
.pick .opt .optx small{font-size:var(--fs-xs);font-weight:400}
.switch{width:var(--switch-w);height:var(--switch-h);border-radius:var(--r-pill);background:var(--line-2);position:relative;border:none;flex:none;cursor:pointer;transition:background var(--dur-switch)}
.switch::after{content:"";position:absolute;top:var(--knob-inset);left:var(--knob-inset);width:var(--knob);height:var(--knob);border-radius:var(--r-pill);background:var(--switch-knob);box-shadow:var(--shadow-knob);transition:left var(--dur-switch),right var(--dur-switch)}
.switch[aria-checked="true"]{background:var(--good)}
.switch[aria-checked="true"]::after{left:var(--knob-travel)}
[dir="rtl"] .switch::after{left:auto;right:var(--knob-inset)}
[dir="rtl"] .switch[aria-checked="true"]::after{left:auto;right:var(--knob-travel)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-3) 0;font-size:var(--fs-ui)}
.desc{margin:0;font-size:var(--fs-ui);line-height:var(--lh-body)}

/* ---------- Phase 4 stage B: car × day timeline (ADM-03) ---------- */
.tl{overflow:hidden}
.tl-scroll{overflow:auto;max-height:var(--tl-max-h);position:relative;border-radius:var(--r)}
.tl-row{display:grid;grid-template-columns:var(--tl-car-w) minmax(calc(var(--tl-days) * var(--tl-day-w)),1fr);min-height:var(--td-h);border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:none}
.tl-car{position:sticky;inset-inline-start:0;z-index:2;background:var(--surface);display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);border:none;border-inline-end:1px solid var(--line);min-width:0;font:inherit;color:inherit;text-align:start}
button.tl-car{cursor:pointer;width:100%}
button.tl-car:hover{background:linear-gradient(var(--hover),var(--hover)),var(--surface)}
button.tl-car:focus-visible{outline:var(--focus-w) solid var(--red-t);outline-offset:calc(-1 * var(--focus-w))}
.tl-car > span{display:grid;min-width:0}
.tl-car b{font-weight:500;font-size:var(--fs-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:match-parent}
.tl-car small{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.tl-track{position:relative;display:grid;grid-template-columns:repeat(var(--tl-days),minmax(var(--tl-day-w),1fr))}
.tl-cell{border-inline-end:1px solid var(--line)}
.tl-cell:last-child{border-inline-end:none}
.tl-cell.cur{background:var(--hover)}
.tl-head{position:sticky;top:0;z-index:3;min-height:var(--th-h);background:var(--surface-2)}
.tl-head .tl-car{background:var(--surface-2);z-index:4;font-size:var(--fs-th);font-weight:600;color:var(--muted)}
.tl-head .tl-cell{display:flex;align-items:center;justify-content:center;font-size:var(--fs-th);font-weight:600;color:var(--muted);white-space:nowrap;border-top:var(--steps-border) solid transparent;padding:0 var(--sp-2)}
.tl-head .tl-cell.cur{border-top-color:var(--red-t);color:var(--ink);background:var(--surface-2)}
.tl-bar{position:absolute;top:var(--tl-bar-inset);bottom:var(--tl-bar-inset);inset-inline-start:var(--tl-x);width:var(--tl-w);z-index:1;display:flex;align-items:center;gap:var(--sp-2);min-width:0;padding:0 var(--sp-4);border:none;border-radius:var(--r-8);font:600 var(--fs-xs)/var(--lh-tight) var(--f);white-space:nowrap;overflow:hidden;cursor:pointer;text-align:start}
:lang(ar) .tl-bar{font-family:var(--f-ar)}
.tl-bar > span,.tl-bar > bdi{overflow:hidden;text-overflow:ellipsis}
.tl-bar > .tl-sep{flex:0 10 auto;min-width:0}
.tl-bar .tl-who{font-weight:500;min-width:0;flex-shrink:100}
.tl-bar.good{background:var(--good-soft);color:var(--good-t)}
.tl-bar.info{background:var(--info-soft);color:var(--info-t)}
.tl-bar.warn{background:var(--warn-soft);color:var(--warn-t)}
.tl-bar.crit{background:var(--crit-soft);color:var(--crit-t)}
span.tl-bar{cursor:default}
.tl-bar:focus-visible{outline:var(--focus-w) solid var(--red-t);outline-offset:1px}
.tl-bar.cut-s{border-start-start-radius:0;border-end-start-radius:0}
.tl-bar.cut-e{border-start-end-radius:0;border-end-end-radius:0}
.tl-bar.lane2{top:50%;bottom:var(--sp-1)}
.tl-bar.conflict{box-shadow:inset 0 0 0 var(--focus-w) var(--crit-t)}
.tl-tail{position:absolute;top:var(--tl-bar-inset);bottom:var(--tl-bar-inset);inset-inline-start:var(--tl-x);width:var(--tl-w);border-start-end-radius:var(--r-8);border-end-end-radius:var(--r-8);background:repeating-linear-gradient(135deg,var(--line-2) 0 var(--sp-1),transparent var(--sp-1) var(--sp-3));pointer-events:none}
.tl-row.skel .tl-car{gap:var(--sp-4)}
.tl-row.skel .skb{width:40%}
.tl-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin:var(--sp-6) 0 0}
.tl-key{display:inline-flex;align-items:center;gap:var(--sp-3)}
.tl-key .tl-tail{position:static;display:inline-block;width:var(--tl-key-w);height:var(--sp-7);border-radius:var(--r-swatch)}

/* ---------- Phase 4 stage B: manual booking wizard (ADM-04) ---------- */
.wiz{display:grid;grid-template-columns:minmax(0,1fr) var(--wiz-quote-w);gap:var(--sp-8);align-items:start}
.wizcard{padding:var(--sp-11);display:grid;gap:var(--sp-9);min-width:0}
.wizgrid{display:grid;gap:var(--sp-8);min-width:0}
.wizgrid > .seg,.wizgrid .field > .seg,.inspform .field > .seg,.dlg > .seg{justify-self:start;max-width:100%;flex-wrap:wrap}
.wizacts{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--sp-8)}
.wizacts .sp{flex:1}
.qcard{position:sticky;top:var(--sp-8)}
.qcard .bd{display:grid;gap:var(--sp-6)}
.skel-kv .skb{width:70%}
.pickrow{display:flex;align-items:center;gap:var(--sp-5);border:1px solid var(--line-2);border-radius:var(--r-12);padding:var(--sp-5) var(--sp-6);font-size:var(--fs-ui)}
.pickrow > span{flex:1;display:grid;min-width:0}
.pickrow small{font-size:var(--fs-xs);color:var(--muted)}
.cpick{position:relative}
.cpick .search{width:100%;max-width:none}
.field .search input{border:none;background:transparent;min-height:0;padding:0;width:100%}
.field .search input:focus{outline:none}
.cprow{display:flex;gap:var(--sp-4)}
.cprow .input{flex:1;min-width:0}

/* ---------- Phase 4 stage B: handover (APP-17) ---------- */
.hsteps{margin-bottom:var(--sp-8)}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) var(--wiz-quote-w);gap:var(--sp-8);align-items:start}
.hmain{display:grid;gap:var(--sp-8);min-width:0}
.hside{position:sticky;top:var(--sp-8)}
.hside .dhead{margin-bottom:var(--sp-6)}
.hact{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.hact p{margin:0}
.hact > .note{flex-basis:100%}
.inspform{display:grid;gap:var(--sp-8)}
.uplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--upl-thumb),1fr));gap:var(--sp-4)}
.upl-item{position:relative;margin:0;display:grid;gap:var(--sp-2);min-width:0}
.upl-item img,.upl-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-8);background:var(--fill);display:grid;place-items:center;color:var(--muted)}
.upl-item figcaption{display:grid;min-width:0}
.upl-item figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upl-item .btn{position:absolute;top:var(--sp-2);inset-inline-end:var(--sp-2)}
.upl-add{display:grid;place-items:center;align-content:center;gap:var(--sp-2);aspect-ratio:4/3;border:1px dashed var(--line-2);border-radius:var(--r-8);color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;text-align:center;padding:var(--sp-4);cursor:pointer}
.upl-add:hover{background:var(--hover)}
.field .upl-inputs input.sr{width:1px;height:1px;min-height:0;padding:0;border:0}
.upl-add.off{opacity:.5;pointer-events:none}
.wideimg .upl-add,.wideimg .upl-item img,.wideimg .upl-ph{aspect-ratio:var(--banner-ratio)} /* a banner or offer image is shown on a wide card */
.inspform:has(.upl-inputs input.on:focus-visible) .upl-add{outline:var(--focus-w) solid var(--red-t);outline-offset:1px}
.seg.fuel{display:flex;flex-wrap:wrap}
.seg.fuel button{min-width:var(--fuel-seg-min);padding:0 var(--sp-3)}
.formacts{display:flex;justify-content:flex-end}
/* Date as day / month / year selects (formatted by the UI language, not the browser's locale), time as one 24-hour select. */
.datef{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-3)}
.field .datef select{padding:0 var(--sp-4)}
.wizgrid .fgrid.c3.when{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}

@media (max-width:1100px){
  .wiz,.hgrid{grid-template-columns:minmax(0,1fr)}
  .qcard,.hside{position:static}
}
@media (max-width:900px){
  .tl-row{grid-template-columns:var(--tl-car-w-sm) minmax(calc(var(--tl-days) * var(--tl-day-w)),1fr)}
}
@media (max-width:560px){
  .wizcard{padding:var(--sp-8)}
  .pick.c2,.wizgrid .fgrid.c2,.inspform .fgrid.c2{grid-template-columns:minmax(0,1fr)}
  .wizgrid .fgrid.c3,.wizgrid .fgrid.c3.when{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wizgrid .fgrid.c3 > :first-child{grid-column:1 / -1}
}

/* ---------- Phase 4 admin round 2: galleries, KYC documents and zoom, permission matrix, recovery codes, copy fields ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--gallery-thumb),1fr));gap:var(--sp-4)}
.gallery figure{position:relative;margin:0;display:grid;gap:var(--sp-2);min-width:0;align-content:start}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-8);background:var(--fill);display:block}
.gallery figcaption{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.gallery .st{position:absolute;top:var(--sp-2);inset-inline-start:var(--sp-2)}
.gallery .upl-add{aspect-ratio:4/3}
.photostrip{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.photostrip img{width:var(--thumb);height:var(--thumb);object-fit:cover;border-radius:var(--r-8);background:var(--fill);display:block}
.docs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.idcard{margin:0;min-width:0;border:1px solid var(--line-2);border-radius:var(--r-12);background:linear-gradient(var(--surface),var(--surface-2));overflow:hidden;display:grid;align-content:start}
.idcard > header{background:var(--fill);font-size:var(--fs-xs);font-weight:600;padding:var(--sp-3) var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-2) var(--sp-4);align-items:center;flex-wrap:wrap}
.idcard .ph{display:grid;gap:var(--sp-3);padding:var(--sp-4)}
.idcard .ph button{all:unset;cursor:zoom-in;display:block;min-width:0;border-radius:var(--r-8)}
.idcard .ph button:focus-visible{outline:var(--focus-w) solid var(--red-t);outline-offset:1px}
.idcard .ph img{width:100%;aspect-ratio:var(--doc-ratio);object-fit:cover;border-radius:var(--r-8);background:var(--fill);display:block}
.idcard .kv{padding:0 var(--sp-5) var(--sp-5);font-size:var(--fs-sm)}
.idcard .prob{margin:0 var(--sp-5) var(--sp-5);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-8);background:var(--crit-soft);color:var(--crit-t);font-size:var(--fs-xs);font-weight:600}
.zoomdlg{width:var(--zoom-w);max-height:calc(100vh - 2 * var(--sp-8));grid-template-rows:auto minmax(0,1fr) auto}
.zoomdlg .zoomview{overflow:auto;max-height:var(--zoom-h);border-radius:var(--r-8);background:var(--fill);display:grid}
.zoomdlg .zoomview img{display:block;max-width:none;width:calc(100% * var(--zoom,1));height:auto;margin:auto}
.zoombar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.zoombar .sp{flex:1}
.perm th,.perm td{text-align:center}
.perm th:first-child,.perm td:first-child{text-align:start;white-space:normal;min-width:var(--wrap-col-min)} /* a phone scrolls the table instead of breaking a capability word by word */
.perm td{min-width:var(--perm-col);position:relative}
.perm .yes{color:var(--good-t)}
.perm .no{color:var(--muted)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-8);margin:0;padding:var(--sp-7) var(--sp-8);list-style:none;border:1px dashed var(--line-2);border-radius:var(--r-12);background:var(--surface-2)}
.codes li{font-size:var(--fs-section);font-weight:600;letter-spacing:var(--code-ls);font-variant-numeric:tabular-nums;direction:ltr;text-align:center}
.copyrow{display:flex;gap:var(--sp-4);align-items:stretch}
.acct-card h1:focus{outline:none}
.copyrow .input{flex:1;min-width:0;font-size:var(--fs-sm)}
.msgtext{white-space:normal;display:-webkit-box;-webkit-line-clamp:var(--msg-clamp);-webkit-box-orient:vertical;overflow:hidden;max-width:60ch;line-height:var(--lh-body)}
.tbl td.wrap{white-space:normal;min-width:var(--wrap-col-min)} /* a phone scrolls the table instead of breaking a title word by word */
.kvreveal{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.pmh{margin:var(--sp-11) 0 var(--sp-5);font-size:var(--fs-section);font-weight:600}
.perm th[scope="row"]{font-weight:600;color:var(--ink);font-size:var(--fs-ui);background:none;position:static;letter-spacing:0}
@media (max-width:560px){
  .docs2,.codes{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Phase 4 admin round 2 stage B: pricing, coupons, payments, notifications, content, reports, audit, settings ---------- */
.cardgrid{display:grid;gap:var(--sp-8);align-items:start}
.cardgrid.pricing{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-pricing)),1fr))}
.cardgrid.content{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-content)),1fr))}
.cardgrid.reports{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-reports)),1fr))}
.cardgrid > .card{min-width:0}
.cardgrid.mb{margin-bottom:var(--sp-9)}
.cardgrid.mt{margin-top:var(--sp-9)}
.card > .bd.flush{padding:var(--sp-4) 0 0}
.card > .cardnote{margin:0;padding:var(--sp-5) var(--sp-8) var(--sp-8)}
.scrollx{overflow-x:auto}
.card > .ft{display:flex;gap:var(--sp-4);justify-content:flex-end;flex-wrap:wrap;padding:0 var(--sp-8) var(--sp-8)}
.tbl.edit td{height:auto;padding-top:var(--sp-3);padding-bottom:var(--sp-3);vertical-align:top}
.tbl.edit .input{width:var(--rate-input-w);min-width:var(--rate-input-w);max-width:var(--rate-input-w);min-height:var(--field-h-sm);text-align:end;padding:0 var(--sp-5)}
.tbl.edit td .ferr{display:block;white-space:normal;max-width:var(--rate-input-w);margin-inline-start:auto}
.tbl.edit td.c{text-align:center}
.field.row{grid-template-columns:minmax(0,1fr) auto var(--field-row-input);align-items:center;color:var(--ink);font-weight:500;column-gap:var(--sp-5)}
.field.row > .lbl{grid-column:1;min-width:0}
.field.row > .lbl small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
.field.row > input,.field.row > select{grid-column:3;min-height:var(--field-h-sm)}
.field.row > input{text-align:end}
.field.row > .switch{grid-column:2}
.field.row > .ferr{grid-column:1 / -1;text-align:end}
.field.row.noswitch{grid-template-columns:minmax(0,1fr) var(--field-row-input)}
.field.row.noswitch > input,.field.row.noswitch > select{grid-column:2}
.rows{display:grid;gap:var(--sp-6)}
.bnr{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.bnr:last-child{border-bottom:none}
.bnr > .t{flex:1;min-width:0;display:grid;gap:var(--sp-1)}
.bnr > .t > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnr img{width:var(--thumb);height:calc(var(--thumb) * .6);object-fit:cover;border-radius:var(--r-8);background:var(--fill);flex:none}
details.faq{border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
details.faq:last-child{border-bottom:none}
details.faq summary{cursor:pointer;font-weight:500}
details.faq p{margin:var(--sp-4) 0;color:var(--ink-2);font-size:var(--fs-ui);white-space:pre-line}
details.faq .acts{display:flex;gap:var(--sp-4)}
.phone-pv{background:var(--fill);border-radius:var(--r-phone);padding:var(--sp-7);max-width:var(--pv-max)}
.phone-pv .pv-n{background:var(--surface);border-radius:var(--r-phone-card);padding:var(--sp-5) var(--sp-6);display:grid;gap:var(--sp-1);box-shadow:var(--shadow);font-size:var(--fs-row);min-width:0}
.phone-pv .pv-n b{font-size:var(--fs-th);color:var(--muted)}
.phone-pv .pv-n span{overflow-wrap:anywhere}
.phone-pv .pv-n small{color:var(--ink-2);font-size:var(--fs-sm);overflow-wrap:anywhere}
.checks{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.checks label{display:inline-flex;gap:var(--sp-3);align-items:center;color:var(--ink);font-weight:500}
.checks input{accent-color:var(--ink);width:auto;min-height:0}
.sect > .chips + .kv,.sect > .chips + .queue{margin-top:var(--sp-5)} /* the send log: its channel chips, then the counts */
.queue{display:grid;gap:0}
.queue .listrow{gap:var(--sp-6)}
.queue .listrow > span{display:grid;min-width:0}
.queue .listrow > span > bdi{justify-self:start} /* a name in the other script keeps the row's alignment */
.queue .listrow > .st{display:inline-flex;flex:none}
.queue .listrow .acts{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end}
.pay{border:1px solid var(--line);border-radius:var(--r-12);padding:var(--sp-6);display:grid;gap:var(--sp-5)}
.pay > header{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.pay > header .sp{flex:1}
.pay .refs{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.pay .refs li{display:flex;justify-content:space-between;gap:var(--sp-5);font-size:var(--fs-sm);flex-wrap:wrap}
.pay .acts{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.split3.four{grid-template-columns:repeat(4,1fr)}
.clauses{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-7)}
.clauses li{display:grid;grid-template-columns:var(--clause-n) minmax(0,1fr) auto;gap:var(--sp-4);align-items:start}
.clauses li > .n{color:var(--muted);font-weight:600;padding-top:var(--sp-4)}
.clauses li > .fgrid{min-width:0}
.formcard{max-width:var(--settings-max)}
.formcard .bd{display:grid;gap:var(--sp-7)}
.setting{display:grid;gap:var(--sp-2)}
.setting > small{color:var(--muted);font-size:var(--fs-xs)}
.filters{display:flex;gap:var(--sp-5);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-8)}
.filters .field{min-width:0}
.filters .datef{grid-template-columns:repeat(3,auto)} /* each select as wide as its longest option */
.chg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);margin:0}
.chg dt{color:var(--muted);overflow-wrap:anywhere}
.chg dd{margin:0;overflow-wrap:anywhere}
.chg .h{font-weight:600;color:var(--muted);font-size:var(--fs-th)}
.summ{display:inline-block;max-width:44ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.chartcard > .hd{flex-wrap:wrap;row-gap:var(--sp-3)} /* the period and chart/table toggles take a line of their own on a phone */
.chartcard .bd{display:grid;gap:var(--sp-6)}
@media (max-width:560px){
  .split3.four{grid-template-columns:1fr 1fr}
  .field.row{grid-template-columns:minmax(0,1fr) auto minmax(0,var(--field-row-input))}
  .clauses li{grid-template-columns:var(--clause-n) minmax(0,1fr)}
  .clauses li > .btn{grid-column:2;justify-self:end}
  .chg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .chg dt{grid-column:1 / -1;margin-top:var(--sp-3)}
  .chg dt.h{display:none} /* each field name heads its own pair of values */
}

/* ---------- Phase 4 pay on delivery: the handover on a phone, the payment card, the booking's messages, account deletion ---------- */
.dlg{max-height:calc(100dvh - 2 * var(--sp-6));overflow:auto;overscroll-behavior:contain}
.btn.danger{background:transparent;color:var(--crit-t);border-color:var(--crit-t)}
.steps.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hstepnow{display:none;margin:0 0 var(--sp-6);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.duebig{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-7)}
.duebig small{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.duebig b{font:600 var(--fs-kpi-sm)/var(--lh-kpi) var(--f-disp);font-variant-numeric:tabular-nums}
.payform{display:grid;gap:var(--sp-7)}
.payform > .seg{justify-self:start;max-width:100%;flex-wrap:wrap}
.payform .dlgacts{justify-content:flex-start}
.paidline{display:flex;gap:var(--sp-4);align-items:flex-start;margin:0;color:var(--good-t);font-weight:600}
.paidline small{display:block;color:var(--muted);font-weight:400;font-size:var(--fs-xs)}
.depositrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.hcheck{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.hcheck li{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-ui);color:var(--ink-2)}
.hcheck li.ok{color:var(--good-t)}
.hcheck li.todo svg{color:var(--crit-t);flex:none}
.hbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6) var(--sp-8)}
.hbar .askmgr{flex-basis:100%;margin:0}
.erasewhat{display:grid;gap:var(--sp-4)}
.erasewhat p{margin:0}
.erasedlg{width:min(520px,calc(100vw - 2 * var(--sp-8)))}
@media (max-width:560px){
  /* 16px text in every field: iOS does not zoom the page when one takes the focus */
  input,select,textarea,.input,.field input,.field select,.field textarea{font-size:var(--fs-input-phone)}
  /* dialogs are bottom sheets: full width, above the home indicator, scrolling inside when the keyboard is open */
  .dlg,.erasedlg{inset-inline:0;inset-block-start:auto;inset-block-end:0;width:auto;max-height:calc(100dvh - var(--sheet-gap));border-end-start-radius:0;border-end-end-radius:0;padding-block-end:calc(var(--sp-9) + env(safe-area-inset-bottom))}
  [dir] .dlg{translate:none}
  .dlgacts .btn{flex:1 1 100%}
  /* the handover: "Step n of 5 · …" and the action bar kept at the bottom of the screen */
  .steps.s5.hsteps{display:none}
  .hstepnow{display:block}
  .hbar{position:sticky;inset-block-end:0;z-index:var(--z-hbar);box-shadow:var(--shadow);border-end-start-radius:0;border-end-end-radius:0;padding-block-end:calc(var(--sp-6) + env(safe-area-inset-bottom))}
  .hbar .btn{flex:1 1 100%}
  .payform .dlgacts .btn{flex:1 1 100%}
  /* the bookings board: one card per booking, each value under its column's name */
  .tblwrap:has(.tbl.cards){contain:none;overflow:visible}
  .tbl.cards,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards thead{display:none}
  .tbl.cards tr{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line)}
  .tbl.cards tr:last-child{border-bottom:none}
  .tbl.cards td{height:auto;border:none;padding:var(--sp-1) 0;white-space:normal;text-align:start}
  .tbl.cards td[data-label]{position:relative;padding-inline-start:var(--card-label-w);min-height:var(--td-h-card)}
  .tbl.cards td[data-label]::before{content:attr(data-label);position:absolute;inset-inline-start:0;inset-block-start:var(--sp-2);inline-size:calc(var(--card-label-w) - var(--sp-4));color:var(--muted);font-size:var(--fs-xs);font-weight:600}
  .tbl.cards td.r{text-align:start}
}