/* Auto AVID — PHREG. Mobile-first compliance tool. */

/* Raleway is the brokerage web font. Self-hosted as a single variable file so
   the app renders correctly with no network — agents inspect vacant houses in
   the high desert where there is frequently no signal. */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/raleway-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --accent: #009688;
  --accent-hover: #00796b;
  --accent-soft: rgba(0, 150, 136, 0.12);
  --accent-ink: #ffffff;
  --brand-teal-lt: #13b9b9;

  --ok: #2e7d32;
  --ok-soft: rgba(46, 125, 50, 0.13);
  --warn: #9a6b12;
  --warn-soft: rgba(154, 107, 18, 0.13);
  --err: #a32e2e;
  --err-soft: rgba(163, 46, 46, 0.11);

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --tap: 44px;

  --shadow-1: 0 1px 2px rgba(11, 21, 36, 0.06), 0 1px 3px rgba(11, 21, 36, 0.04);
  --shadow-2: 0 10px 30px rgba(11, 21, 36, 0.14);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
}

[data-theme='light'] {
  --bg: #f9f9f8;
  --bg-alt: #eef1f0;
  --surface: #ffffff;
  --surface-2: #f6f8f8;
  --border: #dde3e2;
  --border-strong: #c4cecd;
  --ink: #262b2b;
  --ink-2: #4f5a59;
  --ink-3: #788483;
  --nav: #0d3d3a;
  --nav-ink: #e6f4f2;
  --nav-ink-dim: #93b8b4;
}

[data-theme='dark'] {
  --bg: #06110f;
  --bg-alt: #0a1917;
  --surface: #0f201e;
  --surface-2: #142927;
  --border: #1f3937;
  --border-strong: #2b4a47;
  --ink: #e6f1ef;
  --ink-2: #a7bebb;
  --ink-3: #7d9793;
  --nav: #0a1917;
  --nav-ink: #e6f1ef;
  --nav-ink-dim: #86a5a1;
  --ok: #6cc46f;
  --ok-soft: rgba(108, 196, 111, 0.15);
  --warn: #e0a944;
  --warn-soft: rgba(224, 169, 68, 0.14);
  --err: #ef7676;
  --err-soft: rgba(239, 118, 118, 0.14);
  --accent: #26c6b4;
  --accent-hover: #4fd8c7;
  --accent-soft: rgba(38, 198, 180, 0.16);
  --accent-ink: #06231f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- shell */
.app { min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav); color: var(--nav-ink);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand svg { flex: none; color: var(--nav-ink); }
.brand-text { min-width: 0; }
.brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
}
.brand-sub {
  font-size: 10.5px; color: var(--nav-ink-dim); letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--nav-ink); border-radius: var(--radius-sm); padding: 0 10px;
  font-size: 12.5px; font-weight: 600;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.icon-btn .lbl { display: none; }
@media (min-width: 640px) { .icon-btn .lbl { display: inline; } }

/* context strip */
.ctxbar {
  position: sticky; top: 64px; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 8px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ctx-addr { font-weight: 700; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.ctx-meta { font-size: 11.5px; color: var(--ink-3); }
.unit-switch { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; transition: box-shadow 0.25s ease; border-radius: 12px; }
.unit-switch-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); animation: unit-pulse 0.7s ease 2; }
@keyframes unit-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.02); } }
.unit-btn {
  min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
}
.unit-btn[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* nav */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--nav); border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  background: none; border: 0; color: var(--nav-ink-dim);
  min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 6px 2px;
  border-top: 2px solid transparent;
}
.tab svg { width: 20px; height: 20px; }
.tab[aria-current='page'] { color: var(--nav-ink); border-top-color: var(--accent); }
.tab .badge {
  position: absolute; transform: translate(16px, -14px);
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  font-size: 9px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; text-align: center;
}

main {
  flex: 1; max-width: 1120px; width: 100%; margin: 0 auto;
  padding: 14px 14px calc(112px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .tabs {
    position: sticky; top: 64px; bottom: auto; border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    grid-template-columns: repeat(7, max-content); padding: 0 14px; gap: 4px;
    background: var(--nav);
  }
  .tab { flex-direction: row; gap: 8px; font-size: 12.5px; min-height: 46px; padding: 0 14px; border-top: 0; border-bottom: 2px solid transparent; }
  .tab[aria-current='page'] { border-bottom-color: var(--accent); }
  .ctxbar { top: 110px; }
  main { padding: 22px 22px 60px; }
}

/* --------------------------------------------------------------- primitives */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-3); }
.card-head h2, .card-head h3 { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.card-head .spacer { margin-left: auto; }
.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); font-weight: 700; margin: var(--space-5) 0 var(--space-2);
}
.muted { color: var(--ink-3); font-size: 13px; }
.hint { color: var(--ink-3); font-size: 12px; margin-top: 4px; }

