/* Still Fits — the signed-in pages.
 *
 * Shares its palette and type with the landing page deliberately: someone who
 * signs in should not feel they have arrived somewhere else. The landing page
 * keeps its own inline copy of these tokens because it is a single file that
 * must render with no second request; these pages are behind a sign-in and can
 * afford one stylesheet.
 *
 * Safe areas, stated once so every page inherits the same answer: the page
 * declares viewport-fit=cover, so iOS lays content into the unsafe regions and
 * something has to claim them. TOP and BOTTOM go on body. LEFT and RIGHT go on
 * .wrap, via max() rather than addition, so a notch widens the gutter instead
 * of stacking on top of it. Nothing else adds env() — paying an inset twice is
 * as broken as not paying it at all.
 */

:root{
  --ground:#F4F7F4; --surface:#FFFFFF; --surface-2:#EDF2EE;
  --ink:#101F19; --ink-2:#3A5149; --muted:#6A7F76;
  --rule:#D6E0D9; --rule-2:#E6EDE8;
  --deep:#123A2E; --deep-ink:#F4F7F4;
  --gold:#8A5A0F; --gold-soft:#F6EEDD;
  --good:#1E6B45; --good-soft:#E3F1E9;
  --warn:#8A5A0F; --warn-soft:#F6EEDD;
  --bad:#8C2F2A; --bad-soft:#F7E7E5;
  --shadow:0 1px 2px rgba(16,31,25,.05), 0 10px 28px -16px rgba(16,31,25,.3);
  --maxw:820px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B120F; --surface:#121B17; --surface-2:#18231E;
    --ink:#E7EFEA; --ink-2:#B2C4BB; --muted:#85988E;
    --rule:#25322C; --rule-2:#1E2A24;
    --deep:#8FCBAF; --deep-ink:#0B120F;
    --gold:#D9A340; --gold-soft:#241D10;
    --good:#7FCBA3; --good-soft:#13251C;
    --warn:#D9A340; --warn-soft:#241D10;
    --bad:#E09A93; --bad-soft:#2A1614;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0B120F; --surface:#121B17; --surface-2:#18231E;
  --ink:#E7EFEA; --ink-2:#B2C4BB; --muted:#85988E;
  --rule:#25322C; --rule-2:#1E2A24;
  --deep:#8FCBAF; --deep-ink:#0B120F;
  --gold:#D9A340; --gold-soft:#241D10;
  --good:#7FCBA3; --good-soft:#13251C;
  --warn:#D9A340; --warn-soft:#241D10;
  --bad:#E09A93; --bad-soft:#2A1614;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:var(--maxw); margin:0 auto;
  padding-inline:max(22px, env(safe-area-inset-left, 0px)) max(22px, env(safe-area-inset-right, 0px));
}
h1,h2,h3,.ui,button,input,select,label{
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1{font-weight:800; font-size:clamp(28px,5vw,40px); line-height:1.08; letter-spacing:-.03em; margin:0 0 8px}
h2{font-weight:700; font-size:20px; letter-spacing:-.015em; margin:0 0 4px}
h3{font-weight:600; font-size:15px; letter-spacing:-.01em; margin:0 0 6px}
p{margin:0 0 14px}
a{color:inherit}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;
}
.eyebrow{
  font-family:"DM Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.muted{color:var(--muted)}
.small{font-size:14.5px}
.mono{font-family:"DM Mono", ui-monospace, monospace}

/* ───────── chrome ───────── */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px; flex-wrap:wrap}
.brand{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.02em;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.brand .dot{
  width:24px;height:24px;border-radius:6px;background:var(--deep);color:var(--deep-ink);
  display:grid;place-items:center;font-size:11px;font-weight:800;
}
.nav .links{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav .links a, .nav .links button{
  font-family:"Archivo",sans-serif; font-size:14.5px; font-weight:500;
  text-decoration:none; color:var(--ink-2); background:none; border:0; padding:0; cursor:pointer;
}
.nav .links a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav .links a:hover, .nav .links button:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

main{padding-block:12px 64px}
.rule{border:0; border-top:1px solid var(--rule); margin:0}

/* ───────── cards ───────── */
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  padding:22px; margin:0 0 18px; box-shadow:var(--shadow);
}
.card > :last-child{margin-bottom:0}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}

.grid{display:grid; gap:14px}
@media (min-width:640px){ .grid.two{grid-template-columns:1fr 1fr} }

/* ───────── figures ───────── */
.stat{background:var(--surface-2); border-radius:10px; padding:14px 16px}
.stat .n{font-family:"Archivo",sans-serif; font-weight:800; font-size:26px; letter-spacing:-.03em; display:block; line-height:1.15}
.stat .l{font-size:13.5px; color:var(--muted); display:block}

