/* =====================================================================
   Staker Collins — Acquisition OS  ·  Redesign
   Built on the existing token system. One design system, no new fonts.
   ===================================================================== */

:root {
  /* --- ink + canvas (V5 names are now the SOURCE of truth; see alias flip
         below) — defaults equal the v6 light palette (the default theme) --- */
  --ink: #17141f;
  --ink2: #4b4754;
  --mut: #837e8d;
  --mut2: #b5b1bd;
  --hair: rgba(23, 20, 31, .08);
  --hair2: rgba(23, 20, 31, .055);
  --paper: #f3f3f8;
  --card: #ffffff;
  --soft: #f6f5f2;
  --soft-2: #eceae6;

  /* --- status (V5 names are the source) --- */
  --ok: #0e7a4e;
  --ok-soft: #e0f4ea;
  --warn: #cf5409;
  --warn-soft: #ffeedd;
  --bad: #d23730;
  --bad-soft: #fdeae7;
  --info: #2563c4;
  --info-soft: #e9f0fb;

  /* radius scale (V5): 10 inputs / 18 panels / 22 modals / 999 pills */
  --r-input: 10px;
  --r-panel: 18px;
  --r-modal: 22px;
  --r-pill: 999px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 16px;

  /* --- shadows (V5 lift is the source) --- */
  --shadow-sm: 0 1px 2px rgba(25, 20, 45, .05), 0 10px 30px -14px rgba(25, 20, 45, .16);
  --lift: 0 1px 2px rgba(25, 20, 45, .05), 0 10px 30px -14px rgba(25, 20, 45, .16);
  --lift-lg: 0 2px 6px rgba(25, 20, 45, .07), 0 28px 60px -20px rgba(25, 20, 45, .3);

  --side-w: 264px;
  --ease: cubic-bezier(.23, .7, .25, 1);

  /* --- rail (V5 dark-violet sidebar; expanded token set for light-rail themes) --- */
  --rail-bg: #18142a;
  --rail-ink: rgba(255, 255, 255, .92);
  --rail-hi: #ffffff;
  --rail-icon: rgba(255, 255, 255, .6);
  --rail-dim: rgba(255, 255, 255, .5);
  --rail-line: rgba(255, 255, 255, .10);
  --rail-hover: rgba(255, 255, 255, .08);
  --rail-active: rgba(129, 116, 244, .30);
  --rail-on: #bcb2fb;

  /* --- type (V5: Instrument Sans UI + JetBrains Mono data labels) --- */
  --f-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- accent (default theme: v6 / violet → V5 brand is the source) --- */
  --brand: #6e5ef2;
  --brand-deep: #5b4ce0;
  --brand-ink: #5a4ad6;
  --brand-soft: #ecebfd;
  --brand-ring: rgba(110, 94, 242, .20);

  /* --- ALIAS FLIP: the rest of app.css reads canonical token names; route
         them onto the V5 names so per-theme [data-accent] palette blocks
         (which override the V5 names) cascade into the whole app. --- */
  --bg: var(--paper);
  --panel: var(--card);
  --ink-2: var(--ink2);
  --muted: var(--mut);
  --muted-2: var(--mut2);
  --line: var(--hair);
  --line-2: var(--hair2);
  --primary: var(--brand);
  --primary-2: var(--brand-deep);
  --primary-ink: var(--brand-ink);
  --primary-soft: var(--brand-soft);
  --primary-ring: var(--brand-ring);
  --green: var(--ok);     --green-soft: var(--ok-soft);
  --amber: var(--warn);   --amber-soft: var(--warn-soft);
  --red: var(--bad);      --red-soft: var(--bad-soft);
  --blue: var(--info);    --blue-soft: var(--info-soft);
  --shadow: var(--lift);
  --shadow-lg: var(--lift-lg);
  --accent: var(--brand);
}

/* ---------- DARK MODE (V5 names are the source; canonical names alias them,
       matching the :root flip so per-theme dark [data-accent] blocks cascade) --- */
:root[data-theme="dark"] {
  --ink: #f1eff6;
  --ink2: #c8c4d2;
  --mut: #918c9e;
  --mut2: #5d5969;
  --hair: rgba(255, 255, 255, .1);
  --hair2: rgba(255, 255, 255, .065);
  --paper: #15131c;
  --card: #1f1c29;
  --soft: rgba(255, 255, 255, .06);
  --soft-2: rgba(255, 255, 255, .11);

  --ok: #4cc591; --ok-soft: rgba(76, 197, 145, .14);
  --warn: #f59d59; --warn-soft: rgba(245, 157, 89, .14);
  --bad: #f0796f;  --bad-soft: rgba(240, 121, 111, .14);
  --info: #82aef0; --info-soft: rgba(130, 174, 240, .13);

  /* default dark accent = v6 (violet), matching today's dark default */
  --brand: #8e81f5;
  --brand-deep: #998ef6;
  --brand-ink: #b0a7f8;
  --brand-soft: rgba(142, 129, 245, .18);
  --brand-ring: rgba(142, 129, 245, .35);

  --rail-bg: #100d1c;
  --rail-ink: #9b94b3;
  --rail-hi: #f1eff6;
  --rail-icon: rgba(255, 255, 255, .55);
  --rail-dim: rgba(255, 255, 255, .45);
  --rail-line: rgba(255, 255, 255, .08);
  --rail-hover: rgba(255, 255, 255, .06);
  --rail-active: rgba(142, 129, 245, .22);
  --rail-on: #a298f7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --lift: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -14px rgba(0, 0, 0, .55);
  --lift-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 30px 70px -18px rgba(0, 0, 0, .7);
  --toast-bg: #2a2440;

  /* alias flip (dark) — keep canonical names reading the V5 names */
  --bg: var(--paper);
  --panel: var(--card);
  --ink-2: var(--ink2);
  --muted: var(--mut);
  --muted-2: var(--mut2);
  --line: var(--hair);
  --line-2: var(--hair2);
  --primary: var(--brand);
  --primary-2: var(--brand-deep);
  --primary-ink: var(--brand-ink);
  --primary-soft: var(--brand-soft);
  --primary-ring: var(--brand-ring);
  --green: var(--ok);     --green-soft: var(--ok-soft);
  --amber: var(--warn);   --amber-soft: var(--warn-soft);
  --red: var(--bad);      --red-soft: var(--bad-soft);
  --blue: var(--info);    --blue-soft: var(--info-soft);
  --shadow: var(--lift);
  --shadow-lg: var(--lift-lg);
  --accent: var(--brand);
}
:root { --toast-bg: #1d1929; }

:root[data-density="compact"] {
  --pad: 14px;
  --gap: 12px;
}
:root { --pad: 18px; --gap: 16px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--primary-ring); }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ============================ App shell ============================ */
/* Canonical rail layout: the rail is position:fixed and overlays on hover, so the
   app is a plain block and the main column reserves only the collapsed rail width.
   (Rail component styles live in the "Rail v5" block at the end of this file.) */
.app { min-height: 100vh; }

/* ---- Sidebar ---- */
.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 12px;
  overflow-y: auto;
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.brand img { height: 26px; width: auto; }
.brand .bmark {
  width: 34px; height: 34px; border-radius: 0; flex: none;
  background: transparent;
  display: grid; place-items: center; color: var(--primary);
}
.brand .bmark svg { width: 34px; height: 34px; fill: currentColor; display: block; }
.brand .bname { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.brand .bsub { font-size: 11px; color: var(--muted); font-weight: 500; }

.wswitch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  background: var(--soft); border-radius: var(--r-input); padding: 4px; margin-bottom: 14px;
}
.wswitch button {
  border: 0; background: transparent; border-radius: 9px; padding: 8px 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .18s var(--ease);
}
.wswitch button .ic { width: 17px; height: 17px; }
.wswitch button[aria-selected="true"] {
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm);
}

.side-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 14px; padding: 11px 14px;
  border: 0; border-radius: var(--r-input); color: #fff; font-weight: 600; font-size: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: 0 8px 18px var(--primary-ring); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.side-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px var(--primary-ring); }
.side-cta .ic { width: 18px; height: 18px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2); padding: 14px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: 0; background: transparent; border-radius: 10px; padding: 9px 12px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: left;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item .ic { width: 19px; height: 19px; color: var(--muted); transition: color .14s; }
.nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-count {
  font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--soft);
  border-radius: var(--r-pill); padding: 1px 8px; min-width: 22px; text-align: center;
}
.nav-item:hover { background: var(--soft); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.nav-item.active .ic { color: var(--primary); }
.nav-item.active .nav-count { background: color-mix(in srgb, var(--primary) 14%, #fff); color: var(--primary-ink); }

.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.goal-card { background: var(--soft); border-radius: var(--r-input); padding: 12px 14px; }
.goal-card .tiny { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.goal-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.goal-row strong { font-size: 20px; font-weight: 700; }
.goal-row span { font-size: 12.5px; color: var(--muted); }
.progress { height: 7px; border-radius: var(--r-pill); background: var(--soft-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.avatar { width: 34px; height: 34px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: #14141a; }
.side-user .nm { font-size: 13.5px; font-weight: 600; }
.side-user .rl { font-size: 11.5px; color: var(--muted); }

/* ============================ Main / topbar ============================ */
.main { display: flex; flex-direction: column; min-width: 0; margin-left: var(--rail-w); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .hamb { display: none; }
.topbar .crumb { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.topbar .crumb b { color: var(--ink-2); font-weight: 600; }
.topbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.topbar .head-txt { flex: 1; min-width: 0; }
.topbar .head-txt p { font-size: 12.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.search {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-input);
  color: var(--muted); min-width: 220px; transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.search-wrap { position: relative; }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, 78vw); max-height: 64vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-lg); z-index: 50; padding: 6px; }
.search-results .sr-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); padding: 10px 10px 5px; }
.search-results .sr-item { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; border-radius: 10px; padding: 9px 10px; text-align: left; cursor: pointer; }
.search-results .sr-item:hover { background: var(--soft); }
.search-results .sr-item .sr-thumb { width: 38px; height: 30px; border-radius: 7px; object-fit: cover; flex: none; background: var(--soft-2); }
.search-results .sr-item .sr-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.search-results .sr-item .sr-t { font-size: 13.5px; font-weight: 600; }
.search-results .sr-item .sr-s { font-size: 12px; color: var(--muted); }
.search-results .sr-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.search .ic { width: 17px; height: 17px; }
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); }

.seg { display: inline-flex; background: var(--soft); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: var(--r-pill); padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); transition: all .15s; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: var(--r-input); padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-sm); transition: all .15s var(--ease); white-space: nowrap; }
.btn .ic { width: 17px; height: 17px; }
.btn:hover { border-color: var(--muted-2); background: var(--soft); }
.btn.primary { border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: 0 6px 16px var(--primary-ring); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--primary-ring); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--soft); color: var(--ink); }
.btn.danger { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
.btn.icon { padding: 9px; width: 38px; }
.btn.block { width: 100%; }

/* ---- view canvas ---- */
.view { display: none; padding: clamp(16px, 2.6vw, 28px); opacity: 1; }
.view.active { display: block; }
.wrap { max-width: none; margin: 0; }

/* ---- panels & cards ---- */
.panel { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.panel-pad { padding: var(--pad); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: var(--pad); border-bottom: 1px solid var(--line-2); }
.panel-head.nb { border-bottom: 0; }
.panel-head h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.panel-head .ph-actions { display: flex; align-items: center; gap: 8px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.section-title h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.section-title .sub { font-size: 12.5px; color: var(--muted); }

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ---- KPI tiles ---- */
.kpis { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.kpi { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel); padding: 16px 17px; box-shadow: var(--shadow); }
.kpi .k-top { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.kpi .k-top .ic { width: 16px; height: 16px; }
.kpi .k-label { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kpi .k-val { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 9px; line-height: 1.05; }
.kpi .k-val.sm { font-size: 21px; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.kpi .k-bar { height: 6px; border-radius: var(--r-pill); background: var(--soft-2); margin-top: 11px; overflow: hidden; }
.kpi .k-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.trend { font-weight: 600; font-size: 11.5px; padding: 1px 7px; border-radius: var(--r-pill); }
.trend.up { color: var(--green); background: var(--green-soft); }
.trend.down { color: var(--red); background: var(--red-soft); }

/* ---- pills ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--soft); color: var(--ink-2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.green { color: var(--green); background: var(--green-soft); }
.pill.amber { color: var(--amber); background: var(--amber-soft); }
.pill.red { color: var(--red); background: var(--red-soft); }
.pill.blue { color: var(--blue); background: var(--blue-soft); }
.pill.violet { color: var(--primary-ink); background: var(--primary-soft); }
.exp-vendor { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-vendor .pill { font-size: 10.5px; padding: 2px 8px; }
.expense-table .exp-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Expense capture v3 — type tap-targets (large, in the log sheet) */
.ex-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ex-type { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: var(--r-input); padding: 12px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  text-align: center; transition: border-color .12s, background .12s, color .12s; }
.ex-type:hover { border-color: var(--muted-2); }
.ex-type.on { border-color: transparent; background: var(--primary-soft); color: var(--primary-ink); }
@media (max-width: 560px) { .ex-types { grid-template-columns: repeat(2, 1fr); } }

/* Expense list — search/sort/view toolbar + desktop grouped sections + mobile single-row */
.ex-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px var(--pad) 2px; flex-wrap: wrap; }
.ex-search { flex: 1 1 220px; min-width: 160px; max-width: 340px; display: flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-input); transition: border-color .14s, box-shadow .14s; }
.ex-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ex-search .ic { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.ex-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); outline: none; min-width: 0; }
.ex-search input::placeholder { color: var(--muted-2); }
.ex-sort { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: var(--r-input);
  min-height: 34px; padding: 0 8px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ex-views { align-items: center; }
/* Panel-head actions (Check duplicates / Sync to QuickBooks / Log expense) */
.ex-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ex-results { display: flex; align-items: center; gap: 10px; padding: 8px var(--pad) 0; font-size: 12.5px; color: var(--muted); }
.ex-results b { color: var(--ink); }
.ex-group { border-top: 1px solid var(--line-2); }
.ex-group:first-child { border-top: 0; }
.ex-group-head { display: flex; align-items: center; gap: 10px; padding: 11px var(--pad) 6px; }
.ex-group-head b { font-size: 13.5px; }
.ex-group-head .ex-group-sub { margin-left: auto; font-weight: 700; }
.ex-group .data-table td { padding-top: 8px; padding-bottom: 8px; }
/* Mobile compact rows (hidden on desktop; the table is hidden on mobile) */
.ex-mlist { display: none; flex-direction: column; }
.ex-mrow { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line-2);
  background: transparent; padding: 11px var(--pad); cursor: pointer; }
.ex-mrow:first-child { border-top: 0; }
.ex-cell-receipt { display: inline-flex; align-items: center; gap: 8px; }
.ex-cell-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); background: var(--soft-2); }
.ex-mrow:active { background: var(--soft); }
.ex-mrow-line { display: flex; align-items: center; gap: 8px; }
.ex-mrow-amt { font-weight: 750; color: var(--red); font-variant-numeric: tabular-nums; flex: none; }
.ex-mrow-payee { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-mrow-line .pill { flex: none; font-size: 10.5px; padding: 2px 8px; }
.ex-mrow-date { margin-left: auto; flex: none; font-size: 12px; }
.ex-mrow-desc { font-size: 12.5px; margin-top: 3px; }
/* Breakdown view — spend-share bars by type / vendor / month */
.ex-bd { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; padding: 12px var(--pad) 16px; }
.ex-bd-col h4 { font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.ex-bd-row { padding: 5px 0; }
.ex-bd-top { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.ex-bd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ex-bd-top .muted { flex: none; font-size: 11.5px; }
.ex-bd-amt { margin-left: auto; flex: none; font-weight: 700; }
.ex-bd-bar { height: 5px; border-radius: var(--r-pill); background: var(--soft-2); overflow: hidden; margin-top: 4px; }
.ex-bd-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ex-bd-more { font-size: 12px; padding-top: 4px; }
@media (max-width: 640px) {
  .ex-mlist { display: flex; }
  .ex-desktop { display: none; }
  /* Header actions: a tidy 2-up grid of the QuickBooks buttons with the primary
     Log expense full-width beneath — instead of right-aligned ragged wrapping. */
  .ex-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ex-actions .btn { justify-content: center; }
  .ex-actions .btn.primary { grid-column: 1 / -1; }
  /* Toolbar: search on its own line; sort + view chips share the next one. */
  .ex-toolbar { row-gap: 8px; }
  .ex-search { flex: 1 1 100%; max-width: none; }
  .ex-search input { font-size: 16px; } /* ≥16px so iOS Safari doesn't zoom the viewport on focus */
  .ex-sort { flex: none; font-size: 16px; }
  /* View chips: one horizontally-scrollable row (they work on mobile too — the
     compact list renders grouped sections and the breakdown). The .ex-toolbar
     prefix out-specifies the late .chip-row { display:flex; flex-wrap:wrap }. */
  .ex-toolbar .ex-views { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ex-toolbar .ex-views::-webkit-scrollbar { display: none; }
  .ex-toolbar .ex-views .chip { flex: none; }
  .ex-toolbar .ex-views > span { display: none; } /* drop the "View" label to save width */
}
/* Member paid-by drill-down sheet: header stats + condensed item list (reuses .ex-mrow) */
.mx-head { display: flex; gap: 22px; flex-wrap: wrap; padding: 2px 0 12px; }
.mx-stat b { display: block; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mx-stat span { font-size: 12px; color: var(--muted); }
.mx-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; }
.mx-list .ex-mrow { padding-left: 13px; padding-right: 13px; }
/* clickable member-loan rows: pointer + a muted trailing chevron */
.rows button.row { cursor: pointer; }
.rows button.row > .ic { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
/* Mobile ergonomics: sheet form controls render at 16px so iOS Safari doesn't
   zoom the viewport on focus (the amount box keeps its larger size — it's nested
   in .amt-box, not a direct .field child). */
@media (max-width: 560px) {
  .sheet-body .field > input, .sheet-body .field > select, .sheet-body .field > textarea { font-size: 16px; }
}

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field > span small { font-weight: 500; color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-input);
  padding: 10px 12px; font-size: 14px; outline: 0; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 76px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---- receipt popup v2: amount box, upload dropzone, status ---- */
.amt-box { display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-input);
  padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
.amt-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.amt-box > b { font-size: 22px; font-weight: 600; color: var(--muted); }
.amt-box input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: 0;
  font-size: 22px; font-weight: 650; color: var(--ink); }
.amt-box input:focus { border: 0; box-shadow: none; }
.upbox { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  border: 1.5px dashed var(--line); border-radius: var(--r-input); padding: 20px 16px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; }
.upbox:hover { border-color: var(--primary); color: var(--primary-ink); }
.upbox b { font-size: 14px; color: var(--ink); }
.upbox > span:last-child { font-size: 12px; }
.up-ico { display: inline-flex; }
.up-ico .ic { width: 22px; height: 22px; }
.updone { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: var(--r-input); padding: 10px 12px; }
/* Receipt thumbnail in the done-card. Descendant (not direct-child) selector so
   it also sizes the image when it's wrapped in the "Open" button (edit form),
   not just the bare <img> in the expense list — otherwise the wrapped image
   renders full-size and overlaps the Open / "Stored in Drive" controls. */
.updone img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.updone > .up-ico .ic { width: 28px; height: 28px; color: var(--muted); }
.updone-t { display: flex; flex-direction: column; min-width: 0; }
.updone-t b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.updone-t span { font-size: 11.5px; }
.up-note { font-size: 12px; color: var(--muted); margin-top: -2px; }
.up-note.warn { color: var(--amber); }

/* ── Command Center (P0 cockpit) ─────────────────────────────────────────── */
.cc { display: flex; flex-direction: column; gap: 16px; }
.cc-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-hi { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin: 0; }
.cc-aisoon { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--primary-ink, var(--primary)); background: var(--primary-soft); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.cc-aisoon .ic { width: 14px; height: 14px; }
.cc-brief { margin: 0; padding: 14px 16px; }
.cc-brief-bar { display: flex; align-items: center; gap: 12px; }
.cc-brief-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary-ink, var(--primary)); }
.cc-brief-ic .ic { width: 18px; height: 18px; }
.cc-brief-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-brief-main b { font-size: 14.5px; font-weight: 700; }
.cc-brief-main .muted { font-size: 12.5px; }
.cc-brief-bar > .btn { flex: none; }
.cc-brief-pris { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.cc-brief-pris .cc-row { align-items: flex-start; }
.cc-brief-pris .pill { flex: none; align-self: center; }
.cc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cc-kpis-sm { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cc-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-card, 14px); background: var(--surface, var(--card, #fff)); }
.cc-kpi-l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cc-kpi-v { font-size: 22px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-kpi-s { font-size: 11.5px; color: var(--muted); }
.cc-kpi.red .cc-kpi-v { color: var(--red); }
.cc-kpi.green .cc-kpi-v { color: var(--green); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cc-panel { margin: 0; }
.cc-rows { display: flex; flex-direction: column; }
.cc-row { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); }
.cc-rows .cc-row:first-child { border-top: 0; }
.cc-row:hover { background: var(--hover, rgba(0,0,0,.03)); }
.cc-row .ic { width: 16px; height: 16px; color: var(--muted); flex: none; margin-left: auto; }
.cc-row .r-main { min-width: 0; flex: 1; }
.cc-row .r-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-row .r-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.cc-dot.red { background: var(--red); } .cc-dot.amber { background: var(--amber); } .cc-dot.green { background: var(--green); }
.cc-amt { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; font-size: 13px; }
.cc-amt.red { color: var(--red); }
.cc-row .score { flex: none; }
.cc-flips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-flip { text-align: left; border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px; cursor: pointer;
  background: var(--surface, var(--card, #fff)); display: flex; flex-direction: column; gap: 7px; }
.cc-flip:hover { border-color: var(--primary); }
.cc-flip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-flip-top b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-flip-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cc-flip-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2, var(--primary))); }
.cc-flip-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cc-flip-meta .red { color: var(--red); font-weight: 600; } .cc-flip-meta .green { color: var(--green); font-weight: 600; }
.cc-empty { display: flex; align-items: center; gap: 8px; padding: 14px 4px; color: var(--muted); font-size: 13px; }
.cc-empty .ic { width: 16px; height: 16px; color: var(--green); flex: none; }
@media (max-width: 880px) {
  .cc-grid { grid-template-columns: 1fr; }
  .cc-kpis { grid-template-columns: repeat(2, 1fr); }
  .cc-flips { grid-template-columns: 1fr; }
}
/* QuickBooks reconnect banner — a slim bar between the topbar and the view,
   shown by app.js when the QBO link is down or needs reauth. */
.qb-banner { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  background: rgba(245, 158, 11, .12); border-bottom: 1px solid rgba(245, 158, 11, .35);
  color: var(--ink); font-size: 13px; }
.qb-banner[hidden] { display: none; }
.qb-banner .ic { width: 16px; height: 16px; flex: none; color: var(--amber); }
.qb-banner-msg { flex: 1; min-width: 0; }
.qb-banner-act { flex: none; font-weight: 700; color: var(--amber); text-decoration: underline;
  padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.qb-banner-act:hover { background: rgba(245, 158, 11, .14); }
.qb-banner-x { flex: none; background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: 4px; display: inline-flex; }
.qb-banner-x:hover { color: var(--ink); }
/* Large receipt preview in the edit-expense form — the actual receipt at a
   readable size with the actions in a footer below (not a cramped thumbnail). */
.exrcpt { border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; }
.exrcpt-view { display: block; width: 100%; border: 0; padding: 0; margin: 0; cursor: zoom-in;
  background: rgba(0, 0, 0, .035); }
.exrcpt-view img { display: block; width: 100%; max-height: 300px; min-height: 120px; object-fit: contain; }
.exrcpt-view .up-ico { display: grid; place-items: center; height: 140px; color: var(--muted); }
.exrcpt-view .up-ico .ic { width: 40px; height: 40px; }
.exrcpt-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.exrcpt-meta { display: flex; flex-direction: column; min-width: 0; }
.exrcpt-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.exrcpt-meta span { font-size: 11.5px; }
.exrcpt-act { display: flex; gap: 8px; margin-left: auto; flex: none; }
:root[data-theme="dark"] .exrcpt-view { background: rgba(255, 255, 255, .04); }
.pill .dot.pulse { animation: dotPulse 1.1s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- tabs ---- */
/* Single scrollable row: swipe left/right through the tabs. touch-action: pan-x
   keeps the gesture horizontal so the strip no longer "grabs" up/down with a drag. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto;
  scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; padding: 12px 16px; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; transition: color .15s; }
.tab .ic { width: 17px; height: 17px; }
.tab .cnt { font-size: 11px; background: var(--soft); border-radius: var(--r-pill); padding: 0 7px; font-weight: 600; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--primary-ink); border-bottom-color: var(--primary); }
.tab.active .cnt { background: var(--primary-soft); color: var(--primary-ink); }

/* ---- Drive file browser (Files tab): folder grid + in-app preview ---- */
.drive-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 16px 0; }
.drive-crumb { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600;
  font-size: 13px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex;
  align-items: center; gap: 5px; }
.drive-crumb .ic { width: 15px; height: 15px; }
.drive-crumb.on { color: var(--ink); }
.drive-crumb:hover { background: var(--soft); color: var(--ink); }
.drive-crumb-sep { color: var(--muted); font-size: 13px; }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 14px 16px 18px; }
.drive-tile { position: relative; display: flex; flex-direction: column; text-align: left; gap: 8px; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.drive-tile:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.drive-thumb { position: relative; height: 92px; border-radius: var(--r-sm); background: var(--soft); display: flex; align-items: center;
  justify-content: center; overflow: hidden; color: var(--muted); }
.drive-thumb .ic { width: 30px; height: 30px; }
.drive-thumb.folder { color: var(--primary); background: var(--primary-soft); }
.drive-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drive-thumb-img { position: absolute; inset: 0; }   /* proxied PDF/doc/image thumbnail overlaying the fallback icon */
/* per-tile "⋯" actions menu */
.drive-menu { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--card) 78%, transparent); color: var(--muted); }
.drive-menu .ic { width: 18px; height: 18px; }
.drive-menu:hover { background: var(--soft); color: var(--ink); }
/* action rows inside the item sheet */
.drive-actions { gap: 2px; }
.row-btn { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left;
  padding: 12px 10px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.row-btn .ic { width: 18px; height: 18px; color: var(--muted); }
.row-btn:hover { background: var(--soft); }
.row-btn.danger { color: var(--red); } .row-btn.danger .ic { color: var(--red); }
.drive-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drive-sub { font-size: 11.5px; color: var(--muted); }
.drive-preview { width: 100%; }
.drive-preview img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--r-sm); display: block; }
.drive-preview iframe { width: 100%; height: 70vh; border: 0; border-radius: var(--r-sm); background: var(--soft); }

/* Files-tab drag-and-drop: a dashed hint at the bottom + a full-panel overlay while dragging. */
.drive-dropzone { position: relative; }
.drive-drop-hint { margin: 4px 16px 16px; padding: 12px; border: 1.5px dashed var(--line); border-radius: var(--r-md);
  color: var(--muted); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.drive-drop-hint .ic { width: 15px; height: 15px; }
.drive-drop-overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--primary) 10%, var(--card)); border: 2px dashed var(--primary);
  color: var(--primary-ink); font-weight: 650; font-size: 14px; pointer-events: none; z-index: 6; }
.drive-drop-overlay .ic { width: 30px; height: 30px; }
.drive-dropzone.is-dragover .drive-drop-overlay { display: flex; }
.drive-dropzone.is-dragover { border-color: var(--primary); }
.punch-del { opacity: .55; }
.task:hover .punch-del { opacity: 1; }

/* ---- list rows (responsive table replacement) ---- */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; padding: 13px var(--pad);
  border-top: 1px solid var(--line-2); transition: background .12s; }
.row:first-child { border-top: 0; }
button.row { -webkit-appearance: none; appearance: none; border-left: 0; border-right: 0; border-bottom: 0;
  background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.row:hover { background: var(--soft); }
.row .r-main { flex: 1; min-width: 0; }
.row .r-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .r-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.row .r-amt { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row .r-amt.neg { color: var(--red); }
.row .r-amt.pos { color: var(--green); }

/* ---- empty / loading ---- */
.empty { text-align: center; padding: 46px 22px; color: var(--muted); }
.empty .e-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--soft); color: var(--muted-2);
  display: grid; place-items: center; margin: 0 auto 14px; }
.empty .e-ic .ic { width: 22px; height: 22px; }
.empty h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.empty p { font-size: 13px; max-width: 320px; margin: 5px auto 16px; }

/* ============================ Homes Owned ============================ */
.proj-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.proj-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel);
  overflow: hidden; cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }
