/* public/app.css: design system, same architecture as Fridgeria's: theme
   tokens are CSS custom properties; <html data-theme="light|dark"> is set by a
   tiny <head> script from localStorage (or prefers-color-scheme on the first
   visit). Semantic component classes (.card, .btn-*, .input, .badge-*, .flash-*,
   .nav-link, .tab, …) are built on the tokens; Tailwind (CDN) only does layout.
   Palette: indigo/violet accent on a cool canvas, amber as the second person. */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;

  --canvas:      #f6f5fb;
  --surface:     #ffffff;
  --surface-2:   #eeecf7;
  --line:        #dedbec;
  --fg:          #1a1830;
  --fg-muted:    #6a6784;

  --accent:      #5b45d6;
  --accent-fg:   #ffffff;
  --accent-weak: #e6e0fc;
  --accent-line: #b5a8f3;

  --warn:        #b45309;
  --warn-weak:   #fdeecd;
  --danger:      #c02626;
  --danger-weak: #fbe1e1;
  --ok:          #167a3c;
  --ok-weak:     #d7f2df;
  --info:        #1d68c4;
  --info-weak:   #dbeafe;

  --header-bg:      #4a36c2;
  --header-fg:      #ffffff;
  --header-dim:     rgba(255, 255, 255, .74);
  --header-active:  rgba(255, 255, 255, .18);
  --header-hover:   rgba(255, 255, 255, .10);
  --header-line:    rgba(255, 255, 255, .16);

  /* up to four people (charts, stripes, badges) */
  --p1: #5b45d6;
  --p2: #e0761b;
  --p3: #0d9488;
  --p4: #d6336c;
  --on-p: #ffffff;
  --p1-weak: #e6e0fc;
  --p2-weak: #fde6d0;

  /* category hues */
  --cat-violet: #6d4fe0;
  --cat-sky:    #0284c7;
  --cat-rose:   #be123c;
  --cat-green:  #15803d;
  --cat-amber:  #b45309;
  --cat-orange: #c2410c;
  --cat-teal:   #0f766e;
  --cat-pink:   #be185d;
  --cat-lime:   #4d7c0f;
  --cat-slate:  #475569;

  --shadow: 0 1px 2px rgba(26, 24, 48, .05), 0 8px 22px -10px rgba(26, 24, 48, .16);
  --radius: 1rem;
}

/* ---------- tokens: dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:      #0f0e17;
  --surface:     #181724;
  --surface-2:   #232132;
  --line:        #312e45;
  --fg:          #ebe9f6;
  --fg-muted:    #a7a3c0;

  --accent:      #a99bff;
  --accent-fg:   #150f3a;
  --accent-weak: #2a2360;
  --accent-line: #4b3fa3;

  --warn:        #fbbf24;
  --warn-weak:   #3c2b0b;
  --danger:      #f87171;
  --danger-weak: #3d1414;
  --ok:          #4ade80;
  --ok-weak:     #0f2e1c;
  --info:        #60a5fa;
  --info-weak:   #10233f;

  --header-bg:     #241d5c;
  --header-fg:     #e6e2ff;
  --header-dim:    rgba(230, 226, 255, .66);
  --header-active: rgba(230, 226, 255, .16);
  --header-hover:  rgba(230, 226, 255, .08);
  --header-line:   rgba(230, 226, 255, .12);

  --p1: #a99bff;
  --p2: #ffb04d;
  --p3: #2dd4bf;
  --p4: #f472b6;
  --on-p: #14121f;
  --p1-weak: #2a2360;
  --p2-weak: #40290c;

  --cat-violet: #a78bfa;
  --cat-sky:    #38bdf8;
  --cat-rose:   #fb7185;
  --cat-green:  #4ade80;
  --cat-amber:  #fbbf24;
  --cat-orange: #fb923c;
  --cat-teal:   #2dd4bf;
  --cat-pink:   #f472b6;
  --cat-lime:   #a3e635;
  --cat-slate:  #94a3b8;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -12px rgba(0, 0, 0, .6);
}

html, body { overflow-x: clip; }
body {
  background: var(--canvas);
  color: var(--fg);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
*, ::before, ::after { border-color: var(--line); }

:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: .4rem;
}
.app-header :where(a, button):focus-visible { outline-color: var(--header-fg); }

/* ---------- coloured app header ---------- */
.app-header { background: var(--header-bg); color: var(--header-fg); border-bottom: 1px solid var(--header-line); }
.wordmark {
  color: var(--header-fg); font-weight: 700; font-size: .95rem;
  text-decoration: none; letter-spacing: -.015em;
  border: 1px solid var(--header-line); border-radius: .55rem;
  padding: .3rem .55rem; background: var(--header-hover);
}
.wordmark:hover { border-color: var(--header-fg); }
@media (max-width: 639px) { .wordmark { padding: .3rem; } }

