/* HisaabChukta design system: Pay OK Please, kept clean (DIRECTION.md). Outlines and hard shadows only on
   money cards and the primary button; one sticker on screen at most; money in Martian Mono.
   Sections: fonts · tokens · base · money · buttons · inputs · chips · segmented · pills & markers ·
   chat · slips · lists · bars & tabs · sheet · toast · motion.
   Sizes use rem so text follows the phone's text-size setting; borders and radii stay in px. */

/* ============================================================ Fonts
   Self-hosted Google Fonts (OFL): Bricolage Grotesque for display, Figtree for reading, Martian Mono
   for amounts. Martian Mono has no rupee sign, so the ₹ in an amount is set in Figtree. */
@font-face{font-family:"Bricolage";src:url(../vendor/fonts/bricolage-latin.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(../vendor/fonts/bricolage-latin-ext.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(../vendor/fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(../vendor/fonts/figtree-latin-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian";src:url(../vendor/fonts/martian-mono-latin.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian";src:url(../vendor/fonts/martian-mono-latin-ext.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================ Tokens
   Light is the default; dark follows the phone's setting. data-theme="light|dark" forces one
   (used by the gallery and any future in-app switch). Dark is designed, not inverted. */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F4F0; --surface:#FFFFFC; --sunken:#E7E7E0;
  --line:#DCDCD4; --line-strong:#B4B5AC; --control:#7C7F87;
  --text:#15171E; --muted:#5A5D66;
  --accent:#FFC21A; --on-accent:#15171E; --accent-tint:#FFF0C4;
  --edge:#15171E; /* money cards and the primary button: outline and hard shadow */
  --me-bubble:#15171E; --on-me:#F4F4F0; --me-muted:#B5B8C1;
  --bubble-shadow:#C2C2B7; --me-shadow:#FFC21A; /* chat bubbles: a soft hard shadow, no outline */
  --get:#12804A; --get-tint:#DDF0E4; --on-get:#FFFFFC;
  --owe:#B9280F; --owe-tint:#F9E2DC;
  --warn:#8A5A00; --warn-tint:#FFF0C4;
  --error:#A3241A; --error-tint:#F6E0DD;
  --toast-bg:#15171E; --toast-fg:#F4F4F0; --toast-action:#FFC21A;
  --qr-panel:#FFFFFC;
  --scrim:rgb(21 23 30 / .44);
  --shadow-sheet:0 -8px 24px rgb(21 23 30 / .12);
  --shadow-lift:0 1px 2px rgb(21 23 30 / .12);
  --shadow-toast:0 8px 24px rgb(21 23 30 / .18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121318; --surface:#1C1E25; --sunken:#272A33;
    --line:#2C2F38; --line-strong:#464A55; --control:#6E727D;
    --text:#F1EFE6; --muted:#A3A6AF;
    --accent:#FFC93D; --on-accent:#15171E; --accent-tint:#3A3015;
    --edge:#6B6F7C;
    --me-bubble:#FFC93D; --on-me:#15171E; --me-muted:#5A4500;
    --bubble-shadow:#08090C; --me-shadow:#8A6A12;
    --get:#3DD68C; --get-tint:#123222; --on-get:#0F1A13;
    --owe:#FF6B52; --owe-tint:#3A1C16;
    --warn:#E0B252; --warn-tint:#33280F;
    --error:#FF8F80; --error-tint:#3D1A16;
    --toast-bg:#F1EFE6; --toast-fg:#121318; --toast-action:#7A4F00;
    --qr-panel:#FFFFFC;
    --scrim:rgb(0 0 0 / .56);
    --shadow-sheet:0 -8px 28px rgb(0 0 0 / .5);
    --shadow-lift:0 1px 2px rgb(0 0 0 / .4);
    --shadow-toast:0 8px 24px rgb(0 0 0 / .5);
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121318; --surface:#1C1E25; --sunken:#272A33;
  --line:#2C2F38; --line-strong:#464A55; --control:#6E727D;
  --text:#F1EFE6; --muted:#A3A6AF;
  --accent:#FFC93D; --on-accent:#15171E; --accent-tint:#3A3015;
  --edge:#6B6F7C;
  --me-bubble:#FFC93D; --on-me:#15171E; --me-muted:#5A4500;
  --bubble-shadow:#08090C; --me-shadow:#8A6A12;
  --get:#3DD68C; --get-tint:#123222; --on-get:#0F1A13;
  --owe:#FF6B52; --owe-tint:#3A1C16;
  --warn:#E0B252; --warn-tint:#33280F;
  --error:#FF8F80; --error-tint:#3D1A16;
  --toast-bg:#F1EFE6; --toast-fg:#121318; --toast-action:#7A4F00;
  --qr-panel:#FFFFFC;
  --scrim:rgb(0 0 0 / .56);
  --shadow-sheet:0 -8px 28px rgb(0 0 0 / .5);
  --shadow-lift:0 1px 2px rgb(0 0 0 / .4);
  --shadow-toast:0 8px 24px rgb(0 0 0 / .5);
}
:root{
  --sans:"Figtree",system-ui,-apple-system,sans-serif;
  --display:"Bricolage","Figtree",system-ui,sans-serif; /* condensed 800: titles, balance words, stickers */
  --mono:"Martian",ui-monospace,monospace;
  /* Type scale (ratio ~1.15, fixed rem for product UI) */
  --t-xs:.75rem;   /* 12  meta, markers note */
  --t-sm:.8125rem; /* 13  hints, secondary */
  --t-md:.875rem;  /* 14  labels, buttons small */
  --t-base:1rem;   /* 16  body, inputs (iOS never zooms at 16px) */
  --t-lg:1.0625rem;/* 17  titles */
  --t-xl:1.25rem;  /* 20  slip totals */
  --t-2xl:1.75rem; /* 28  your share, monthly figures */
  --t-3xl:2.5rem;  /* 40  balance hero, pay amount */
  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* Radius: cards, buttons and inputs 6; bubbles 14 with a 4 tail; pills 4; sheet 16; switches and avatars round */
  --r-slip:6px; --r-bubble:14px; --r-control:6px; --r-inner:4px; --r-sheet:16px; --r-pill:999px; --r-tag:4px;
  /* Tap target */
  --tap:3rem; /* 48px at default text size */
  --tap-min:2.75rem; /* 44px floor for secondary controls */
}

/* ============================================================ Base */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (font:-apple-system-body){html{font:-apple-system-body}} /* follow iPhone text size */
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--t-base);line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--accent-tint);color:var(--text)}
input,textarea{caret-color:var(--text)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
html{scrollbar-color:var(--line-strong) transparent}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
.ico-sm{width:1rem;height:1rem}
.muted{color:var(--muted)}
.display,.appbar h1,.appbar h2,.brand,.auth h1,.empty h2,.sheet-head h2{font-family:var(--display);font-weight:800;font-stretch:80%;letter-spacing:-.005em}

/* ============================================================ Money
   Every amount is Martian Mono (narrow) with tabular figures. ₹ (in Figtree) at .72em, paise at .62em,
   never below 11px, both at full colour.
   Get / owe always carry a word and an arrow as well as colour. */
.amt{font-family:var(--mono);font-weight:600;font-stretch:80%;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.amt .cur{font-family:var(--sans);font-size:max(.72em,11px);margin-right:.06em;font-weight:600}
.amt .p{font-size:max(.62em,11px)}
.get{color:var(--get)} .owe{color:var(--owe)}
.get .cur,.owe .cur{color:inherit}
.dir{display:inline-flex;align-items:center;gap:2px;font-weight:600}
/* Large money shrinks to fit narrow screens at big text sizes; never truncated */
.amt-hero{font-size:min(var(--t-3xl),11vw);line-height:1.1}
.amt-lg{font-size:min(var(--t-2xl),8.5vw);line-height:1.15}
.amt-md{font-size:var(--t-xl);line-height:1.2}

/* ============================================================ Buttons */
.btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2) clamp(var(--s2), 4vw, var(--s4));
  border-radius:var(--r-control);font-weight:700;font-size:var(--t-base);line-height:1.2;border:1px solid transparent;text-align:center}
.btn-primary{background:var(--accent);color:var(--on-accent);border:2px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--control)}
.btn-owe{background:var(--owe);color:var(--surface)}
.btn-danger{background:var(--error);color:var(--surface)} /* leaving or deleting a group: can't be undone */
.btn-text{background:none;color:var(--text);padding:var(--s2);min-height:var(--tap-min);font-size:var(--t-md);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.btn-sm{min-height:var(--tap-min);font-size:var(--t-md);padding:var(--s1) var(--s3)}
.btn-block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{background:var(--sunken);color:var(--muted);border-color:transparent;box-shadow:none;cursor:default}
/* Busy: spinner beside the label, label stays readable */
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:1em;height:1em;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;color:var(--text);border-radius:var(--r-control);flex:none}
.sq{width:var(--tap);height:var(--tap);flex:none;border-radius:var(--r-control);display:grid;place-items:center;border:1px solid var(--control);background:var(--surface);color:var(--text)}
.sq.send{background:var(--accent);color:var(--on-accent);border:2px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}

/* ============================================================ Inputs */
.field{display:grid;gap:6px}
.field-lbl{font-size:var(--t-sm);font-weight:600}
.field-hint{font-size:var(--t-sm);color:var(--muted)}
.field-error{font-size:var(--t-sm);color:var(--error);display:flex;gap:6px;align-items:flex-start}
.input{width:100%;min-height:var(--tap);border:1px solid var(--control);border-radius:var(--r-control);background:var(--surface);
  padding:var(--s2) var(--s3);font-size:var(--t-base);color:var(--text)}
.input::placeholder{color:var(--muted);opacity:1}
.input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px var(--accent-tint)}
.input[aria-invalid="true"]{border-color:var(--error)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--error-tint)}
.input:disabled{background:var(--sunken);color:var(--muted)}
.input-money{position:relative;display:flex;align-items:center}
.input-money .cur{position:absolute;left:var(--s3);font-weight:600;color:var(--muted);pointer-events:none}
.input-money .input{padding-left:calc(var(--s3) + 1.1em);font-family:var(--mono);font-weight:600;font-stretch:80%;font-variant-numeric:tabular-nums;text-align:right}
.composer{display:flex;gap:var(--s2);align-items:center;padding:var(--s2);background:var(--bg)}
.composer .input{flex:1;min-width:0}