.proj-photo { position: relative; aspect-ratio: 16 / 9; background: var(--soft-2); overflow: hidden; }
.proj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-photo .ph-stripe { position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, var(--soft) 0 14px, var(--soft-2) 14px 28px);
  display: grid; place-items: center; color: var(--muted-2); font: 600 11px/1 ui-monospace, Menlo, monospace; }
.proj-photo .phase { position: absolute; top: 10px; left: 10px; backdrop-filter: blur(6px); }
.proj-body { padding: 14px var(--pad) var(--pad); }
.proj-addr { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.proj-loc { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.proj-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
.proj-metrics .m .ml { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.proj-metrics .m .mv { font-size: 15px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.proj-prog { margin-top: 14px; }
.proj-prog .pl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.proj-prog .pl b { color: var(--ink); }

/* workspace header */
.ws-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ws-photo { width: 132px; height: 92px; border-radius: var(--r-input); overflow: hidden; flex: none; background: var(--soft-2); }
.ws-photo img { width: 100%; height: 100%; object-fit: cover; }
.ws-meta { flex: 1; min-width: 200px; }
.ws-meta h1 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.ws-meta .ws-loc { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.ws-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pill-btn { border: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.pill-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--soft)); color: var(--accent); }
.pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* milestone timeline */
.miles { display: flex; gap: 0; margin: 4px 0; }
.mile { flex: 1; position: relative; text-align: center; }
.mile .mdot { width: 17px; height: 17px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line);
  margin: 0 auto 8px; position: relative; z-index: 2; }
.mile::before { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 1; }
.mile:first-child::before { display: none; }
.mile.done .mdot { background: var(--primary); border-color: var(--primary); }
.mile.done::before { background: var(--primary); }
.mile.now .mdot { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.mile.now::before { background: var(--primary); }
.mile .mname { font-size: 11.5px; font-weight: 600; }
.mile .mdate { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* money: receipt + invoices */
.money-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.txn-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.txn-ic.out { background: var(--red-soft); color: var(--red); }
.txn-ic.in { background: var(--green-soft); color: var(--green); }
.txn-ic.bid { background: var(--blue-soft); color: var(--blue); }
.receipt-thumb { width: 34px; height: 42px; border-radius: 7px; flex: none; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, var(--line-2) 7px 8px); }

/* vendor cards */
.vendor-card { display: flex; gap: 14px; align-items: flex-start; padding: var(--pad); border-top: 1px solid var(--line-2); }
.vendor-card:first-child { border-top: 0; }
.vendor-av { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff; background: #14141a; }
.vendor-card .v-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.vendor-card .v-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.trade-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Vendors v2 (visual pass over the vendors.js behavior layer) ----------
   Card grid replaces the old inline-pill rows. Hooks/IDs are unchanged; this is
   markup + CSS only. The .chip / .chip-row filter pattern is the shared one
   defined later in this file (aria-pressed); icons inside chips are sized here. */
.chip .ic { width: 14px; height: 14px; }
.pv-like-search { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 0 14px; min-height: 44px; transition: border-color .14s, box-shadow .14s; }
.pv-like-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.pv-like-search .ic { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
.pv-like-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 13.5px; color: var(--ink); outline: none; }
/* "1099-ready" toolbar toggle: primary-soft while the panel is open */
.pv-fbtn-on { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }

.v2-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-toolbar .pv-like-search { flex: 1 1 260px; }
.v2-trade { width: auto; min-width: 132px; }

.v2-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 560px) { .v2-grid { grid-template-columns: 1fr; } }

.v2-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--pad); display: flex; flex-direction: column; gap: 12px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.v2-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.v2-card.untracked { border-style: dashed; background: var(--soft); }

.v2-head { display: flex; align-items: flex-start; gap: 12px; }
.v2-av { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid;
  place-items: center; font-size: 14px; font-weight: 750; color: #fff;
  background: var(--ink-2); letter-spacing: .02em; }
.v2-av.pref { background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 12px var(--primary-ring); }
.v2-av.sm { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
.v2-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v2-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; display: flex;
  align-items: center; gap: 7px; flex-wrap: wrap; }
.v2-trades { display: flex; gap: 5px; flex-wrap: wrap; }
.v2-pref { flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: var(--r-pill); padding: 5px 11px; font: 600 11.5px/1 inherit;
  cursor: pointer; transition: all .14s var(--ease); }
.v2-pref .ic { width: 12px; height: 12px; }
.v2-pref:hover { border-color: var(--muted-2); color: var(--ink); }
.v2-pref.on { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  color: var(--green); }

.v2-contact { display: flex; flex-direction: column; gap: 6px; }
.v2-contact > div { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  color: var(--ink-2); min-width: 0; }
.v2-contact > div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-contact .ic { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.v2-contact .muted { color: var(--muted); }

.v2-comply { display: flex; gap: 6px; flex-wrap: wrap; }

.v2-spend { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: 11px;
  overflow: hidden; }
.v2-spend > div { background: var(--soft); padding: 8px 11px; min-width: 0; }
.v2-spend span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-2); margin-bottom: 2px; }
.v2-spend b { font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.v2-spend b.amber { color: var(--amber); }

.v2-jobs summary { display: flex; align-items: center; gap: 7px; font-size: 12px;
  font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; }
.v2-jobs summary::-webkit-details-marker { display: none; }
.v2-jobs summary .ic { width: 13px; height: 13px; }
.v2-jobs summary .ic:last-child { margin-left: auto; transition: transform .14s; }
.v2-jobs[open] summary .ic:last-child { transform: rotate(90deg); }
.v2-jobs-list { margin-top: 8px; display: flex; flex-direction: column; }
.v2-job { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-top: 1px solid var(--line-2); font-size: 12.5px; }
.v2-job b { font-weight: 650; }

.v2-acts { display: flex; gap: 7px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line-2); }
.v2-acts .btn[disabled] { opacity: .45; cursor: not-allowed; }

.v2-1099-note { font-size: 12px; color: var(--muted); padding-top: 0; }
.v2-sheet-vendor { display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--soft); border-radius: 12px; }
.v2-sheet-vendor b { display: block; font-size: 13.5px; }
.v2-sheet-vendor span { font-size: 12px; color: var(--muted); }
.v2-ai-note { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px;
  color: var(--primary-ink); }
.v2-ai-note .ic { width: 14px; height: 14px; flex: none; }

/* Untracked payees — collapsed list (not cards). Compact rows the user can promote. */
.v2-untracked { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); overflow: hidden; }
.v2-untracked > summary { display: flex; align-items: center; gap: 10px; padding: 13px var(--pad);
  cursor: pointer; list-style: none; font-size: 13.5px; }
.v2-untracked > summary::-webkit-details-marker { display: none; }
.v2-untracked > summary:hover { background: var(--soft); }
.v2-untracked .ut-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink); }
.v2-untracked .ut-title .ic { width: 15px; height: 15px; color: var(--muted-2); }
.v2-untracked .ut-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--soft-2); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.v2-untracked .ut-hint { font-size: 12px; }
.v2-untracked > summary > .ic:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--muted-2);
  transition: transform .14s; }
.v2-untracked[open] > summary > .ic:last-child { transform: rotate(90deg); }
.v2-untracked .ut-list { border-top: 1px solid var(--line-2); }
.v2-untracked .ut-row { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad);
  border-top: 1px solid var(--line-2); }
.v2-untracked .ut-row:first-child { border-top: 0; }
.v2-untracked .ut-main { flex: 1; min-width: 0; }
.v2-untracked .ut-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-untracked .ut-meta { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.v2-untracked .ut-acts { display: flex; gap: 7px; flex: none; align-items: center; }
@media (max-width: 560px) {
  .v2-untracked .ut-hint { display: none; }
  /* stack the row so the two actions don't crowd the name on a phone */
  .v2-untracked .ut-row { flex-wrap: wrap; }
  .v2-untracked .ut-acts { width: 100%; }
  .v2-untracked .ut-acts .btn { flex: 1; justify-content: center; }
}

/* chat */
.chat-feed { display: flex; flex-direction: column; gap: 14px; padding: var(--pad); max-height: 460px; overflow-y: auto; }
.msg { display: flex; gap: 11px; }
.msg .m-body { background: var(--soft); border-radius: 4px 14px 14px 14px; padding: 9px 13px; max-width: 78%; }
.msg .m-name { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.msg .m-name span { font-weight: 500; color: var(--muted); margin-left: 7px; font-size: 11px; }
.msg .m-text { font-size: 13.5px; }
.msg.me { flex-direction: row-reverse; }
.msg.me .m-body { background: var(--primary-soft); color: var(--primary-ink); border-radius: 14px 4px 14px 14px; }
.msg.me .m-name { color: var(--primary-ink); }
.chat-composer { display: flex; gap: 10px; padding: var(--pad); border-top: 1px solid var(--line); align-items: flex-end; }
.chat-composer textarea { min-height: 44px; max-height: 120px; }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px;
  overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--soft); border-radius: var(--r-panel); padding: 12px; min-height: 200px; }
.kcol-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.kcol-head .kt { font-size: 13px; font-weight: 700; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .14s, box-shadow .14s; }
.kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kcard .kc-addr { font-size: 13.5px; font-weight: 700; }
.kcard .kc-sub { font-size: 12px; color: var(--muted); margin: 2px 0 9px; }
.kcard .kc-foot { display: flex; align-items: center; justify-content: space-between; }
/* Zillow / listing link badge, pinned to the top-right of a pipeline card photo. */
.kc-zillow { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none;
  background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); z-index: 3; }
.kc-zillow:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-soft); }
.kc-zillow .ic { width: 13px; height: 13px; }
/* Listing photo gallery strip on the property detail page (prospect-media). */
.prop-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 9px;
  overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.prop-gallery .gallery-cell { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft-2); scroll-snap-align: start; }
.prop-gallery .gallery-cell img, .prop-gallery .gallery-cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s; }
.prop-gallery .gallery-cell:hover img, .prop-gallery .gallery-cell:hover video { transform: scale(1.04); }
.score { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--primary-soft); color: var(--primary-ink); }

/* task rows */
.task { display: flex; align-items: center; gap: 13px; padding: 12px var(--pad); border-top: 1px solid var(--line-2); }
.task:first-child { border-top: 0; }
.task[data-edit-task], .task[data-punch-edit] { cursor: pointer; }
.task[data-edit-task]:hover, .task[data-punch-edit]:hover { background: var(--soft); }
.checkbox { width: 21px; height: 21px; border-radius: 7px; border: 1.7px solid var(--line); flex: none; background: var(--panel);
  display: grid; place-items: center; color: transparent; transition: all .15s; padding: 0; }
.checkbox .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.checkbox:hover { border-color: var(--primary); }
.task.done .checkbox { background: var(--primary); border-color: var(--primary); color: #fff; }
.task.done .t-title { color: var(--muted); text-decoration: line-through; }
.task .t-title { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; }
.task .t-meta { display: flex; align-items: center; gap: 8px; }
.task-prop-label { display: flex; align-items: center; gap: 8px; padding: 14px var(--pad) 8px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ============================ Modal / sheet / toast ============================ */
.scrim { position: fixed; inset: 0; background: rgba(13,13,13,.42);
  z-index: 80; opacity: 0; pointer-events: none; overscroll-behavior: contain; touch-action: none; }
.scrim.show { opacity: 1; pointer-events: auto; }
/* While a sheet/popup is open, freeze the page behind it so a swipe scrolls the
   sheet, not the page underneath (same approach as body.pong-open). */
body.sheet-open { overflow: hidden; overscroll-behavior: none; }
/* property detail hero */
.prop-hero { display: grid; grid-template-columns: 1.05fr 1fr; }
.prop-hero-photo { position: relative; aspect-ratio: 16 / 10; background: var(--soft-2); }
.prop-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-price-badge { position: absolute; bottom: 14px; left: 14px; background: rgba(13,13,13,.72); color: #fff;
  border-radius: 12px; padding: 7px 14px; backdrop-filter: blur(6px); }
.prop-price-badge span { display: block; font-size: 10px; opacity: .82; text-transform: uppercase; letter-spacing: .05em; }
.prop-price-badge strong { font-size: 18px; font-weight: 700; }
.prop-hero-body { padding: var(--pad); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .prop-hero { grid-template-columns: 1fr; } .prop-hero-photo { aspect-ratio: 16 / 9; } }

/* remodel workspace: phase number, data tables */
.phase-num { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--primary-soft); color: var(--primary-ink); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 11px var(--pad); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.data-table td { padding: 12px var(--pad); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: var(--soft); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .row-act { text-align: right; width: 44px; }
.data-table .r-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
@media (max-width: 720px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tbody tr { position: relative; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .data-table td { border: 0; padding: 3px var(--pad); }
  .data-table .row-act { position: absolute; right: 8px; top: 8px; }
}
/* Expenses table specifics */
.data-table th.num, .data-table td.num { text-align: right; }
.cell-owner { display: inline-flex; align-items: center; gap: 6px; }
.cell-owner .avatar { flex: none; }
.data-table tfoot td { border-top: 1px solid var(--line); padding-top: 12px; border-bottom: 0; }
.expense-table td.neg { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  /* With the header row hidden, prefix each stacked cell with its column name.
     Keyed on [data-label] so action/footer cells (which have none) stay clean —
     covers both the expense table and the generic workspace tables. */
  .data-table tbody td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 92px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .expense-table td.num { text-align: left; }
}

/* centered popup modal (add + edit reuse the same popup) */
.sheet { position: fixed; z-index: 90; background: var(--panel); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  top: 42%; left: 50%; transform: translate(-50%, -47%) scale(.97);
  width: min(490px, calc(100vw - 28px)); max-height: min(82vh, 740px); border-radius: var(--r-modal);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .19s var(--ease), transform .19s var(--ease), visibility .19s; }
.sheet.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  transition: opacity .19s var(--ease), transform .19s var(--ease); }
.sheet-head { border-radius: var(--r-modal) var(--r-modal) 0 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.sheet-head h2 { font-size: 17px; font-weight: 700; }
.sheet-body { padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 16px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; }
.x-btn { border: 0; background: var(--soft); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.x-btn:hover { background: var(--soft-2); color: var(--ink); }

.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--toast-bg); color: #fff;
  padding: 11px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg);
  animation: toastin .3s var(--ease); }
.toast .ic { width: 17px; height: 17px; color: #6ee7b7; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* segmented control inside content */
.subseg { display: inline-flex; background: var(--soft); border-radius: var(--r-input); padding: 4px; gap: 3px; }
.subseg button { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.subseg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }

.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); align-items: start; }

/* mobile bottom nav (hidden on desktop) */
.botnav { display: none; }
.fab { display: none; }

/* ============================ Responsive ============================ */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Mobile: the bottom tab bar + FAB are the primary nav (unchanged). The rail is
     not a persistent fixed rail here — it parks off-screen and slides in as a drawer
     when the hamburger / bottom-nav "More" opens it (#app.nav-open), so every view
     stays reachable. */
  .main { margin-left: 0; }
  /* The mobile rail/drawer rules live in the authoritative block at the END of this
     file — they MUST come after the "Rail v5" base block or the base .rail (width
     --rail-w, transition:width) wins the cascade by source order and the drawer
     opens as a 68px icon strip. Do not re-add .rail rules here. */
  .topbar { padding: 12px 16px; }
  .topbar .hamb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--panel); flex: none; }
  .topbar .search { display: none; }
  .topbar h1 { font-size: 17px; }
  .topbar .head-txt p { display: none; }
  .view { padding: 16px 16px 96px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }

  /* Section/panel headers: let the right-side action group drop below the
     title and wrap its own controls instead of forcing the page wider than
     the viewport (e.g. Tasks: Sections/Board/List + Sync + Add task). */
  .section-title { flex-wrap: wrap; }
  .section-title > .flex, .section-title .ph-actions,
  .panel-head { flex-wrap: wrap; }

  /* Touch targets: the icon-only row-action delete/trash buttons render
     ~41x31px on desktop — too small to tap reliably on a phone, and they're
     destructive. Give them (and any .btn.icon) a >=40px hit area on narrow
     screens. Scoped to these hooks so text buttons keep their compact size. */
  [data-row-del], [data-punch-del], [data-delete-expense],
  .btn.icon { min-width: 40px; min-height: 40px; }

  /* bottom tab bar */
  .botnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px) saturate(1.4);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .botnav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--muted); font-size: 10.5px; font-weight: 600; border-radius: 12px; }
  .botnav button .ic { width: 22px; height: 22px; }
  .botnav button.active { color: var(--primary-ink); }
  .botnav button.active .ic { color: var(--primary); }

  .fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom));
    width: 54px; height: 54px; border-radius: 18px; z-index: 61; border: 0; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 10px 26px var(--primary-ring); }
  .fab .ic { width: 26px; height: 26px; }

  /* popup stays centered on mobile too */
  .sheet { width: calc(100vw - 24px); max-height: 86vh; }
  .sheet-body { padding-bottom: 20px; }

  .ws-photo { width: 100%; height: 170px; }
  .proj-grid { grid-template-columns: 1fr; }
  .kpi .k-val { font-size: 23px; }
  .topbar .head-txt p { display: none; }
}

