/* Shared foundations. Page styles own layout; this file owns the scales and reusable components.
   Every size in this app comes from a token below. If a page needs a value that
   is not on a scale, the scale is wrong - fix it here rather than one-offing it. */
:root {
  /* Green ramp. One hue family, seven steps - use these for range instead of
     reaching for a new color. Charts, hovers and fills all draw from here. */
  --g-50:#e8f2ea; --g-100:#d3e6da; --g-200:#b9d6c4; --g-400:#7b9f91;
  --g-600:#0f5137; --g-700:#0a3a27; --g-900:#0b2a1e;

  /* Color */
  /* Warm paper ground with a deep forest green: the same system on the
     landing page and in the product. */
  --bg:#f4f1ea; --surface:#ffffff; --surface-soft:#efeae0; --surface-sunk:#e6e0d3;
  --ink:#14201a; --muted:#5d6b62; --on-accent:#ffffff; --muted-on-ink:#9db5ac;
  --line:#e3ddd1; --line-strong:#cbc4b5;
  --accent:var(--g-600); --accent-strong:var(--g-700); --accent-soft:var(--g-50); --accent-line:var(--g-200);
  --canvas:var(--g-900);
  --success:var(--g-600); --success-soft:var(--g-50);
  --warning:#946316; --warning-soft:#fdf3de; --warning-line:#e3c98e;
  --danger:#b23b33; --danger-soft:#fae8e5; --danger-line:#e4bfb8;
  /* Shadows carry a trace of the hue so elevation reads warm, not grey. */
  --shadow-soft:0 1px 2px #0b2a1e0a;
  --shadow:0 1px 2px #0b2a1e0d, 0 18px 44px #0b2a1e14;
  --shadow-lift:0 2px 4px #0b2a1e0d, 0 26px 60px #0b2a1e1f;
  --overlay:#0b2a1ee6;
  /* Motion. One curve, two durations. */
  --ease:cubic-bezier(.2,.7,.3,1); --dur:.18s; --dur-slow:.28s;

  /* Type scale. 8 steps, nothing between them. */
  --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-md:15px;
  --t-lg:17px; --t-xl:20px; --t-2xl:26px; --t-3xl:32px;
  --t-hero:clamp(2.6rem,5vw,4rem);
  --t-metric:clamp(1.6rem,2.8vw,2.1rem);
  /* Tracking: tied to size, not chosen per component. */
  --track-tight:-.02em; --track-display:-.03em; --track-caps:.08em;

  /* Space scale. 4px base. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px;

  /* Radius. Controls use the small steps; cards use --r-card; actions are pills. */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-card:22px; --r-pill:999px;

  --control-h:44px;
  --sans:"Onest","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --display:var(--sans);
  --focus-ring:0 0 0 3px #0f513726;
}
* { box-sizing:border-box; }
html { color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:var(--t-md); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1 { font-size:var(--t-3xl); font-weight:650; line-height:1.15; letter-spacing:var(--track-display); }
h2 { font-size:var(--t-xl); font-weight:600; line-height:1.3; letter-spacing:var(--track-tight); }
h3 { font-size:var(--t-md); font-weight:600; line-height:1.4; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
svg { vertical-align:middle; flex-shrink:0; }
img { max-width:100%; }
[hidden],.hidden { display:none!important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent-soft); color:var(--ink); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; top:var(--s-2); left:var(--s-2); z-index:100; transform:translateY(-160%); background:var(--accent); color:var(--on-accent); padding:var(--s-3) var(--s-5); border-radius:var(--r-md); }
.skip-link:focus { transform:none; }
.page { width:min(1200px,100%); margin:auto; padding:0 var(--s-7); }
.frame { min-width:0; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.brand { display:inline-flex; align-items:center; gap:var(--s-2); color:var(--ink); font-size:var(--t-xl); font-weight:650; letter-spacing:var(--track-tight); text-decoration:none; white-space:nowrap; }
.brand-mark { width:30px; height:30px; display:block; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); min-height:80px; position:relative; }
.nav-actions { display:flex; align-items:center; gap:var(--s-1); }
.nav-link,.nav-pill,.nav-about { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-h); padding:var(--s-2) var(--s-3); font-size:var(--t-sm); font-weight:600; text-decoration:none; border:0; border-radius:var(--r-md); background:transparent; color:var(--muted); }
.nav-link:hover,.nav-about:hover { background:var(--surface-soft); color:var(--ink); }
.nav-pill { background:var(--surface-soft); color:var(--ink); }
.nav-menu-btn { display:none; align-items:center; justify-content:center; width:var(--control-h); height:var(--control-h); border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--r-md); }

