/* Components: one version of each. */
/* =====================================================================
   COMPONENTS: one version of each, same heights and padding everywhere.
   Every interactive element: default, hover (mouse only), pressed,
   focus, disabled, loading, error.
   ===================================================================== */

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:100%;min-height:var(--h-ctl);padding:0 var(--s-5);border:0;border-radius:var(--r-2);background:var(--accent);color:var(--on-accent);font-size:var(--fs-3);font-weight:var(--fw-2);line-height:var(--lh-t);text-align:center;text-decoration:none;white-space:nowrap;transition:background-color var(--t-1) var(--ease-out),transform var(--t-1) var(--ease-out),opacity var(--t-1)}
.btn.auto{width:auto}
/* in a column (a card, a stack) a button marked auto keeps its own width instead of stretching */
:is(.card,.stack)>.btn.auto{align-self:flex-start}
.btn:active:not(:disabled){transform:scale(.98);background:var(--accent-press)}
.btn:disabled{background:var(--fill);color:var(--ink-4)}
.btn.sec{background:var(--fill);color:var(--ink)}
.btn.sec:active:not(:disabled){background:var(--fill-2)}
.btn.sec.on{background:var(--accent-soft);color:var(--accent-ink)}
.btn.light{background:var(--on-navy);color:var(--navy)}
.btn.light:active:not(:disabled){background:var(--on-navy-2)}
.btn.ghost-l{background:transparent;color:var(--on-navy);box-shadow:inset 0 0 0 1px var(--navy-line)}
.btn.dashed{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.dashed:active:not(:disabled){background:var(--accent-soft)}
.btn.danger,.btn.sec.danger{background:var(--bad-soft);color:var(--bad)}
.btn svg{width:20px;height:20px}
.btn-sm,.btn-pill,a.btn-sm{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--h-ctl-s);padding:0 var(--s-4);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2);line-height:var(--lh-t);white-space:nowrap;text-decoration:none;transition:background-color var(--t-1) var(--ease-out),transform var(--t-1) var(--ease-out)}
.btn-sm:active:not(:disabled),.btn-pill:active:not(:disabled){transform:scale(.97);background:var(--fill-2)}
.btn-sm.go,.btn-pill{background:var(--accent);color:var(--on-accent)}
.btn-sm.go:active:not(:disabled),.btn-pill:active:not(:disabled){background:var(--accent-press)}
.btn-sm.danger{color:var(--bad)}
.btn-sm:disabled,.btn-pill:disabled{background:var(--fill);color:var(--ink-4)}
.btn-sm svg,.btn-pill svg{width:16px;height:16px}
.link{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--h-ctl-s);padding:0;border:0;background:none;color:var(--accent-ink);font-size:var(--fs-2);font-weight:var(--fw-2);text-align:start;text-decoration:none;transition:opacity var(--t-1)}
.link:active{opacity:.6}
.link.danger{color:var(--bad)}
.link.mute{color:var(--ink-3)}
.link.small,.link.sm{min-height:0;font-size:var(--fs-2)}

.link-row{background:none;border:0;padding:0;color:inherit;text-align:start}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink);transition:background-color var(--t-1),transform var(--t-1) var(--ease-out),opacity var(--t-1)}
.icon-btn:active:not(:disabled){transform:scale(.94);background:var(--fill-2)}
.icon-btn.sm{width:32px;height:32px;background:transparent;color:var(--ink-3)}
.icon-btn.sm:active:not(:disabled){background:var(--fill)}
.icon-btn.go{background:var(--accent);color:var(--on-accent)}
.icon-btn.dark{background:var(--navy-2);color:var(--on-navy)}
.icon-btn.on{color:var(--accent-ink)}
.icon-btn:disabled{opacity:.4}
.icon-btn.flip svg{transform:scaleX(-1)}
[dir=rtl] .icon-btn.flip svg{transform:none}
.back{display:inline-flex;align-items:center;gap:var(--s-1);align-self:flex-start;min-height:var(--tap);margin-inline-start:-6px;padding:0 var(--s-3) 0 2px;border:0;border-radius:var(--r-2);background:none;color:var(--accent-ink);font-size:var(--fs-3);font-weight:var(--fw-2);transition:opacity var(--t-1)}
.back:active{opacity:.6}
.back svg{width:22px;height:22px}
[dir=rtl] .back svg,[dir=rtl] .si-back svg,[dir=rtl] .tk-back svg,[dir=rtl] .bt-arw{transform:scaleX(-1)}
/* loading state for any button: <button aria-busy="true"> */
.btn[aria-busy=true],.btn-sm[aria-busy=true],.btn-pill[aria-busy=true]{color:transparent!important;pointer-events:none}
.btn[aria-busy=true]::after,.btn-sm[aria-busy=true]::after,.btn-pill[aria-busy=true]::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--on-accent);border-inline-end-color:transparent;animation:xb-spin .7s linear infinite}
.btn.sec[aria-busy=true]::after,.btn-sm:not(.go)[aria-busy=true]::after{border-color:var(--ink);border-inline-end-color:transparent}
@keyframes xb-spin{to{transform:rotate(360deg)}}

