/* ── Musalacón Property Portal──────────────────────────────────────────────────
   A ranch ledger, in the SeatShare "report" language: warm light ground, ink
   type, hairline rules instead of filled boxes, tiny letter-spaced caps labels,
   near-square corners, lots of air, and colour reserved for meaning.

   Brand tokens come from the Musalacón identity guide. Contrast was measured
   against Bone (#F4EFE4), the darkest surface text lands on, not eyeballed:
     Ink 14.3:1 · River 6.49:1 · Terracotta 3.55:1 · Sage 3.58:1 · Straw 1.73:1
   Terracotta, Sage and Straw all fail as small text on Bone, so (as SeatShare
   does with its team colours) each has a darkened *-ink twin for text, and the
   true brand colour survives as fills, rules and dots. The primary button uses
   --terra-deep: white on brand terracotta is 4.07:1, on terra-deep 5.50:1. */
:root {
  --ink: #1E2620;
  --bone: #F4EFE4;
  --terracotta: #C4623A;
  --river: #2E5B6A;
  --straw: #D8B36E;
  --sage: #71835F;

  --page: var(--bone);       /* page plane */
  --paper: #FAF7F0;          /* panel ground, lifted off the plane */
  --sunk: #EDE7DA;           /* recessed plane */
  --hair: #E1D9C8;           /* hairline, decorative */
  --rule: #CDC2AC;           /* stronger rule */
  --text: var(--ink);
  --text2: #3F4740;          /* secondary ink 9.6:1 */
  --muted: #5E625A;          /* 5.43:1 on bone */
  --micro: #646860;          /* 4.96:1 on bone; caps labels carry the tier, not lightness */

  --terra-deep: #A84F2C;     /* 4.79:1 on bone, white-on 5.50:1 */
  --terra-ink: #9E4A29;      /* 5.28:1 */
  --sage-ink: #4F5E42;       /* 6.08:1 */
  --straw-ink: #7A5A1C;      /* 5.54:1 */
  --river-ink: var(--river);

  --tint-straw: #F3E6C9;
  --tint-sage: #E3E8DB;
  --tint-terra: #F4DED3;
  --tint-river: #DCE6E8;
  /* priority: red / orange / yellow, ink colours 5.5:1+ on their tints */
  --pri-red: #C62828;    --pri-red-ink: #9B1C1C;    --tint-red: #F7DBD7;
  --pri-orange: #E07B24; --pri-orange-ink: #8A4A10; --tint-orange: #FBE5CF;
  --pri-yellow: #E0B020; --pri-yellow-ink: #6E5313; --tint-yellow: #FAF0C8;

  /* Nav runs on Ink. Bone on Ink 14.3:1; the dim nav label is 7.1:1. */
  --nav-bg: var(--ink);
  --nav-text: #F4EFE4;
  --nav-dim: #A7ACA3;
  --nav-hair: #343D36;

  --radius: 2px;
  --sidebar: 248px;
  --topbar: 56px;
  --tabbar: 64px;
  --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page); color: var(--text); font-family: var(--font-ui);
  font-size: 15px; line-height: 1.5; min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--river-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.noscript { padding: 40px 20px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type: the language's signature is the small letter-spaced caps label ── */
.wordmark { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.32em; white-space: nowrap; }
.caps { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--micro); }
h1, h2, .h1, .h2 { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 72; }
h1, .h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.12; }
h2, .h2 { font-size: 1.2rem; line-height: 1.25; font-variation-settings: 'opsz' 24; }
.lede { color: var(--text2); max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }

/* ── Boot ── */
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.boot .wordmark { font-size: 0.9rem; color: var(--micro); }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.shell { min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 40;
  background: var(--nav-bg); color: var(--nav-text);
  display: flex; flex-direction: column; padding: 28px 0 20px;
  transition: transform 0.22s ease;
}
.sidebar .brand { padding: 0 20px 26px; border-bottom: 1px solid var(--nav-hair);
  display: flex; justify-content: center; }
/* Logo lockup: the bare oak with the wordmark centred beneath it (identity deck, slide 15).
   The trailing negative margin cancels the letter-spacing after the last letter so the
   wordmark centres optically under the tree. */
.lockup { display: inline-flex; flex-direction: column; align-items: center; color: inherit;
  text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup img { display: block; height: auto; }
.lockup .wordmark { margin-right: -0.32em; }
.sidebar .lockup img { width: 136px; }
.sidebar .lockup .wordmark { font-size: 0.82rem; margin-top: 12px; }
.sidebar .lockup .sub { margin-top: 8px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em;
  margin-right: -0.18em; text-transform: uppercase; color: var(--nav-dim); }
.lockup-sm { flex-direction: column; padding: 4px 8px; }
.lockup-sm img { width: 40px; }
.lockup-sm .wordmark { font-size: 0.5rem; letter-spacing: 0.3em; margin-top: 3px; margin-right: -0.3em; }
.lockup-lg { align-self: flex-start; }
.lockup-lg img { width: 150px; }
.lockup-lg .wordmark { font-size: 0.95rem; margin-top: 14px; }
.nav { list-style: none; padding: 18px 0; flex: 1; overflow-y: auto; }
.nav .group { padding: 18px 26px 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--nav-dim); }
.nav a {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 26px;
  color: var(--nav-dim); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; border-left: 2px solid transparent; text-decoration: none;
}
.nav a:hover { color: var(--nav-text); background: rgba(244,239,228,0.04); }
.nav a[aria-current="page"] { color: var(--nav-text); border-left-color: var(--terracotta);
  background: rgba(244,239,228,0.06); }