.nav { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.app-header .nav-link {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .5rem .65rem; border-radius: .6rem; font-size: .875rem; font-weight: 500;
  color: var(--header-dim); text-decoration: none;
}
.app-header .nav-link:hover { color: var(--header-fg); background: var(--header-hover); }
.app-header .nav-link.is-active { color: var(--header-fg); background: var(--header-active); font-weight: 600; }
.header-btn { color: var(--header-dim); border-radius: .6rem; padding: .4rem; display: inline-flex; align-items: center; }
.header-btn:hover { color: var(--header-fg); background: var(--header-hover); }
.header-btn.is-active { color: var(--header-fg); background: var(--header-active); }
@media (max-width: 639px) { .nav-label { display: none; } .app-header .nav-link { padding: .5rem; } }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 1rem; }
@media (min-width: 640px) { .card-pad { padding: 1.25rem; } }
.card-accent { border-left: 4px solid var(--stripe, var(--accent)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: .7rem; font-size: .875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 2.75rem; transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { filter: brightness(.93); }
.btn-primary   { background: var(--accent); color: var(--accent-fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btn-primary:hover   { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--accent-line); }
.btn-ghost   { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover   { color: var(--fg); background: var(--surface-2); }
.btn-danger  { background: transparent; color: var(--danger); }
.btn-danger:hover  { background: var(--danger-weak); }
.btn-sm { padding: .4rem .6rem; min-height: 2.25rem; font-size: .8rem; border-radius: .55rem; gap: .3rem; }
.btn-block { width: 100%; }

/* ---------- forms ---------- */
.input, .select, textarea.input {
  width: 100%; padding: .6rem .75rem; border-radius: .6rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  font-size: .9rem; min-height: 2.75rem;
}
.input::placeholder { color: var(--fg-muted); }
.input:focus, .select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
.field > .label { display: block; font-size: .8rem; font-weight: 600; color: var(--fg-muted); margin-bottom: .3rem; }
.help { font-size: .75rem; color: var(--fg-muted); margin-top: .3rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: .6rem; font-size: .85rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--accent); }
.chip-on { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--fg-muted); }
.badge-ok     { background: var(--ok-weak);     color: var(--ok); }
.badge-warn   { background: var(--warn-weak);   color: var(--warn); }
.badge-danger { background: var(--danger-weak); color: var(--danger); }
.badge-info   { background: var(--info-weak);   color: var(--info); }
.badge-p1 { background: var(--p1-weak); color: var(--p1); }
.badge-p2 { background: var(--p2-weak); color: var(--p2); }

/* ---------- flash ---------- */
.flash { border-radius: .7rem; padding: .75rem 1rem; font-size: .875rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-muted); }
.flash-ok    { background: var(--ok-weak);     color: var(--ok);     border-color: transparent; }
.flash-error { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.flash-warn  { background: var(--warn-weak);   color: var(--warn);   border-color: transparent; }
.flash-info  { background: var(--info-weak);   color: var(--info);   border-color: transparent; }

/* ---------- misc ---------- */
.section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.section-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; background: var(--stripe, var(--accent)); flex: none; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--fg-muted); font-size: .9rem; }
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.divide-line > * + * { border-top: 1px solid var(--line); }

/* person colours */
.p1 { --stripe: var(--p1); --hue: var(--p1); }
.p2 { --stripe: var(--p2); --hue: var(--p2); }
.p3 { --stripe: var(--p3); --hue: var(--p3); }
.p4 { --stripe: var(--p4); --hue: var(--p4); }
.text-p1 { color: var(--p1); }
.text-p2 { color: var(--p2); }
.text-p3 { color: var(--p3); }
.text-p4 { color: var(--p4); }

/* category hues: <span class="section-dot" style="--stripe:var(--cat-sky)"> */

/* ---------- tabs ---------- */
.tabs { display: flex; gap: .1rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  white-space: nowrap; padding: .55rem .8rem; font-size: .875rem; font-weight: 600;
  color: var(--fg-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; text-decoration: none;
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--hue, var(--accent)); border-bottom-color: var(--hue, var(--accent)); }
.tab.is-future { opacity: .55; }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; padding: .8rem .9rem; box-shadow: var(--shadow); min-width: 0; }
.tile-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.tile-value { font-size: 1.25rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: .75rem; color: var(--fg-muted); margin-top: .1rem; }

/* balance hero */
.hero { border-radius: var(--radius); padding: 1.25rem; color: #fff; box-shadow: var(--shadow);
        background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); }