/* ---------- inputs ---------- */
.field{--f-pb:var(--s-2);--f-pi:var(--s-3);position:relative;display:flex;flex-direction:column;gap:2px;min-height:56px;padding:var(--f-pb) var(--f-pi);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);transition:border-color var(--t-1)}
.field label{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);line-height:var(--lh-t)}
.field input,.field select,.field textarea{width:100%;min-height:24px;padding:0;border:0;outline:none;background:transparent;font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink)}
.field textarea{font-weight:var(--fw-1);resize:vertical;line-height:var(--lh-b)}
.field:focus-within{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:0}
.field.flag{border-color:var(--bad)}.field.flag label{color:var(--bad)}
.field select{appearance:none;-webkit-appearance:none;padding-inline-end:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6577' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center}
[dir=rtl] .field select{background-position:left 0 center}
/* the input covers the whole field, so a tap anywhere in the box lands on it; the label sits on top and lets taps through */
.field>label:has(+:is(input,select)){position:relative;z-index:1;pointer-events:none}
.field>label+:is(input,select){--f-lab:calc(var(--fs-1) * var(--lh-t) + 2px);width:calc(100% + 2 * var(--f-pi));min-height:calc(24px + 2 * var(--f-pb) + var(--f-lab));margin:calc(-1 * (var(--f-pb) + var(--f-lab))) calc(-1 * var(--f-pi)) calc(-1 * var(--f-pb));padding:calc(var(--f-pb) + var(--f-lab)) var(--f-pi) var(--f-pb);border-radius:inherit}
.field>label+select{padding-inline-end:calc(var(--f-pi) + 20px);background-position:right var(--f-pi) bottom calc(var(--f-pb) + 6px)}
[dir=rtl] .field>label+select{background-position:left var(--f-pi) bottom calc(var(--f-pb) + 6px)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--surface) inset;-webkit-text-fill-color:var(--ink)}
.search{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-2);background:var(--fill);color:var(--ink-3);transition:outline-color var(--t-1)}
.search input{flex:1;min-width:0;height:var(--tap);border:0;outline:none;background:transparent;font-size:var(--fs-3);color:var(--ink)}
.search:focus-within{outline:2px solid var(--accent);outline-offset:0}
.search svg{width:18px;height:18px}
.big-search{min-height:56px}.big-search input{height:56px;font-size:var(--fs-4)}
.search.sm-s{min-height:var(--tap)}
.inline-in,.date-in,.t-in,.amt-in,.mb-in,.qty,.rate,.cell,.note-cell,.stat-sel,.rng-in input{min-height:var(--h-ctl-s);padding:0 var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;transition:border-color var(--t-1)}
.inline-in{min-height:var(--tap);font-size:var(--fs-3);flex:1}
.inline-in:focus,.date-in:focus,.t-in:focus,.amt-in:focus,.mb-in:focus,.qty:focus,.rate:focus,.cell:focus,.note-cell:focus,.stat-sel:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0}
.amt-in{width:100%;min-width:96px;text-align:end}
.amt-in.sm{width:112px;min-width:0}
.qty,.rate{width:64px;text-align:center}
.cell{width:100%;min-width:112px;border-color:transparent;background:transparent;font-weight:var(--fw-1)}
.cell.err{border-color:var(--bad);background:var(--bad-soft)}
.note-cell{width:100%;min-width:120px;font-weight:var(--fw-1)}
.stat-sel{flex-shrink:0;appearance:none;-webkit-appearance:none;padding-inline-end:28px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6577' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
[dir=rtl] .stat-sel{background-position:left 10px center}
.t-in{width:auto;min-width:96px}.t-in:disabled{opacity:.4}
.draft{width:100%;padding:var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font-size:var(--fs-2);line-height:var(--lh-b);resize:vertical}
.draft:focus{border-color:var(--accent);outline:2px solid var(--accent-soft)}
.rng-in{display:flex;align-items:center;gap:var(--s-2)}
.rng-in input{flex:1;font-size:var(--fs-3)}
.rng-in span,.rng-in small{font-size:var(--fs-1);color:var(--ink-3)}
.phone{display:flex;gap:var(--s-2);direction:ltr}
.phone span{display:flex;align-items:center;justify-content:center;width:72px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);font-weight:var(--fw-2)}
.phone input{flex:1;min-width:0;height:var(--h-ctl);padding:0 var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);font-size:var(--fs-3)}
.otp{height:64px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);text-align:center;font-size:var(--fs-5);font-weight:var(--fw-2);letter-spacing:.4em;direction:ltr}
[dir=rtl] .mb-in,[dir=rtl] .amt-in,[dir=rtl] .qty,[dir=rtl] .rate{direction:ltr}
.hidden-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ---------- segmented control: equal segments, a sliding thumb ---------- */
.seg{position:relative;display:flex;gap:2px;padding:2px;border-radius:var(--r-2);background:var(--fill);max-width:100%;overflow-x:auto;scrollbar-width:none;isolation:isolate}
/* a tab bar too wide for the screen scrolls: a soft shadow shows at whichever edge has more tabs behind it (the covers scroll with the content) */
.seg{background:linear-gradient(to right,var(--fill) 40%,transparent) left/32px 100% no-repeat local,linear-gradient(to left,var(--fill) 40%,transparent) right/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--scroll-sh),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--scroll-sh),transparent) right/12px 100% no-repeat scroll,var(--fill)}
.seg::-webkit-scrollbar{display:none}
.seg>button{position:relative;z-index:1;flex:1 1 0;min-width:max-content;min-height:36px;padding:0 var(--s-4);text-align:center;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);white-space:nowrap;transition:color var(--t-2) var(--ease-out),background-color var(--t-2) var(--ease-out)}
.seg>button.on{color:var(--ink);background:var(--surface)}
.seg.has-th>button.on{background:transparent}
.seg>button:disabled{opacity:.45}
.seg>button:active:not(:disabled):not(.on){color:var(--ink-2)}
.seg-th{position:absolute;z-index:0;top:2px;bottom:2px;left:0;border-radius:10px;background:var(--surface);box-shadow:var(--elev-1);transition:transform var(--t-2) var(--ease-out),opacity var(--t-1)}
.seg-th:not([data-ready]){transition:none}
.seg.mini>button{min-height:32px;padding:0 var(--s-2)}
/* scrolling option rows (periods, categories): pills */
.per-row,.chips.scrollx,.ms-row,.pr-strip,.today-s,.plg-chips,.gcar-t,.shx-tiles,.bt-tabs{scrollbar-width:none}
.per-row::-webkit-scrollbar,.chips.scrollx::-webkit-scrollbar{display:none}