/* A ledger line: label left, money right, aligned on the decimal by tabular
   figures. Money that does not line up is money people re-add by hand. */
.line{display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--rule-2)}
.line:last-child{border-bottom:0}
.line .v{font-family:"DM Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.line.total{border-top:2px solid var(--rule); border-bottom:0; margin-top:6px; padding-top:11px; font-weight:600}
.line.total .v{font-weight:500}

/* ───────── controls ───────── */
.btn{
  font-family:"Archivo",sans-serif; font-size:15px; font-weight:600; letter-spacing:-.01em;
  background:var(--deep); color:var(--deep-ink); border:1px solid var(--deep);
  padding:11px 18px; border-radius:9px; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{opacity:.9}
.btn[disabled]{opacity:.5; cursor:default}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.small{font-size:14px; padding:8px 13px; line-height:18px}
/* A fixed line-height, because "normal" is whatever the font says: this button
   was 33px tall with Archivo loaded and 34px without it. Pinned, it is 36px either way. */

input[type="email"], input[type="text"], input[type="number"], select{
  font-family:"Archivo",sans-serif; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:9px;
  padding:11px 13px; width:100%;
}
label{display:block; font-size:14px; font-weight:600; margin:0 0 5px}
.field{margin:0 0 14px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ───────── notices ───────── */
.note{border-radius:9px; padding:12px 14px; font-size:15px; margin:0 0 14px; border:1px solid transparent}
.note.good{background:var(--good-soft); color:var(--good); border-color:currentColor}
.note.warn{background:var(--warn-soft); color:var(--warn); border-color:currentColor}
.note.bad{background:var(--bad-soft); color:var(--bad); border-color:currentColor}
/* ANY `display` on a class outranks the UA's [hidden]{display:none} — not
   just flex. So every rule in this file that sets one has to restate it, or
   `el.hidden = true` silently does nothing and the element stays on screen.
   This has now caught three separate elements here, so it is listed rather
   than fixed one at a time, and there is a browser assertion that walks every
   page looking for a [hidden] element that is still visible. */
.note[hidden], .row[hidden], .line[hidden],
.btn[hidden], .scrim[hidden], .invite[hidden], .steps[hidden], .lines[hidden]{display:none}

.pill{
  font-family:"DM Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:20px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--rule);
}
.pill.good{background:var(--good-soft); color:var(--good); border-color:currentColor}
.pill.warn{background:var(--warn-soft); color:var(--warn); border-color:currentColor}

/* ───────── invite ───────── */
.invite{display:flex; gap:8px; flex-wrap:wrap; align-items:stretch}
.invite input{flex:1 1 240px; font-family:"DM Mono",ui-monospace,monospace; font-size:14.5px}

.meter{height:8px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:10px 0 6px}
.meter > i{display:block; height:100%; background:var(--deep); border-radius:6px}

table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-family:"Archivo",sans-serif; font-size:13px; color:var(--muted); font-weight:600; padding:0 0 8px}
td{padding:9px 0; border-top:1px solid var(--rule-2); vertical-align:top}
td.v{font-family:"DM Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
th.v{text-align:right}

footer{border-top:1px solid var(--rule); padding-block:22px 40px; color:var(--muted); font-size:14px}

/* ───────── Still Fits / Still Works switch ─────────
   Toggle buttons on /browse/, radios in the listing form; one pill either way. */
.lines{display:flex; width:max-content; max-width:100%; gap:4px; padding:4px; margin:0 0 18px;
  border:1px solid var(--rule); border-radius:999px; background:var(--surface)}
.lines button, .lines label span{display:block; font-family:"Archivo",sans-serif; font-size:14.5px; font-weight:600;
  line-height:1.2; padding:8px 16px; border:0; border-radius:999px; background:transparent; color:var(--ink-2);
  cursor:pointer; text-align:center; white-space:nowrap}
/* A brand name broken over two lines ("Still" / "Fits") reads as two things.
   Narrow phones get tighter buttons instead. */
@media (max-width:360px){ .lines button, .lines label span{padding:8px 11px} }
.lines small{display:block; font-size:11.5px; font-weight:500; color:var(--muted)}
.lines button[aria-pressed="true"], .lines input:checked + span{background:var(--deep); color:var(--deep-ink)}
.lines button[aria-pressed="true"] small, .lines input:checked + span small{color:inherit; opacity:.8}
.lines label{position:relative; margin:0}
.lines input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.lines input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}