/* eCab - signal-board minimalism. Mobile first, sunlight readable, 48px targets. */

:root{
  --bg:#eef0f3; --card:#ffffff; --card-2:#f7f8fa; --line:#cfd4db; --line-strong:#9aa3ae;
  --ink:#0f172a; --ink-2:#334155; --muted:#4b5563; --on-brand:#ffffff;
  --brand:#1d4ed8; --brand-ink:#1e3a8a; --brand-soft:#dbeafe;
  --new:#b45309;  --new-bg:#fef3c7;
  --asg:#1d4ed8;  --asg-bg:#dbeafe;
  --run:#6d28d9;  --run-bg:#ede9fe;
  --done:#15803d; --done-bg:#dcfce7;
  --bad:#b91c1c;  --bad-bg:#fee2e2;
  --hold:#374151; --hold-bg:#e5e7eb;
  --cash:#0f766e; --cash-bg:#ccfbf1;
  --font:"Inter","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-num:2.25rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r:10px; --r-lg:12px; --tap:48px; --appbar:56px; --tabbar:64px; --rail:220px;
  --shadow:0 1px 2px rgba(15,23,42,.08);
  --focus:0 0 0 3px #93c5fd;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0b1220; --card:#131c2e; --card-2:#1a2438; --line:#2a3650; --line-strong:#3e4c68;
         --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#a3adbd; --brand:#60a5fa; --brand-ink:#bfdbfe; --brand-soft:#1e3a8a;
         --new:#fcd34d; --new-bg:#3b2a08; --asg:#93c5fd; --asg-bg:#172554; --run:#c4b5fd; --run-bg:#2e1065;
         --done:#86efac; --done-bg:#052e16; --bad:#fca5a5; --bad-bg:#450a0a; --hold:#d1d5db; --hold-bg:#1f2937;
         --cash:#5eead4; --cash-bg:#042f2e; --on-brand:#0b1220; --shadow:none; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-md)/1.45 var(--font);-webkit-font-smoothing:antialiased;
     padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));min-height:100vh}
html[lang=hi] body{line-height:1.6}
a{color:var(--brand)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
h2,h3{margin:0}
p{margin:0 0 var(--s3)}
.muted{color:var(--muted)} .small{font-size:var(--fs-sm)} .bold{font-weight:700} .right{text-align:right} .center{text-align:center}
.num{font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap}
.hi-only{display:none} html[lang=hi] .hi-only{display:inline} html[lang=hi] .en-only{display:none}
.row-flex{display:flex;align-items:center;gap:var(--s2)} .grow{flex:1;min-width:0} .wrap{flex-wrap:wrap}
.mt{margin-top:var(--s3)} .mb{margin-bottom:var(--s3)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:30;height:var(--appbar);display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3);background:var(--card);border-bottom:1px solid var(--line)}
.appbar h1{flex:1;min-width:0;margin:0;font-size:var(--fs-lg);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar h1 small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted);line-height:1.2}
.ib{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:none;color:var(--ink);border-radius:50%;font:inherit;cursor:pointer;position:relative;padding:0;text-decoration:none}
.ib:active{background:var(--card-2)}
.ib .n{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;font-weight:700}
.lang{min-width:var(--tap);height:36px;padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:600 var(--fs-sm) var(--font);cursor:pointer}
.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);object-fit:cover;background:var(--card-2)}
#buttonDiv{min-height:0}
.offline{background:var(--hold-bg);color:var(--hold);text-align:center;font-size:var(--fs-sm);font-weight:600;padding:6px var(--s3)}
.support{background:var(--new-bg);color:var(--new);text-align:center;font-size:var(--fs-sm);font-weight:600;padding:6px var(--s3)}
.viewas{display:flex;align-items:center;justify-content:center;gap:var(--s3);background:var(--run-bg);color:var(--run);font-size:var(--fs-sm);font-weight:600;padding:4px var(--s3)} .viewas .btn.sm{min-height:28px;padding:0 10px;color:inherit;border-color:currentColor;background:transparent}
.company{position:sticky;top:var(--appbar);z-index:29;width:100%;display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:36px;padding:4px var(--s3);border:0;border-bottom:1px solid var(--line);background:var(--brand-soft);color:var(--brand-ink);font:600 var(--fs-sm) var(--font);cursor:default;text-align:left}
.company svg{width:18px;height:18px}
.company .role{font-weight:400;opacity:.85}
.company .role::before{content:"\00b7";margin:0 6px}
.company .chev{margin-left:4px}
.company.switchable{cursor:pointer}
@media (min-width:900px){.company{justify-content:flex-start;padding-left:var(--s5)}}