/* ============================================================ Chips (people you can pick) */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{min-height:var(--tap-min);display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3) var(--s1) var(--s1);
  border-radius:var(--r-control);border:1px solid var(--control);background:var(--surface);color:var(--text);font-size:var(--t-md);font-weight:500;max-width:100%}
.chip .mk{width:1.75rem;height:1.75rem}
.chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--text);font-weight:600}
.chip .chip-check{display:none}
.chip[aria-pressed="true"] .chip-check{display:block;color:var(--text)}

/* ============================================================ Segmented control */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;background:var(--sunken);border-radius:var(--r-control)}
.seg button{min-height:var(--tap-min);display:grid;place-items:center;font-size:var(--t-md);font-weight:500;color:var(--muted);border-radius:var(--r-inner);padding:0 var(--s2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-lift);outline:1px solid var(--line)}

/* ============================================================ Pills and people markers
   Pills: icon + word. Disputed is neutral ink, not red (DIRECTION.md). */
.pill{display:inline-flex;align-items:center;gap:4px;min-height:1.5rem;padding:2px 8px 2px 6px;border-radius:var(--r-tag);font-size:var(--t-xs);font-weight:700;white-space:nowrap;line-height:1.2}
.pill .ico{width:.875rem;height:.875rem}
.pill-accepted,.pill-paid{background:var(--get);color:var(--on-get)}
.pill-pending{background:var(--accent);color:var(--on-accent)}
.pill-disputed{background:var(--sunken);color:var(--text)}
.pill-notpaid{background:var(--error-tint);color:var(--error)}
.pill-queued{background:var(--sunken);color:var(--muted)}
/* Markers: the shape carries the answer, so colour is never needed */
.marks{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.mk{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-size:max(.6875rem,11px);font-weight:600;position:relative;flex:none;line-height:1}
.mk.ok{background:var(--text);color:var(--bg);border:1.5px solid var(--text)}
.mk.wait{border:1.5px dashed var(--muted);color:var(--muted)}
.mk.no{border:1.5px solid var(--text);color:var(--text)}
.mk .badge{position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;background:var(--text);color:var(--surface);display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.mk .badge svg{width:10px;height:10px;fill:currentColor}
.mk.plain{background:var(--sunken);color:var(--text)}
.marks-note{font-size:var(--t-xs);color:var(--muted);margin-left:2px}

/* ============================================================ Chat */
.thread{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4)}
.day{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);color:var(--muted)}
.day::after{content:"";flex:1;border-top:1px solid var(--line)}
.msg{max-width:80%;padding:7px 12px 6px;border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 4px;background:var(--sunken);box-shadow:3px 3px 0 var(--bubble-shadow);align-self:flex-start;overflow-wrap:anywhere}
.msg .who{font-size:var(--t-xs);font-weight:600;color:var(--muted);margin-bottom:1px}
.msg .meta{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:max(.6875rem,11px);color:var(--muted);margin-top:1px}
.msg.me{align-self:flex-end;background:var(--me-bubble);color:var(--on-me);box-shadow:3px 3px 0 var(--me-shadow);margin-right:3px;border-radius:var(--r-bubble) var(--r-bubble) 4px var(--r-bubble)}
.msg.me .who,.msg.me .meta{color:var(--me-muted)}
.msg.failed{outline:2px solid var(--error);outline-offset:-2px}

