/* Moms Finance design polish. Loaded AFTER app.css (hand-written; no build step needed).
   Sections: 1 tokens · 2 type · 3 focus/a11y · 4 controls · 5 mobile sheets · 6 data (tables, charts) · 7 states (empty, skeleton)
             8 motion · 9 desktop layout · 10 components for upcoming features (AI chat, dock, swipe rows, billing) */

/* ---------- 1. Tokens ---------- */
:root {
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --e1: 0 1px 2px rgb(20 20 20 / .05), 0 1px 1px rgb(20 20 20 / .03);
  --e2: 0 6px 18px -8px rgb(20 20 20 / .16), 0 1px 3px rgb(20 20 20 / .06);
  --e3: 0 24px 48px -20px rgb(20 20 20 / .32), 0 4px 10px rgb(20 20 20 / .06);
  --ease: cubic-bezier(.2, .9, .25, 1);
  --ring: #2563eb;
  --in: #3f7a0d;      /* money in (text on white >= 4.5:1) */
  --out: var(--ink);  /* money out stays neutral; sign + arrow carry the meaning, never colour alone */
  --info: #2563eb; --info-soft: rgb(37 99 235 / .1);
  --mute: #6b6b66;    /* was #8a8a85 (3.4:1 on white) -> 5.3:1 */
}
.dark { --ring: #7aa7ff; --in: #a9dc63; --mute: #a3a39e; --info: #7aa7ff; --info-soft: rgb(122 167 255 / .14); --e1: 0 1px 2px rgb(0 0 0 / .4); --e2: 0 8px 20px -8px rgb(0 0 0 / .6); --e3: 0 28px 56px -20px rgb(0 0 0 / .8); }
@media (max-width: 1023.98px) {
  html[data-palette="auto"], html:not([data-palette]) { --mute: #75665e; --in: #3f7a0d; }
  html.dark[data-palette="auto"], html.dark:not([data-palette]) { --mute: #b0a098; --in: #a9dc63; }
}

/* ---------- 2. Type ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-feature-settings: "cv11", "ss03", "tnum" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; }
p, li { text-wrap: pretty; }
h1 { line-height: 1.12; }
.num, [data-count], td.num, .td.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; }
/* small print must stay legible: nothing under 12px */
.text-\[10px\] { font-size: 11px; }
.th { letter-spacing: .06em; font-size: 11.5px; }

/* ---------- 3. Focus + accessibility ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: inherit; }
.btn:focus-visible, .input:focus-visible, .chip:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 4px var(--info-soft); outline-offset: 0; }
::selection { background: color-mix(in srgb, var(--lime) 35%, transparent); }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (forced-colors: active) { .btn, .input, .card { border: 1px solid CanvasText; } }

/* ---------- 4. Controls ---------- */
.btn { min-height: 40px; font-weight: 600; letter-spacing: -.005em; box-shadow: var(--e1); }
.btn-primary, .btn-dark { box-shadow: var(--e2); }
.btn-ghost { box-shadow: none; }
.btn:disabled, .btn[aria-busy="true"] { cursor: not-allowed; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card); border-top-color: transparent; animation: ptr-spin .7s linear infinite; }
.btn-sm { min-height: 32px; }
.input { min-height: 44px; transition: border-color .15s, box-shadow .15s; }
.input:hover { border-color: var(--line-strong); }
.input:user-invalid { border-color: var(--neg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--neg) 12%, transparent); }
.input:user-invalid + .field-msg, .field-msg.is-on { display: block; }
.field-msg { display: none; margin-top: 6px; font-size: 12px; color: var(--neg); }
.field-hint { margin-top: 6px; font-size: 12px; color: var(--mute); }
select.input { appearance: none; padding-right: 2.5rem; background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
input[type=date].input, input[type=month].input, input[type=time].input { min-width: 0; font-variant-numeric: tabular-nums; }
input[type=date].input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; border-radius: 6px; padding: 2px; }
input[type=date].input::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--soft); }
.dark input[type=date].input::-webkit-calendar-picker-indicator { filter: invert(1); }
/* ₹ amount fields read as money: bigger, right aligned, tabular */
.input[inputmode=decimal], .input[inputmode=numeric] { font-variant-numeric: tabular-nums; }
.chip { min-height: 36px; display: inline-flex; align-items: center; }
.nav-item { position: relative; }
.nav-item.is-active::before { content: ""; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 4px; border-radius: 4px; background: var(--lime); }
.nav-item:active { transform: scale(.985); }
.card { box-shadow: var(--e1); }
a.card, .card.lift { transition: transform .25s var(--ease), box-shadow .25s; }
@media (hover: hover) { a.card:hover, .card.lift:hover { box-shadow: var(--e2); } }
@media (pointer: coarse) {
  .btn, .chip, .nav-item, .input, .btn-icon.btn-sm { min-height: 44px; }
  .btn-icon.btn-sm { min-width: 44px; }
  .input, select.input, textarea.input { font-size: 16px; } /* stops iOS zooming into fields */
  a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
/* toast on phones: sit above the floating pill, not on the status bar */
@media (max-width: 639px) { .toast-wrap { top: auto; bottom: calc(env(safe-area-inset-bottom) + 92px); } }

/* ---------- 5. Dialogs become bottom sheets on phones ---------- */
@media (max-width: 639.98px) {
  dialog.modal { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; max-height: 92dvh; }
  dialog.modal .modal-body { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); max-height: 92dvh; }
  dialog.modal .modal-body::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: -8px auto 14px; }
  dialog.modal[open] { animation: sheet-up .34s var(--ease) both; }
  dialog.modal.is-closing { animation: sheet-down .22s ease-in both; }
  /* primary action stays reachable by thumb */
  dialog.modal form > :is(.sticky-actions, .flex.justify-end):last-child { position: sticky; bottom: calc(-1.5rem - env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--card) 22%); padding: 16px 0 calc(1.5rem + env(safe-area-inset-bottom)); margin-bottom: calc(-1.5rem - env(safe-area-inset-bottom)); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