/* ---------- underline tabs ---------- */
.utabs{position:relative;display:flex;gap:var(--s-5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.utabs::-webkit-scrollbar{display:none}
.utabs button{position:relative;flex:0 0 auto;min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink-3);font-size:var(--fs-3);font-weight:var(--fw-2);white-space:nowrap;transition:color var(--t-2)}
.utabs button.on{color:var(--ink)}
.utabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform var(--t-2) var(--ease-out)}
.utabs button.on::after{transform:scaleX(1)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips.scrollx{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter)}
.chips.scrollx .chip{flex-shrink:0}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-height:var(--h-ctl-s);padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);white-space:nowrap;transition:background-color var(--t-1),color var(--t-1),transform var(--t-1) var(--ease-out)}
.chip:active:not(:disabled){transform:scale(.96)}
.chip.on{background:var(--accent);color:var(--on-accent)}
.chip.sm{min-height:32px;padding:0 var(--s-3);font-size:var(--fs-1)}
.chip.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}
.chip.static{background:var(--fill);color:var(--ink-2);cursor:default}
.chip.static.hq-flag{background:var(--warn-soft);color:var(--warn)}
/* long flags wrap inside the card instead of running off its edge */
.chip.static{max-width:100%;white-space:normal;text-align:start}
.chip.static.hq-flag{border-radius:var(--r-2);padding-block:var(--s-1)}
.chip small,.chip .cn{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);margin-inline-start:2px;font-variant-numeric:tabular-nums}
.chip.on small,.chip.on .cn{color:inherit}
.chip.saved{padding:0;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2);background:transparent}
.chip.saved button{display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;padding:0 var(--s-2) 0 var(--s-3);border:0;background:none;color:inherit}
.chip.saved button+button{padding:0 var(--s-3) 0 var(--s-1);color:var(--ink-3)}
.chips.dpw .chip{min-width:44px}

/* ---------- toggles, checkboxes, radios ---------- */
.tgl,.tg:not(i){-webkit-appearance:none;appearance:none;position:relative;flex-shrink:0;width:48px;height:28px;margin:0;padding:0;border:0;border-radius:var(--r-pill);background:var(--fill-2);transition:background-color var(--t-2) var(--ease-out)}
.tgl::after,.tg:not(i) i{content:'';position:absolute;top:2px;inset-inline-start:2px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(14,20,36,.24);transition:transform var(--t-2) var(--ease-out)}
.tgl:checked,.tg.on:not(i){background:var(--accent)}
.tgl:checked::after,.tg.on:not(i) i{transform:translateX(20px)}
[dir=rtl] .tgl:checked::after,[dir=rtl] .tg.on:not(i) i{transform:translateX(-20px)}
.tg:not(i)::before{display:none}
.tgl-row{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-2) 0;border-top:1px solid var(--line);cursor:pointer}
.tgl-row:first-child{border-top:0}
.tgl-row .grow b{font-size:var(--fs-3);font-weight:var(--fw-2)}
.tgl-row .grow small{font-size:var(--fs-2);color:var(--ink-3)}
.checkline{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--fs-2);line-height:var(--lh-b);color:var(--ink-2);cursor:pointer}
.checkline input,.radio input,.eqrow input[type=checkbox],.pm{-webkit-appearance:none;appearance:none;flex-shrink:0;width:22px;height:22px;margin:0;border:1.5px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);cursor:pointer;transition:background-color var(--t-1),border-color var(--t-1)}
.radio input[type=radio]{border-radius:50%}
.checkline input:checked,.radio input[type=checkbox]:checked,.eqrow input[type=checkbox]:checked,.pm:checked{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat}
.radio input[type=radio]:checked{border-color:var(--accent);background:var(--surface);box-shadow:inset 0 0 0 5px var(--accent)}
.checkline input:focus-visible,.radio input:focus-visible,.pm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.checkline.box{align-items:center;min-height:56px;padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--surface)}
.sheet-bd .checkline.box{background:var(--surface-2)}
.checkline.row{align-items:center;min-height:56px;padding:var(--s-3) var(--s-4)}
.checkline.row.off>input,.checkline.row.off .row-a{opacity:.5}
.radio{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow var(--t-1),background-color var(--t-1)}
.radio.on{box-shadow:inset 0 0 0 2px var(--accent)}
.radio span{display:flex;flex-direction:column;gap:2px;min-width:0}
.radio strong{font-size:var(--fs-3);font-weight:var(--fw-2)}
.radio small{font-size:var(--fs-2);color:var(--ink-3)}
.radio:has(small){align-items:flex-start}.radio:has(small) input{margin-top:2px}
.yn{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-2);background:var(--fill)}
.yn button{min-height:32px;padding:0 var(--s-3);border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2)}
.yn button.on{background:var(--surface);color:var(--ink)}
.yn button.on.yes{background:var(--warn-soft);color:var(--warn)}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-3);background:var(--surface);color:var(--ink);text-align:start;min-width:0}
.card.tight{gap:var(--s-2);padding:var(--s-3) var(--s-4)}
.card.center{align-items:center;text-align:center}
.card.tap,button.card,a.card{width:100%;border:0;cursor:pointer;transition:transform var(--t-1) var(--ease-out),background-color var(--t-1)}
.card.tap:active,button.card:active{transform:scale(.985);background:var(--surface-2)}
.card>strong,.card .top strong,.card .top>div>strong{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:var(--lh-t);letter-spacing:-.01em}
.top>div:has(>strong):not(.seg,.row-actions,.chips,.pnav,.yn,.bt-seg,.lang-sw,.search){display:flex;flex-direction:column;gap:2px;min-width:0}
/* a title with a line under it; controls in the header keep their own layout */
.card .top>div:not(.seg,.row-actions,.chips,.pnav,.yn,.bt-seg,.lang-sw,.search){display:flex;flex-direction:column;gap:2px;min-width:0}
.card .top>div:has(>strong+.info:last-child){flex-direction:row;align-items:center;gap:var(--s-1)}
/* a text link in a card header (Details, Timetable) keeps its tap height without pushing the title down */
.card>.top>.link{margin-block:-7px}
/* a header with a title block and a link keeps the link on the title line at every width */
.card>.top:has(>div>strong){align-items:flex-start;flex-wrap:nowrap}
.card>.top>div:has(>strong){flex:1 1 auto}
/* the navy hero */
.card.dark,.cp-h,.pass,.tot{
  --ink:var(--on-navy);--ink-2:var(--on-navy-2);--ink-3:var(--on-navy-3);--line:var(--navy-line);--fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.14);--surface:var(--navy-2);--surface-2:rgba(255,255,255,.06);--accent-ink:var(--navy-accent);--accent-soft:rgba(143,176,255,.14);--line-2:rgba(184,196,224,.28);
  background:var(--navy);color:var(--on-navy);box-shadow:inset 0 0 0 1px var(--edge)}
