/* Customer pages (estimate.html). Builds on style.css tokens. No inline styles anywhere: the CSP forbids them. */
[hidden] { display: none !important; }
a.plain { color: inherit; text-decoration: none; }
section.card > h2:first-child { margin-top: 0; }
.small { font-size: 13px; }
.num { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.title-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.title-row h2 { margin: 0; }

.demo-banner { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border-bottom: 1px solid var(--warn); padding: 8px 16px; text-align: center; }
.notice.strong { border-width: 2px; }

/* chips */
.chip { display: inline-block; padding: 1px 9px; margin: 2px 6px 2px 0; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.neutral, .chip.tag { color: var(--muted); }
.chip.tag { font-weight: 400; }
.chip.warn, .chip.level-PARTIAL, .chip.status-assisted, .chip.status-queued { color: var(--warn); border-color: var(--warn); }
.chip.assisted { color: var(--text); background: color-mix(in srgb, var(--warn) 22%, var(--surface)); border-color: var(--warn); }
.chip.bad, .chip.level-FLAGGED, .chip.status-failed { color: var(--danger); border-color: var(--danger); }
.chip.level-CROSS_CHECKED, .chip.status-automatic, .chip.status-done { color: var(--accent); border-color: var(--accent); }
.chip.status-unreleased, .chip.status-draft { color: var(--muted); }
.chip.status-running { color: var(--accent); border-color: var(--accent); }
.bad-text { color: var(--danger); }

/* summary */
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.stat { flex: 1 1 120px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.stat-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
ul.notices { margin: 8px 0; padding-left: 20px; }
ul.checklist { margin: 4px 0; padding-left: 20px; }
a.jump { cursor: pointer; }

/* one line of the takeoff: assisted lines carry an amber edge, flagged ones a red edge; nothing is green */
article.line { border: 1px solid var(--line); border-left: 5px solid var(--warn); border-radius: 6px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
article.line.level-FLAGGED { border-left-color: var(--danger); }
article.line:not(.assisted) { border-left-color: var(--accent); }
article.line:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
article.line h3 { margin: 0; font-size: 16px; }
.line-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.qty { text-align: right; margin-left: auto; }
.qty-num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-unit { font-size: 15px; color: var(--muted); }
.qty-range { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.chips { margin: 8px 0; }
.range-why { margin: 6px 0; }
article.line ul { margin: 4px 0 8px; padding-left: 20px; }
.evidence { border-top: 1px dashed var(--line); padding: 6px 0; margin-top: 4px; font-size: 14px; }
details.problem { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
details > summary { cursor: pointer; }
details.card-details { margin: 12px 0; }

/* new job */
.drop { border: 2px dashed var(--line); border-radius: 8px; padding: 28px 16px; text-align: center; cursor: pointer; background: var(--field); }
.drop:hover, .drop:focus, .drop.over { border-color: var(--accent); outline: none; }
.drop.over { background: color-mix(in srgb, var(--accent) 10%, var(--field)); }
label.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
label.choice input { margin-top: 4px; }
.progress.big { height: 10px; }

/* pick trades and search */
.trade-group { margin: 14px 0 6px; }
.trade-group h3 { margin: 0 0 4px; font-size: 16px; }
.trade-group details { margin: 4px 0 0 4px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input { flex: 1 1 auto; min-width: 0; }
ul.results { list-style: none; padding: 0; margin: 10px 0; }
ul.results li { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 6px 0; }
.result-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
button.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }

@media (max-width: 640px) {
  .qty { text-align: left; margin-left: 0; }
  .qty-num { font-size: 22px; }
}
@media print {
  header.top, .no-print, .demo-banner { display: none !important; }
  body { background: #fff; }
  section.card, article.line { break-inside: avoid; }
}
.linklike { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }