/* ============================================================================
   APP  ·  field-manual app shell, mimicking the new Benchmark (BM-Blue).
   ONE stylesheet. Structure: top app bar + bottom thumb-nav (mobile) that
   becomes a left sidebar (desktop), wrapping a single-column "Field Office"
   screen. Built thumb-first: 52px taps, bottom sheets. Colors come from
   tokens.css (5 themes); this file is theme-agnostic.
   ============================================================================ */

/* ─── 1. RESET / BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { height:100%; }
body {
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  color:var(--ink); background-color:var(--paper);
  letter-spacing:.005em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* blueprint grid + paper light — BM-Blue atmosphere */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--paper-glow), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, var(--paper-floor), transparent 70%),
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: auto, auto, 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-attachment:fixed;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
/* fine paper grain (opacity varies per theme via --grain) */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:var(--grain);
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input, select, textarea { font:inherit; color:inherit; }
::selection { background:var(--blue); color:#fff; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:3px; }

/* ─── 2. APP FRAME ────────────────────────────────────────────────────────── */
.app {
  position:relative; z-index:1;
  max-width:var(--app-max); margin:0 auto; min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + var(--sab) + 8px);
  background:color-mix(in srgb, var(--field) 34%, transparent);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}
.screen { padding:14px var(--gut) 28px; }
.screen > * + * { margin-top:20px; }

/* ─── 3. APP BAR ──────────────────────────────────────────────────────────── */
.appbar {
  position:sticky; top:0; z-index:40;
  height:calc(var(--bar-h) + var(--sat)); padding:var(--sat) var(--gut) 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 92%, transparent));
  backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--edge);
}
.appbar::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--rule); }
.appbar .brand {
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:21px; letter-spacing:-.01em; line-height:1; color:var(--ink);
  display:flex; align-items:baseline; gap:1px;
}
.appbar .brand .dot { color:var(--ink-3); font-style:normal; font-weight:400; }
.appbar .brand sup {
  font-family:var(--f-mono); font-style:normal; font-weight:500; font-size:8px;
  letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; margin-left:6px;
}
.appbar-actions { display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:42px; height:42px; flex:0 0 auto; border-radius:var(--r-sm);
  border:1px solid var(--rule); background:var(--field);
  display:grid; place-items:center; color:var(--ink-2);
  transition:transform .08s, background .15s, color .15s, border-color .15s;
}
.icon-btn:active { transform:scale(.93); background:var(--paper-3); color:var(--ink); border-color:var(--ink-3); }
.icon-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn .swatch { width:16px; height:16px; border-radius:3px; border:1px solid var(--ink-4); }

/* ─── 4. TYPE HELPERS ─────────────────────────────────────────────────────── */
.eyebrow { font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); }
.h1 { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:30px; line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.h1 em { font-style:italic; color:var(--blue); }
.h2 { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:22px; line-height:1.12; letter-spacing:-.01em; color:var(--ink); }
.lede { color:var(--ink-3); font-size:14px; line-height:1.5; }
.muted { color:var(--ink-3); }
.mono { font-family:var(--f-mono); }

.section-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:11px; padding-bottom:7px; border-bottom:1px solid var(--rule);
}
.section-head .t {
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:8px;
}
.section-head .t .ct { color:var(--ink-3); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-pill); padding:0 7px; font-size:10px; }
.section-head .more { font-family:var(--f-body); font-size:11.5px; font-weight:500; color:var(--blue); letter-spacing:.02em; }

.stamp {
  display:inline-block; font-family:var(--f-stamp); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stamp); border:1.5px solid var(--stamp);
  border-radius:var(--r-xs); padding:2px 9px; transform:rotate(-1.5deg);
}

/* ─── 5. HERO ─────────────────────────────────────────────────────────────── */
.hero { padding:6px 2px 2px; }
.hero .eyebrow { display:block; margin-bottom:9px; }
.hero .h1 { margin-bottom:9px; }
.hero .date { font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }

/* ─── 6. CARD / SEARCH ────────────────────────────────────────────────────── */
.card { background:var(--field); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow); }
.card.pad { padding:16px; }

.search { position:relative; }
.search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink-3); pointer-events:none; stroke:currentColor; fill:none; stroke-width:1.9; }
.search input {
  width:100%; height:var(--tap); padding:0 14px 0 44px;
  background:var(--field); border:1px solid var(--rule); border-radius:var(--r);
  font-size:15px; box-shadow:var(--shadow);
}
.search input::placeholder { color:var(--ink-4); }
.search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }

