/* Roof Estimate Desk - Field Survey Kit: warm survey canvas, white data sheets, slate masthead. */

:root {
  --canvas: #F5F5F0;
  --paper: #FFFFFF;
  --ink: #1F2937;
  --muted: #52606D;
  --slate: #1F2937;
  --slate-ink: #F9FAFB;
  --olive: #4D7C0F;
  --olive-deep: #3F6212;
  --rust: #B45309;
  --hairline: #D6D3D1;
  --wash: #FAFAF7;
  --focus: #FFFBEB;
  --rule: 1px solid #D6D3D1;
  --rule-dashed: 1px dashed #D6D3D1;
  --olive-rule: 3px solid #4D7C0F;
  --radius: 8px;
  --shadow-card: 0 1px 2px rgba(31, 41, 55, 0.06), 0 8px 24px rgba(31, 41, 55, 0.08);
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --survey-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23D6D3D1' stroke-width='1' stroke-dasharray='2 3'/%3E%3C/svg%3E");
  --survey-grid-major: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M160 0H0V160' fill='none' stroke='%23D6D3D1' stroke-width='1'/%3E%3C/svg%3E");
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320' viewBox='0 0 420 320'%3E%3Cg fill='none' stroke='%234D7C0F' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M300 40c70 10 110 60 100 120s-70 110-140 100-120-50-110-110 80-120 150-110z'/%3E%3Cpath d='M300 70c50 8 80 45 72 90s-52 80-104 72-88-38-80-82 60-88 112-80z'/%3E%3Cpath d='M298 100c32 5 52 30 47 58s-34 52-67 47-57-25-52-53 40-57 72-52z'/%3E%3Cpath d='M296 128c16 3 26 15 23 29s-17 26-33 23-28-12-25-26 19-29 35-26z'/%3E%3C/g%3E%3C/svg%3E");
  --hud-h: 56px;
  --dock-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--canvas);
  background-image: var(--survey-grid-major);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, summary, select, [data-edit-target], [data-preset-chip], label[for] { cursor: pointer; }
.num, .kpi-value, .bl-value, .bl-sub.num, .amt, .math-steps { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.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; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

/* ---------- buttons ---------- */

.btn-primary,
.btn-action,
.btn-secondary,
.btn-reset,
.btn-hud,
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.btn-primary {
  background: var(--olive);
  color: #FFFFFF;
  border-color: var(--olive);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(31, 41, 55, 0.2);
}
.btn-primary:hover { background: var(--olive-deep); border-color: var(--olive-deep); }

.btn-action {
  background: var(--slate);
  color: var(--slate-ink);
  border-color: var(--slate);
}
.btn-action:hover { background: #111827; }

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: var(--olive); background: var(--wash); }

.btn-primary:active,
.btn-action:active,
.btn-secondary:active,
.btn-reset:active,
.preset-chip:active,
.kpi-cell:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ---------- field masthead ---------- */

.app-header-stack {
  flex-shrink: 0;
  background: transparent;
}

header.masthead {
  background-color: #1F2937;
  color: #F9FAFB;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: stretch;
  border-bottom: var(--olive-rule);
  --text-muted: #E5E7EB;
  --border: rgba(249, 250, 251, 0.28);
  --surface: rgba(249, 250, 251, 0.06);
}

.mast-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
}
.mast-title { color: #F9FAFB; }
.mast-title .icon { color: #F9FAFB; }

.site-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border: 1px dashed rgba(249, 250, 251, 0.55);
  border-radius: 4px;
  color: #F9FAFB;
  white-space: nowrap;
}

.brand-line {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #F9FAFB;
  line-height: 1.2;
}
.brand-sub {
  font-family: var(--font-ui);
  font-weight: 500;
  color: #E5E7EB;
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.mast-status { min-width: 0; color: #F9FAFB; font-size: 13px; }
.mast-status-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px 3px 8px;
  border: 1px solid rgba(249, 250, 251, 0.4);
  border-radius: 999px;
  background: rgba(249, 250, 251, 0.06);
  color: #F9FAFB;
  white-space: nowrap;
}
.mast-status-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A3E635;
  box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.18);
}
.mast-status-text { min-width: 0; color: #F9FAFB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

header.masthead > .nav-tools-link { order: 3; align-self: center; margin-right: 12px; color: #E5E7EB !important; }
header.masthead > .nav-tools-link:hover { border-color: rgba(249, 250, 251, 0.6) !important; }

.mast-commerce {
  order: 4;
  color: #FFFFFF;
  padding: 0 16px 0 0;
}
.mast-commerce .btn-primary {
  min-height: 44px;
  padding: 6px 18px;
  font-size: 14px;
  color: #FFFFFF;
}
.mast-commerce .btn-primary:focus-visible { outline-color: #F9FAFB; }

.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 46px;
  padding: 6px 20px;
  background: var(--paper);
  border-bottom: var(--rule);
}
.tool-subtitle { flex: 1 1 420px; font-size: 14px; color: var(--muted); max-width: 920px; }
.save-state {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: var(--rule-dashed);
  border-color: #A8A29E;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.workflow-bar ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper);
  border-bottom: var(--rule);
}
.workflow-bar li { position: relative; }
.workflow-bar li + li { border-left: var(--rule-dashed); }
.workflow-bar a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.workflow-bar a:hover { background: var(--wash); color: var(--olive); box-shadow: inset 0 -3px 0 var(--olive); }

/* ---------- sample sites: map-overlay chips ---------- */

.benchmark-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background-color: var(--canvas);
  background-image: var(--survey-grid);
  border-bottom: var(--rule);
}
.bench-index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  width: 200px;
  padding: 6px 16px 6px 20px;
}
.bench-num { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; color: var(--ink); }
.bench-caption { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 6px 0; }
.preset-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 120px;
  min-height: 48px;
  padding: 5px 12px 5px 28px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
  text-align: left;
  color: var(--ink);
}
.preset-chip::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--rust);
  background: var(--paper);
}
.preset-chip:hover { border-color: var(--olive); }
.preset-chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #FFFFFF; box-shadow: 0 2px 8px rgba(77, 124, 15, 0.3); }
.preset-chip[aria-pressed="true"]::before { border-color: #FFFFFF; background: #FFFFFF; }
.chip-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.chip-meta { font-family: var(--font-mono); font-size: 11px; line-height: 1.25; }
.bench-actions { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; flex-wrap: wrap; }
.sample-badge {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border: 1px solid var(--rust);
  border-radius: 999px;
  background: var(--paper);
  color: var(--rust);
}
.sample-badge.is-off { visibility: hidden; }
.btn-reset {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px dashed #A8A29E;
  padding: 5px 12px;
}
.btn-reset:hover { border-color: var(--olive); border-style: solid; }
.reset-main { font-weight: 600; font-size: 13px; }
.reset-sub { font-weight: 500; font-size: 12px; color: var(--muted); }
.btn-undo { font-size: 13px; }

.trust-reassurance-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 20px;
  background: var(--paper);
  border-bottom: var(--rule);
  font-size: 13px;
  color: var(--muted);
}
.trust-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--olive);
  color: #FFFFFF;
  white-space: nowrap;
}