.card.dark .sm,.card.dark .mute{color:var(--on-navy-3)}
.card.clay,.clay-card{background:var(--warn-soft);color:var(--ink)}
.card.clay strong,.clay-card strong{color:var(--warn)}
.card.green{background:var(--accent-soft)}

/* ---------- grouped lists ---------- */
.list{border-radius:var(--r-3);background:var(--surface);overflow:hidden}
.list.flat{border-radius:0;background:transparent}
.list.flat .row{padding-inline:0}
.row{position:relative;display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:56px;padding:var(--s-3) var(--s-4);border:0;background:none;color:var(--ink);text-align:start;font-size:var(--fs-3)}
.row+.row::before,.list>*+*>.row::before,.row+.risk-r::before{content:'';position:absolute;top:0;inset-inline-start:var(--s-4);inset-inline-end:0;height:1px;background:var(--line)}
/* a flat list has no inset: the hairline starts on the content edge, where the avatars and text start */
.list.flat .row+.row::before,.list.flat>*+*>.row::before{inset-inline-start:0}
button.row{cursor:pointer;transition:background-color var(--t-1)}
button.row:active{background:var(--surface-2)}
.row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-a{font-weight:var(--fw-2);line-height:var(--lh-t)}
.row-b{font-size:var(--fs-2);color:var(--ink-3);line-height:var(--lh-t)}
.row-b.warn{color:var(--warn)}.row-b.dark{color:var(--ink);font-size:var(--fs-2)}
.chev{flex-shrink:0;color:var(--ink-3)}
.lk-chev{flex-shrink:0}
[dir=rtl] .lk-chev{transform:scaleX(-1)}
[dir=rtl] .chev{transform:scaleX(-1)}
.more-row{justify-content:center;min-height:var(--tap);color:var(--accent-ink);font-size:var(--fs-2);font-weight:var(--fw-2)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line);font-size:var(--fs-2)}
.kv:first-of-type{border-top:0}
.kv b{font-weight:var(--fw-2);text-align:end}
.kv.big-kv{font-size:var(--fs-3)}.kv.big-kv b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line);font-size:var(--fs-2)}
/* no divider above the first row of a card or list */
:is(.card,.list,.stack)>.prow:first-child{border-top:0}
.prow.pick{width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:start;cursor:pointer}