@media (min-width: 861px) {
  .navscrim { display: none; }
}
.navscrim { position: fixed; inset: 0; background: rgba(13,13,13,.35); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
.app.nav-open .navscrim { opacity: 1; pointer-events: auto; }

/* utility */
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.tnum { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.gap-sm { gap: 8px; }
.mt-sm { margin-top: 8px; } .mt { margin-top: 16px; } .mt-lg { margin-top: 24px; }
.flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; }
.wrap-gap { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   Tools & Automations view — ported from the legacy Integrations hub.
   Compatibility shims map the legacy var names onto the redesign tokens
   so accent + dark mode flow through automatically.
   ===================================================================== */
:root {
  --violet: var(--primary);
  --violet-soft: var(--primary-soft);
  --nav-muted: var(--muted);
}

.integrations-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.integrations-intro h2 { margin: 0 0 6px; }
.integrations-intro p { margin: 0; max-width: 64ch; color: var(--muted); font-size: 13.5px; }
.integrations-intro-main { min-width: 0; padding: var(--pad); }
.integrations-intro-stat {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 2px;
  padding: 14px 22px; margin: var(--pad) var(--pad) var(--pad) 0; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%); color: #fff; text-align: center;
}
.integrations-intro-stat strong { font-size: 30px; line-height: 1; font-weight: 800; }
.integrations-intro-stat span { font-size: 11px; opacity: .9; line-height: 1.2; }

.integration-group { margin-bottom: 18px; padding: var(--pad); }
.integration-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.integration-group-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary-ink); }
.integration-group-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.integration-group-head h3 { margin: 0; font-size: 16px; }
.integration-group-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.integration-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.integration-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.integration-card.state-off { background: var(--soft); border-style: dashed; }
.integration-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.integration-card-top strong { font-size: 14.5px; color: var(--ink); }
.integration-desc { margin: 0; font-size: 13px; color: var(--muted); }

.integration-pill { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.integration-pill.on { background: var(--green-soft); color: var(--green); }
.integration-pill.auto { background: var(--blue-soft); color: var(--blue); }
.integration-pill.off { background: var(--amber-soft); color: var(--amber); }

.integration-trigger { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid transparent; }
.integration-trigger strong { font-weight: 800; }
.integration-trigger .trig-detail { font-weight: 500; opacity: .85; }
.trig-ico { width: 13px; height: 13px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.trig-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.integration-trigger.trig-scheduled { background: var(--blue-soft); color: var(--blue); }
.integration-trigger.trig-event     { background: var(--primary-soft); color: var(--primary-ink); }
.integration-trigger.trig-manual    { background: var(--soft); color: var(--muted); }
.integration-trigger.trig-sync      { background: var(--green-soft); color: var(--green); }
.integration-trigger.trig-passive   { background: var(--green-soft); color: var(--green); }
.integration-trigger.trig-source    { background: var(--soft); color: var(--muted); }

.integration-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.integration-where { margin: 0; font-size: 12px; color: var(--muted); }
.integration-where span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-right: 6px; }
.integration-hint { margin: 0; font-size: 12px; color: var(--muted); }
.integration-hint code { background: var(--soft); border-radius: 5px; padding: 1px 5px; font-size: 11.5px; color: var(--ink); }
.integration-actions { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.integration-run { cursor: pointer; background: none; border: 0; color: var(--primary-ink); font-weight: 600; font-size: 13px; padding: 0; text-decoration: underline; }
.integration-run:disabled { opacity: .6; cursor: default; }
.integration-run-result { font-size: 12px; color: var(--muted); }
.integration-run-result.ok { color: var(--green); }
.integration-run-result.err { color: var(--red); }

.ai-provider-panel .ai-provider-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ai-provider-panel .ai-feature-list { display: flex; flex-direction: column; gap: 8px; }
.ai-feature-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 240px) minmax(150px, 1fr); align-items: center; gap: 12px; }
.ai-feature-default { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ai-feature-name em { color: var(--muted); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.ai-feature-model { color: var(--muted); font-size: 12px; }
.ai-feature-row select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-input); padding: 7px 10px; background: var(--panel); }
.ai-provider-status { font-size: 13px; color: var(--muted); min-height: 18px; }
.ai-provider-error { color: var(--red); }
.ai-models { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.ai-models > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.ai-models-note { color: var(--muted); font-size: 12px; margin: 6px 0 10px; }
.ai-model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ai-model-group { display: flex; flex-direction: column; gap: 6px; }
.ai-model-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ai-model-head em { font-style: normal; text-transform: none; letter-spacing: 0; }
.ai-model-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.ai-model-role { font-size: 12px; color: var(--muted); }
.ai-model-row input { width: 100%; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); }

/* Model budgets panel (Tools → AI): month-to-date spend vs per-model caps. */
.ai-budget-list { display: flex; flex-direction: column; gap: 10px; }
.ai-budget-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; align-items: center; gap: 12px; }
.ai-budget-model { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-budget-detail { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.ai-budget-detail em { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.ai-budget-row.warn .ai-budget-detail em { color: var(--amber); }
.ai-budget-row.over .ai-budget-detail em { color: var(--red); }
.ai-budget-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 320px; }
.ai-budget-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.ai-budget-bar.warn i { background: var(--amber); }
.ai-budget-bar.over i { background: var(--red); }
.ai-budget-cap { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ai-budget-cap input { width: 72px; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); }
.ai-budget-add { border-top: 1px solid var(--line); padding-top: 10px; }
.ai-budget-add input[type="text"] { font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--panel); width: 100%; }
.ai-budget-empty { font-size: 13px; color: var(--muted); margin: 0; }

.integration-auth-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 4px; font-size: 13px; color: var(--amber); background: var(--amber-soft); }
.integration-auth-note a { color: var(--primary-ink); font-weight: 700; }
.integration-auth-note .trig-ico { width: 16px; height: 16px; }
/* Red "source key rejected" banner (e.g. RentCast 401) — sits above the catalog. */
.integration-key-warning { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; margin-bottom: 4px;
  font-size: 13px; line-height: 1.45; color: var(--red); background: var(--red-soft); border-color: var(--red-soft); }
.integration-key-warning .trig-ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.integration-key-warning strong { color: var(--red); }
.integration-key-warning code { font-size: 12px; }

@media (max-width: 720px) {
  .integrations-intro { flex-direction: column; align-items: flex-start; }
  .ai-feature-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   Login gate
   ===================================================================== */
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--primary-soft), var(--bg) 60%); padding: 24px; }
/* Without this, `display: grid` above beats the UA `[hidden] { display: none }`
   rule, so showApp()'s `loginScreen.hidden = true` never hides the full-screen
   overlay and the (already-loaded) app stays covered. */
.login-screen[hidden] { display: none; }
.login-card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-modal); box-shadow: var(--shadow-lg); padding: 36px 30px; text-align: center; }
.login-mark { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 16px; background: var(--ink); }
.login-mark svg { width: 34px; height: 34px; fill: #fff; }
.login-card h1 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.login-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.login-hint { color: var(--muted); font-size: 12.5px; margin-top: 14px; min-height: 16px; }
#googleSignInButton { margin-top: 18px; display: flex; justify-content: center; min-height: 44px; }
.login-error { color: var(--red); font-size: 13px; margin-top: 14px; }

/* Signing-in spinner: swaps in for the GSI button between the credential
   callback and showApp(). Token-colored, reduced-motion-safe. (Markup is
   driven by live.js; this is the visual.) */
.login-spin { width: 34px; height: 34px; margin: 22px auto 4px; border-radius: 50%;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  animation: lspin .8s linear infinite; }
@keyframes lspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-spin { animation: none; } }

/* Two-workspace strip at the foot of the login card. */
.login-foot { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
.login-foot span { display: inline-flex; align-items: center; gap: 5px; }
.login-foot .ic { width: 14px; height: 14px; }
.login-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* Offline notice: amber bar rendered under the topbar by app.js when the
   browser goes offline; removed on reconnect. */
.offline-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--amber-soft); color: var(--amber); border: 1px solid
  color-mix(in srgb, var(--amber) 30%, var(--line)); border-radius: 11px;
  font-size: 12.5px; font-weight: 600; }
.offline-bar .ic { width: 15px; height: 15px; }

/* Tasks: swipeable column layout (Sections + Board) */
.task-swim{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.swim-col{flex:0 0 86%;max-width:360px;scroll-snap-align:start;background:var(--soft);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:140px}
@media (min-width:760px){.swim-col{flex-basis:300px}}
.swim-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:750;font-size:13.5px;padding:2px 4px}
.swim-head .swim-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swim-body{display:flex;flex-direction:column;gap:8px;min-height:56px;border-radius:12px;transition:background .12s,outline-color .12s}
.swim-empty{color:var(--muted);font-size:12.5px;padding:16px;text-align:center;border:1px dashed var(--line);border-radius:12px}
.task-swim .task{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;align-items:flex-start}
.task-swim .task .t-title{font-size:13.5px;line-height:1.35}
.task-swim .task[data-task-card]{cursor:grab;touch-action:auto}
.kanban-dragging .task[data-task-card]{cursor:grabbing}
/* Owned-ops Tasks polish (branch claude/design-owned-ops): property photo in the
   swim header, due-today violet inset edge + overdue red-tinted border. */
.swim-head .swim-thumb { width: 28px; height: 22px; border-radius: 6px; object-fit: cover;
  flex: none; background: var(--soft-2); }
.task-swim .task.due-today { box-shadow: inset 2.5px 0 0 var(--primary); }
.task-swim .task.overdue { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }

/* Pointer-based kanban drag (Pipeline + Task board), touch + mouse */
.kcard{cursor:grab;touch-action:auto}
.kanban-dragging{user-select:none;-webkit-user-select:none}
.kanban-dragging .kcard{cursor:grabbing}
[data-kanban-col].is-droptarget{background:var(--primary-soft);outline:2px dashed var(--primary);outline-offset:-2px;border-radius:14px}
.swim-body.is-droptarget{background:var(--primary-soft);outline:2px dashed var(--primary)}
.kanban-ghost{opacity:.95;box-shadow:0 14px 34px rgba(0,0,0,.28);border-radius:12px;background:var(--panel)}

/* ---- Team Pong overlay ---- */
.pong-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(15,18,24,.55);backdrop-filter:blur(3px);padding:16px;overscroll-behavior:contain}
.pong-overlay.show{display:flex}
/* Lock the page behind the game so dragging a paddle never scrolls/pulls the page. */
body.pong-open{overflow:hidden;overscroll-behavior:none}
.pong-modal{display:flex;flex-direction:column;gap:10px;width:min(560px,96vw);max-height:94vh;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.pong-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pong-title{font-weight:750;font-size:16px;display:flex;align-items:center;gap:8px}
.pong-status{font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:var(--r-pill);padding:2px 9px}
.pong-scores{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.pong-score{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;background:var(--soft);
  border-radius:var(--r-sm);padding:6px 9px;color:var(--ink)}
.pong-score.empty{color:var(--muted);font-weight:500}
.pong-score.you{outline:2px solid var(--primary);outline-offset:-2px}
.pong-score b{margin-left:auto;font-size:15px}
.pong-score .dot{width:10px;height:10px;border-radius:50%;flex:none}
.pong-stage{position:relative;flex:1;min-height:240px;display:flex;align-items:center;justify-content:center}
.pong-stage canvas{border-radius:var(--r-md);touch-action:none;cursor:crosshair;background:#0e1117;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.28)}
.pong-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--muted);
  background:color-mix(in srgb,var(--card) 80%,transparent);padding:2px 8px;border-radius:var(--r-pill);pointer-events:none}
.pong-controls{min-height:24px}
.pong-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pong-set label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.pong-set select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}

/* ---------- Portfolio Intelligence / Analytics view (v2 design handoff) ---------- */
.an-wrap { gap: 14px; }
.an-muted { color: var(--muted); font-size: 13px; padding: 6px 0; }
.an-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.an-dim { color: var(--muted); }
.an-funnel-zero { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted-2); }

.an-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.an-stat { border: 1px solid var(--line); border-radius: var(--r-input); padding: 11px 13px; background: var(--panel); }
.an-stat span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.an-stat b { font-size: 20px; }

.an-rows { display: grid; gap: 0; margin-top: 10px; font-size: 13px; }
.an-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.an-r > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-cap .an-cap-name { flex: 1; }
.an-cap .pill { margin-left: auto; }

.an-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-top: 12px; }
.an-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.an-col-num { font-size: 10px; font-weight: 700; color: var(--green); min-height: 12px; }
.an-bar { width: 100%; max-width: 26px; background: var(--primary); border-radius: 6px 6px 0 0; min-height: 2px; }
.an-col-x { font-size: 10px; color: var(--muted); }

/* compressed AI briefing: one action bar instead of a hero panel */
.an-briefing { border-left: 3px solid var(--primary); }
.an-brief-bar { display: flex; align-items: center; gap: 14px; padding: 14px var(--pad); }
.an-brief-bar .bb-ic { width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); }
.an-brief-bar .bb-main { flex: 1; min-width: 0; }
.an-brief-bar .bb-head { font-weight: 750; font-size: 14.5px; letter-spacing: -.01em; }
.an-brief-bar .bb-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-brief-bar .bb-pris { display: flex; gap: 7px; flex: none; flex-wrap: wrap;
  justify-content: flex-end; max-width: 430px; }
.an-brief-bar .bb-pris .pill .ic { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .an-brief-bar { flex-wrap: wrap; }
  .an-brief-bar .bb-pris { justify-content: flex-start; max-width: none; }
}

/* hero KPI extras */
.cap-bar { display: flex; height: 7px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--soft-2); margin-top: 11px; gap: 2px; }
.cap-bar i { display: block; height: 100%; }
.dot-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: 2px; vertical-align: 0; }

/* funnel: stacked bar + legend */
.fn-bar { display: flex; height: 18px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--soft-2); gap: 2px; }
.fn-bar i { display: block; height: 100%; min-width: 6px; }
.fn-1 { background: var(--primary); }
.fn-2 { background: color-mix(in srgb, var(--primary) 72%, var(--panel)); }
.fn-3 { background: color-mix(in srgb, var(--primary) 48%, var(--panel)); }
.fn-4 { background: var(--blue); }
.fn-5 { background: var(--green); }
.fn-legend { display: flex; flex-direction: column; margin-top: 12px; }
.fn-row { display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--line-2); font-size: 13px; }
.fn-row:first-child { border-top: 0; }
.fn-row span:nth-child(2) { flex: 1; }
.fn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.fn-dot.fn-1 { background: var(--primary); }
.fn-dot.fn-2 { background: color-mix(in srgb, var(--primary) 72%, var(--panel)); }
.fn-dot.fn-3 { background: color-mix(in srgb, var(--primary) 48%, var(--panel)); }
.fn-dot.fn-4 { background: var(--blue); }
.fn-dot.fn-5 { background: var(--green); }

/* capital donut */
.an-donut { width: 112px; height: 112px; border-radius: 50%; position: relative; flex: none;
  display: grid; place-items: center; }
.an-donut::before { content: ""; position: absolute; inset: 15px; border-radius: 50%;
  background: var(--panel); }
.an-donut span { position: relative; font-size: 15px; font-weight: 750;
  font-variant-numeric: tabular-nums; }

/* equal-height panel bands */
.an-eq > .panel { display: flex; flex-direction: column; }

/* loading skeleton */
.an-skel { display: flex; flex-direction: column; gap: 11px; }
.skel { height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--soft) 25%, var(--soft-2) 50%, var(--soft) 75%);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
@keyframes skel { to { background-position: -200% 0; } }

.an-fc { border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px; background: var(--soft); margin-top: 12px; }
.an-fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.an-fc p { margin: 4px 0; font-size: 13px; }
.an-fc .pill { text-transform: capitalize; }
.an-acts { margin: 6px 0 0; padding-left: 16px; font-size: 13px; }

/* QuickBooks Ledger — one transaction card with its debit/credit lines, reused
   by the Analytics ledger panel and the per-record drill-down sheet. */
.qb-je { border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; background: var(--panel); }
.qb-je + .qb-je { margin-top: 10px; }
.qb-je-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.qb-je-line { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 3px 0; }
.qb-je-acct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.qb-je-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* QuickBooks Ledger — controls (search + view toggle + type chips) and the
   mobile-first compact list (statement-style day groups, one tappable row each). */
.qb-led-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.qb-led-search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0;
  padding: 8px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-input); color: var(--muted); }
.qb-led-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.qb-led-search .ic { width: 17px; height: 17px; flex: none; }
.qb-led-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.qb-led-seg { flex: none; }
.qb-led-types { flex: 1 1 100%; }
.qb-led-list { display: flex; flex-direction: column; }
.qb-led-empty { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
.qb-day { font: 700 11px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2);
  padding: 16px 2px 7px; border-bottom: 1px solid var(--line-2); margin-bottom: 2px; }