/* ============================================================ Money cards
   The only "printed" thing in the app: ink outline, hard ink shadow, 6px corners. Never a bubble. */
.slip{background:var(--surface);border:2px solid var(--edge);box-shadow:4px 4px 0 var(--edge);padding:var(--s3) var(--s4) 0;border-radius:var(--r-slip)}
.thread .slip{margin:0 4px 4px 0}
.slip-src{font-size:var(--t-xs);color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere}
.slip-src q{font-style:normal;color:var(--text)}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.slip-head h2{font-size:var(--t-base);font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.slip-head .amt{font-size:var(--t-xl);line-height:1.2}
.slip-sub{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.slip-state{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.share{display:flex;align-items:center;gap:6px;font-size:var(--t-md);font-weight:600;padding:var(--s3) 0}
.share .amt{font-size:min(var(--t-2xl),8.5vw);margin-left:auto;line-height:1}
.share.void,.share.void .amt{color:var(--muted)}
.share.void .amt{font-size:var(--t-xl);text-decoration:line-through;text-decoration-thickness:1px}
.slip-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:0 0 var(--s3)}
.slip-done{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding-bottom:var(--s3);font-size:var(--t-md);font-weight:600;color:var(--get)}
.slip-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);border-top:1px solid var(--line);padding:2px 0}
.slip-foot .meta{font-size:var(--t-xs);color:var(--muted)}

/* ============================================================ Ledger lists */
.ledger{list-style:none;padding:0;border-top:1px solid var(--line)}
.ledger li{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);border-bottom:1px solid var(--line);padding:6px 0}
.ledger li:last-child{border-bottom:0}
.ledger .grow{flex:1;min-width:0}
.ledger .name{font-weight:500}
.ledger .note{font-size:var(--t-xs);color:var(--muted)}
.ledger .amt{margin-left:auto;text-align:right}

/* ============================================================ App bar and tabs */
.appbar{min-height:3.5rem;display:flex;align-items:center;gap:var(--s1);padding:0 var(--s4) 0 var(--s1)}
.appbar .title{flex:1;min-width:0}
.appbar h1,.appbar h2{font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .sub{font-size:var(--t-sm);color:var(--muted)}
.tabs{display:flex;padding:0 var(--s4);gap:var(--s5);border-bottom:1px solid var(--line);position:relative}
.tab{min-height:var(--tap);min-width:var(--tap);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:var(--t-md);font-weight:500;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--text);font-weight:600}
.tab::after{content:attr(data-label);font-weight:600;visibility:hidden;height:0;overflow:hidden} /* reserve bold width: no shift */
.tab-ink{position:absolute;left:0;bottom:-1px;width:100px;height:3px;background:var(--text);transform-origin:0 50%;pointer-events:none}

/* ============================================================ Bottom sheet */
.sheet-host{position:relative;overflow:hidden}
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:4}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:calc(100% - max(var(--s6), env(safe-area-inset-top) + var(--s2)));overflow:auto;background:var(--surface);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);padding:var(--s2) var(--s4) max(22px,env(safe-area-inset-bottom))}
.grab{width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto var(--s2)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.sheet-head h2{font-size:1.25rem;padding-top:12px}

/* ============================================================ Toast
   Short confirmation with an optional action (Undo). Appears and leaves without motion:
   only sheets, status changes, presses and tabs animate. */
.toast-region{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 88px);display:grid;justify-items:center;padding:0 var(--s4);z-index:20;pointer-events:none}
.toast{pointer-events:auto;width:100%;max-width:28rem;display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s1) var(--s1) var(--s4);
  min-height:var(--tap);background:var(--toast-bg);color:var(--toast-fg);border-radius:var(--r-control);box-shadow:var(--shadow-toast);font-size:var(--t-md)}
.toast-msg{flex:1;min-width:0;padding:var(--s2) 0}
.toast .btn-text{color:var(--toast-action);font-weight:600}
.toast[hidden]{display:none}

/* ============================================================ Motion
   Only four things move: sheets, a slip changing status, presses, the tab ink (plans/001-003,
   review-animations). Chat messages and scrolling never animate. CSS transitions only. */
:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press:140ms; --dur-state:200ms; --dur-tab:220ms;
  --dur-sheet-in:280ms; --dur-sheet-out:200ms;
}
/* Press: scale 0.97, never from zero */
.btn,.iconbtn,.sq,.chip,.seg button,.tab,[data-press]{-webkit-tap-highlight-color:transparent;transition:transform var(--dur-press) var(--ease-out)}
.btn:active,.iconbtn:active,.sq:active,.chip:active,.seg button:active,.tab:active,[data-press]:active{transform:scale(0.97)}
.btn[aria-disabled="true"]:active,.btn:disabled:active{transform:none}
/* The primary button and Send press flat onto their shadow */
.btn-primary:active,.sq.send:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--edge)}
.btn-primary[aria-disabled="true"]:active,.btn-primary:disabled:active{transform:none}
/* Tabs */
.tab{transition:transform var(--dur-press) var(--ease-out),color var(--dur-tab) var(--ease-out)}
.tab-ink{transition:transform var(--dur-tab) var(--ease-out)}
/* Status change: both states share one grid cell, so nothing reflows */
.swap{display:inline-grid}
.slip-swap{display:grid}
.swap>*,.slip-swap>*{grid-area:1/1;transition:opacity var(--dur-state) var(--ease-out),filter var(--dur-state) var(--ease-out),transform var(--dur-state) var(--ease-out)}
[data-state="pending"] [data-when="done"],[data-state="done"] [data-when="pending"]{opacity:0;filter:blur(2px);transform:translateY(4px);pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-state) var(--ease-out),filter var(--dur-state) var(--ease-out),transform var(--dur-state) var(--ease-out),visibility 0s linear var(--dur-state)}
.mk{transition:background-color var(--dur-state) var(--ease-out),border-color var(--dur-state) var(--ease-out),color var(--dur-state) var(--ease-out)}
/* Sheets: slide up from below the edge; hidden from keyboard and screen readers once closed */
.sheet{transform:translateY(0);visibility:visible;transition:transform var(--dur-sheet-in) var(--ease-drawer),visibility 0s linear 0s}
.scrim{opacity:1;transition:opacity var(--dur-sheet-in) var(--ease-out)}
[data-sheet="closed"] .sheet{transform:translateY(calc(100% + 32px));visibility:hidden;
  transition:transform var(--dur-sheet-out) var(--ease-out),visibility 0s linear var(--dur-sheet-out)}
