/* Studio Slate v1.1.0 tokens. Local runtime copy for static/PWA/iOS builds. */
:root {
  --ss-bg: #f5f1ea;
  --ss-paper: #fdfbf6;
  --ss-line: #e2dccf;
  --ss-line-soft: #ece6d9;
  --ss-hero: #2e353d;
  --ss-hero-2: #3a424b;
  --ss-on-hero: #ece6d9;
  --ss-on-hero-dim: #a9aeb4;
  --ss-ink: #1f2429;
  --ss-muted: #6c747c;
  --ss-orange-50: #fbeee5;
  --ss-orange-500: #c8612e;
  --ss-orange-700: #a84e22;
  --ss-accent: var(--ss-orange-500);
  --ss-accent-deep: var(--ss-orange-700);
  --ss-accent-soft: var(--ss-orange-50);
  --ss-status-open-fg: #c43a3a;
  --ss-status-open-bg: #f0d9d6;
  --ss-status-in-progress-fg: #d49b3e;
  --ss-status-in-progress-bg: #f5e8c8;
  --ss-status-closed-fg: #6a8c5a;
  --ss-status-closed-bg: #d8e3cf;
  --ss-status-verified-fg: #5b7ea0;
  --ss-status-verified-bg: #d3def0;
  --ss-file-pdf-fg: #c43a3a;
  --ss-file-pdf-bg: #f0d9d6;
  --ss-file-docx-fg: #5b7ea0;
  --ss-file-docx-bg: #d3def0;
  --ss-file-xlsx-fg: #6a8c5a;
  --ss-file-xlsx-bg: #d8e3cf;
  --ss-file-pptx-fg: #d49b3e;
  --ss-file-pptx-bg: #f5e8c8;
  --ss-font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ss-font-serif: 'Iowan Old Style', Charter, Georgia, serif;
  --ss-font-num: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ss-font-office-body: Calibri, Arial, sans-serif;
  --ss-font-office-serif: Cambria, Georgia, serif;
  --ss-font-office-num: Consolas, Courier New, monospace;
  --ss-font-feature-tabular-nums: tnum;
  --ss-space-side-gutter: 32px;
  --ss-space-row-padding-y: 14px;
  --ss-space-control-h: 32px;
  --ss-space-button-h: 36px;
  --ss-space-inline-gap: 8px;
  --ss-radius-control: 6px;
  --ss-radius-input: 8px;
  --ss-radius-card: 10px;
  --ss-radius-pill: 9999px;
  --ss-radius-preview-hero: 0;
  --ss-border-hairline: 1px;
  --ss-border-strong-rule: 2px;
  --ss-border-selection-bar: 3px;
  --ss-shadow-rest: none;
  --ss-shadow-hover: none;
  --ss-shadow-picker-card-hover: 0 12px 24px -12px rgba(31,36,41,0.15);
  --ss-motion-row-hover-duration: 80ms;
  --ss-motion-row-hover-easing: ease;
  --ss-motion-chip-border-duration: 100ms;
  --ss-motion-chip-border-easing: ease;
  --ss-frame-masthead-h: 88px;
  --ss-frame-phase-rail-h: 52px;
  --ss-frame-toolbar-h: 62px;
  --ss-frame-count-strip-h: 36px;
  --ss-frame-preview-pane-w: 460px;
  --ss-frame-preview-pane-collapse-at: 900px;
  --ss-type-masthead-title-size: 30px;
  --ss-type-masthead-title-weight: 700;
  --ss-type-masthead-title-tracking: -0.01em;
  --ss-type-masthead-kicker-size: 10px;
  --ss-type-masthead-kicker-weight: 600;
  --ss-type-masthead-kicker-tracking: 0.12em;
  --ss-type-preview-h2-size: 22px;
  --ss-type-preview-h2-weight: 700;
  --ss-type-preview-eyebrow-size: 11px;
  --ss-type-preview-eyebrow-weight: 600;
  --ss-type-preview-eyebrow-tracking: 0.06em;
  --ss-type-table-header-size: 10px;
  --ss-type-table-header-weight: 600;
  --ss-type-table-header-tracking: 0.08em;
  --ss-type-row-name-size: 15px;
  --ss-type-row-name-weight: 500;
  --ss-type-row-name-tracking: -0.005em;
  --ss-type-body-size: 14px;
  --ss-type-body-weight: 400;
  --ss-type-mono-cell-size: 12px;
  --ss-type-mono-cell-weight: 400;
  --ss-type-chip-size: 12px;
  --ss-type-chip-weight: 500;
}


/* SOR — Studio Slate aliases. The satellite owns only the accent override. */

