/* BuildCalc workbench: neutral surfaces, aligned quantities, compact controls. */
:root {
  --canvas: #f5f4ef; --surface: #fff; --surface-soft: #f8f8f5;
  --ink: #1b2420; --ink-secondary: #58615b; --rule: #dedfd8; --control-border: #858b84;
  --brand: #173d33; --brand-hover: #103028; --brand-wash: #e9efeb;
  --error: #b42318; --focus: #8a4c13;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius: 5px; --radius-lg: 8px; --radius-sm: 3px;
  --page-width: 1120px; --reading-width: 740px; --control-height: 42px;
  --type-small: .8125rem; --type-body: .9375rem; --type-title: 1.875rem; --type-number: 3.5rem;
  --bg: var(--surface); --bg-soft: var(--surface-soft); --bg-subtle: var(--canvas);
  --text: var(--ink); --text-muted: var(--ink-secondary); --text-light: var(--ink-secondary);
  --border: var(--rule); --border-strong: var(--control-border);
  --blue: var(--brand); --blue-dark: var(--brand-hover); --blue-light: var(--brand-wash); --blue-border: var(--rule);
  --green: var(--brand); --green-light: var(--surface-soft); --green-border: var(--rule);
  --amber: #8a4c13; --red: var(--error); --shadow-sm: none; --shadow-md: none;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body { font-family: var(--font); background: var(--canvas); color: var(--ink); line-height: 1.5; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .iw input:focus-visible, .iw select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 16px; background: white; color: var(--ink); }
.skip-link:focus { top: 8px; }
nav { position: relative; height: 64px; overflow: visible; padding: 0 max(24px, calc((100vw - var(--page-width)) / 2)); gap: 24px; background: var(--surface); justify-content: space-between; }
.nav-logo { font-size: 1.0625rem; letter-spacing: -.4px; display: inline-flex; align-items: center; min-height: 44px; }
.logo-mark { color: var(--brand); padding-left: 3px; }
.nav-menu { position: relative; font-size: .875rem; }
.nav-menu summary { min-height: 44px; padding: 11px 8px; cursor: pointer; }
.nav-directory { position: absolute; top: 48px; right: 0; width: 280px; background: white; border: 1px solid var(--control-border); border-radius: var(--radius); padding: 12px; z-index: 110; }
.nav-directory a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; text-decoration: none; color: var(--ink); border-radius: 3px; }
.nav-directory a:hover, .nav-directory a[aria-current] { background: var(--brand-wash); }
.nav-directory a[aria-current] { font-weight: 600; }
.nav-directory p { padding: 16px 12px 4px; font-size: .75rem; color: var(--ink-secondary); }
.nav-directory .nav-all { border-bottom: 1px solid var(--rule); border-radius: 0; }
.wrap { max-width: calc(var(--page-width) + 48px); padding: 24px 24px 64px; }
.breadcrumb { font-size: .8125rem; color: var(--ink-secondary); margin-bottom: 16px; }
.breadcrumb a { color: inherit; display: inline-block; min-height: 24px; }
.breadcrumb span { padding: 0 6px; }
.page-header, .hero { margin-bottom: 24px; text-align: left; padding: 0; }
.page-header h1, .hero h1 { font-size: var(--type-title); font-weight: 650; letter-spacing: -.8px; line-height: 1.2; margin-bottom: 8px; }
.page-header .subtitle, .hero .subtitle { font-size: var(--type-body); color: var(--ink-secondary); max-width: var(--reading-width); margin: 0; }
.badge, .stat-strip { display: none; }
.calculator-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: visible; align-items: stretch; margin-bottom: 40px; }
.calculator-card.card { border: 0; border-radius: 0; background: transparent; padding: 24px 28px; margin: 0; box-shadow: none; min-width: 0; }
.section-title { font-size: .9375rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-bottom: 20px; }
.input-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.input-header .section-title { margin: 0; }
.preset-picker { position: relative; font-size: .8125rem; }
.preset-picker summary { min-height: 36px; padding: 8px 0; cursor: pointer; color: var(--brand); }
.preset-picker .preset-buttons { position: absolute; right: 0; top: 40px; width: 280px; display: flex; flex-direction: column; padding: 8px 16px; border: 1px solid var(--control-border); border-radius: var(--radius); background: white; z-index: 20; gap: 0; }
.preset-picker .preset-btn { flex: none; width: 100%; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 12px 0; }
.preset-picker .preset-btn:last-child { border: 0; }
.preset-picker .preset-btn .ps { font-size: .75rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.fg { min-width: 0; gap: 6px; }
.fg.full { grid-column: 1 / -1; }
.fg label { font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.unit-control { margin-bottom: 4px; display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 12px; }
.unit-control .iw { max-width: none; }
.iw input, .iw select { height: var(--control-height); min-height: var(--control-height); border: 1px solid var(--control-border); border-radius: var(--radius); font-size: .9375rem; background: white; padding: 8px 12px; font-variant-numeric: tabular-nums; }
.iw input:focus, .iw select:focus { border-color: var(--brand); box-shadow: none; }
.iw select { appearance: auto; background-image: none; padding-right: 8px; }
.has-sfx input[type=number] { padding-right: 40px; }
.sfx { right: 12px; font-size: .8125rem; color: var(--ink-secondary); font-weight: 400; }
.iw input[aria-invalid=true] { border-color: var(--error); background: #fff9f7; }
.field-error { color: var(--error); font-size: .8125rem; line-height: 1.4; margin: 0; }
.field-error:empty { display: none; }
.form-error { color: var(--error); margin: 12px 0; font-size: .875rem; }
.fg .estimate-note { font-size: .75rem; line-height: 1.45; margin: 0; color: var(--ink-secondary); }
.preset-label { margin: 24px 0 8px; font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--ink-secondary); font-weight: 400; }
.preset-buttons { gap: 8px; margin: 0; padding: 0; border: 0; }
.preset-btn { padding: 8px 10px; min-height: 44px; font-size: .8125rem; font-weight: 500; border: 1px solid var(--control-border); background: white; border-radius: var(--radius); line-height: 1.3; flex: 1; }
.preset-btn .ps { font-size: .6875rem; margin-top: 3px; color: var(--ink-secondary); }
.preset-btn:hover { background: var(--surface-soft); border-color: var(--brand); color: var(--ink); }
.preset-btn:hover .ps { color: var(--ink-secondary); opacity: 1; }
.preset-btn:active, .calc-btn:active { transform: none; }
.price-fields { border-top: 1px solid var(--rule); margin: 20px 0 0; padding-top: 4px; }
.price-fields summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: .8125rem; font-weight: 500; }
.price-fields[open] summary { margin-bottom: 8px; }
.input-note { font-size: .75rem; color: var(--ink-secondary); margin: 12px 0 0; line-height: 1.5; }
.calc-btn { min-height: 44px; width: auto; display: inline-flex; justify-content: center; align-items: center; padding: 10px 28px; margin-top: 20px; border-radius: var(--radius); font-size: .875rem; font-weight: 600; letter-spacing: 0; background: var(--brand); }
.calc-btn:hover { background: var(--brand-hover); }
.estimate-pane { padding: 24px 28px; border-left: 1px solid var(--rule); min-width: 0; }
.estimate-empty h2 { font-size: .9375rem; font-weight: 600; margin-bottom: 28px; }
.empty-title { font-size: 1.25rem; letter-spacing: -.25px; margin-bottom: 8px; font-weight: 500; }
.empty-description { font-size: .875rem; color: var(--ink-secondary); max-width: 310px; line-height: 1.65; }
.empty-rule { height: 1px; background: var(--rule); margin: 32px 0 16px; }
.empty-note { font-size: .8125rem; color: var(--ink-secondary); max-width: 340px; }
.estimate-empty.is-stale .empty-title { color: var(--ink); }
#result-area { scroll-margin-top: 20px; }
.results-card.card { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
.estimate-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.estimate-header .section-title { margin: 0; }
.result-actions { display: flex; gap: 8px; margin: 0; }
.print-btn, .price-link { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; border: 0; border-radius: 3px; background: transparent; color: var(--brand); font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.primary-result { background: none; color: var(--ink); padding: 0 0 24px; margin: 0; text-align: left; border-radius: 0; }
.primary-result .pr-label { font-size: .8125rem; text-transform: none; letter-spacing: 0; color: var(--ink-secondary); opacity: 1; font-weight: 400; margin-bottom: 8px; }
.primary-result .pr-value { color: var(--ink); font-size: var(--type-number); font-weight: 600; letter-spacing: -1.8px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.primary-result .pr-unit { font-size: .875rem; font-weight: 400; color: var(--ink); opacity: 1; margin-top: 8px; }
.allowance-note { font-size: .8125rem; color: var(--ink-secondary); margin-top: 4px; }
.equivalent-note { font-size: .875rem; color: var(--ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.print-inputs { display: none; }
.order-summary { padding: 16px 0; margin: 0; border: 0; border-top: 1px solid var(--rule); background: transparent; font-size: .875rem; }
.order-summary strong { font-weight: 400; }
.order-summary strong span { font-weight: 600; font-variant-numeric: tabular-nums; }
.order-summary .estimate-note { margin: 4px 0 0; font-size: .75rem; }
.secondary-results { display: block; margin-bottom: 0; }
.r-tile { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 16px; padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; text-align: left; }
.r-tile .rt-label { grid-column: 1; grid-row: 1; align-self: center; font-size: .8125rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 400; margin: 0; }
.r-tile .rt-value { grid-column: 2; grid-row: 1; font-size: 1.25rem; font-weight: 550; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.r-tile .rt-unit { display: none; }
.cost-label-row { font-size: .8125rem; text-transform: none; letter-spacing: 0; font-weight: 600; margin: 24px 0 12px; color: var(--ink); }
.cost-grid { display: block; }
.c-tile { padding: 10px 0; background: transparent !important; border: 0; border-top: 1px solid var(--rule); border-radius: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; }
.c-tile .ct-label { font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; margin: 0; align-self: center; }
.c-tile .ct-value { font-size: 1rem !important; font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }
.c-tile .ct-sub { grid-column: 1 / -1; font-size: .75rem; color: var(--ink-secondary); margin-top: 4px; }
.c-tile.unavailable .ct-value { font-size: .8125rem !important; color: var(--ink-secondary); font-weight: 400; }
.cost-empty { font-size: .8125rem; color: var(--ink-secondary); padding: 12px 0 0; border-top: 1px solid var(--rule); }
.estimate-note { color: var(--ink-secondary); font-size: .75rem; line-height: 1.55; margin: 16px 0 0; }
.ordering-details, .calculation-breakdown { border: 0; border-top: 1px solid var(--rule); background: none; border-radius: 0; padding: 0; margin-top: 16px; }
.ordering-details summary, .calculation-breakdown summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: .8125rem; color: var(--ink); }
.calculation-breakdown p { font-size: .8125rem; color: var(--ink-secondary); margin: 0 0 8px; line-height: 1.55; }
.rec-box, #compare-area.card { border: 0; border-radius: 0; padding: 0; background: none; margin: 0; }
.rec-title { display: none; }
.rec-text { font-size: .8125rem; color: var(--ink-secondary); }
.table-scroll { overflow-x: auto; }
.comparison-table { min-width: 380px; margin: 0; }
.comparison-table th, .comparison-table td { padding: 10px 8px; font-size: .75rem; }
.cx { color: var(--error); }
.support-content { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 56px; align-items: start; }
.section { margin: 0 0 24px; }
.support-content .section { margin: 0; min-width: 0; }
.section h2, .support-disclosure summary h2 { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; border: 0; padding: 0; margin-bottom: 12px; }
.section p, .section li, .section .faq-a { font-size: .875rem; color: var(--ink-secondary); line-height: 1.65; }
.section p { margin-bottom: 12px; }
.support-disclosure summary { cursor: pointer; min-height: 44px; }
.support-disclosure summary h2 { display: inline; font-size: .9375rem; }
.ex-box { border: 0; border-radius: 0; background: none; padding: 0; }
.ex-steps li { display: grid; grid-template-columns: 140px minmax(0,1fr); padding: 8px 0; gap: 12px; }
.ex-steps .sl { min-width: 0; font-size: .75rem; font-weight: 400; }
.ex-steps .sv { font-weight: 500; font-size: .8125rem; }
.ex-box .ex-label { font-size: .75rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tips-list li { padding: 8px 0; }
.tips-list li::before { content: none; }
.assum-list .ai { display: none; }
.assum-list li { padding: 8px 0; }
.faq-item { border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin: 0; overflow: visible; }
.faq-q { background: transparent; padding: 12px 0; min-height: 48px; font-size: .875rem; font-weight: 400; }
.faq-a { display: block; border: 0; padding: 0 0 16px; }
.js-enabled .faq-item:not(.open) .faq-a { display: none; }
.faq-q:hover { background: transparent; color: var(--brand); }
.faq-icon { color: var(--ink-secondary); }
.related-grid { gap: 0 24px; }
.related-link { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 12px 0; font-size: .8125rem; min-height: 44px; }
.related-link:hover { background: transparent; }
.card, .featured-card { box-shadow: none; border: 1px solid var(--rule); border-radius: var(--radius); background: white; }
footer { padding: 24px max(24px, calc((100vw - var(--page-width)) / 2)); background: transparent; text-align: left; border-top: 1px solid var(--rule); }
.footer-inner { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.footer-links { justify-content: flex-start; display: flex; gap: 8px 20px; flex-wrap: wrap; margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-secondary); }
.footer-note { flex-basis: 100%; margin: 0; font-size: .75rem; }
.discovery-page { padding-top: 40px; }
.calculator-directory { background: white; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0 24px; margin-top: 32px; }
.directory-group { display: grid; grid-template-columns: 160px minmax(0,1fr); border-bottom: 1px solid var(--rule); }
.directory-group:last-child { border: 0; }
.directory-group h2 { font-size: .875rem; font-weight: 500; padding: 24px 0; color: var(--ink-secondary); }
.directory-tools { min-width: 0; }
.tool-tile { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 88px; padding: 20px 0; gap: 24px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.tool-tile:last-child { border: 0; }
.tool-tile:hover { background: transparent; }
.tool-name { font-size: 1rem; font-weight: 550; color: var(--ink); margin: 0 0 4px; }
.tool-use { font-size: .8125rem; color: var(--ink-secondary); display: block; }
.tool-meta { font-size: .75rem; color: var(--ink-secondary); margin: 0; white-space: nowrap; }
.project-answers { margin-top: 32px; }
.project-answers h2 { font-size: 1rem; font-weight: 550; }
.project-answers > p { color: var(--ink-secondary); font-size: .8125rem; margin-top: 4px; }
.answer-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 16px; }
.answer-item { padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
.answer-item:hover { background: none; }
.answer-q { font-size: .875rem; font-weight: 550; }
.answer-a { font-size: .75rem; }
.directory-note { font-size: .8125rem; color: var(--ink-secondary); margin-top: 24px; max-width: var(--reading-width); }
.answer-page > .results-card, .answer-page > .section, .answer-page > .ordering-note { max-width: var(--reading-width); }
.answer-page > .results-card { padding: 24px; background: white; border: 1px solid var(--rule); margin-bottom: 16px; }
.answer-page > .ordering-note { margin: 24px 0; font-size: .875rem; color: var(--ink-secondary); }
.wrap:not(.calculator-page):not(.discovery-page) > .section { max-width: var(--reading-width); }
@media (max-width: 1000px) {
  .calculator-card.card, .estimate-pane { padding: 24px; }
  .preset-buttons { flex-wrap: wrap; }
  .preset-btn { flex-basis: 120px; }
  .tool-meta { display: none; }
}
@media (max-width: 759px) {
  .calculator-workspace { grid-template-columns: minmax(0,1fr); }
  .estimate-pane { border-left: 0; border-top: 1px solid var(--rule); }
  .estimate-pane:has(.estimate-empty:not([hidden])) { border: 0; padding: 0; }
  .estimate-empty { display: none; }
  .estimate-empty.is-stale { display: block; padding: 16px 24px; }
  .estimate-empty.is-stale h2, .estimate-empty.is-stale .empty-rule, .estimate-empty.is-stale .empty-note { display: none; }
  .estimate-empty.is-stale .empty-title { font-size: .875rem; margin-bottom: 4px; }
  .estimate-empty.is-stale .empty-description { font-size: .8125rem; }
  .support-content { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .directory-group { grid-template-columns: 120px minmax(0,1fr); }
}
@media (max-width: 580px) {
  :root { --control-height: 44px; --type-title: 1.5rem; --type-number: 3rem; }
  nav { padding: 0 16px; height: 56px; }
  .wrap { padding: 20px 16px 40px; }
  .page-header { margin-bottom: 20px; }
  .page-header .subtitle { font-size: .875rem; line-height: 1.5; }
  .breadcrumb { font-size: .75rem; margin-bottom: 12px; }
  .calculator-card.card, .estimate-pane { padding: 20px; }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .unit-control { display: flex; gap: 6px; align-items: stretch; }
  .preset-label { margin-top: 20px; }
  .preset-buttons { flex-direction: column; gap: 0; }
  .preset-btn { flex: none; width: 100%; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .preset-btn .ps { margin: 0; font-size: .6875rem; text-align: right; }
  .preset-btn:hover { background: transparent; }
  .calc-btn { padding: 10px 24px; margin-top: 16px; }
  .primary-result .pr-value { letter-spacing: -1.3px; }
  .r-tile .rt-value { font-size: 1.125rem; }
  .calculator-workspace { margin-bottom: 32px; }
  .ex-steps li { grid-template-columns: 105px minmax(0,1fr); gap: 8px; }
  .related-grid { grid-template-columns: minmax(0,1fr); }
  .calculator-directory { margin-top: 24px; padding: 0 16px; }
  .directory-group { display: block; }
  .directory-group h2 { font-size: .75rem; padding: 16px 0 0; }
  .tool-tile { min-height: 72px; padding: 14px 0; }
  .tool-name { font-size: .9375rem; }
  .tool-use { font-size: .75rem; }
  .answer-list { grid-template-columns: minmax(0,1fr); gap: 0; }
  .answer-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  footer { padding: 20px 16px; }
  .footer-inner { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print {
  @page { size: A4; margin: 12mm; }
  nav, footer, .skip-link, .calculator-card, .breadcrumb, .result-actions, .support-content, .estimate-empty, .ordering-details, .cost-empty, .input-note { display: none !important; }
  body { background: white; color: black; font-size: 10pt; }
  .wrap { max-width: none; padding: 0; }
  .page-header { margin-bottom: 16pt; }
  .page-header::before { content: 'BuildCalc / Material estimate'; font-size: 9pt; color: #444; display: block; margin-bottom: 8pt; }
  .page-header h1 { font-size: 19pt; }
  .page-header .subtitle { font-size: 9pt; }
  .calculator-workspace { display: block; border: 0; margin: 0; }
  .estimate-pane { border: 0; padding: 0; }
  .estimate-header { margin-bottom: 8pt; }
  .print-inputs { display: block; font-size: 9pt; margin-bottom: 14pt; }
  .primary-result { padding-bottom: 8pt; }
  .primary-result .pr-value { font-size: 30pt; }
  .primary-result .pr-label, .primary-result .pr-unit, .allowance-note { font-size: 9pt; color: #333; }
  .order-summary { padding: 6pt 0; }
  .secondary-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12pt; }
  .r-tile { display: block; padding: 8pt 0; }
  .r-tile .rt-value { text-align: left; margin: 4pt 0; font-size: 15pt; }
  .cost-label-row { margin: 10pt 0 6pt; }
  .c-tile { padding: 6pt 0; }
  .c-tile.unavailable { display: none; }
  .calculation-breakdown { margin-top: 10pt; break-inside: avoid; }
  .calculation-breakdown summary { display: none; }
  .calculation-breakdown p, .estimate-note { font-size: 9pt; line-height: 1.45; color: #333; }
  .calculation-breakdown .breakdown-body { display: block !important; }
  .calculation-breakdown .breakdown-body p:first-child { display: none; }
  .results-card { break-inside: avoid; }
}