.qb-day:first-child { padding-top: 2px; }
.qb-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line-2); background: none; padding: 11px 2px; }
.qb-day + .qb-row { border-top: 0; }
.qb-row:hover { background: var(--soft); }
.qb-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qb-row-top { display: flex; align-items: baseline; gap: 10px; }
.qb-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-row-amt { flex: none; font-weight: 700; }
.qb-row-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qb-row-type { flex: none; font-size: 10px; padding: 1px 7px; }
.qb-row-memo { min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-row > .ic { width: 17px; height: 17px; flex: none; color: var(--muted-2); }

/* Bank Inbox — QuickBooks bank/card transactions awaiting project tagging. */
.qb-inbox { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qb-txn { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; background: var(--panel);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.qb-txn:hover { box-shadow: var(--shadow-sm); }
.qb-txn .qb-main { min-width: 0; }
.qb-txn .qb-vendor { font-weight: 650; color: var(--ink); }
.qb-txn .qb-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qb-txn .qb-amt { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; justify-self: end; }
.qb-txn .qb-amt.credit { color: var(--green); }
.qb-txn .qb-match { grid-column: 1 / -1; font-size: 12px; color: var(--blue); background: var(--blue-soft);
  border-radius: 10px; padding: 7px 10px; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-txn .qb-controls { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.qb-txn .qb-controls select { flex: 1 1 150px; min-width: 0; }
/* Project picker trigger — looks like the sibling <select>, opens the search sheet. */
.qb-proj-pick { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: var(--r-input); padding: 8px 11px; font: inherit; font-size: 13.5px; text-align: left; }
.qb-proj-pick:hover { border-color: var(--muted-2); }
.qb-proj-pick.picked { color: var(--ink); font-weight: 600; }
.qb-proj-pick .ic:first-child { width: 17px; height: 17px; flex: none; color: var(--muted); }
.qb-proj-pick .ic:last-child { width: 16px; height: 16px; flex: none; margin-left: auto; transform: rotate(90deg); color: var(--muted-2); }
.qb-proj-pick .qb-proj-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Searchable project picker (rendered inside the shared sheet). */
.proj-picker { display: flex; flex-direction: column; gap: 12px; }
.pp-search { display: flex; align-items: center; gap: 9px; padding: 10px 13px; position: sticky; top: 0; z-index: 2;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-input); }
.pp-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.pp-search .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.pp-list { display: flex; flex-direction: column; gap: 2px; }
.pp-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted-2); padding: 12px 4px 5px; }
.pp-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  border-radius: 12px; padding: 11px 12px; text-align: left; cursor: pointer; color: var(--ink); }
.pp-opt:hover { background: var(--soft); }
.pp-opt.on { background: var(--primary-ring); }
.pp-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-opt-addr { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-opt-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-opt .phase.pill { flex: none; }
.pp-opt > .ic { width: 19px; height: 19px; flex: none; color: var(--primary); }
.pp-empty { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* =====================================================================
   PIPELINE V2  ·  branch claude/design-pipeline  ·  Prospects › Pipeline
   Appended block (parallel-session safe — Pipeline only). Tokens only;
   storyboard-only classes from the handoff (.pipe-ghost-wrap,
   .kc2-ghost-demo*) are intentionally NOT shipped.
   ===================================================================== */

/* chip / chip-row filter pattern (shared, not yet landed elsewhere) */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  border-radius: var(--r-pill); padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  transition: all .14s var(--ease); cursor: pointer; font-family: inherit; }
.chip:hover { border-color: var(--muted-2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }

.pipe-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pipe-meta { margin-left: auto; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

.kcol2 .kcol-head { justify-content: flex-start; gap: 8px; }
.kl-total { margin-left: auto; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.kcol-empty { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 26px 14px; color: var(--muted); }
.kcol-empty .e-ic { width: 40px; height: 40px; border-radius: 12px; display: grid;
  place-items: center; background: var(--soft-2); color: var(--muted-2); margin-bottom: 2px; }
.kcol-empty .e-ic .ic { width: 19px; height: 19px; }
.kcol-empty b { font-size: 13px; color: var(--ink-2); }
.kcol-empty p { font-size: 12px; margin: 0 0 6px; }

/* rich card */
.kc2 { padding: 0 0 11px; overflow: hidden; }
.kc2-photo { position: relative; aspect-ratio: 16 / 8.5; background: var(--soft-2); }
.kc2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc2-photo .ph-stripe { position: absolute; inset: 0; }

/* Shared image reveal (pipeline cards + gallery cells). The gray cell reads as a
   skeleton until the photo decodes, then the image appears. .is-loaded is added by
   core.js on load / already-complete / error / a 5s timeout (that JS timeout is the
   safety net, so an image is never left an invisible skeleton). Reveal is a DISCRETE
   opacity flip, not a transition/animation: time-based reveals get throttled in
   backgrounded/headless tabs and can stick at opacity:0 — a discrete flip can't. */
.img-rv { opacity: 0; }
.img-rv.is-loaded { opacity: 1; }
.kc2-badge, .kc2-dom { position: absolute; top: 8px; border-radius: 7px; padding: 2.5px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(13, 13, 13, .66); color: #fff; backdrop-filter: blur(5px); }
.kc2-badge { left: 8px; }
.kc2-badge.amber { background: var(--amber); }
.kc2-badge.red { background: var(--red); }
.kc2-badge.blue { background: var(--blue); }
.kc2-dom { right: 8px; font-variant-numeric: tabular-nums; }
.kc2-dom.warn { background: var(--amber); }
.kc2-dom.hot { background: var(--red); }
.kc2-head { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px 0; }
.kc2-t { flex: 1; min-width: 0; }
.kc2-t .kc-sub { margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score.s-hot { background: var(--green-soft); color: var(--green); }
.score.s-cool { background: var(--soft); color: var(--muted); }
.kc2-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px 0; }
.kc2-money > div { background: var(--soft); border-radius: 9px; padding: 6px 8px; min-width: 0; }
.kc2-money span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-2); margin-bottom: 1px; }
.kc2-money b { font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kc2-money .mao b { color: var(--green); }
.kc2-money a { font-size: 11px; color: var(--primary-ink); font-weight: 650; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.kc2-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 0; min-height: 28px; }
.kc2-stage { font-size: 11.5px; color: var(--muted); display: inline-flex; gap: 5px;
  align-items: center; font-variant-numeric: tabular-nums; }
.kc2-stage .ic { width: 13px; height: 13px; }
.kc2-stage.warn { color: var(--amber); font-weight: 650; }
.kc2-acts { display: flex; gap: 6px; margin-left: auto; opacity: 0; transition: opacity .14s var(--ease); }
.kc2:hover .kc2-acts, .kc2:focus-within .kc2-acts { opacity: 1; }
.kact { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); display: grid; place-items: center;
  cursor: pointer; padding: 0; }
.kact .ic { width: 15px; height: 15px; }
.kact:hover { color: var(--ink); border-color: var(--muted-2); }
.kact.danger:hover { color: var(--red); background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }

/* drag visuals */
.kc2-origin { opacity: .38; border-style: dashed; }
.drop-slot { height: 58px; border: 2px dashed var(--primary); border-radius: 12px;
  background: var(--primary-soft); margin-bottom: 10px; }
.toast .t-undo { border: 0; background: rgba(255, 255, 255, .16); color: #fff;
  border-radius: var(--r-pill); padding: 4px 12px; font-weight: 700; font-size: 12.5px;
  cursor: pointer; pointer-events: auto; font-family: inherit; margin-left: 4px; }

/* mobile pipeline controls */
.pipe-mseg { display: flex; width: 100%; }
.pipe-mseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 40px; }
.pipe-mseg .cnt { background: var(--soft-2); border-radius: var(--r-pill); padding: 1px 7px;
  font-size: 10.5px; font-weight: 700; }
.pipe-mseg button[aria-pressed="true"] .cnt { background: var(--primary-soft); color: var(--primary-ink); }
.pipe-mtotal { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pipe-dropbars { display: flex; gap: 8px; }
.dropbar { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 13px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--panel);
  font-weight: 700; font-size: 12.5px; color: var(--muted); }
.dropbar .ic { width: 14px; height: 14px; }
.dropbar.is-droptarget { border-color: var(--primary); background: var(--primary-soft);
  color: var(--primary-ink); }
.pipe-drophint { text-align: center; font-size: 11.5px; color: var(--muted-2); }

/* Touch grab: 'manipulation' keeps page scroll working on a short press but drops
   the 300ms tap delay / double-tap-zoom that fights the long-press grab. Once a
   drag arms, JS sets touch-action:none on the card so scrolling can't hijack it. */
.kc2 { touch-action: manipulation; }
/* Live drop bars raised the moment a touch-drag lifts — big, thumb-reachable
   targets pinned to the top of the screen, above the dragged ghost. */
.pipe-dropbars-live { position: fixed; left: 12px; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 9998;
  display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.pipe-dropbars-live .pipe-dropbars { pointer-events: none; }
.pipe-dropbars-live .dropbar { pointer-events: auto; min-height: 52px;
  box-shadow: var(--shadow-lg); }
.pipe-dropbars-live .pipe-drophint { background: rgba(13, 13, 13, .72); color: #fff;
  border-radius: var(--r-pill); padding: 5px 12px; align-self: center; backdrop-filter: blur(5px); }

.mv-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink);
  text-decoration: none; text-align: left; }
.mv-row .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.mv-row.cur { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.mv-row.cur .ic { color: var(--primary-ink); }
.mv-row.danger { color: var(--red); }
.mv-row.danger .ic { color: var(--red); }

/* responsive wiring (implementer): one DOM, CSS picks desktop board vs single-stage
   mobile lane. Mobile-only controls are hidden on desktop; on phones the desktop
   filter bar yields to the segmented stage switcher + the active lane only. */
.pipe-mseg, .pipe-mtotal { display: none; }
@media (max-width: 860px) {
  .pipe-bar { display: none; }
  .pipe-mseg { display: flex; }
  .pipe-mtotal { display: block; }
  .kanban { grid-auto-flow: row; grid-auto-columns: auto; }
  .kanban .kcol2:not(.m-active) { display: none; }
  .kc2-acts { opacity: 1; }
  .kact { width: 34px; height: 34px; }
}
/* PIPELINE V2 — end */

/* ===================================================================== */
/* GALLERY (shared photo component) — gallery.js. Appended block; tokens  */
/* only. "Gallery v2 (shared)" verbatim from the handoff + a responsive   */
/* rule so the grid collapses to the mobile layout without a JS branch.   */
/* ===================================================================== */

/* ---------- Gallery v2 (shared component) ---------- */
.gal2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.g2-cell { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft-2); display: block; cursor: zoom-in; }
.g2-cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s var(--ease); }
.g2-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g2-cell:hover img { transform: scale(1.04); }
.g2-cell.hero { grid-column: span 2; grid-row: span 2; }
.g2-cell .gal-tag { position: absolute; bottom: 10px; left: 10px; }
.g2-more { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(13, 13, 13, .52); color: #fff; font-size: 17px; font-weight: 750;
  backdrop-filter: blur(2px); }
.g2-up { aspect-ratio: 4 / 3; }
.gal2.m { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gal2.m .g2-cell { border-radius: 10px; }
.skel-cell { background: linear-gradient(90deg, var(--soft) 25%, var(--soft-2) 50%, var(--soft) 75%);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; border: 0; }
@media (prefers-reduced-motion: reduce) { .skel-cell { animation: none; } }

/* lightbox */
.glb { position: fixed; inset: 0; z-index: 120; background: rgba(13, 13, 13, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.glb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center;
  gap: 14px; padding: 16px 18px; color: #fff; }
.glb-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); padding: 4px 12px; }
.glb-cap { font-size: 13px; color: rgba(255, 255, 255, .72); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glb-x { background: rgba(255, 255, 255, .12); color: #fff; }
.glb-x:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.glb-img { max-width: min(86vw, 1280px); max-height: 72vh; border-radius: 10px;
  box-shadow: var(--shadow-lg); object-fit: contain; }
.glb-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; }
.glb-arr:hover { background: rgba(255, 255, 255, .24); }
.glb-arr .ic { width: 20px; height: 20px; }
.glb-arr.prev { left: 26px; }
.glb-arr.next { right: 26px; }
.glb-thumbs { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; padding: 7px; background: rgba(255, 255, 255, .08);
  border-radius: 14px; max-width: 86vw; overflow-x: auto; }
.glb-th { width: 52px; height: 38px; border-radius: 8px; overflow: hidden; border: 2px solid transparent;
  padding: 0; background: none; cursor: pointer; flex: none; opacity: .55; transition: all .14s; }
.glb-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glb-th.cur { border-color: #fff; opacity: 1; }
.glb-th:hover { opacity: 1; }

/* mobile lightbox */
.glb.m { justify-content: center; }
.glb.m .glb-img { max-width: 100vw; max-height: 76vh; border-radius: 0; }
.glb-grab { position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .35); }
.glb.m .glb-top { top: 14px; justify-content: center; }
.glb.m .glb-cap { flex: none; }
.glb-hint { position: absolute; bottom: 52px; left: 0; right: 0; text-align: center;
  font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.glb-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; }
.glb-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.glb-dots i.cur { background: #fff; }

/* responsive: collapse the desktop grid to the mobile layout (the JS doesn't
   branch on viewport for the grid, so this mirrors the .gal2.m rules above). */
@media (max-width: 640px) {
  .gal2 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .gal2 .g2-cell { border-radius: 10px; }
}
/* ---------- end Gallery (shared) ---------- */

/* ---------- Prospects Dashboard v2 ---------- */
.dq-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dq-warn { color: var(--amber); font-weight: 650; }
.dq-next { flex: none; text-align: right; max-width: 220px; min-width: 0; }
.dq-next-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.dq-acts { flex: none; }
/* The triage actions reuse .kc2-acts (opacity:0 + ≤860px always-on) but live on a
   .dq-row, not a .kc2 — so the Pipeline reveal rule doesn't reach them. Reveal on
   row hover/focus here; the ≤860px .kc2-acts rule still forces them visible. */
.dq-row:hover .dq-acts, .dq-row:focus-within .dq-acts { opacity: 1; }
.fl-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 0 var(--pad) var(--pad); }
.fl-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--panel); cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.fl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fl-photo { position: relative; aspect-ratio: 16 / 7; background: var(--soft-2); }
.fl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-photo .ph-stripe { position: absolute; inset: 0; }
.fl-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.fl-acts { display: flex; gap: 7px; }
@media (max-width: 860px) { .fl-strip { grid-template-columns: 1fr; } }

/* =====================================================================
   Rail v5 (canonical sidebar) — branch claude/design-rail
   Fixed dark rail; collapsed 68px, expands on hover/focus/.pin (overlay, no
   reflow). Tokens are theme-invariant (rail is dark in both modes); the active
   item maps to --primary* so the warm accent re-skins it automatically. The
   .rail.demo / mock-only classes from the handoff are intentionally NOT shipped.
   ===================================================================== */
:root { --rail-bg: #161129; --rail-bg-2: #1f1840; --rail-ink: #eceaf6;
  --rail-muted: #9a93b8; --rail-line: rgba(255, 255, 255, .09);
  --rail-w: 68px; --rail-x: 268px; }

.rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: var(--rail-w);
  background: var(--rail-bg); color: var(--rail-ink); display: flex; flex-direction: column;
  overflow: hidden; transition: width .22s var(--ease), box-shadow .22s var(--ease); }
.rail:hover, .rail:focus-within, .rail.pin { width: var(--rail-x); box-shadow: var(--shadow-lg); }

/* labels/chrome that only exist expanded */
.rail .rl, .rail .rc, .rail-brand, .rail-add, .rail .rf-body, .rail .ru-body,
.rail .rail-cap, .rail .rsw { opacity: 0; transition: opacity .16s var(--ease) .04s; }
.rail:hover .rl, .rail.pin .rl, .rail:focus-within .rl, .rail:hover .rc, .rail.pin .rc, .rail:focus-within .rc,
.rail:hover .rail-brand, .rail.pin .rail-brand, .rail:focus-within .rail-brand,
.rail:hover .rail-add, .rail.pin .rail-add, .rail:focus-within .rail-add,
.rail:hover .rf-body, .rail.pin .rf-body, .rail:focus-within .rf-body,
.rail:hover .ru-body, .rail.pin .ru-body, .rail:focus-within .ru-body,
.rail:hover .rail-cap, .rail.pin .rail-cap, .rail:focus-within .rail-cap,
.rail:hover .rsw, .rail.pin .rsw, .rail:focus-within .rsw { opacity: 1; }

.rail-head { display: flex; align-items: center; gap: 10px; padding: 14px;
  border-bottom: 1px solid var(--rail-line); min-height: 64px; }
.rail-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.rail-mark svg { width: 24px; height: 24px; fill: var(--rail-ink); }
.rail-brand { flex: 1; min-width: 0; line-height: 1.2; white-space: nowrap; }
.rail-brand b { display: block; font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; }
.rail-brand span { font-size: 10.5px; color: var(--rail-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; }
.rail-add { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rail-line);
  background: var(--rail-bg-2); color: var(--rail-ink); display: grid; place-items: center;
  cursor: pointer; flex: none; padding: 0; }
.rail-add .ic { width: 15px; height: 15px; }
.rail-add:hover { background: var(--primary); border-color: var(--primary); }

.rail-nav { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.rail-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 0 13px; border: 0; border-radius: 12px; background: none; color: var(--rail-muted);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .14s, color .14s; }
.rail-item .ic { width: 19px; height: 19px; flex: none; }
.rail-item .rl { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-item:hover { background: var(--rail-bg-2); color: var(--rail-ink); }
.rail-item.on { background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; box-shadow: 0 6px 18px var(--primary-ring); }
.rail-item .rc { flex: none; background: rgba(255, 255, 255, .14); border-radius: var(--r-pill);
  padding: 1.5px 8px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rail-item.on .rc { background: rgba(255, 255, 255, .22); }

.rail-flips { padding: 6px 10px; border-top: 1px solid var(--rail-line); margin-top: auto;
  display: flex; flex-direction: column; gap: 3px; }
.rail-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--rail-muted); padding: 8px 13px 5px; white-space: nowrap; }
.rail-flip { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px;
  border: 0; border-radius: 12px; background: none; color: var(--rail-ink); font: inherit;
  cursor: pointer; white-space: nowrap; transition: background .14s; }
.rail-flip:hover { background: var(--rail-bg-2); }
.rail-flip.on { background: var(--rail-bg-2); box-shadow: inset 0 0 0 1px var(--rail-line); }
.rf-ph { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--rail-bg-2); }
.rf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.rf-body b { font-size: 12.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rf-chip { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: var(--r-pill); padding: 2px 8px; background: rgba(255, 255, 255, .1); color: var(--rail-muted); }
.rf-chip.amber { background: color-mix(in srgb, var(--amber) 28%, transparent); color: #f4c87e; }
.rf-chip.blue { background: color-mix(in srgb, var(--blue) 32%, transparent); color: #9cc4e4; }
.rf-chip.green { background: color-mix(in srgb, var(--green) 30%, transparent); color: #93d9bd; }
.rail-all { min-height: 40px; }

.rail-foot { padding: 8px 10px 12px; border-top: 1px solid var(--rail-line);
  display: flex; flex-direction: column; gap: 3px; }
.rsw { width: 32px; height: 18px; border-radius: var(--r-pill); background: var(--rail-bg-2);
  border: 1px solid var(--rail-line); position: relative; flex: none; }
.rsw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rail-muted); transition: left .16s var(--ease), background .16s; }
[role="switch"][aria-checked="true"] .rsw i { left: 16px; background: var(--primary-2); }
.rail-user { display: flex; align-items: center; gap: 11px; padding: 9px 7px 4px; white-space: nowrap; }
.rail-user .avatar { width: 32px; height: 32px; flex: none; border: 1px solid var(--rail-line); }
.ru-body { flex: 1; min-width: 0; line-height: 1.25; }
.ru-body b { display: block; font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.ru-body span { font-size: 11px; color: var(--rail-muted); }
/* Rail v5 — end */

/* ===================================================================== */
/* OWNED CORE (Overview A + Projects B) — renderOwnedOverview /           */
/* renderProjects. Appended block, tokens only. The sidebar is now the    */
/* Rail v5 block above; the sidebar-B .nav-item.active edit was reverted  */
/* per the rail handoff. .proj-row ledger variant skipped                 */
/* (rejected direction). Keep additions inside this marked block.         */
/* ===================================================================== */

/* ---------- Overview A: flip strips ---------- */
.flip-strip { display: flex; align-items: center; gap: 18px; width: 100%;
  padding: var(--pad); border: 0; border-top: 1px solid var(--line-2);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background .12s; }
.flip-strip:first-of-type { border-top: 0; }
.flip-strip:hover { background: var(--soft); }
.fs-photo { width: 168px; height: 116px; border-radius: 12px; overflow: hidden;
  flex: none; background: var(--soft-2); }
.fs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.fs-top { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.fs-addr { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.fs-loc { font-size: 12.5px; color: var(--muted); }
.fs-budget .pl { display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--muted); margin-bottom: 5px; }
.fs-budget .pl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fs-next { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500;
  color: var(--primary-ink); min-width: 0; }
.fs-next .ic { width: 15px; height: 15px; flex: none; }
.fs-next span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  padding-left: 6px; }
.fs-profit { font-size: 20px; font-weight: 750; color: var(--green);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fs-right .r-sub { margin-top: -5px; }
.fs-chips { display: flex; gap: 6px; }
.flip-strip > .ic:last-child { color: var(--muted-2); }

/* compact milestone track inside strips/cards */
.miles.mini { margin: 0; max-width: 460px; }
.miles.mini .mdot { width: 13px; height: 13px; margin-bottom: 5px; }
.miles.mini .mile::before { top: 6px; }
.miles.mini .mname { font-size: 10.5px; }
.miles.mini .mdate { display: none; }
.miles.mini .mile.now .mdot { box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---------- Projects: refined card ---------- */
.proj-card .days-chip { position: absolute; bottom: 10px; right: 10px;
  background: rgba(13, 13, 13, .72); color: #fff; border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 11px; font-weight: 600; display: inline-flex;
  align-items: center; gap: 5px; backdrop-filter: blur(6px); }
.proj-card .days-chip .ic { width: 13px; height: 13px; }
.proj-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-foot { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 12px;
  border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); min-width: 0; }
.proj-foot .ic { width: 15px; height: 15px; flex: none; color: var(--primary); }
.proj-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-card .miles.mini { max-width: none; margin-top: 13px; }

/* responsive: stack the dense flip strip so it doesn't overflow on phones
   (the handoff strip is desktop-first; this keeps it usable at ~375px). */
@media (max-width: 640px) {
  .flip-strip { flex-wrap: wrap; gap: 12px; }
  .fs-photo { width: 96px; height: 72px; }
  .fs-right { flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; padding-left: 0; }
  .fs-right .r-sub { margin-top: 0; }
  .flip-strip > .ic:last-child { display: none; }
}
/* ---------- end Owned core ---------- */

/* ===================================================================== */
/* PROJECT WORKSPACE v2 — renderWorkspace hero strip + Overview tab.      */
/* Appended block, tokens only. Reuses .miles.mini (owned-core) and       */
/* .gal2 (gallery) — both already in this file, not re-declared here.     */
/* ===================================================================== */
.ws2-strip { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; max-width: 560px; }
.ws2-budget .pl { display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--muted); margin-bottom: 5px; }
.ws2-budget .pl b { color: var(--ink); font-variant-numeric: tabular-nums; }

.ws2-tabs { overflow-x: auto; scrollbar-width: none; }
.ws2-tabs::-webkit-scrollbar { display: none; }
.ws2-tabs .tab { flex: none; }

.ws2-next { display: flex; align-items: center; gap: 12px; padding: 13px var(--pad);
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--r-panel); }
.ws2-next > .ic { width: 18px; height: 18px; color: var(--primary-ink); flex: none; }
.ws2-next div { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ws2-next b { font-size: 13.5px; flex: none; }
.ws2-next span { font-size: 13px; color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .ws2-next div { flex-direction: column; gap: 1px; }
  .ws2-next span { white-space: normal; } }

.ws2-phase { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.wp-name { width: 168px; flex: none; font-size: 13px; font-weight: 600; }
.ws2-phase .progress { flex: 1; }
.wp-n { width: 36px; flex: none; text-align: right; font-size: 12px; color: var(--muted); }

.ws2-phasehead { display: flex; align-items: center; gap: 12px; padding: 13px var(--pad);
  border-bottom: 1px solid var(--line-2); }
.ws2-phasehead b { font-size: 13.5px; flex: none; }
.ws2-phasehead .progress { flex: 1; }
/* ---------- end Project workspace v2 ---------- */

/* =====================================================================
   Converged Properties area (prop2) — branch claude/design-properties
   One screen, three views (pipeline / list / grid) + prominent search +
   filter chips. Token-pure. Pipeline kanban CSS is reused untouched.
   ===================================================================== */
.p2-top { display: flex; align-items: center; gap: 12px; }
.p2-search { flex: 1; display: flex; align-items: center; gap: 11px; min-height: 48px;
  padding: 0 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; transition: border-color .14s, box-shadow .14s; }
.p2-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.p2-search .ic { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.p2-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 14.5px;
  color: var(--ink); outline: none; min-width: 0; }
.p2-search input::placeholder { color: var(--muted-2); }
.p2-kbd { flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  color: var(--muted-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
  background: var(--soft); }
.p2-search.m { min-height: 44px; }

.p2-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); border-radius: var(--r-pill);
  padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .14s var(--ease); }
.fchip .ic { width: 13px; height: 13px; color: var(--muted-2); transform: rotate(90deg); }
.fchip:hover { border-color: var(--muted-2); }
.fchip[aria-pressed="true"] { background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); color: var(--primary-ink); }
.fchip[aria-pressed="true"] .ic { color: var(--primary-ink); }
.fchip b { font-weight: 750; }
.fchip.clear { border-style: dashed; color: var(--muted); }
.fchip.clear .ic { transform: none; }
.p2-filters .pipe-meta { margin-left: auto; }

.p2-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.p2-mrow { display: flex; align-items: center; gap: 9px; }
.p2-mfilters { display: none; } /* mobile-only Filters button */

/* list rows */
.pr2 { width: 100%; background: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer; border-left: 0; border-right: 0; border-bottom: 0; }
.pr2-photo { width: 76px; height: 54px; border-radius: 9px; flex: none; overflow: hidden; }
.pr2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr2-money { display: flex; gap: 14px; flex: none; }
.pr2-money > div { min-width: 56px; text-align: right; }
.pr2-money span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-2); margin-bottom: 1px; }
.pr2-money b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pr2-money b.pos { color: var(--green); }
.pr2-acts { display: flex; gap: 6px; flex: none; opacity: 0; transition: opacity .14s var(--ease); }
.pr2:hover .pr2-acts, .pr2:focus-within .pr2-acts { opacity: 1; }
.pr2 .r-main { min-width: 0; }
.pr2 .r-title, .pr2 .r-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* filter chip popover (desktop, anchored) */
.fpop { position: fixed; z-index: 90; min-width: 184px; max-width: 240px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.fpop-opt { display: flex; align-items: center; width: 100%; text-align: left; border: 0;
  background: none; font: inherit; font-size: 13px; color: var(--ink-2); padding: 8px 10px;
  border-radius: 8px; cursor: pointer; }
.fpop-opt:hover { background: var(--soft); }
.fpop-opt.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }

@media (max-width: 860px) {
  /* Mobile: icon-only view subseg + a Filters button that opens the sheet; the
     desktop filter chips + sort subseg fold into that sheet. */
  .p2-top { flex-wrap: wrap; }
  .p2-vlabel { display: none; }
  .p2-filters .fchip, .p2-filters .p2-sort { display: none; }
  .p2-mfilters { display: inline-flex; }
  .pr2-money, .pr2-acts { display: none; }
  .pr2-photo { width: 60px; height: 46px; }
}
/* Converged Properties — end */

/* ---------- Offer Calculator v2 ---------- */
.calc-hint { display: block; font-style: normal; font-size: 11px; color: var(--muted-2);
  margin-top: 4px; }
.calc-facts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

.cw-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.cw-l { width: 158px; flex: none; font-size: 12.5px; color: var(--muted); }
.cw-row.wf-arv .cw-l, .cw-row.wf-profit .cw-l { color: var(--ink); font-weight: 650; }
.cw-track { flex: 1; height: 12px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; }
.cw-track i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--soft-2); }
.cw-row.wf-arv .cw-track i { background: var(--primary); }
.cw-row.wf-profit .cw-track i { background: var(--green); }
.cw-row:not(.wf-arv):not(.wf-profit) .cw-track i { background: color-mix(in srgb, var(--red) 38%, var(--soft-2)); }
.cw-v { width: 92px; flex: none; text-align: right; font-size: 13px; }
.cw-row.wf-profit { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 12px; }
.cw-row.wf-profit .cw-v { color: var(--green); font-size: 14.5px; }