:root {
  --ss-orange-500: #c8612e;

  --bg: var(--ss-bg);
  --paper: var(--ss-paper);
  --line: var(--ss-line);
  --ink: var(--ss-ink);
  --muted: var(--ss-muted);
  --hero: var(--ss-hero);
  --hero-2: var(--ss-hero-2);
  --accent: var(--ss-accent);
  --accent-deep: var(--ss-accent-deep);
  --red: var(--ss-status-open-fg);   --red-bg: var(--ss-status-open-bg);
  --amber: var(--ss-status-in-progress-fg); --amber-bg: var(--ss-status-in-progress-bg);
  --green: var(--ss-status-closed-fg); --green-bg: var(--ss-status-closed-bg);
  --blue: var(--ss-status-verified-fg);  --blue-bg: var(--ss-status-verified-bg);

  --radius-sm: var(--ss-radius-control);
  --radius-md: var(--ss-radius-input);
  --radius-lg: var(--ss-radius-card);
  --radius-xl: 16px;

  --serif: var(--ss-font-serif);
  --sans: var(--ss-font-body);
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    linear-gradient(180deg, rgba(245,241,234,0.94), rgba(245,241,234,1) 360px),
    radial-gradient(1200px 600px at 100% -10%, rgba(200,97,46,0.08), transparent 60%),
    radial-gradient(900px 700px at -10% 100%, rgba(46,53,61,0.07), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Top bar */
.topbar {
  background: rgba(31,36,41,0.94);
  backdrop-filter: blur(12px);
  color: #f5f1ea;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    12px
    max(20px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .brand .mark { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: white; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.topbar .brand .name { font-weight: 700; letter-spacing: 1.4px; font-size: 13px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .actions { display: flex; gap: 8px; flex-wrap: nowrap; }
.topbar .actions:empty { display: none; }
.account-btn {
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #f5f1ea;
  border-radius: 999px;
  min-height: 34px;
  padding: 4px 10px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
}
.account-btn:hover { background: rgba(255,255,255,0.1); }
.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: white;
  font: 900 12px/1 var(--sans);
}
.account-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 12px/1 var(--sans);
}
.topbar .crumb {
  font: 600 11px/1 var(--sans); letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(245,241,234,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* Buttons */
.btn {
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font: 600 13px/1 var(--sans);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: #f6efe1; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(31,36,41,0.12); }
.btn.ghost:hover { background: rgba(31,36,41,0.04); }
.btn.ghost-dark { background: transparent; color: #f5f1ea; border-color: rgba(255,255,255,0.18); }
.btn.ghost-dark:hover { background: rgba(255,255,255,0.06); }
.btn.danger { color: var(--red); border-color: rgba(196,58,58,0.4); }
.btn.danger:hover { background: var(--red-bg); }
.btn svg { width: 14px; height: 14px; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.icon { padding: 8px; }
.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  margin: -2px 0 12px;
  font: 800 12px/1.2 var(--sans);
}
.account-status {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.62);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 12px;
  color: var(--muted);
  font: 600 13px/1.4 var(--sans);
}
.account-status strong { color: var(--ink); font-weight: 800; word-break: break-word; }

/* Layout shell */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1 0 auto; padding: 22px 20px 128px; max-width: 1280px; margin: 0 auto; width: 100%; }
.main.narrow { max-width: 880px; }

/* Stuart Digital ownership footer (Option B lockup — matches Plannr, HQ #782).
   Vendor mark, not SOR branding: hidden in print/PDF export so it never lands
   on a client's report, and removable for a white-label build by setting
   window.SOR_HIDE_VENDOR_MARK = true. */
.app-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 26px;
  background: #faf7f0;
  border-top: 1px solid var(--line);
}
.app-footer img { height: 22px; display: block; }
.app-footer .cpy { font-size: 11.5px; color: var(--muted); }
.app-footer[hidden] { display: none; }
/* The fixed action dock is centred and up to 430px wide, so below ~900px it
   lands on top of the footer text. Stack the mark and clear the dock's height
   the same way .main already does. */
@media (max-width: 900px) {
  .app-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 20px calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

body.route-preview { overflow-x: hidden; }
body.route-preview .main {
  max-width: none;
  padding-inline: 0;
}
.preview-shell {
  display: grid;
  gap: 18px;
}
.preview-stage-viewport {
  width: 100%;
  padding: 0 0 24px;
}
.preview-stage-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  --preview-stage-scale: 1;
}
.preview-stage-frame .report-stage {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  transform: translateX(-50%) scale(var(--preview-stage-scale));
  transform-origin: top center;
  will-change: transform;
}

/* Headings & meta */
.title { font: 600 30px/1.15 var(--serif); letter-spacing: -0.02em; }
.title.lg { font-size: 42px; }
.hero-title { font-size: clamp(46px, 7vw, 88px); line-height: 1.12; letter-spacing: -0.02em; max-width: 680px; }
.section-title-main { font-size: 30px; margin-top: 6px; }
.subtitle { font: 500 13px/1.5 var(--sans); color: var(--muted); margin-top: 6px; }
.eyebrow { font: 700 11px/1 var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--accent); border-radius: 1px; }
.section-h { font: 700 11px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.section-h::before { content: ""; display: inline-block; width: 14px; height: 1.5px; background: var(--accent); border-radius: 1px; opacity: 0.7; }
.folio { font: 600 10px/1 var(--sans); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.folio strong { color: var(--accent); font-weight: 700; }
.lede { font: 400 italic 15px/1.55 var(--serif); color: #4a525a; }
.hero-lede { font-size: 18px; max-width: 600px; }

/* Presentation-inspired hero compositions */
.home-hero,
.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 28px;
  align-items: stretch;
  margin: 8px 0 30px;
}
.home-copy,
.project-copy {
  background: rgba(253,251,246,0.74);
  border: 1px solid rgba(226,220,207,0.9);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  position: relative;
  overflow: hidden;
}
.home-copy::after,
.project-copy::after {
  content: "";
  position: absolute;
  inset: auto 34px 28px auto;
  width: 100px;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.cloud-sync-status {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  color: var(--muted);
  font: 600 12px/1.35 var(--sans);
}
.cloud-sync-status strong {
  display: block;
  color: var(--ink);
  font: 800 12px/1.25 var(--sans);
}
.cloud-sync-status span {
  display: block;
  margin-top: 2px;
}
.cloud-sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4d9a61;
  box-shadow: 0 0 0 3px rgba(77,154,97,0.12);
}
.cloud-sync-status.syncing .cloud-sync-dot,
body.cloud-syncing .cloud-sync-status .cloud-sync-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,97,46,0.14);
  animation: sync-pulse 900ms ease-in-out infinite;
}
.cloud-sync-status .btn {
  align-self: center;
}
@keyframes sync-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.65; }
  50% { transform: scale(1.18); opacity: 1; }
}
.proof-strip,
.plate-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.proof,
.plate-stats div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.proof span,
.plate-stats strong {
  font: 700 28px/1 var(--sans);
  color: var(--ink);
  letter-spacing: -0.8px;
}
.proof em,
.plate-stats span {
  font: 700 9px/1 var(--sans);
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: normal;
}
.hero-frame,
.project-plate {
  border-radius: 18px;
  overflow: hidden;
  background: var(--hero);
  min-height: 430px;
  position: relative;
  box-shadow: 0 18px 44px rgba(31,36,41,0.15);
}
.hero-frame img,
.project-plate img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}
.hero-frame::after,
.project-plate::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,36,41,0.45));
  pointer-events: none;
}
.hero-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  color: var(--paper);
  padding-top: 14px;
  border-top: 1px solid rgba(245,241,234,0.35);
}
.hero-caption strong {
  font: 700 11px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-caption span {
  max-width: 280px;
  text-align: right;
  font: 500 12px/1.4 var(--sans);
  color: rgba(245,241,234,0.84);
}
.project-plate .plate-stats {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  padding: 14px 16px;
  background: rgba(253,251,246,0.92);
  border: 1px solid rgba(226,220,207,0.8);
  border-radius: 12px;
}
.section-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
}
.section-note {
  font: 600 11px/1.4 var(--sans);
  color: var(--muted);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

/* Cards / panels */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.panel + .panel { margin-top: 14px; }

.row-list { display: flex; flex-direction: column; gap: 10px; }
.report-row {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 14px 16px;
  background: white;
  cursor: pointer;
}
.report-row:hover,
.report-row:focus {
  border-color: #cfc6b1;
  box-shadow: 0 6px 18px rgba(31,36,41,0.06);
  outline: none;
}
.report-row .row-flex { flex-wrap: nowrap; }
.report-row .report-delete {
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(196,58,58,0.06);
}
.report-row .report-delete svg { width: 15px; height: 15px; }

/* Project cards (home) — dossier-style catalogued entries */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.project-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px;
  text-align: left; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  text-decoration: none; color: inherit;
  position: relative;
}
.project-card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 28px, transparent 28px);
  border-radius: 0 0 1px 1px;
}
.project-card:hover { border-color: #cfc6b1; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31,36,41,0.06); }
.project-card .code { font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.project-card .name { font: 600 20px/1.18 var(--serif); margin-top: 2px; letter-spacing: -0.2px; }
.project-card .meta { font: 500 12px/1.4 var(--sans); color: var(--muted); }
.project-card .divider { height: 1px; background: var(--line); margin: 4px 0 2px; }
.project-card .project-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(196,58,58,0.06);
}
.project-card .project-delete svg { width: 15px; height: 15px; }
.project-card.add {
  border-style: dashed; align-items: center; justify-content: center; color: var(--muted);
  background: transparent; min-height: 140px; cursor: pointer;
}
.project-card.add::before { display: none; }
.project-card.add svg { width: 22px; height: 22px; margin-bottom: 6px; }

/* Floating app navigation */
.app-dock {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  height: 78px;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 26px;
  background: rgba(253,251,246,0.78);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 18px 46px rgba(31,36,41,0.22), inset 0 0 0 1px rgba(255,255,255,0.42);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 8px 10px;
}

/* Help hub + Plannrr-style embedded guide overlay */
.help-hero {
  max-width: 780px;
  padding: 38px 0 30px;
}
.help-hero .title { font-size: clamp(42px, 7vw, 72px); margin: 8px 0 16px; }
.help-hero .lede { max-width: 650px; }
.help-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding-bottom: 36px;
}
.help-guide-card {
  position: relative;
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(253,251,246,.92);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.help-guide-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}
.help-guide-no {
  position: absolute;
  right: 22px;
  top: 20px;
  color: rgba(31,36,41,.16);
  font: 700 42px/1 var(--serif);
}
.help-guide-card h2 { margin: 12px 0 10px; font: 600 28px/1.15 var(--serif); letter-spacing: -0.02em; }
.help-guide-card p { max-width: 440px; margin: 0; color: var(--muted); font: 500 14px/1.55 var(--sans); }
.help-guide-actions { display: flex; gap: 8px; margin-top: 24px; }
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: rgba(20,24,27,.55);
}
.guide-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.guide-bar strong { font: 800 14px/1.2 var(--sans); }
.guide-bar span { flex: 1; }
.guide-bar a,
.guide-bar button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  text-decoration: none;
  font: 700 12px/1 var(--sans);
}
.guide-bar a:hover,
.guide-bar button:hover { border-color: var(--accent); }
.guide-overlay iframe { flex: 1; width: 100%; border: 0; background: var(--paper); }
.dock-btn {
  min-width: 0;
  height: 60px;
  border: 0;
  background: transparent;
  color: #747d7f;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 20px;
  font: 800 10px/1 var(--sans);
}
.dock-btn svg {
  width: 23px;
  height: 23px;
}
.dock-btn.active {
  color: var(--accent);
}
.dock-btn.prominent {
  color: white;
  transform: translateY(-14px);
}
.dock-btn.prominent svg {
  width: 31px;
  height: 31px;
  padding: 13px;
  border-radius: 22px;
  background: var(--accent);
  box-sizing: content-box;
  box-shadow: 0 16px 30px rgba(200,97,46,0.34), inset 0 0 0 1px rgba(255,255,255,0.28);
}
.dock-btn.prominent span {
  color: #6d7678;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-btn:focus-visible {
  outline: 2px solid rgba(200,97,46,0.45);
  outline-offset: -2px;
}
.app-fab {
  position: fixed;
  left: 50%;
  bottom: calc(51px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 38;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 22px;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 34px rgba(200,97,46,0.34), inset 0 0 0 1px rgba(255,255,255,0.28);
}
.app-fab:hover { background: var(--accent-deep); }
.app-fab svg { width: 30px; height: 30px; }
.dock-sheet {
  position: fixed;
  left: max(18px, env(safe-area-inset-left, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  z-index: 37;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 22px;
  background: rgba(253,251,246,0.94);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 22px 58px rgba(31,36,41,0.24), inset 0 0 0 1px rgba(255,255,255,0.5);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
  padding: 14px;
}
.dock-sheet-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 34;
  border: 0;
  background: transparent;
}
.dock-sheet-title {
  font: 900 11px/1 var(--sans);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dock-sheet-close {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 10px;
  font: 800 10px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.dock-sheet-row {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-top: 1px solid rgba(31,36,41,0.08);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  font: 800 14px/1.25 var(--sans);
  text-align: left;
}
.dock-sheet-row em {
  color: var(--muted);
  font: 800 11px/1 var(--sans);
  font-style: normal;
}
.dock-sheet-row.danger { color: var(--red); }

/* Forms */
.field { margin-bottom: 12px; }
.field label, label.field-label { display: block; font: 700 10px/1 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.field-label-row label { margin-bottom: 0; }
.field-label-row span,
.field-help {
  color: var(--muted);
  font: 600 11px/1.35 var(--sans);
}
.field-help { margin-top: 6px; }
.field-error {
  color: var(--red);
  font: 700 11px/1.35 var(--sans);
  margin-top: 6px;
}
.field input, .field textarea, .field select {
  width: 100%; font: 500 14px/1.4 var(--sans);
  padding: 10px 12px; background: white;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink); outline: none; font-family: var(--sans);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,97,46,0.12); }
.field textarea { resize: vertical; min-height: 80px; }
.input-action-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.input-action-row input { min-width: 0; }
.voice-btn {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 9px;
  font: 700 10px/1 var(--sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.voice-btn svg { width: 13px; height: 13px; }
.voice-btn:hover:not(:disabled) { color: var(--ink); border-color: #cfc6b1; background: #f6efe1; }
.voice-btn.listening {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,97,46,0.15);
}
.voice-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.voice-note { min-height: 15px; margin-top: 5px; font: 600 11px/1.35 var(--sans); color: var(--muted); }
/* Dictation mic overlaid on the caption field so it stays reachable with the
   iOS keyboard up; icon-only, label is sr-only except when listening. */
.caption-input { position: relative; }
.caption-input textarea { padding-left: 52px; }
.caption-voice {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 8px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(31,36,41,0.08);
}
.caption-voice svg { width: 16px; height: 16px; }
.caption-voice .vb-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.caption-voice.listening .vb-label {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 0 4px 0 2px;
  overflow: visible; clip: auto;
}
textarea[spellcheck="true"],
input[spellcheck="true"],
[contenteditable][spellcheck="true"] {
  -webkit-user-select: text;
  user-select: text;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--sans); padding: 5px 9px;
  border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap;
}
.pill.open    { background: var(--red-bg);   color: var(--red);   border-color: rgba(196,58,58,0.33); }
.pill.prog    { background: var(--amber-bg); color: #8b6a1e;       border-color: rgba(212,155,62,0.33); }
.pill.closed  { background: var(--green-bg); color: var(--green); border-color: rgba(106,140,90,0.33); }
.pill.verified { background: #e7edf4; color: #48637e; border-color: rgba(72,99,126,0.28); }
.pill.muted   { background: transparent; color: var(--muted); border-color: var(--line); }
.pill.type-info { background: #eef1f2; color: #637486; border-color: rgba(99,116,134,0.25); }
.pill.type-review { background: var(--amber-bg); color: #8b6a1e; border-color: rgba(212,155,62,0.33); }
.pill.type-response { background: #d9ebe5; color: #2f6b5f; border-color: rgba(47,107,95,0.25); }
.pill.type-ncr { background: var(--red-bg); color: var(--red); border-color: rgba(196,58,58,0.33); }
.reply-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.reply-head {
  margin-bottom: 8px;
  color: var(--muted);
  font: 800 10px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.reply-list {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}
.reply-item {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbf8f1;
}
.reply-meta {
  color: var(--muted);
  font: 800 9px/1.2 var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.reply-text {
  margin-top: 4px;
  color: var(--ink);
  font: 600 12px/1.4 var(--sans);
}
.reply-empty {
  color: var(--muted);
  font: 600 12px/1.4 var(--sans);
}

/* Observation type selector */
.type-list {
  display: grid;
  gap: 8px;
}
.type-option {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbf8f1;
  color: var(--ink);
  text-align: left;
}
.type-option.on {
  border-color: rgba(200,97,46,0.55);
  box-shadow: 0 0 0 3px rgba(200,97,46,0.11);
}
.type-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  font: 900 14px/1 var(--sans);
}
.type-glyph.info { background: #637486; }
.type-glyph.review { background: #9c741f; }
.type-glyph.response { background: #2f6b5f; }
.type-glyph.ncr { background: #b53a30; }
.type-option strong {
  display: block;
  font: 800 12px/1 var(--sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.type-option em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font: 500 11px/1.35 var(--sans);
  font-style: normal;
}
.type-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #c9c1b3;
  border-radius: 50%;
}
.type-option.on .type-radio {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--paper);
  background: var(--accent);
}

/* Switch */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  margin: 8px 0 14px;
}
.switch-row .t { font: 600 13px/1.2 var(--sans); }
.switch-row .s { font: 500 11px/1.4 var(--sans); color: var(--muted); margin-top: 2px; }
.toggle {
  width: 44px; height: 26px; background: #cdc6b8; border-radius: 999px; position: relative;
  border: 0; padding: 0; cursor: pointer; flex-shrink: 0; transition: background 140ms ease;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: white; border-radius: 50%; transition: transform 140ms ease;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(18px); }

.snag-fields {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbf8f1;
}
.entity-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.entity-picker-row select[hidden] { display: none; }
.snag-fields #f-contractor { margin-top: 8px; }
.priority-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.priority-option {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 10px;
}
.priority-option strong {
  text-transform: capitalize;
}

/* Observation row */
.obs-row {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px; align-items: center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.obs-row:hover { border-color: #cfc6b1; box-shadow: 0 2px 8px rgba(31,36,41,0.04); }
.obs-row .ph {
  aspect-ratio: 4/3; border-radius: 6px;
  background: #d6cdb6 center/cover no-repeat;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(31,36,41,0.06);
}
.obs-row .ph .num { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.62); color: white; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 6px; border-radius: 3px; letter-spacing: 0.8px; }
.obs-row .info .cap { font: 500 15px/1.45 var(--sans); color: var(--ink); }
.obs-row .info .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.report-progress {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.report-progress.ready { border-color: var(--green); background: var(--green-bg); }
.report-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.report-progress-head > div:first-child { flex: 1; min-width: 0; }
.report-progress-note {
  margin-top: 4px;
  color: var(--muted);
  font: 600 12px/1.35 var(--sans);
}
.report-progress-pct {
  font: 700 20px/1 var(--serif);
  color: var(--accent);
  letter-spacing: -0.4px;
}
.report-progress.ready .report-progress-pct { color: var(--green); }
.report-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(31,36,41,0.08);
  overflow: hidden;
}
.report-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 260ms ease;
}
.report-progress.ready .report-progress-bar span { background: var(--green); }
.report-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}
.report-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1.3 var(--sans);
  color: var(--muted);
}
.report-progress-step i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(31,36,41,0.22);
  flex-shrink: 0;
}
.report-progress-step.done { color: var(--ink); }
.report-progress-step.done i { background: var(--green); border-color: var(--green); }

.project-card.demo-card { border-style: dashed; }
.project-card.demo-card .btn { align-self: flex-start; margin-top: 2px; }

.filter-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.filter-summary {
  margin-top: 4px;
  color: var(--muted);
  font: 600 12px/1.35 var(--sans);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Project snag register */
.snag-register-head { margin-bottom: 18px; }
.snag-register-head .eyebrow { margin-top: 12px; }
.snag-register-head .title { margin-top: 6px; }
.snag-register-head .lede { margin-top: 8px; max-width: 680px; }
.snag-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.snag-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.snag-count {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
}
.snag-count:hover,
.snag-count.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200,97,46,0.1); }
.snag-count strong { display: block; font: 700 28px/1 var(--serif); }
.snag-count span { display: block; margin-top: 6px; color: var(--muted); font: 700 11px/1.2 var(--sans); }
.snag-overdue-band {
  margin-bottom: 14px;
  border: 1px solid rgba(196,58,58,0.24);
  border-radius: var(--radius-md);
  background: var(--red-bg);
  padding: 14px 16px;
}
.snag-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.snag-section-head .subtitle { margin-top: 5px; }
.snag-overdue-list { display: grid; gap: 7px; }
.snag-overdue-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border: 0;
  border-top: 1px solid rgba(196,58,58,0.16);
  background: transparent;
  color: var(--ink);
  padding: 9px 0 2px;
  text-align: left;
}
.snag-overdue-item strong { min-width: 0; font: 600 13px/1.35 var(--sans); }
.snag-overdue-item span { flex-shrink: 0; color: var(--red); font: 700 11px/1.25 var(--sans); }
.snag-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.snag-group { padding: 14px 16px; }
.snag-group .section-h { margin-bottom: 8px; }
.snag-group-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 11px 0;
  text-align: left;
}
.snag-group-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.25 var(--sans); }
.snag-group-row strong { min-width: 28px; color: var(--accent); font: 700 13px/1 var(--sans); text-align: right; }
.snag-group-row:disabled { cursor: default; color: var(--muted); }
.snag-register-list { margin-top: 4px; }
.snag-register-row { cursor: pointer; }
.snag-register-row .info { min-width: 0; }
.snag-register-row .cap { cursor: pointer; }
.snag-register-row .snag-report-link {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 700 11px/1.3 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.snag-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font: 700 11px/1 var(--sans);
}
.snag-open svg { width: 16px; height: 16px; }
.snag-due-overdue { color: var(--red) !important; border-color: rgba(196,58,58,0.3) !important; }
.snag-register-empty { margin-top: 14px; }
.inline-select {
  appearance: none;
  width: auto;
  max-width: 170px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--muted);
  font: 700 11px/1 var(--sans);
  padding: 5px 24px 5px 9px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.inline-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,97,46,0.12);
}
.inline-select.type-info { background-color: #eef1f2; color: #637486; border-color: rgba(99,116,134,0.25); }
.inline-select.type-review { background-color: var(--amber-bg); color: #8b6a1e; border-color: rgba(212,155,62,0.33); }
.inline-select.type-response { background-color: #d9ebe5; color: #2f6b5f; border-color: rgba(47,107,95,0.25); }
.inline-select.type-ncr { background-color: var(--red-bg); color: var(--red); border-color: rgba(196,58,58,0.33); }
.inline-select.status-select.open { background-color: var(--red-bg); color: var(--red); border-color: rgba(196,58,58,0.33); }
.inline-select.status-select.prog { background-color: var(--amber-bg); color: #8b6a1e; border-color: rgba(212,155,62,0.33); }
.inline-select.status-select.closed { background-color: var(--green-bg); color: var(--green); border-color: rgba(106,140,90,0.33); }
.inline-select.status-select.verified { background-color: #e6edf7; color: #3f5f87; border-color: rgba(63,95,135,0.3); }
.obs-row.selected { border-color: var(--accent); }
.obs-row .tools { display: flex; flex-direction: column; gap: 4px; }
.obs-row .tools button { background: transparent; border: 1px solid var(--line); width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); transition: color 100ms ease, background 100ms ease, border-color 100ms ease; }
.obs-row .tools button:hover:not(:disabled) { color: var(--ink); background: var(--bg); border-color: #cfc6b1; }
.obs-row .tools button:disabled { opacity: 0.35; cursor: not-allowed; }
.obs-row .tools button.del:hover { color: var(--red); border-color: rgba(196,58,58,0.4); }
.obs-row .tools button svg { width: 16px; height: 16px; }

/* Empty state */
.empty {
  background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 40px 28px; text-align: center; color: var(--muted);
}
.empty h3 { font: 600 22px/1.2 var(--serif); color: var(--ink); margin-bottom: 8px; letter-spacing: -0.2px; }
.empty p { font: 400 italic 14px/1.55 var(--serif); color: #4a525a; margin: 0 auto 16px; max-width: 380px; }

/* Marginalia — editor's-note sidebar (builder tips, etc.) */
.marginalia { background: transparent; border: 0; border-left: 2px solid var(--accent); padding: 8px 0 8px 16px; }
.marginalia .label { font: 700 10px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.marginalia p { font: 400 13.5px/1.6 var(--serif); color: #3a424b; margin: 0 0 12px; }
.marginalia p:last-child { margin-bottom: 0; }
.marginalia strong { color: var(--ink); font-weight: 600; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.2px; }

/* Segmented */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 7px 11px; font: 600 12px/1 var(--sans); color: var(--muted); }
.seg button.on { background: var(--ink); color: var(--paper); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: var(--hero); color: var(--paper); padding: 10px 16px;
  border-radius: 8px; font: 600 13px/1.2 var(--sans);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: toast-in 160ms ease-out;
  z-index: 100;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Modal */
.modal-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(31,36,41,0.45);
  display: grid; place-items: center; z-index: 50;
  padding: 16px;
}
.entity-modal-wrap { z-index: 70; }
.modal {
  background: var(--paper); border-radius: var(--radius-lg);
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px);
  overflow: auto; padding: 20px;
}
.modal h2 { font: 600 22px/1.1 var(--serif); margin-bottom: 14px; }
.modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal .modal-actions .btn { white-space: nowrap; }
.modal .modal-actions .acct-switch { margin-right: auto; }
.password-input {
  position: relative;
}
.password-input input {
  width: 100%;
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.password-toggle:hover,
.password-toggle.is-visible {
  color: var(--accent);
  background: rgba(179, 88, 43, 0.08);
}
.password-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-progress,
.account-local-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font: 600 12px/1.35 var(--sans);
}
.account-progress {
  background: #f3eadc;
  color: var(--hero);
}
.account-error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font: 700 12px/1.35 var(--sans);
  background: var(--red-bg);
  border: 1px solid var(--red);
  color: var(--red);
}
.account-local-note {
  background: #fbf8f1;
  border: 1px solid var(--line);
  color: var(--muted);
}
.logo-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: #fbf8f1;
}
.logo-preview {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #183a66;
  color: white;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  font: 900 19px/1 var(--sans);
}
.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 5px;
}
.logo-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  color: var(--ink);
  font: 700 13px/1.35 var(--sans);
}
.check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.check-row.disabled { color: var(--muted); cursor: not-allowed; }

/* Settings modal extras */
.settings-modal { max-width: 540px; }
.settings-section { padding: 14px 0; border-top: 1px solid var(--line); }
.settings-section:first-of-type { padding-top: 0; border-top: 0; }
.settings-section-title { font: 700 11px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.settings-hint { font: 500 12px/1.45 var(--sans); color: var(--muted); margin: 6px 0 0; }
.settings-radio-group { display: grid; gap: 8px; }
.settings-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); cursor: pointer;
}
.settings-radio:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,97,46,0.10); }
.settings-radio input { margin-top: 3px; accent-color: var(--accent); }
.settings-radio span { display: flex; flex-direction: column; gap: 2px; }
.settings-radio em { font: 500 12px/1.4 var(--sans); color: var(--muted); font-style: normal; }
.settings-sug-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px;
}
.settings-sug-grid > div {
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  text-align: center; background: #fbf8f1;
}
.settings-sug-grid strong { display: block; font: 700 18px/1 var(--serif); color: var(--ink); }
.settings-sug-grid em { font: 600 10px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-style: normal; }
.settings-sug-editors { display: grid; gap: 12px; margin-top: 14px; }
.project-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.settings-sug-editor { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; padding: 10px; }
.settings-sug-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.settings-sug-editor-head strong { font: 800 12px/1.2 var(--sans); color: var(--ink); }
.settings-sug-editor-head span { font: 700 10px/1 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.settings-sug-list { display: grid; gap: 6px; }
.settings-sug-chip { display: grid; grid-template-columns: 1fr 34px; gap: 6px; align-items: center; }
.settings-sug-chip input,
.settings-sug-add input {
  min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px;
  font: 600 13px/1.25 var(--sans); color: var(--ink); background: var(--paper);
}
.settings-sug-chip button {
  height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--muted); font: 900 18px/1 var(--sans);
}
.settings-sug-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.settings-sug-empty { font: 600 12px/1.35 var(--sans); color: var(--muted); font-style: normal; }
.recipient-editor { display: grid; gap: 8px; }
.settings-about-list { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.settings-about-row {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 12px 14px; text-align: left; color: var(--ink);
  font: 700 14px/1.25 var(--sans);
}
.settings-about-row:last-child { border-bottom: 0; }
.settings-about-row strong { display: block; font: 800 14px/1.25 var(--sans); }
.settings-about-row span em { display: block; margin-top: 3px; color: var(--muted); font: 600 11px/1.3 var(--sans); }
.settings-about-row > b { color: var(--muted); font: 900 24px/1 var(--sans); }
.settings-about-row.static > em { color: var(--muted); font: 800 13px/1 var(--sans); font-style: normal; }
.project-setup-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0;
}
.project-setup-nav .settings-about-row { border-bottom: 0; }
.project-setup-nav .settings-about-row:first-child { border-right: 1px solid var(--line); }
.report-row-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.entity-manager { display: grid; gap: 14px; }
.entity-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.entity-section-title { margin-top: 8px; }
.entity-list { display: grid; gap: 8px; }
.entity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.entity-row.archived { background: #f6f2e9; color: var(--muted); }
.entity-row-copy { min-width: 0; display: grid; gap: 4px; }
.entity-row-copy strong { font: 800 14px/1.25 var(--sans); color: var(--ink); }
.entity-row-copy span { font: 600 11px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.entity-row-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.entity-empty { padding: 14px; }
.entity-modal { max-width: 480px; }

/* Plans — project setup list, editor drop zone, and the capture-sheet pinner */
.entity-plan-thumb {
  flex: 0 0 auto;
  width: 62px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  /* contain, not cover: a drawing thumbnail has to be recognisable as that
     sheet, and a cover crop of a wide plan is an unreadable corner. */
  background: #f2ede3 center/contain no-repeat;
}
.entity-row.archived .entity-plan-thumb { opacity: 0.55; }
.plan-drop {
  display: grid; place-items: center;
  min-height: 148px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: #f6f2e9 center/contain no-repeat;
  cursor: pointer;
}
.plan-drop.has-image { border-style: solid; background-color: #e9e4d9; }
.plan-drop.has-image .plan-drop-placeholder {
  background: rgba(23, 20, 18, 0.72); color: #fff;
  padding: 5px 10px; border-radius: 999px;
}
.plan-drop-placeholder { font: 700 11px/1.2 var(--sans); color: var(--muted); }
.plan-pinner { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
/* Shrink-wraps the image so a pin at 50%/50% is the middle of the DRAWING,
   not the middle of a letterboxed container. */
.plan-pinner-canvas {
  position: relative; display: inline-block; line-height: 0;
  max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px);
  overflow: hidden; cursor: crosshair; touch-action: manipulation;
}
.plan-pinner-canvas img { display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; }
.plan-pin-dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  pointer-events: none;
}
.sd-ownership-line { margin: 14px 0 0; text-align: center; color: var(--muted); font: 600 11px/1.4 var(--sans); }
.sd-ownership-line strong { color: var(--ink); font-weight: 800; }
.info-body { color: var(--muted); font: 600 14px/1.55 var(--sans); display: grid; gap: 10px; }
.info-body p { margin: 0; }

.suggest-wrap { position: relative; }
.suggest-menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 210px; overflow: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 14px 32px rgba(38, 30, 22, 0.16); padding: 5px;
}
.suggest-menu[hidden] { display: none; }
.suggest-menu button {
  width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 9px 10px;
  text-align: left; font: 700 13px/1.25 var(--sans); color: var(--ink);
}
.suggest-menu button:hover,
.suggest-menu button:focus { background: var(--paper); outline: none; }

/* Capture source chooser (Always ask sheet) */
.capture-source-sheet { padding: 14px 20px 24px; }
.capture-source-sheet h3 { font: 600 18px/1.2 var(--serif); margin: 0 0 10px; }
.capture-source-options { display: grid; gap: 10px; }
.capture-source-options button {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); text-align: left;
}
.capture-source-options button strong { font: 700 14px/1 var(--sans); display: block; }
.capture-source-options button em { font: 500 12px/1.4 var(--sans); color: var(--muted); font-style: normal; }

/* Permission failure recovery card */
.permission-recovery {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--red); border-radius: var(--radius-md);
  background: var(--red-bg); color: var(--ink);
}
.permission-recovery strong { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.permission-recovery p { margin: 0 0 6px; font: 500 13px/1.45 var(--sans); }
.permission-recovery ul { margin: 4px 0 0; padding-left: 18px; font: 500 12px/1.45 var(--sans); }

/* Sheet (mobile) — used for observation editor */
.sheet-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(31,36,41,0.45); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--paper);
  width: 100%; max-width: 560px;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 16px 20px 24px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -18px 50px rgba(31,36,41,0.28);
}
.sheet .grip { width: 38px; height: 4px; background: #ddd5c5; border-radius: 2px; margin: 0 auto 12px; }
.sheet h3 { font: 600 22px/1.1 var(--serif); margin-bottom: 4px; }
.sheet .lead { font: 500 12px/1.5 var(--sans); color: var(--muted); margin-bottom: 14px; }
.sheet-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.sheet-topbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.sheet-topbar-title strong {
  font: 700 18px/1.05 var(--serif);
  color: var(--ink);
}
.sheet-topbar-title span {
  font: 600 11px/1.2 var(--sans);
  letter-spacing: 0.3px;
  color: var(--muted);
}
.sheet-topbar-spacer { display: block; min-width: 84px; }

.obs-detail-sheet { padding-top: 12px; }
.obs-detail-preview {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #d6cdb6 center/cover no-repeat;
  margin-bottom: 12px;
  overflow: hidden;
}
.obs-detail-preview.empty-state {
  display: grid;
  place-items: center;
  color: var(--muted);
  font: 600 13px/1.2 var(--sans);
}
.obs-detail-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.obs-detail-thumb {
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #d6cdb6 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}
.obs-detail-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(200,97,46,0.18);
}
.obs-detail-copy { margin-bottom: 12px; }
.obs-detail-copy h3 { margin: 0 0 6px; }
.obs-detail-copy .lead { margin-bottom: 0; }
.obs-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.obs-detail-replies { margin-top: 0; }
.closeout-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbf8f1;
}
.closeout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.closeout-progress span {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--paper);
  font: 700 10px/1 var(--sans);
  text-align: center;
}
.closeout-progress span.current { color: var(--accent); border-color: rgba(200,97,46,.42); background: rgba(200,97,46,.08); }
.closeout-progress span.done { color: var(--green); border-color: rgba(106,140,90,.35); background: var(--green-bg); }
.closeout-guidance { margin: 10px 0 0; color: #4a525a; font: 400 13px/1.45 var(--sans); }
.closeout-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.closeout-photo-column > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font: 700 11px/1 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.closeout-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.closeout-photo {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #d6cdb6 center/cover no-repeat;
}
.closeout-photo-empty {
  grid-column: 1 / -1;
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font: 600 11px/1.35 var(--sans);
  text-align: center;
}
.closeout-stamps { display: grid; gap: 4px; margin-top: 12px; color: var(--muted); font: 600 12px/1.35 var(--sans); }
.closeout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.closeout-actions .btn { flex: 1 1 130px; }
.obs-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
  margin-top: 16px;
}
.obs-detail-actions.promote-ready { grid-template-columns: 1fr 1.2fr 1.2fr; }
.location-stamp {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbf8f1;
  overflow: hidden;
}
.location-stamp summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.location-stamp summary::-webkit-details-marker { display: none; }
.location-stamp summary > span:first-child { display: grid; gap: 4px; }
.location-stamp summary strong { font: 800 13px/1.2 var(--sans); color: var(--ink); }
.location-stamp summary em { font: 600 11px/1.25 var(--sans); color: var(--muted); font-style: normal; }
.location-stamp-state {
  max-width: 48%;
  color: var(--accent);
  font: 800 10px/1.25 var(--sans);
  text-align: right;
}
.location-stamp[open] summary { border-bottom: 1px solid var(--line); }
.location-stamp-fields { padding: 14px; }
.location-stamp-hint { margin: 6px 0 0; color: var(--muted); font: 600 11px/1.35 var(--sans); }