.nav a svg.ic { width: 18px; height: 18px; }
.sidebar .me { padding: 18px 26px 0; border-top: 1px solid var(--nav-hair); }
.sidebar .me .name { font-size: 0.85rem; font-weight: 600; }
.sidebar .me .meta { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nav-dim); margin-top: 3px; }
.sidebar .me button { margin-top: 12px; min-height: 44px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nav-dim); padding: 0; }
.sidebar .me button:hover { color: var(--nav-text); }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar);
  background: var(--nav-bg); color: var(--nav-text);
  display: none; align-items: center; gap: 8px; padding: 0 8px 0 4px;
  padding-top: env(safe-area-inset-top, 0px); height: calc(var(--topbar) + env(safe-area-inset-top, 0px));
}
.topbar .lockup { margin-right: auto; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); }
.icon-btn:hover { background: rgba(244,239,228,0.06); }

.main { margin-left: var(--sidebar); min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; padding: 44px 48px 96px; }

.scrim { position: fixed; inset: 0; background: rgba(30,38,32,0.42); z-index: 35;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* Phone bottom tab bar */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 30; display: none;
  background: var(--nav-bg); border-top: 1px solid var(--nav-hair);
  padding-bottom: var(--safe-b);
}
.tabbar ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tabbar a, .tabbar button {
  height: var(--tabbar); width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; color: var(--nav-dim); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; position: relative;
}
.tabbar [aria-current="page"] { color: var(--nav-text); }
.tabbar [aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%;
  height: 2px; background: var(--terracotta); }

/* "More" bottom sheet */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper);
  border-top: 1px solid var(--rule); padding: 10px 0 calc(16px + var(--safe-b));
  transform: translateY(105%); transition: transform 0.22s ease; max-height: 80vh; overflow-y: auto;
}
.sheet.on { transform: none; }
.sheet .grab { width: 36px; height: 3px; background: var(--rule); margin: 4px auto 10px; }
.sheet .who { padding: 8px 22px 14px; border-bottom: 1px solid var(--hair); }
.sheet .who .name { font-size: 0.95rem; font-weight: 600; }
.sheet .who .meta { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--micro); margin-top: 3px; }
.sheet a, .sheet button.row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 22px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); border-bottom: 1px solid var(--hair); text-decoration: none;
}
.sheet [aria-current="page"] { color: var(--terra-ink); }