.sens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sens-cell { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sens-cell span { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted-2); }
.sens-cell b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.sens-cell em { font-style: normal; font-size: 11px; color: var(--muted); }
.sens-cell.bad { border-color: color-mix(in srgb, var(--red) 35%, var(--line));
  background: var(--red-soft); }
.sens-cell.bad b { color: var(--red); }
@media (max-width: 860px) { .sens-grid { grid-template-columns: repeat(2, 1fr); } }

.calc-stickybar { display: none; }
.cs-num { flex: none; }
.cs-num span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted-2); }
.cs-num b { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; }
.calc-stickybar .btn { min-height: 46px; }
/* The sticky results bar is a mobile affordance only; the desktop split already
   shows MAO + profit in the right rail. At ≤860px it pins to the bottom and sits
   ABOVE the botnav (both fixed z-60; botnav ≈ 58px + safe-area, paints later in
   DOM order — offset rather than fight z-index), and the calc view gets bottom
   padding to clear both bars. Suppressed while a sheet is open. */
@media (max-width: 860px) {
  .calc-stickybar { position: fixed; left: 0; right: 0; width: 100%; box-sizing: border-box; z-index: 60;
    display: flex; align-items: center; gap: 12px; min-width: 0;
    bottom: calc(58px + env(safe-area-inset-bottom)); padding: 11px 14px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  /* the action button must be allowed to shrink (min-width defaults to content),
     otherwise MAO + Profit + button can exceed the viewport and add a sliver of
     horizontal scroll. */
  .calc-stickybar .btn { flex: 1 1 0; min-width: 0; }
  .calc-view { padding-bottom: 168px; }
}
@media (max-width: 380px) {
  .calc-stickybar { gap: 8px; padding: 10px 12px; }
  .calc-stickybar .cs-num b { font-size: 16px; }
}
/* guard: nothing on a page should be able to push horizontal scroll on mobile */
@media (max-width: 860px) { .main { overflow-x: clip; } }
body:has(#sheet.show) .calc-stickybar { display: none; }

/* ===================================================================== */
/* PROSPECTS MISC (Passed / Files / Chat polish) — renderPassed /        */
/* renderFiles('prospects') / renderTeamChat. Appended block, tokens     */
/* only. .chip/.chip-row/.score.s-cool already exist; not re-declared.    */
/* ===================================================================== */

/* ---------- Passed / Files / Chat polish ---------- */
.pa-photo { width: 76px; height: 54px; border-radius: 9px; flex: none; filter: saturate(.55); }
.pa-row .r-title { color: var(--ink-2); }
.pa-row .r-title, .pa-row .r-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-row .r-main { min-width: 0; }
.pa-acts { display: flex; gap: 7px; flex: none; }
@media (max-width: 860px) { .pa-acts .btn.ghost { display: none; } .pa-photo { width: 60px; height: 46px; } }

.chat2-grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--gap);
  align-items: start; }
.chat2-main { display: flex; flex-direction: column; }
.chat2-main .chat-feed { min-height: 380px; }
@media (max-width: 1020px) { .chat2-grid { grid-template-columns: 1fr; } }

.chat-day { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.chat-day span { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted-2); }

.msg-prop { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  font: inherit; text-align: left; cursor: pointer; max-width: 380px; width: 100%;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.msg-prop:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mp-photo { width: 58px; height: 42px; border-radius: 8px; overflow: hidden; flex: none;
  background: var(--soft-2); position: relative; }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-photo .ph-stripe { position: absolute; inset: 0; font-size: 8px; }
.mp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-body b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.mp-body span { font-size: 11.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.msg-prop > .ic { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.msg.me .msg-prop { background: var(--panel); color: var(--ink); }

.chip-cnt { display: inline-block; background: var(--primary); color: #fff;
  border-radius: var(--r-pill); padding: 0 6px; font-size: 10px; margin-left: 4px; }
/* ---------- end Prospects misc ---------- */

/* =====================================================================
   Mobile rail = drawer (branch claude/rail-mobile-fix)
   Authoritative mobile rail rules. Placed AFTER the "Rail v5" base block on
   purpose: the base `.rail` (width:var(--rail-w); transition:width) and the
   desktop hover/focus width-expand have equal specificity, so by source order
   they were overriding the earlier @media drawer rules — the mobile drawer
   opened as a 68px icon strip with hidden labels, the open/close snapped (the
   transition was on width, not transform), and a touch could trigger the
   width hover-expand. Re-asserting here lets the drawer win. Desktop (>860px,
   hover-capable) is untouched, so its rail behavior is byte-identical. */
@media (max-width: 860px) {
  .rail {
    width: var(--rail-x); max-width: 86vw;
    transform: translateX(-100%);          /* parked off-screen by default (no flash) */
    transition: transform .26s var(--ease); /* slide in/out — not the base width-snap */
    box-shadow: var(--shadow-lg);
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .app.nav-open .rail { transform: none; } /* burger / veil tap opens it */
  /* The drawer is already full width — hover/focus/pin must NOT change it (a tap
     on a touch device can leave a sticky :hover). Width stays --rail-x; only the
     transform animates. */
  .rail:hover, .rail:focus-within, .rail.pin { width: var(--rail-x); box-shadow: var(--shadow-lg); }
  /* Full-width drawer: always show labels + chrome (override the base opacity:0). */
  .rail .rl, .rail .rc, .rail-brand, .rail-add, .rail .rf-body, .rail .ru-body,
  .rail .rail-cap, .rail .rsw { opacity: 1; }
  .main { margin-left: 0; }
}
/* Touch / no-hover devices wider than the drawer breakpoint (e.g. a touch laptop or
   tablet in landscape): never width-expand the rail from a sticky :hover or focus —
   it stays the collapsed icon rail and only .pin expands it. Mouse desktops, which
   report hover:hover, keep the hover-expand exactly as shipped. */
@media (hover: none) and (min-width: 861px) {
  .rail:hover, .rail:focus-within { width: var(--rail-w); }
}

/* =====================================================================
   V5 calendar (month grid + agenda) — Calendar view
   Faithful port of the V7.1 example (V71b/v7/css/parts.css). Cells are white
   cards (var(--card)) with small, DISTINCT tinted event pills (.cg-i). The
   bottom selected-day list (.cal-day-panel) is our one intentional deviation
   and is retained below the grid; the example's viewport-fill rules are NOT
   ported (we give .calgrid a fixed uniform row height so the list still shows).
   ===================================================================== */
/* ---- calendar (month grid) ---- */
.cg-w { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 16px 16px 8px; }
.cg-w .lab { text-align: center; color: var(--ink2); }
/* DEVIATION: fixed uniform row height (example cell proportions) instead of the
   example's viewport-fill `.calgrid{flex:1;grid-auto-rows:minmax(0,1fr)}` so the
   hybrid bottom events list keeps showing below the grid and the page scrolls. */
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 136px; gap: 6px; padding: 0 16px 16px; }
.cg-d { min-height: 0; border: 1px solid var(--hair2); border-radius: 12px; padding: 7px 7px 6px; min-width: 0;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; align-items: stretch; cursor: pointer; background: var(--card);
  transition: background .12s, border-color .12s, box-shadow .12s; }
.cg-d:hover { background: var(--paper); }
:root[data-theme="dark"] .cg-d:hover { background: rgba(255, 255, 255, .04); }
.cg-d.off { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }
.cg-d.dropping { border-color: var(--brand); box-shadow: 0 0 0 2.5px var(--brand-ring); }
.cg-n { font: 600 11.5px/1 var(--f-mono); color: var(--ink2); background: var(--paper); border: 1px solid var(--hair2);
  border-radius: 99px; width: 21px; height: 21px; display: grid; place-items: center; padding: 0; align-self: flex-end; }
:root[data-theme="dark"] .cg-n { background: rgba(255,255,255,.06); }
.cg-d.today .cg-n { color: #fff; background: var(--brand); border-color: transparent; border-radius: 99px; width: 21px; height: 21px; display: grid; place-items: center; padding: 0; }
.cg-d.sel:not(.today) .cg-n { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-ink); }
.cg-d.today.sel .cg-n { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.cg-i { display: flex; align-items: center; gap: 5px; min-width: 0; width: 100%; text-align: left;
  font-size: 11.5px; font-weight: 600; padding: 3.5px 6px; border-radius: 7px; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--pc) 12%, transparent); }
.cg-i:active { transform: scale(.96); transition: transform .08s var(--ease); }
.cg-i .ic { width: 12px; height: 12px; color: var(--pc); flex: none; }
.cg-i .cg-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.cg-i .cg-tm { font: 600 9.5px/1 var(--f-mono); color: var(--mut); flex: none; }
.cg-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--pc, var(--mut)); flex: none; display: inline-block; }
.cg-i.fin { opacity: .5; }
.cg-i.fin .cg-t { text-decoration: line-through; }
.cg-i.late .cg-t { color: var(--bad); }
.cg-more { font-size: 11px; font-weight: 700; color: var(--mut); text-align: left; padding: 1px 6px; background: none; border: 0; cursor: pointer; }
.cg-more:hover { color: var(--ink); }

/* Selected-day detail panel (events listed below the grid, iOS-style). */
.cal-day-panel { border-top: 1px solid var(--line); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
.cal-day-head h3 { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.cal-day-head .muted { font-size: 12.5px; }
.cal-ev { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 16px; border: 0; border-top: 1px solid var(--line-2); background: none; cursor: default; }
.cal-ev:first-of-type { border-top: 0; }
.cal-ev-bar { width: 4px; align-self: stretch; min-height: 30px; border-radius: 99px; flex: none; }
.cal-ev-flag { display: grid; place-items: center; flex: none; }
.cal-ev-flag .ic { width: 16px; height: 16px; }
.cal-ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-ev-title { font-size: 14px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-when { flex: none; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.cal-ev-when.amt { font-weight: 750; color: var(--red); font-size: 13.5px; }
.cal-ev-when.late { color: var(--red); font-weight: 650; }
.cal-ev-when.mile { color: #c79100; font-weight: 650; }
.cal-ev.fin .cal-ev-title { text-decoration: line-through; opacity: .55; }
.cal-ev-exp { cursor: pointer; }
.cal-ev-exp:hover { background: var(--soft); }
.cal-none { padding: 18px 16px 22px; font-size: 13px; color: var(--muted); }

/* ---- drag-to-reschedule (calendar) ---- */
/* iOS: a long-press on a draggable row must LIFT the task — without these, Safari
   starts the text-selection magnifier instead and the grab never connects.
   'manipulation' also drops the double-tap-zoom delay that fights the press. */
[data-cal-drag], [data-cal-drag] * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-cal-drag] { touch-action: manipulation; }
/* Non-due days of a multi-day span: same property-tinted chip, dimmed, with a
   left rail so the run of days reads as one bar across the grid. */
.cg-i.cg-span { opacity: .62; border-left: 3px solid var(--pc, var(--mut)); border-radius: 3px 6px 6px 3px; }
.cg-i.cg-span .cg-dot { opacity: .55; }
[data-cal-drag] { cursor: grab; }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* Hovered drop day: grid cells reuse the .dropping token (.cg-d.dropping is
   defined with the grid); agenda day headers get the same treatment. */
.ag-day.dropping { background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 12px; }
.kanban-ghost.cal-ghost { opacity: .95; }
/* The drag GRIP — the reliable touch handle. touch-action:none means a touch
   starting here can never become a page scroll, so the engine lifts the task
   instantly (no long-press race, no "screen moves instead" fights). Shown on
   coarse (touch) pointers; mouse users drag anywhere on the row. */
.cal-grip { display: none; place-items: center; width: 42px; height: 42px; margin: -4px -8px -4px 0;
  border: 0; background: none; color: var(--muted-2); border-radius: 10px; flex: none;
  touch-action: none; cursor: grab; padding: 0; }
.cal-grip .ic { width: 17px; height: 17px; }
.cal-grip:active { background: var(--soft); color: var(--ink); }
@media (pointer: coarse) { .cal-grip { display: grid; } }
.lrow.ag-row .cal-grip { margin: -4px 0; }

/* ---- gantt view (tasks as bars spanning start → due across the month) ---- */
/* Its own scroll box on BOTH axes so the day header can freeze (sticky top)
   while rows scroll, and the label column freezes (sticky left) while the
   timeline pans. The corner cell pins both ways. */
.gantt-wrap { overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; max-height: min(64vh, 560px); }
.gantt { position: relative; min-width: max-content; --gw: 30px; --glw: 148px; padding: 6px 10px 10px; }
.g-row { display: flex; align-items: stretch; }
.g-hd { position: sticky; top: 0; z-index: 3; background: var(--panel); }
.g-hd .g-lab { z-index: 4; }
.g-lab { width: var(--glw); flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  position: sticky; left: 0; background: var(--panel); z-index: 2; min-width: 0; }
.g-lab .checkbox { flex: none; }
.g-t { font-size: 12.5px; font-weight: 650; overflow: hidden; cursor: pointer; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.g-t.fin { text-decoration: line-through; opacity: .55; }
.g-track { display: grid; grid-template-columns: repeat(var(--gd), var(--gw)); align-items: center; min-height: 36px;
  background-image: repeating-linear-gradient(to right, var(--hair2) 0 1px, transparent 1px var(--gw)); }
.g-hd .g-track { background: none; min-height: 30px; }
.g-day { display: grid; place-items: center; font: 700 11px/1 var(--f-mono); color: var(--mut); height: 30px; border-radius: 8px; }
.g-day.wkd { color: var(--muted-2); background: var(--soft); }
.g-day.today span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: var(--brand); color: #fff; }
.g-day.dropping { background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -2px; }
.g-bar { display: flex; align-items: center; height: 24px; min-width: 0; margin: 0; padding: 0 8px; border-radius: 8px; cursor: grab; position: relative;
  background: color-mix(in srgb, var(--pc, var(--mut)) 20%, var(--panel));
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--mut)) 55%, transparent); }
/* Edge handles: stretch/shrink the timeline. touch-action:none = a touch that
   starts on a handle can never scroll — the resize begins instantly. */
.g-rz { position: absolute; top: -7px; bottom: -7px; width: 18px; touch-action: none; cursor: ew-resize; }
.g-rz::after { content: ""; position: absolute; top: 9px; bottom: 9px; width: 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--pc, var(--mut)) 70%, transparent); opacity: .55; }
.g-rz-l { left: -8px; } .g-rz-l::after { left: 7px; }
.g-rz-r { right: -8px; } .g-rz-r::after { right: 7px; }
.g-bar:hover .g-rz::after, body.cal-resizing .g-rz::after { opacity: 1; }
/* Touch: fatter bars and much wider handle hit zones — an iPhone thumb can't
   land on an 18px strip. The visible nub stays slim; only the hitbox grows. */
@media (pointer: coarse) {
  .g-bar { height: 30px; }
  .g-track { min-height: 42px; }
  .g-rz { width: 30px; top: -8px; bottom: -8px; }
  .g-rz-l { left: -14px; } .g-rz-l::after { left: 13px; }
  .g-rz-r { right: -14px; } .g-rz-r::after { right: 13px; }
  .g-rz::after { opacity: .9; }
}
body.cal-resizing, body.cal-resizing * { cursor: ew-resize !important; user-select: none; -webkit-user-select: none; }
.g-bt { font-size: 11.5px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar.fin { opacity: .45; }
.g-bar.fin .g-bt { text-decoration: line-through; }
.g-bar.late { border-color: color-mix(in srgb, var(--red) 60%, transparent); }
.g-bar.cut-l { border-left-style: dashed; border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.g-bar.cut-r { border-right-style: dashed; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.g-miles .g-track { min-height: 26px; }
.g-mi { color: #c79100; font-size: 12px; text-align: center; line-height: 1; }
.g-now { position: absolute; top: 40px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 2px; pointer-events: none; z-index: 1; }
.g-none { padding: 22px 12px; font-size: 13px; color: var(--muted); position: sticky; left: 0; max-width: 88vw; }
/* Short bars spill their name into the empty track beside them — every task is
   readable without widening the sticky label column. */
.g-bl { align-self: center; min-width: 0; padding-left: 7px; font-size: 11.5px; font-weight: 650; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.g-bl-l { text-align: right; padding: 0 7px 0 0; }
/* Progress fill: the bar doubles as a status report (done / checklist % / started). */
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px 0 0 6px; pointer-events: none;
  background: color-mix(in srgb, var(--pc, var(--mut)) 30%, transparent); }
.g-bt { position: relative; }
/* Weekend shading down the whole chart. */
.g-we { position: absolute; top: 34px; bottom: 8px; pointer-events: none;
  background: color-mix(in srgb, var(--mut) 7%, transparent); }
/* Phase swimlanes: tap-to-collapse headers with a phase-window bar. */
.g-row.g-ph { cursor: pointer; margin: 8px 0 2px; }
.g-ph .g-lab { gap: 6px; padding-left: 6px; }
.g-ph b { font-size: 12px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ph-n { font: 600 10.5px/1 var(--f-mono); color: var(--mut); flex: none; }
.g-ph-c { display: grid; place-items: center; color: var(--mut); flex: none; }
.g-ph-c .ic { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .15s var(--ease); }
.g-ph.fold .g-ph-c .ic { transform: rotate(0deg); }
.g-ph-track { min-height: 24px; }
.g-ph-span { align-self: center; height: 5px; border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 26%, transparent); }
/* Dependency violation: this task starts before a task it depends on ends. */
.g-bar.g-viol { border-color: var(--red); border-style: dashed; }
/* Dependency arrows (SVG overlay drawn after paint). */
.g-links { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.g-links path { fill: none; stroke: color-mix(in srgb, var(--brand) 50%, transparent); stroke-width: 1.5; }
.g-links path.arrow { fill: color-mix(in srgb, var(--brand) 60%, transparent); stroke: none; }
.g-links path.bad { stroke: var(--red); }
.g-links path.arrow.bad { fill: var(--red); stroke: none; }
/* Move confirmation (the sheet after any reschedule): name the task + change. */
.cal-confirm { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); display: flex; flex-direction: column; gap: 3px; }
.cal-confirm > b { font-size: 15px; line-height: 1.3; }
.cal-confirm > .muted { font-size: 12.5px; }
.cal-confirm-dates { font-size: 14px; margin-top: 4px; }
.cal-confirm-dates.sub { font-size: 12.5px; color: var(--muted); margin-top: 0; }
.cal-arrow { color: var(--muted); padding: 0 2px; }
/* ✕ Cancel drop bar: release here = abort, nothing changes. */
.dropbar.g-cancel { border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); flex: 0 0 auto; min-width: 96px; }
.dropbar.g-cancel.is-droptarget, .dropbar.g-cancel.dropping { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: var(--red); }
/* After a move, pulse the task wherever it landed so the eye can follow. */
@keyframes calMoved { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 45%, transparent); } }
[data-cal-drag].just-moved { animation: calMoved 1.4s var(--ease) 2; }

/* ---- project Updates tab (report feed + KPI tiles) ---- */
.upd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.upd-frame { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--soft); }
.upd-frame iframe { width: 100%; height: 460px; border: 0; display: block; }
.lrow.upd-row { cursor: pointer; }
.lrow.upd-cur { background: var(--primary-soft); }

/* Expense attachments gallery (multiple photos/docs per expense) */
.att-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.att-tile { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); flex: none; }
.att-tile.pending { border-style: dashed; }
.att-open { width: 100%; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.att-open img { width: 100%; height: 100%; object-fit: cover; }
.att-ic { color: var(--muted); display: grid; place-items: center; }
.att-ic .ic { width: 24px; height: 24px; }
.att-rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 99px; border: 0; background: rgba(13,13,13,.6); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.att-rm .ic { width: 13px; height: 13px; }
.att-badge { position: absolute; bottom: 3px; left: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--primary); color: #fff; padding: 1px 5px; border-radius: 99px; }
.att-add { width: 68px; height: 68px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--panel); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; flex: none; font-size: 11px; font-weight: 600; }
.att-add .ic { width: 18px; height: 18px; }
.att-add:hover { color: var(--primary-ink); border-color: var(--primary); }

/* ---- agenda view ---- */
.ag-day { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 22px 9px; border-top: 1px solid var(--hair2); cursor: pointer; background: none; }
.ag-day:first-child { border-top: 0; }
.ag-num { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--paper);
  font: 700 15px/1 var(--f-mono); color: var(--ink2); flex: none; }
:root[data-theme="dark"] .ag-num { background: rgba(255,255,255,.07); }
.ag-num.today { background: var(--brand); color: #fff; }
.ag-t { flex: 1; min-width: 0; }
.ag-t b { display: block; font-size: 14.5px; line-height: 1.25; }
.ag-t span { display: block; font-size: 12px; color: var(--mut); }
.ag-add { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; color: var(--mut); background: var(--paper); flex: none; }
:root[data-theme="dark"] .ag-add { background: rgba(255,255,255,.07); }
.ag-add .ic { width: 15px; height: 15px; }
.ag-day:hover .ag-add { color: var(--brand-ink); }
.ag-row { border-top: 0; padding: 9px 22px 9px 73px; }
.ag-row .chip .ic { width: 14px; height: 14px; }
.ag-row.fin .lr-t { text-decoration: line-through; opacity: .55; }
.ag-none { padding: 2px 22px 10px 73px; font-size: 12.5px; color: var(--mut); }
.ag-cap { display: flex; align-items: center; gap: 8px; padding: 14px 22px 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ag-cap.bad { color: var(--bad); }
.ag-cap .ic { width: 15px; height: 15px; }

/* ---- list/card view toggle switch (.vswitch) — example header control ---- */
.vswitch { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--hair2); cursor: pointer; -webkit-user-select: none; user-select: none; }
:root[data-theme="dark"] .vswitch { background: rgba(255,255,255,.06); }
.vswitch .vs-ic { display: grid; place-items: center; color: var(--mut); transition: color .15s var(--ease); }
.vswitch .vs-ic .ic { width: 16px; height: 16px; }
.vswitch .vs-ic.on { color: var(--ink); }
.vswitch .tog { width: 38px; height: 22px; border-radius: 99px; background: var(--brand); position: relative; flex: none;
  transition: background .18s var(--ease); }
.vswitch .tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
.vswitch[aria-checked="true"] .tog::after { transform: translateX(16px); }
.vswitch:active { transform: scale(.96); transition: transform .08s var(--ease); }

/* ---- round month-nav buttons (.cnav) — example header control ---- */
.cnav { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; flex: none;
  background: var(--card); border: 1px solid var(--hair); box-shadow: var(--lift); color: var(--ink2); cursor: pointer;
  transition: color .13s, border-color .13s, background .13s; }
.cnav:hover { color: var(--brand-ink); border-color: var(--brand); }
:root[data-theme="dark"] .cnav { background: rgba(255,255,255,.07); }
.cnav .ic { width: 15px; height: 15px; }

/* phone: compact month grid (example responsive rules) */
@media (max-width: 700px) {
  .cg-w, .calgrid { gap: 3px; padding-left: 8px; padding-right: 8px; }
  .calgrid { grid-auto-rows: 84px; }
  .cg-d { min-height: 66px; padding: 4px; gap: 3px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .cg-n { width: 100%; }
  .cg-i { width: auto; padding: 3px 4px; border-radius: 99px; }
  .cg-i .cg-t, .cg-i .cg-tm { display: none; }
  .cg-more { width: 100%; padding: 0 2px; font-size: 10px; }
  .ag-row { padding-left: 22px; }
  .ag-none { padding-left: 22px; }
}

/* =====================================================================
   V5 popup components — reusable inside any sheet
   ===================================================================== */
/* hero strip (property context at the top of a sheet) */
.m-hero { display: flex; gap: 13px; align-items: center; background: var(--soft); border-radius: 14px; padding: 11px 12px; }
:root[data-theme="dark"] .m-hero { background: rgba(255,255,255,.06); }
.m-hero img { width: 66px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.m-hero .mh-t { min-width: 0; flex: 1; }
.m-hero .mh-t b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-hero .mh-t span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* pick chips (replaces selects for short option lists) */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .13s var(--ease); cursor: pointer; }
:root[data-theme="dark"] .pick button { background: rgba(255,255,255,.04); }
.pick button:hover { border-color: var(--muted-2); }
.pick button.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }

/* big money input */
.amtbox { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--panel);
  border-radius: 14px; padding: 12px 18px; transition: border-color .15s, box-shadow .15s; }