/* FAB */
.fab {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--accent);
  color: white; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(200,97,46,0.45);
  animation: fab-pulse 1.6s ease-out infinite;
  z-index: 20;
}
.fab svg { width: 24px; height: 24px; }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(200,97,46,0.45), 0 0 0 0 rgba(200,97,46,0.45); }
  50% { box-shadow: 0 10px 30px rgba(200,97,46,0.45), 0 0 0 14px rgba(200,97,46,0); }
}

/* Capture preview */
.capture-preview {
  aspect-ratio: 4/3; border-radius: var(--radius-md);
  max-height: min(36vh, 310px);
  background: #d6cdb6 center/cover no-repeat;
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.capture-preview .placeholder {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; color: var(--muted);
  font-size: 13px; font-weight: 500;
}
.capture-preview .retake {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.5); color: white;
  font: 600 12px/1 var(--sans); padding: 7px 11px; border-radius: 999px;
  border: 0;
}
.capture-preview .preview-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(24,27,30,0.72);
  color: white;
  border-radius: 999px;
  padding: 6px 9px;
  font: 800 10px/1 var(--sans);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.photo-stamp {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(24,27,30,0.78);
  color: white;
  border-radius: 999px;
  padding: 7px 9px;
  font: 800 11px/1 var(--sans);
  letter-spacing: 0.35px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-stamp.has-brand {
  border-radius: 8px;
}
.photo-stamp span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-stamp .brand-logo,
.photo-stamp .brand-logo-fallback {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255,255,255,0.96);
  color: white;
  padding: 2px;
  flex: 0 0 auto;
}
.photo-stamp .brand-logo-fallback {
  display: inline-grid;
  place-items: center;
  background: #183a66;
  font: 900 8px/1 var(--sans);
  padding: 0;
}
.capture-preview { cursor: pointer; }
.capture-preview input[type=file] {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* Multi-photo strip */
.photo-strip {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.photo-strip::-webkit-scrollbar { height: 6px; }
.photo-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }
.photo-strip .ps-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 10px;
  background: #d6cdb6 center/cover no-repeat;
  border: 1px solid var(--line);
  scroll-snap-align: start;
  overflow: hidden;
  cursor: grab;
}
.photo-strip .ps-thumb.dragging { opacity: 0.5; cursor: grabbing; }
.photo-strip .ps-thumb.drop-target { outline: 2px dashed var(--brand, #c8612e); outline-offset: -2px; }
.photo-strip .ps-thumb.primary { box-shadow: 0 0 0 2px var(--brand, #c8612e); border-color: transparent; }
.photo-strip .ps-thumb.selected:not(.primary) { box-shadow: 0 0 0 2px rgba(47,36,41,0.28); border-color: transparent; }
.photo-strip .ps-thumb .ps-badge {
  position: absolute; left: 4px; top: 4px;
  background: var(--brand, #c8612e); color: white;
  font: 800 9px/1 var(--sans); letter-spacing: 0.4px;
  padding: 3px 5px; border-radius: 4px;
  text-transform: uppercase;
}
.photo-strip .ps-thumb .ps-remove {
  position: absolute; right: 2px; top: 2px;
  width: 20px; height: 20px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: white;
  font: 700 12px/20px var(--sans); padding: 0;
  cursor: pointer;
}
.photo-strip .ps-thumb .ps-move {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  display: flex; justify-content: space-between; gap: 4px;
  pointer-events: none;
}
.photo-strip .ps-thumb .ps-move button {
  pointer-events: auto;
  border: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: white;
  font: 700 14px/22px var(--sans); padding: 0;
}
.photo-strip .ps-thumb .ps-move button[disabled] { opacity: 0.35; }
.photo-strip .ps-add {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--line);
  display: grid; place-items: center;
  font: 700 28px/1 var(--sans); color: var(--muted);
  cursor: pointer;
}
.photo-strip .ps-add:hover { background: rgba(0,0,0,0.06); }

/* Markup CTA */
.markup-cta {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 2px 0;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: #fbf8f1;
  font: 500 12px/1.4 var(--sans); color: var(--muted);
}
.markup-cta .markup-cta-text { flex: 1 1 auto; min-width: 0; }
.markup-cta .markup-cta-text strong { display: block; font: 700 12px/1.2 var(--sans); color: var(--ink); letter-spacing: 0.2px; }
.markup-cta button.markup-cta-btn {
  flex: 0 0 auto;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 700 12px/1 var(--sans);
  padding: 9px 14px; cursor: pointer;
}
.markup-cta button.markup-cta-btn[disabled] { background: #cdc7b8; color: #7a7464; cursor: not-allowed; }

/* Full-viewport markup editor */
.markup-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: #1f2429;
  z-index: 70;
  display: grid; grid-template-rows: auto 1fr auto;
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
.markup-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  color: #f3eee2;
}
.markup-toolbar .markup-toolbar-main {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.markup-toolbar .markup-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.markup-toolbar .markup-title { font: 700 13px/1.2 var(--sans); letter-spacing: 0.3px; }
.markup-toolbar button.markup-tool {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #f3eee2;
  font: 700 12px/1 var(--sans);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.markup-toolbar button.markup-tool.on {
  background: var(--brand, #c8612e); color: white; border-color: transparent;
}
.markup-toolbar button.markup-tool[disabled] { opacity: 0.4; cursor: not-allowed; }
.markup-toolbar .markup-tool .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: #e02b1f;
}
.markup-toolbar .markup-tool .line {
  display: inline-block; width: 14px; height: 3px; background: #e02b1f; border-radius: 2px;
}
.markup-toolbar .markup-tool .arrow,
.markup-toolbar .markup-tool .box,
.markup-toolbar .markup-tool .circle,
.markup-toolbar .markup-tool .text-glyph {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.markup-toolbar .markup-tool .arrow::before {
  content: "↗";
  font: 900 12px/1 var(--sans);
}
.markup-toolbar .markup-tool .box::before {
  content: "";
  width: 11px;
  height: 9px;
  border: 2px solid #e02b1f;
  border-radius: 2px;
  box-sizing: border-box;
}
.markup-toolbar .markup-tool .circle::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 2px solid #e02b1f;
  border-radius: 999px;
  box-sizing: border-box;
}
.markup-toolbar .markup-tool .text-glyph {
  font: 900 12px/1 var(--sans);
}
.markup-swatches {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.markup-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.22);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.markup-swatch.on {
  border-color: #f3eee2;
  box-shadow: 0 0 0 2px rgba(243,238,226,0.2), inset 0 0 0 1px rgba(0,0,0,0.12);
}
.markup-canvas-host {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 12px;
  touch-action: none;
}
.markup-canvas-host canvas {
  max-width: 100%; max-height: 100%;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  touch-action: none;
  display: block;
}
.markup-text-popover {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: min(520px, calc(100vw - 24px));
  margin: 0 auto;
  background: rgba(20,22,24,0.94);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  z-index: 2;
}
.markup-text-label {
  display: block;
  margin-bottom: 6px;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(243,238,226,0.8);
}
.markup-text-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.markup-text-input {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #f3eee2;
  font: 600 16px/1.15 var(--sans);
  padding: 10px 12px;
}
.markup-text-add,
.markup-text-cancel {
  border: 0;
  border-radius: 10px;
  font: 700 12px/1 var(--sans);
  cursor: pointer;
}
.markup-text-add {
  background: var(--brand, #c8612e);
  color: white;
  padding: 0 12px;
}
.markup-text-cancel {
  margin-top: 8px;
  background: transparent;
  color: rgba(243,238,226,0.74);
  padding: 8px 0 0;
}
.markup-actions {
  display: flex; gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
}
.markup-actions button {
  flex: 1 1 0;
  border: 0; border-radius: 10px;
  font: 700 14px/1 var(--sans);
  padding: 14px 12px;
  cursor: pointer;
}
.markup-actions button.markup-cancel { background: rgba(255,255,255,0.12); color: #f3eee2; }
.markup-actions button.markup-done { background: var(--brand, #c8612e); color: white; }
.markup-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }
.markup-hint {
  font: 500 11px/1.3 var(--sans);
  color: rgba(243,238,226,0.7);
  padding: 0 14px 6px;
  text-align: center;
}

/* Reply photo strip — smaller */
.reply-photo-strip {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-wrap: wrap;
}
.reply-photo-strip .rps-thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 8px;
  background: #d6cdb6 center/cover no-repeat;
  border: 1px solid var(--line);
}
.reply-photo-strip .rps-thumb .rps-remove {
  position: absolute; right: 2px; top: 2px;
  width: 18px; height: 18px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: white;
  font: 700 11px/18px var(--sans); padding: 0;
  cursor: pointer;
}
.reply-photo-strip .rps-add {
  width: 64px; height: 64px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--line);
  display: grid; place-items: center;
  font: 700 22px/1 var(--sans); color: var(--muted);
  cursor: pointer;
}
.reply-item .reply-thumbs {
  margin-top: 6px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.reply-item .reply-thumbs .rt-thumb {
  width: 56px; height: 56px;
  border-radius: 6px;
  background: #d6cdb6 center/cover no-repeat;
  border: 1px solid var(--line);
}

/* Two-column layout for builder on desktop */
.builder {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px;
}
.builder-single {
  grid-template-columns: minmax(0, 1fr);
}
.studio-builder {
  align-items: start;
}
.studio-builder .list-col {
  min-width: 0;
}
.report-sidecar {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sidecar-image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--hero);
  box-shadow: 0 14px 34px rgba(31,36,41,0.12);
}
.sidecar-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.report-sidecar .marginalia {
  background: rgba(253,251,246,0.78);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
}
@media (max-width: 900px) {
  .topbar { align-items: center; flex-wrap: wrap; }
  .topbar .actions {
    overflow-x: visible;
    padding-bottom: 2px;
  }
  .home-hero,
  .project-hero { grid-template-columns: 1fr; }
  .home-copy,
  .project-copy,
  .hero-frame,
  .project-plate,
  .hero-frame img,
  .project-plate img { min-height: 0; }
  .hero-frame img,
  .project-plate img { aspect-ratio: 16 / 11; }
  .hero-title { font-size: clamp(42px, 12vw, 64px); }
  .section-row { align-items: start; flex-direction: column; }
  .builder { grid-template-columns: 1fr; }
  .builder .detail-col { order: -1; }
  .report-sidecar { position: static; }
  .obs-row { grid-template-columns: 80px 1fr auto; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snag-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-row .row-flex {
    align-items: flex-start;
    gap: 8px;
  }
  .report-row .pill {
    display: none;
  }
  .report-row .report-mode-pill { display: inline-flex; }
}

/* Phone-sized adjustments */
@media (max-width: 640px) {
  .help-hero { padding: 20px 0 22px; }
  .help-hero .title { font-size: 42px; }
  .help-guide-grid { grid-template-columns: 1fr; }
  .help-guide-card { min-height: 0; padding: 22px; }
  .guide-bar { flex-wrap: wrap; }
  .guide-bar strong { flex: 1 1 calc(100% - 70px); }
  .guide-bar span { display: none; }
  .guide-bar a,
  .guide-bar button { flex: 1; text-align: center; }
  body.route-preview .topbar {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    gap: 8px;
  }
  body.route-preview .main {
    padding-top: 0;
    padding-bottom: 120px;
  }
  .topbar { gap: 10px; }
  .topbar .brand { order: 1; }
  .topbar .actions {
    order: 2;
    width: auto;
    margin-left: auto;
    overflow: visible;
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar .crumb {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
  }
  body.route-preview .topbar .actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 6px;
  }
  body.route-preview .topbar .actions .print-hint {
    grid-column: 1 / -1;
    max-width: none;
    line-height: 1.25;
    font-size: 12px;
    opacity: 0.84;
  }
  body.route-preview .topbar .actions .btn {
    min-width: 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }
  body.route-preview .topbar .brand {
    gap: 10px;
  }
  body.route-preview .topbar .brand .mark {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  body.route-preview .topbar .brand .name {
    font-size: 12px;
    letter-spacing: 1.1px;
  }
  body.route-preview .topbar .crumb {
    font-size: 11px;
    letter-spacing: 2.1px;
    opacity: 0.82;
  }
  body.route-preview .preview-stage-viewport {
    padding-inline: 8px;
    padding-top: 0;
  }
  /* iOS Safari auto-zooms when an input renders below 16px and never zooms back,
     which is the root cause of the "controls drift off-screen" report.
     Bumping the form-control font size to 16px keeps the layout pinned. */
  .field input, .field textarea, .field select { font-size: 16px; }
  .modal input, .modal textarea, .modal select { font-size: 16px; }
  .cloud-sync-status { grid-template-columns: 10px minmax(0, 1fr); }
  .cloud-sync-status .btn { grid-column: 1 / -1; justify-self: start; }
  /* Side-by-side pairs are too narrow on a phone — date + author overlap.
     Stack them so each control gets the full width. */
  .pair { grid-template-columns: 1fr; gap: 12px; }
  .project-setup-nav { grid-template-columns: 1fr; }
  .project-setup-nav .settings-about-row:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .entity-manager-head,
  .entity-row {
    align-items: stretch;
    flex-direction: column;
  }
  .entity-manager-head .btn { align-self: flex-start; }
  .entity-row-actions { width: 100%; }
  .entity-row-actions .btn { flex: 1; justify-content: center; }
  .entity-picker-row { grid-template-columns: 1fr; align-items: stretch; }
  .entity-picker-row .btn { justify-content: center; }
  .priority-list { grid-template-columns: 1fr; }
  .filter-head { flex-direction: column; }
  .filter-grid { grid-template-columns: 1fr; }
  .snag-filter-grid { grid-template-columns: 1fr; }
  .snag-counts { gap: 6px; }
  .snag-count { padding: 11px 7px; text-align: center; }
  .snag-count strong { font-size: 23px; }
  .snag-count span { font-size: 9px; }
  .snag-group-grid { grid-template-columns: 1fr; }
  .snag-overdue-item { align-items: flex-start; flex-direction: column; gap: 3px; }
  .snag-register-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .snag-register-row .snag-open { grid-column: 2; justify-self: start; }
  /* Phone: the section title, percentage and preview button can't share a row. */
  .report-progress-head { flex-wrap: wrap; }
  .report-progress-head > div:first-child { flex: 1 1 100%; }
  .report-progress-head .btn { order: 3; }
  .report-progress-pct { order: 2; margin-left: auto; }
  .report-progress-steps { gap: 6px 12px; }
  /* Move FAB toward the centre of the bottom edge so it's reachable with either
     thumb on a phone, while leaving its right-aligned position on desktop. */
  .fab {
    right: 50%;
    transform: translateX(50%);
    bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  }
  /* Make sure the sheet leaves room for the on-screen keyboard. */
  .sheet { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .sheet-topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .sheet-topbar-title { text-align: left; }
  .sheet-topbar-spacer { display: none; }
  .obs-detail-actions,
  .obs-detail-actions.promote-ready { grid-template-columns: 1fr; }
}

/* Tablet — portrait iPad/Surface (744–900px).
   Everything below 900px used to get the phone treatment, which threw away about
   a third of a tablet's width: half-size photo thumbnails, two-column filters and
   stacked section headings on a screen wide enough for none of that. This block
   sits after the phone block on purpose, so it wins on source order. Landscape
   tablets are already above 900px and get the desktop layout unchanged. */
@media (min-width: 641px) and (max-width: 900px) {
  /* Photos are the point of this app — keep the desktop thumbnail. */
  .obs-row { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .snag-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A heading and its action fit on one line at this width. */
  .section-row { align-items: end; flex-direction: row; }
  .report-row .pill { display: inline-flex; }
  /* Keep the A4 preview page off the bezel once it's scaled to fit. */
  body.route-preview .preview-stage-viewport { padding-inline: 16px; }
}

/* Touch targets — any coarse pointer, so this covers tablets and phones alike.
   The default .btn is ~33px tall, below the 44px both platforms ask for. `.sm`
   and `.icon` are deliberately dense inline controls and stay as they are. */
@media (pointer: coarse) {
  .btn:not(.sm):not(.icon) { min-height: 44px; }
  .obs-row .tools button { width: 40px; height: 40px; }
  /* Safari zooms the page in on any focused control under 16px and never zooms
     back — true on iPad as well as iPhone, where the phone block already did it. */
  .field input, .field textarea, .field select,
  .modal input, .modal textarea, .modal select { font-size: 16px; }
}

.detail-col .preview { aspect-ratio: 4/3; border-radius: 10px; background: #d6cdb6 center/cover no-repeat; margin-bottom: 14px; border: 1px solid var(--line); }
.detail-col .preview.empty-state { background: var(--bg); display: grid; place-items: center; color: var(--muted); font-size: 12px; }

/* Print — used by the "Print / Save PDF" export */
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body { background: white; }
  .no-print, .topbar, .fab, .app-dock, .app-fab, .dock-sheet, .dock-sheet-backdrop, .toast { display: none !important; }
  .preview-shell,
  .preview-stage-viewport,
  .preview-stage-frame {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .preview-stage-frame .report-stage {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transform-origin: initial !important;
    width: auto !important;
  }
}

/* Small utilities */
.row-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.print-hint {
  color: rgba(253,251,246,0.72);
  font: 600 11px/1.3 var(--sans);
  max-width: 210px;
}

/* ── UI-Craft Pass — interaction floor (2026-08-18) ──────────────────────
   Every control needs hover/active/disabled/focus, nothing over 300ms
   should run for people who asked it not to, and nothing loses its ring.
   Geometry only, from app-development/design/tokens.css — SOR keeps its
   own colour/type tier, this borrows only the primitive numbers. */
:root {
  --tap-min: 24px;
  --tap-field: 48px;
  --focus-ring: rgba(200,97,46,0.55);
  --motion-micro: 160ms;
}

/* One focus-visible ring, used everywhere nothing more specific already
   supplies its own (the inputs/inline-selects above keep their box-shadow
   treatment — this is the fallback so no control is silently unreachable). */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.suggest-menu button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Press feedback. Nothing above this line answered a pointerdown with
   anything but a hover colour, so a tap read as unresponsive until the
   click handler finished. */
button:not(:disabled):active,
.btn:not(:disabled):active,
a.project-card:active,
.report-row:active,
.obs-row:active,
.snag-count:active,
.snag-overdue-item:active,
.snag-group-row:not(:disabled):active {
  transform: scale(0.98);
}
.dock-btn:not(:disabled):active,
.app-fab:not(:disabled):active {
  transform: scale(0.94);
}

/* Icon-only controls under the WCAG 2.2 SC 2.5.8 floor. */
.obs-row .tools button,
.btn.icon,
.account-avatar {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── The indicator marks (2026-08-18) — chosen from SOR's own data:
   observations carry a real due date, a real closedAt, and a status
   lifecycle (open -> responded -> closed -> verified). See STATE.md for
   which of the four studies fit and which was skipped, and why. */

/* Distribution strip — the spread of open/responded snags against their
   due date, sitting directly under the counts row it explains. */
.spread-strip {
  position: relative;
  height: 30px;
  margin: 4px 0 16px;
  padding: 0 2px;
}
.spread-strip-base {
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 2px;
  background: var(--line);
  border-radius: 1px;
}
.spread-strip-zero {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 18px;
  background: var(--ink);
  opacity: 0.5;
  transform: translateX(-50%);
}
.spread-tick {
  position: absolute;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.75;
  transform: translate(-50%, 0);
}
.spread-tick.late { background: var(--red); opacity: 0.9; }
.spread-median {
  position: absolute;
  top: 3px;
  width: 3px;
  height: 24px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
}
.spread-strip-label {
  display: flex;
  justify-content: space-between;
  font: 600 10px/1.3 var(--sans);
  color: var(--muted);
  letter-spacing: 0.3px;
  margin: -12px 2px 14px;
}

/* Stage chain — status shown with its whole sequence, not just its word,
   wherever a status appears inside a list row. */
.stage-chain {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.stage-chain .stage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  display: block;
}
.stage-chain .stage-dot.on { background: var(--hero); }
.stage-chain .stage-dot.now {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(200,97,46,0.18);
}

/* Calibrated dates — what a due date on this project has actually been
   worth, from its own closed history. Sharpens as more snags close. */
.snag-calibration {
  margin-top: 4px;
  font: 500 12px/1.4 var(--sans);
  color: var(--muted);
}
.snag-calibration strong { color: var(--ink); font-weight: 700; }

/* Demo data is a labelled, disposable place — see db.js exportBackup. The
   badge and the note are what stop sample data reading as the user's own. */
.project-card.demo-card { border-style: dashed; }
.project-card.demo-card .btn { align-self: flex-start; margin-top: 2px; }
/* One line, in the project's voice, for replies that came back and are waiting
   on the report's author. Green rather than the orange accent: this is not an
   alarm, it is your turn. Hidden entirely when nothing is waiting. */
.waiting-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: var(--green-bg);
}
.waiting-line p {
  margin: 0;
  color: var(--green);
  font: 600 14px/1.4 var(--sans);
}
.waiting-line .btn {
  border-color: var(--green);
  color: var(--green);
  background: transparent;
}

.demo-badge {
  background: rgba(31,26,20,0.06);
  border-color: var(--line);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  color: var(--muted);
  font: 500 12px/1.45 var(--sans);
}
.project-card .demo-badge { align-self: flex-start; margin-top: 6px; }