/* ---------- role badges ---------- */

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.2;
}
.role-badge-in { background: var(--slate); color: var(--slate-ink); }
.role-badge-out { background: var(--paper); color: var(--olive); border-color: var(--olive); }

/* ---------- workspace: site canvas + floating data sheet ---------- */

.workspace-cockpit { position: relative; background: var(--canvas); }
.mobile-verdict { display: none; }

.inspector-pane {
  position: relative;
  background-color: var(--canvas);
  background-image: var(--contours), var(--survey-grid);
  background-repeat: no-repeat, repeat;
  background-position: right -60px bottom 40px, 0 0;
  border-right: var(--rule);
}

.inspector-dock,
.deliverable-dock {
  padding: 12px 20px;
  background: var(--paper);
  border-bottom: var(--rule);
  box-shadow: inset 0 3px 0 var(--olive);
}
.dock-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pane-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.pane-title:focus { outline: none; }
.pane-title:focus-visible { outline: 3px solid var(--olive); }
.idx { font-family: var(--font-mono); color: var(--olive); font-weight: 700; }
.live-note { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 3px rgba(77, 124, 15, 0.18); }

.inspector-scroll-body { padding: 0 20px 56px; }

.field-group { border: 0; margin: 0; padding: 18px 0 0; min-width: 0; }
.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.group-title::before { content: ""; width: 14px; height: 3px; background: var(--olive); }

.prop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.field-row {
  display: grid;
  grid-template-columns: minmax(130px, 40%) minmax(180px, 1fr);
  border-bottom: var(--rule-dashed);
  transition: box-shadow 120ms ease;
}
.prop-grid > .field-row:last-child { border-bottom: 0; }
.field-row:focus-within { box-shadow: inset 3px 0 0 var(--olive); }
.label-cell {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 2px 8px;
  padding: 8px 12px;
  background: var(--wash);
  border-right: var(--rule-dashed);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}
.fidx { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 600; }
.flabel { flex: 1 1 100px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.req-tag, .opt-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.req-tag { color: var(--rust); }
.opt-tag { color: var(--muted); font-weight: 600; }
.value-cell { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
.value-cell > input, .value-cell > select, .value-cell > .unit-row { flex: 1 1 auto; }

.value-cell input,
.value-cell select,
.value-cell textarea {
  width: 100%;
  min-width: 180px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
}
#f-roof-sqft, #f-penetrations, #f-bid-date { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.01em; }
.value-cell select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #1F2937 50%), linear-gradient(135deg, #1F2937 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.value-cell textarea { resize: vertical; min-height: 72px; }
.value-cell input:focus,
.value-cell select:focus,
.value-cell textarea:focus { background-color: var(--focus); outline: none; box-shadow: inset 0 -2px 0 var(--olive); }
.value-cell input::placeholder, .value-cell textarea::placeholder { color: #6B7280; }

.unit-row { display: flex; align-items: center; min-width: 0; }
.unit-row input { flex: 1 1 auto; min-width: 180px; }
.unit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0 8px;
  padding: 3px 9px;
  border: var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--canvas);
  max-width: 50%;
  line-height: 1.2;
  white-space: nowrap;
}
.field-hint { padding: 0 12px 8px; font-size: 12px; color: var(--muted); }
.validation-cue { padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.validation-cue:empty { display: none; }
.field-row.has-error { box-shadow: inset 3px 0 0 var(--rust); }
.field-row.has-error .validation-cue { padding: 6px 12px 8px; background: var(--focus); border-top: var(--rule-dashed); }
.field-row.has-error .validation-cue::before { content: "Hold · "; font-family: var(--font-mono); font-weight: 700; color: var(--rust); }
.field-row.has-error .label-cell { background: #FEF3E2; }

.prop-collapsible { margin-top: 18px; background: var(--paper); border: var(--rule); border-radius: var(--radius); overflow: hidden; }
.prop-collapsible > .prop-grid { border: 0; border-radius: 0; }
.step-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: var(--paper);
  list-style: none;
}
.step-tab::-webkit-details-marker { display: none; }
.step-tab::after { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--olive); }
.prop-collapsible[open] > .step-tab { border-bottom: var(--rule); }
.prop-collapsible[open] > .step-tab::after { content: "−"; }

.dock-jump-shelf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px;
  border-top: var(--rule);
  background: var(--paper);
}
.shelf-status { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }

