/* ==========================================================================
   Platform theme v2 — "Stone + Forest" (2026-07-18)
   Ported verbatim from docs/UI_PROTOTYPE_2026-07-18.html (the design truth).
   Served at /static/tokens.css (ESTIMATING_TOKENS_CSS overrides the file).
   The vault design system (04-Claude/design-system/) is unchanged — this is
   the PRODUCT theme, decided separately (BUILD_PLAN_UI_2026-07-18.md).
   ========================================================================== */
:root {
  /* Stone + Forest — v2 (2026-07-18) */
  --bg:#eff1ec; --surface:#ffffff; --surface-2:#e5e8e1; --surface-3:#d9ddd3;
  --border:#dfe3da; --border-strong:#c3c9bc;
  --text:#232823; --text-muted:#5c645a; --text-faint:#8b9287; --text-on-accent:#ffffff;
  --accent:#3d6b4f; --accent-hover:#2f5540; --accent-soft:#e7efe9; --accent-border:#c2d6c8;
  --success:#4d7a2e; --success-soft:#ecf2e3; --success-border:#cbdcb4;
  --danger:#b23b30; --danger-soft:#f8e9e6; --danger-border:#eac8c1;
  --warning:#946f00; --warning-soft:#f6efcf; --warning-border:#e3d597;
  --info:#456b7a; --info-soft:#e7eef1; --info-border:#c2d4dc;
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px;
  --lh-tight:1.25; --lh-base:1.55;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(43,38,32,.05);
  --tap:44px; /* mobile touch-target floor (M1, BUILD_PLAN_MOBILE) */
}

/* Component base rules (both widths). These MUST come before the mobile
   @media layer — the mobile variants override them at equal specificity,
   which only works source-order-later. */

/* filterchips base: the flex row templates previously inlined */
.filterchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* home (M4) base: stat tiles + waiting-on-you rows */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.statstrip .stat{margin:0}
.homeitem{display:flex;align-items:center;gap:12px;min-height:var(--tap,44px);padding:10px 4px;border-bottom:1px solid var(--border);color:var(--text);font-size:14px}
.homeitem:last-child{border-bottom:none}
.homeitem:hover{background:var(--surface-2)}
.homeitem .hi-ic{flex:none;width:32px;height:32px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:15px}
.homeitem .hi-t{flex:1;min-width:0}
.homeitem .hi-t small{display:block;color:var(--text-muted)}

/* Mobile layer (M1 mobile shell v2 — docs/DESIGN_2026-07-18_mobile-redesign.md):
   16px type/input floor (kills iOS zoom-on-focus), 44px tap floor, one-column
   grids, bottom clearance for the tab bar. Shell selectors live in base.html;
   these rules apply wherever the classes appear. */
@media (max-width:720px){
  body{font-size:var(--fs-base)}
  main{padding:var(--sp-5) var(--sp-4) calc(72px + var(--sp-8))}
  header.top{padding:var(--sp-3) var(--sp-4);flex-wrap:wrap}
  header.top .crumb{order:3;flex-basis:100%;font-size:var(--fs-xs)}
  h1{font-size:var(--fs-xl)}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .card{padding:var(--sp-4)}
  button,.btn{min-height:var(--tap);font-size:var(--fs-base);padding:var(--sp-2) var(--sp-5)}
  input[type=text],input[type=password],textarea,select{min-height:var(--tap);font-size:var(--fs-base)}
  .login-box{margin:32px auto}
  .toast{bottom:84px} /* clear the tab bar */

  /* ---- rowlist (M2): one markup, two layouts. ≥720px a rowlist is a plain
     table (no rules fire); below, every row becomes a card — line 1 =
     ref + primary + status chip, line 2 = the meta cells, actions last.
     Cell annotations: rl-head (hidden header row), rl-ref, rl-primary,
     rl-chip, rl-actions, rl-body (full-width text), rl-hide (drop on
     phone), data-l="label" (tiny label prefix on bare values). ---- */
  table.rowlist tr.rl-head{display:none}
  table.rowlist,table.rowlist tbody{display:block}
  table.rowlist tr{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:10px}
  table.rowlist tr::before{content:"";order:4;flex-basis:100%;height:0} /* line break after the chip */
  table.rowlist td{display:inline-flex;align-items:center;gap:4px;border:none;padding:0;font-size:var(--fs-xs);color:var(--text-muted);order:5;min-width:0}
  table.rowlist td.rl-ref{order:1;font-family:var(--font-mono);color:var(--text-faint)}
  table.rowlist td.rl-primary{order:2;flex:1 1 40%;font-size:var(--fs-base);font-weight:650;color:var(--text)}
  table.rowlist td.rl-primary a{color:var(--text)}
  table.rowlist td.rl-chip{order:3;margin-left:auto}
  table.rowlist td.rl-body{flex-basis:100%;max-width:none!important} /* !important: beats per-template inline max-width */
  table.rowlist td.rl-actions{order:6;flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;white-space:normal!important;text-align:left!important}
  table.rowlist td.rl-hide{display:none}
  table.rowlist td[colspan]{flex-basis:100%} /* empty-state rows */
  table.rowlist td[data-l]::before{content:attr(data-l);font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em}
  table.rowlist td:empty{display:none}

  /* ---- forms (M4): annotated form rows/grids stack one-column with
     full-width controls. Templates keep their desktop inline styles; these
     classes only bite below 720px. ---- */
  .formrow{flex-direction:column;align-items:stretch!important}
  .formrow>*{width:100%}
  .formrow input,.formrow select,.formrow textarea{max-width:none!important;width:100%}
  .formrow .btn,.formrow button{width:100%}
  .formgrid{grid-template-columns:1fr!important}
  .formsubmit{position:sticky;bottom:76px;z-index:5;display:flex;flex-direction:column;gap:8px;padding:10px 0 0;background:linear-gradient(to bottom,transparent,var(--bg) 35%)}
  .formsubmit .btn,.formsubmit button{width:100%;text-align:center}

  /* ---- home stat strip (M4): one snap-scroll row on phone ---- */
  .statstrip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--sp-4)) 16px;padding:0 var(--sp-4)}
  .statstrip::-webkit-scrollbar{display:none}
  .statstrip .stat{scroll-snap-align:start;flex:none;min-width:132px}

  /* filter chip rows scroll instead of wrapping into button soup */
  .filterchips{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--sp-4));margin-right:calc(-1 * var(--sp-4));padding:0 var(--sp-4) 4px}
  .filterchips::-webkit-scrollbar{display:none}
  .filterchips .btn,.filterchips button{border-radius:var(--radius-pill);white-space:nowrap;flex:none}
}

/* (component base rules live ABOVE the mobile layer — see the note there) */