.btn {
  min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); font-weight: 650; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn svg { flex: none; width: 16px; height: 16px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.btn-sm { min-height: 34px; font-size: 12.5px; padding: 0 10px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

label.field { display: block; margin-bottom: var(--space-3); min-width: 0; }
label.field > span.lab {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
input[type='text'], input[type='date'], input[type='time'], input[type='search'], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--ink); font-size: 15px;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.grid-2 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
  max-width: 100%; overflow-wrap: anywhere;
}
.pill-ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill-warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pill-err { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.pill-accent { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--ink-3);
  background: var(--surface);
}
.empty h3 { color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.empty p { font-size: 13.5px; max-width: 44ch; margin: 0 auto var(--space-4); }
.empty svg { color: var(--ink-3); margin: 0 auto var(--space-3); }

.banner {
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface-2); margin-bottom: var(--space-3);
  display: flex; gap: 8px; align-items: flex-start;
}
.banner-err { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.banner-warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ------------------------------------------------------------ room cards */
.room {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-3);
}
.room[data-state='blank'] { border-left-color: var(--err); }
.room[data-state='flagged'] { border-left-color: var(--warn); }
.room[data-state='ok'] { border-left-color: var(--ok); }
.room-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.room-name { font-size: 15px; font-weight: 750; min-width: 0; overflow-wrap: anywhere; }
.room-code {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.room-head .spacer { margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  min-height: 36px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
details.chipbox { margin-top: 10px; }
details.chipbox > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent);
  min-height: 34px; display: flex; align-items: center; gap: 6px; list-style: none;
}
details.chipbox > summary::-webkit-details-marker { display: none; }
details.chipbox > summary::before { content: '＋'; font-size: 13px; }
details.chipbox[open] > summary::before { content: '－'; }

.lint { margin-top: 10px; display: grid; gap: 8px; }
.lint-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 10px; background: var(--surface-2); display: grid; gap: 6px;
}
.lint-item.tone-error { border-color: color-mix(in srgb, var(--err) 40%, transparent); background: var(--err-soft); }
.lint-item.tone-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.lint-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lint-match { font-family: var(--font-mono); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.lint-reason { font-size: 12.5px; color: var(--ink-2); }
.lint-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.avid-out {
  margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 9px 10px;
}
.avid-out .lab {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.avid-out pre {
  margin: 4px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}

/* -------------------------------------------------------------- photos */
.photo-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: flex-start; }
.thumb {
  position: relative; width: 84px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); padding: 0;
  display: block; text-align: left;
}
.thumb img { width: 100%; height: 62px; object-fit: cover; }
.thumb .tid {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--ink);
  padding: 3px 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb.needs-caption { border-color: var(--warn); }
