/* ==========================================================================
   চাকা — components. Colour only from tokens.css, so both themes hold.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px;border-radius:6px;}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
h1,h2,h3,p{margin:0;}
svg.i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
svg.i--s{width:18px;height:18px;}

/* ---------------------------------------------------------------- shell */
.frame{height:100%;display:flex;justify-content:center;align-items:stretch;gap:28px;background:var(--ground);}
.app{position:relative;width:100%;max-width:430px;display:flex;flex-direction:column;min-height:0;background:var(--ground);overflow:hidden;}
.side{display:none;}
@media (min-width:900px) and (min-height:700px){
  .frame{background:var(--sunk);padding:24px;align-items:center;}
  .app{max-width:400px;height:100%;max-height:860px;border:1px solid var(--line-2);border-radius:36px;box-shadow:0 30px 70px -40px rgba(0,0,0,.7);}
  .side{display:flex;flex-direction:column;gap:14px;width:300px;max-height:860px;overflow:auto;}
}

/* ---------------------------------------------------------------- app bar */
.bar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 14px) 16px 10px;}
.bar__title{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar__sub{font-size:12.5px;color:var(--ink-3);font-weight:500;}
.iconbtn{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:999px;transition:background .15s;}
.iconbtn:hover{background:var(--sunk);}
.iconbtn--edge{margin-left:-10px;}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.brand__mark{width:34px;height:34px;flex:none;border-radius:999px;background:var(--press);color:var(--on-press);display:grid;place-items:center;}
.brand__name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.1;}

.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;}
.pill--wait{background:var(--lamp-wash);color:var(--lamp);border-color:transparent;}
.pill--ok{color:var(--led);}
.dot{width:7px;height:7px;border-radius:9px;background:currentColor;}

/* ---------------------------------------------------------------- scroll + tabs */
.screen{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 16px 24px;scroll-padding-bottom:120px;}
.screen > * + *{margin-top:14px;}
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);box-shadow:var(--sh-bar);padding:6px 6px calc(var(--safe-b) + 6px);}
.tabs--3{grid-template-columns:repeat(3,1fr);}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:54px;justify-content:center;border-radius:var(--r-m);font-size:12px;font-weight:600;color:var(--ink-3);}
.tab[aria-current="page"]{color:var(--ink);}
.tab[aria-current="page"] svg{stroke-width:2.1;}
.tab__badge{position:relative;}
.tab__badge[data-n]::after{content:attr(data-n);position:absolute;top:-6px;right:-12px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--terminal);color:#fff;font:700 11px/18px var(--display);text-align:center;}

/* ---------------------------------------------------------------- the plate */
/* The number painted on the back of the vehicle. Two bolts, a stencil figure. */
.plate{
  position:relative;flex:none;display:inline-grid;place-items:center;
  min-width:52px;height:40px;padding:0 10px;
  background:var(--plate);color:var(--plate-ink);
  border:1.6px solid var(--plate-edge);border-radius:var(--r-xs);
  font:700 21px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 2px var(--plate);
}
.plate::before,.plate::after{content:"";position:absolute;top:4px;width:3.5px;height:3.5px;border-radius:9px;background:var(--plate-ink);opacity:.55;}
.plate::before{left:4px;} .plate::after{right:4px;}
.plate--s{min-width:40px;height:30px;font-size:16px;padding:0 7px;}
.plate--s::before,.plate--s::after{top:3px;width:2.5px;height:2.5px;}
.plate--l{min-width:84px;height:62px;font-size:34px;border-width:2px;}
.plate--idle{opacity:.55;}

/* ---------------------------------------------------------------- tonight header */
.night{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-m);padding:16px 16px 14px;}
.night__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.night__label{font-size:13px;font-weight:600;color:var(--ink-3);}
.night__big{font:700 34px/1.05 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;}
.night__of{font:700 17px/1 var(--display);color:var(--ink-3);letter-spacing:-.01em;}
/* The charging rack: one cell per vehicle tonight, filled as the money comes in. */
.rack{display:flex;gap:3px;margin:14px 0 10px;height:14px;}
.rack i{flex:1;border-radius:3px;background:var(--sunk);border:1px solid var(--line);transition:background .35s ease, border-color .35s ease;}
.rack i[data-s="paid"]{background:var(--led-fill);border-color:transparent;}
.rack i[data-s="partial"]{background:linear-gradient(90deg,var(--led-fill) 50%,var(--sunk) 50%);}
.rack i[data-s="off"]{background:var(--lamp-fill);border-color:transparent;opacity:.8;}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend b{font:700 13.5px var(--display);color:var(--ink);font-variant-numeric:tabular-nums;}
.sw{width:10px;height:10px;border-radius:3px;background:var(--sunk);border:1px solid var(--line-2);}
.sw--paid{background:var(--led-fill);border-color:transparent;}
.sw--off{background:var(--lamp-fill);border-color:transparent;}