[data-sheet="closed"] .scrim{opacity:0;pointer-events:none;transition:opacity var(--dur-sheet-out) var(--ease-out)}
/* Keyboard-initiated changes are instant */
[data-instant] *,[data-instant] *::before,[data-instant] *::after{transition-duration:0s !important;transition-delay:0s !important}
/* Reduced motion: keep fades and colour, drop movement; presses dim instead of scaling */
@media (prefers-reduced-motion:reduce){
  .btn,.iconbtn,.sq,.chip,.seg button,[data-press]{transition:opacity var(--dur-press) var(--ease-out)}
  .tab{transition:opacity var(--dur-press) var(--ease-out),color var(--dur-tab) var(--ease-out)}
  .btn:active,.iconbtn:active,.sq:active,.chip:active,.seg button:active,.tab:active,[data-press]:active{transform:none;opacity:.7}
  .btn[aria-disabled="true"]:active,.btn:disabled:active{opacity:1}
  .tab-ink{transition:none}
  .swap>*,.slip-swap>*,[data-state] [data-when]{transform:none !important;filter:none !important}
  .sheet,[data-sheet="closed"] .sheet{transform:none;transition:opacity var(--dur-state) var(--ease-out),visibility 0s linear 0s}
  [data-sheet="closed"] .sheet{opacity:0;visibility:hidden;transition:opacity var(--dur-state) var(--ease-out),visibility 0s linear var(--dur-state)}
  .btn[aria-busy="true"]::before{animation-duration:1.6s}
}

/* ============================================================ App shell
   One phone-width column. On wide screens it sits in the middle with a quiet frame. */
.app{min-height:100dvh;max-width:30rem;margin-inline:auto;background:var(--bg);display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)} /* clear of the notch when full screen */
@media (min-width:31rem){body{background:var(--sunken)} .app{border-inline:1px solid var(--line)}}
.app-main{flex:1}
.app-main:has(> .bottombar){display:flex;flex-direction:column}
.app-main > .bottombar{margin-top:auto} /* stays at the bottom of the screen when the list is short */
.app-top{padding-left:var(--s4)}
.bottombar{position:sticky;bottom:0;display:flex;gap:var(--s2);padding:var(--s2) var(--s4) max(var(--s4),env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.bottombar .btn{flex:1}
.banner{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--s2) 0 var(--s4);background:var(--sunken);font-size:var(--t-sm)}
.banner > span{display:flex;align-items:center;gap:6px;min-width:0}
.banner .btn{white-space:nowrap;flex:none}
a.btn{text-decoration:none}
.loading{padding:var(--s6) var(--s4);color:var(--muted);font-size:var(--t-md)}
.empty{padding:var(--s6) var(--s4);display:grid;gap:var(--s2);justify-items:start}
.empty h2{font-size:1.375rem}
.empty p{color:var(--muted);font-size:var(--t-md)}

/* ============================================================ Home */
.brand{font-size:1.5rem}
.avatar{width:var(--tap-min);height:var(--tap-min);border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-size:var(--t-sm);font-weight:600;flex:none}
.figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2) var(--s4);padding:var(--s3) var(--s4) var(--s4);border-bottom:1px solid var(--line)}
.figs .dir{font-size:var(--t-md)}
.figs .hint{grid-column:1/-1;font-size:var(--t-sm);color:var(--muted)}
.group-list{list-style:none;padding:0}
.group-row{display:grid;gap:2px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);min-height:4.75rem}
.group-row h2{font-size:var(--t-base);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.group-row .time{font-size:var(--t-xs);color:var(--muted);text-align:right;white-space:nowrap}
.group-row .last{font-size:var(--t-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-row .net{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:var(--t-xs);white-space:nowrap}
.group-row .net .amt{font-size:var(--t-base)}
.group-row .gr-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);min-width:0}
.group-row .gr-line > :first-child{flex:1;min-width:0}
.group-row .needs{display:flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;color:var(--warn)}


/* ============================================================ Forms and sign-in */
.input-reveal{position:relative;display:flex;align-items:center}
.input-reveal .input{padding-right:4.5rem}
.input-reveal .reveal{position:absolute;right:2px;min-width:var(--tap-min)}
.form{display:grid;gap:var(--s4)}
.form-error{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border-radius:var(--r-control);background:var(--error-tint);color:var(--error);font-size:var(--t-md)}
.form-error[hidden]{display:none}
.form-error .btn-text{color:var(--error);text-decoration:underline;padding:0;min-height:auto;margin-top:var(--s1)}
.form-note{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border-radius:var(--r-control);background:var(--sunken);font-size:var(--t-md)}
.auth{padding:var(--s5) var(--s4) var(--s5);display:grid;gap:var(--s4);align-content:start}
.auth h1{font-size:1.875rem;line-height:1.1}
.auth .lead{color:var(--muted);font-size:var(--t-md);max-width:40ch}
.auth .lead strong{color:var(--text);overflow-wrap:anywhere}
.auth-links{display:grid;gap:var(--s1);justify-items:start;border-top:1px solid var(--line);padding-top:var(--s3)}
.auth-links .btn-text{padding-inline:0}
.demo-link{display:grid;gap:2px;padding:var(--s3) var(--s4);border:1px dashed var(--control);border-radius:var(--r-control);text-decoration:none;color:var(--text);min-height:var(--tap)}
.demo-link strong{font-weight:700;color:var(--text)}
.demo-link span{font-size:var(--t-sm);color:var(--muted)}
.account{display:grid;gap:var(--s3);margin-top:var(--s3)}
.account dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:var(--t-md)}
.account dt{color:var(--muted)}
.account dd{margin:0;overflow-wrap:anywhere}
.avatar-btn{border-radius:50%}
/* Sheets over the whole app: a fixed layer the width of the app column */
.sheet-layer{position:fixed;inset:0;max-width:30rem;margin-inline:auto;z-index:10;pointer-events:none}
.sheet-layer .scrim,.sheet-layer .sheet{pointer-events:auto}
.sheet-layer[data-sheet="closed"] .scrim,.sheet-layer[data-sheet="closed"] .sheet{pointer-events:none}

/* ============================================================ Group chat
   The chat fills the visible viewport (--app-h follows the on-screen keyboard), so the composer
   always sits just above it. Only the thread scrolls. */
.chat{height:calc(var(--app-h,100dvh) - env(safe-area-inset-top));display:flex;flex-direction:column;overflow:hidden}
.chat .appbar{flex:none}
.chat .appbar h1{font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat .tabs{flex:none}
.chat-head{flex:none}
.chat-main{flex:1;min-height:0;display:flex;flex-direction:column}
.pos{display:grid;justify-items:end;text-align:right;font-size:var(--t-xs);line-height:1.25;flex:none}
.pos .dir{font-size:var(--t-xs)}
.pos .amt{font-size:var(--t-base)}
.pos.muted{display:flex;gap:4px;align-items:center;font-weight:600}
.thread-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.thread-scroll .thread{min-height:100%;justify-content:flex-end}
.thread-scroll:focus{outline:none}
.tab-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(var(--s6),env(safe-area-inset-bottom))}
.composer-area{flex:none;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.composer-area .composer{padding:var(--s2)}
.mentions{padding:var(--s2) var(--s2) 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.mentions .chip{flex:none}
.tips{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) 0;overflow-x:auto;scrollbar-width:none}
.tips[hidden]{display:none}
.tips-lbl{font-size:var(--t-xs);font-weight:600;color:var(--muted);flex:none;padding-left:var(--s2)}
.tip{flex:none;font-family:var(--mono);font-size:var(--t-sm);padding-inline:var(--s3)}
.preview{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s3) var(--s4) var(--s1)}
.preview[hidden]{display:none}
.preview-head b{display:flex;align-items:flex-start;gap:6px;font-weight:600;font-size:var(--t-base)}
.preview-head b .ico{margin-top:3px}
.preview-sub{font-size:var(--t-sm);color:var(--muted);margin-top:1px}
.preview-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.preview-row .share{padding:0;display:flex;align-items:center;gap:6px;font-size:var(--t-md)}
.preview-row .share .amt{font-size:var(--t-lg);margin-left:2px}
a.group-row{text-decoration:none;color:inherit}
.group-list li{list-style:none}