.thumb .warn-dot {
  position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--warn); color: #fff; font-size: 10px; line-height: 14px; text-align: center; font-weight: 800;
}
.cap-btn {
  width: 84px; min-height: 84px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px;
}
.cap-btn:hover { border-color: var(--accent); color: var(--accent); }
.photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: stretch; }
.pcard {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column; text-align: left; padding: 0;
}
.pcard img { width: 100%; height: 104px; object-fit: cover; background: var(--surface-2); }
.pcard .meta { padding: 7px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pcard .meta > .btn, .pcard .meta > select { margin-top: auto; }
.pcard .eid { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); }
.pcard .rm { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.pcard .cp { font-size: 11.5px; color: var(--ink); overflow-wrap: anywhere; }
.dropzone { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------- readiness */
.score-wrap { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .val {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; letter-spacing: -0.03em;
}
.ring .val small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.check-list { display: grid; gap: 6px; margin-top: var(--space-3); }
.check {
  display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 9px 10px; min-height: var(--tap);
}
.check .mark { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.check.ok .mark { background: var(--ok-soft); color: var(--ok); }
.check.bad .mark { background: var(--err-soft); color: var(--err); }
.check .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.check .t1 { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.check .t2 { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }

/* ------------------------------------------------------------- tx list */
.tx-list { display: grid; gap: 10px; }
.tx {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: var(--space-4); box-shadow: var(--shadow-1);
}
.tx.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tx h3 { font-size: 15px; overflow-wrap: anywhere; }
.tx .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.tx .pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }

/* -------------------------------------------------------------- drawer */
.drawer-back {
  position: fixed; inset: 0; background: rgba(6, 12, 22, 0.55); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  background: var(--surface); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface);
}
.drawer-head h2 { font-size: 15px; }
.drawer-body { overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.drawer-body h3 { font-size: 13.5px; margin-bottom: 6px; }
.ref details {
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface-2);
}
.ref summary {
  cursor: pointer; padding: 12px; font-weight: 700; font-size: 13.5px; min-height: var(--tap);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.ref summary::-webkit-details-marker { display: none; }
.ref summary::after { content: '▾'; margin-left: auto; color: var(--ink-3); }
.ref details[open] summary::after { content: '▴'; }
.ref .rbody { padding: 0 12px 12px; font-size: 13px; color: var(--ink-2); }
.ref .rbody ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.ref .rbody li { overflow-wrap: anywhere; }
.ref .rule { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.ref .rule:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ref .rule b { color: var(--ink); }
.src-list { display: grid; gap: 8px; }
.src-list a { font-size: 12.5px; }

/* --------------------------------------------------------------- modal */
.modal-back {
  position: fixed; inset: 0; background: rgba(6, 12, 22, 0.6); z-index: 70;
  display: none; align-items: flex-end; justify-content: center; padding: 0;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border); width: 100%;
  max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; flex-direction: column; box-shadow: var(--shadow-2);
}
@media (min-width: 720px) {
  .modal-back { align-items: center; padding: 24px; }
  .modal { max-width: 720px; border-radius: var(--radius-lg); }
}
.modal-head { padding: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal-head h2 { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 14px; overflow-y: auto; }
.modal-foot {
  padding: 12px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; background: var(--surface);
}

.diff { display: grid; gap: 12px; }
@media (min-width: 720px) { .diff { grid-template-columns: 1fr 1fr; } }
.diff-pane { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px; min-width: 0; }
.diff-pane .lab { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 6px; }
.diff-pane pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.d-del { background: var(--err-soft); color: var(--err); text-decoration: line-through; }
.d-add { background: var(--ok-soft); color: var(--ok); }

.photo-modal-img {
  width: 100%; max-height: 42vh; object-fit: contain; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 10px; font-size: 12.5px; margin-top: 10px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- toast */
.toasts {
  position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 80;
  pointer-events: none;
}
@media (min-width: 900px) { .toasts { left: 20px; right: auto; bottom: 20px; width: min(340px, calc(100vw - 420px)); } }
.toast {
  background: var(--nav); color: var(--nav-ink); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; box-shadow: var(--shadow-2);
  animation: rise 0.2s ease; overflow-wrap: anywhere; pointer-events: auto; cursor: pointer;
}
.toast.err { border-left: 3px solid var(--err); }
.toast.ok { border-left: 3px solid var(--ok); }
.toast.warn { border-left: 3px solid var(--warn); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.footer-note {
  margin-top: var(--space-5); border-top: 1px solid var(--border); padding-top: var(--space-4);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
}
.footer-note strong { color: var(--ink-2); }

.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp 0.7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

.skel { background: linear-gradient(90deg, var(--surface-2), var(--bg-alt), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }

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

/* print container is only used by the print stylesheet */
#print-root { display: none; }

/* photo with no stored blob on this device */
img.img-missing {
  position: relative; background: var(--surface-2);
  border: 1px dashed var(--border-strong); box-sizing: border-box;
}
img.img-missing::after {
  content: attr(data-missing);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; font-size: 10.5px; line-height: 1.4;
  color: var(--ink-3); background: var(--surface-2);
}

/* -------------------------------------- datetime inputs & calendar sheet */
.dt-field .dt-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  flex-wrap: wrap;
}
.dt-field .dt-row > input[type="text"] {
  flex: 1 1 160px; min-width: 0;
}
.dt-icon {
  padding: 0 12px; font-size: 18px; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.dt-field .hint { display: block; margin-top: 6px; }

/* fullscreen sheet backdrop */
.dt-sheet {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6, 12, 22, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: dtFade 0.15s ease-out;
}
@media (min-width: 640px) {
  .dt-sheet { align-items: center; }
}
@keyframes dtFade { from { opacity: 0; } to { opacity: 1; } }

body.dt-sheet-open { overflow: hidden; }

.dt-sheet-inner {
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 380px;
  padding: 14px 14px 18px;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  animation: dtSlide 0.18s ease-out;
}
@media (min-width: 640px) {
  .dt-sheet-inner { border-radius: 16px; }
}
@keyframes dtSlide { from { transform: translateY(12px); } to { transform: translateY(0); } }

.dt-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.dt-title { font-weight: 600; font-size: 15px; color: var(--ink); }

.dt-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  font-size: 11px; color: var(--ink-3); text-align: center;
  padding: 4px 0;
}
.dt-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dt-cell {
  min-height: 42px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); border-radius: 8px;
  font-size: 15px; cursor: pointer;
  touch-action: manipulation;
}
.dt-cell:hover { background: var(--bg-alt); }
.dt-cell.dt-empty { background: transparent; border-color: transparent; visibility: hidden; }
.dt-cell.dt-today { border-color: var(--accent); }
.dt-cell.dt-sel {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}

.dt-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}

/* time sheet */
.dt-time-sheet .dt-time-cols {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
}
.dt-time-label {
  font-size: 11px; color: var(--ink-3); text-align: center;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.dt-time-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.dt-time-cols .dt-ampm { grid-template-columns: 1fr; }
.dt-time-cell {
  min-height: 42px; padding: 0 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); border-radius: 8px;
  font-size: 15px; cursor: pointer;
  touch-action: manipulation;
}
.dt-time-cell:hover { background: var(--bg-alt); }
.dt-time-cell.dt-sel {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}

/* Native-label file pickers: <label> wraps a hidden file <input>.
 * The label needs to look and behave like the buttons it replaces. */
label[data-role="file-picker"] {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
label[data-role="file-picker"].btn,
label[data-role="file-picker"].cap-btn {
  /* .btn/.cap-btn already give the visual box; just guarantee that the
     hidden file input inside doesn't disrupt the flex layout. */
}
label[data-role="file-picker"] > input[type="file"] {
  /* Keep the input focusable/tappable but visually hidden. Some Android
     builds require the input to be laid-out (not display:none) for
     capture=environment to route to the camera app. */
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Unit tab remove (×) — only shown next to accessory dwellings so the user
 * can one-tap remove an accidental extra ADU without navigating to Files. */
.unit-btn-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.unit-btn-wrap .unit-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
.unit-btn-x {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--err);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.unit-btn-x:hover, .unit-btn-x:focus-visible {
  background: color-mix(in srgb, var(--err) 12%, var(--surface));
  border-color: var(--err);
  outline: none;
}

/* ---- weather source badge -------------------------------------------- */
/* Tells the agent at a glance whether the reading came from the lookup or
   from their own typing. Auto-filled data should never masquerade as a
   human attestation on a disclosure form. */
.wx-src { margin-left: 8px; font-style: normal; }
.wx-src em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.wx-src .wx-auto {
  background: #e8f1fb;
  color: #1d4e89;
  border: 1px solid #c3dcf5;
}
.wx-src .wx-manual {
  background: #eef6ee;
  color: #2b6033;
  border: 1px solid #cfe6d1;
}


/* ---- brand mark ------------------------------------------------------- */
/* The key is the brokerage's identity element; it carries the teal so the
   wordmark beside it can stay in plain nav ink. */
.brand svg.brand-key { color: var(--brand-teal-lt); flex: 0 0 auto; }
.brand-name { letter-spacing: -0.01em; }
.brand-sub { letter-spacing: 0.01em; }


/* ---- splash ----------------------------------------------------------- */
/* Covers the viewport until the first render lands. Painted from CSS with no
   script dependency, so a slow phone shows the brand rather than a white gap. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav);
  opacity: 1;
  transition: opacity 260ms ease;
}
.splash.is-hiding { opacity: 0; }
.splash.is-gone { display: none; }
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
/* The V2 lockup is ~3:1, so it is capped narrower than the old 5:1 mark to
   keep the same visual mass on the panel. */
.splash-logo {
  width: 100%;
  max-width: 262px;
  height: auto;
  display: none;
}
/* The full lockup has a silver serif wordmark, so the knockout variant is the
   one that belongs on the dark splash panel. */
.splash-logo-light { display: block; }
.splash-app {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nav-ink);
}
.splash-sub {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-ink-dim);
}
.splash-bar {
  margin-top: 22px;
  width: 116px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.splash-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-teal-lt);
  animation: splash-slide 1s ease-in-out infinite;
}
@keyframes splash-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash-bar span { animation: none; width: 100%; }
}

/* ---- home card lockup ------------------------------------------------- */
/* Anchors the Files tab with the brokerage identity. Swaps variant by theme
   because the wordmark is dark ink on transparency. */
.home-lockup {
  display: flex;
  justify-content: center;
  padding: 4px 0 18px;
}
.home-lockup img { width: 100%; max-width: 212px; height: auto; }
.home-lockup .lockup-light { display: none; }
[data-theme='dark'] .home-lockup .lockup-dark { display: none; }
[data-theme='dark'] .home-lockup .lockup-light { display: block; }

/* ======================================================================== */
/* Site Recon additions                                                     */
/*                                                                          */
/* Appended to the Auto AVID sheet rather than forked, so both apps stay on  */
/* one set of tokens. Everything below is new; nothing above is altered.     */
/* ======================================================================== */

/* ---- 7-up tab bar ------------------------------------------------------ */
/* Site Recon has seven sections instead of AVID's five. At 390px that is    */
/* 55.7px per tab, so the label drops to 9px and the icon to 18px; the label */
/* is allowed to ellipsis rather than wrap and shove the bar taller.        */
.tabs-7 { grid-template-columns: repeat(7, 1fr); }
.tabs-7 .tab {
  min-height: 54px; font-size: 9px; letter-spacing: 0; padding: 6px 1px; gap: 2px;
}
.tabs-7 .tab svg { width: 18px; height: 18px; }
.tabs-7 .tab > span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabs-7 .tab .badge { transform: translate(14px, -12px); }
@media (min-width: 900px) {
  .tabs-7 { grid-template-columns: repeat(7, max-content); }
  .tabs-7 .tab {
    font-size: 12.5px; min-height: 46px; padding: 0 13px; gap: 8px; letter-spacing: 0.02em;
  }
  .tabs-7 .tab svg { width: 20px; height: 20px; }
}

/* ---- splash mark ------------------------------------------------------- */
/* Site Recon splashes on the square land icon, not the AVID wordmark. */
.splash-mark {
  width: 76px; height: 76px; display: block;
  border-radius: 18px; background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

/* ---- risk / context banners ------------------------------------------- */
.riskbanner {
  display: flex; gap: 8px; align-items: flex-start;
  /* Full-bleed tint like the context bar below it, but the text still lines up
     with the 1120px content column instead of hugging the window edge. */
  padding: 9px max(14px, calc((100% - 1120px) / 2));
  font-size: 12px; line-height: 1.45; font-weight: 600;
  color: var(--warn); background: var(--warn-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.riskbanner-err {
  color: var(--err); background: var(--err-soft);
  border-bottom-color: color-mix(in srgb, var(--err) 30%, transparent);
}
.riskbanner-i { flex: none; font-size: 13px; line-height: 1.35; }
.fixturebanner {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px max(14px, calc((100% - 1120px) / 2));
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---- map ---------------------------------------------------------------- */
/* One Leaflet instance is created once and re-parented between screens, so   */
/* the host lives outside the view and the per-screen slots are just boxes it  */
/* gets moved into.                                                           */
.map-host {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.map-slot {
  position: relative; width: 100%; height: 300px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.map-slot-tall { height: 380px; }
@media (min-width: 900px) {
  .map-slot { height: 420px; }
  .map-slot-tall { height: 560px; }
}
.map-pane { position: absolute; inset: 0; z-index: 1; background: transparent; }
.map-fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 20px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
/* The graticule is a full-bleed backdrop *behind* the Leaflet pane, not an
   overlay chip: whole-arc-minute lat/long lines drawn to canvas so the operator
   can still judge scale and position when no basemap tile will load. The pane
   above it is transparent, so it shows through wherever imagery is missing. */
.map-graticule {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
}
.map-card-head { align-items: flex-start; flex-wrap: wrap; }
.map-card-tools {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  flex: 1 1 430px; min-width: 0; flex-wrap: wrap;
}
.basemap-picker {
  display: flex; min-width: 0; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); scrollbar-width: thin;
}
.basemap-select { display: none; }
.basemap-option {
  min-height: var(--tap); padding: 6px 8px; border: 0; border-right: 1px solid var(--border);
  background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 700;
  line-height: 1.2; white-space: nowrap;
}
.basemap-option:last-child { border-right: 0; }
.basemap-option:hover { background: var(--surface); color: var(--ink); }
.basemap-option.is-active {
  background: var(--accent); color: #fff;
}
.location-toggle { min-height: var(--tap); white-space: nowrap; }
.location-toggle.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.map-control-notes { flex-basis: 100%; }
.location-status, .map-status {
  margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}
.location-status.is-error, .map-status { color: var(--warn); }
.map-status.is-hidden { display: none; }
@media (max-width: 620px) {
  .map-card-head > h2 { flex-basis: 100%; }
  .map-card-head > .spacer { display: none; }
  .map-card-tools { flex-basis: 100%; justify-content: flex-start; }
  .basemap-picker { width: 100%; flex-wrap: wrap; overflow: visible; }
  .basemap-option { flex: 1 1 50%; max-width: 50%; min-height: var(--tap); }
  .basemap-option:nth-child(2) { border-right: 0; }
  .basemap-option:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* Markers. All are divIcons whose iconSize/iconAnchor already centre the box on
   the coordinate, so the inner span fills its icon box and must NOT carry a
   negative margin — that would shift the glyph off the point it marks. */
.corner-pin, .mark-pin, .obs-pin, .photo-pin, .pick-pin, .gps-dot {
  background: none; border: 0;
  display: flex; align-items: center; justify-content: center;
}
.corner-pin span, .mark-pin span, .obs-pin span, .photo-pin span, .pick-pin span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.corner-pin span {
  color: #fff; background: #37474f; border: 2px solid #fff;
}
.corner-pin.is-marked span { background: var(--ok); }
/* A field mark is the surveyed-in position: square, teal, distinct from the
   computed corner it belongs to. */
.mark-pin span {
  border-radius: 5px; color: #fff; background: #009688; border: 2px solid #fff;
}
.offset-label {
  background: none; border: 0; white-space: nowrap; text-align: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 18px;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.obs-pin span { color: #fff; background: #5c6bc0; border: 2px solid #fff; font-size: 13px; }
.obs-pin.obs-joshua_tree span { background: #2e7d32; }
.obs-pin.obs-monument span { background: #00838f; }
.obs-pin.obs-well span { background: #0277bd; }
.obs-pin.obs-encroachment span { background: #b23c17; }
.obs-pin.obs-access span { background: #6d4c41; }
.obs-pin.obs-debris span { background: #616161; }
.obs-pin.obs-structure span { background: #455a64; }
.obs-pin.obs-utility span { background: #8e6c00; }
.obs-pin.obs-other span { background: #5c6bc0; }
.photo-pin span { color: #06231f; background: #ffca28; border: 2px solid #fff; }
.pick-pin span { color: var(--accent-ink); background: var(--accent); border: 2px solid #fff; }
.gps-dot i {
  display: block; width: 14px; height: 14px;
  border-radius: 999px; background: #1e88e5; border: 2px solid #fff;
  box-shadow: 0 0 0 6px rgba(30, 136, 229, 0.22);
}

/* Leaflet popups inherit the app surface rather than Leaflet's white. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.leaflet-popup-content { margin: 9px 12px; font-size: 12.5px; line-height: 1.5; }
.leaflet-container { background: var(--surface-2); font-family: var(--font-sans); }
.leaflet-bar a {
  background: var(--surface); color: var(--ink); border-color: var(--border);
}
.leaflet-bar a:hover { background: var(--surface-2); }
.pop-coord { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.pop-prov { font-size: 11px; color: var(--ink-3); }

/* ---- value primitives -------------------------------------------------- */
/* `.nv` is the one class allowed to render an absent value, and it is always  */
/* italic and dim so a blank can never read as a measurement.                 */
.nv { color: var(--ink-3); font-style: italic; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sm { font-size: 12px; }
.src-line {
  font-size: 11px; line-height: 1.5; color: var(--ink-3);
  overflow-wrap: anywhere; margin-top: 4px;
}
.kv-2 {
  display: grid; grid-template-columns: 1fr; gap: 4px 14px;
  font-size: 12.5px; margin-top: 10px;
}
@media (min-width: 620px) { .kv-2 { grid-template-columns: 1fr 1fr; } }

/* ---- stat grid --------------------------------------------------------- */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
@media (min-width: 720px) { .statgrid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 10px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0;
}
.stat-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat-v {
  margin-top: 3px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat-s { margin-top: 2px; font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }

/* ---- data table (legs / closure) --------------------------------------- */
.tablewrap {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table.dt { width: 100%; border-collapse: collapse; font-size: 12px; }
table.dt th, table.dt td {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.dt th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); position: sticky; top: 0;
}
table.dt td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
table.dt td:first-child { font-family: var(--font-sans); font-weight: 700; }
table.dt tr:last-child td { border-bottom: 0; }
.tfoot {
  padding: 8px 10px; font-size: 11px; color: var(--ink-3);
  background: var(--surface-2); border-top: 1px solid var(--border); line-height: 1.5;
}

/* ---- records list ------------------------------------------------------- */
.reclist { display: grid; gap: 8px; margin-top: 12px; }
.recrow {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 11px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
@media (min-width: 720px) {
  .recrow { grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
  .recside { text-align: right; }
}
.recmain { min-width: 0; }
.recside { flex: none; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reclabel {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.recval {
  margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
}
.recval.is-missing { font-size: 13.5px; font-weight: 600; font-style: italic; color: var(--ink-3); }
.recsrc { margin-top: 4px; font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; line-height: 1.5; }
.recnote { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.recnote-err { color: var(--err); }

/* ---- GPS readout ------------------------------------------------------- */
.gpsline {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2); margin-top: 8px;
}
.gpscard {
  margin-top: 12px; padding: 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
}
.readout { margin-top: 10px; }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (min-width: 720px) { .ro-grid { grid-template-columns: repeat(4, 1fr); } }
.ro { min-width: 0; }
.ro-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.ro-v {
  margin-top: 2px; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere;
}
.ro-note { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* ---- corner navigation list -------------------------------------------- */
.navlist { display: grid; gap: 8px; margin-top: 12px; }
.navrow {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.navrow.is-marked { border-left-color: var(--ok); }
.navid {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong);
}
.navrow.is-marked .navid { color: var(--accent-ink); background: var(--ok); border-color: var(--ok); }
.navmain { flex: 1; min-width: 0; }
.navdist {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.navsub { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; line-height: 1.45; }
.navacts { flex: none; display: flex; flex-direction: column; gap: 5px; }
.nomark { font-size: 11.5px; font-style: italic; color: var(--ink-3); }

/* ---- observations ------------------------------------------------------ */
.obslist { display: grid; gap: 8px; margin-top: 12px; }
.obsrow {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.obsglyph {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.obsmain { flex: 1; min-width: 0; }
.obstitle { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.obssub { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; line-height: 1.45; }
.obsnotes {
  margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.obsacts { flex: none; display: flex; flex-direction: column; gap: 5px; }

/* ---- report checklist -------------------------------------------------- */
.chkgrid { display: grid; gap: 2px; margin-top: 10px; }
@media (min-width: 720px) { .chkgrid { grid-template-columns: 1fr 1fr; gap: 2px 18px; } }
.chkline {
  display: flex; gap: 9px; align-items: flex-start;
  min-height: var(--tap); padding: 7px 2px; font-size: 13px; line-height: 1.45;
  color: var(--ink); cursor: pointer;
}
.chkline input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }

/* ---- compact form pieces ----------------------------------------------- */
.field.sm { margin-top: 8px; }
.field.sm label { font-size: 11px; }
.inline-select {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-2); margin-top: 8px;
}
.inline-select select, .inline-select input {
  min-height: 38px; padding: 0 9px; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit;
}

/* ---- legal framing / signature ---------------------------------------- */
/* The non-survey disclaimer. It is deliberately not styleable away: it keeps  */
/* its border and its own block even when a screen is dense.                  */
.legal {
  margin-top: 14px; padding: 11px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-2);
}
.legal strong { color: var(--ink); }
.legal p { margin: 0 0 6px; }
.legal p:last-child { margin-bottom: 0; }
.sigblock {
  margin-top: 14px; padding: 12px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px; color: var(--ink-2); line-height: 1.7;
}
.sigblock .sigrule {
  display: block; margin: 16px 0 4px; border-bottom: 1px solid var(--ink-3); max-width: 280px;
}

/* ---- lookup attempt log ------------------------------------------------ */
/* Every county tried, in order, with what came back. Failures stay visible   */
/* so a "not found" is never mistaken for "no parcel here".                   */
.attempts {
  margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.attempt {
  display: flex; gap: 8px; align-items: baseline; padding: 7px 10px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-2);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.attempt:last-child { border-bottom: 0; }
.attempt .mono { color: var(--ink-3); }

/* An absent distance must not borrow the typographic authority of a measured
   one, so `.nv` drops out of the tabular mono face wherever it lands. */
.navdist .nv, .ro-v .nv, .stat-v .nv, table.dt td .nv {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
}
/* Keep a card title on one line when it shares its head row with a select. */
.card-head-tight h2, .card-head-tight h3 { white-space: nowrap; }

/* Reference-drawer section headings need air above them. AVID's `.ref` block
   only styled <details> groups, and Site Recon's drawer mixes plain prose
   sections in with them. */
.drawer-body.ref h3 {
  margin: 18px 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.drawer-body.ref > h3:first-child { margin-top: 0; }
.drawer-body.ref p { margin: 0 0 9px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* ---- mobile density corrections (measured at 390x844) ------------------ */
/* The nowrap title is a desktop-only affordance. At 390px the select shares
   the row and the two collide, so below 720px the head is allowed to stack. */
.card-head-tight h2, .card-head-tight h3 { white-space: normal; }
@media (min-width: 720px) {
  .card-head-tight h2, .card-head-tight h3 { white-space: nowrap; }
}
@media (max-width: 719px) {
  .card-head-tight { flex-wrap: wrap; }
  .card-head-tight .inline-select, .card-head-tight select { width: 100%; }
}

/* Three stacked bars (risk, fixture, context) were eating 60% of a 390x844
   viewport before any content. All three stay \u2014 the disclaimers are not
   optional \u2014 but they are set tighter on a phone. */
@media (max-width: 719px) {
  .riskbanner { padding: 7px 12px; font-size: 11.5px; line-height: 1.4; }
  .fixturebanner {
    padding: 6px 12px; font-size: 11px; font-weight: 600; line-height: 1.4;
    letter-spacing: 0; text-transform: none;
  }
  .fixturebanner b, .fixturebanner strong { text-transform: uppercase; letter-spacing: 0.04em; }
  .ctxbar { padding: 6px 12px; gap: 4px 8px; }
  .ctxbar .ctx-addr { font-size: 13px; }
  .ctxbar .ctx-meta { font-size: 11px; line-height: 1.4; }
  .ctxbar .unit-switch { margin-left: auto; }
  .ctxbar .unit-btn { min-height: 32px; font-size: 11.5px; padding: 0 10px; }
}

/* The Field-screen no-marker banner reads as two squeezed columns at 390px.
   It stays a single flowing block on a phone and only splits on wider views. */
@media (max-width: 719px) {
  .banner.nomark { display: block; }
  .banner.nomark b { display: block; margin-bottom: 3px; }
}


/* ---- map-first landing -------------------------------------------------- */
.map-first { position: relative; min-width: 0; }
.map-omnibox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 5px; }
.map-omnibox input { min-width: 0; background: var(--surface); }
.map-interpretation { min-height: 20px; font-size: 12px; color: var(--ink-3); }
.text-btn { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.map-first-controls { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.map-first-controls .map-card-tools { margin: 0; }
.map-first-work { min-width: 0; }
.map-first-slot { height: 60vh; min-height: 440px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.map-first-work.has-scratch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 12px; align-items: stretch; }
.map-first-work.has-scratch .map-first-slot { height: max(60vh, 560px); }
.scratch-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 14px; min-width: 0; align-self: stretch; }
.scratch-summary { display: none; }
.scratch-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.scratch-head h2 { font-size: 18px; margin-top: 2px; }
.eyebrow { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: var(--accent); }
.scratch-basis { margin: 8px 0 12px; font-size: 11.5px; color: var(--ink-3); }
.scratch-fields { margin: 0; border-top: 1px solid var(--border); }
.scratch-fields > div { display: grid; grid-template-columns: minmax(98px, .78fr) minmax(0, 1.25fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: start; }
.scratch-fields dt { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 750; }
.scratch-fields dd { margin: 0; font: 600 12.5px/1.35 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.copy-field { border: 0; padding: 0; margin-left: 7px; background: transparent; color: var(--accent); font: 700 10.5px var(--font-sans); text-decoration: underline; text-underline-offset: 2px; }
.scratch-promote { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.scratch-delivery { margin-top: 12px; padding: 11px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; }
.scratch-delivery .btn-row { margin-top: 8px; }
.map-lookup-status { margin-top: 10px; }
.map-lookup-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); font-size: 13px; }
@media (min-width: 900px) {
  main:has(.map-first) { max-width: none; padding-top: 14px; }
  .map-first { max-width: 1480px; margin: 0 auto; }
}
@media (max-width: 899px) {
  main:has(.map-first) { padding: 8px 8px calc(66px + env(safe-area-inset-bottom)); }
  .map-omnibox { position: relative; z-index: 8; padding-top: 2px; background: var(--bg); }
  .map-omnibox .btn { min-width: 62px; padding: 0 11px; }
  .map-first-controls { position: absolute; z-index: 9; right: 14px; top: 66px; margin: 0; }
  .map-first-controls .map-card-tools { width: auto; }
  .map-first-controls .basemap-picker { display: none; }
  .map-first-controls .basemap-select { display: block; width: 142px; min-height: 34px; padding: 4px 24px 4px 8px; font-size: 11px; background: var(--surface); box-shadow: var(--shadow-1); }
  .map-first-controls .location-toggle { min-width: 34px; min-height: 34px; padding: 0; margin-left: 4px; background: var(--surface); box-shadow: var(--shadow-1); }
  .map-first-controls .location-label, .map-first-controls .map-control-notes { display: none; }
  .map-first-slot { height: calc(100dvh - 252px); min-height: 430px; border-radius: var(--radius); }
  .map-first-work.has-scratch { display: block; }
  .map-first-work.has-scratch .map-first-slot { height: calc(100dvh - 252px); min-height: 430px; }
  .scratch-panel {
    position: fixed; z-index: 35; left: 8px; right: 8px; bottom: calc(58px + env(safe-area-inset-bottom));
    margin: 0; padding: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 22px rgba(0,0,0,.18), var(--shadow-1);
  }
  .scratch-summary {
    display: flex; width: 100%; min-height: 68px; padding: 10px 14px; border: 0; border-radius: 18px 18px 0 0;
    background: var(--surface); color: var(--ink); align-items: center; justify-content: space-between; text-align: left;
  }
  .scratch-summary b { display: block; font: 750 15px/1.2 var(--font-mono); }
  .scratch-summary small { display: block; margin-top: 3px; font-size: 11px; font-weight: 650; color: var(--ink-3); }
  .scratch-summary-cue { font-size: 20px; color: var(--accent); }
  .scratch-sheet-body { display: none; max-height: min(43dvh, 360px); overflow-y: auto; padding: 0 14px 14px; }
  .scratch-panel.is-expanded .scratch-sheet-body { display: block; }
  .scratch-panel.is-expanded .scratch-summary { border-bottom: 1px solid var(--border); }
  .scratch-fields > div { grid-template-columns: 112px minmax(0, 1fr); }
  .scratch-head { flex-wrap: wrap; }
  .scratch-head h2 { display: none; }
  .scratch-head .eyebrow { margin-top: 12px; }
  .map-first [data-location-status].is-off { display: none; }
}

/* v9 — report edition picker (branded / unbranded) */
.edition-pick { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px 10px; margin: 14px 0 0; display: grid; gap: 6px; }
.edition-pick legend { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 0 4px; opacity: .8; }
.edition-opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.edition-opt input { margin-top: 3px; accent-color: var(--accent); }
.edition-opt span { display: grid; gap: 2px; }
.edition-opt b { font-size: 13px; }
.edition-opt small { font-size: 11.5px; opacity: .78; line-height: 1.35; }
.edition-opt.is-on { border-color: var(--accent); background: var(--surface-2); }
.card .edition-pick { margin: 0 0 12px; }