/* The private quote page: the aerial panel in the page flow, survey type ticks, quantity rows, the fee line table and its
   totals. Colours come from the app.css tokens. */
#private #aerial-panel { position: static; }
.canvas-host { margin-top: 8px; }
input[type=tel] {
  height: 32px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; padding: 0 8px; max-width: 100%;
}

/* Survey types: one tick per type in a wrapping row; the job number row under them. */
.type-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.type-list label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#job-number-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
#job-number-row .warn { margin: 0; }

/* Quantities: the type and its extra, then the requested and included counts. */
.quantity-list { list-style: none; margin: 10px 0 0; padding: 0; }
.quantity-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.quantity-list label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Fee lines: full width, the amount column right-aligned, each input filling its cell. */
.line-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.line-table th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 4px 6px; }
.line-table td { padding: 4px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.line-table th:nth-child(2), .line-table td:nth-child(2) { width: 160px; text-align: right; }
.line-table th:nth-child(3), .line-table td:nth-child(3) { width: 120px; }
.line-table th:nth-child(4), .line-table td:nth-child(4) { width: 90px; }
.line-table td input[type=text] { width: 100%; }
.line-table td:nth-child(2) input { text-align: right; }
.line-table input[readonly] { color: var(--muted); }

.totals { font-weight: 700; margin: 10px 0 0; }
.check { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; }