.hero-owed  { --hero-a: #15803d; --hero-b: #0f766e; }
.hero-owing { --hero-a: #b45309; --hero-b: #be123c; }
.hero-even  { --hero-a: #5b45d6; --hero-b: #4a36c2; }
:root[data-theme="dark"] .hero-owed  { --hero-a: #166534; --hero-b: #115e59; }
:root[data-theme="dark"] .hero-owing { --hero-a: #92400e; --hero-b: #9f1239; }
:root[data-theme="dark"] .hero-even  { --hero-a: #3b2f96; --hero-b: #241d5c; }
.hero .hero-amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero .btn-hero { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.hero .btn-hero:hover { background: rgba(255,255,255,.28); }

/* ---------- data tables (bills grid, breakdowns) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .85rem; }
.grid-table th, .grid-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid-table thead th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-muted); text-align: right; }
.grid-table thead th:first-child, .grid-table tbody th { text-align: left; }
.grid-table tbody th { font-weight: 600; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: .75rem; }
.grid-table tfoot td, .grid-table tfoot th { font-weight: 700; border-bottom: 0; background: var(--surface-2); }
.grid-table tfoot th { position: sticky; left: 0; }
.cell { display: flex; align-items: center; gap: .2rem; justify-content: flex-end; }
.cell-input { width: 4.6rem; padding: .3rem .4rem; min-height: 2.1rem; border-radius: .45rem; border: 1px solid var(--line);
              background: var(--surface); color: var(--fg); font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.cell-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.payer-btn { min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; font-size: .68rem; font-weight: 800;
             cursor: pointer; border: 0; color: var(--on-p); flex: none; }
.payer-btn[data-slot="1"] { background: var(--p1); }
.payer-btn[data-slot="2"] { background: var(--p2); }
.payer-btn[data-slot="3"] { background: var(--p3); }
.payer-btn[data-slot="4"] { background: var(--p4); }
.cell.is-empty .payer-btn { opacity: .28; }

/* month rows */
.amount-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; padding: .6rem 0; }
.amount-row .saved { font-size: .72rem; color: var(--fg-muted); }
.amount-input { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 1rem; }
.bar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--stripe, var(--accent)); }

.chart-box { position: relative; height: 240px; }
.chart-box-sm { position: relative; height: 200px; }
.chart-box-lg { position: relative; height: 340px; }

@media (pointer: coarse) {
  .btn-sm { min-height: 2.5rem; }
  .chip   { min-height: 2.4rem; }
  .tab    { padding-top: .7rem; padding-bottom: .7rem; }
}

.w-auto { width: auto; }
.w-full { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- category calculator (month page) ---------- */
.calc-btn { min-width: 2.75rem; padding: .5rem; }
.calc-note { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc {
  border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); color: var(--fg);
  padding: 1rem; width: min(22rem, calc(100vw - 1rem)); box-shadow: var(--shadow); margin: auto;
}
.calc::backdrop { background: rgba(10, 8, 25, .55); }
.calc-tape {
  min-height: 2.6rem; max-height: 5.2rem; overflow-y: auto; margin-top: .75rem;
  text-align: right; font-size: 1.05rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.calc-result { text-align: right; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-result.is-bad { color: var(--danger); font-size: 1.3rem; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .75rem; }
.calc-key {
  min-height: 3.1rem; border-radius: .8rem; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--fg); font-size: 1.2rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.calc-key:active { filter: brightness(.9); }
.calc-key.fn { color: var(--fg-muted); }
.calc-key.op { background: var(--accent-weak); color: var(--accent); border-color: var(--accent-line); }
.calc-key.ok { grid-row: span 2; background: var(--accent); color: var(--accent-fg); border-color: transparent; font-size: 1.6rem; }
.calc-key.ok:disabled { opacity: .4; cursor: not-allowed; }
.calc-key.zero { grid-column: span 2; }
@media (max-width: 639px) {
  /* bottom sheet on phones */
  .calc { margin: auto 0 0; width: 100%; max-width: none; border-radius: 1.1rem 1.1rem 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .calc-key { min-height: 3.4rem; }
}

/* the logout <form> in the header must not add margin (it sat a few px above the other icons) */
.app-header form { margin: 0; }

/* ---------- switches: every yes / no is a switch, never a bare checkbox ---------- */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem 0; cursor: pointer;
}
.toggle-label { display: block; font-size: .9rem; font-weight: 500; color: var(--fg); }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 2.75rem; height: 1.6rem; border-radius: 999px; cursor: pointer;
  background: var(--line); border: 1px solid var(--line); transition: background .15s, border-color .15s;
}
.switch::after {
  content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 999px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(1.15rem); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* the password rule under a new-password box (app.js marks it as the person types) */
[data-password-meter].is-ok  { color: var(--ok); }
[data-password-meter].is-bad { color: var(--warn); }