/* ---------------------------------------------------------------- chips (filters, choices) */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;}
.chip b{font:700 13px var(--display);font-variant-numeric:tabular-nums;}
.chip[aria-pressed="true"]{background:var(--press);color:var(--on-press);border-color:var(--press);}
.choice{display:flex;flex-wrap:wrap;gap:8px;}
.choice .chip{min-height:44px;}

/* ---------------------------------------------------------------- lists */
.list{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-s);overflow:hidden;}
.list > * + *{border-top:1px solid var(--line);}
.row{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;min-height:68px;width:100%;text-align:left;}
.row--tap{cursor:pointer;}
.row--tap:active{background:var(--surface-2);}
.row__main{flex:1;min-width:0;}
.row__name{font-weight:600;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row__name small{font-weight:500;font-size:12.5px;color:var(--ink-3);}
.row__meta{font-size:13px;color:var(--ink-3);line-height:1.35;margin-top:2px;display:flex;flex-wrap:wrap;gap:0 8px;}
.row__end{flex:none;text-align:right;}
.owe{color:var(--terminal);font-weight:600;}
.adv{color:var(--led);font-weight:600;}
.offtxt{color:var(--lamp);font-weight:600;}

.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 2px 0;}
.section-h h2{font:700 15.5px var(--display);letter-spacing:-.01em;}
.section-h span{font-size:12.5px;color:var(--ink-3);}

/* The one-tap collect button: the amount is the label. */
.take{min-width:96px;min-height:48px;padding:0 14px;border-radius:var(--r-m);background:var(--press);color:var(--on-press);font:700 17px var(--display);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s ease, background .2s;}
.take:active{transform:scale(.97);}
.take small{font:600 11.5px var(--body);opacity:.8;}
.done{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border-radius:var(--r-m);background:var(--led-wash);color:var(--led);font:700 16px var(--display);font-variant-numeric:tabular-nums;}
.offbadge{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border-radius:var(--r-m);background:var(--lamp-wash);color:var(--lamp);font-weight:700;font-size:13.5px;}
.row[data-s="paid"] .row__name{color:var(--ink-2);}
.row.is-fresh{animation:land .6s ease;}
@keyframes land{0%{background:var(--led-wash);}100%{background:transparent;}}

.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;font-weight:700;background:var(--sunk);color:var(--ink-2);}
.tag--night{background:var(--press);color:var(--on-press);}
.tag--owe{background:var(--terminal-wash);color:var(--terminal);}
.tag--off{background:var(--lamp-wash);color:var(--lamp);}
.tag--ok{background:var(--led-wash);color:var(--led);}

/* ---------------------------------------------------------------- cards and stats */
.card{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-s);padding:16px;}
.card--flag{border-left:4px solid var(--lamp-fill);}
.card--owe{border-left:4px solid var(--terminal);}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--surface);border-radius:var(--r-m);box-shadow:var(--sh-s);padding:12px 14px;}
.stat__k{font-size:12.5px;color:var(--ink-3);font-weight:600;}
.stat__v{font:700 22px/1.2 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;}
.stat__v--owe{color:var(--terminal);}
.stat__v--ok{color:var(--led);}
.stat__v--off{color:var(--lamp);}
.lede{font-size:14px;color:var(--ink-2);line-height:1.5;text-wrap:pretty;}
.h1{font:700 26px/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance;}
.h2{font:700 18px/1.25 var(--display);letter-spacing:-.015em;}
.muted{color:var(--ink-3);font-size:13px;}

/* profit bars */
.bars > * + *{margin-top:10px;}
.barrow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;}
.barrow__track{height:10px;border-radius:5px;background:var(--sunk);overflow:hidden;}
.barrow__fill{height:100%;border-radius:5px;background:var(--ink-2);}
.barrow__fill--neg{background:var(--terminal);}
.barrow__v{font:700 14px var(--display);font-variant-numeric:tabular-nums;min-width:72px;text-align:right;}

/* statement */
.stmt{width:100%;border-collapse:collapse;font-size:13.5px;}
.stmt th{font-weight:600;color:var(--ink-3);font-size:12px;text-align:right;padding:8px 6px;border-bottom:1px solid var(--line);}
.stmt th:first-child,.stmt td:first-child{text-align:left;padding-left:0;}
.stmt td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--display);font-variant-numeric:tabular-nums;vertical-align:top;}
.stmt td:first-child{font-family:var(--body);}
.stmt td small{display:block;font-family:var(--body);font-size:11.5px;color:var(--lamp);font-weight:600;}
.stmt tr:last-child td{border-bottom:none;}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border-radius:var(--r-m);background:var(--press);color:var(--on-press);font-weight:700;font-size:16px;width:100%;transition:transform .12s ease, opacity .2s;}
.btn:active{transform:scale(.985);}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn--ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line-2);}
.btn--quiet{background:transparent;color:var(--ink-2);min-height:44px;}
.btn--warn{background:var(--lamp-wash);color:var(--lamp);}
.btn--owe{background:var(--terminal-wash);color:var(--terminal);}
.btn--s{min-height:44px;font-size:14.5px;width:auto;padding:0 14px;}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.why{font-size:13px;color:var(--ink-3);text-align:center;margin-top:8px;}

