/* Homepage workspace: measurements first, purchase decision second. */
[hidden] { display: none !important; }
:root { --paper: #f1f0ea; }
.skip-link { position: absolute; left: 16px; top: -80px; padding: 12px; background: white; z-index: 50; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.calculator-page .page-shell { max-width: 1200px; }
.calculator-page .tool-card { padding: 30px 32px; border-radius: 8px; box-shadow: none; }
.calculator-page .tool-heading { align-items: center; padding-bottom: 24px; }
.calculator-page h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -.035em; margin-bottom: 12px; }
.calculator-page .heading-copy { max-width: 620px; font-size: 1rem; line-height: 1.6; }
.estimate-panel .estimate-material { margin:.1rem 0 .65rem; color:rgba(255,255,255,.72); font-size:.82rem; }
.estimate-panel .estimate-material strong { color:#fff; }
.tool-promise { margin: 12px 0 0; color: var(--muted); font-size: .83rem; }
.method-link { flex-shrink: 0; font-size: .85rem; text-underline-offset: 4px; }
.calculator-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.measurement-panel, .estimate-panel { min-width: 0; }
.calculator-page .section-bar { margin-top: 0; }
.measure-heading { gap: 12px; align-items: center; }
.measure-heading h2 { margin: 0; }
.step-label { margin-right: 10px; color: #68746c; font-size: .78rem; font-weight: 600; letter-spacing: .03em; }
.text-button { padding: 8px 0; border: none; background: transparent; color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; font-size: .81rem; }
.material-controls { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.calculator-page input, .calculator-page select, .calculator-page .input-with-unit { border-radius: 5px; }
.calculator-page .input-with-unit input { border-radius: 0; }
.calculator-page .area-row { border: 0; border-top: 1px solid var(--line); padding: 18px 0 10px; border-radius: 0; background: transparent; }
.calculator-page .area-row:first-child { border-top: 0; padding-top: 0; }
.calculator-page .area-row-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; }
.calculator-page .area-row-grid .area-name-field { grid-column: 1 / -1; }
.calculator-page .area-name-field small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.calculator-page .area-row .field span { font-size: .82rem; }
.area-row fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.shape-preview { color: var(--muted); display: flex; align-items: center; gap: 10px; font-size: .75rem; margin: 6px 0 0; }
.shape-preview svg { width: 54px; height: 40px; flex: 0 0 auto; }
.row-depth-note { color: var(--muted); font-size: .73rem; font-weight: 400; }
.area-row .depth-field { grid-column: 1; }
.add-area { width: 100%; margin-top: 8px; background: transparent; border: 1px dashed #87978b; }
.measurement-help { font-size: .79rem; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.optional-settings { margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.optional-settings summary, .method-details summary { font-size: .85rem; font-weight: 700; cursor: pointer; line-height: 1.5; }
.optional-settings summary > span { color: var(--muted); font-size: .73rem; font-weight: 400; margin-left: 6px; }
.optional-settings .planning-controls { grid-template-columns: 1fr 1fr; }
.estimate-panel { background: #edf1e9; border-top: 3px solid var(--green-dark); padding: 22px; border-radius: 0 0 6px 6px; position: sticky; top: 20px; }
.estimate-panel h2 { font-size: 1.55rem; }
.estimate-status { margin: 12px 0 18px; font-size: .85rem; line-height: 1.5; }
.estimate-status.incomplete { color: #765319; }
.calculator-page .results-grid { grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.calculator-page .result-card { min-height: 0; padding: 16px 0; border: 0; border-bottom: 1px solid #cbd4c6; border-radius: 0; background: transparent; }
.calculator-page .result-card:nth-child(odd) { padding-right: 14px; }
.calculator-page .result-card.emphasis { grid-column: auto; }
.calculator-page .result-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.calculator-page .result-card.emphasis .result-value { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--green-dark); }
.calculator-page .result-label { font-size: .79rem; margin-bottom: 5px; }
.calculator-page .result-subtext { line-height: 1.5; font-size: .73rem; }
.estimate-details { margin-top: 14px; font-size: .8rem; line-height: 1.7; color: var(--muted); }
.estimate-details span { display: block; }
.purchase-note, .share-note { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.purchase-note { margin: 12px 0 20px; }
.share-note { margin: 10px 0 0; }
.calculator-page .result-actions { justify-content: flex-start; gap: 8px; }
.calculator-page .result-actions .button { font-size: .8rem; padding: 10px; flex: 1 1 auto; }
.calculator-page .button { text-decoration: none; }
.calculator-page button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.calculator-page .copy-status { min-height: 0; text-align: left; }
.calculator-page .copy-status:empty { display: none; }
.calculator-page textarea { width: 100%; max-width: 100%; padding: 10px; font: inherit; resize: vertical; }
.notice { border-left: 3px solid var(--green); padding: 12px; background: var(--green-soft); margin-top: 18px; font-size: .84rem; }
.comparison-section { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 26px; }
.comparison-section .section-bar { border: 0; align-items: center; }
.comparison-section .section-bar p { margin-top: 8px; line-height: 1.5; }
.currency-field { width: 110px; flex-shrink: 0; }
.comparison-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comparison-inputs fieldset { padding: 16px; border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.comparison-inputs legend { font-size: .9rem; font-weight: 750; padding: 0 6px; }
.comparison-inputs .form-grid, .unit-price-panel .form-grid { grid-template-columns: 1fr 1fr; }
.comparison-results { margin-top: 18px; }
.cost-comparison-table { border-collapse: collapse; width: 100%; text-align: left; font-size: .86rem; }
.cost-comparison-table th, .cost-comparison-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cost-comparison-table thead th { font-size: .76rem; color: var(--muted); font-weight: 600; }
.cost-comparison-table td:last-child, .cost-comparison-table th:last-child { text-align: right; }
.comparison-verdict { padding: 14px 16px; background: var(--green-soft); border-left: 3px solid var(--green); font-weight: 700; font-size: .9rem; margin: 16px 0 0; }
.comparison-footnote { margin: 12px 0; color: var(--muted); font-size: .77rem; line-height: 1.6; }
.unit-price-panel .form-grid { max-width: 500px; margin: 18px 0; }
.unit-price-panel small, .ai-tools p { color: var(--muted); font-size: .83rem; line-height: 1.6; }
.ai-tools > p { margin: 14px 0; }
.ai-tools .result-actions { justify-content: flex-start; }
.ai-tools .result-actions .button { flex: 0 1 auto; }
.calculator-page .workflow-links a { padding: 12px 0; border: 0; border-radius: 0; background: transparent; }
.calculator-page .content-section { border-radius: 8px; }
.method-details { margin: 22px 0; padding: 16px 0; border-block: 1px solid var(--line); }
.method-details li, .method-details p { font-size: .88rem; line-height: 1.7; color: var(--muted); }
.calculator-page .site-nav a[aria-current] { border-bottom-color: var(--green); }
.garden-brief-context { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:20px; margin:18px 22px 0; padding:18px; border:1px solid #b8c9bc; border-left:4px solid var(--green); border-radius:3px; background:#f4f4eb; }
.garden-brief-context h3 { margin:4px 0 6px; font-size:20px; }
.garden-brief-context p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.garden-brief-context pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:12px; line-height:1.65; }
.garden-brief-context.is-unavailable { border-left-color:#a45b35; background:#fcf0e7; }
#print-summary { display: none; }
@media (max-width: 900px) {
  .calculator-workspace { gap: 22px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .calculator-page .tool-card { padding: 24px; }
  .estimate-panel { padding: 18px; }
}
@media (max-width: 720px) {
  .garden-brief-context { grid-template-columns:1fr; margin-inline:16px; }
  .calculator-workspace, .comparison-inputs { grid-template-columns: 1fr; }
  .estimate-panel { position: static; }
  .calculator-page .tool-heading { align-items: flex-start; gap: 12px; }
  .method-link { font-size: .8rem; }
  .calculator-page .tool-heading { flex-direction: column; }
}
@media (max-width: 560px) {
  .calculator-page .page-shell { width: calc(100% - 24px); padding-top: 12px; }
  .calculator-page .site-header.page-shell { position: static; padding: 14px 0 4px; background: var(--paper); gap: 8px; }
  .calculator-page .site-nav { display: flex; gap: 18px; padding: 0; border: 0; }
  .calculator-page .site-nav a { font-size: .83rem; padding: 5px 0; }
  .calculator-page .tool-card { padding: 22px 16px; }
  .calculator-page .area-row-grid .field:first-child { grid-column: auto; }
  .calculator-page .material-controls, .calculator-page .planning-controls { grid-template-columns: 1fr 1fr; }
  .calculator-page .area-row { padding-inline: 0; }
  .calculator-page .section-bar { align-items: center; flex-direction: row; }
  .calculator-page .section-bar h2 { font-size: 1.06rem; }
  .calculator-page .comparison-section .section-bar { flex-direction: column; align-items: flex-start; }
  .calculator-page .text-button { font-size: .76rem; }
  .step-label { margin-right: 5px; }
  .comparison-inputs { gap: 16px; }
  .comparison-inputs .form-grid { gap: 10px; }
  .cost-comparison-table { font-size: .78rem; }
  .cost-comparison-table th, .cost-comparison-table td { padding: 10px 4px; }
  .calculator-page .workflow-links { grid-template-columns: 1fr; gap: 0; }
  .calculator-page .heading-copy { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
@media print {
  @page { margin: 16mm; }
  body.calculator-page { color: #111; background: white; }
  .calculator-page > header, .calculator-page > footer, .calculator-page .skip-link, .calculator-page main > :not(#print-summary) { display: none !important; }
  .calculator-page main.page-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
  #print-summary { display: block; font-family: Arial, sans-serif; font-size: 10pt; }
  #print-summary h1 { font-size: 22pt; margin: 0 0 8mm; }
  #print-summary h2 { font-size: 13pt; margin-top: 8mm; }
  #print-summary pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
}