/* ============================================================ Balances (SPEC 6) */
.hero{padding:var(--s5) var(--s4) var(--s4);border-bottom:1px solid var(--line)}
.hero .dir{font-family:var(--display);font-weight:800;font-stretch:80%;font-size:1.25rem}
.hero .amt{display:block;margin-top:var(--s1)}
.hero .hint{font-size:var(--t-sm);color:var(--muted);margin-top:6px}
.section{padding:var(--s5) var(--s4) 0}
.section h2{font-size:var(--t-base);font-weight:600;margin-bottom:var(--s2)}
.ledger .note{display:block}
.ledger .dir{font-size:var(--t-sm)}
.ledger .settled{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-sm);font-weight:600}
.ledger li:has(> .row){padding:0}
.ledger .row{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--tap);padding:6px 0;text-align:left}
.ico.warn{color:var(--warn)}
.chev{color:var(--muted);width:1rem;height:1rem}
.settle-row{flex-wrap:wrap}
.settle-row .acts{flex-basis:100%;display:flex;gap:var(--s2);padding:0 0 var(--s2) calc(1.75rem + var(--s3))}
.settle-row .acts .btn{flex:1}
.disclose{border-bottom:1px solid var(--line);margin-top:var(--s2)}
.disclose summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);font-size:var(--t-md);font-weight:500;cursor:pointer;list-style:none}
.disclose summary::-webkit-details-marker{display:none}
.disclose[open] .chev{transform:rotate(90deg)}
.disclose .ledger li:last-child{border-bottom:0}

/* ============================================================ Pay sheet (SPEC 7)
   The QR always sits on a light panel, so it scans in dark mode too. */
.chat-sheet{bottom:auto;height:var(--app-h,100dvh)}
.pay{display:grid;gap:var(--s3);margin-top:var(--s2)}
.pay .hint{font-size:var(--t-sm);color:var(--muted);margin-top:calc(-1 * var(--s2))}
.pay .lead{font-size:var(--t-md);color:var(--muted)}
.pay .lead .amt{color:var(--text)}
.pay .input-money .input{font-size:var(--t-2xl);min-height:3.5rem}
.warn-note{display:flex;gap:6px;align-items:flex-start;font-size:var(--t-sm);color:var(--warn)}
.warn-note .ico,.trust .ico,.form-note .ico{margin-top:2px}
.qrbox{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qr{width:8.5rem;aspect-ratio:1;background:var(--qr-panel);color:#15171E;border-radius:var(--r-inner);padding:8px;outline:1px solid var(--line);font-size:var(--t-xs)}
.qr svg{width:100%;height:100%;display:block}
.upi{display:grid;gap:var(--s2);align-content:start;justify-items:start;min-width:0}
.upi .lbl{font-size:var(--t-xs);color:var(--muted)}
.upi .id{font-weight:600;overflow-wrap:anywhere;margin-top:calc(-1 * var(--s2))}
.upi p{font-size:var(--t-sm);color:var(--muted)}
.upi .lbl + .pay-amount{margin-top:calc(-1 * var(--s2))}
.pay-amount{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.pay-steps{margin:calc(-1 * var(--s1)) 0 0;padding-left:1.25rem;display:grid;gap:2px;font-size:var(--t-sm);color:var(--muted)}
.pay-steps b{color:var(--text);font-weight:600}
.open-app{display:grid;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s3)}
.pay .hint + .open-app,.pay > .btn + .hint{margin-top:calc(-1 * var(--s2))}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.trust{display:flex;gap:6px;font-size:var(--t-sm);color:var(--muted)}

/* ============================================================ Split a bill (SPEC 5) */
.split{display:grid;gap:var(--s4);margin-top:var(--s2)}
.split fieldset{border:0;padding:0;min-width:0}
.photo-pick{display:flex;align-items:center;gap:var(--s3);min-height:3.5rem;border:1px dashed var(--control);border-radius:var(--r-control);padding:var(--s2) var(--s3);font-size:var(--t-md);color:var(--muted);cursor:pointer}
.photo-pick:focus-within{outline:2px solid var(--text);outline-offset:2px}
.photo-pick b{color:var(--text);font-weight:600}
.photo-pick.has{border-style:solid;cursor:default}
.photo-pick.has span{flex:1;min-width:0}
.photo-pick img{width:2.75rem;height:2.75rem;object-fit:cover;border-radius:var(--r-inner);flex:none}
.two{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:var(--s2)}
.sharers{list-style:none;padding:0;border-top:1px solid var(--line-strong)}
.sharers li{display:flex;align-items:center;gap:var(--s3);min-height:3.25rem;border-bottom:1px solid var(--line)}
.sharers label{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);cursor:pointer}
.sharers .nm{min-width:0;overflow-wrap:anywhere}
.sharers li.off .nm,.off-note{color:var(--muted)}
.off-note{font-size:var(--t-sm)}
.sharers input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;border-radius:6px;border:1.5px solid var(--control);display:grid;place-items:center;cursor:pointer}
.sharers input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.sharers input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.sharers .amt{font-size:var(--t-base)}
.share-in{flex:0 1 10rem;min-width:8.5rem} /* room for ₹9,99,999.99 */
.left{display:flex;align-items:center;gap:6px;font-size:var(--t-md);font-weight:600;margin-bottom:var(--s2)}
.left .amt{font-size:var(--t-lg)}
.left.warn{color:var(--warn)} .left.warn .cur{color:inherit}
.left.muted{font-weight:500}
.split-add{position:sticky;bottom:calc(-1 * max(22px,env(safe-area-inset-bottom)));background:var(--surface);padding:var(--s2) 0 max(22px,env(safe-area-inset-bottom));margin-bottom:calc(-1 * max(22px,env(safe-area-inset-bottom)))}