:root[data-theme="dark"] .amtbox { background: rgba(255,255,255,.05); }
.amtbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-ring); }
.amtbox b { font-size: 23px; font-weight: 650; color: var(--muted-2); }
.amtbox input, .field .amtbox input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: none; color: var(--ink);
  font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding: 0; box-shadow: none !important; }

/* labelled toggle row */
.swrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 15px; cursor: pointer; }
.swrow .sw-t b { display: block; font-size: 14px; }
.swrow .sw-t span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.swrow input { position: absolute; opacity: 0; pointer-events: none; }
.swrow .tog { width: 46px; height: 27px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .18s var(--ease); }
.swrow .tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
.swrow input:checked + .tog { background: var(--primary); }
.swrow input:checked + .tog::after { transform: translateX(19px); }

/* dashed upload target */
.upbox { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  border: 1.8px dashed var(--line); border-radius: 16px; padding: 22px 16px; color: var(--muted);
  background: var(--soft); transition: border-color .15s, background .15s; cursor: pointer; }
:root[data-theme="dark"] .upbox { background: rgba(255,255,255,.04); }
.upbox:hover { border-color: var(--primary); color: var(--primary-ink); }
.upbox .ic { width: 22px; height: 22px; margin-bottom: 3px; }
.upbox b { font-size: 14px; color: var(--ink); }
.upbox:hover b { color: var(--primary-ink); }
.upbox span { font-size: 12px; }

/* anchored popover (Apple Calendar-style) — for future autosave popovers */
.pop { position: fixed; z-index: 140; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.96);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
.pop.up { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.pop-ar { position: absolute; width: 13px; height: 13px; background: var(--panel); transform: rotate(45deg); }

/* V5 search kbd badge */
.search-kbd { font: 600 10px/1 var(--f-mono); color: var(--muted-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; flex: none; }

/* =====================================================================
   V5 mobile parity — bottom-sheet dock, press feedback, safe-area, iOS zoom
   ===================================================================== */
/* phone-size: V5 bottom-sheet modal (docks the sheet to the bottom edge) */
@media (max-width: 620px) {
  .sheet { top: auto; bottom: 0; left: 0; width: 100vw; max-height: 90vh;
    border-radius: 24px 24px 0 0; transform: translateY(8%) scale(1); }
  .sheet.show { transform: none; }
  .sheet-head { border-radius: 24px 24px 0 0; }
  .sheet-foot { padding-bottom: calc(22px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .sheet-foot .btn.primary { flex: 1 1 auto; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 11px; }
  .btn.sm { min-height: 38px; }
}

/* native-app feel */
body { overscroll-behavior-y: none; }
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button, .botnav, .side, .rail, .tabs, .seg, .subseg, .pill, .lab { -webkit-user-select: none; user-select: none; }
@media (hover: none) {
  .btn:active, .botnav button:active, .fab:active, .tab:active, .nav-item:active, .rail-item:active,
  .pill-btn:active, .checkbox:active { transform: scale(.96); transition: transform .08s var(--ease); }
}
/* installed-PWA safe-area top inset */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .side, .rail { padding-top: calc(16px + env(safe-area-inset-top)); }
  .login-screen { padding-top: env(safe-area-inset-top); }
}
/* 16px inputs everywhere ≤740px — stops iOS zoom-on-focus */
@media (max-width: 740px) {
  .input, .field input, .field select, .field textarea, .search input { font-size: 16px; }
}


/* =====================================================================
   V5 home + shared list/card components (vHome 6-section homegrid, .lrow
   lists, .stat tiles, .vswitch list/card toggle). Ported from Flip OS V5.
   ===================================================================== */
.vstack { display: flex; flex-direction: column; gap: 18px; }
.lab { font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* stat tiles */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.stat { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); border: 1px solid var(--line-2); padding: 18px 20px 17px; min-width: 0; }
.stat .s-v { font-size: 31px; font-weight: 750; letter-spacing: -.03em; line-height: 1.08; margin-top: 9px; font-variant-numeric: tabular-nums; }
.stat .s-v.ok { color: var(--green); }
.stat .s-s { font-size: 12.5px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.stat .s-note { color: var(--muted); font-size: 11.5px; }
.stat .s-bar { height: 5px; border-radius: 99px; background: var(--bg); margin-top: 12px; overflow: hidden; }
.stat .s-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
:root[data-theme="dark"] .stat .s-bar { background: rgba(255, 255, 255, .08); }

/* cards */
.card { background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow); border: 1px solid var(--line-2); }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 22px 14px; }
.card-h h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.card-h .csub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.card-pad { padding: 22px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-2); }

/* home 2-column grid (50/50) */
.homegrid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.homegrid > .card { min-width: 0; }
@media (max-width: 1100px) { .homegrid { grid-template-columns: 1fr; } }

/* list rows */
.lrows { display: flex; flex-direction: column; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-top: 1px solid var(--line-2);
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; }
.lrow:first-child { border-top: 0; }
button.lrow { cursor: pointer; }
button.lrow:hover { background: var(--bg); }
:root[data-theme="dark"] button.lrow:hover { background: rgba(255, 255, 255, .04); }
.lrow .lr-m { flex: 1; min-width: 0; }
.lrow .lr-t { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.lrow .lr-amt.ok { color: var(--green); }
.lrow .lr-amt small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; text-align: right; }
.lrow > .ic { color: var(--muted-2); width: 17px; height: 17px; flex: none; }
.lthumb { border-radius: 10px; object-fit: cover; flex: none; background: var(--bg); }
.lthumb-lg { width: 74px; height: 54px; }
.lr-x { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.scorep { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font: 700 14px/1 var(--f-mono); color: var(--primary-ink); background: var(--primary-soft); }

/* recent photos mini strip */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.shots-mini { grid-template-columns: repeat(3, 1fr); }
.shot { margin: 0; }
.shot .sh-ph { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg); }
.shot .sh-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption { font-size: 11.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* empty state inside a card */
.nada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 30px 22px; }
.nada .n-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--muted); margin-bottom: 4px; }
.nada h4 { font-size: 14px; font-weight: 650; }
.nada p { font-size: 12.5px; color: var(--muted); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* list ⇄ card view toggle (V5 .vswitch) */
.vswitch { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow-sm); cursor: pointer; }
:root[data-theme="dark"] .vswitch { background: rgba(255, 255, 255, .06); }
.vswitch .vs-ic { display: grid; place-items: center; color: var(--muted-2); transition: color .15s; }
.vswitch .vs-ic .ic { width: 17px; height: 17px; }
.vswitch .vs-ic.on { color: var(--primary-ink); }
.vswitch .tog { width: 38px; height: 22px; border-radius: 99px; background: var(--soft-2); position: relative; flex: none; transition: background .18s var(--ease); }
.vswitch .tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease); }
.vswitch[aria-checked="true"] .tog { background: var(--primary); }
.vswitch[aria-checked="true"] .tog::after { transform: translateX(16px); }

/* responsive show/hide helpers (V5) */
.m-only { display: none; }
@media (max-width: 760px) {
  .d-only { display: none !important; }
  .m-only { display: revert; }
  .shots-mini { grid-template-columns: repeat(2, 1fr); }
}

/* vendors list-view container (card/list toggle) */
.v2-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--r-panel); box-shadow: var(--shadow); overflow: hidden; }
.v2-list .vrow { cursor: pointer; }
.v2-list .vrow:hover { background: var(--bg); }
:root[data-theme="dark"] .v2-list .vrow:hover { background: rgba(255, 255, 255, .04); }
.v2-list .vrow .lr-t .pill { vertical-align: middle; }

/* search results: keyboard-selected row highlight (V5 command-palette nav) */
.search-results .sr-item.sel { background: var(--soft); }
:root[data-theme="dark"] .search-results .sr-item.sel { background: rgba(255, 255, 255, .06); }

/* V5 page header (title + actions) */
.ptitle { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ptitle h2 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }

/* task rows stacked inside a V5 card (Sections / List views) */
.card .task-list { display: flex; flex-direction: column; }
.card .task-list .task { padding: 12px 22px; border-top: 1px solid var(--line-2); margin: 0; border-radius: 0; }
.card .task-list .task:first-child { border-top: 0; }
/* =====================================================================
   V5 rail (.rail) — dark-violet icon rail. Collapsed to icons; expands on
   hover/.pin, fading in labels/counts. Logo → flat .r-item nav → foot
   (night toggle, Settings, profile). Appended last to override base layout.
   ===================================================================== */
:root { --rail-w: 76px; --rail-x: 268px; }
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.main { margin-left: 0; }

.rail { position: sticky; top: 0; height: 100vh; width: var(--rail-w); z-index: 90;
  display: flex; flex-direction: column; gap: 3px; background: var(--rail-bg);
  padding: 14px 12px; overflow: hidden auto; scrollbar-width: none;
  transition: width .26s var(--ease); }
.rail::-webkit-scrollbar { display: none; }
.rail:hover, .rail.pin { width: var(--rail-x); box-shadow: var(--shadow-lg); }
.rail > * { flex-shrink: 0; }