.fab{position:absolute;right:16px;bottom:calc(var(--safe-b) + 84px);z-index:5;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--press);color:var(--on-press);font-weight:700;font-size:15px;box-shadow:0 10px 26px -10px rgba(0,0,0,.55);}

.closebar{position:sticky;bottom:0;margin:0 -16px -24px;padding:12px 16px 16px;background:linear-gradient(to top,var(--ground) 70%,transparent);}

/* ---------------------------------------------------------------- sheets */
dialog.sheet{
  margin:auto auto 0;width:100%;max-width:430px;max-height:92dvh;padding:0;border:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--ground);color:var(--ink);box-shadow:var(--sh-sheet);overflow:auto;
}
dialog.sheet[open]{animation:rise .26s cubic-bezier(.2,.8,.2,1);}
dialog.sheet::backdrop{background:var(--scrim);}
@keyframes rise{from{transform:translateY(40px);opacity:.3;}to{transform:none;opacity:1;}}
.sheet__grip{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:10px auto 0;}
.sheet__head{display:flex;align-items:center;gap:12px;padding:14px 16px 6px;}
.sheet__title{flex:1;min-width:0;}
.sheet__body{padding:8px 16px calc(var(--safe-b) + 18px);}
.sheet__body > * + *{margin-top:14px;}

/* amount display + keypad */
.amount{background:var(--surface);border-radius:var(--r-l);padding:14px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;border:2px solid var(--line);}
.amount.is-live{border-color:var(--ink);}
.amount__v{font:700 38px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.amount__v.is-empty{color:var(--ink-3);}
.amount__k{font-size:13px;color:var(--ink-3);font-weight:600;}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pad button{min-height:56px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-s);font:700 24px var(--display);}
.pad button:active{background:var(--sunk);}
.pad button.k-back{font-size:15px;}

.quick{display:flex;gap:8px;flex-wrap:wrap;}
.quick button{flex:1 1 30%;min-height:56px;border-radius:var(--r-m);background:var(--surface);border:1.5px solid var(--line);padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;}
.quick button b{font:700 18px var(--display);font-variant-numeric:tabular-nums;}
.quick button span{font-size:11.5px;color:var(--ink-3);font-weight:600;}
.quick button[aria-pressed="true"]{border-color:var(--ink);background:var(--surface-2);}

/* forms */
.field{display:block;}
.field > span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:0 14px;border-radius:var(--r-m);border:1.5px solid var(--line-2);background:var(--surface);font-size:16px;}
.field textarea{padding:12px 14px;min-height:72px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field input.num{font-size:20px;}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;}
.err{font-size:13px;color:var(--terminal);font-weight:600;margin-top:6px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ---------------------------------------------------------------- toast */
.toast{position:absolute;left:12px;right:12px;bottom:calc(var(--safe-b) + 80px);z-index:20;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:var(--r-m);background:var(--press);color:var(--on-press);font-size:14.5px;font-weight:600;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);animation:rise .22s ease;}
.toast__msg{flex:1;min-width:0;}
.toast button{min-height:40px;padding:0 12px;border-radius:var(--r-s);font-weight:700;color:var(--lamp-fill);}

/* ---------------------------------------------------------------- banners */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);font-size:13.5px;line-height:1.45;}
.banner--off{background:var(--lamp-wash);color:var(--lamp);}
.banner--owe{background:var(--terminal-wash);color:var(--terminal);}
.banner--ok{background:var(--led-wash);color:var(--led);}
.banner b{font-weight:700;}

.empty{text-align:center;padding:28px 12px;color:var(--ink-3);}
.empty .h2{color:var(--ink);margin-bottom:6px;}

/* ---------------------------------------------------------------- sign in */
.signin{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 20px calc(var(--safe-b) + 24px);gap:16px;}
.signin__mark{width:64px;height:64px;border-radius:999px;background:var(--press);color:var(--on-press);display:grid;place-items:center;}
.signin__mark svg{width:36px;height:36px;}

/* ---------------------------------------------------------------- the side panel (prototype only) */
.side .card h3{font:700 14px var(--display);margin-bottom:8px;}
.side .card p{font-size:13px;color:var(--ink-2);}
.seg{display:flex;background:var(--sunk);border-radius:12px;padding:3px;gap:3px;}
.seg button{flex:1;min-height:44px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--ink-2);}
.seg button[aria-pressed="true"]{background:var(--press);color:var(--on-press);box-shadow:var(--sh-s);}

/* staggered entrance */
.enter > *{animation:up .32s ease both;}
.enter > *:nth-child(2){animation-delay:.03s;} .enter > *:nth-child(3){animation-delay:.06s;}
.enter > *:nth-child(4){animation-delay:.09s;} .enter > *:nth-child(5){animation-delay:.12s;}
.enter > *:nth-child(n+6){animation-delay:.15s;}
@keyframes up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}