/* ── Page furniture ─────────────────────────────────────────────────────── */
.page-head { padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .caps { margin-bottom: 10px; }
.page-head:has(+ .ledger) { border-bottom: 0; padding-bottom: 0; }
.page-head .lede { margin-top: 10px; }

/* Ledger stat strip: cells divided by hairlines, figures in ink, never accent */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 40px; }
.ledger .cell { padding: 22px 22px 20px; border-left: 1px solid var(--hair); min-width: 0; }
.ledger .cell:first-child { border-left: 0; padding-left: 0; }
.ledger .fig { font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; }
.ledger .fig small { font-size: 0.85rem; font-weight: 500; color: var(--muted); margin-left: 4px; }
.ledger .caps { margin-top: 10px; }
.ledger .sub { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.section { min-width: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.section-head .caps { color: var(--text); }
.section-head .aside { font-size: 0.72rem; color: var(--muted); line-height: 1.2; }

.rows { list-style: none; }
.rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.rows .k { min-width: 0; overflow-wrap: anywhere; }
.rows .v { font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; font-size: 0.85rem; }
.rows .when { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

.empty { padding: 22px 0 8px; color: var(--muted); font-size: 0.9rem; }
.empty strong { display: block; color: var(--text2); font-weight: 600; margin-bottom: 2px; }

.panel { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 26px 28px; }

/* Status chips: Straw pending · Sage approved/complete · Terracotta urgent/rejected · River in progress */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 2px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  background: var(--sunk); color: var(--text2); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.pending { background: var(--tint-straw); color: var(--straw-ink); }
.chip.pending::before { background: var(--straw); }
.chip.ok { background: var(--tint-sage); color: var(--sage-ink); }
.chip.ok::before { background: var(--sage); }
.chip.urgent { background: var(--tint-terra); color: var(--terra-ink); }
.chip.urgent::before { background: var(--terracotta); }
.chip.progress { background: var(--tint-river); color: var(--river-ink); }

/* Priority bars on the dashboard */
.prio { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--hair); }
.prio .lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); }
.prio .track { height: 6px; background: var(--sunk); }
.prio .bar { display: block; width: 0; height: 6px; background: var(--ink); min-width: 0; }
.prio.urgent .bar { background: var(--pri-red); }
.prio.high .bar { background: var(--pri-orange); }
.prio.normal .bar { background: var(--pri-yellow); }
.prio .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Controls ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--terra-deep); color: #fff; }
.btn-primary:hover { background: #923F20; }
.btn-secondary { background: var(--river); color: #fff; }
.btn-secondary:hover { background: #244A57; }
.btn-ghost { border-color: var(--rule); color: var(--text); }
.btn-ghost:hover { background: var(--sunk); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-block { width: 100%; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); }
input, select, textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  width: 100%; min-height: 46px; padding: 10px 12px; color: var(--text);
  background: #FFFDF8; border: 1px solid var(--rule); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--river); outline-offset: -1px; border-color: var(--river); }

.alert { padding: 12px 14px; border-left: 3px solid var(--terracotta); background: var(--tint-terra);
  color: var(--terra-ink); font-size: 0.88rem; margin-bottom: 18px; }
.alert.info { border-left-color: var(--river); background: var(--tint-river); color: var(--river-ink); }

/* Sticky primary action (phones): sits above the tab bar */
.action-bar { display: none; }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login .side { background: var(--ink); color: var(--nav-text); padding: 56px 56px 44px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login .side .lockup .wordmark { color: var(--nav-text); }
.login .side .tag { font-family: var(--font-head); font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  line-height: 1.15; font-weight: 400; max-width: 16ch; font-variation-settings: 'opsz' 96; }
.login .side .facts { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--nav-hair); padding-top: 18px; }
.login .side .facts div { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nav-dim); }
.login .side .facts b { display: block; font-size: 1.05rem; letter-spacing: 0; color: var(--nav-text);
  font-weight: 600; margin-bottom: 3px; text-transform: none; }
.login .ridge { position: absolute; left: 0; right: 0; bottom: 120px; width: 100%; height: 140px; opacity: 0.9; }
.login .form-side { display: grid; place-items: center; padding: 48px 32px; }
.login form { width: 100%; max-width: 360px; }
.login form h1 { font-size: 2rem; margin-bottom: 6px; }
.login form .lede { margin-bottom: 30px; font-size: 0.92rem; }
.login .foot { margin-top: 26px; font-size: 0.75rem; color: var(--muted); }

/* ── Breakpoints ────────────────────────────────────────────────────────── */

/* Tablet 768–1199: the sidebar collapses behind a menu button */
@media (max-width: 1199px) {
  .topbar { display: flex; }
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .shell.nav-open .sidebar { transform: none; box-shadow: 8px 0 32px rgba(30,38,32,0.25); }
  .main { margin-left: 0; }
  .page { padding: 34px 32px 80px; }
}

/* Phone <768: bottom tab bar, cards not tables, full-width forms */
@media (max-width: 767px) {
  .topbar .menu-btn { display: none; }
  .topbar { padding-left: 8px; }
  .tabbar { display: block; }
  .page { padding: 24px 18px calc(var(--tabbar) + var(--safe-b) + 32px); }
  .page-head { margin-bottom: 22px; padding-bottom: 16px; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; }
  .ledger .cell { padding: 18px 14px 16px; }
  .ledger .cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger .cell:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .ledger .fig { font-size: 1.6rem; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .panel { padding: 20px 18px; }
  .btn-block-phone { width: 100%; }
  .action-bar { display: block; position: fixed; left: 0; right: 0; z-index: 25;
    bottom: calc(var(--tabbar) + var(--safe-b)); padding: 10px 18px;
    background: linear-gradient(to top, var(--page) 70%, rgba(244,239,228,0)); }
  .action-bar .btn { width: 100%; }
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login .side { padding: 28px 22px 22px; min-height: 0; }
  .login .side .tag { margin: 26px 0 22px; font-size: 1.6rem; }
  .login .lockup-lg img { width: 104px; }
  .login .lockup-lg .wordmark { font-size: 0.8rem; margin-top: 10px; }
  .login .ridge { display: none; }
  .login .form-side { place-items: start center; padding: 32px 22px 40px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .login .side { padding: 44px 40px 36px; }
}

/* ── Milestone 2: lists, tables, dialogs, forms ─────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
.hint { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.page-head .caps a { color: var(--micro); }
.page-head .caps a:hover { color: var(--text); }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-ghost.danger { color: var(--terra-ink); }
.btn-danger { background: var(--terra-deep); color: #fff; }
.btn-danger:hover { background: #923F20; }
.spacer { flex: 1; }
.section.narrow { max-width: 440px; }
.section form { padding-top: 18px; }
.ledger-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger-3 .fig { font-size: 1.6rem; }

/* Toggle and checkbox rows: 44px tap targets, brand-coloured ticks */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none;
  accent-color: var(--river); }
.toggle, .check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-size: 0.86rem; color: var(--text2); }
.toggle span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.check.sm { min-height: 36px; font-size: 0.78rem; gap: 7px; }
.check em { color: var(--muted); font-style: normal; }

/* Location tree: hairline rows, indentation from --d (set via CSSOM) */
.tree { list-style: none; border-top: 1px solid var(--rule); }
.tree li { border-bottom: 1px solid var(--hair); }
.tree a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 14px;
  min-height: 52px; padding: 8px 4px 8px calc(4px + var(--d, 0) * 26px); color: var(--text); }
.tree a:hover { background: var(--paper); text-decoration: none; }
.tree .nm { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.tree li[data-depth="0"] .nm { font-weight: 600; }
.tree .elbow { width: 10px; height: 10px; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  flex: none; transform: translateY(-3px); }
.tree .meta { font-size: 0.75rem; color: var(--muted); text-align: right; }
.tree svg.ic { color: var(--rule); width: 18px; height: 18px; }
.tree .archived a, tr.archived td { color: var(--muted); }

/* Tables (desktop) that turn into cards (phone) */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--micro); padding: 0 14px 10px 0; border-bottom: 1px solid var(--rule); }
.table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table .r { text-align: right; }
.table td a { font-weight: 600; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, tr.clickable:focus-visible td { background: var(--paper); }

/* Sub-navigation (Admin tabs) and kind tabs */
.subnav { display: flex; gap: 26px; border-bottom: 1px solid var(--rule); margin: -10px 0 28px; }
.subnav a { padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--terracotta); }
.kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.kinds a[role="tab"] { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.8rem; color: var(--text2); text-decoration: none; }
.kinds a[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--nav-text); }
.kinds .aside { margin-left: auto; font-size: 0.78rem; }