.related-tools-grid {
  --surface: #FFFFFF;
  --border: #D6D3D1;
  --text: #1F2937;
  --primary: #4D7C0F;
  --text-muted: #52606D;
  --shadow-sm: none;
  border-color: var(--hairline) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
}
.related-tools-grid h3 { font-family: var(--font-display); }
.related-tool-card:hover { border-color: var(--olive) !important; }

/* ---------- deliverable rail ---------- */

.deliverable-zone { position: relative; background: var(--paper); }
[data-results] { padding-bottom: 56px; }

.deliverable-dock { position: sticky; top: 0; z-index: 30; }
.dock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.dock-scroll-cue { margin-left: auto; }
.action-status { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--olive); min-height: 0; }
.action-status:empty { display: none; }

.verdict-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  padding: 16px 20px;
  background: var(--paper);
  border-bottom: var(--rule);
}
.verdict-panel:focus { outline: none; }
.state-stamp {
  grid-row: span 3;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.verdict-headline { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.verdict-detail { font-size: 14px; color: var(--muted); }
.verdict-jump { justify-self: start; margin-top: 6px; }
.verdict-panel[data-state="ready"] .state-stamp { background: var(--olive); color: #FFFFFF; border-color: var(--olive); }
.verdict-panel[data-state="incomplete"] .state-stamp,
.verdict-panel[data-state="review"] .state-stamp { background: var(--rust); color: #FFFFFF; border-color: var(--rust); }
.verdict-panel[data-state="blank"] .state-stamp { background: var(--paper); color: var(--ink); border-style: dashed; }
.verdict-panel[data-state="incomplete"],
.verdict-panel[data-state="review"] { box-shadow: inset 3px 0 0 var(--rust); }

.hold-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: var(--rule);
  font-size: 13px;
}
.hold-banner[data-kind="info"] { color: var(--olive); }
.hold-banner[data-kind="info"] p { color: var(--ink); }
.hold-banner[data-kind="hold"] { background: var(--focus); color: var(--rust); box-shadow: inset 3px 0 0 var(--rust); font-weight: 600; }
.hold-banner[data-kind="hold"] p { color: var(--ink); }
.hold-banner[data-kind="none"] { visibility: hidden; }

.kpi-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--paper); border-bottom: var(--rule); }
.kpi-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--paper);
  border: 0;
  border-right: var(--rule-dashed);
  text-align: left;
  color: var(--ink);
}
.kpi-cell:last-child { border-right: 0; }
.kpi-cell:hover { background: var(--wash); }
.kpi-cell:first-child { box-shadow: inset 0 3px 0 var(--olive); }
.kpi-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi-value { font-size: 24px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
#kpi-basis { font-family: var(--font-display); font-size: 18px; }

#executive-deliverable {
  padding: 24px 20px 72px;
  background-color: var(--canvas);
  background-image: var(--survey-grid);
  border-bottom: var(--rule);
}
.deliverable-sheet {
  position: static;
  background: var(--paper);
  border: var(--rule);
  border-top: var(--olive-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.sheet-head { border-bottom: var(--rule); padding-bottom: 14px; }
.sheet-kicker { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sheet-state { padding: 1px 9px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
body[data-estimate-state="ready"] .sheet-state { background: var(--olive); border-color: var(--olive); color: #FFFFFF; }
body[data-estimate-state="incomplete"] .sheet-state,
body[data-estimate-state="review"] .sheet-state { background: var(--rust); border-color: var(--rust); color: #FFFFFF; }
.sheet-title { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.sheet-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 12px 0 0; }
.sheet-meta div { display: flex; gap: 8px; min-width: 0; font-size: 13px; }
.sheet-meta dt { font-weight: 600; color: var(--muted); white-space: nowrap; }
.sheet-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* site-plan strip: decorative plan outline carrying the record's own area · system */
.site-plan-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 12px;
  min-height: 52px;
  background-color: var(--canvas);
  background-image: var(--survey-grid);
  border: var(--rule-dashed);
  border-radius: 6px;
  color: var(--ink);
}
.plan-glyph { flex: 0 0 auto; color: var(--olive); }
.plan-scope { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.plan-north { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }

.sheet-bottom-line { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; border: var(--rule); border-radius: 6px; margin-top: 16px; overflow: hidden; }
.bl-cell { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-right: var(--rule-dashed); min-width: 0; }
.bl-cell:last-child { border-right: 0; }
.bl-cell:hover { background: var(--wash); }
.bl-total { background: var(--wash); box-shadow: inset 3px 0 0 var(--olive); }
.bl-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bl-value { font-size: 28px; font-weight: 700; line-height: 1.15; }
.bl-value:empty { display: none; }
.bl-awaiting { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; }
.bl-awaiting:empty { display: none; }
.bl-sub { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

.sheet-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rust);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--focus);
  font-size: 13px;
  font-weight: 600;
}
.sheet-notice .icon { color: var(--rust); }

.sheet-h { margin: 20px 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }

.table-wrap { overflow-x: auto; }
.schedule, .free-vs-pro-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.schedule th, .schedule td { border-bottom: var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; }
.schedule thead th { background: var(--slate); color: var(--slate-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 0; }
.schedule thead th:first-child { border-top-left-radius: 6px; }
.schedule thead th:last-child { border-top-right-radius: 6px; }
.schedule tbody tr:hover { background: var(--wash); }
.schedule .amt { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 600; padding-right: 10px; }
.row-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.row-link:hover { text-decoration-color: var(--olive); color: var(--olive); }
.schedule td[data-cell="qty"], .schedule td[data-cell="basis"] { padding-top: 16px; }
.schedule td.amt { padding-top: 15px; }
.row-subtotal { background: var(--wash); }
.row-subtotal th, .row-subtotal td { border-top: var(--rule-dashed); }
.row-total { background: var(--slate); color: var(--slate-ink); }
.row-total .row-link { color: var(--slate-ink); text-decoration-color: rgba(249, 250, 251, 0.5); }
.row-label-print { display: none; font-weight: 700; }
.schedule tbody tr.row-total:hover { background: #111827; }
.schedule tbody tr.row-total:hover .row-link { color: var(--slate-ink); }
.row-total .amt { font-size: 15px; }

.math-details { margin-top: 14px; border: var(--rule-dashed); border-radius: 6px; }
.math-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--olive);
  list-style: none;
}
.math-toggle::-webkit-details-marker { display: none; }
.math-toggle::before { content: "∑"; font-family: var(--font-mono); font-size: 16px; color: var(--olive); }
.math-toggle::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 18px; }
.math-details[open] .math-toggle { border-bottom: var(--rule-dashed); }
.math-details[open] .math-toggle::after { content: "−"; }
.math-steps { margin: 0; padding: 10px 12px 12px 36px; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }

.sheet-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule); margin-top: 18px; }
.pair-cell { min-width: 0; padding-right: 14px; }
.pair-cell + .pair-cell { padding: 0 0 0 14px; border-left: var(--rule-dashed); }
.pair-cell .sheet-h { margin-top: 12px; }
.pair-strong { font-weight: 700; }
.pair-text { font-size: 13px; overflow-wrap: anywhere; }
.rate-list { margin: 0; display: grid; gap: 4px; font-size: 13px; }
.rate-list div { display: flex; justify-content: space-between; gap: 8px; border-bottom: var(--rule-dashed); padding: 3px 0; }
.rate-list dt { font-weight: 600; }
.rate-list dd { margin: 0; font-family: var(--font-mono); font-size: 12px; text-align: right; padding-right: 6px; }
.plain-list { margin: 0; padding-left: 18px; font-size: 13px; }
.plain-list li + li { margin-top: 3px; }
.plain-list li::marker { color: var(--olive); }
.sheet-disclaimer { margin-top: 18px; padding-top: 12px; border-top: var(--rule); font-size: 12px; color: var(--muted); }
.sheet-footer { margin-top: 12px; }
.free-watermark {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed #A8A29E;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
}

.basis-section { padding: 24px 20px 72px; background: var(--paper); }
.basis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule); margin-top: 14px; }
.basis-cell { padding: 14px 14px 14px 0; min-width: 0; }
.basis-cell + .basis-cell { padding-left: 14px; border-left: var(--rule-dashed); }
.basis-h { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.check-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.check-item { display: flex; align-items: center; gap: 8px; min-height: 30px; border-bottom: var(--rule-dashed); }
.check-item.is-ok .icon { color: var(--olive); }
.check-item.is-missing .icon, .check-item.is-invalid .icon { color: var(--rust); }
.check-item.is-missing, .check-item.is-invalid { font-weight: 700; }
.check-label { flex: 1 1 auto; min-width: 0; }
.check-note { font-family: var(--font-mono); font-size: 11px; padding-right: 6px; }

/* stamped survey report unlock */
.cert-seal {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  margin-top: 24px;
  padding: 16px;
  border: 1px dashed var(--rust);
  border-radius: var(--radius);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(180, 83, 9, 0.035) 10px 11px);
}
.seal-icon {
  width: 44px;
  height: 44px;
  padding: 9px;
  color: var(--rust);
  border: 2px solid var(--rust);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(180, 83, 9, 0.45);
  transform: rotate(-8deg);
}
.seal-title { font-size: 15px; font-weight: 700; }
.seal-copy p { font-size: 13px; color: var(--muted); }