/* ─── 6b. FORMS ───────────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; }
.field + .field { margin-top:14px; }
.field > label { font-family:var(--f-mono); font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; align-items:baseline; }
.field > label .unit { color:var(--ink-4); letter-spacing:.08em; }
.field input, .field select, .field textarea {
  width:100%; min-height:var(--tap);
  background:var(--field); border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:0 13px; font-size:16px; color:var(--ink); outline:none;
  transition:border-color .14s, box-shadow .14s;
}
.field textarea { padding:12px 13px; min-height:90px; line-height:1.5; resize:vertical; font-family:var(--f-body); }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.field input[type=number], .field input[inputmode=decimal] { font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.field select {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
.field-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.field-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
.field-2 > .field + .field, .field-3 > .field + .field { margin-top:0; }

/* money input: $ prefix */
.money { position:relative; }
.money::before { content:'$'; position:absolute; left:12px; top:0; bottom:0; display:flex; align-items:center; font-family:var(--f-mono); font-size:14px; color:var(--ink-4); pointer-events:none; }
.money input { padding-left:24px; }

/* one big hero input (the "≤3 inputs, goal 1" page pattern) */
.ask { max-width:520px; }
.ask > label { display:block; font-family:var(--f-display); font-style:italic; font-weight:400; font-size:21px; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin-bottom:14px; }
.ask .money.big::before { font-size:28px; left:14px; }
.ask .money.big input { min-height:74px; padding-left:38px; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:34px; font-weight:600; border-radius:var(--r); }
.ask .hint { font-size:13px; line-height:1.5; color:var(--ink-3); margin-top:12px; }
.readout { margin-top:18px; font-family:var(--f-mono); font-size:14px; color:var(--ink-2); }
.readout b { color:var(--blue); font-size:18px; }

/* ─── 6c. EDITABLE RATE ROWS (the "fill-out" sheet) ───────────────────────── */
.srows { display:flex; flex-direction:column; gap:9px; }
.srow {
  position:relative; padding:12px 13px; background:var(--field);
  border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.srow-top { display:flex; gap:9px; align-items:center; }
.srow-top .seq { width:30px; flex:0 0 auto; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--blue); }
.srow-name { flex:1; min-width:0; min-height:42px; background:var(--field); border:1px solid var(--rule); border-radius:var(--r-sm); padding:0 11px; font-size:15px; font-weight:600; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.srow-name:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.srow-del { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--ink-3); font-size:18px; line-height:1; transition:color .14s, border-color .14s, background .14s; }
.srow-del:hover { color:var(--red); border-color:var(--red); }
.srow-nums { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
.mini { display:flex; flex-direction:column; gap:4px; }
.mini label { font-family:var(--f-mono); font-size:8.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:baseline; gap:4px; }
.mini input, .mini select, .mini .out {
  width:100%; min-height:42px; padding:0 10px; font-size:15px;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  background:var(--field); border:1px solid var(--rule); border-radius:var(--r-sm);
  color:var(--ink); outline:none; display:flex; align-items:center;
  transition:border-color .14s, box-shadow .14s;
}
.mini select { -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; }
.mini input:focus, .mini select:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.mini .out { background:var(--paper); color:var(--blue); font-weight:600; border-style:dashed; }
.mini .out .pre { color:var(--ink-4); margin-right:1px; font-weight:400; }
@media (min-width:520px) { .srow-nums.n4 { grid-template-columns:repeat(4,1fr); } .srow-nums.n3 { grid-template-columns:repeat(3,1fr); } }

.add-row { width:100%; min-height:46px; margin-top:9px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--rule-strong, var(--rule)); border-radius:var(--r); background:transparent; color:var(--blue); font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:border-color .14s, background .14s; }