/* Lookup list editor */
.lookup ol { list-style: none; border-top: 1px solid var(--rule); counter-reset: n; }
.lookup li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.lookup li::before { counter-increment: n; content: counter(n); width: 22px; flex: none; text-align: right;
  font-size: 0.72rem; color: var(--micro); font-variant-numeric: tabular-nums; }
.lookup li input[data-name] { flex: 1; min-width: 0; min-height: 42px; }
.lookup li.archived input[data-name] { color: var(--muted); text-decoration: line-through; }
.lookup .row-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lookup .use { min-width: 64px; text-align: right; margin-right: 6px; }
.lookup .icon-btn:disabled { opacity: 0.3; cursor: default; }
.lookup .icon-btn:hover:not(:disabled) { background: var(--sunk); }
.lookup-foot { display: flex; gap: 10px; align-items: center; margin: 18px 0 12px; }

/* Dialogs: a paper sheet with hairlines; full screen on phones */
.dlg { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0; background: var(--paper);
  color: var(--text); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; }
.dlg.wide { width: min(720px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(30,38,32,0.45); }
.dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
.dlg form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dlg-head, .dlg-foot { flex: none; }
.dlg-body { flex: 1; min-height: 0; }
/* Option labels inside a form field read as plain text, not as caps field labels */
.field label.check, .field label.toggle, .check span { font-size: 0.88rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 12px 14px 24px; border-bottom: 1px solid var(--rule); }
.dlg-head .icon-btn:hover { background: var(--sunk); }
.dlg-body { padding: 22px 24px 6px; overflow-y: auto; }
.dlg-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 24px 18px;
  border-top: 1px solid var(--hair); }
.dlg-msg { margin-bottom: 16px; color: var(--text2); }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
fieldset.field { border: 0; border-top: 1px solid var(--hair); padding-top: 14px; }
fieldset.field legend { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text2); padding: 0; margin-bottom: 4px; }
.radios { display: flex; gap: 18px; flex-wrap: wrap; }
.checklist { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--hair); padding: 2px 12px; background: #FFFDF8; }
.checklist .check { padding-left: calc(var(--d, 0) * 22px); }
.checklist.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.checklist.full { max-height: none; overflow: visible; }     /* every option in view, no inner scroll */
[hidden] { display: none !important; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); opacity: 0;
  pointer-events: none; background: var(--ink); color: var(--nav-text); padding: 12px 18px; border-radius: var(--radius);
  font-size: 0.86rem; max-width: calc(100vw - 32px); transition: opacity 0.2s, transform 0.2s;
  border-left: 3px solid var(--sage); }
.toast[data-kind="err"] { border-left-color: var(--terracotta); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Sidebar account links */
.sidebar .me .me-links { display: flex; align-items: center; gap: 18px; }
.sidebar .me .me-links a { margin-top: 12px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nav-dim); }
.sidebar .me .me-links a:hover { color: var(--nav-text); text-decoration: none; }

@media (max-width: 767px) {
  .head-actions .btn-primary { display: none; }          /* the sticky action bar has it */
  .head-actions { width: 100%; }
  .tree a { padding-left: calc(2px + var(--d, 0) * 18px); }
  .tree .meta { display: none; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--hair); padding: 12px 0; }
  .table td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .table td::before { content: attr(data-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--micro); padding-top: 3px; }
  .table td:first-child { grid-template-columns: minmax(0, 1fr); }
  .table td:first-child::before { display: none; }
  .table .r { text-align: left; }
  .table td > .chip { justify-self: start; }
  .table td.blank { display: none; }
  .ledger-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger-3 .cell:nth-child(n+3) { border-top: 0; }
  .ledger-3 .cell:nth-child(3) { border-left: 1px solid var(--hair); padding-left: 14px; }
  .ledger-3 .fig { font-size: 1.15rem; }
  .form-2, .checklist.cols { grid-template-columns: minmax(0, 1fr); }
  .dlg, .dlg.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .dlg form { height: 100%; }
  .dlg-body { flex: 1; padding: 18px 18px 6px; }
  .dlg-head { padding-left: 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .dlg-foot { padding: 12px 18px calc(14px + var(--safe-b)); }
  .dlg-foot .btn { flex: 1; }
  .dlg-foot .spacer { display: none; }
  .lookup li { flex-wrap: wrap; }
  .lookup li input[data-name] { flex-basis: calc(100% - 34px); }
  .lookup .row-tools { width: 100%; padding-left: 34px; justify-content: flex-start; }
  .lookup .use { margin-left: auto; }
  .kinds .aside { margin-left: 0; width: 100%; }
  .toast { bottom: calc(var(--tabbar) + var(--safe-b) + 76px); }
}