/* ---------- metrics: unboxed numbers, dividers between them ---------- */
.stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0}
.stat-l{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;line-height:var(--lh-t);color:var(--ink-3)}
.stat-v{font-size:var(--fs-5);color:var(--ink);overflow-wrap:break-word}
.stat-s{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-3);line-height:var(--lh-t)}
.stat-s.good{color:var(--ok)}.stat-s.warn,.stat-s.clay{color:var(--warn)}
.g2>.stat+.stat,.g3>.stat+.stat,.g4>.stat+.stat,.g5>.stat+.stat{border-inline-start:1px solid var(--line);padding-inline-start:var(--s-3)}
/* the first stat of every row has no divider before it */
.g2>.stat:nth-child(2n+1),.g3>.stat:nth-child(3n+1),.g4>.stat:nth-child(4n+1),.g5>.stat:nth-child(5n+1){border-inline-start:0;padding-inline-start:0}
@media (max-width:999px){.g5>.stat:nth-child(5n+1){border-inline-start:1px solid var(--line);padding-inline-start:var(--s-3)}.g5>.stat:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}}
@media (max-width:699px){.g4>.stat:nth-child(4n+1),.g5>.stat:nth-child(3n+1),.g5>.stat:nth-child(5n+1){border-inline-start:1px solid var(--line);padding-inline-start:var(--s-3)}.g4>.stat:nth-child(2n+1),.g5>.stat:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}}
.delta{font-size:var(--fs-2);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.delta.good{color:var(--ok)}.delta.bad{color:var(--warn)}
.delta small{display:block;font-size:var(--fs-1);font-weight:var(--fw-1);color:var(--ink-3);text-align:end}
.card.dark .delta.good{color:var(--on-navy-ok)}.card.dark .delta.bad{color:var(--on-navy-warn)}.card.dark .delta small{color:var(--on-navy-2)}

/* ---------- badges and status ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px var(--s-2);border-radius:var(--r-1);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2);line-height:var(--lh-t);white-space:nowrap}
.badge.clay{background:var(--warn-soft);color:var(--warn)}
.badge.green{background:var(--accent-soft);color:var(--accent-ink)}
.badge.gray{background:var(--fill);color:var(--ink-2)}
.pill-st,.st-dot,.g2-st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);white-space:nowrap}
.pill-st::before,.st-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.pill-st.good::before,.st-dot.good::before{background:var(--ok-fill)}.pill-st.warn::before,.st-dot.warn::before{background:var(--warn-fill)}.pill-st.bad::before,.st-dot.bad::before{background:var(--bad-fill)}
.g2-st i{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex-shrink:0}.g2-st.good i{background:var(--ok-fill)}.g2-st.warn i{background:var(--warn-fill)}.g2-st.bad i{background:var(--bad-fill)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex-shrink:0}
.dot-l{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.dot-l.read{background:transparent}
.rec-n{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--accent-ink)}
/* a word, not a pill: Online in the accent colour, Class in plain ink */
.on-tag{display:inline;color:var(--accent-ink);font-weight:var(--fw-2)}
.on-tag.cls{color:var(--ink-2)}

/* ---------- avatars ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;background:var(--fill);color:var(--ink-2);font-weight:var(--fw-2);overflow:hidden;letter-spacing:0;font-variant-numeric:normal}
.avatar.dark{background:var(--navy-2);color:var(--on-navy)}
.avatar.ph img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.em{background:var(--accent-soft);color:var(--accent-ink)}
.avatar.em svg{width:56%;height:56%}
.avatar-btn{background:none;border:0;padding:0;border-radius:50%}
.who{display:flex;align-items:center;gap:var(--s-3)}

/* ---------- notes and empty states ---------- */
.note{padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-2);line-height:var(--lh-b)}
.card .note{background:var(--fill)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.ok-note{background:var(--ok-soft);color:var(--ok)}
.note a{color:inherit;font-weight:var(--fw-2)}
/* a note that starts with an icon: icon and text side by side */
.note:has(>svg:first-child){display:flex;align-items:flex-start;gap:var(--s-2)}
.note>svg:first-child{flex:none;margin-top:3px}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-6) var(--s-4);border-radius:var(--r-3);background:var(--surface);text-align:center}
.empty strong{font-size:var(--fs-3);font-weight:var(--fw-2)}
.empty>.empty-ic{display:grid;place-items:center;max-width:none;margin-bottom:var(--s-1);color:var(--ink-3)}
.empty span{max-width:36ch;font-size:var(--fs-2);color:var(--ink-3)}
.empty .btn{width:auto;margin-top:var(--s-2)}
.chart-empty{padding:var(--s-6) var(--s-3);text-align:center;color:var(--ink-3);font-size:var(--fs-2)}

/* ---------- loading placeholders ---------- */
.sk{border-radius:var(--r-2);background:var(--fill);animation:xb-pulse 1.4s ease-in-out infinite}
.sk-t{height:16px;width:40%}.sk-h{height:36px;width:70%}.sk-c{height:120px;border-radius:var(--r-3)}.sk-r{height:56px}
@keyframes xb-pulse{50%{opacity:.55}}

