/* Arinn — visual language.
   Named after the alder tree: dependable, enduring, a solid foundation.
   Calm, trustworthy, precise — grounded and quietly premium, never flashy.

   Tone rules baked in below:
   - amber = needs your attention (routine bookkeeping cues, used subtly)
   - red   = something actually went wrong (genuine failures only, used sparingly)
   - green = done / confirmed / money in
   - solid alder-green buttons ONLY for actions that commit a decision
   - tabular numerals on figures and table cells (NOT globally — prose stays proportional)
*/

/* ---- self-hosted fonts (no CDN at runtime; precached by the service worker) ---- */
@font-face{
  font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/static/fonts/spectral-500.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/static/fonts/spectral-600.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url('/static/fonts/ibm-plex-sans-var.woff2') format('woff2');
}

:root{
  /* warm off-white ground, white surfaces, warm greys */
  --bg:#F7F5F0; --surf:#FFFFFF; --surf2:#F0EDE6; --border:#E4E0D6;
  --t1:#23271F; --t2:#5F6459; --t3:#9AA095;
  /* alder green accent + tints */
  --accent:#2C5545; --accent-soft:#E9F0EC; --accent-border:#C4D5CC;
  /* status: green = done/in, amber = attention, red = genuine failure */
  --green:#2E7D51; --green-soft:#E8F3EC; --green-border:#BFDCCB;
  --amber:#B45309; --amber-soft:#FBF3E2; --amber-border:#EAD3A8;
  --red:#B3372F; --red-soft:#F9ECEA; --red-border:#E7C2BD;
  --header-h:56px; --nav-h:64px;
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box}
/* `hidden` must ALWAYS hide — even on elements whose class sets a display (e.g. .rc-modal{display:flex}).
   Without this, an author `display` beats the UA [hidden] rule and the element stays on screen. */
[hidden]{ display:none !important; }
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--t1);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* figures: tabular numerals wherever numbers sit in columns — never on prose */
.amt, .exp-total, .exp-meta, .stat-n,
.stat-kv b, .stat-row, .imp-table, .imp-table th, .imp-table td{
  font-variant-numeric:tabular-nums;
}

/* ---- fixed header ---- */
.app-header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 18px 0;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surf); border-bottom:1px solid var(--border);
}
.brand{
  font-family:var(--serif); font-weight:600; font-size:21px;
  color:var(--accent); letter-spacing:.01em;
}
.header-right{ display:flex; align-items:center; gap:10px; }
.install-btn{
  border:1px solid var(--accent-border); background:var(--surf); color:var(--accent);
  font-family:inherit; font-weight:600; padding:8px 14px; border-radius:10px;
  font-size:14px; cursor:pointer;
}
.user-chip{
  font-size:13px; font-weight:500; color:var(--t2); text-decoration:none;
  background:var(--surf2); border:1px solid var(--border); border-radius:999px; padding:6px 13px;
}

/* ---- main scroll area ---- */
.app-main{
  max-width:560px; margin:0 auto; min-height:100%;
  padding:calc(var(--header-h) + env(safe-area-inset-top) + 18px) 18px
          calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px);
}
.view{display:none}
.view.active{display:block}
.view-title{
  font-family:var(--serif); font-weight:600; font-size:24px;
  color:var(--t1); margin:2px 0 16px; letter-spacing:.005em;
}

.card{
  background:var(--surf); border:1px solid var(--border); border-radius:14px;
  padding:18px; margin-bottom:16px;
}
.card-h{
  margin:0 0 10px; font-size:12px; color:var(--t2);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.muted{color:var(--t2); font-size:14px; line-height:1.55; margin:0}
.pe-subhead{ font-size:12px; font-weight:600; color:var(--t2); text-transform:uppercase;
  letter-spacing:.06em; margin:20px 2px 10px; }

/* ---- bottom nav ---- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:var(--surf); border-top:1px solid var(--border);
}
.nav-btn{
  flex:1; border:0; background:none; color:var(--t3); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:inherit; font-size:12px; font-weight:500; padding:6px 0;
}
.nav-ic{font-size:20px; line-height:1; filter:grayscale(1); opacity:.55}
.nav-btn.active{color:var(--accent); font-weight:600}
.nav-btn.active .nav-ic{filter:none; opacity:1}

/* ---- offline banner: attention, not alarm ---- */
.offline-banner{
  position:fixed; left:0; right:0; z-index:25;
  top:calc(var(--header-h) + env(safe-area-inset-top));
  background:var(--amber-soft); color:var(--amber); border-bottom:1px solid var(--amber-border);
  text-align:center; font-size:13px; font-weight:600; padding:7px;
}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  background:var(--t1); color:var(--bg); font-size:13px; padding:10px 16px; border-radius:11px;
  z-index:40; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90%; text-align:center;
}
.toast.show{ opacity:.96; }