/* ── Milestone 3: inventory ─────────────────────────────────────────────── */
.btn-link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--river-ink); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn .ic, .btn svg.ic { width: 17px; height: 17px; }
.chip.muted-chip { background: var(--sunk); color: var(--muted); }
.chip.pri-urgent { background: var(--tint-red); color: var(--pri-red-ink); }
.chip.pri-urgent::before { background: var(--pri-red); }
.chip.pri-high { background: var(--tint-orange); color: var(--pri-orange-ink); }
.chip.pri-high::before { background: var(--pri-orange); }
.chip.pri-normal { background: var(--tint-yellow); color: var(--pri-yellow-ink); }
.chip.pri-normal::before { background: var(--pri-yellow); }
.chip.pri-low { background: var(--sunk); color: var(--muted); }
.wo-row { border-left: 4px solid transparent; padding-left: 10px; }
.wo-row.pri-urgent { border-left-color: var(--pri-red); }
.wo-row.pri-high { border-left-color: var(--pri-orange); }
.wo-row.pri-normal { border-left-color: var(--pri-yellow); }
.chips:empty { display: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
a.link-cell { color: inherit; text-decoration: none; }
a.link-cell:hover .caps { color: var(--river-ink); }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.search { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px;
  background: #FFFDF8; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--muted); }
.search:focus-within { outline: 2px solid var(--river); outline-offset: -1px; border-color: var(--river); }
.search input { border: 0; padding: 0; min-height: 44px; background: transparent; outline: none; }
.search input:focus { outline: none; }
.filters-btn { display: none; }
.filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 26px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.flt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.flt span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--micro); }
.flt select { min-height: 42px; padding: 8px 10px; font-size: 14px; }
.flt-checks { grid-column: 1 / -1; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.thumb { width: 48px; height: 48px; object-fit: cover; display: block; border-radius: var(--radius);
  background: var(--sunk); }
.thumb.none { display: grid; place-items: center; color: var(--rule); }
.thumb.none svg.ic { width: 20px; height: 20px; }
.table.inv td.ph, .table.inv th.ph { width: 64px; }
.table.inv td { vertical-align: middle; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }

/* Item page: photo strip */
.photos { margin-bottom: 30px; }
.gallery { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.gallery li { position: relative; }
.gallery button { display: block; width: 100%; padding: 0; border-radius: var(--radius); overflow: hidden; }
.g-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--sunk); }
.g-thumb.none { display: grid; place-items: center; }
.cover-tag { position: absolute; left: 6px; top: 6px; background: rgba(30,38,32,0.78); color: var(--nav-text);
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 6px; }
.no-photos { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 22px 18px;
  border: 1px dashed var(--rule); border-radius: var(--radius); font-size: 0.9rem; }