/* ---------- tables ---------- */
.tbl-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tbl-wrap{position:relative;overflow-x:auto;overscroll-behavior-x:contain;border-radius:var(--r-2)}
.card .tbl-wrap{background:linear-gradient(to right,var(--surface) 40%,transparent) left/32px 100% no-repeat local,linear-gradient(to left,var(--surface) 40%,transparent) right/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--scroll-sh),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--scroll-sh),transparent) right/12px 100% no-repeat scroll}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-2)} /* tabular figures on the number cells only (base.css), so names keep a normal hyphen */
.tbl th{position:sticky;top:0;z-index:1;height:40px;padding:0 var(--s-3);border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink-3);font-size:var(--fs-1);font-weight:var(--fw-2);text-align:start;white-space:nowrap}
.tbl td{height:52px;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle;text-align:start}
/* a table wider than its card: the first column stays put, and a soft edge shows there is more to scroll */
.tbl-wrap:not(.fits){background:linear-gradient(to right,var(--surface) 30%,transparent) left center / 40px 100% no-repeat local,linear-gradient(to left,var(--surface) 30%,transparent) right center / 40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--ink) 16%,transparent),transparent) right center / 14px 100% no-repeat scroll,radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--ink) 16%,transparent),transparent) left center / 14px 100% no-repeat scroll}
.tbl-wrap:not(.fits) .tbl th:first-child,.tbl-wrap:not(.fits) .tbl td:first-child{position:sticky;inset-inline-start:0;z-index:2;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
[dir=rtl] .tbl-wrap:not(.fits) .tbl th:first-child,[dir=rtl] .tbl-wrap:not(.fits) .tbl td:first-child{box-shadow:inset 1px 0 0 var(--line)}
.tbl-wrap:not(.fits) .tbl td:first-child{max-width:180px;overflow:hidden}
/* the sticky first column wraps its text instead of running over the next column */
.tbl-wrap:not(.fits) .tbl td:first-child :is(b,strong,span,a,small){white-space:normal;overflow-wrap:break-word;min-width:0}
.tbl-wrap:not(.fits) .tbl td:not(:first-child){white-space:nowrap}
@media (hover:hover) and (pointer:fine){.tbl tbody tr:hover>td{background:var(--surface-2)}}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num,.tbl th.num{text-align:end;white-space:nowrap}
/* a numeric table cell keeps the text font (.num alone is the display numeral style) */
.tbl td.num,.tbl th.num{font-family:var(--font);font-variation-settings:normal;font-stretch:normal;font-weight:inherit;line-height:inherit;letter-spacing:normal;font-size:inherit}
.tbl th.num{font-size:var(--fs-1);font-weight:var(--fw-2)}
.tbl td small{display:block;font-size:var(--fs-1);color:var(--ink-3)}
.tbl tr.clk{cursor:pointer}
.tbl tr.b td{font-weight:var(--fw-2)}
.tbl td.neg{color:var(--bad)}
.tbl.mini td,.tbl.mini th{padding:var(--s-2)}
.tbl.heat td.lo{color:var(--warn);font-weight:var(--fw-2)}

/* ---------- progress bars: the fill scales from the old value to the new one (transform only) ---------- */
.pbar,.lg-bar,.alloc-bar,.g2-bar,.gf-bar,.mbar,.cp-bar,.st-bar,.onb-bar,.plg-bar,.rt-bar,.pg-bar,.pk-b,.ms-p{position:relative;display:block;height:8px;border-radius:var(--r-pill);background:var(--fill);overflow:hidden}
.pbar>i,.lg-bar>i,.alloc-bar>i,.g2-bar>i,.gf-bar>i,.mbar>i,.cp-bar>i,.st-bar>i,.onb-bar>i,.plg-bar>i,.rt-bar>i,.pg-bar>i,.pk-b>i,.ms-p>i,.hb-t>i,.vol-t>.fill{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,1));transition:transform var(--t-3) var(--ease-out)}
.pbar>i[style*="--p"],.lg-bar>i[style*="--p"],.alloc-bar>i[style*="--p"],.g2-bar>i[style*="--p"],.gf-bar>i[style*="--p"],.mbar>i[style*="--p"],.cp-bar>i[style*="--p"],.st-bar>i[style*="--p"],.onb-bar>i[style*="--p"],.plg-bar>i[style*="--p"],.rt-bar>i[style*="--p"],.pg-bar>i[style*="--p"],.pk-b>i[style*="--p"],.ms-p>i[style*="--p"],.hb-t>i[style*="--p"],.vol-t>.fill[style*="--p"]{width:100%}
[dir=rtl] .pbar>i,[dir=rtl] .lg-bar>i,[dir=rtl] .alloc-bar>i,[dir=rtl] .g2-bar>i,[dir=rtl] .gf-bar>i,[dir=rtl] .mbar>i,[dir=rtl] .cp-bar>i,[dir=rtl] .st-bar>i,[dir=rtl] .onb-bar>i,[dir=rtl] .plg-bar>i,[dir=rtl] .rt-bar>i,[dir=rtl] .pg-bar>i,[dir=rtl] .pk-b>i,[dir=rtl] .ms-p>i,[dir=rtl] .hb-t>i,[dir=rtl] .vol-t>.fill{transform-origin:right center}
@starting-style{.pbar>i,.lg-bar>i,.alloc-bar>i,.g2-bar>i,.gf-bar>i,.mbar>i,.cp-bar>i,.st-bar>i,.onb-bar>i,.plg-bar>i,.rt-bar>i,.pg-bar>i,.pk-b>i,.ms-p>i,.hb-t>i,.vol-t>.fill{transform:scaleX(0)}}
.card.dark .pbar{background:rgba(255,255,255,.12)}.card.dark .pbar>i{background:var(--navy-accent)}
/* rings: one SVG circle, dash offset eases from the old value to the new one */
.xb-ring{position:relative;display:inline-grid;place-items:center;flex-shrink:0}
.xb-ring>svg{transform:rotate(-90deg)}
[dir=rtl] .xb-ring>svg{transform:rotate(-90deg) scaleY(-1)}
.xb-ring .trk{stroke:var(--fill)}
.xb-ring .val{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset var(--t-3) var(--ease-out)}
.card.dark .xb-ring .trk{stroke:rgba(255,255,255,.12)}.card.dark .xb-ring .val{stroke:var(--navy-accent)}
.xb-ring>b,.xb-ring>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}

/* ---------- theme switch: Auto, Light, Dark ---------- */
.th-sw{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--fill)}
.th-sw button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-width:var(--tap);height:40px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:none;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);cursor:pointer;transition:background-color var(--t-1) var(--ease-out),color var(--t-1) var(--ease-out)}
.th-sw.compact button{padding:0;width:40px;min-width:40px}
.th-sw button.on{background:var(--surface);color:var(--ink);box-shadow:var(--elev-1)}
:root[data-theme=dark] .th-sw button.on{box-shadow:inset 0 0 0 1px var(--edge)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .th-sw button.on{box-shadow:inset 0 0 0 1px var(--edge)}}
.th-sw button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (hover:hover) and (pointer:fine){.th-sw button:not(.on):hover{color:var(--ink)}}
/* on the welcome and sign-in screens */
.th-sw.on-xi{background:var(--xi-fill)}
.th-sw.on-xi button{height:40px;color:var(--xi-mut)}
.th-sw.on-xi button.on{background:var(--xi-chip);color:var(--xi-ink)}

/* ---------- feedback ---------- */
.fb{display:flex;flex-direction:column;gap:var(--s-4)}
.fb textarea{min-height:120px;resize:vertical}
.fb-shot{display:block;width:100%;max-height:220px;object-fit:contain;object-position:top;border-radius:var(--r-2);background:var(--surface-2)}