/* pay-scale step editor + per-title cascade */
.scale { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.stepf { display:inline-flex; align-items:center; gap:3px; background:var(--field); border:1px solid var(--rule); border-radius:var(--r-pill); padding:4px 6px 4px 10px; }
.stepf input { width:40px; min-height:30px; border:none; background:transparent; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:15px; text-align:right; outline:none; padding:0; }
.stepf .pct { font-family:var(--f-mono); color:var(--ink-3); font-size:13px; }
.stepf .x { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:var(--ink-4); font-size:14px; line-height:1; }
.stepf .x:hover { color:var(--red); }
.scale .add-step { min-height:34px; padding:0 12px; border:1px dashed var(--rule-strong, var(--rule)); border-radius:var(--r-pill); color:var(--blue); font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.06em; }
.cascade { margin-top:9px; display:flex; flex-wrap:wrap; gap:7px; }
.cascade .ct-step { font-family:var(--f-mono); font-size:11px; letter-spacing:.02em; color:var(--ink-2); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-pill); padding:2px 9px; }
.cascade .ct-step.top { color:var(--blue); border-color:var(--blue-3); }
.cascade .ct-step b { font-weight:600; }
.add-row:hover { border-color:var(--blue); background:var(--blue-wash); }

/* ─── 6d. PAGE TITLEBLOCK + ACTION BAR ────────────────────────────────────── */
.titleblock { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--edge); border-radius:var(--r); overflow:hidden; background:var(--field); box-shadow:var(--shadow); }
.titleblock .cell { padding:11px 13px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.titleblock .cell:nth-child(2n) { border-right:none; }
.titleblock .cell .k { font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.titleblock .cell .v { font-size:15px; font-weight:600; margin-top:3px; color:var(--ink); }
@media (min-width:560px) { .titleblock { grid-template-columns:repeat(4,1fr); } .titleblock .cell { border-bottom:none; } .titleblock .cell:nth-child(2n){border-right:1px solid var(--rule);} .titleblock .cell:last-child{border-right:none;} }

.actionbar { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.actionbar .save-tag { font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:auto; display:flex; align-items:center; gap:6px; }
.actionbar .save-tag.ok { color:var(--green); }
.btn { min-height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-sm); border:1px solid var(--rule); background:var(--field); color:var(--ink); font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transition:border-color .14s, background .14s, transform .08s; }
.btn:active { transform:translateY(1px); }
.btn:hover { border-color:var(--ink-3); }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover { background:var(--blue-2); }
.btn.danger:hover { border-color:var(--red); color:var(--red); }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ─── 6e. SEGMENTED TOGGLE (e.g. pricing basis) ───────────────────────────── */
.seg { display:flex; width:100%; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm); padding:3px; gap:3px; }
.seg button { flex:1; min-height:38px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); transition:background .14s, color .14s; }
.seg button .dot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.seg button.on { background:var(--blue); color:#fff; }
.seg button.on .dot { background:#fff; }

/* ─── 6f. PICKER SHEET (checklist) ────────────────────────────────────────── */
.pick-search { flex:none; position:relative; margin-bottom:12px; }
.pick-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3); stroke:currentColor; fill:none; stroke-width:1.9; }
.pick-search input { width:100%; min-height:44px; padding:0 12px 0 40px; background:var(--field); border:1px solid var(--rule); border-radius:var(--r-sm); font-size:16px; outline:none; }
.pick-search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.pick-group { font-family:var(--f-mono); font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:12px 2px 5px; border-bottom:1px solid var(--rule); margin-bottom:2px; }
.pick-row { display:flex; align-items:center; gap:12px; min-height:48px; padding:7px 4px; border-bottom:1px solid var(--rule-3); cursor:pointer; }
.pick-row .box { width:22px; height:22px; flex:0 0 auto; border:1.5px solid var(--rule); border-radius:4px; display:grid; place-items:center; color:transparent; transition:background .12s, border-color .12s; }
.pick-row .box svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pick-row.on .box { background:var(--blue); border-color:var(--blue); color:#fff; }
.pick-row .nm { flex:1; min-width:0; font-weight:500; }
.pick-row .u { font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.pick-row.added { opacity:.45; }
.pick-foot { flex:none; padding:11px 0 2px; margin-top:8px; background:var(--field); border-top:1px solid var(--rule); display:flex; gap:9px; }
.pick-foot .btn { flex:1; }

/* ─── 6f2. AUTH PAGES (login / signup — no app shell) ─────────────────────── */
.authbody { display:flex; min-height:100dvh; align-items:center; justify-content:center; padding:28px 18px calc(28px + var(--sab)); }
.authwrap { width:100%; max-width:410px; }
.authhead { text-align:center; margin-bottom:20px; }
.authhead .mark { width:48px; height:48px; margin:0 auto 12px; border:1.5px solid var(--blue); border-radius:var(--r); display:grid; place-items:center; font-family:var(--f-mono); font-weight:700; font-size:18px; color:var(--blue); position:relative; }
.authhead .mark::after { content:''; position:absolute; inset:4px; border:1px dashed color-mix(in srgb, var(--blue) 40%, transparent); border-radius:3px; }
.authhead h1 { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:28px; letter-spacing:-.02em; color:var(--ink); }
.authhead .tag { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; }
.authfoot { text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); margin-top:18px; }
.authfoot a { color:var(--blue); font-weight:600; }
.formsg { font-family:var(--f-mono); font-size:11.5px; padding:10px 12px; margin-bottom:14px; border-left:3px solid var(--red); background:var(--red-wash); color:var(--red); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.formsg.ok { border-left-color:var(--green); background:var(--green-wash); color:var(--green); }

/* ─── 6g. ESTIMATE BUILDER ────────────────────────────────────────────────── */
.estsec { background:var(--field); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow); padding:13px; display:flex; flex-direction:column; gap:12px; }
.estsec + .estsec { margin-top:14px; }
.sec-head { display:flex; gap:9px; align-items:center; }
.sec-title { flex:1; min-width:0; min-height:44px; background:var(--field); border:1px solid var(--rule); border-radius:var(--r-sm); padding:0 12px; font-family:var(--f-display); font-style:italic; font-size:18px; color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; }
.sec-title:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }
.sec-method { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sec-method .seg { flex:1; min-width:200px; }
.sec-note { font-family:var(--f-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.cat-sel { flex:0 0 auto; width:108px; min-height:38px; padding:0 22px 0 9px; font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm); -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.line-add { display:flex; gap:9px; flex-wrap:wrap; }
.line-add .btn { flex:1; min-width:130px; min-height:40px; }
.sec-foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:11px; border-top:1px dashed var(--rule-strong, var(--rule)); }
.sec-foot .meta { font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.sec-foot .amt { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:19px; font-weight:600; color:var(--blue); }

.mini .out.sell { color:var(--blue); font-weight:600; border-style:dashed; }

/* grand total */
.grand { background:var(--field); border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.grand .row-g { display:flex; align-items:baseline; justify-content:space-between; padding:11px 15px; border-bottom:1px solid var(--rule-3); }
.grand .row-g:last-child { border-bottom:none; }
.grand .row-g .k { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.grand .row-g .v { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.grand .row-g.total { background:var(--paper-2); }
.grand .row-g.total .k { color:var(--ink); letter-spacing:.14em; }
.grand .row-g.total .v { font-size:24px; color:var(--blue); }

/* ─── 7. QUICK-ACTION TILES ───────────────────────────────────────────────── */
.qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.qa {
  position:relative; overflow:hidden; min-height:96px; padding:14px;
  background:var(--field); border:1px solid var(--rule); border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow);
  transition:transform .09s, border-color .15s, background .15s;
}
.qa:active { transform:scale(.975); background:var(--field-2); border-color:var(--ink-3); }
.qa .ico { width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--paper); border:1px solid var(--rule); color:var(--blue); }
.qa .ico svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.qa .lbl { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:18px; letter-spacing:-.01em; color:var(--ink); }
.qa .sub { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; margin-top:2px; }
.qa.is-primary { background:var(--blue); border-color:var(--blue); }
.qa.is-primary .ico { background:var(--blue-2); border-color:var(--blue-3); color:#fff; }
.qa.is-primary .lbl { color:#fff; }
.qa.is-primary .sub { color:var(--blue-wash); }

/* ─── 8. LIST ROWS ────────────────────────────────────────────────────────── */
.list { display:flex; flex-direction:column; background:var(--field); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.row {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; min-height:var(--tap); border-bottom:1px solid var(--rule-3); transition:background .12s;
}
.row:last-child { border-bottom:none; }
.row:active { background:var(--field-2); }
.row .lead { width:36px; height:36px; flex:0 0 auto; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--paper); border:1px solid var(--rule); font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--blue); }
.row .lead.ghost { background:transparent; color:var(--ink-3); }
.row .main { min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.row .main .name { display:block; font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .main .sub { display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-3); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.row .trail { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; }
.row .trail .v { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:14px; color:var(--ink); }
.row .trail .v.amt { color:var(--blue); }
.row .trail .chev { color:var(--ink-4); }
.row .trail .chev svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* star toggle on a row */
.row .star { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; color:var(--ink-4); font-size:17px; border-radius:var(--r-sm); }
.row .star.on { color:var(--amber); }

/* row with a trailing delete button (list-manage) */
.row.has-del { grid-template-columns:auto 1fr auto auto; }
.row.tappable { cursor:pointer; }
.row-del { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--rule); background:var(--field-2); color:var(--ink-3); border-radius:var(--r-sm); cursor:pointer; transition:color .12s, border-color .12s, background .12s; }
.row-del:hover, .row-del:active { color:var(--red); border-color:var(--red); background:var(--red-wash); }
.row-del svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ─── 9. STAT TILES ───────────────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.stat { background:var(--field); padding:14px 15px; }
.stat .v { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.stat .v.blue { color:var(--blue); }
.stat .v.good { color:var(--green); }
.stat .v.amber { color:var(--amber); }
.stat .l { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; }

/* ─── 9b. BACK BAR (in-page navigation) ───────────────────────────────────── */
.backbar { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.backbar .icon-btn { width:40px; height:40px; }
.backbar .crumb { font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ─── 9c. FOLD (collapsible form section) ─────────────────────────────────── */
.fold { border:1px solid var(--rule); border-radius:var(--r); background:var(--field); box-shadow:var(--shadow); overflow:hidden; }
.fold + .fold { margin-top:11px; }
.fold > summary { list-style:none; cursor:pointer; padding:13px 14px; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary .fchev { color:var(--ink-4); transition:transform .15s var(--ease); flex:0 0 auto; }
.fold > summary .fchev svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fold[open] > summary .fchev { transform:rotate(90deg); }
.fold > summary .ftag { margin-left:auto; font-size:9.5px; letter-spacing:.06em; }
.fold-body { padding:2px 14px 15px; }

/* ─── 10. PILLS ───────────────────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill); background:var(--paper); color:var(--ink-2); border:1px solid var(--rule); }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ink-4); }
.pill.is-good { border-color:var(--green); color:var(--green); background:var(--green-wash); }
.pill.is-good::before { background:var(--green); }
.pill.is-warn { border-color:var(--amber); color:var(--amber); background:var(--amber-wash); }
.pill.is-warn::before { background:var(--amber); }
.pill.is-muted { color:var(--ink-3); }

/* ─── 11. EMPTY ───────────────────────────────────────────────────────────── */
.empty { padding:30px 20px; text-align:center; color:var(--ink-3); }
.empty .big { font-size:28px; margin-bottom:8px; opacity:.7; }
.empty p { font-size:13px; line-height:1.5; max-width:320px; margin:0 auto; font-style:italic; }
.empty p + p { margin-top:6px; }

/* ─── 12. BOTTOM NAV (thumb spine) ────────────────────────────────────────── */
.bottomnav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:var(--app-max); margin:0 auto; height:calc(var(--nav-h) + var(--sab)); padding-bottom:var(--sab);
  display:flex;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 94%, transparent), var(--paper));
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--edge);
}
.bottomnav a { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--ink-3); transition:color .15s; }
.bottomnav a .ic { width:23px; height:23px; }
.bottomnav a .ic svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bottomnav a span { font-family:var(--f-mono); font-size:9px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.bottomnav a:active { color:var(--ink-2); }
.bottomnav a.on { color:var(--blue); }
.bottomnav a.on::before { content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:32px; height:2px; background:var(--blue); }

/* ─── 13. BOTTOM SHEET (theme picker + More) ──────────────────────────────── */
.sheet-scrim { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.sheet-scrim.open { opacity:1; pointer-events:auto; }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:61; max-width:var(--app-max); margin:0 auto;
  background:var(--field); border-top:1px solid var(--edge); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px var(--gut) calc(16px + var(--sab));
  transform:translateY(102%); transition:transform .26s var(--ease); box-shadow:0 -10px 40px rgba(0,0,0,.25);
  /* flex column: header + footer pinned, body scrolls. Never let a long modal
     run off-screen — this is the rule for every sheet in the app. */
  display:flex; flex-direction:column; max-height:min(84dvh, 820px); overflow:hidden;
}
.sheet.open { transform:translateY(0); }
.sheet-grab { flex:none; width:40px; height:4px; border-radius:99px; background:var(--rule); margin:4px auto 14px; }
.sheet-title { flex:none; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
/* the one scroll region — min-height:0 is what lets a flex child actually scroll */
.sheet-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* More: grid of nav tiles */
.grid-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.grid-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:78px; padding:10px; background:var(--field); border:1px solid var(--rule); border-radius:var(--r); color:var(--ink-2); transition:border-color .12s, background .12s; }
.grid-nav a:active { background:var(--field-2); border-color:var(--ink-3); }
.grid-nav .ico svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.grid-nav span { font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-2); text-align:center; text-transform:uppercase; }

/* account block in More sheet */
.acct { flex:none; display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:13px; border-top:1px solid var(--rule); }
.acct-who { flex:1; min-width:0; }
.acct-who .nm { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-who .co { font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.acct .btn { flex:0 0 auto; }

/* theme options */
.theme-list { display:grid; gap:8px; }
.theme-opt { display:flex; align-items:center; gap:14px; min-height:var(--tap); padding:0 12px; border:1px solid var(--rule); border-radius:var(--r); background:var(--field); text-align:left; width:100%; transition:border-color .12s, background .12s; }
.theme-opt:active { background:var(--field-2); }
.theme-opt[aria-checked="true"] { border-color:var(--blue); background:var(--blue-wash); }
.theme-opt .chip { width:34px; height:34px; border-radius:var(--r-sm); flex:none; border:1px solid rgba(0,0,0,.18); position:relative; overflow:hidden; }
.theme-opt .chip i { position:absolute; right:0; top:0; bottom:0; width:42%; }
.theme-opt .lbl { font-weight:600; text-transform:capitalize; }
.theme-opt .lbl small { display:block; font-weight:400; font-size:11px; color:var(--ink-3); text-transform:none; font-family:var(--f-mono); letter-spacing:.02em; }
.theme-opt .tick { margin-left:auto; color:var(--blue); opacity:0; }
.theme-opt .tick svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.theme-opt[aria-checked="true"] .tick { opacity:1; }

/* ─── 13b. SETUP WIZARD (mandatory, blocking) ─────────────────────────────── */
.wiz-scrim {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:16px calc(16px + env(safe-area-inset-right,0px)) calc(16px + var(--sab)) calc(16px + env(safe-area-inset-left,0px));
}
body.wiz-open { overflow:hidden; }
.wiz {
  width:100%; max-width:480px; max-height:94dvh;
  background:var(--field); border:1px solid var(--edge); border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden;
}
.wiz-head { flex:none; padding:16px 20px 13px; border-bottom:1px solid var(--rule); }
.wiz-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.wiz-step { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.wiz-logout { font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--ink-3); text-decoration:underline; }
.wiz-dots { display:flex; gap:5px; }
.wiz-dot { height:4px; flex:1; border-radius:2px; background:var(--rule); transition:background .2s var(--ease); }
.wiz-dot.on { background:var(--blue); }
.wiz-title { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:22px; letter-spacing:-.01em; color:var(--ink); margin-top:12px; }
.wiz-intro { font-size:13px; line-height:1.5; color:var(--ink-3); margin-top:6px; }
.wiz-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:16px 20px; }
.wiz-foot { flex:none; display:flex; gap:10px; padding:13px 20px calc(14px + var(--sab)); border-top:1px solid var(--rule); }
.wiz-foot .btn { flex:1; min-height:48px; }
.wiz-foot .btn.back { flex:0 0 auto; padding:0 18px; }
.wiz-err { font-family:var(--f-mono); font-size:11.5px; color:var(--red); background:var(--red-wash); border-left:3px solid var(--red); padding:9px 11px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:14px; }

/* ─── 14. ENTRANCE MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference) {
  /* resting state is VISIBLE; the keyframe provides the entrance. Never start
     at opacity:0 as a base — content revealed later from a display:none view
     (e.g. an in-page view swap) would otherwise stay stuck invisible. */
  .rise { animation:rise .5s var(--ease) both; }
  .rise:nth-child(1){animation-delay:.02s}.rise:nth-child(2){animation-delay:.07s}
  .rise:nth-child(3){animation-delay:.12s}.rise:nth-child(4){animation-delay:.17s}
  .rise:nth-child(5){animation-delay:.22s}.rise:nth-child(6){animation-delay:.27s}
}
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.hide { display:none !important; }

/* ============================================================================
   15. RESPONSIVE — one layout, three tiers (BM-Blue's system)
   ============================================================================ */

/* TABLET & UP (≥768) — widen grids, catalogs become card grids */
@media (min-width:768px) {
  .qa-grid { grid-template-columns:repeat(4,1fr); }
  .stat-grid { grid-template-columns:repeat(4,1fr); }
  .list.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; background:none; border:none; border-radius:0; overflow:visible; box-shadow:none; }
  .list.cards .row { border:1px solid var(--rule); border-radius:var(--r-lg); background:var(--field); box-shadow:var(--shadow); min-height:66px; transition:transform .12s, box-shadow .12s, border-color .12s; }
  .list.cards .row .trail .chev { display:none; }
}

/* TABLET ONLY (768–1023) — wider phone column, keep bottom bar */
@media (min-width:768px) and (max-width:1023px) {
  :root { --app-max:720px; }
  .screen { padding:18px 24px 34px; }
}

/* DESKTOP (≥1024) — bottom bar → left sidebar, full-width frame */
@media (min-width:1024px) {
  .bottomnav {
    top:0; bottom:0; left:0; right:auto; width:var(--sidebar-w); height:100dvh; max-width:none; margin:0;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:2px; padding:16px 12px;
    border-top:none; border-right:1px solid var(--edge);
    background:linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper) 92%, transparent));
  }
  .bottomnav .nav-brand { display:flex; align-items:baseline; gap:1px; padding:6px 13px 16px; font-family:var(--f-display); font-style:italic; font-weight:500; font-size:20px; color:var(--ink); }
  .bottomnav .nav-brand .dot { color:var(--ink-3); }
  .bottomnav a { flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:13px; padding:11px 15px; border-radius:var(--r); }
  .bottomnav a .ic, .bottomnav a .ic svg { width:21px; height:21px; }
  .bottomnav a span { font-size:11px; letter-spacing:.08em; }
  .bottomnav a.on { background:var(--field-2); }
  .bottomnav a.on::before { top:50%; left:0; transform:translateY(-50%); width:3px; height:22px; }

  .app { max-width:none; margin:0 0 0 var(--sidebar-w); border:none; padding-bottom:36px; background:none; }
  .appbar { padding-left:32px; padding-right:32px; }
  .screen { max-width:1100px; margin:0 auto; padding:24px 32px 48px; }
  .screen > * + * { margin-top:24px; }

  .field, .field-2, .field-3 { max-width:640px; }
  .list.cards { grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }

  /* desktop sheets float as a popover near the appbar instead of a bottom sheet */
  .sheet { left:auto; right:32px; bottom:auto; top:calc(var(--bar-h) + 10px); width:360px; margin:0; border:1px solid var(--edge); border-radius:var(--r-lg); transform:translateY(-8px) scale(.98); opacity:0; pointer-events:none; max-height:min(78vh, 720px); }
  .sheet.open { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .sheet-grab { display:none; }
  .sheet-scrim { background:transparent; backdrop-filter:none; }

  /* hover affordances */
  .row { cursor:pointer; }
  .list .row:hover { background:var(--field-2); }
  .list.cards .row:hover { border-color:var(--blue); transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(19,66,122,.3); background:var(--field); }
  .qa { transition:transform .12s, box-shadow .12s, border-color .12s, background .12s; }
  .qa:hover { border-color:var(--blue); box-shadow:0 6px 18px -8px rgba(19,66,122,.22); transform:translateY(-1px); }
  .qa.is-primary:hover { box-shadow:0 8px 22px -8px rgba(19,66,122,.5); }
  .grid-nav a:hover { border-color:var(--blue); }
  .icon-btn:hover { border-color:var(--ink-3); }
}

@media (prefers-reduced-motion:reduce) {
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ─── 16. PRINT — the rate card as a clean field document ─────────────────── */
@media print {
  :root { --grain:0; }
  body { background:#fff !important; color:#000; }
  body::before { display:none; }
  .rise { opacity:1 !important; animation:none !important; transform:none !important; }
  .appbar, .bottomnav, .sheet, .sheet-scrim, .no-print { display:none !important; }
  .app { margin:0 !important; max-width:none !important; border:none !important; background:none !important; padding:0 !important; }
  .screen { max-width:none !important; margin:0 !important; padding:0 !important; }
  .screen > * + * { margin-top:14px !important; }
  .srow, .card, .titleblock, .list { box-shadow:none !important; break-inside:avoid; }
  .srow-del, .add-row { display:none !important; }
  .srow-name, .mini input, .field input, .field select { border-color:#bbb !important; }
  .print-only { display:block !important; }
}
.print-only { display:none; }