/* ---------- tab bar (mobile) / left rail (desktop) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);display:flex;background:var(--card);border-top:1px solid var(--line)}
.tabbar:empty{display:none}
.tabbar .sep,.tabbar a.sub{display:none}
mark{background:var(--new-bg);color:inherit;border-radius:3px;padding:0 2px}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:var(--tap);
  color:var(--muted);text-decoration:none;font-size:var(--fs-xs);font-weight:600;position:relative;padding:0 2px}
.tabbar a svg{width:26px;height:26px}
.tabbar a[aria-current]{color:var(--brand)}
.tabbar a .n{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px}
.page{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);max-width:720px;margin:0 auto;width:100%}
@media (min-width:900px){
  body{padding-bottom:0;padding-left:var(--rail)}
  .appbar{padding-left:var(--s5)}
  .tabbar{top:0;bottom:auto;width:var(--rail);height:100vh;flex-direction:column;justify-content:flex-start;padding:var(--s4) var(--s2);border-top:0;border-right:1px solid var(--line);gap:2px}
  .tabbar a{flex:0 0 var(--tap);flex-direction:row;justify-content:flex-start;gap:var(--s3);padding:0 var(--s3);border-radius:var(--r);font-size:var(--fs-md)}
  .tabbar a[aria-current]{background:var(--brand-soft)}
  .tabbar a .n{position:static;margin-left:auto}
  .tabbar{overflow-y:auto}
  .tabbar .sep{display:block;height:1px;background:var(--line);margin:var(--s2) var(--s3)}
  .tabbar a.sub{display:flex;flex-basis:38px;font-size:var(--fs-sm);color:var(--ink-2)} .tabbar a.sub svg{width:20px;height:20px}
  .tabbar a.sub[aria-current]{color:var(--brand)}
  .tabbar::before{content:"eCab";display:block;font-weight:700;font-size:var(--fs-xl);color:var(--brand);padding:var(--s2) var(--s3) var(--s4)}
  .page{max-width:1100px;padding:var(--s4) var(--s5)}
  .page.narrow{max-width:720px}
}

/* ---------- buttons ---------- */
.btn{min-height:var(--tap);padding:0 var(--s4);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink);
  font:600 var(--fs-md) var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;text-decoration:none;text-align:center}
.btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.btn.sm{min-height:36px;padding:0 var(--s3);font-size:var(--fs-sm)}
.btn.big{width:100%;min-height:64px;font-size:var(--fs-xl);border-radius:var(--r-lg);font-weight:700;flex-direction:row}
.btn.big svg{width:30px;height:30px}
.btn.big .two{display:flex;flex-direction:column;line-height:1.15}
.btn.big .two small{font-size:var(--fs-md);font-weight:600;opacity:.9}
.btn.step-asg{background:var(--asg);border-color:var(--asg);color:#fff}
.btn.step-run{background:var(--run);border-color:var(--run);color:#fff}
.btn.step-done{background:var(--done);border-color:var(--done);color:#fff}
.btn.call{background:var(--done-bg);border-color:var(--done);color:var(--done)}
.btn.cash{background:var(--cash-bg);border-color:var(--cash);color:var(--cash)}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.btn-row.three{grid-template-columns:1fr 1fr 1fr}
.fab{position:fixed;right:var(--s4);bottom:calc(var(--tabbar) + var(--s4) + env(safe-area-inset-bottom));z-index:25;width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);border:0;display:grid;place-items:center;box-shadow:0 6px 16px rgba(15,23,42,.25);cursor:pointer}
.fab svg{width:28px;height:28px}
@media (min-width:900px){.fab{bottom:var(--s5)}}

/* ---------- status pill ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap;color:var(--hold);background:var(--hold-bg)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pill.sm{height:22px;font-size:var(--fs-xs);padding:0 8px}
.st-Enquiry,.st-Quoted,.st-Confirmed,.st-Planned,.st-Waiting,.st-Pending,.st-Unpaid,.st-Draft,.st-Submitted,.st-Due,.st-OPEN,.st-FILLING,.st-Offered,.st-Rescheduled,.st-Open,.st-Requested{color:var(--new);background:var(--new-bg)}
.st-Assigned,.st-Accepted,.st-Issued,.st-Received,.st-NEARLY_FULL,.st-READY,.st-Reserved,.st-CheckedIn,.st-Dispatched,.st-Full{color:var(--asg);background:var(--asg-bg)}
.st-Arrived,.st-Boarding,.st-Started,.st-OnTrip,.st-BOARDING,.st-DEPARTED,.st-Boarded,.st-PartiallyPaid,.st-Partial,.st-PartiallyAllocated,.st-Departed{color:var(--run);background:var(--run-bg)}
.st-Completed,.st-Paid,.st-Active,.st-Available,.st-Approved,.st-Allocated,.st-COMPLETED,.st-Collected,.st-Dropped,.st-Closed,.st-Posted,.st-Fulfilled,.st-AtStand{color:var(--done);background:var(--done-bg)}
.st-Cancelled,.st-NoShow,.st-Expired,.st-Lost,.st-CANCELLED,.st-EXPIRED,.st-Breakdown,.st-Incident,.st-Delayed,.st-Rejected,.st-Reversed,.st-Void,.st-DocBlocked,.st-Blocked,.st-Suspended,.st-Declined{color:var(--bad);background:var(--bad-bg)}
.st-OffDuty,.st-Inactive,.st-Leave,.st-Maintenance,.st-Skipped,.st-Unavailable,.st-CheckedOut,.st-Waived{color:var(--hold);background:var(--hold-bg)}

/* ---------- cards + list rows ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);box-shadow:var(--shadow)}
.card h2,.section-title{margin:0 0 var(--s2);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.card h2 .cnt{color:var(--ink);margin-left:6px}
.list{display:flex;flex-direction:column;gap:var(--s2)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;min-height:64px;
  padding:var(--s3) var(--s4);background:var(--card);border:1px solid var(--line);border-left:5px solid var(--line-strong);
  border-radius:var(--r);color:inherit;text-decoration:none;cursor:pointer;text-align:left;font:inherit;width:100%}
.row.static{cursor:default}
.row.st-Enquiry,.row.st-Quoted,.row.st-Confirmed,.row.st-Planned,.row.st-Waiting,.row.st-OPEN,.row.st-FILLING,.row.st-Draft,.row.st-Unpaid,.row.st-Issued,.row.st-Open,.row.st-Requested{border-left-color:var(--new)}
.row.st-Assigned,.row.st-Accepted,.row.st-NEARLY_FULL,.row.st-READY,.row.st-Dispatched,.row.st-Full{border-left-color:var(--asg)}
.row.st-Arrived,.row.st-Boarding,.row.st-Started,.row.st-BOARDING,.row.st-DEPARTED,.row.st-OnTrip,.row.st-PartiallyPaid,.row.st-Departed{border-left-color:var(--run)}
.row.st-Completed,.row.st-Paid,.row.st-Approved,.row.st-COMPLETED,.row.st-Closed,.row.st-Available,.row.st-Active{border-left-color:var(--done)}
.row.st-Cancelled,.row.st-NoShow,.row.st-CANCELLED,.row.st-EXPIRED,.row.st-Expired,.row.st-DocBlocked,.row.st-Breakdown,.row.st-Declined{border-left-color:var(--bad)}
.row .t{font-weight:700;font-size:var(--fs-lg);line-height:1.25}
.row .t svg{width:14px;height:14px;vertical-align:-2px;stroke:currentColor}
.row .s{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.row .lead{font-size:var(--fs-xl);font-weight:700;min-width:44px;text-align:center;line-height:1.1}
.row .lead small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.row .amt{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.row .trail{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row img.thumb{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--card-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s3);font-size:var(--fs-sm)}
.kv dt{color:var(--muted);margin:0} .kv dd{margin:0;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{min-height:36px;padding:0 var(--s3);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);font:600 var(--fs-sm) var(--font);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

/* ---------- sheet (bottom sheet on mobile, centred dialog on desktop) ---------- */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92vh;overflow:auto;
  border:0;border-radius:16px 16px 0 0;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background:var(--card);color:var(--ink);box-shadow:0 -8px 30px rgba(15,23,42,.25)}
dialog.sheet::backdrop{background:rgba(15,23,42,.5)}
dialog.sheet .sheet-x{position:absolute;top:var(--s2);right:var(--s2);color:var(--muted)}
dialog.sheet h2{padding-right:var(--tap)}
dialog.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto var(--s3)}
dialog.sheet h2{margin:0 0 var(--s3);font-size:var(--fs-xl);font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
dialog.sheet .actions{display:grid;gap:var(--s2);margin-top:var(--s4)}
dialog.sheet .who{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);font-weight:600}
dialog.sheet .who small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
@media (min-width:900px){dialog.sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(600px,90vw);border-radius:var(--r-lg)}
  dialog.sheet.wide{width:min(900px,92vw)} dialog.sheet .grab{display:none}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--s3)}