.flash-recalc { animation: flash-recalc 900ms ease-out; }
@keyframes flash-recalc {
  0% { box-shadow: inset 3px 0 0 var(--olive); background-color: #FFFBEB; }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* ---------- horizon bar + HUD ---------- */

.cockpit-horizon-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 28px;
  height: 28px;
  padding: 0 20px;
  background: var(--slate);
  color: var(--slate-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.hz-item { display: inline-flex; align-items: center; gap: 6px; }
.hz-dot { width: 7px; height: 7px; border-radius: 50%; background: #A3E635; }
.hz-guide { margin-left: auto; }
.mobile-hud { display: none; }

/* ---------- dialogs ---------- */

.sheet-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px;
  border: var(--rule);
  border-top: var(--olive-rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(31, 41, 55, 0.28);
}
.sheet-dialog::backdrop { background: rgba(31, 41, 55, 0.55); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-title { font-size: 20px; font-weight: 700; line-height: 1.15; margin-bottom: 10px; }
.sheet-dialog p { font-size: 14px; }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.btn-close { padding: 6px 10px; background: var(--paper); border-color: var(--hairline); }
.btn-close:hover { border-color: var(--olive); }
.free-vs-pro-table { margin-top: 14px; }
.free-vs-pro-table th, .free-vs-pro-table td { border-bottom: var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; }
.free-vs-pro-table thead th { background: var(--slate); color: var(--slate-ink); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.free-vs-pro-table tbody th { background: var(--wash); font-weight: 600; }
.free-vs-pro-table td:last-child { font-weight: 600; color: var(--olive); }
.checkout-note { font-size: 13px; color: var(--muted); }

/* ---------- desktop cockpit ---------- */

@media (min-width: 901px) {
  html, body { height: 100vh; height: 100dvh; overflow: hidden; }
  body { display: flex; flex-direction: column; }
  .workspace-cockpit {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
  }
  .inspector-pane { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
  .inspector-dock { flex: 0 0 auto; }
  .inspector-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .deliverable-zone {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-shadow: -8px 0 24px rgba(31, 41, 55, 0.06);
  }
  .inspector-scroll-body,
  .deliverable-zone {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
  }
  .inspector-scroll-body.is-scroll-end,
  .deliverable-zone.is-scroll-end { -webkit-mask-image: none; mask-image: none; }

  /* Compact single-row sticky dock; scroll targets land below it. */
  .deliverable-zone { scroll-padding-top: var(--dock-h); }
  .deliverable-zone :is(summary, button, a, tr, input, select, textarea, [tabindex], h2, h3, h4, section, details) {
    scroll-margin-top: var(--dock-h);
  }
  .deliverable-dock {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    height: var(--dock-h);
    max-height: var(--dock-h);
    padding: 0 20px;
  }
  .deliverable-dock .dock-row { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  .deliverable-dock .pane-title { min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deliverable-dock .dock-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
  .deliverable-dock .dock-actions .btn-action,
  .deliverable-dock .dock-actions .btn-secondary { min-height: 44px; padding: 6px 12px; white-space: nowrap; }
  .deliverable-dock .dock-scroll-cue { margin-left: 0; }
  .deliverable-dock .action-status {
    position: absolute;
    top: 100%;
    right: 20px;
    padding: 4px 10px;
    background: var(--paper);
    border: var(--rule);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    white-space: nowrap;
    pointer-events: none;
  }
}

@media (min-width: 901px) and (max-width: 1439px) {
  .deliverable-dock .role-badge { display: none; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .brand-sub { display: none; }
  .field-row { grid-template-columns: minmax(130px, 46%) minmax(180px, 1fr); }
  .label-cell { padding: 6px 10px; gap: 0 6px; }
  .req-tag, .opt-tag { font-size: 9px; }
}

/* ---------- mobile ---------- */

@media (max-width: 900px) {
  html, body { height: auto; overflow: visible; }
  body { padding-bottom: calc(var(--hud-h) + 12px); }
  header.masthead { grid-template-columns: minmax(0, 1fr) auto auto; border-bottom-width: 3px; }
  .brand-sub { display: none; }
  .mast-title { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; min-height: 44px; padding: 0 12px; gap: 8px; box-shadow: inset 0 -1px 0 rgba(249, 250, 251, 0.14); }
  .mast-title .brand-line { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  header.masthead > .nav-tools-link { grid-column: 2; grid-row: 1; align-self: stretch; justify-self: stretch; justify-content: center; margin: 0; border-radius: 0 !important; border: 0 !important; box-shadow: inset 0 -1px 0 rgba(249, 250, 251, 0.14); background: #1F2937 !important; color: #F9FAFB !important; min-height: 44px; padding: 0 12px !important; font-size: 12px !important; }
  .mast-status { display: none !important; }
  .mast-commerce { grid-column: 3; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding: 0 8px 0 0; min-height: 44px; }
  .mast-commerce .btn-primary { min-height: 44px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .tools-word { display: none; }
  .app-toolbar { display: none; }
  .tool-subtitle { font-size: 13px; }
  .workflow-bar a { padding: 6px 12px; font-size: 11px; min-height: 44px; }
  .benchmark-row { grid-template-columns: minmax(0, 1fr); }
  .bench-index { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px 0; }
  .sample-badge { margin-top: 0; }
  .chip-row { padding: 6px 12px; gap: 6px; }
  .preset-chip { flex: 1 1 calc(50% - 3px); max-width: calc(50% - 3px); min-width: 0; min-height: 48px; padding: 6px 10px 6px 26px; }
  .preset-chip::before { left: 10px; }
  .chip-meta { display: none; }
  .bench-actions { padding: 0 12px 8px; justify-content: space-between; }
  .trust-reassurance-bar { padding: 8px 12px; font-size: 12px; }
  .trust-badge { display: none; }
  .save-state { display: none; }

  .workspace-cockpit { display: block; }
  .mobile-verdict {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 10px 12px;
    background: #1F2937;
    color: #F9FAFB;
    box-shadow: inset 0 3px 0 var(--olive);
  }
  .mv-metric { display: flex; flex-direction: column; min-width: 0; }
  .mv-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #E5E7EB; }
  .mv-value { font-size: 0.88rem; font-weight: 700; overflow-wrap: anywhere; }
  .inspector-pane { border-right: 0; border-bottom: var(--rule); }
  .inspector-dock, .deliverable-dock { padding: 12px; }
  .inspector-scroll-body { padding: 0 12px 24px; }
  .dock-jump-shelf { padding: 8px 12px; }
  .deliverable-dock { position: static; }
  .dock-scroll-cue { margin-left: 0; }
  .verdict-panel { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; }
  .state-stamp { grid-row: auto; justify-self: start; }
  .verdict-headline { font-size: 18px; }
  .hold-banner { padding: 10px 12px; }
  .kpi-cell { padding: 12px; }
  .kpi-value { font-size: 1.1rem; }
  #kpi-basis { font-size: 0.95rem; }
  #executive-deliverable { padding: 12px 12px 40px; }
  .deliverable-sheet { padding: 14px 12px; }
  .basis-section { padding: 20px 12px 40px; }
  .cockpit-horizon-bar { display: none; }

  .mobile-hud {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--hud-h);
    padding: 6px 12px;
    background: #1F2937;
    color: #F9FAFB;
    border-top: var(--olive-rule);
    white-space: nowrap;
  }
  .hud-total { font-weight: 700; font-size: 15px; }
  .hud-state { font-size: 12px; min-width: 0; overflow: hidden; color: #E5E7EB; }
  .btn-hud {
    margin-left: auto;
    min-height: 44px;
    padding: 6px 12px;
    background: var(--olive);
    border-color: var(--olive);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  .workflow-bar { display: none; }
  .pane-title { font-size: 15px; }
  .mast-status-label { display: none; }
  .mast-status { min-height: 46px; }
  .bench-index { padding: 4px 12px 0; }
  .bench-actions { padding: 0 12px 6px; }
  .trust-reassurance-bar { padding: 6px 12px; }
  .tool-subtitle { font-size: 12px; line-height: 1.35; }
  .inspector-dock { padding: 8px 12px; }
  .live-note { margin-top: 2px; }
  .field-group { padding-top: 10px; }
  .mobile-verdict { padding: 8px 12px; }
  fieldset [class*="grid"],
  form [class*="grid"],
  .field-pair,
  .prop-grid,
  .field-row,
  .basis-grid,
  .sheet-pair,
  .sheet-meta { grid-template-columns: minmax(0, 1fr); }
  .label-cell { border-right: 0; border-bottom: var(--rule-dashed); padding: 6px 12px; }
  .value-cell input, .value-cell select, .value-cell textarea { min-width: 0; }
  .unit-row input { min-width: 0; }
  .pair-cell, .pair-cell + .pair-cell { padding: 0; border-left: 0; }
  .pair-cell + .pair-cell { border-top: var(--rule-dashed); margin-top: 12px; }
  .basis-cell, .basis-cell + .basis-cell { padding: 12px 0; border-left: 0; }
  .basis-cell + .basis-cell { border-top: var(--rule-dashed); }
  .kpi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi-cell:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: var(--rule-dashed); }
  .sheet-bottom-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bl-total { grid-column: 1 / -1; border-right: 0; border-bottom: var(--rule-dashed); }
  .bl-value { font-size: 1.5rem; }
  .site-plan-strip { padding: 8px 10px; gap: 10px; }
  .cert-seal { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .cert-seal .btn-secondary { grid-column: 1 / -1; }
  .schedule { font-size: 0.8rem; }
  .schedule th, .schedule td { padding: 6px; }
  .schedule thead { display: none; }
  .schedule, .schedule tbody, .schedule tr { display: block; width: 100%; }
  .schedule tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; border-bottom: var(--rule); padding: 0 8px; }
  .schedule tbody tr:first-child { border-top: var(--rule); }
  .schedule th, .schedule td { border: 0; display: block; min-width: 0; padding: 0; }
  .schedule th[scope="row"] { grid-column: 1; }
  .schedule td.amt { grid-column: 2; grid-row: 1; align-self: center; padding: 0 6px 0 0; }
  .schedule td[data-cell="qty"], .schedule td[data-cell="basis"] { grid-column: 1 / -1; padding: 0 0 4px; font-size: 0.8rem; }
  .schedule td:empty { display: none; }
  .row-total { border-radius: 0 0 6px 6px; }
  .table-wrap { overflow-x: visible; }
  .free-vs-pro-table { font-size: 0.8rem; }
  .free-vs-pro-table th, .free-vs-pro-table td { padding: 6px; }
  .sheet-dialog { padding: 16px; width: calc(100vw - 24px); }
  .rate-list div { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  fieldset [class*="grid"], form [class*="grid"], .field-pair, .prop-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .pro-suffix { display: none; }
  .mast-title { padding: 0 8px; gap: 6px; }
  .mast-title .brand-line { font-size: 13px; }
  .site-code { display: none; }
  header.masthead > .nav-tools-link { padding: 0 8px !important; }
  .chip-name { font-size: 12px; }
  .chip-meta { font-size: 11px; }
  .hud-state { display: none; }
}

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

/* ---------- print ---------- */

@media print {
  @page { margin: 14mm; }
  html, body { height: auto !important; overflow: visible !important; background: #FFFFFF !important; background-image: none !important; color: #111827 !important; display: block !important; padding: 0 !important; }
  .app-header-stack, header, nav, form, .inspector-pane, .mobile-verdict, .deliverable-dock, .verdict-panel,
  .hold-banner, .kpi-grid, .basis-section, .cockpit-horizon-bar, .mobile-hud, dialog, button, .row-link, .benchmark-row,
  .trust-reassurance-bar, [data-checkout], .cert-seal, .svg-sprite, .site-plan-strip { display: none !important; }
  .workspace-cockpit, .deliverable-zone, [data-results] { display: block !important; height: auto !important; overflow: visible !important; border: 0 !important; padding: 0 !important; background: #FFFFFF !important; box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  #executive-deliverable { display: block !important; padding: 0 !important; background: #FFFFFF !important; background-image: none !important; border: 0 !important; }
  .deliverable-sheet { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; color: #111827 !important; }
  .deliverable-sheet * { color: #111827 !important; background: #FFFFFF !important; box-shadow: none !important; }
  .schedule th, .schedule td { border-bottom: 1px solid #9CA3AF !important; }
  .schedule thead th { border-bottom: 2px solid #111827 !important; }
  .row-total th, .row-total td { border-top: 2px solid #111827 !important; font-weight: 700; }
  .schedule thead { display: table-header-group; }
  .schedule tr, .sheet-pair, .sheet-bottom-line { break-inside: avoid; page-break-inside: avoid; }
  .math-details { border-color: #111827 !important; }
  .math-details > .math-steps { display: block !important; }
  .math-toggle::after { content: "" !important; }
  .row-label-print { display: inline !important; }
  .schedule td[data-cell], .schedule td.amt { padding-top: 6px !important; }
  .free-watermark { display: block !important; border: 1px dashed #111827 !important; }
}


/* Polish pass 2026-10-21 (blind review fixes) */
a.btn-primary[data-checkout="pro"] { background: var(--slate); border-color: var(--slate); color: var(--slate-ink); }
a.btn-primary[data-checkout="pro"]:hover { background: #111827; border-color: #111827; }
.role-badge-out { background: var(--slate); color: var(--slate-ink); border-color: var(--slate); }
.mast-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 700px) { .mast-status-text { display: none; } }
@media (min-width: 901px) {
  .deliverable-dock .pane-title { font-size: 15px; letter-spacing: 0; }
}
.num, .kpi-value, .bl-value, .bl-sub, .row-total .amt, .hud-total, #executive-deliverable table td, [data-bind] { font-variant-numeric: tabular-nums; }
.doc-stamp { display: inline-flex; align-items: center; border: 1.5px solid #9A3412; color: #9A3412; border-radius: 4px; padding: 2px 8px; margin-left: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-1.5deg); }
@media print { .doc-stamp { border-color: #111111; color: #111111; } }

/* Calm first-fold pass 2026-10-21 */
.role-badge { background: transparent !important; border-color: transparent !important; padding: 0 !important; font-size: 10px !important; letter-spacing: 0.10em; color: var(--muted) !important; }
.role-badge-in { color: var(--muted) !important; }
.role-badge-out { color: var(--olive-deep) !important; }
.req-tag { font-size: 0 !important; }
.req-tag::after { content: "*"; font-size: 11px; font-weight: 700; color: #B45309; }
.req-legend { margin-left: 10px; font-size: 11px; color: var(--muted); }
.benchmark-row { padding-top: 2px; padding-bottom: 2px; }
.chip-row { gap: 6px; }
.preset-chip { min-height: 44px; padding: 4px 10px 4px 24px; border-radius: 6px; }
.chip-name { font-size: 12.5px; }
.chip-meta { font-size: 10px; }
.btn-reset { flex-direction: row; align-items: center; min-height: 44px; padding: 4px 10px; border-style: dashed; }
.reset-sub { display: none; }
#print-btn { background: transparent; color: var(--ink); border-color: var(--hairline); }
#print-btn:hover { border-color: var(--olive); color: var(--olive-deep); }
#btn-dock-scroll { background: transparent; border-color: transparent; color: var(--olive-deep); text-decoration: underline; padding-left: 4px; padding-right: 4px; }
#btn-dock-scroll:hover { color: var(--ink); }

/* Calm pass follow-ups (blind review) */
.reset-sub { display: inline !important; }
.req-legend { font-size: 12px !important; color: var(--ink) !important; font-weight: 600; }
.req-tag::after { font-size: 12px; }

@media (max-width: 900px) {
  .trust-reassurance-bar .trust-badge { display: inline-flex !important; }
}

/* Reset control layout fix (labels collided in row layout) */
.btn-reset { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1px !important; }
.reset-main { line-height: 1.2; }
.reset-sub { display: block !important; font-size: 11px !important; line-height: 1.2; color: var(--muted) !important; }

/* New-user clarity pass 2026-10-21 */
.how-line { display: block; margin-top: 2px; font-size: 0.95em; color: var(--muted); }
.rate-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.rate-link { color: var(--olive-deep); text-decoration: underline; }
.rate-link:hover { color: var(--ink); }
.pro-info-link { background: transparent; border: 1px solid transparent; color: var(--slate-ink); font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 6px; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.pro-info-link:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
@media (max-width: 900px) { .pro-info-link { display: none; } }

/* Clarity pass follow-ups: closed details + Pro link touch target */
.prop-collapsible:not([open]) > :not(summary) { display: none !important; }
.pro-info-link { min-height: 44px; padding: 10px 12px; display: inline-flex; align-items: center; }

@media (max-width: 900px) {
  .pro-info-link { display: none !important; }
}

/* Guided merged model 2026-10-21 */
.gate-note { flex: 1 1 100%; font-size: 12px; color: var(--rust); }
#export-btn:disabled, #print-btn:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 700px) {
  body.has-sample .how-line { display: none; }
}

/* Cleared-state fixes 2026-10-21 */
.dock-jump-shelf { flex-wrap: wrap; row-gap: 6px; }
.shelf-action-status, #gate-note { flex: 1 1 100%; font-size: 12px; }
.shelf-action-status { color: var(--olive-deep); }
#gate-note { color: var(--rust); }
#export-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Workbench spacing pass 2026-10-22 */
.app-toolbar { padding-top: 16px; padding-bottom: 14px; }
.benchmark-row { padding-top: 10px; padding-bottom: 10px; }
.trust-reassurance-bar { padding-top: 9px; padding-bottom: 9px; }
.inspector-dock { padding-top: 18px; padding-bottom: 14px; }
.field-group { padding-top: 26px; }
.group-title { padding-bottom: 8px; }
.label-cell { padding-top: 12px; padding-bottom: 12px; }
.deliverable-dock { padding-top: 16px; padding-bottom: 14px; }
.dock-actions { margin-top: 12px; }
.verdict-panel { padding-top: 20px; padding-bottom: 20px; margin-top: 6px; }
.kpi-grid { margin-top: 12px; }
.rate-note { margin-top: 10px; }
.basis-section { padding-top: 32px; }
.deliverable-sheet { padding: 28px; }
.inspector-scroll-body { padding-bottom: 64px; }


/* Intuitive pass 2026-10-22 */
.first-run-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  padding: 8px 20px; background: #FFFBEB; border-bottom: 1px solid #FDE68A; color: #78350F; font-size: 13px; }
.first-run-bar p { margin: 0; }
.first-run-bar strong { font-weight: 700; }
.first-run-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-primary { min-height: 44px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--olive); background: #FFFFFF; color: var(--olive-deep); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fr-primary:hover { background: #F7FEE7; }
.fr-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #78350F; font-size: 20px; line-height: 1; cursor: pointer; }
.fr-close:hover { border-color: #FDE68A; background: #FEF3C7; }
body.first-run-visible #save-state { display: none; }
.field-help { flex-basis: 100%; margin-top: 2px; font-size: 12.5px; line-height: 1.35; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
#export-btn.is-highlighted { box-shadow: 0 0 0 4px rgba(77, 124, 15, 0.28); transition: box-shadow 0.2s ease; }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 0 rgba(77, 124, 15, 0.35); } 100% { box-shadow: 0 0 0 12px rgba(77, 124, 15, 0); } }
.flow-cue.is-pulsing { animation: flowPulse 0.6s ease-out; }
@media (max-width: 700px) { .first-run-bar { padding: 10px 12px; } }

/* accessibility-guard:2026-10-22 */
@media (max-width: 900px) {
  button,
  a.btn,
  [role="button"],
  select,
  input[type="button"],
  input[type="submit"],
  .masthead .nav-tools-link,
  a.nav-tools-link,
  .nav-tools-link,
  a.jump-tool-btn,
  .jump-tool-btn,
  .preset-chip,
  [data-preset-chip],
  .step-chip,
  .pro-link,
  a.pro-link,
  .checkout-btn,
  a.checkout-btn,
  .masthead-actions button,
  .masthead-actions a,
  .masthead-actions .btn,
  [class*="cookie"] button,
  [id*="cookie"] button,
  .header-brand,
  a.header-brand,
  .skip-link,
  .btn-remove-row,
  .icon-btn {
    min-height: 44px !important;
  }
  .btn-remove-row,
  .icon-btn {
    min-width: 44px !important;
  }
}


/* Field Estimator family: Load example menu */
.dock-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dock-tools .sample-badge { margin: 0; }
.example-menu-wrap { position: relative; }
.example-toggle { min-height: 44px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.example-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 90;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 8px; box-shadow: 0 14px 32px rgba(31,41,55,.2);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.example-menu[hidden] { display: none; }
.example-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.example-menu-label { margin: 2px 0 4px; padding: 0 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.example-close { min-height: 44px; padding: 4px 8px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.example-close:hover { color: var(--ink); }
.example-menu .chip-row { display: flex; flex-direction: column; gap: 6px; padding: 0; background: transparent; border: 0; }
.example-menu .preset-chip { width: 100%; max-width: none; flex: none; min-height: 48px; padding: 8px 10px 8px 28px; }
.example-menu .preset-chip::before { left: 12px; }
.example-menu .chip-name { font-size: 13px; }
.example-menu .chip-meta { display: block; font-size: 11px; }
.example-menu-foot { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
#example-menu #reset-btn { width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border: 1px dashed var(--hairline); border-radius: 6px; padding: 8px 10px; background: var(--wash); }
#example-menu #reset-btn:hover { border-style: solid; border-color: var(--olive); background: var(--paper); }
#example-menu .btn-undo { width: 100%; min-height: 44px; }
.example-scrim { position: fixed; inset: 0; z-index: 85; background: rgba(17,24,39,.45); }
.example-scrim[hidden] { display: none; }
.inspector-dock { padding-bottom: 18px; }
@media (max-width: 900px) {
  .dock-tools { gap: 6px; }
  .example-menu-wrap { position: static; }
  .example-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; max-height: 72vh; overflow-y: auto;
    border-radius: 14px 14px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(31,41,55,.28);
  }
  .example-menu .chip-meta { display: block; }
  .example-menu .preset-chip { max-width: none; }
  body.example-sheet-open { overflow: hidden; }
}