.r-logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; white-space: nowrap;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; }
.r-logo .mark { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #6a5cf0, #4d41dd); color: #fff; }
.r-logo .mark svg { width: 23px; height: 23px; fill: currentColor; }
.r-logo .r-name { opacity: 0; transition: opacity .18s; min-width: 0; }
.rail:hover .r-name, .rail.pin .r-name { opacity: 1; }
.r-logo .r-name b { display: block; color: #fff; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; }
.r-logo .r-name span { display: block; color: var(--rail-ink); font: 600 10px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }

.r-nav { display: flex; flex-direction: column; gap: 3px; }
.r-item { display: flex; align-items: center; gap: 13px; width: 100%; border: 0; background: transparent;
  border-radius: 12px; padding: 11px 13px; color: var(--rail-ink); text-align: left; font-size: 14.5px; font-weight: 550;
  white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.r-item .ic { width: 21px; height: 21px; flex: none; }
.r-item .r-lab { opacity: 0; transition: opacity .18s var(--ease); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail:hover .r-item .r-lab, .rail.pin .r-item .r-lab { opacity: 1; }
.r-item .r-num { opacity: 0; transition: opacity .18s; font: 600 11px/1 var(--f-mono); color: var(--rail-ink);
  background: rgba(255, 255, 255, .1); border-radius: var(--r-pill); padding: 4px 8px; min-width: 22px; text-align: center; }
.rail:hover .r-num, .rail.pin .r-num { opacity: 1; }
.r-item:hover { background: rgba(255, 255, 255, .08); color: var(--rail-hi); }
.r-item.on { background: var(--rail-active); color: var(--rail-hi); font-weight: 600; }

.night-item .ni-sun { display: none; }
:root[data-theme="dark"] .night-item .ni-moon { display: none; }
:root[data-theme="dark"] .night-item .ni-sun { display: block; }

.r-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.r-me { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 9px; border-radius: 14px;
  border: 0; background: rgba(255, 255, 255, .06); cursor: pointer; text-align: left; margin-top: 6px; }
.r-me:hover { background: rgba(255, 255, 255, .12); }
.r-me .avatar { width: 36px; height: 36px; flex: none; }
.r-me .rf-t { opacity: 0; transition: opacity .18s; min-width: 0; flex: 1; }
.rail:hover .rf-t, .rail.pin .rf-t { opacity: 1; }
.r-me .rf-t b { display: block; color: #fff; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.r-me .rf-t span { display: block; color: #cfc9e2; font-size: 11.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }

/* topbar Add button (V5 puts Add in the header, not the rail) */
.topbar .topadd { gap: 7px; }
@media (max-width: 560px) { .topbar .topadd .topadd-t { display: none; } .topbar .topadd { padding: 0; width: 40px; } }

/* mobile ≤880px: rail slides in as a drawer over the content */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 0; top: 0; width: var(--rail-x); max-width: 86vw;
    transform: translateX(-100%); transition: transform .26s var(--ease); box-shadow: var(--shadow-lg); }
  .app.nav-open .rail { transform: none; }
  /* Reveal labels in the open drawer. `.rail .r-flip .rf-t` and `.rail .r-cap`
     need the extra class of specificity: the later `.r-flip .rf-t {opacity:0}` and
     `.r-cap {opacity:0}` rules (defined below, for the collapsed desktop rail)
     would otherwise re-hide the flip address/phase labels and the "Your flips"
     caption in the mobile drawer. */
  .rail .r-lab, .rail .r-num, .rail .r-name, .rail .rf-t,
  .rail .r-flip .rf-t, .rail .r-cap { opacity: 1; }
}

/* rail "Your flips" shortcuts (V5 .r-flip) */
.r-sep { height: 1px; background: var(--rail-line); margin: 12px 8px; }
.r-cap { font: 600 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.34);
  padding: 4px 14px 8px; opacity: 0; transition: opacity .18s; white-space: nowrap; }
.rail:hover .r-cap, .rail.pin .r-cap { opacity: 1; }
.r-flip { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 6px 7px;
  border: 0; background: transparent; border-radius: 12px; white-space: nowrap; text-align: left; cursor: pointer;
  transition: background .15s var(--ease); }
.r-flip:hover { background: rgba(255, 255, 255, .08); }
.r-flip.on { background: var(--rail-active); }
.r-flip img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; outline: 2px solid rgba(255,255,255,.14); }
.r-flip .rf-ph { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: var(--rail-ink); }
.r-flip .rf-t { opacity: 0; transition: opacity .18s; min-width: 0; flex: 1; }
.rail:hover .r-flip .rf-t, .rail.pin .r-flip .rf-t { opacity: 1; }
.r-flip .rf-t b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.r-flip .rf-t span { display: block; color: var(--rail-ink); font-size: 11.5px; line-height: 1.3; }

/* V5 workspace overview: 2-col duo + flip timeline + next-action box */
.duo { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.duo > * { min-width: 0; }
@media (max-width: 1100px) { .duo { grid-template-columns: 1fr; } }
.ws-next-box { background: var(--primary-soft); color: var(--primary-ink); border-radius: 14px; padding: 15px 16px; font-size: 14px; font-weight: 550; line-height: 1.55; display: flex; gap: 8px; }
.ws-next-box .ic { flex: none; }
.mline { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; }
.mst { position: relative; flex: 1 0 auto; min-width: 110px; padding: 10px 12px 12px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line-2); }
.mst .md { width: 11px; height: 11px; border-radius: 99px; background: var(--muted-2); margin-bottom: 8px; }
.mst b { display: block; font-size: 12.5px; font-weight: 650; }
.mst span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.mst.done .md { background: var(--green); }
.mst.now { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.mst.now .md { background: var(--primary); }
.ws2-phase { display: grid; grid-template-columns: 160px 1fr 48px; align-items: center; gap: 12px; padding: 7px 0; }
.ws2-phase .wp-name { font-size: 13.5px; font-weight: 600; }
.ws2-phase .wp-n { font-size: 12.5px; color: var(--muted); text-align: right; }

/* =====================================================================
   Mobile scroll containment — keeps the fixed bottom nav pinned.
   On iOS Safari a `position: fixed; bottom: 0` bar jumps up into the
   content as the browser shows/hides its address/tool bar on a scroll
   gesture (the bar is anchored to a layout viewport that doesn't track
   the animating toolbar). Fix: don't let the document itself scroll —
   give the app a fixed viewport height and scroll the .main column
   instead. With no document scroll, Safari never toggles its toolbar,
   so the bottom nav (and the FAB/sheet) stay put. Scoped to the
   breakpoint where the bottom nav is shown. Must come after the base
   .app/.main rules to win the cascade.
   ===================================================================== */
@media (max-width: 860px) {
  html, body { height: 100%; overflow: hidden; }
  .app { height: 100%; min-height: 0; }
  .main { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================ Financials view ============================ */
/* Card-first, mobile-friendly: few labelled numbers per card, key figure big. */
.fin-wrap { padding: 2px; }

/* segmented tab control */
.fin-tabs { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 16px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.fin-tab { padding: 8px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--muted); background: none; border: 0; cursor: pointer; transition: all .14s; }
.fin-tab:hover { color: var(--ink); }
.fin-tab.on { color: var(--ink); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* hero band — the tab's 1-3 headline numbers */
.fin-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fin-hero-cell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.fin-hero-cell span { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fin-hero-cell b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; line-height: 1.1; }
.fin-hero-cell i { font-size: 12px; color: var(--muted); font-style: normal; }
.fin-hero-cell b.amber, .fin-kpi b.amber { color: var(--amber); }

/* compact KPI grid (Overview) */
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.fin-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fin-kpi span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fin-kpi b { font-size: 19px; font-weight: 700; }
.fin-kpi b.big { font-size: 22px; font-weight: 800; }

/* card list */
.fin-list { display: flex; flex-direction: column; gap: 10px; }
.fcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.fcard.tight { padding: 12px 14px; }
.fcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fcard-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.fcard-sub { font-size: 12px; margin-top: 2px; }
.fcard-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.ftag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.ftag.amber { background: var(--amber-soft); color: var(--amber); }
.ftag.soft { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.fcard-stats { display: flex; gap: 8px; }
.fstat { flex: 1; min-width: 0; }
.fstat span { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 2px; }
.fstat b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.fstat b.big { font-size: 21px; font-weight: 800; }
.fstat b.amber { color: var(--amber); }
.fstat b.mut { color: var(--muted); font-weight: 600; }
.fcard-note { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
.fcard-note b { color: var(--ink); }
/* single-row card (business expense) */
.fcard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fcard-amt { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.fin-del { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; opacity: .6; }
.fin-del:hover { opacity: 1; color: var(--red); background: var(--soft); }

/* section header + footers */
.fin-secthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.fin-secthead h3 { font-size: 16px; font-weight: 700; margin: 0; }
.fin-secthead .muted { display: block; font-size: 12px; font-weight: 400; }
.fin-foot { font-size: 12.5px; line-height: 1.55; padding: 12px 2px 2px; }
.fin-empty { padding: 22px 16px; text-align: center; line-height: 1.5; border: 1px dashed var(--line); border-radius: 12px; }
.fin-load { padding: 28px; text-align: center; }
.fin-stub { padding: 44px 24px; text-align: center; line-height: 1.6; }
.fin-stub-ic { opacity: .5; }
.fin-stub-t { font-size: 15px; font-weight: 700; color: var(--ink); margin: 6px 0 2px; }

/* ===== V7.1 PORT — PHASE 1: THEMES ===== */
/* 13 full-app brand themes (ported from V7.1 mockup css/v5.css "THEME SYSTEMS").
   Mechanical remaps applied:
     - data-night="on"              -> data-theme="dark"
     - :not([data-night="on"])      -> :not([data-theme="dark"])
     - --rs/--rc/--rm               -> --r-input/--r-panel/--r-modal
   All other tokens keep their V5 names (--paper/--card/--brand/--ok/--lift/
   --rail-*), which the :root alias flip routes into the canonical tokens
   (--bg/--panel/--primary/--green/--shadow/...) that the rest of app.css reads.
   Each theme carries its own --rail-* palette; the rail-token wiring at the end
   of this block makes the active rail consume them so light-rail themes
   (notion/apple/stripe/vercel/arc) stay legible. */

/* ---- Todoist Red ---- */
:root:not([data-theme="dark"])[data-accent="todoist-red"] {
  --paper: #FAFAF8;
  --card: #FFFFFF;
  --ink: #1F1F1F;
  --ink2: #54514C;
  --mut: #8C887F;
  --mut2: #BCB8AF;
  --hair: rgba(31,31,31,.10);
  --hair2: rgba(31,31,31,.06);
  --brand: #DC4C3E;
  --brand-deep: #C13B2E;
  --brand-ink: #C13B2E;
  --brand-soft: #FBE9E6;
  --brand-ring: rgba(220,76,62,.18);
  --rail-bg: #FCFAF9;
  --rail-hi: #1F1F1F;
  --rail-ink: #44403C;
  --rail-icon: #8C887F;
  --rail-dim: #A8A39A;
  --rail-line: rgba(31,31,31,.08);
  --rail-hover: rgba(31,31,31,.045);
  --rail-active: rgba(220,76,62,.12);
  --rail-on: #DC4C3E;
  --r-input: 8px;
  --r-panel: 13px;
  --r-modal: 18px;
  --lift: 0 1px 2px rgba(40,30,25,.04), 0 6px 16px -10px rgba(40,30,25,.12);
  --lift-lg: 0 2px 8px rgba(40,30,25,.06), 0 22px 48px -22px rgba(40,30,25,.22);
  --ok: #10B981;
  --ok-soft: #DCF5EC;
  --warn: #F59E0B;
  --warn-soft: #FDEFD6;
}
:root[data-theme="dark"][data-accent="todoist-red"] {
  --brand: #e47368;
  --brand-deep: #e78177;
  --brand-ink: #ec9d95;
  --brand-soft: rgba(228, 115, 104, 0.18);
  --brand-ring: rgba(228, 115, 104, 0.35);
  --rail-active: rgba(228, 115, 104, 0.22);
  --rail-on: #e98c83;
  --ok: #10B981;
  --ok-soft: rgba(16, 185, 129, 0.16);
  --warn: #F59E0B;
  --warn-soft: rgba(245, 158, 11, 0.16);
}

/* ---- Todoist Graphite ---- */
:root:not([data-theme="dark"])[data-accent="todoist-graphite"] {
  --paper: #FAFAFA;
  --card: #FFFFFF;
  --ink: #1F2937;
  --ink2: #4B5563;
  --mut: #7B8595;
  --mut2: #B2BAC6;
  --hair: rgba(31,41,55,.10);
  --hair2: rgba(31,41,55,.06);
  --brand: #4B5563;
  --brand-deep: #374151;
  --brand-ink: #374151;
  --brand-soft: #EEF0F3;
  --brand-ring: rgba(75,85,99,.18);
  --rail-bg: #FBFBFC;
  --rail-hi: #1F2937;
  --rail-ink: #46505F;
  --rail-icon: #8590A0;
  --rail-dim: #A6AEBC;
  --rail-line: rgba(31,41,55,.08);
  --rail-hover: rgba(31,41,55,.045);
  --rail-active: rgba(75,85,99,.13);
  --rail-on: #374151;
  --r-input: 8px;
  --r-panel: 13px;
  --r-modal: 18px;
  --lift: 0 1px 2px rgba(20,25,35,.04), 0 6px 16px -10px rgba(20,25,35,.12);
  --lift-lg: 0 2px 8px rgba(20,25,35,.06), 0 22px 48px -22px rgba(20,25,35,.22);
  --ok: #10B981;
  --ok-soft: #DCF5EC;
  --warn: #F59E0B;
  --warn-soft: #FDEFD6;
}
:root[data-theme="dark"][data-accent="todoist-graphite"] {
  --brand: #737a85;
  --brand-deep: #818791;
  --brand-ink: #9da2aa;
  --brand-soft: rgba(115, 122, 133, 0.18);
  --brand-ring: rgba(115, 122, 133, 0.35);
  --rail-active: rgba(115, 122, 133, 0.22);
  --rail-on: #8c929b;
  --ok: #10B981;
  --ok-soft: rgba(16, 185, 129, 0.16);
  --warn: #F59E0B;
  --warn-soft: rgba(245, 158, 11, 0.16);
}

/* ---- Flip OS (V6) — default theme ---- */
:root:not([data-theme="dark"])[data-accent="v6"] {
  --paper: #f3f3f8;
  --card: #ffffff;
  --ink: #17141f;
  --ink2: #4b4754;
  --mut: #837e8d;
  --mut2: #b5b1bd;
  --hair: rgba(23,20,31,.08);
  --hair2: rgba(23,20,31,.055);
  --brand: #6e5ef2;
  --brand-deep: #5b4ce0;
  --brand-ink: #5a4ad6;
  --brand-soft: #ecebfd;
  --brand-ring: rgba(110,94,242,.20);
  --rail-bg: #18142a;
  --rail-hi: #ffffff;
  --rail-ink: rgba(255,255,255,.92);
  --rail-icon: rgba(255,255,255,.6);
  --rail-dim: rgba(255,255,255,.5);
  --rail-line: rgba(255,255,255,.10);
  --rail-hover: rgba(255,255,255,.08);
  --rail-active: rgba(129,116,244,.30);
  --rail-on: #bcb2fb;
  --r-input: 11px;
  --r-panel: 22px;
  --r-modal: 24px;
  --lift: 0 1px 2px rgba(25,20,45,.035), 0 6px 18px -12px rgba(25,20,45,.11);
  --lift-lg: 0 2px 6px rgba(25,20,45,.05), 0 24px 52px -22px rgba(25,20,45,.22);
}
:root[data-theme="dark"][data-accent="v6"] {
  --brand: #8e81f5;
  --brand-deep: #998ef6;
  --brand-ink: #b0a7f8;
  --brand-soft: rgba(142, 129, 245, 0.18);
  --brand-ring: rgba(142, 129, 245, 0.35);
  --rail-active: rgba(142, 129, 245, 0.22);
  --rail-on: #a298f7;
}

/* ---- ChatGPT ---- */
:root:not([data-theme="dark"])[data-accent="chatgpt"] {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0D0D0D;
  --ink2: #3C3C3C;
  --mut: #8E8E8E;
  --mut2: #C2C2C2;
  --hair: rgba(0,0,0,.08);
  --hair2: rgba(0,0,0,.05);
  --brand: #10A37F;
  --brand-deep: #0E8E6D;
  --brand-ink: #0E7D60;
  --brand-soft: #E3F5EF;
  --brand-ring: rgba(16,163,127,.16);
  --rail-bg: #F9F9F9;
  --rail-hi: #0D0D0D;
  --rail-ink: #3C3C3C;
  --rail-icon: #8E8E8E;
  --rail-dim: #ABABAB;
  --rail-line: rgba(0,0,0,.07);
  --rail-hover: rgba(0,0,0,.05);
  --rail-active: rgba(0,0,0,.075);
  --rail-on: #0D0D0D;
  --r-input: 9px;
  --r-panel: 15px;
  --r-modal: 18px;
  --lift: 0 1px 2px rgba(0,0,0,.04), 0 5px 16px -10px rgba(0,0,0,.10);
  --lift-lg: 0 2px 8px rgba(0,0,0,.06), 0 18px 40px -20px rgba(0,0,0,.16);
}
:root[data-theme="dark"][data-accent="chatgpt"] {
  --brand: #45b79b;
  --brand-deep: #58bea5;
  --brand-ink: #7dcdb9;
  --brand-soft: rgba(69, 183, 155, 0.18);
  --brand-ring: rgba(69, 183, 155, 0.35);
  --rail-active: rgba(69, 183, 155, 0.22);
  --rail-on: #66c4ad;
}

/* ---- Anthropic ---- */
:root:not([data-theme="dark"])[data-accent="anthropic"] {
  --paper: #F4F1EA;
  --card: #FBFAF6;
  --ink: #1F1F1F;
  --ink2: #57534E;
  --mut: #8C857B;
  --mut2: #BCB4A8;
  --hair: rgba(60,50,30,.11);
  --hair2: rgba(60,50,30,.06);
  --brand: #D97757;
  --brand-deep: #B85D3F;
  --brand-ink: #A8543A;
  --brand-soft: #F4E3DA;
  --brand-ring: rgba(217,119,87,.18);
  --rail-bg: #EDE9DF;
  --rail-hi: #1F1F1F;
  --rail-ink: #57534E;
  --rail-icon: #8C857B;
  --rail-dim: #A39B8F;
  --rail-line: rgba(60,50,30,.11);
  --rail-hover: rgba(60,50,30,.05);
  --rail-active: rgba(217,119,87,.15);
  --rail-on: #B85D3F;
  --r-input: 9px;
  --r-panel: 13px;
  --r-modal: 18px;
  --lift: 0 1px 2px rgba(60,45,25,.05), 0 6px 18px -11px rgba(60,45,25,.14);
  --lift-lg: 0 2px 8px rgba(60,45,25,.07), 0 22px 50px -22px rgba(60,45,25,.24);
}
:root[data-theme="dark"][data-accent="anthropic"] {
  --brand: #e1957c;
  --brand-deep: #e4a089;
  --brand-ink: #eab5a3;
  --brand-soft: rgba(225, 149, 124, 0.18);
  --brand-ring: rgba(225, 149, 124, 0.35);
  --rail-active: rgba(225, 149, 124, 0.22);
  --rail-on: #e6a894;
}

/* ---- Salesforce ---- */
:root:not([data-theme="dark"])[data-accent="salesforce"] {
  --paper: #F3F4F6;
  --card: #FFFFFF;
  --ink: #16325C;
  --ink2: #3A4A66;
  --mut: #6E7A8C;
  --mut2: #A6B0C0;
  --hair: rgba(20,40,80,.11);
  --hair2: rgba(20,40,80,.06);
  --brand: #0176D3;
  --brand-deep: #014486;
  --brand-ink: #014486;
  --brand-soft: #E3F1FB;
  --brand-ring: rgba(1,118,211,.18);
  --rail-bg: #032D60;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.86);
  --rail-icon: rgba(255,255,255,.62);
  --rail-dim: rgba(255,255,255,.5);
  --rail-line: rgba(255,255,255,.13);
  --rail-hover: rgba(255,255,255,.09);
  --rail-active: rgba(1,118,211,.5);
  --rail-on: #90C8FF;
  --r-input: 6px;
  --r-panel: 10px;
  --r-modal: 14px;
  --lift: 0 1px 2px rgba(10,30,70,.06), 0 5px 16px -10px rgba(10,30,70,.16);
  --lift-lg: 0 2px 8px rgba(10,30,70,.08), 0 18px 44px -20px rgba(10,30,70,.26);
}
:root[data-theme="dark"][data-accent="salesforce"] {
  --brand: #3994dd;
  --brand-deep: #4d9fe0;
  --brand-ink: #74b4e7;
  --brand-soft: rgba(57, 148, 221, 0.18);
  --brand-ring: rgba(57, 148, 221, 0.35);
  --rail-active: rgba(57, 148, 221, 0.22);
  --rail-on: #5da7e3;
}

/* ---- Uber ---- */
:root:not([data-theme="dark"])[data-accent="uber"] {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #000000;
  --ink2: #2E2E2E;
  --mut: #757575;
  --mut2: #B0B0B0;
  --hair: rgba(0,0,0,.12);
  --hair2: rgba(0,0,0,.075);
  --brand: #000000;
  --brand-deep: #1A1A1A;
  --brand-ink: #000000;
  --brand-soft: #EFEFEF;
  --brand-ring: rgba(0,0,0,.16);
  --rail-bg: #000000;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.82);
  --rail-icon: rgba(255,255,255,.6);
  --rail-dim: rgba(255,255,255,.5);
  --rail-line: rgba(255,255,255,.14);
  --rail-hover: rgba(255,255,255,.09);
  --rail-active: rgba(255,255,255,.16);
  --rail-on: #FFFFFF;
  --r-input: 6px;
  --r-panel: 9px;
  --r-modal: 12px;
  --lift: 0 1px 2px rgba(0,0,0,.07), 0 4px 12px -8px rgba(0,0,0,.14);
  --lift-lg: 0 2px 8px rgba(0,0,0,.10), 0 16px 40px -18px rgba(0,0,0,.28);
}
:root[data-theme="dark"][data-accent="uber"] {
  --brand: #d6d6db;
  --brand-deep: #dadadf;
  --brand-ink: #e2e2e6;
  --brand-soft: rgba(214, 214, 219, 0.18);
  --brand-ring: rgba(214, 214, 219, 0.35);
  --rail-active: rgba(214, 214, 219, 0.22);
  --rail-on: #dddde1;
}

/* ---- Linear ---- */
:root:not([data-theme="dark"])[data-accent="linear"] {
  --paper: #F7F8FA;
  --card: #FFFFFF;
  --ink: #0F172A;
  --ink2: #3D4759;
  --mut: #6B7280;
  --mut2: #A8AEBC;
  --hair: rgba(15,23,42,.10);
  --hair2: rgba(15,23,42,.055);
  --brand: #5E6AD2;
  --brand-deep: #4F46E5;
  --brand-ink: #4A45C7;
  --brand-soft: #ECEDFB;
  --brand-ring: rgba(94,106,210,.20);
  --rail-bg: #15161F;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.82);
  --rail-icon: rgba(255,255,255,.55);
  --rail-dim: rgba(255,255,255,.45);
  --rail-line: rgba(255,255,255,.09);
  --rail-hover: rgba(255,255,255,.06);
  --rail-active: rgba(94,106,210,.32);
  --rail-on: #B7BDF6;
  --r-input: 8px;
  --r-panel: 12px;
  --r-modal: 16px;
  --lift: 0 1px 2px rgba(15,23,42,.05), 0 6px 18px -12px rgba(15,23,42,.14);
  --lift-lg: 0 2px 8px rgba(15,23,42,.07), 0 22px 50px -22px rgba(15,23,42,.24);
}
:root[data-theme="dark"][data-accent="linear"] {
  --brand: #818bdc;
  --brand-deep: #8e97e0;
  --brand-ink: #a7aee7;
  --brand-soft: rgba(129, 139, 220, 0.18);
  --brand-ring: rgba(129, 139, 220, 0.35);
  --rail-active: rgba(129, 139, 220, 0.22);
  --rail-on: #98a0e2;
}

/* ---- Notion ---- */
:root:not([data-theme="dark"])[data-accent="notion"] {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #37352F;
  --ink2: #5C594F;
  --mut: #908C82;
  --mut2: #C0BCB2;
  --hair: rgba(55,53,47,.13);
  --hair2: rgba(55,53,47,.07);
  --brand: #37352F;
  --brand-deep: #201F1C;
  --brand-ink: #37352F;
  --brand-soft: #EEEDEA;
  --brand-ring: rgba(55,53,47,.14);
  --rail-bg: #F7F6F3;
  --rail-hi: #37352F;
  --rail-ink: #5C594F;
  --rail-icon: #908C82;
  --rail-dim: #A8A498;
  --rail-line: rgba(55,53,47,.09);
  --rail-hover: rgba(55,53,47,.055);
  --rail-active: rgba(55,53,47,.08);
  --rail-on: #37352F;
  --r-input: 5px;
  --r-panel: 7px;
  --r-modal: 10px;
  --lift: 0 1px 2px rgba(15,15,15,.04), 0 4px 12px -9px rgba(15,15,15,.10);
  --lift-lg: 0 2px 6px rgba(15,15,15,.06), 0 16px 36px -20px rgba(15,15,15,.16);
}
:root[data-theme="dark"][data-accent="notion"] {
  --brand: #d6d6db;
  --brand-deep: #dadadf;
  --brand-ink: #e2e2e6;
  --brand-soft: rgba(214, 214, 219, 0.18);
  --brand-ring: rgba(214, 214, 219, 0.35);
  --rail-active: rgba(214, 214, 219, 0.22);
  --rail-on: #dddde1;
}

/* ---- Stripe ---- */
:root:not([data-theme="dark"])[data-accent="stripe"] {
  --paper: #F6F9FC;
  --card: #FFFFFF;
  --ink: #0A2540;
  --ink2: #2E4763;
  --mut: #6B7C93;
  --mut2: #A3B1C2;
  --hair: rgba(10,37,64,.10);
  --hair2: rgba(10,37,64,.055);
  --brand: #635BFF;
  --brand-deep: #4338CA;
  --brand-ink: #4B45D6;
  --brand-soft: #ECEBFF;
  --brand-ring: rgba(99,91,255,.20);
  --rail-bg: #0A2540;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.86);
  --rail-icon: rgba(255,255,255,.6);
  --rail-dim: rgba(255,255,255,.5);
  --rail-line: rgba(255,255,255,.10);
  --rail-hover: rgba(255,255,255,.08);
  --rail-active: rgba(99,91,255,.5);
  --rail-on: #B7B2FF;
  --r-input: 10px;
  --r-panel: 16px;
  --r-modal: 20px;
  --lift: 0 2px 5px rgba(10,37,64,.06), 0 14px 40px -16px rgba(10,37,64,.20);
  --lift-lg: 0 4px 12px rgba(10,37,64,.09), 0 30px 64px -24px rgba(10,37,64,.30);
}
:root[data-theme="dark"][data-accent="stripe"] {
  --brand: #857fff;
  --brand-deep: #918cff;
  --brand-ink: #aaa5ff;
  --brand-soft: rgba(133, 127, 255, 0.18);
  --brand-ring: rgba(133, 127, 255, 0.35);
  --rail-active: rgba(133, 127, 255, 0.22);
  --rail-on: #9b96ff;
}

/* ---- Apple ---- */
:root:not([data-theme="dark"])[data-accent="apple"] {
  --paper: #FAFAFC;
  --card: #FFFFFF;
  --ink: #1D1D1F;
  --ink2: #4A4A4D;
  --mut: #86868B;
  --mut2: #BCBCC0;
  --hair: rgba(0,0,0,.08);
  --hair2: rgba(0,0,0,.05);
  --brand: #1D1D1F;
  --brand-deep: #424245;
  --brand-ink: #1D1D1F;
  --brand-soft: #EEEEF0;
  --brand-ring: rgba(0,0,0,.14);
  --rail-bg: #F5F5F7;
  --rail-hi: #1D1D1F;
  --rail-ink: #4A4A4D;
  --rail-icon: #86868B;
  --rail-dim: #A6A6AB;
  --rail-line: rgba(0,0,0,.07);
  --rail-hover: rgba(0,0,0,.045);
  --rail-active: rgba(0,0,0,.07);
  --rail-on: #1D1D1F;
  --r-input: 10px;
  --r-panel: 18px;
  --r-modal: 22px;
  --lift: 0 1px 3px rgba(0,0,0,.05), 0 12px 30px -12px rgba(0,0,0,.12);
  --lift-lg: 0 4px 12px rgba(0,0,0,.07), 0 30px 64px -26px rgba(0,0,0,.20);
}
:root[data-theme="dark"][data-accent="apple"] {
  --brand: #d6d6db;
  --brand-deep: #dadadf;
  --brand-ink: #e2e2e6;
  --brand-soft: rgba(214, 214, 219, 0.18);
  --brand-ring: rgba(214, 214, 219, 0.35);
  --rail-active: rgba(214, 214, 219, 0.22);
  --rail-on: #dddde1;
}

/* ---- Vercel ---- */
:root:not([data-theme="dark"])[data-accent="vercel"] {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #000000;
  --ink2: #333333;
  --mut: #666666;
  --mut2: #A1A1A1;
  --hair: #EAEAEA;
  --hair2: #F0F0F0;
  --brand: #000000;
  --brand-deep: #111111;
  --brand-ink: #000000;
  --brand-soft: #F2F2F2;
  --brand-ring: rgba(0,0,0,.16);
  --rail-bg: #000000;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.8);
  --rail-icon: rgba(255,255,255,.56);
  --rail-dim: rgba(255,255,255,.46);
  --rail-line: rgba(255,255,255,.16);
  --rail-hover: rgba(255,255,255,.08);
  --rail-active: rgba(255,255,255,.14);
  --rail-on: #FFFFFF;
  --r-input: 6px;
  --r-panel: 8px;
  --r-modal: 10px;
  --lift: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px -8px rgba(0,0,0,.12);
  --lift-lg: 0 2px 8px rgba(0,0,0,.09), 0 16px 40px -18px rgba(0,0,0,.22);
}
:root[data-theme="dark"][data-accent="vercel"] {
  --brand: #d6d6db;
  --brand-deep: #dadadf;
  --brand-ink: #e2e2e6;
  --brand-soft: rgba(214, 214, 219, 0.18);
  --brand-ring: rgba(214, 214, 219, 0.35);
  --rail-active: rgba(214, 214, 219, 0.22);
  --rail-on: #dddde1;
}

/* ---- Arc Browser ---- */
:root:not([data-theme="dark"])[data-accent="arc"] {
  --paper: #FAF7FF;
  --card: #FFFFFF;
  --ink: #1E1B4B;
  --ink2: #423D78;
  --mut: #7A75A0;
  --mut2: #B3AECF;
  --hair: rgba(30,27,75,.11);
  --hair2: rgba(30,27,75,.06);
  --brand: #7C3AED;
  --brand-deep: #5B21B6;
  --brand-ink: #6D28D9;
  --brand-soft: #F1E9FE;
  --brand-ring: rgba(124,58,237,.20);
  --rail-bg: #2A1A4A;
  --rail-hi: #FFFFFF;
  --rail-ink: rgba(255,255,255,.86);
  --rail-icon: rgba(255,255,255,.62);
  --rail-dim: rgba(255,255,255,.5);
  --rail-line: rgba(255,255,255,.12);
  --rail-hover: rgba(255,255,255,.09);
  --rail-active: rgba(124,58,237,.5);
  --rail-on: #D6BCFE;
  --r-input: 12px;
  --r-panel: 20px;
  --r-modal: 24px;
  --lift: 0 2px 6px rgba(80,40,160,.08), 0 16px 42px -18px rgba(80,40,160,.28);
  --lift-lg: 0 4px 14px rgba(80,40,160,.12), 0 34px 70px -26px rgba(80,40,160,.4);
}
:root[data-theme="dark"][data-accent="arc"] {
  --brand: #9965f1;
  --brand-deep: #a374f2;
  --brand-ink: #b893f5;
  --brand-soft: rgba(153, 101, 241, 0.18);
  --brand-ring: rgba(153, 101, 241, 0.35);
  --rail-active: rgba(153, 101, 241, 0.22);
  --rail-on: #ab81f4;
}

/* ---- Settings accent swatch picker (ported from mockup parts.css:850-860;
        V5 token names resolve through the alias flip) ---- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; }
.swatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-panel);
  border: 1.5px solid var(--hair); background: var(--card); text-align: left; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, background .14s; }
.swatch:hover { border-color: var(--mut2); }
.swatch.on { border-color: var(--sw, var(--brand)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.swatch .sw-dot { width: 26px; height: 26px; border-radius: 99px; flex: none; background: var(--sw);
  display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch .sw-dot .ic { width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: opacity .14s, transform .14s; stroke-width: 2.6; }
.swatch.on .sw-dot .ic { opacity: 1; transform: none; }
.swatch .sw-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch.on .sw-name { color: var(--brand-ink); }

/* ---- Rail-token wiring: the active rail (.r-item/.r-logo/.r-flip) hardcoded
        white/violet values that broke light-rail themes. Route ONLY those
        hardcoded values onto the per-theme --rail-* tokens so the light-rail
        themes (notion/apple/stripe/vercel/arc) stay legible. For the default
        dark-violet (v6) rail these tokens resolve to the same white-on-violet
        values, so the default rail is visually unchanged. (.r-item.on keeps
        its existing --rail-active/--rail-hi tokens — already theme-aware.) ---- */
.r-logo .mark { background: linear-gradient(145deg, var(--brand), var(--brand-deep)); color: #fff; }
.r-logo .r-name b { color: var(--rail-hi); }
.r-item .r-num { background: var(--rail-hover); color: var(--rail-ink); }
.r-item:hover { background: var(--rail-hover); color: var(--rail-hi); }
.r-me { background: var(--rail-hover); }
.r-me:hover { background: var(--rail-active); }
.r-me .rf-t b { color: var(--rail-hi); }
.r-me .rf-t span { color: var(--rail-dim); }
.r-cap { color: var(--rail-dim); }
.r-flip:hover { background: var(--rail-hover); }
.r-flip img { outline: 2px solid var(--rail-line); }
.r-flip .rf-ph { background: var(--rail-hover); color: var(--rail-ink); }
.r-flip .rf-t b { color: var(--rail-hi); }
.r-flip .rf-t span { color: var(--rail-dim); }
/* ===== V7.1 PORT — PHASE 2: FINANCIALS ===== */
/* Ports the mockup's financial component system (KPI tiles, vendor/owner cards,
   distribution split bars, CSS bar charts) onto production's live data. Tokens
   remapped to production: --paper→--bg, --card→--panel, --brand→--primary,
   --rc→--r-panel, --ok/--warn/--bad→--green/--amber/--red. Scoped under
   #finBody so nothing leaks into the standalone Vendors / Analytics views. */

/* --- KPI tiles (mockup .vtile / .vdir-tiles) --- */
#finBody .vdir-tiles { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); margin-bottom: 18px; }
#finBody .vdir-tiles.t3 { grid-template-columns: repeat(3, 1fr); }
#finBody .vdir-tiles.t6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1180px) { #finBody .vdir-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { #finBody .vdir-tiles, #finBody .vdir-tiles.t3, #finBody .vdir-tiles.t6 { grid-template-columns: repeat(2, 1fr); gap: 11px; } }
#finBody .vtile { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel);
  box-shadow: var(--shadow); padding: 16px 17px 15px; min-width: 0; }
#finBody .vt-h { display: flex; align-items: center; gap: 9px; }
#finBody .vt-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-ink); }
#finBody .vt-ic .ic { width: 16px; height: 16px; }
#finBody .vt-ic.warn { background: var(--amber-soft); color: var(--amber); }
#finBody .vt-l { font: 600 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#finBody .vt-v { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 11px;
  font-variant-numeric: tabular-nums; }
#finBody .vt-v.warn { color: var(--amber); }
#finBody .vt-s { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* --- vendor cards (mockup .vcard2) --- */
#finBody .vdir-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 700px) { #finBody .vdir-grid { grid-template-columns: 1fr; } }
#finBody .vcard2 { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel);
  box-shadow: var(--shadow); padding: 18px 19px; display: flex; flex-direction: column; gap: 15px;
  transition: border-color .14s, box-shadow .14s, transform .14s; }
#finBody .vcard2:hover { border-color: var(--primary-ring); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
#finBody .vcard2.nolink { cursor: default; }
#finBody .vcard2.nolink:hover { transform: none; }
#finBody .vc-head { display: flex; align-items: flex-start; gap: 13px; }
#finBody .vc-id { flex: 1; min-width: 0; }
#finBody .vc-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#finBody .vc-tags { display: flex; align-items: center; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
#finBody .vc-jobs { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
#finBody .vc-jobs .ic { width: 13px; height: 13px; }
#finBody .vc-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 14px 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
#finBody .vcm { min-width: 0; }
#finBody .vcm + .vcm { padding-left: 14px; border-left: 1px solid var(--line-2); }
#finBody .vcm-l { font: 600 9.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#finBody .vcm-v { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
#finBody .vcm-v.warn { color: var(--amber); }
#finBody .vc-note { font-size: 12px; line-height: 1.5; color: var(--muted); display: flex; align-items: flex-start; gap: 6px; }
#finBody .vc-note b { color: var(--ink); }
#finBody .vc-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--amber); }

/* --- avatar tile (shared, vendors + owners) --- */
#finBody .fin-ava { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; }

/* --- owner cards (mockup .own-card) + distribution split bars (.dist-row) --- */
#finBody .own-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 4px; }
@media (max-width: 700px) { #finBody .own-grid { grid-template-columns: 1fr; } }
#finBody .own-card { padding: 19px 20px; }
#finBody .own-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
#finBody .own-n { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
#finBody .own-r { margin-top: 5px; }
#finBody .own-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#finBody .own-fin .sl { font: 600 9px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#finBody .own-fin .sv { font-size: 16px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#finBody .own-fin .sv.warn { color: var(--amber); }
#finBody .own-break { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
#finBody .dist-list { display: flex; flex-direction: column; gap: 16px; }
#finBody .dist-row { display: flex; align-items: center; gap: 12px; }
#finBody .dist-m { width: 120px; flex: none; min-width: 0; }
#finBody .dist-m .bill-t { font-size: 14px; font-weight: 650; }
#finBody .dist-m .bill-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#finBody .dist-bar { flex: 1; height: 9px; border-radius: 99px; background: var(--soft); overflow: hidden; }
:root[data-theme="dark"] #finBody .dist-bar { background: rgba(255,255,255,.08); }
#finBody .dist-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
#finBody .dist-row .bill-a { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- CSS bar charts: report bars (mockup .rbar / .rbars) --- */
#finBody .rbars { display: flex; flex-direction: column; gap: 14px; }
#finBody .rbar { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; }
@media (max-width: 560px) { #finBody .rbar { grid-template-columns: 78px 1fr auto; gap: 10px; } }
#finBody .rb-l { font-size: 13px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#finBody .rb-track { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
:root[data-theme="dark"] #finBody .rb-track { background: rgba(255,255,255,.07); }
#finBody .rb-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
#finBody .rb-v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- section header action cluster + CSV export button --- */
#finBody .fin-secthead-acts { display: flex; align-items: center; gap: 8px; flex: none; }
#finBody .fin-csv { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color .14s, color .14s; white-space: nowrap; }
#finBody .fin-csv:hover { border-color: var(--muted-2); color: var(--ink); }
#finBody .fin-csv .ic { width: 15px; height: 15px; color: var(--muted); }
#finBody .fin-csv:hover .ic { color: var(--ink); }

/* keep the 1099/$600 chips snug against the amount in card rows */
#finBody .fcard-amt .ftag { margin-left: 4px; }
/* ===== V7.1 PORT — PHASE 3: SEARCH ===== */
/* Visual port of the mockup's .finder/.f-box/.f-pop/.fp-row look (v5.css:336-357,
   parts.css:564-565) applied to production's EXISTING search hooks. Production
   class names are kept verbatim (#globalSearch/#searchResults/.search/.sr-*); only
   their styling is upgraded to match the mockup. */

/* The search field — softer radius, lift shadow, wider, brand focus ring. */
.search {
  gap: 9px; padding: 9px 14px; min-width: 300px;
  box-shadow: var(--shadow-sm, var(--shadow));
}
.search .ic { width: 16px; height: 16px; }
.search input { font-size: 14px; }
.search input::placeholder { color: var(--muted-2); }

/* Results popover (.f-pop): larger radius, big lift, roomier rows. */
.search-results { width: min(440px, 80vw); max-height: 62vh; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; }
.search-results .sr-group { padding: 10px 12px 4px; }
.search-results .sr-item { gap: 12px; padding: 9px 12px; border-radius: 11px; }
.search-results .sr-item .sr-thumb { width: 40px; height: 30px; border-radius: 7px; }
.search-results .sr-item .sr-ic { width: 36px; height: 36px; border-radius: 10px; }
.search-results .sr-item .sr-t { font-size: 13.5px; }
.search-results .sr-item .sr-s { font-size: 12px; }
.search-results .sr-empty { padding: 24px; font-size: 13.5px; }
/* Keyboard-selected row (parts.css:564-565). */
.search-results .sr-item.sel { background: var(--soft); }
:root[data-theme="dark"] .search-results .sr-item.sel { background: rgba(255, 255, 255, .07); }
/* Zero-query panel: group headers gain a right-aligned "Clear" affordance
   (Recent group) — same micro-label type as the header itself. */
.search-results .sr-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.search-results .sr-clear { border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--primary-ink, var(--primary)); }
.search-results .sr-clear:hover { text-decoration: underline; }

/* Mobile search toggle (#mSearch) — additive hook. Hidden on wide screens. */
.topbar .h-search { display: none; }
.topbar .h-search .ic { width: 19px; height: 19px; }

/* Narrow screens: the bar collapses; #mSearch reveals it. Matches the existing
   860px breakpoint where .topbar .search is set to display:none. */
@media (max-width: 860px) {
  /* Reveal the magnifier; it acts as the entry point to the collapsed bar. */
  .topbar .h-search { display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 11px; border: 1px solid var(--line); background: var(--panel);
    color: var(--ink-2); flex: none; }
  .topbar .h-search:hover { background: var(--soft); }
  .topbar .h-search .ic-close { display: none; }
  /* 16px inputs stop iOS zoom-on-focus; must out-rank the 14px desktop rule
     above (line ~3490), which otherwise wins by source order over the ≤740px
     16px rule and makes the whole page zoom when the field is tapped. */
  .topbar .search input { font-size: 16px; }
  /* Constant topbar height: pin the closed row (title block) and the open row
     (search field) to the same 46px so toggling search never shifts the page —
     the natural heights differ per page (crumb or not) and per browser. */
  .topbar .head-txt { min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
  .topbar.s-open .search { height: 46px; padding-top: 0; padding-bottom: 0; }
  /* When open, the search owns the whole topbar row: title, hamburger, and
     bell step aside (instead of the title being crushed into a one-word-per-
     line column), and the magnifier stays in place as the close (✕) button. */
  .topbar.s-open .hamb, .topbar.s-open .head-txt, .topbar.s-open .h-bell { display: none; }
  .topbar.s-open .top-actions { flex: 1 1 auto; min-width: 0; }
  .topbar.s-open .search-wrap { display: block; flex: 1 1 auto; min-width: 0; order: -1; }
  .topbar.s-open .search { display: flex; min-width: 0; width: 100%; }
  .topbar.s-open .search-results { left: 0; right: 0; width: auto; max-height: 50vh; }
  .topbar.s-open .search-kbd { display: none; }
  .topbar.s-open .h-search .ic-find { display: none; }
  .topbar.s-open .h-search .ic-close { display: block; }
}
/* ===== V7.1 PORT — PHASE 4: CALCULATOR VERDICT ===== */
/* GO / THIN / PASS word badge + coaching note under the MAO headline.
   Color states use the production status tokens; ported from mockup parts.css. */
.vd-word { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 10px; color: var(--ink); }
.vd-word.go { color: var(--green); }
.vd-word.thin { color: var(--amber); }
.vd-word.pass { color: var(--red); }
.vd-note { font-size: 13px; color: var(--muted); margin-top: 9px; line-height: 1.5; max-width: 42ch; }
/* compact variant for the mobile sticky bar */
.vd-word.sm { font-size: 15px; font-weight: 800; letter-spacing: 0; margin-top: 0; }

/* ===== V7.1 PORT — PHASE 6: FINANCIALS DRILL-DOWN ===== */
/* Drillable affordance on KPI tiles, vendor/owner cards, expense rows. */
.vtile-drill, .vcard-drill, .own-card-drill, .fcard-drill { cursor: pointer; }
.vtile-drill, .vcard-drill, .own-card-drill {
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.vtile-drill:hover, .vcard-drill:hover, .own-card-drill:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.vtile-drill:focus-visible, .vcard-drill:focus-visible, .own-card-drill:focus-visible,
.fin-row-go:focus-visible, .fin-crumb:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.fcard-drill:hover { background: color-mix(in srgb, var(--primary) 5%, var(--panel)); }
/* Newly-drillable chart bars, distribution rows, month columns, and cards. */
#finBody .rbar-go, #finBody .dist-row-go, #finBody .cf-col-go, #finBody .card-go { cursor: pointer; }
#finBody .rbar-go, #finBody .dist-row-go { border-radius: 9px; transition: background .14s ease; padding: 4px 6px; margin: 0 -6px; }
#finBody .rbar-go:hover, #finBody .dist-row-go:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
#finBody .cf-col-go { border-radius: 8px; transition: background .14s ease; }
#finBody .cf-col-go:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
#finBody .card-go { transition: border-color .14s ease, box-shadow .14s ease; }
#finBody .card-go:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); box-shadow: var(--shadow); }
#finBody .rbar-go:focus-visible, #finBody .dist-row-go:focus-visible, #finBody .cf-col-go:focus-visible, #finBody .card-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The little chevron affordance reused on drillable bars/rows. */
#finBody .rb-go { display: inline-flex; align-items: center; margin-left: 6px; color: var(--muted); vertical-align: middle; }
#finBody .rb-go .fin-chev { width: 14px; height: 14px; }
/* Settled (already-reimbursed) auto member-loan entries read as muted. */
#finBody .fin-settled { opacity: .6; }
.vt-h { display: flex; align-items: center; gap: 7px; }
.vt-go { margin-left: auto; color: var(--muted); display: inline-flex; }
.fin-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Breadcrumb */
.fin-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin: 0 0 14px; font-size: 13px; }
.fin-crumb { background: none; border: 0; padding: 4px 7px; border-radius: var(--r-input);
  color: var(--muted); cursor: pointer; font: inherit; font-weight: 600; }
.fin-crumb:hover { color: var(--ink); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fin-crumb.on { color: var(--ink); cursor: default; }
.fin-crumb-sep { color: var(--muted); display: inline-flex; opacity: .6; }
.fin-crumb-sep .fin-chev { width: 13px; height: 13px; }

/* Drill body */
.fin-drill-head { margin-top: 18px; }
.fin-drill-head:first-child { margin-top: 0; }
.fin-rows { display: flex; flex-direction: column; gap: 8px; }
.fin-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.fin-row-go { cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.fin-row-go:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: var(--shadow); }
.fin-row-ava { flex: none; display: inline-flex; }
.fin-row-img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; }
.fin-row-main { min-width: 0; flex: 1; }
.fin-row-t { font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-row-s { font-size: 12.5px; margin-top: 2px; }
.fin-row-amt { font-family: var(--f-mono, ui-monospace, monospace); font-weight: 650;
  text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.fin-row-amt.warn { color: var(--amber); }
.fin-row-n { font-size: 11px; font-weight: 500; }
.fin-row-go-ic { color: var(--muted); display: inline-flex; flex: none; }
.fin-bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 9%, transparent);
  margin-top: 7px; overflow: hidden; }
.fin-bar > i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--ink))); }

/* Detail (leaf) */
.fin-detail { display: flex; flex-direction: column; gap: 0; }
.fin-kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.fin-kv:last-child { border-bottom: 0; }
.fin-kv-k { color: var(--muted); }
.fin-kv-v { color: var(--ink); font-weight: 600; text-align: right; }
.fin-kv-v .warn, .fin-detail .warn { color: var(--amber); }
.fin-detail-acts { display: flex; gap: 10px; margin-top: 14px; }
.fin-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.fin-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }

/* Owner workspace — member drill sub-tabs + account snapshot bar */
.fin-otabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;margin:16px 0 16px;-webkit-overflow-scrolling:touch}
.fin-otab{padding:9px 2px;margin-right:18px;font-size:14px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.fin-otab.on{color:var(--ink);border-bottom-color:var(--primary)}
.fin-otab:hover{color:var(--ink)}
.snap-bar{height:12px;border-radius:99px;background:color-mix(in srgb,var(--amber) 16%,transparent);overflow:hidden;margin:8px 0}
.snap-bar.sm{height:8px}
.snap-bar>i{display:block;height:100%;border-radius:inherit;background:var(--green)}
.snap-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:6px}
.snap-legend b{color:var(--ink)}

/* --- cash-flow column chart (mockup .cflow) --- */
.cflow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;align-items:end;height:160px;padding-top:8px}
.cf-col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;height:100%;justify-content:flex-end}
.cf-amt{font-size:10px;color:var(--muted);font-family:ui-monospace,monospace;white-space:nowrap}
.cf-bar{width:100%;display:flex;align-items:flex-end;flex:1}
.cf-bar>i{display:block;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 70%,var(--ink)))}
.cf-m{font-size:11px;color:var(--muted);font-weight:600}