.field label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.field label .req{color:var(--bad)}
.field input,.field select,.field textarea{min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);color:var(--ink);font:400 var(--fs-md) var(--font);width:100%}
.field select{appearance:auto}
.field textarea{padding:var(--s3);min-height:80px;resize:vertical}
.field input.num{font-size:var(--fs-2xl);font-weight:700;text-align:center;font-variant-numeric:tabular-nums;min-height:64px}
.field .hint{font-size:var(--fs-xs);color:var(--muted)}
.field .err{color:var(--bad);font-size:var(--fs-sm);display:none} .field.invalid .err{display:block} .field.invalid input,.field.invalid select{border-color:var(--bad)}
.field.check{flex-direction:row;align-items:center;gap:var(--s3);min-height:var(--tap)} .field.check input{width:24px;height:24px;min-height:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 var(--s3)}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--card)}
.seg button{flex:1;min-height:var(--tap);border:0;background:transparent;color:var(--ink);font:600 var(--fs-sm) var(--font);cursor:pointer;padding:0 6px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
.seg.scroll{overflow-x:auto} .seg.scroll button{flex:0 0 auto;min-width:96px}
.seg.big button{min-height:64px;font-size:var(--fs-lg)}
.search{display:flex;gap:var(--s2)} .search input{flex:1;min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--fs-md) var(--font)}
.stepper{display:flex;align-items:center;gap:var(--s3)} .stepper button{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:var(--fs-xl);cursor:pointer}
.stepper b{font-size:var(--fs-2xl);min-width:40px;text-align:center}

/* ---------- feedback ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:92vw;
  padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--ink);color:var(--bg);font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;text-align:center}
.toast.show{opacity:1;pointer-events:auto} .toast.ok{background:var(--done);color:#fff} .toast.bad{background:var(--bad);color:#fff}
.toast button{margin-left:var(--s3);background:none;border:0;color:inherit;font:700 var(--fs-md) var(--font);text-decoration:underline;cursor:pointer}
@media (min-width:900px){.toast{bottom:var(--s5)}}
/* inside an open sheet (js/ui.js toastHost): at the top of the screen, clear of the sheet's action buttons */
dialog .toast{top:calc(var(--s3) + env(safe-area-inset-top));bottom:auto}

.empty{text-align:center;color:var(--muted);padding:var(--s6) var(--s4)} .empty svg{width:56px;height:56px;stroke:var(--line-strong);stroke-width:1.5}
.empty b{display:block;color:var(--ink);font-size:var(--fs-lg);margin:var(--s2) 0}
.skel{background:linear-gradient(90deg,var(--card-2) 25%,var(--line) 50%,var(--card-2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);min-height:64px}
@keyframes sk{to{background-position:-200% 0}}
.bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--hold-bg)} .bar i{display:block;height:100%}
.bar i.done{background:var(--done)} .bar i.run{background:var(--run)} .bar i.new{background:var(--new)} .bar i.bad{background:var(--bad)} .bar i.asg{background:var(--asg)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--fs-xs);color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);color:inherit;text-decoration:none}
.tile b{font-size:var(--fs-num);font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .tile span{font-size:var(--fs-sm);color:var(--muted)}
.tile small{font-size:var(--fs-xs);color:var(--muted)} .tile.alert b{color:var(--bad)} .tile.good b{color:var(--done)}
.badge-sync{color:var(--new);background:var(--new-bg)}
.hbar{display:grid;grid-template-columns:minmax(80px,140px) 1fr auto;gap:var(--s2);align-items:center;font-size:var(--fs-sm);padding:4px 0}
.hbar .track{height:14px;border-radius:7px;background:var(--hold-bg);overflow:hidden} .hbar .track i{display:block;height:100%;background:var(--brand)}
.steps{display:flex;justify-content:center;gap:10px;margin:var(--s2) 0} .steps i{width:12px;height:12px;border-radius:50%;background:var(--line)} .steps i.on{background:var(--brand)} .steps i.done{background:var(--done)}
.big-num{font-size:3.5rem;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);margin:var(--s2) 0}
.photo-grid{display:flex;flex-wrap:wrap;gap:var(--s2)} .photo-grid img{width:96px;height:96px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--card-2)}
.photo-grid .add{width:96px;height:96px;display:grid;place-items:center;border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--muted);cursor:pointer;background:var(--card)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .table th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.rf-table td{vertical-align:middle;padding:4px 6px} .rf-table input{width:76px;max-width:100%;min-height:40px;padding:0 6px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--fs-md) var(--font)}
.table td.r,.table th.r{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
.date-strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:2px} .date-strip button{flex:0 0 auto;min-width:64px;min-height:56px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink);font:600 var(--fs-sm) var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.date-strip button b{font-size:var(--fs-lg)} .date-strip button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.landing{min-height:calc(100vh - var(--appbar) - var(--tabbar));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);text-align:center;padding:var(--s5)}
.landing .logo{width:96px;height:96px;stroke:var(--brand);stroke-width:1.5}
.landing h2{font-size:var(--fs-2xl)} .landing p{color:var(--muted);max-width:420px}
.landing .g{min-width:260px}

/* Inside the native app's WebView (body.in-app, set by Site.master.cs from the AppEnter.aspx cookie or ?app=1): the app draws its own app bar and tabs */
.in-app{padding-bottom:var(--s3);padding-left:0}
.in-app .appbar,.in-app .tabbar,.in-app .company,.in-app #btnInstall,.in-app #btnInstallLanding{display:none}