/* ---- form fields ---- */
.ctrl-row{ display:flex; gap:10px; }
.field{ display:flex; flex-direction:column; gap:5px; flex:1; margin-bottom:12px; }
.field-lbl{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--t2); }
.field select,
.field input[type="text"],
.field input[type="search"],
.field input[type="date"],
.field input[type="number"]{
  width:100%; font-family:inherit; font-size:15px; color:var(--t1); background:var(--surf);
  border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  appearance:none; -webkit-appearance:none;
}
.field input[type="number"]{ font-variant-numeric:tabular-nums; text-align:right; }
.field select:focus, .field input:focus{ outline:2px solid var(--accent-border); outline-offset:0; }
.field select:disabled{ color:var(--t3); background:var(--surf2); }
.keep-toggle{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--t1); margin-bottom:8px; }
.keep-toggle input{ width:17px; height:17px; accent-color:var(--accent); }
.icon-btn{
  flex:none; width:40px; height:40px; border:1px solid var(--border); border-radius:10px;
  background:var(--surf); color:var(--t2); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ---- buttons ----
   Solid alder green is RESERVED for committing a decision (Sign in, Save, Import).
   Everything else is outline/secondary. */
.wide-btn{
  display:block; width:100%; text-align:center; box-sizing:border-box; font-family:inherit;
  border:1px solid var(--accent-border); background:var(--surf); color:var(--accent);
  font-weight:600; font-size:15px; padding:13px; border-radius:12px; cursor:pointer; margin-bottom:10px;
}
.wide-btn.ghost{ border-color:var(--border); color:var(--t2); }
.draft-save{ flex:none; border:1px solid var(--border); background:var(--surf); color:var(--t1);
  font-family:inherit; font-weight:500; font-size:13px; padding:8px 13px; border-radius:10px; cursor:pointer; }
.draft-save.danger{ color:var(--red); border-color:var(--red-border); }

/* ---- login ---- */
.login-body{ min-height:100vh; display:flex; }
.login-wrap{ margin:auto; width:100%; max-width:360px; padding:24px; }
.login-card{ background:var(--surf); border:1px solid var(--border); border-radius:16px; padding:28px 24px; }
.login-brand{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--accent); text-align:center; }
.login-sub{ text-align:center; color:var(--t2); font-size:14px; margin:6px 0 22px; }
.login-card .field{ margin-bottom:12px; }
.login-card .field input{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:16px; color:var(--t1);
  background:var(--surf); border:1px solid var(--border); border-radius:10px; padding:11px 12px;
}
/* a wrong password is a genuine failure -> red, quietly */
.login-error{
  background:var(--red-soft); color:var(--red); border:1px solid var(--red-border); border-radius:10px;
  padding:9px 12px; font-size:13px; font-weight:600; margin-bottom:14px; text-align:center;
}
.login-btn{
  width:100%; border:0; background:var(--accent); color:#fff; font-family:inherit;
  font-weight:600; font-size:16px; padding:13px; border-radius:12px; cursor:pointer; margin-top:6px;
}
.login-btn:active{ filter:brightness(1.08); }

/* ---- chips + segmented controls (selection state = soft accent, not solid) ---- */
.prod-stores{ display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; }
.stat-presets{ display:flex; flex-wrap:wrap; gap:6px; padding-bottom:10px; }
.store-chip{ flex:none; border:1px solid var(--border); background:var(--surf); color:var(--t2);
  font-family:inherit; font-size:13px; font-weight:500; padding:6px 14px; border-radius:999px; cursor:pointer; }
.store-chip.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.prod-sort{ display:flex; gap:0; margin-bottom:14px; border:1px solid var(--border);
  border-radius:10px; overflow:hidden; width:max-content; background:var(--surf); }
.prod-sort button{ border:0; background:var(--surf); color:var(--t2); font-family:inherit;
  font-size:13px; font-weight:500; padding:8px 15px; cursor:pointer; }
.prod-sort button + button{ border-left:1px solid var(--border); }
.prod-sort button.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.exp-tagrow{ display:flex; gap:0; margin:4px 0 12px; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; width:max-content; }
.tag-btn{ border:0; background:var(--surf); color:var(--t2); font-family:inherit; font-size:14px;
  font-weight:500; padding:9px 20px; cursor:pointer; }