/* Public pages ship both navs; the pre-paint `is-signed-in` class picks one,
   so returning to the home page does not look like being signed out. */
.nav-signed-in { display:none; }
html.is-signed-in .nav-guest { display:none; }
html.is-signed-in .nav-signed-in { display:flex; }

/* App shell nav: brand (home) · section links · account menu on the right.
   Sign-out lives in the account menu, not in the primary tab row. */
.app-nav { gap:var(--s-4); }
.app-nav .nav-actions { margin-right:auto; }
.account { position:relative; flex-shrink:0; }
.account-btn { display:inline-flex; align-items:center; gap:var(--s-2); min-height:36px; padding:var(--s-1) var(--s-2) var(--s-1) var(--s-1); border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:var(--t-sm); font-weight:600; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease); }
.account-btn:hover,.account.is-open .account-btn { border-color:var(--line-strong); background:var(--surface-soft); }
.account-avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:var(--t-2xs); font-weight:650; line-height:1; }
.account-name { max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chevron { width:14px; height:14px; color:var(--muted); transition:transform var(--dur) var(--ease); }
.account.is-open .account-chevron { transform:rotate(180deg); }
.account-panel { display:none; position:absolute; z-index:30; right:0; top:calc(100% + var(--s-2)); min-width:200px; padding:var(--s-1); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow); }
.account.is-open .account-panel { display:block; }
.account-sep { height:1px; margin:var(--s-1) 0; background:var(--line); border:0; }
.account-item { display:flex; align-items:center; width:100%; min-height:36px; padding:var(--s-2) var(--s-3); border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink); font-size:var(--t-sm); font-weight:600; text-align:left; text-decoration:none; }
.account-item:hover { background:var(--surface-soft); }
.account-item--danger { color:var(--muted); }
.account-item--danger:hover { color:var(--danger); background:var(--danger-soft); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn,.nav-cta { display:inline-flex; justify-content:center; align-items:center; gap:var(--s-2); min-height:var(--control-h); padding:var(--s-3) var(--s-5); border:1px solid transparent; border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600; text-decoration:none; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.btn:active:not(:disabled),.nav-cta:active { transform:translateY(1px); }
.btn-primary,.nav-cta { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover:not(:disabled),.nav-cta:hover { background:var(--accent-strong); }
.btn-secondary { background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
.btn-secondary:hover:not(:disabled) { background:var(--surface-soft); }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.panel { min-width:0; padding:var(--s-6); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); }

/* ── Product page primitives (shared by /app, /history, /settings) ──────── */
.app-title { font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:600; line-height:1.1; letter-spacing:-.03em; text-wrap:pretty; }
/* First run and empty states: a heading, one line, one action. */
.app-intro { display:grid; justify-items:center; padding:var(--s-9) 0; text-align:center; }
.app-intro[hidden] { display:none; }
.app-intro .app-title { text-wrap:balance; }
.app-lede { max-width:46ch; margin:var(--s-4) auto var(--s-7); font-size:var(--t-lg); color:var(--muted); line-height:1.6; text-wrap:balance; }
.app-card { padding:var(--s-6); background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); }
.app-card[hidden] { display:none; }
.btn-lg { min-height:52px; padding:var(--s-3) var(--s-7); font-size:var(--t-md); }
/* Quiet text action inside a row or sheet; the hit area extends past the label. */
.row-text-btn { position:relative; padding:0; border:0; background:transparent; color:var(--muted); font-size:var(--t-xs); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.row-text-btn::after { content:""; position:absolute; inset:-10px; }
.row-text-btn:hover { color:var(--ink); }
/* Settled is the default and goes unmarked; only a pending charge says so. */
.pending-mark { display:inline-flex; align-items:center; gap:5px; margin-left:var(--s-2); font-size:var(--t-2xs); font-weight:500; color:var(--muted); white-space:nowrap; vertical-align:1px; }
.pending-mark::before { content:""; width:6px; height:6px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; }
/* Review outcome pills: the only pill shape in a row. */
.tag { min-width:72px; padding:3px var(--s-2); border:1px solid transparent; border-radius:var(--r-pill); background:var(--surface-soft); color:var(--muted); font-style:normal; font-size:var(--t-2xs); font-weight:600; text-align:center; white-space:nowrap; }
.tag.is-new { background:var(--accent-soft); color:var(--accent); }
.tag.is-review { border-color:var(--accent); background:var(--surface); color:var(--accent); }
.tag.is-saved { background:var(--surface); }
.tag.is-added { background:var(--accent); color:var(--on-accent); }

/* ── Callouts ──────────────────────────────────────────── */
/* A standalone banner for errors and warnings. */
.callout { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2); padding:var(--s-3) var(--s-4); border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--muted); font-size:var(--t-sm); }
.callout strong,.callout-label { color:var(--ink); font-weight:600; }
.callout--warning { border-left-color:var(--warning); }
.callout--danger { border-left-color:var(--danger); }
.callout--danger .callout-label,.callout--danger strong { color:var(--danger); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=file]),select,textarea { min-width:0; width:100%; min-height:var(--control-h); border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); padding:10px var(--s-3); font-size:16px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:var(--focus-ring); outline:none; }
input[type=checkbox] { accent-color:var(--accent); width:18px; height:18px; }
.control > label { display:block; font-size:var(--t-xs); font-weight:600; margin-bottom:var(--s-2); }