/* Bill photo on a card, and full size */
.slip-photo{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--tap);margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);text-align:left}
.slip-photo img{width:3rem;height:3rem;object-fit:cover;border-radius:var(--r-inner);background:var(--sunken);flex:none}
.slip-photo span{flex:1}
.slip-photo.unavailable span::after{content:", couldn’t load"}
.photo-view{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:transparent;color:#fff}
.photo-view::backdrop{background:#000}
.photo-view[open]{display:grid;place-items:center}
.photo-view img{max-width:100%;max-height:100dvh;object-fit:contain}
.photo-view .iconbtn{position:fixed;top:max(var(--s2),env(safe-area-inset-top));right:var(--s2);color:#fff;background:rgb(0 0 0 / .5);border-radius:50%}

/* ============================================================ Monthly (SPEC 8)
   Bars are drawn to scale against the largest row, with no background track. */
.month{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s2) 0}
.month h2{font-size:var(--t-base);font-weight:600}
.month .iconbtn[aria-disabled="true"]{color:var(--line-strong);cursor:default}
.month-figs{padding-top:var(--s2)}
.month-figs .lbl{display:block;font-size:var(--t-sm);color:var(--muted)}
.month-figs .amt{display:block}
.share-bar{grid-column:1/-1;display:grid;gap:4px}
.share-track{display:block;width:100%;height:6px;border-radius:3px;background:var(--sunken);overflow:hidden}
.share-track .fill{fill:var(--text)}
.share-bar .hint{font-size:var(--t-sm);color:var(--muted)}
.pending-note{grid-column:1/-1;display:flex;gap:6px;align-items:flex-start;font-size:var(--t-xs);color:var(--warn)}
.pending-note .ico{margin-top:1px}
.section .hint{font-size:var(--t-sm);color:var(--muted);margin-top:calc(-1 * var(--s1))}
.bars{list-style:none;padding:0;margin-top:var(--s3);display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--muted)}
.bars .bar-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .bar-track{display:block;width:100%;height:10px;min-width:0}
.bars .bar-track .fill{fill:var(--text);opacity:.78}
.bars .amt{font-size:var(--t-md);color:var(--text);text-align:right;min-width:4.5rem}
.bars li.top{color:var(--text);font-weight:600}
.month-empty .ico{width:2rem;height:2rem;color:var(--muted)}
.month-empty .pending-note{margin-top:var(--s2)}
.month-figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.month-figs .amt-lg{font-size:min(var(--t-2xl),5.9vw)} /* ₹8,52,049.41 and its neighbour fit side by side at 320px */

/* ============================================================ Groups: menu, join (SPEC 9.3-9.5) */
.title-link{text-decoration:none;color:inherit;min-height:var(--tap);display:flex;flex-direction:column;justify-content:center}
.title-link .sub{display:flex;align-items:center;gap:2px}
.group-menu{padding-bottom:max(var(--s6),env(safe-area-inset-bottom))}
.group-menu .section{display:grid;gap:var(--s3);align-content:start}
.group-menu .section h2{margin-bottom:0}
.group-menu .section .hint{margin-top:calc(-1 * var(--s2))}
.invite-link{font-family:var(--mono);font-size:var(--t-sm);padding:var(--s3);background:var(--sunken);border-radius:var(--r-control);overflow-wrap:anywhere}
.invite-code{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3)}
.invite-code > span{min-width:0}
.invite-code .lbl{display:block;font-size:var(--t-xs);color:var(--muted)}
.invite-code code{font-family:var(--mono);font-size:var(--t-md);overflow-wrap:anywhere}
.add-person{display:grid;gap:var(--s2)}
.add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2);align-items:end}
.add-row .field{min-width:0}
.tag{font-size:var(--t-xs);font-weight:600;color:var(--muted);background:var(--sunken);border-radius:var(--r-pill);padding:2px var(--s2);flex:none}
.ledger .note{overflow-wrap:anywhere}
.pick{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s1)}
.pick legend{font-weight:600;padding:0;margin-bottom:var(--s1)}
.pick ul{list-style:none;padding:0;margin-top:var(--s2);border-top:1px solid var(--line-strong)}
.pick li{border-bottom:1px solid var(--line)}
.pick label{display:flex;align-items:center;gap:var(--s3);min-height:3.25rem;cursor:pointer;overflow-wrap:anywhere}
.pick input[type=radio]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;border-radius:50%;border:1.5px solid var(--control);display:grid;place-items:center;cursor:pointer}
.pick input[type=radio]:checked{border-color:var(--text)}
.pick input[type=radio]:checked::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent)}
.pick label:has(:checked){font-weight:600}
.join .btn-text{justify-self:center}
.join #new-name[hidden]{display:none}

/* ============================================================ Offline (SPEC 10.3-10.4) */
.netbar{display:flex;align-items:center;gap:6px;padding:6px var(--s4);background:var(--sunken);color:var(--muted);font-size:var(--t-sm);flex:none}
.netbar[hidden]{display:none}
.msg .meta .ico{vertical-align:-2px}
.rejected{display:grid;gap:var(--s1);margin:calc(-1 * var(--s1)) 0 var(--s2);font-size:var(--t-sm);color:var(--error)}
.msg.me + .rejected{align-self:flex-end;justify-items:end;text-align:right}
.rejected p{display:flex;gap:6px;align-items:flex-start;max-width:36ch}
.rejected p .ico{margin-top:2px;flex:none}
.rejected div{display:flex;gap:var(--s2);align-items:center}

/* ============================================================ Motion, Part 10
   Same four things only: sheets and dialogs opening, card status changes, presses, tabs. */
/* Photo dialog (modal recipe): centred, never from zero, exit faster than enter. Escape is instant. */
.photo-view,.photo-view::backdrop{opacity:1;transition:opacity 250ms var(--ease-out),overlay 250ms var(--ease-out) allow-discrete,display 250ms var(--ease-out) allow-discrete}
.photo-view img{transform:scale(1);transition:transform 250ms var(--ease-out)}
.photo-view:not([open]),.photo-view:not([open])::backdrop{opacity:0;transition-duration:180ms}
.photo-view:not([open]) img{transform:scale(.96);transition-duration:180ms}
@starting-style{
  .photo-view[open],.photo-view[open]::backdrop{opacity:0}
  .photo-view[open] img{transform:scale(.96)}
}
.photo-view[data-instant],.photo-view[data-instant]::backdrop,.photo-view[data-instant] img{transition:none}
/* A card status that changed while on screen: the same blur-swap as tapping Accept */
@keyframes status-in{from{opacity:0;filter:blur(2px);transform:translateY(4px)}}
.slip[data-changed] .slip-state{animation:status-in var(--dur-state) var(--ease-out)}
/* Wide rows tint when pressed; scaling a full-width row would make the page wobble */
.row,a.group-row,.slip-photo,.sharers label,.pick label,.photo-pick,.title-link{-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-press) ease}
.row:active,a.group-row:active,.slip-photo:active,.sharers label:active,.pick label:active,.photo-pick:active,.title-link:active{background-color:var(--sunken)}
@media (prefers-reduced-motion:reduce){
  .photo-view img,.photo-view:not([open]) img{transform:none}
  @starting-style{.photo-view[open] img{transform:none}}
  @keyframes status-in-reduced{from{opacity:0}}
  .slip[data-changed] .slip-state{animation-name:status-in-reduced}
}