.tag-btn + .tag-btn{ border-left:1px solid var(--border); }
.tag-btn.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ---- Documents / Transactions lists ---- */
.exp-actions{ display:flex; gap:8px; margin-bottom:14px; }
.exp-add-btn{ flex:1; border:1px solid var(--accent-border); background:var(--surf); color:var(--accent);
  font-family:inherit; font-weight:600; font-size:15px; padding:12px; border-radius:12px; cursor:pointer; }
.exp-add-btn:active{ background:var(--accent-soft); }
.exp-export-btn{ flex:none; border:1px solid var(--border); background:var(--surf); color:var(--t2);
  font-family:inherit; font-weight:500; font-size:14px; padding:12px 15px; border-radius:12px; cursor:pointer; }
.exp-list{ list-style:none; margin:6px 0 0; padding:0; }
.exp-row{ background:var(--surf); border:1px solid var(--border); border-radius:12px;
  margin-bottom:9px; overflow:hidden; }
.exp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  border:0; background:none; padding:13px 15px; cursor:pointer; text-align:left; font-family:inherit; }
.exp-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.exp-supplier{ font-size:14.5px; font-weight:600; color:var(--t1); }
.exp-meta{ font-size:12.5px; color:var(--t3); }
.exp-total{ flex:none; font-size:15px; font-weight:600; color:var(--t1); text-align:right; }
.amt-in{ color:var(--green); }                       /* money in = green; spend stays default */
/* a row that needs the user's attention (uncategorised etc.) — amber cue, not a banner */
.exp-row.attn{ border-left:3px solid var(--amber-border); }
.tag-badge{ display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:6px;
  vertical-align:1px; letter-spacing:.02em; }
.tag-badge.biz{ background:var(--accent-soft); color:var(--accent); }
.tag-badge.per{ background:var(--surf2); color:var(--t2); }
.exp-catrow{ align-items:flex-end; }
.exp-catrow .field{ flex:1; }
.exp-catrow select{ width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--t1);
  background:var(--surf); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.wl-empty{
  text-align:center; color:var(--t3); font-size:14px; padding:26px 12px; list-style:none;
  border:1.5px dashed var(--border); border-radius:12px; background:var(--surf);
}

/* queued offline rows: waiting = attention (amber); ready = green; failed = genuine failure (red) */
.queued-row{ border-style:dashed !important; border-color:var(--amber-border) !important; }
.queued-row .exp-meta{ color:var(--amber); }
.queued-row.ready{ border-color:var(--green-border) !important; }
.queued-row.ready .exp-meta{ color:var(--green); }
.queued-row.failed{ border-color:var(--red-border) !important; }
.queued-row.failed .exp-meta{ color:var(--red); }
.q-retry{ flex:none; border:1px solid var(--border); color:var(--t1); background:var(--surf);
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:8px; }

/* export confirmation line */
.export-status{ font-size:13px; color:var(--t2); margin:0 0 10px; }
.export-status:empty{ display:none; }
.export-status.err{ color:var(--red); }              /* export failed = genuine failure */
.export-status .export-share{ display:inline-block; margin-left:8px; border:1px solid var(--accent-border);
  color:var(--accent); background:none; border-radius:8px; padding:4px 11px; font-size:13px;
  font-weight:600; cursor:pointer; font-family:inherit; }

/* ---- stats ---- */
.stat-split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 16px; }
.stat-card{ background:var(--surf); border:1px solid var(--border); border-radius:12px; padding:13px 14px; }
.stat-card.biz{ border-top:3px solid var(--accent); }
.stat-card.per{ border-top:3px solid var(--t3); }
.stat-card-t{ font-size:13px; font-weight:600; color:var(--t1); margin-bottom:8px; }
.stat-n{ font-size:11px; font-weight:500; color:var(--t3); }
.stat-kv{ display:flex; justify-content:space-between; font-size:13px; color:var(--t2); padding:2.5px 0; }
.stat-kv b{ color:var(--t1); font-weight:600; text-align:right; }
.stat-kv.gross{ border-top:1px solid var(--surf2); margin-top:5px; padding-top:6px; font-weight:600; }
.stat-cats{ background:var(--surf); border:1px solid var(--border); border-radius:12px; padding:8px 14px 10px; }
.stat-row{ display:grid; grid-template-columns:minmax(0,1fr) 62px 56px 64px; gap:4px; align-items:baseline;
  font-size:13px; padding:7px 0; border-top:1px solid var(--surf2); }