/* pill gets safe space so the last row is never hidden under it */
@media (max-width: 1023.98px) { #main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

/* ---------- 6. Data: tables + charts ---------- */
table { border-collapse: collapse; }
tbody tr { transition: background-color .15s; }
@media (hover: hover) { tbody tr:hover { background: color-mix(in srgb, var(--soft) 55%, transparent); } }
.td { font-variant-numeric: tabular-nums; }
.td:last-child, .th:last-child { padding-right: 24px; }
/* charts: axis text is scaled with the SVG, so set it in viewBox units large enough to stay >= 10px on a phone */
svg[viewBox] text { font-family: inherit; }
svg[viewBox^="0 0 640"] text { font-size: 13px; }
svg[viewBox^="0 0 420"] text { font-size: 12px; }
svg[viewBox] .fill-mute { fill: var(--mute); }
.chart-legend, [data-legend] { gap: 12px 18px; font-size: 13px; }
svg .bar { shape-rendering: geometricPrecision; }
svg .bar:hover { filter: brightness(1.06); }
/* money in/out: sign + arrow + weight, colour only reinforces */
.amt-in { color: var(--in); } .amt-in::before { content: "+"; }
.amt-out::before { content: "−"; }
.tx-dir { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; margin-right: 6px; }
.tx-dir.in { background: color-mix(in srgb, var(--in) 16%, transparent); color: var(--in); }
.tx-dir.out { background: var(--soft); color: var(--ink); }

/* ---------- 7. Empty + loading states ---------- */
.empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 24px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 70%); }
.empty-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; margin-bottom: 6px; color: var(--lime-dk); background: color-mix(in srgb, var(--lime) 16%, var(--card)); box-shadow: var(--e1); }
.empty h3, .empty > p:first-of-type { font-weight: 600; font-size: 16px; }
.empty .btn { margin-top: 10px; }
.skel { position: relative; overflow: hidden; border-radius: 10px; background: var(--soft); min-height: 1em; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent); animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { to { transform: translateX(100%); } }
.skel-line { height: 14px; margin: 8px 0; } .skel-block { height: 96px; border-radius: var(--r-lg); } .skel-circle { width: 40px; height: 40px; border-radius: 50%; }
.net-bar { font-weight: 500; }