/* ============================================================ Narrow phones (320px) */
.figs:not(.month-figs) .amt-lg{font-size:min(var(--t-2xl),6.6vw)} /* Home: ₹1,49,347.07 and ₹24,999 side by side */
@media (max-width:359px){ /* 320px phones: the two totals stack, at full size */
  .figs:not(.month-figs){grid-template-columns:minmax(0,1fr)}
  .figs:not(.month-figs) .amt-lg{font-size:var(--t-2xl)}
  .bottombar .btn,.choices .btn{padding-inline:var(--s2)} /* "Join with code" stays on one line */
}

/* ============================================================ Install guide */
#app-sheet{z-index:15}
.install{display:grid;gap:var(--s3);margin-top:var(--s1)}
.install .lead{font-size:var(--t-md);color:var(--muted)}
.install-steps{list-style:none;padding:0;display:grid;gap:var(--s3)}
.install-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center}
.install-step:not(:has(.illus)){grid-template-columns:minmax(0,1fr)}
.install-step > div{display:flex;gap:var(--s2);align-items:flex-start}
.install-step p{font-size:var(--t-md)}
.install-step b{font-weight:600}
.install-n{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:var(--t-xs);font-weight:700}
.illus{width:4.5rem;height:auto;flex:none;overflow:visible}
.illus .frame{fill:var(--sunken);stroke:var(--line-strong);stroke-width:1.5}
.illus .bar{fill:var(--surface);stroke:var(--line);stroke-width:1}
.illus .line{fill:var(--line-strong)}
.illus .dot{fill:var(--line-strong)}
.illus .hl{fill:var(--accent)}
.illus .hl-dot{fill:var(--on-accent)}
.illus .hl-ico path{fill:none;stroke:var(--on-accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.illus .hl-row{fill:var(--accent-tint);stroke:var(--accent);stroke-width:1.2}
.illus .hl-line{fill:var(--accent)}
.illus .plus{fill:none;stroke:var(--accent);stroke-width:1.2}
.illus .plus-x{stroke:var(--accent);stroke-width:1.2}
.illus .tile{fill:#0F5C5A}
.illus .tile-mark{stroke:#FBFCFA;stroke-width:1.4}
/* Points at Safari's Share button: below the page on iPhone, top right on iPad */
.install-arrow{position:fixed;z-index:16;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);pointer-events:none;
  animation:install-nudge 900ms var(--ease-out) infinite alternate}
.install-arrow svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.install-arrow.down{left:50%;margin-left:-1.25rem;bottom:max(var(--s2),env(safe-area-inset-bottom))}
.install-arrow.up{right:var(--s4);top:max(var(--s2),env(safe-area-inset-top))}
@keyframes install-nudge{from{transform:translateY(0)}to{transform:translateY(6px)}}
.install-arrow.up{animation-name:install-nudge-up}
@keyframes install-nudge-up{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.install-arrow{animation:none}}
#app-sheet.arrow-below .sheet{padding-bottom:calc(max(22px,env(safe-area-inset-bottom)) + 3.5rem)}

/* ============================================================ Settings switches (notifications, mute) */
.setting{display:grid;gap:var(--s1)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--tap);cursor:pointer;font-weight:500}
.setting-row > span{display:grid}
.setting-state{font-size:var(--t-sm);font-weight:400;color:var(--muted)}
.setting .hint .btn-text{padding:0 0 0 var(--s1);min-height:auto;vertical-align:baseline}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:3.25rem;height:2rem;margin:0;border-radius:var(--r-pill);background:var(--line-strong);position:relative;cursor:pointer;
  transition:background-color var(--dur-state) var(--ease-out)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:calc(2rem - 6px);height:calc(2rem - 6px);border-radius:50%;background:var(--surface);box-shadow:var(--shadow-lift);
  transition:transform var(--dur-state) var(--ease-out)}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(1.25rem)}
.switch:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.switch::after{transition:none}}
.account .setting{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s1) 0}

/* Group menu: rename in the header, leave/delete at the end */
.group-menu .leave-delete{padding-bottom:var(--s5)}
.appbar .btn-text{flex:none}

/* ============================================================ Appearance (Light / Dark / System) */
.seg button{display:flex;gap:6px;align-items:center;justify-content:center}
.appearance{gap:var(--s2)}
.setting-label{font-weight:500}
/* Switching theme: a quick crossfade of the whole screen. Nothing moves, so nothing jumps. */
::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ============================================================ Sounds listening page (not shipped) */
.sounds-page{padding:var(--s4);display:grid;gap:var(--s4)}
.sound-list{list-style:none;padding:0;display:grid;gap:var(--s4)}
.sound-list p{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s1)}

/* ============================================================ Money moments (Part 2 of SOUNDS.md)
   transform and opacity only. Each plays once, only for live changes; final states don't animate. */
/* Stickers: die-cut, solid fill, white border, slight tilt (DIRECTION.md). One on screen at most;
   never on an amount, a button or text someone needs to read. */