/* --- Payments hub filter bar --- */
.fin-payfilters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.fin-payfilters .fin-payq{flex:1 1 200px;min-width:160px}
.fin-payfilters input,.fin-payfilters select{padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);color:var(--ink);font-size:13px}
.fin-payfilters select{cursor:pointer}

/* ===== NOTIFICATIONS ===== */
/* Ported from the V7.1 example notify.css. Adapted for production:
   :root[data-night="on"] → :root[data-theme="dark"]; mockup .i → .ic; tokens map
   to existing :root vars. No class collisions: h-bell, npanel, nf-, nbadge are all new. */

/* ---- header bell ---- */
.h-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 5px; flex: none;
  border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .14s var(--ease); }
.h-bell:hover { color: var(--ink); background: none; }
:root[data-theme="dark"] .h-bell:hover { background: none; }
.h-bell.on { color: var(--primary-ink); background: none; }
.h-bell .ic { width: 22px; height: 22px; }
.h-bell .nbadge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 99px; background: var(--red); color: #fff; font: 700 9.5px/1 var(--f-mono);
  display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 0 0 0 2px var(--panel); }

/* ---- dropdown panel ---- */
.npanel { position: fixed; z-index: 150; width: 404px; background: var(--card); border: 1px solid var(--hair2);
  border-radius: 20px; box-shadow: var(--lift-lg); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.97) translateY(-4px); transform-origin: top right;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
.npanel.up { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.nf-ar { position: absolute; top: -7px; width: 13px; height: 13px; background: var(--card); transform: rotate(45deg);
  border-left: 1px solid var(--hair2); border-top: 1px solid var(--hair2); border-radius: 3px 0 0 0; }

.nf-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 15px 11px; }
.nf-h .ttl { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; min-width: 0; }
.nf-h .ttl .cnt { font: 700 11px/1 var(--f-mono); color: #fff; background: var(--brand); border-radius: 99px; padding: 4px 7px; flex: none; }
.nf-h .ttl .bk { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--mut); margin: -4px 2px -4px -4px; }
.nf-h .ttl .bk:hover { background: var(--paper); color: var(--ink); }
.nf-h .ttl .bk .ic { width: 18px; height: 18px; }
.nf-h-acts { display: flex; align-items: center; gap: 3px; flex: none; }
.nf-h-acts button { width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; color: var(--mut); }
.nf-h-acts button:hover { background: var(--paper); color: var(--ink); }
.nf-h-acts button .ic { width: 18px; height: 18px; }
:root[data-theme="dark"] .nf-h-acts button:hover { background: rgba(255,255,255,.08); }

.nf-tabs { display: flex; gap: 5px; padding: 0 15px 8px; border-bottom: 1px solid var(--hair2); }
.nf-tabs button { font-size: 13px; font-weight: 650; color: var(--mut); padding: 7px 12px; border-radius: 9px; }
.nf-tabs button:hover { color: var(--ink); background: var(--paper); }
.nf-tabs button.on { color: var(--brand-ink); background: var(--brand-soft); }

.nf-list { overflow-y: auto; flex: 1; padding: 3px 6px 6px; }
.nf-cap { font: 600 9.5px/1.3 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--mut2); padding: 10px 10px 4px; }
.nf { display: flex; gap: 10px; padding: 8px 9px; border-radius: 10px; cursor: pointer; position: relative; align-items: flex-start; transition: background .12s var(--ease); }
.nf:hover { background: var(--paper); }
:root[data-theme="dark"] .nf:hover { background: rgba(255,255,255,.04); }
.nf.unread { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.nf.unread:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.nf.fin { opacity: .5; }
.nf.fin .nf-t { text-decoration: line-through; }
.nf-lead { flex: none; }
.nf-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--paper); color: var(--ink2); }
:root[data-theme="dark"] .nf-ic { background: rgba(255,255,255,.06); }
.nf-ic .ic { width: 15px; height: 15px; }
.nf-ic.bad { background: var(--bad-soft); color: var(--bad); }
.nf-ic.warn { background: var(--warn-soft); color: var(--warn); }
.nf-ic.ok { background: var(--ok-soft); color: var(--ok); }
.nf-ic.info { background: var(--info-soft); color: var(--info); }
.nf-ic.brand { background: var(--brand-soft); color: var(--brand-ink); }
.nf .avatar { width: 28px; height: 28px; }
.nf-c { flex: 1; min-width: 0; }
.nf-t { font-size: 13px; line-height: 1.35; color: var(--ink); }
.nf-t b { font-weight: 700; }
.nf-s { font-size: 11.5px; color: var(--mut); margin-top: 1px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
@media (hover: hover) {
  .nf-acts { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: max-height .16s var(--ease), opacity .16s var(--ease), margin-top .16s var(--ease); }
  .nf:hover .nf-acts { max-height: 48px; opacity: 1; margin-top: 7px; }
}
.nf-b { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; white-space: nowrap; font-size: 11.5px; font-weight: 650; color: var(--ink2); background: var(--paper); border: 1px solid var(--hair); }
:root[data-theme="dark"] .nf-b { background: rgba(255,255,255,.05); }
.nf-b:hover { border-color: var(--mut2); color: var(--ink); }
.nf-b .ic { width: 13px; height: 13px; }
.nf-b.pri { background: var(--brand); border-color: transparent; color: #fff; }
.nf-b.pri:hover { background: var(--brand-deep); }
.nf-b.pri .ic { color: #fff; }
.nf-side { display: flex; align-items: center; gap: 7px; flex: none; padding-top: 2px; }
.nf-time { font-size: 10.7px; color: var(--mut2); white-space: nowrap; }
.nf-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--brand); flex: none; }

.nf-empty { text-align: center; padding: 46px 20px; }
.nf-empty .ei { width: 52px; height: 52px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 14px; }
.nf-empty .ei .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.nf-empty h4 { font-size: 15.5px; font-weight: 700; }
.nf-empty p { font-size: 13px; color: var(--mut); margin-top: 5px; }

.nf-foot { flex: none; padding: 10px 13px; border-top: 1px solid var(--hair2); }
.nf-foot button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand-ink); padding: 6px 8px; border-radius: 8px; }
.nf-foot button:hover { background: var(--brand-soft); }
.nf-foot button .ic { width: 16px; height: 16px; }

/* ---- settings view ---- */
.nf-set { overflow-y: auto; flex: 1; padding: 8px 6px 12px; }
.nf-sec { font: 600 9.5px/1.3 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--mut2); padding: 12px 12px 8px; }
.nf-chans { display: flex; gap: 8px; padding: 0 11px 8px; flex-wrap: wrap; }
.nf-chan { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--ink2); white-space: nowrap;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 13px; }
:root[data-theme="dark"] .nf-chan { background: rgba(255,255,255,.05); }
.nf-chan.on { color: var(--brand-ink); background: var(--brand-soft); border-color: transparent; }
.nf-chan .ic { width: 16px; height: 16px; }
.nf-row { display: flex; align-items: center; gap: 13px; padding: 11px 11px; border-radius: 12px; }
.nf-row:hover { background: var(--paper); }
:root[data-theme="dark"] .nf-row:hover { background: rgba(255,255,255,.04); }
.nf-pic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--paper); color: var(--ink2); }
:root[data-theme="dark"] .nf-pic { background: rgba(255,255,255,.06); }
.nf-pic .ic { width: 18px; height: 18px; }
.nf-pt { flex: 1; min-width: 0; }
.nf-pt b { font-size: 13.7px; font-weight: 650; display: block; }
.nf-pt span { font-size: 12px; color: var(--mut); display: block; margin-top: 2px; line-height: 1.4; }
.nf-tgl { width: 44px; height: 26px; border-radius: 99px; background: var(--hair); position: relative; flex: none; transition: background .16s var(--ease); }
:root[data-theme="dark"] .nf-tgl { background: rgba(255,255,255,.16); }
.nf-tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s var(--ease); }
.nf-tgl.on { background: var(--brand); }
.nf-tgl.on::after { transform: translateX(18px); }