/* ---------- 8. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* lists rise in with a short stagger (first 10 rows only, so long ledgers stay instant) */
  main ul.divide-y > li, main tbody > tr { animation: rise .42s var(--ease) both; }
  main :is(ul.divide-y > li, tbody > tr):nth-child(1) { animation-delay: .02s } main :is(ul.divide-y > li, tbody > tr):nth-child(2) { animation-delay: .05s }
  main :is(ul.divide-y > li, tbody > tr):nth-child(3) { animation-delay: .08s } main :is(ul.divide-y > li, tbody > tr):nth-child(4) { animation-delay: .11s }
  main :is(ul.divide-y > li, tbody > tr):nth-child(5) { animation-delay: .14s } main :is(ul.divide-y > li, tbody > tr):nth-child(6) { animation-delay: .17s }
  main :is(ul.divide-y > li, tbody > tr):nth-child(7) { animation-delay: .2s }  main :is(ul.divide-y > li, tbody > tr):nth-child(8) { animation-delay: .23s }
  main :is(ul.divide-y > li, tbody > tr):nth-child(n+9) { animation-delay: .26s }
  .row-exit { animation: row-out .28s ease-in forwards; overflow: hidden; }
  .m-pill a, .m-pill button, .quick, .m-act { transition: transform .18s var(--ease), background .2s, color .2s; }
  .btn-primary:hover, .btn-dark:hover { transform: translateY(-1px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes row-out { to { opacity: 0; transform: translateX(-24px); height: 0; padding-block: 0; } }

/* ---------- 9. Desktop layout: use the width, tame the void ---------- */
@media (min-width: 1024px) {
  .shell { box-shadow: var(--e3); }
  .main > main, #main { padding-bottom: 48px; }
  /* short laptop screens: compress the sidebar footer so the nav keeps room */
  @media (max-height: 860px) {
    .sidebar > .rounded-3xl > p.text-sm { display: none; }
    .sidebar > .rounded-3xl { padding: 12px; } .sidebar > .rounded-3xl > .grid { display: none; }
    .sidebar a[href$="/credits"] { display: none; }
  }
  #mf-nav { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 20px; }
}
@media (min-width: 1700px) { .shell { max-width: 1680px; } }

/* ---------- 10. Upcoming features (class contract for the Builder; all tokens, light + dark) ---------- */
/* AI agent chat */
.ai-chat { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 120px; }
.ai-msg { display: flex; gap: 10px; max-width: min(92%, 640px); animation: rise .3s var(--ease) both; }
.ai-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.ai-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); overflow: hidden; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line); }
.ai-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ai-bubble { padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--card); box-shadow: var(--e1), 0 0 0 1px var(--line); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-msg.me .ai-bubble { background: var(--ink); color: var(--card); border-radius: 20px 20px 6px 20px; box-shadow: none; }
.ai-name { font-size: 12px; font-weight: 600; color: var(--mute); margin: 0 0 3px 2px; }
.ai-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: ai-dot 1.1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s } .ai-typing i:nth-child(3) { animation-delay: .3s }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.ai-compose { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 12px); display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 28px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); box-shadow: var(--e3), 0 0 0 1px var(--line); }
.ai-compose textarea { flex: 1; resize: none; max-height: 140px; border: 0; background: transparent; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.ai-compose .send { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; transition: transform .15s var(--ease); }
.ai-compose .send:active { transform: scale(.9); } .ai-compose .send:disabled { opacity: .35; }
.ai-suggest { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.ai-suggest button { flex: none; white-space: nowrap; }
/* rich result cards inside a reply */
.ai-card { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--shell); box-shadow: 0 0 0 1px var(--line); }
.ai-card h4 { font-size: 13px; font-weight: 600; color: var(--mute); margin-bottom: 6px; }
.ai-card .big { font-size: 28px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ai-card.preview { border: 1.5px dashed var(--info); background: var(--info-soft); }
.ai-card.preview::before { content: "Preview — nothing saved yet"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--info); margin-bottom: 8px; }
.ai-card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ai-steps { counter-reset: s; display: grid; gap: 8px; }
.ai-steps > li { counter-increment: s; display: flex; gap: 10px; align-items: baseline; }
.ai-steps > li::before { content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--card); }
.ai-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); padding: 3px 10px; border-radius: 999px; background: var(--soft); }
/* AI actions + undo page */
.undo-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.undo-row .when { font-size: 12px; color: var(--mute); }
.undo-row.is-undone { opacity: .55; } .undo-row.is-undone .what { text-decoration: line-through; }
.undo-pill { margin-left: auto; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--soft); }
/* Admin billing + settings screens */
.plan-card { position: relative; padding: 22px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; }
.plan-card.is-featured { box-shadow: var(--e2), 0 0 0 2px var(--ink); }
.plan-price { font-size: 32px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 14px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .22s var(--ease); }
.switch input:checked + i { background: var(--in); } .switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }
.meter { height: 8px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--in); transition: width .8s var(--ease); }
.meter.warn > i { background: var(--orange); } .meter.over > i { background: var(--neg); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.status.ok::before { background: var(--in); } .status.warn::before { background: var(--orange); } .status.bad::before { background: var(--neg); }
.sms-preview { max-width: 320px; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: var(--soft); font-size: 14px; }
.sms-preview mark, .tpl-token { background: var(--info-soft); color: var(--info); padding: 0 5px; border-radius: 6px; font-family: ui-monospace, monospace; font-size: .92em; }

/* ---------- 11. Layout helpers (Tailwind is prebuilt, so new utilities live here) ---------- */
.stat-trio { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .stat-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-trio > div { min-width: 0; }
.stat-trio .num { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* ---------- 12. Fixes for utility-vs-component order (m-sheet is defined after the lg: utilities, so they never applied) ---------- */
@media (min-width: 1024px) {
  .m-sheet.lg\:mt-0 { margin-top: 0; }
  .m-sheet.lg\:bg-transparent { background: transparent; }
  .m-sheet.lg\:shadow-none { box-shadow: none; }
}
/* scrolling tab strips: room for the active pill's shadow so it is never clipped, soft edge fades */
[data-scroll-active] { padding: 8px 10px 12px; margin-inline: -10px; scrollbar-width: none; scroll-padding-inline: 16px; }
[data-scroll-active]::-webkit-scrollbar { display: none; }
@media (max-width: 1023.98px) { [data-scroll-active] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); } }

/* segmented/jelly radios must never widen the page: scroll inside themselves */
.jelly-radio { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.jelly-radio::-webkit-scrollbar { display: none; }

/* dashboard "at a glance" tiles: fixed internal structure, generous padding, no text touching edges */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:1536px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat-tile{display:flex;flex-direction:column;gap:.5rem;min-width:0;padding:1.25rem 1.5rem;border-radius:1.25rem}
.stat-tile__label{font-size:.8125rem;font-weight:500;line-height:1.3;color:var(--mute,#8a8a85)}
.stat-tile__value{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:650;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.stat-tile__notes{list-style:none;margin:.25rem 0 0;padding:.75rem 0 0;border-top:1px solid color-mix(in srgb,currentColor 8%,transparent);display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;line-height:1.4;color:var(--mute,#8a8a85)}
@media (max-width:480px){.stat-tile{padding:1rem 1.125rem}}
/* card headers: title + action buttons wrap instead of pushing the page wider */
main header.justify-between { flex-wrap: wrap; }
main header.justify-between > .shrink-0 { flex-wrap: wrap; }
main header.justify-between > .min-w-0 { flex: 1 1 14rem; }

/* overview trio: amounts scale to their tile (container units) so long values like ₹46,294.70 never touch the edge */
.stat-trio > div{min-width:0;container-type:inline-size;padding:1rem 1.125rem}
.stat-trio .num{font-size:clamp(1rem,12cqi,1.5rem);line-height:1.15;overflow-wrap:anywhere}