.photo-add { margin-top: 12px; }
.photo-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.photo-pick .btn { cursor: pointer; }
.pick-camera { display: none; }
.fig.fig-sm { font-size: 1.05rem; line-height: 1.6; min-height: 2rem; display: flex; align-items: center; }
.fig.fig-sm .chip { white-space: normal; line-height: 1.35; }
.rows.kv li { justify-content: flex-start; }
.rows.kv .k { width: 110px; flex: none; font-size: 0.82rem; }
.rows.kv .v { white-space: normal; color: var(--text); font-size: 0.9rem; }
.rows.kv .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline .k { font-size: 0.9rem; }
details.more { margin: 2px 0 18px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
details.more summary { cursor: pointer; min-height: 46px; display: flex; align-items: center; font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: '+'; width: 18px; color: var(--micro); font-size: 0.9rem; }
details.more[open] summary::before { content: '–'; }

/* Photo viewer */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: #121713; color: var(--nav-text); }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: #121713; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px 20px; }
.lb-count { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--nav-dim); }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(18,23,19,0.55); color: var(--nav-text); }
.lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }
.lightbox .icon-btn:hover { background: rgba(244,239,228,0.1); }
.lb-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 12px 16px calc(14px + var(--safe-b)); }
.btn-ghost-dark { border: 1px solid #3A443C; color: var(--nav-text); }
.btn-ghost-dark:hover { background: rgba(244,239,228,0.08); }
.btn-ghost-dark.danger { color: #F0B49B; }

@media (max-width: 1199px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .filters-btn { display: inline-flex; flex: none; }
  .filters { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters.open { display: grid; }
  .head-actions .btn-ghost[download] { display: none; }
  .pick-camera { display: inline-flex; }
  .photo-pick .btn { flex: 1; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .table.inv tr { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; }
  .table.inv td { display: block; padding: 2px 0; }
  .table.inv td::before { display: none; }
  .table.inv td.ph { grid-row: 1 / span 3; width: auto; }
  .table.inv .thumb { width: 64px; height: 64px; }
  .table.inv td[data-label="Location"] { font-size: 0.82rem; color: var(--muted); }
  .table.inv td[data-label="Qty"], .table.inv td[data-label="Value"] { display: none; }
  .rows.kv .k { width: 92px; }
}

/* ── Milestone 4: vendors ───────────────────────────────────────────────── */
.filters-inline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filters-inline .flt-checks { grid-column: auto / span 2; }
.stars { color: var(--straw-ink); letter-spacing: 1px; font-size: 0.85rem; white-space: nowrap; }
.stars .off { color: var(--hair); }
.chip svg.ic { width: 11px; height: 11px; }
.chip:has(svg.ic)::before { display: none; }
.vendor-list { list-style: none; border-top: 1px solid var(--rule); }
.vendor-list > li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.vendor-list > li.archived .v-name { color: var(--muted); }
.v-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.v-main:hover { text-decoration: none; }
.v-main:hover .v-name { text-decoration: underline; text-underline-offset: 3px; }
.v-name { font-weight: 600; font-size: 1rem; }
.v-sub { font-size: 0.86rem; }
.v-sys:empty { display: none; }
.contact-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.contact-btns.compact { margin: 0; flex-wrap: nowrap; }
.contact-btns.compact .btn { min-height: 40px; padding: 0 12px; }
.contact-btns .btn { gap: 8px; }
.contact-btns .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.rows .v.icon-btn { width: 40px; height: 40px; color: var(--river-ink); }
.vendor-logo { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vendor-logo img { max-width: min(320px, 100%); max-height: 72px; object-fit: contain; }
.vendor-logo { position: relative; }
.logo-btn { background: none; border: 1px solid transparent; padding: 4px; margin: -5px; cursor: pointer; border-radius: var(--radius); }
.logo-btn:hover, .logo-btn[aria-expanded="true"] { border-color: var(--hair); background: #FFFDF8; }
.logo-btn img { display: block; }
.logo-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 200px; display: flex; flex-direction: column;
  background: #FFFDF8; border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(0,0,0,0.12); padding: 4px 0; }
.logo-menu[hidden] { display: none; }
.logo-menu button { background: none; border: 0; text-align: left; padding: 11px 16px; font: inherit; font-size: 0.92rem; color: var(--text); cursor: pointer; }
.logo-menu button:hover, .logo-menu button:focus-visible { background: rgba(0,0,0,0.05); }
.logo-menu button.danger { color: var(--terra-ink); }
.phone-list { display: grid; gap: 8px; }
.contact-list { display: grid; gap: 12px; }
.contact-card { border: 1px solid var(--hair); padding: 10px 14px 4px; background: #FFFDF8; min-width: 0; }
.contact-card-head { display: flex; align-items: center; justify-content: space-between; }
.contact-card-head .btn-link { min-height: 36px; }
.form-addr { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 8rem; gap: 0 12px; }
.rows .contact-row { align-items: flex-start; }
.contact-row .v { text-align: right; line-height: 1.7; }
.loc-line, .loc-dist { margin-bottom: 8px; }
.ranch-pin { background: none; border: 0; }
.ranch-pin-badge { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); border: 2px solid #F4EFE4; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.ranch-pin-badge::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 7px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0; }
/* Leaflet's CSS sets marker-pane images to width: auto / max-width: none !important */
.leaflet-container .leaflet-marker-pane .ranch-pin-badge img { width: 30px !important; height: auto !important; max-width: 30px !important; }
.vendor-map { height: 280px; border: 1px solid var(--hair); margin: 6px 0 4px; z-index: 0; }
@media (max-width: 767px) { .form-addr { grid-template-columns: minmax(0, 1fr) 4.5rem; } .form-addr .field:last-child { grid-column: 1 / -1; } }
.phone-row { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem 44px; gap: 8px; align-items: center; }

@media (max-width: 1199px) {
  .filters-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-inline .flt-checks { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .filters.filters-inline { display: grid; }               /* only two selects: always shown on phones */
  .vendor-list > li { flex-direction: column; align-items: stretch; gap: 10px; }
  .contact-btns.compact .btn { flex: 1; padding: 0 8px; }
  .contact-btns:not(.compact) .btn { flex: 1 1 calc(50% - 8px); }
  .contact-btns:not(.compact) .btn:first-child { flex-basis: 100%; }
}

/* ── Milestone 5: work orders, proposals, approvals ─────────────────────── */
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.64rem; }
.overdue { color: var(--terra-ink); font-weight: 600; }
.subnav.scroll { overflow-x: auto; scrollbar-width: none; }
.subnav.scroll::-webkit-scrollbar { display: none; }
.subnav a { white-space: nowrap; }

.wo-list { list-style: none; border-top: 1px solid var(--rule); }
.wo-list > li { border-bottom: 1px solid var(--hair); }
.wo-row { display: flex; align-items: center; gap: 18px; padding: 14px 4px; color: var(--text); }
.wo-row:hover { background: var(--paper); text-decoration: none; }
.wo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wo-title { font-weight: 600; overflow-wrap: anywhere; }
.wo-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.amt { font-weight: 600; }
.due { align-self: center; color: var(--muted); }

.status-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: -12px 0 26px; }
.page > .section { margin-bottom: 44px; }

/* Bids: side by side on desktop, stacked cards on phones */
.bids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding-top: 14px; }
.bid { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bid.won { border-color: var(--sage); box-shadow: inset 0 3px 0 var(--sage); }
.bid.dim { opacity: 0.72; }
.bid header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bid-vendor { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bid-amt { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.bid-scope { white-space: pre-wrap; color: var(--text2); font-size: 0.9rem; border-top: 1px solid var(--hair); padding-top: 8px; }
.bid-decision { color: var(--text2); border-top: 1px solid var(--hair); padding-top: 8px; }
.bid-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.bid-actions .btn-primary { flex: 1; }
.needs { margin-top: auto; padding: 10px 12px; background: var(--tint-straw); color: var(--straw-ink); font-size: 0.82rem;
  border-left: 3px solid var(--straw); }
.bid-manage { display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--hair); }
.bid-manage .btn-link { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; }
.file-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.file-thumb { padding: 0; width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 0.86rem; max-width: 100%; }
.file-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grid-2.tight { gap: 20px 32px; padding-top: 14px; }
.wo-photos .caps { margin-bottom: 8px; }
.gallery.small-g { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-bottom: 10px; }
.comment-form { display: flex; gap: 8px; padding: 12px 0; }
.comment-form input { min-height: 44px; }
.ev-comment { display: block; color: var(--text2); font-size: 0.86rem; margin-top: 2px; white-space: pre-wrap; }
.timeline .chip { vertical-align: 1px; }
.section-head .aside .btn { margin: -6px 0; }
/* Keep 44px tap targets in section headings without making that heading taller than its neighbours,
   so side-by-side sections (e.g. Details | Condition history) line up. */
.section-head .aside .btn-link { min-height: 44px; margin: -16px 0; display: inline-flex; align-items: center; }

@media (max-width: 767px) {
  .bids { grid-template-columns: minmax(0, 1fr); }
  .wo-row { align-items: flex-start; gap: 12px; }
  .status-bar { margin-top: -6px; }
  .status-bar .btn { flex: 1; }
  .grid-2.tight { grid-template-columns: minmax(0, 1fr); }
  .section-head { flex-wrap: wrap; }
}

/* ── Milestone 6: documents, dashboard, audit log ── */
.file-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.file-meta svg { width: 14px; height: 14px; flex: none; }
.file-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.docs td[data-label="Expires"] { white-space: nowrap; }
.doc-preview { display: block; padding: 0; width: 100%; border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; background: var(--sunk); cursor: zoom-in; }
.doc-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.doc-file { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--hair);
  border-radius: var(--radius); background: var(--sunk); overflow-wrap: anywhere; }
.doc-file svg { width: 32px; height: 32px; flex: none; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
fieldset.links { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
fieldset.links legend { margin-bottom: 10px; }
.prio.spend { grid-template-columns: 120px minmax(0, 1fr) 96px; }
.prio.spend .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prio.spend .n { font-size: 0.85rem; }
.prio.spend .bar { background: var(--sage); }
.overdue-list { margin-top: 14px; }
.audit-filters input[type="date"] { min-height: 44px; }
.table.audit td { font-size: 0.86rem; }
.table.audit td[data-label="When"] { white-space: nowrap; }
@media (min-width: 768px) {
  .table.audit { table-layout: fixed; }
  .table.audit th:nth-child(1) { width: 130px; }
  .table.audit th:nth-child(2) { width: 150px; }
  .table.audit th:nth-child(3) { width: 38%; }
  .table.audit td[data-label="What"] { padding-right: 24px; }
}
.changes summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--text2); }
.diff { border-collapse: collapse; font-size: 0.8rem; margin-top: 6px; width: 100%; table-layout: fixed; }
.diff th, .diff td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hair);
  vertical-align: top; overflow-wrap: anywhere; }
.diff thead th { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.diff tbody th { font-weight: 600; color: var(--text2); width: 34%; }
.diff code { font-size: 0.76rem; white-space: pre-wrap; }

@media (max-width: 767px) {
  .table.docs td.blank { display: none; }
  .table.audit td[data-label="Changes"] { grid-template-columns: minmax(0, 1fr); }
  .table.audit td[data-label="Changes"]::before { display: none; }
  .prio.spend { grid-template-columns: 92px minmax(0, 1fr) 84px; }
  .doc-actions .btn { flex: 1; justify-content: center; }
}

/* ── Milestone 7: CSV import, Fill from photo ── */
.photo-pick + .hint { margin-top: 10px; }
.import-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 6px; }
.map-head { margin: 18px 0 8px; }
.map-list { list-style: none; border-top: 1px solid var(--hair); }
.map-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--hair); }
.map-col { display: flex; flex-direction: column; min-width: 0; }
.map-col span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-errors { list-style: none; max-height: 220px; overflow-y: auto; font-size: 0.84rem; margin-bottom: 12px;
  border: 1px solid var(--hair); padding: 6px 10px; }
.import-errors li { padding: 4px 0; overflow-wrap: anywhere; }
.import-errors b { margin-right: 6px; color: var(--terra-ink); }
.recognize { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.recognize .btn { cursor: pointer; }
.ai-filled { box-shadow: inset 3px 0 0 var(--river); background: var(--tint-river) !important; }
@media (max-width: 767px) {
  .map-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .recognize .btn { flex: 1; }
}

/* Vendor email inbox */
.inbox-banner { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.inbox-banner > svg.ic { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.inbox-banner .small { margin-top: 4px; }
.inbox-grid { align-items: start; }
.inbox-form .section { margin-bottom: 8px; }
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0 24px; }
.email-body .pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.86rem; max-height: 420px;
  overflow-y: auto; padding: 4px 0 14px; color: var(--text2); }
.lede-sm { margin: 4px 0 10px; color: var(--text2); }
.wo-row .chips svg.ic { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 1199px) {
  .inbox-grid { grid-template-columns: minmax(0, 1fr); }
}
.vendor-note { margin: 2px 0 14px; }

/* Several documents at once: drop zone, per-file rows, drag-onto-page outline (Jamey 2026-10-10) */
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 26px 16px; border: 1px dashed var(--rule); border-radius: var(--radius); background: var(--sunk); }
.drop-zone svg { width: 28px; height: 28px; color: var(--micro); }
.drop-zone .link { color: var(--river-ink); text-decoration: underline; }
.drop-zone.dropping, .drop-zone:hover { border-color: var(--terracotta); background: var(--tint-terra); }
.drop-zone:focus-within { outline: 2px solid var(--river); outline-offset: 2px; }
.drop-zone.compact { flex-direction: row; justify-content: center; padding: 12px 16px; }
.drop-zone.compact svg { width: 20px; height: 20px; }
.drop-zone.compact .small { display: none; }
.shared details.more { margin: 0 0 12px; }
.drop-zone.compact { flex-direction: row; justify-content: center; padding: 12px 16px; }
.drop-zone.compact svg { width: 20px; height: 20px; }
.drop-zone.compact .small { display: none; }
.shared details.more { margin: 0 0 12px; }
.shared { margin-top: 18px; padding: 14px 16px 4px; border: 1px solid var(--hair); border-radius: var(--radius); }
.shared > .caps { margin-bottom: 10px; }
.shared .hint { margin: -4px 0 12px; }
.up-list { list-style: none; margin: 14px 0 0; padding: 0; }
.up-list li { border-top: 1px solid var(--hair); padding: 14px 0 0; }
.up-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.up-head svg { width: 18px; height: 18px; flex: none; color: var(--micro); }
.up-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.up-state { margin-left: auto; text-align: right; }
.up-head .icon-btn:hover { background: var(--sunk); }
.up-list li.done { opacity: 0.6; }
.up-list li.done .up-state { color: var(--sage-ink); font-weight: 600; }
.up-list li.failed .up-state { color: var(--terra-ink); font-weight: 600; }
.up-list .up-more { margin-bottom: 8px; }
.drop-ok { position: relative; }
.drop-ok.dropping { outline: 2px dashed var(--terracotta); outline-offset: 4px; background: var(--tint-terra); }
.drop-ok.dropping::after { content: 'Drop to add documents'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; color: var(--terra-ink); background: rgba(244,222,211,0.85); pointer-events: none; z-index: 5; }
.drop-page.drop-ok.dropping::after { place-items: start center; padding-top: 30vh; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.inbox-hint { margin-top: 4px; }

/* Inbox count on the tab bar and sidebar */
.badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--terracotta); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0; line-height: 17px; text-align: center; }
.tabbar .badge { position: absolute; top: 7px; left: calc(50% + 6px); }
.nav .badge { margin-left: auto; }

/* Inbox + invoices (user feedback 2026-10-10): icon column, then the message in a wide column */
.search-row { margin: 0 0 18px; }
.search-row .search { max-width: 460px; }
.inbox-row { align-items: flex-start; }
.kind-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--sunk);
  color: var(--text2); margin-top: 1px; }