.stat-row > span:nth-child(n+2){ text-align:right; }
.stat-row.head{ border-top:0; font-size:11px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.05em; }
.stat-row.total{ font-weight:600; border-top:2px solid var(--border); }

/* ---- sheets (document review, import wizard, photo source) ---- */
body.modal-open{ overflow:hidden; }
.rc-modal{ position:fixed; inset:0; z-index:60; background:rgba(35,39,31,.45); display:flex; }
.rc-sheet{ background:var(--bg); width:100%; max-width:560px; margin:auto; max-height:92vh;
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  box-shadow:0 12px 40px rgba(35,39,31,.28); }
@media (max-width:560px){ .rc-sheet{ margin:0; max-height:100vh; border-radius:0; } }
.rc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px;
  background:var(--surf); border-bottom:1px solid var(--border); }
.rc-title{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-x{ border:0; background:none; font-size:18px; color:var(--t2); cursor:pointer; width:32px; height:32px; flex:none; }
/* Save / Import = committing a decision -> the solid alder-green primary */
.rc-save{ border:0; background:var(--accent); color:#fff; font-family:inherit; font-weight:600;
  font-size:14px; padding:9px 18px; border-radius:10px; cursor:pointer; flex:none; white-space:nowrap; }
.rc-save:disabled{ opacity:.55; cursor:default; }
.rc-body{ padding:16px 18px calc(env(safe-area-inset-bottom) + 26px); overflow-y:auto; }
.rc-body .field{ margin-bottom:11px; }
.rc-body .field input{ width:100%; box-sizing:border-box; font-family:inherit; font-size:15px; color:var(--t1);
  background:var(--surf); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.rc-thumb{ display:block; width:100%; max-height:170px; object-fit:contain; border:1px solid var(--border);
  border-radius:10px; margin-bottom:14px; background:var(--surf2); }
.rc-status{ font-size:13px; line-height:1.45; padding:10px 13px; border-radius:10px; margin-bottom:12px;
  background:var(--surf2); color:var(--t2); }
.rc-status.reading{ background:var(--surf2); color:var(--t2); }
.rc-status.warn{ background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-border); }
/* a genuine conflict in the numbers is still "check this", not an alarm -> amber */
.rc-reconcile{ font-size:13px; line-height:1.45; padding:10px 13px; border-radius:10px; margin:2px 0 14px;
  background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-border); font-weight:500; }
.rc-action{ display:block; width:100%; margin-top:10px; border:1px solid var(--border);
  background:var(--surf); color:var(--t1); font-family:inherit; font-weight:500; font-size:14px;
  padding:11px; border-radius:10px; cursor:pointer; }
.exp-del{ color:var(--t2) !important; }              /* destructive, but calm: neutral outline */

/* photo source chooser */
.src-modal{ z-index:80; }
.src-sheet{ margin-top:auto; width:100%; max-width:560px; margin-left:auto; margin-right:auto;
  background:var(--surf); border-radius:16px 16px 0 0;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 14px);
  display:flex; flex-direction:column; gap:8px; }
.src-btn{ border:1px solid var(--border); background:var(--surf2); color:var(--t1); font-family:inherit;
  font-size:16px; font-weight:500; padding:13px; border-radius:12px; cursor:pointer; text-align:center; }
.src-btn:active{ background:var(--border); }
.src-btn.ghost{ background:var(--surf); color:var(--t2); }

/* ---- import wizard tables (mapping sample + preview rows) ---- */
.imp-scroll{ overflow-x:auto; margin-bottom:14px; border:1px solid var(--border);
  border-radius:10px; background:var(--surf); }
.imp-table{ border-collapse:collapse; font-size:12.5px; white-space:nowrap; width:100%; }
.imp-table th{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.04em; }
.imp-table td{ padding:6px 10px; color:var(--t1); border-top:1px solid var(--surf2); }
.imp-table tr:first-child td{ border-top:0; }
.imp-table td.c2{ color:var(--t2); }
.imp-table th.amt, .imp-table td.amt{ text-align:right; }
.imp-table td.amt-in{ color:var(--green); }          /* money in = green, here too */
.imp-table th.ctr, .imp-table td.ctr{ text-align:center; }
.imp-table td .dup-note{ color:var(--amber); font-size:11px; }
/* a probable duplicate needs the user's decision -> amber tint, not an alarm */
.imp-table tr.dup td{ background:var(--amber-soft); }
.imp-table input[type=checkbox]{ accent-color:var(--accent); width:16px; height:16px; }
.imp-note{ font-size:12px; color:var(--t2); padding:8px 2px 0; }