.sticker{display:inline-block;font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:var(--t-md);
  line-height:1;letter-spacing:.01em;white-space:nowrap;padding:8px 12px 7px;border-radius:10px;border:3px solid #FFFFFC;
  box-shadow:0 0 0 1.5px #15171E,0 6px 14px rgb(21 23 30 / .22);transform:rotate(-4deg);pointer-events:none}
.sticker-r{transform:rotate(3deg)}
.sticker-marigold{background:#FFC21A;color:#15171E}
.sticker-peacock{background:#0E7C86;color:#FFFFFC}
.sticker-rani{background:#C4215B;color:#FFFFFC}
.sticker-chilli{background:#B9280F;color:#FFFFFC}
.sticker-ink{background:#15171E;color:#FFC21A}
.empty .sticker{margin:var(--s2) 0 var(--s3) var(--s1)}
/* PAID: "Chukta!" slaps on above the card's top-left corner, holds, then peels away. Only live, never
   on reload: the sticker shows only while the card has data-stamping. The press lands at 240 ms. */
.slip{position:relative}
.slip .stamp{position:absolute;left:var(--s4);top:-26px;z-index:1;display:none;font-size:1.125rem}
.slip[data-stamping] .stamp{display:inline-block;animation:chukta 2400ms var(--ease-out) both}
@keyframes chukta{
  0%{opacity:0;transform:rotate(-20deg) scale(1.7)}
  10%{opacity:1;transform:rotate(-7deg) scale(.95)} /* the press: the sound lands here (240 ms) */
  17%{transform:rotate(-8deg) scale(1)}
  86%{opacity:1;transform:rotate(-8deg) scale(1)}
  100%{opacity:0;transform:rotate(-8deg) scale(1)}
}
.slip[data-stamping] .slip-head .amt{animation:amount-nudge 320ms var(--ease-out) 220ms both;transform-origin:right center}
@keyframes amount-nudge{50%{transform:scale(1.06)}}
/* Paid pill: its checkmark is uncovered left to right */
.slip[data-stamping] .pill-paid{position:relative;overflow:hidden}
.slip[data-stamping] .pill-paid .ico{position:relative}
.slip[data-stamping] .pill-paid::after{content:"";position:absolute;inset:0 auto 0 0;width:1.7rem;background:inherit;transform-origin:right center;
  animation:uncover 250ms var(--ease-out) 240ms both}
@keyframes uncover{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Accept: the button draws its check before the card turns to Accepted */
.btn .drawn{position:relative;display:inline-grid;overflow:hidden}
.btn .drawn::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:right center;animation:uncover 250ms var(--ease-out) both}
/* "I've paid" sent: one gentle pulse of the pending pill, not looping */
.slip[data-sent] .slip-state .pill{animation:pending-pulse 450ms var(--ease-out) 1}
@keyframes pending-pulse{40%{transform:scale(1.08)}}
/* All settled: one "Hisaab barabar" sticker by the balance, then it peels away */
.hero,#pos{position:relative}
.settled-sticker{position:absolute;right:var(--s4);top:var(--s4);z-index:2;animation:chukta 2400ms var(--ease-out) both}
#pos .settled-sticker{right:0;top:calc(100% + 10px)}
/* Reduced motion: final states at once; stickers fade in and out without moving (sounds stay, softer) */
@keyframes sticker-fade{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .slip[data-stamping] .slip-head .amt,.slip[data-stamping] .pill-paid::after,
  .btn .drawn::after,.slip[data-sent] .slip-state .pill{animation:none}
  .slip[data-stamping] .pill-paid::after,.btn .drawn::after{transform:scaleX(0)}
  .slip[data-stamping] .stamp,.settled-sticker{animation-name:sticker-fade}
}

/* ============================================================ Chat background (per group, on this phone)
   A group's chat can take one of five tints. [data-bg] swaps the page colours for its light or dark
   version; cards keep their own surface in light mode and take a matching one in dark. The swatches
   on the group page use the same attribute, so they show exactly what the chat will look like. */
.chat{background:var(--bg)}
[data-bg]{--bg:var(--g-bg-l);--sunken:var(--g-sunken-l);--line:var(--g-line-l);--muted:var(--g-muted-l);--bubble-shadow:var(--g-shadow-l);
  --get:#0D6B3D} /* a touch darker so green amounts keep 4.5:1 on the tints */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-bg]{--bg:var(--g-bg-d);--sunken:var(--g-sunken-d);--line:var(--g-line-d);--muted:var(--g-muted-d);
    --bubble-shadow:var(--g-shadow-d);--surface:var(--g-surface-d);--edge:var(--g-edge-d);--get:#3DD68C}
}
[data-theme="dark"] [data-bg]{--bg:var(--g-bg-d);--sunken:var(--g-sunken-d);--line:var(--g-line-d);--muted:var(--g-muted-d);
  --bubble-shadow:var(--g-shadow-d);--surface:var(--g-surface-d);--edge:var(--g-edge-d);--get:#3DD68C}
[data-bg="indigo"]{--g-bg-l:#E8EBF8;--g-sunken-l:#D6DCF2;--g-line-l:#C7CEEA;--g-muted-l:#4C5372;--g-shadow-l:#AFB8DE;
  --g-bg-d:#0E1330;--g-sunken-d:#222B5A;--g-line-d:#273064;--g-muted-d:#A9B0D2;--g-shadow-d:#060918;--g-surface-d:#182048;--g-edge-d:#7A84B8}
[data-bg="peacock"]{--g-bg-l:#E2F1EF;--g-sunken-l:#CCE5E1;--g-line-l:#BBD9D5;--g-muted-l:#46605D;--g-shadow-l:#A3C9C4;
  --g-bg-d:#0A1C1F;--g-sunken-d:#183639;--g-line-d:#1F3D42;--g-muted-d:#9FBBBD;--g-shadow-d:#030D0E;--g-surface-d:#11292D;--g-edge-d:#5F8A8F}
[data-bg="chai"]{--g-bg-l:#F2EBE2;--g-sunken-l:#E4D7C7;--g-line-l:#D9CAB7;--g-muted-l:#66574A;--g-shadow-l:#CBB89F;
  --g-bg-d:#17120E;--g-sunken-d:#30261E;--g-line-d:#382C22;--g-muted-d:#BBAA95;--g-shadow-d:#0A0705;--g-surface-d:#231B15;--g-edge-d:#806C58}
[data-bg="marigold"]{--g-bg-l:#FFF6D9;--g-sunken-l:#FBE6A4;--g-line-l:#F1D88A;--g-muted-l:#5F5020;--g-shadow-l:#E3C258;
  --g-bg-d:#1A1608;--g-sunken-d:#2F2810;--g-line-d:#3A3115;--g-muted-d:#C9BA8A;--g-shadow-d:#0A0803;--g-surface-d:#262010;--g-edge-d:#8A7A44}
[data-bg="rani"]{--g-bg-l:#FBEAF0;--g-sunken-l:#F3D2DE;--g-line-l:#EBC3D2;--g-muted-l:#6B4455;--g-shadow-l:#DBA7BB;
  --g-bg-d:#1C0D14;--g-sunken-d:#351A26;--g-line-d:#3D2030;--g-muted-d:#C9A3B4;--g-shadow-d:#0A0408;--g-surface-d:#28131D;--g-edge-d:#8A5A70}
/* The picker: round swatches showing the background with a bubble on it; the chosen one gets an ink ring */
.bg-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s2);margin-top:var(--s3)}
.bg-opt{display:grid;justify-items:center;gap:6px;min-height:var(--tap);cursor:pointer;-webkit-tap-highlight-color:transparent}
.bg-sw{position:relative;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:transform var(--dur-press) var(--ease-out)}
.bg-sw::after{content:"";position:absolute;left:22%;top:34%;width:56%;height:32%;border-radius:8px 8px 8px 3px;background:var(--sunken);box-shadow:2px 2px 0 var(--bubble-shadow)}
.bg-opt:active .bg-sw{transform:scale(0.95)}
.bg-opt input:checked + .bg-sw{box-shadow:inset 0 0 0 1px var(--line-strong),0 0 0 3px var(--surface),0 0 0 5px var(--text)}
.bg-opt input:focus-visible + .bg-sw{outline:2px solid var(--text);outline-offset:6px}
.bg-name{font-size:var(--t-sm);font-weight:600}
.bg-opt input:checked ~ .bg-name{font-weight:800}
@media (prefers-reduced-motion:reduce){.bg-sw{transition:none}.bg-opt:active .bg-sw{transform:none}}