/* base.css — design tokens, reset, typography, shell primitives.
   Visual language carried over from the original Recap Studio Finance
   tracker: warm paper, forest-green ink, Fraunces display + Inter body
   + JetBrains mono. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Green house palette. --navy holds the forest-green brand accent and
     --amber holds olive (names kept for stability across the codebase). */
  --paper:#EFF3E9; --card:#FFFFFF; --ink:#16231A; --ink-soft:#566156;
  --line:#DFE7D6; --line-strong:#C6D1B9; --navy:#27613D; --navy-soft:#E1F0E1;
  --amber:#7F8B3C; --in:#2E9E5B; --in-soft:#E4F4E8; --out:#C0492F; --out-soft:#F8E9E4;
  --owed:#7A6B1E; --owed-soft:#F1EFD6; --radius:14px;
  --shadow:0 1px 2px rgba(20,30,22,.05),0 8px 24px rgba(20,40,25,.07);
  --serif:"Fraunces",ui-serif,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.45;padding-bottom:64px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:30}
/* two stacked rows: identity on top, nav + view controls below.
   Keeps the session controls out of the working toolbar. */
.head-top{display:flex;align-items:center;gap:16px;padding:14px 0 12px}
.head-bar{display:flex;align-items:center;gap:12px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
/* the official lockup, in the single-colour green variant */
.brand-logo{height:30px;width:auto;display:block}
.mark{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:-.01em}
.mark .dot{color:var(--amber)}
.brand .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}

.status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink-soft);
  border:1px solid var(--line-strong);border-radius:99px;padding:6px 12px;background:var(--card)}
.status .dot{width:8px;height:8px;border-radius:99px;background:var(--ink-soft)}
.status.demo .dot{background:var(--amber)} .status.demo{color:var(--amber);border-color:#CDD6A6}
.status.ok .dot{background:var(--in)} .status.ok{color:var(--in);border-color:#BFE0CC}
.status.busy .dot{background:var(--navy);animation:pulse 1s infinite} .status.busy{color:var(--navy)}
.status.err .dot{background:var(--out)} .status.err{color:var(--out);border-color:#E6C3BE}
@keyframes pulse{50%{opacity:.3}}

/* generic button */
.btn{font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;transition:.15s}
.btn:hover{border-color:var(--navy);background:var(--navy-soft)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--navy-soft)}

/* banner */
.banner{background:var(--owed-soft);border-bottom:1px solid var(--line);font-size:12.5px;color:#6b5a23;padding:9px 0}
.banner .wrap{display:flex;gap:8px;align-items:flex-start}
.banner b{font-weight:600}

/* form fields (shared by record form, login, modals) */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--card);border-radius:9px;padding:9px 11px}
.field input.num{font-family:var(--mono)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* invalid-field feedback: a rejected save points at the field, not just alert() */
.field.err input,.field.err select{border-color:var(--out);box-shadow:0 0 0 3px var(--out-soft)}
@keyframes field-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.field.shake{animation:field-shake .35s}

/* reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}