/* ── Feedback ───────────────────────────────────────────────────────────── */
.spinner { display:inline-block; width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; z-index:100; bottom:var(--s-6); left:50%; transform:translate(-50%,20px); max-width:min(520px,calc(100vw - 32px)); width:max-content; padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); background:var(--ink); color:var(--on-accent); font-size:var(--t-sm); box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; overflow-wrap:anywhere; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast a { color:var(--accent-line); text-decoration:underline; }

.site-foot { display:flex; justify-content:space-between; gap:var(--s-5); padding:var(--s-6) 0; border-top:1px solid var(--line); color:var(--muted); font-size:var(--t-xs); }
.site-foot > :first-child { color:var(--ink); font-weight:600; }
/* Footer links share one quiet style: darker and slightly heavier than the surrounding
   text (a cue beyond colour alone), underlined on hover. */
.site-foot a { color:var(--ink); font-weight:500; text-decoration:none; text-underline-offset:3px; }
.site-foot a:hover { text-decoration:underline; }

@media (max-width:640px) {
  .page { padding:0 max(var(--s-5),env(safe-area-inset-left)) 0 max(var(--s-5),env(safe-area-inset-right)); }
  .nav { min-height:72px; gap:var(--s-3); flex-wrap:wrap; padding:var(--s-4) 0; }
  .brand { font-size:var(--t-lg); }.brand-mark { width:26px; height:26px; }
  .nav-menu-btn { display:inline-flex; margin-left:auto; }
  .nav-actions { order:3; width:100%; gap:var(--s-1); padding-top:var(--s-1); }
  .app-nav .nav-actions { margin-right:0; }
  .account-name { display:none; }
  .account-btn { padding:var(--s-1); }
  .nav-actions .nav-link,.nav-actions .nav-pill { flex:1; padding:var(--s-2); font-size:var(--t-xs); }
  #navActionsPanel { display:none; }
  .nav--open #navActionsPanel { display:flex; flex-wrap:wrap; }
  #navActionsPanel > * { flex:1; }
  .panel { padding:var(--s-5); }
  .site-foot { font-size:var(--t-2xs); flex-wrap:wrap; gap:var(--s-2); }
  .toast { bottom:max(var(--s-5),env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }