/* A practical tool on the same warm-white reading surface as the guides. */
.area-calculator-page .guide-intro h1 { max-width:100%; }
.area-calculator-page .guide-body section.area-results { padding:28px 0; margin-top:30px; border-block:2px solid #b89746; }
.area-unit-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:26px; }
.area-unit-row label,.area-field label { font-size:14px; font-weight:600; color:#25282e; }
.area-unit-row select,.area-field input { font:inherit; font-size:16px; color:#25282e; background:#fffefa; border:1px solid #85877e; border-radius:3px; min-height:48px; padding:10px 12px; }
.area-unit-row select { max-width:100%; }
.area-calculator-page .guide-body .area-help { font-size:12px; line-height:1.75; color:#59616c; margin:14px 0 0; }
.area-section { min-width:0; border:0; border-top:1px solid #c9c9c3; margin:26px 0 0; padding:16px 0 4px; }
.area-section legend { padding:0 12px 0 0; font-size:14px; font-weight:600; color:#25282e; }
.area-section-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:start; gap:17px; }
.area-field { min-width:0; }
.area-field label { display:block; margin-bottom:7px; }
.area-field input { width:100%; }
.area-field input[aria-invalid="true"] { border:2px solid #9a2d25; }
.area-calculator-page .guide-body .area-field-error { color:#8a251e; font-size:12px; line-height:1.65; margin:7px 0 0; }
.area-field-error:empty { display:none; }
.area-remove,.area-reset { min-height:44px; border:0; border-radius:3px; background:transparent; padding:10px 8px; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.area-remove { margin-top:29px; }
.area-remove:not(:disabled):hover,.area-reset:not(:disabled):hover { background:#e8e5da; }
.area-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; }
.area-secondary { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:46px; border:1px solid #777d77; border-radius:3px; background:transparent; color:#25282e; padding:11px 16px; font-size:13px; font-weight:600; line-height:1.5; }
.area-secondary:not(:disabled):hover { background:#e8e5da; }
.area-calculator-page .button.dark { background:#25282e; color:#fffefa; min-height:46px; }
.area-calculator-page .button.dark:hover { background:#454b51; }
.area-calculator-page button:disabled,.area-calculator-page select:disabled { opacity:.55; cursor:not-allowed; }
.area-calculator-page .guide-body .area-error-summary { color:#8a251e; border-left:3px solid currentColor; padding:10px 15px; font-size:14px; margin:22px 0 0; }
.area-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.area-results[hidden],.area-error-summary[hidden] { display:none!important; }
.area-results .eyebrow { font-size:10px; color:#665018; margin-bottom:12px; }
.area-calculator-page .guide-body .area-results h3 { margin:0; font-size:25px; }
.area-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:23px 0; }
.area-totals>div { min-width:0; }
.area-totals dt { font-size:12px; line-height:1.5; color:#59616c; margin-bottom:8px; }
.area-totals dd { margin:0; color:#25282e; font-size:clamp(24px,3vw,35px); font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.area-totals small { display:block; font-size:12px; font-weight:400; color:#59616c; margin-top:6px; }
.area-calculator-page .guide-body .area-breakdown { margin:0; padding:15px 0 0; list-style:none; border-top:1px solid #d3d3cf; }
.area-breakdown li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 18px; font-size:13px; line-height:1.7; padding:7px 0; }
.area-instructions { margin:20px 0; padding-left:23px; }
.area-instructions li { padding-left:5px; margin-bottom:13px; }
.area-example-diagram { max-width:540px; margin:24px auto; }
.area-example-diagram svg { display:block; width:100%; height:auto; font:13px Arial,Helvetica,sans-serif; }
.area-diagram-label { font-size:21px; font-weight:600; }
.area-example-diagram figcaption { margin-top:10px; font-size:12px; color:#59616c; line-height:1.7; }
.area-no-script { padding:18px 0; border-block:1px solid #b89746; }
@media(max-width:640px) {
  .area-section-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .area-remove { grid-column:1/-1; margin-top:0; justify-self:start; }
  .area-totals { gap:15px; }
  .area-totals dd { font-size:25px; }
  .area-actions .button,.area-actions .area-secondary { flex:1 1 150px; }
  .area-reset { padding-inline:0; }
}
@media(max-width:380px) {
  .area-totals { grid-template-columns:1fr; gap:20px; }
  .area-totals>div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}