/* =====================================================================
   SIGNATURE COMPONENTS: pace bar, spark, stat row, pulse, needs you, hero
   ===================================================================== */
/* pace bar: actual against the whole target; the tick is where you should be today */
.pace{position:relative;display:block;width:100%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 20%,transparent)} /* a track you can see on the page and in cards */
.pace>i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--f) * 100%);border-radius:inherit;background:var(--accent);transition:width var(--t-3) var(--ease)}
.pace.off>i{background:var(--warn-fill)}
.pace>b{position:absolute;top:-4px;bottom:-4px;inset-inline-start:calc(var(--t) * 100% - 1px);width:2px;border-radius:1px;background:var(--ink)}
.pace.on-navy{background:rgba(255,255,255,.14)}
.pace.on-navy>i{background:var(--navy-accent)}
.pace.on-navy.off>i{background:var(--on-navy-warn)}
.pace.on-navy>b{background:#FFFFFF}
/* spark: a small trend line in a stat row */
.spark{display:block;overflow:visible}
.spark polyline{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:var(--chart-1)}
.spark-none{width:112px;height:28px}
/* stat row: label and context at the start, the visual, the value at the end */
.srow{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(88px,auto) 18px;align-items:center;gap:var(--s-4);width:100%;min-height:64px;padding:var(--s-3) 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:start;font:inherit;cursor:default}
.srow:last-child{border-bottom:0}
.srow.clk{position:relative;cursor:pointer;transition:background-color var(--t-1) var(--ease)}
.srow-go{display:flex;align-items:center;justify-content:center;width:18px;height:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.srow-go::after{content:'';position:absolute;inset:0}
.srow-go:focus-visible{outline:none}
.srow.clk:has(.srow-go:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.srow.clk :is(button,a,summary):not(.srow-go){position:relative;z-index:1}
.srow:not(.clk){grid-template-columns:minmax(0,1fr) 112px minmax(88px,auto) 0}
.sr-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sr-l{display:block;font-size:var(--fs-3);font-weight:var(--fw-2)}
.sr-l>.info{display:inline-flex;vertical-align:-3px;margin-inline-start:var(--s-1)}
.sr-c{font-size:var(--fs-2);color:var(--ink-3)}
.sr-c.off{color:var(--warn)}
.sr-v{display:flex;align-items:center}
.sr-n{font-size:var(--fs-3);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.srow .chev{color:var(--ink-4)}
[dir=rtl] .srow .chev{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.srow.clk:hover{background:linear-gradient(90deg,transparent,var(--surface-2) 12%,var(--surface-2) 88%,transparent)}}

@media (max-width:599px){.srow{grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:'t n c' 'v v v';row-gap:var(--s-2)}.srow:not(.clk){grid-template-columns:minmax(0,1fr) auto}.sr-t{grid-area:t}.sr-n{grid-area:n}.sr-v{grid-area:v}.srow-go{grid-area:c}.sr-v:empty{display:none}.sr-v .spark{width:100%}}
/* pulse headline */
.pulse{max-width:68ch;margin:0;font-size:var(--fs-4);font-weight:var(--fw-2);line-height:var(--lh-t);color:var(--ink);text-wrap:pretty}
.pulse .off{color:var(--warn)}
/* needs you today */
.needs{display:flex;flex-direction:column;gap:0;padding:var(--s-5);border-radius:var(--r-3);background:var(--surface)}
.needs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.needs-h h2{margin:0;font-size:var(--fs-4);font-weight:var(--fw-2)}
.need{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.need>:not(.btn-sm){grid-column:1}
.need>.btn-sm{grid-column:2;grid-row:1 / span 3}
.need:last-of-type{border-bottom:0}
.need strong{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:var(--lh-t)}
.need-tag{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.need-tag.bad{color:var(--bad)}
.need-none{padding-top:var(--s-4)}
.needs-more{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2)}
[dir=rtl] .needs-more .chev{transform:scaleX(-1)}
/* hero card: the one navy card on a page */
.hero-card{position:relative;display:flex;flex-direction:column;gap:var(--s-4);min-width:0;padding:var(--s-6) var(--s-4);border-radius:var(--r-3);background:var(--navy);color:var(--on-navy)}
.hero-card.tap-c{cursor:pointer}
.hc-go{position:absolute;inset:0;z-index:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
.hc-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-card.tap-c :is(button,a,summary,input,select):not(.hc-go){position:relative;z-index:1}
.hc-eyebrow{display:flex;align-items:center;gap:var(--s-1);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-2)}
.hc-num{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-size:var(--fs-7);font-weight:var(--fw-3);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-navy)}
[dir=rtl] .hc-num{font-family:var(--font-d);letter-spacing:0}
.hc-num small{margin-inline-end:var(--s-2);font-size:var(--fs-5)}
.hc-sub{font-size:var(--fs-2);color:var(--on-navy-2)}
.hc-pace{display:flex;flex-direction:column;gap:var(--s-2)}
.hc-pace-w{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-2);color:var(--on-navy-2)}
.hc-pace-w .off{color:var(--on-navy-warn)}
.hc-split{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--navy-line);font-size:var(--fs-2);color:var(--on-navy-2)}
.hc-split b{color:var(--on-navy);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.hc-split .off{color:var(--on-navy-warn)}
.hc-lab{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-3)}
.hero-trend{position:relative;flex:1 1 150px;width:100%;min-width:0;min-height:150px}
.hero-trend>svg{position:absolute;inset:0}
.hero-trend svg{display:block;overflow:visible;direction:ltr} /* time runs left to right; the end label stays after the last point in Arabic too */
.ht-fill{fill:var(--navy-accent);opacity:.14}
.ht-line{fill:none;stroke:var(--navy-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ht-dot{fill:var(--navy);stroke:var(--navy-accent);stroke-width:2}
.ht-dot.part{fill:var(--navy-accent)}
.ht-end{fill:var(--on-navy);font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.ht-x{fill:var(--on-navy-3);font-size:var(--fs-1)}
.ht-zero{stroke:var(--on-navy-3);stroke-width:.5}
/* the hero's text starts on the same axis as the cards under it (16 px, 24 px in the gym portal) */
.gym .hero-card{padding-inline:var(--s-5)}
@media (max-width:599px){.hero-card{padding-block:var(--s-5)}.hc-num{font-size:48px}}
/* a tab or chip row wider than the screen: the far edge fades to show there is more */
.seg.more,.utabs.more,.chips.scrollx.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
[dir=rtl] .seg.more,[dir=rtl] .utabs.more,[dir=rtl] .chips.scrollx.more{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}

/* ---------- installable app: update bar and add to home screen ---------- */
.upd-bar,.a2hs{position:fixed;z-index:var(--z-toast);inset-inline:var(--gutter);display:flex;align-items:center;gap:var(--s-3);max-width:560px;margin-inline:auto;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-radius:var(--r-3);background:var(--surface);color:var(--ink);box-shadow:var(--elev-2);animation:xb-fade var(--t-2) var(--ease)}
.upd-bar{top:calc(var(--safe-t) + var(--s-4))}
.upd-bar>span{flex:1;font-size:var(--fs-2);font-weight:var(--fw-2)}
.a2hs{bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-4));align-items:flex-start}
.a2hs img{flex:none;border-radius:var(--r-2)}
.a2hs .grow{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1)}
.a2hs .btn-sm{margin-top:var(--s-2)}
:root[data-theme=dark] .upd-bar,:root[data-theme=dark] .a2hs{box-shadow:inset 0 0 0 1px var(--edge)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .upd-bar,:root:not([data-theme=light]) .a2hs{box-shadow:inset 0 0 0 1px var(--edge)}}

/* ---------- privacy and terms ---------- */
.scr.legal{gap:var(--s-4)}
.scr.legal p{margin:0;line-height:var(--lh-b);color:var(--ink-2)}
/* one measure for the notice and the text: about 68 characters a line */
.scr.legal>*{width:100%;max-width:512px;box-sizing:border-box} /* one measure for the header, the notice and the text */
.scr.legal section{display:flex;flex-direction:column;gap:var(--s-2)}
.scr.legal .h2{margin:var(--s-3) 0 0;font-size:var(--fs-4)}
.legal-links{display:inline-flex;gap:var(--s-4)}
.checkline{min-height:var(--tap);align-items:center}.checkline input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}
.consent{gap:var(--s-4)}
.consent ul{display:flex;flex-direction:column;gap:var(--s-3);margin:0;padding-inline-start:var(--s-5);line-height:var(--lh-b);color:var(--ink-2)}
.danger-row .row-a{color:var(--bad)}
.del-list{display:flex;flex-direction:column;gap:var(--s-2);margin:0;padding-inline-start:var(--s-5);font-size:var(--fs-2);color:var(--ink-2)}
a.row{text-decoration:none;color:inherit}
.top>.search{flex-direction:row;align-items:center;width:min(280px,100%)}
.tbl.heat th.num,.tbl.heat td.num{text-align:end}
/* in a table a status reads as coloured text with a dot, not a filled pill on every row */
.tbl td .badge{gap:6px;padding:0;background:none;font-weight:var(--fw-1)}
.tbl td .badge::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.tbl td .badge.gray{color:var(--ink-3)}
/* a name in a table that opens its record: reads as text, underlines on hover, keeps a 44 px target on touch */
.cell-link{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.cell-link:hover b{text-decoration:underline;text-underline-offset:3px}
.cell-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-1)}
@media (pointer:coarse){.cell-link{position:relative}.cell-link::after{content:'';position:absolute;inset:-12px -4px}}
/* a code inside a table row reads as data, not a heading */
.tbl .code{font-size:var(--fs-2);font-weight:var(--fw-2);letter-spacing:.04em;font-family:var(--font);font-variation-settings:normal;font-stretch:100%}
.empty-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-4) 0}
.card.dark .warn-on-navy{color:var(--on-navy-warn)}

/* a card header with a title and a subtitle: the link on the end sits on the title's line */
.card>.top:has(>div>strong+span){align-items:flex-start}
/* a card header with a search field: on phones the search takes its own full-width line under the title */
.card>.top:has(>.search){flex-wrap:wrap}
@media (max-width:599px){.card>.top>.search{flex:1 1 100%;max-width:none}}
/* a narrow Needs-you card puts each action under its text instead of squeezing the text into a thin column */
.needs{container-type:inline-size}
@container (max-width:360px){.need{grid-template-columns:minmax(0,1fr)}.need>.btn-sm{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--s-2)}}
/* a stat row with no small visual drops that column, so a narrow card gives the room to the label */
.srow>.sr-v:empty{display:none}
.srow:has(>.sr-v:empty){grid-template-columns:minmax(0,1fr) minmax(40px,auto) 18px}
.srow:not(.clk):has(>.sr-v:empty){grid-template-columns:minmax(0,1fr) minmax(40px,auto)}
.card>.top:has(.search){flex-wrap:wrap}
@media (max-width:599px){.card>.top>.row-actions:has(>.search){flex:1 1 100%;min-width:0}.card>.top>.row-actions>.search{flex:1 1 auto;min-width:0;width:100%}}