.kind-ic svg.ic { width: 19px; height: 19px; }
.kind-ic.k-email { background: var(--tint-river); color: var(--river-ink); }
.kind-ic.k-proposal { background: var(--tint-straw); color: var(--straw-ink); }
.kind-ic.k-invoice { background: var(--tint-sage); color: var(--sage-ink); }
.inbox-row .msg { color: var(--text2); font-size: 0.9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.inbox-row.is-action .wo-title::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--terracotta); margin-left: 8px; vertical-align: 2px; }
.inbox-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: -8px 0 20px; }
.inv-layout { display: grid; gap: 28px; }
.inv-file .inv-preview img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--sunk);
  border: 1px solid var(--hair); }
.inv-form .form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.decide .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.decisions li { align-items: flex-start; }
@media (min-width: 1024px) {
  .inv-layout { grid-template-columns: minmax(260px, 2fr) 3fr; align-items: start; }
  .inv-file { position: sticky; top: 24px; }
}
@media (min-width: 768px) {
  .table.audit.approvals th:nth-child(1) { width: 190px; }
  .table.audit.approvals th:nth-child(2) { width: 170px; }
  .table.audit.approvals th:nth-child(3) { width: 26%; }
  .table.audit.approvals th:nth-child(5) { width: 120px; }
  .table.audit.approvals td[data-label="Amount"] { text-align: right; }
  .table.audit.approvals th:nth-child(5) { text-align: right; }
}
/* six tabs on a 360px phone: labels must fit 60px */
.tabbar a span, .tabbar button span { letter-spacing: 0.03em; white-space: nowrap; }

