/* Quote page panels: find the property, lots found, lot facts, aerial with its side column, prices. Colours come from the app.css tokens and the pass tokens below. */
:root { --pass: light-dark(#2e7d32, #81c784); --pass-bg: light-dark(#edf7ee, #1f3324); }
main.quote { min-width: 1400px; margin: 0 auto; }

.save-status {
  margin: 12px 0 0; padding: 8px 12px; background: var(--fail-bg); color: var(--danger);
  border: 1px solid var(--danger); border-radius: 6px; font-weight: 600;
}

/* Landing panel: the two new-quote tiles side by side; the button and the link look the same. */
.landing .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
.tile {
  display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 16px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 18px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.tile:hover { background: var(--open); border-color: var(--accent); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Find the property: the address or lot and plan on one row; with a quote open, only the confirmed lot and Change. */
.find-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field input, .field select { color: var(--text); }
.field-wide { flex: 1 1 280px; }
.field-wide input { width: 100%; }
.find-or { align-self: center; padding-top: 18px; color: var(--muted); font-size: 12px; }
.input-short { width: 110px; }
.current-lot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.current-lot { margin: 0; }
#find-panel:not(.collapsed) #find-change { display: none; }
#find-panel.collapsed .find-row, #find-panel.collapsed .actions { display: none; }
#find-panel.collapsed .current-lot-row { margin-top: 0; }

/* From enquiry: the heading with Close, one line per enquiry value and the info text with its line breaks. */
.enquiry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.enquiry-head h2 { margin: 0; }
.enquiry-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.enquiry-lines li { margin-top: 2px; }
.enquiry-label { font-weight: 700; }
.enquiry-info { margin: 8px 0 0; white-space: pre-wrap; }

/* Lots found: one row per candidate with its own Confirm the lot button. */
.candidate-list { list-style: none; margin: 0; padding: 0; }
.candidate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.candidate:first-child { border-top: none; }
.candidate-text { flex: 1 1 260px; }
.find-message { margin: 8px 0 0; padding: 6px 10px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; }

/* Radio and tick choices. */
.choice-row { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.choice { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.choice input { margin: 0; accent-color: var(--primary); }

/* Lot facts: label, value editor, state badge. */
.facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr max-content; }
.fact-row { display: contents; }
.fact-row > * { padding: 8px 10px 8px 0; border-top: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; }
.fact-row:first-child > * { border-top: none; }
.fact-row > .fact-label { padding-left: 10px; }
.fact-row:nth-child(odd) > * { background: var(--chip); }
.fact-label { font-weight: 600; }
.fact-value { flex-wrap: wrap; gap: 6px 10px; }
.fact-pick { display: inline-flex; align-items: center; gap: 6px; }
.fact-row[data-setback] .fact-value { grid-column: span 2; }
.facts { grid-template-columns: minmax(130px, max-content) 1fr max-content minmax(130px, max-content) 1fr max-content; }
.fact-row:nth-child(2) > * { border-top: none; }
.fact-row:nth-child(odd) > * { background: none; }
.fact-row:nth-child(4n+1) > *, .fact-row:nth-child(4n+2) > * { background: var(--chip); }
.fact-row:nth-child(even) > .fact-label { padding-left: 16px; border-left: 2px solid var(--muted); }
.fact-row:nth-child(odd) > :last-child { padding-right: 16px; }
.fact-list { display: flex; flex-direction: column; flex-basis: 100%; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fact-list:empty { display: none; }

.badge { white-space: nowrap; font-size: 12px; font-weight: 600; }
.fact-row[data-state="awaiting"] .badge { color: var(--muted); }
.fact-row[data-state="found"] .badge { color: var(--accent); }
.fact-row[data-state="notFound"] .badge { color: var(--danger); }
.fact-row[data-state="typed"] .badge { color: var(--text); }
.fact-row[data-state="notFound"] .fact-value input,
.fact-row[data-state="notFound"] .fact-value select { border-color: var(--danger); }
.fact-row[data-state="awaiting"] .fact-value { color: var(--muted); }

/* Canvas block: two toolbar rows of same-height buttons and the zoom readout (each row wraps when the column is narrow; Fit, zoom and Dimensions wrap as one group), the fixed-height status line under them, then the canvas. */
.aerial-capture { margin: 0 0 4px; }
.canvas-toolbar { display: flex; flex-direction: column; gap: 6px; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.toolbar-gap { flex: 1 1 auto; }
.toolbar-group { display: inline-flex; align-items: center; gap: 6px; }
.tool-button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 400; white-space: nowrap;
}
.tool-button[hidden], svg[hidden] { display: none; }
.tool-icon { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.tool-button[aria-pressed="true"] { background: var(--open); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.toolbar-readout { min-width: 44px; padding: 0 4px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.status-line {
  height: 26px; margin: 6px 0 0; padding: 0 8px; line-height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.status-line[data-state="error"] { color: var(--danger); background: var(--fail-bg); border-color: var(--danger); font-weight: 600; }
.status-line[role="button"] { cursor: pointer; }
/* The canvas host spans the column so the canvas can measure it; the frame sits on the canvas, which may be narrower. The
   frame is an inset outline, not a border, so the canvas's client rect stays its drawing size. */
.aerial-canvas { position: relative; margin-top: 8px; overflow: hidden; }
.quote-canvas {
  display: block; width: 100%; height: auto; touch-action: none;
  outline: 1px solid var(--border); outline-offset: -1px; border-radius: 6px; background: var(--chip);
}
.quote-canvas[data-mode="house"], .quote-canvas[data-mode="edge"], .quote-canvas[data-mode="sketch"],
.quote-canvas[data-mode="street-tree"] { cursor: crosshair; }
.quote-canvas.panning { cursor: grabbing; }
.aerial-bin { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; }
.aerial-bin[hidden] { display: none; }
.sketch-float { position: absolute; z-index: 1; }
.sketch-float[hidden] { display: none; }
/* The editor guide: a centred popup over a dimmed page, its card in two columns; clicking the dimmed area closes it. */
.editor-guide { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .4); }
.editor-guide[hidden] { display: none; }
.editor-guide-card {
  width: min(860px, 100%); max-height: calc(100vh - 48px); overflow: auto; column-count: 2; column-gap: 28px;
  padding: 16px 20px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.4;
}
.editor-guide h3 { break-after: avoid; }
.editor-guide dt { break-after: avoid; }
.editor-guide dd, .editor-guide li { break-inside: avoid; }
.editor-guide h3 { margin: 8px 0 4px; font-size: 13px; font-weight: 700; }
.editor-guide h3:first-child { margin-top: 0; }
.editor-guide dl, .editor-guide ul, .editor-guide p { margin: 0; }
.editor-guide dt { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.editor-guide li .tool-icon, .editor-guide-close .tool-icon { margin-right: 4px; }
.editor-guide dd { margin: 0 0 2px 12px; }
.editor-guide ul { padding-left: 18px; }
.editor-guide .editor-guide-close { margin-top: 8px; color: var(--muted); }

/* Control rows: a 200 px label column and a control column, so the rows of every section line up. */
.form-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
.form-row { display: contents; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }

/* Colour tokens the canvas reads back for the current theme. */
.aerial-swatches [data-swatch="top"] { color: var(--top); }
.aerial-swatches [data-swatch="muted"] { color: var(--muted); }
.aerial-swatches [data-swatch="accent"] { color: var(--accent); }
.aerial-swatches [data-swatch="primary"] { color: var(--primary); }
.aerial-swatches [data-swatch="side"] { color: var(--side); }

/* Layout options: the yield, the stale banner, suggested layout cards and the template list. */
.options-yield { margin: 0; font-weight: 600; }
.options-yield:empty { display: none; }
.options-heading { font-size: 13px; font-weight: 700; margin: 12px 0 6px; }
.stale-banner { margin: 8px 0 0; padding: 8px 12px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; }
.stale-banner .stale-text { margin: 0; font-weight: 600; }
.stale-banner .actions { margin-top: 8px; }
.option-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.option-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.option-card.stale { opacity: 0.6; }
.option-card button { align-self: flex-start; margin-top: 4px; }
.option-card button[aria-pressed="true"] { background: var(--open); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.option-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.option-reason { margin: 0; }
.option-tag { padding: 1px 8px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 11px; font-weight: 700; }
.option-note { margin: 0; padding: 2px 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; }
/* The template list: two columns, so each sided template's left and right buttons share a row; a left button always starts a row. */
.template-list { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
.template-list [data-side="left"] { grid-column: 1; }

/* The canvas block and its work column: two fixed columns; --canvas-chrome is the canvas block's height outside the canvas. */
.work-area { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 0 16px; align-items: start; }
.work-side .option-cards { grid-template-columns: 1fr; }
#aerial-panel { position: sticky; top: 0; z-index: 2; --canvas-chrome: 150px; }

/* Work sections: a rule between the blocks of a section, no top margin on a block's first heading, an unframed Output body. */
.work-section .site-block + .site-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.site-block > .options-heading:first-child { margin-top: 0; }
/* A done 1 Site step: a tick and Confirmed beside the block heading. */
.step-done { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--accent); font-weight: 600; }
/* The Output section below the work area: kept to a readable width on wide screens. */
#pricing-panel { max-width: 1100px; }
.output-body { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Gated Output: its text areas dim like its inputs. */
.output-body:disabled textarea { opacity: 0.5; cursor: not-allowed; }
.output-note { margin: 0 0 8px; }

/* Sketch: the street edge and bin side lists, the Boundaries row Delete button and the warning chip. */
.sketch-lines { margin: 0 0 6px; padding-left: 20px; }
.sketch-lines li { margin: 2px 0; }
.sketch-line-delete { padding: 0 8px; min-height: 26px; font-size: 12px; }
.sketch-warning { padding: 2px 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; }

/* Tables: one style for the lot table and the Boundaries table, odd rows striped, the selected line's row highlighted. */
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.data-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 4px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:nth-child(odd) td { background: var(--chip); }
.data-table tbody tr[aria-selected="true"] td { background: var(--open); }
.data-table select, .data-table input { max-width: 100%; }
.lot-table .col-no { width: 70px; }
.col-kind { width: 140px; }
.col-host { width: 100px; }
.col-checks { width: 80px; }
.boundary-table .col-source { width: 110px; }
.col-points { width: 70px; }
.boundary-table .col-delete { width: 90px; }
.lot-table .sketch-lot-no { width: 80px; }
/* The Area / target cell: the area text, a 6 px gap, then the target box, on one line for a three-digit area. */
.lot-table .sketch-lot-area { margin-right: 6px; }
.lot-table .sketch-area-target { width: 74px; }
.cell-line { margin-top: 4px; }
.boundary-row { cursor: pointer; }

/* Badges: Pass green, Check amber, Fail red, the same in the lot table and the Site checks list. */
.status-badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid; border-radius: 11px;
  font-size: 12px; font-weight: 600; background: none;
}
.badge-pass { color: var(--pass); border-color: var(--pass); background: var(--pass-bg); }
.badge-warn { color: var(--text); border-color: var(--warn-border); background: var(--warn-bg); }
.badge-fail { color: var(--danger); border-color: var(--danger); background: var(--fail-bg); }
/* A badge keeps its own colour under the pointer. */
button.status-badge:hover { background: inherit; }
.badge-pass:hover { background: var(--pass-bg); }
.badge-warn:hover { background: var(--warn-bg); }
.badge-fail:hover { background: var(--fail-bg); }
.badge-messages { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
.site-checks { list-style: none; margin: 6px 0 0; padding: 0; }
.site-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.site-check:first-child { border-top: none; }

/* Prices: tier cards with their figures, the stage line, fee lines, the pricing inputs, warnings and notes. */
.tier-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tier-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.tier-card.recommended { border-color: var(--accent); background: var(--open); }
.tier-card.removed { color: var(--muted); }
.tier-card button { align-self: flex-start; }
.tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tier-badge { padding: 1px 8px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-size: 12px; font-weight: 600; }
.tier-reason { margin: 0; }
.tier-figures { display: grid; grid-template-columns: 1fr max-content; gap: 2px 12px; margin: 0; }
.tier-figures dt { color: var(--muted); }
.tier-figures dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tier-figures dt:last-of-type, .tier-figures dd:last-of-type { font-weight: 700; color: var(--text); }
.tier-card .choice { margin-top: 6px; }
.pricing-stages { margin: 8px 0 0; font-weight: 600; }
.pricing-stages:empty { display: none; }
.fee-lines, .pricing-list { margin: 6px 0 0; padding-left: 20px; }
.pricing-inputs { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
#pricing-checks .pricing-list li { margin-top: 4px; }

/* PDF options: the matters, tiers and statutory rows, the extra matter, job notes and the day boxes. */
.pdf-options { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
summary.options-heading { cursor: pointer; margin: 0; }
.pdf-options[open] > summary { margin-bottom: 6px; }
.pricing-client { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.pdf-options-sub { font-size: 12px; font-weight: 700; margin: 10px 0 4px; }
.pdf-option-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pdf-option-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pdf-layer-figure { min-width: 7.5em; }
.pdf-inclusions { border-collapse: collapse; font-size: 13px; }
.pdf-inclusions th, .pdf-inclusions td { padding: 2px 6px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.pdf-inclusions thead th, .pdf-inclusions-group th { font-weight: 700; }
.pdf-inclusions td + td, .pdf-inclusions thead th + th { text-align: center; }
.pdf-options .field { margin-top: 8px; }
.pdf-options textarea {
  width: 100%; max-width: 640px; padding: 6px 8px; resize: vertical; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px;
}