/* Locations map (Jamey 2026-10-10) */
.loc-map { height: 440px; border: 1px solid var(--hair); z-index: 0; background: var(--sunk); }
.loc-map.placing, .loc-map.placing .leaflet-interactive, .loc-map.placing .leaflet-grab { cursor: crosshair; }
.map-hint { margin-top: 8px; }
.placing-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px;
  background: var(--ink); color: var(--nav-text); font-size: 0.9rem; }
.placing-bar[hidden] { display: none; }
.placing-bar .btn { color: var(--nav-text); border-color: var(--nav-hair); min-height: 36px; }
.loc-pin { background: none; border: 0; }
.loc-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--terracotta);
  border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.loc-dot.sub { width: 14px; height: 14px; margin: 2px; background: var(--straw); }
.loc-dot.focus { background: var(--pri-red); transform: scale(1.25); }
.leaflet-tooltip.loc-label { background: rgba(30,38,32,0.86); color: #F4EFE4; border: 0; border-radius: 2px; padding: 2px 7px;
  font: 600 0.72rem/1.3 var(--font-ui); box-shadow: none; }
.leaflet-tooltip.loc-label::before { display: none; }
.leaflet-tooltip.loc-label.focus { background: var(--pri-red); }
.loc-pop { min-width: 160px; font: 0.88rem/1.4 var(--font-ui); }
.loc-pop-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.tree li { display: flex; align-items: center; }
.tree li > a { flex: 1; min-width: 0; }
.tree .pin-btn { flex: none; padding: 0 12px; font-size: 0.78rem; white-space: nowrap; }
.tree .on-map svg.ic { width: 14px; height: 14px; color: var(--terracotta); vertical-align: -2px; }
@media (max-width: 767px) {
  .loc-map { height: 320px; }
  .tree .pin-btn { padding: 0 8px; }
  .tree li > a .meta { display: none; }
}
/* Leaflet's layer switch expects images/layers.png, which isn't vendored: draw it instead (CSP allows data: images) */
.leaflet-container .leaflet-control-layers-toggle, .leaflet-container.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2620' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 8.5 4.5L12 12.5 3.5 8z'/%3E%3Cpath d='m3.5 12 8.5 4.5 8.5-4.5'/%3E%3Cpath d='m3.5 16 8.5 4.5 8.5-4.5'/%3E%3C/svg%3E");
  background-size: 24px 24px; }
.leaflet-control-layers-expanded { font: 0.85rem/1.5 var(--font-ui); }
.loc-map.no-labels .leaflet-tooltip.loc-label:not(.focus) { display: none; }
.leaflet-control-layers-separator { margin: 6px 0; }