/* V38: original cascade from 25 source stylesheets, combined without rule changes. */
html { color-scheme:light dark; scroll-behavior:auto; overflow-anchor:none; }
body { margin:0; padding:16px; background:light-dark(#f4f5f5,#141619); overflow-anchor:none; }
#square-footage-task-prototype {
  --surface:light-dark(#fcfcfa,#181a1d); --panel:light-dark(#fff,#22252a); --ink:light-dark(#20252a,#eceef0);
  --muted:light-dark(#626970,#b0b6bf); --line:light-dark(#dfe3e5,#40464e); --soft:light-dark(#f1f4f5,#2b3036);
  --link:light-dark(#28586e,#a2d0e4); --error:light-dark(#8d3b22,#ffb89e);
  max-width:1080px; margin:0 auto; background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; overflow-anchor:none; font:400 15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a.action { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 11px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); text-decoration:none; }
button[aria-pressed="true"] { background:var(--ink); color:var(--panel); border-color:var(--ink); }
button:disabled { opacity:.5; }
a { color:var(--link); text-underline-offset:3px; }
input,select,textarea { width:100%; padding:7px 9px; margin-top:5px; border:1px solid var(--line); border-radius:6px; background:var(--panel); min-width:0; font-size:16px; }
label { display:block; font-size:14px; font-weight:500; }
h1 { font-size:27px; line-height:1.2; font-weight:500; margin:0 0 7px; letter-spacing:-.025em; }
h2 { font-size:20px; font-weight:500; margin:0 0 12px; }
h3 { font-size:16px; font-weight:500; margin:0; }
p { margin:0 0 12px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px 22px; border-bottom:1px solid var(--line); background:var(--panel); border-radius:10px 10px 0 0; }
.nav nav,.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.brand { font-weight:500; } main { padding:22px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); gap:22px; margin-top:20px; align-items:start; }
.room { border:1px solid var(--line); border-radius:8px; background:var(--panel); margin-bottom:12px; padding:16px; scroll-margin-top:16px; }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.room-heading h3 { min-width:0; overflow-wrap:anywhere; }
.room-toggle { display:flex; flex:1; min-width:0; gap:8px; padding:5px 0; text-align:left; justify-content:flex-start; border:0; background:transparent; }
.room-title { flex:1; min-width:0; overflow-wrap:anywhere; font-size:16px; font-weight:500; }
.chevron { width:10px; flex:none; color:var(--muted); }
.remove-room { flex:none; font-size:13px; padding:5px 8px; }
.room-heading .amount { white-space:nowrap; font-variant-numeric:tabular-nums; font-size:14px; }
.room-name { margin:14px 0 16px; } .room-name input { font-weight:400; }
.toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.shape-help { display:inline-block; margin:10px 0 16px; font-size:13px; }
.fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px; }
.field-title { font-size:14px; font-weight:500; }
.unit-inputs { display:flex; gap:7px; }
.unit-inputs .unit-field { min-width:0; flex:1; }
.unit-field { display:block; position:relative; min-width:0; margin-top:5px; }
.unit-field input { display:block; margin:0; padding-right:32px; font-weight:400; }
.unit-suffix { position:absolute; top:50%; right:10px; transform:translateY(-50%); pointer-events:none; font-size:13px; color:var(--muted); font-weight:400; }
.subarea { margin:16px 0 0; padding:14px; min-width:0; border:0; background:var(--soft); border-radius:6px; border-left:3px solid var(--line); scroll-margin-top:16px; }
.subarea .owner { font-size:13px; margin:3px 0 12px; color:var(--muted); overflow-wrap:anywhere; }
.subarea .item-name { margin-bottom:12px; }
.sub-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 85px; gap:12px; }
.measurements { border:0; margin:0; padding:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.room-actions { margin-top:16px; }
.add-room { width:100%; border-style:dashed; margin:0 0 12px; }
.room-net { display:flex; justify-content:space-between; gap:10px; padding-top:14px; margin-top:16px; border-top:1px solid var(--line); font-weight:500; }
.message { margin-top:12px; font-size:13px; color:var(--muted); } .error { color:var(--error); }
aside { min-width:0; }
.results { padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.preview-title { overflow-wrap:anywhere; margin-bottom:4px; }
.diagram svg { display:block; width:100%; height:215px; }
.diagram .footprint { stroke:var(--ink); fill:var(--soft); stroke-width:1.6; }
.diagram .ghost { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; fill:none; }
.diagram .dimension { stroke:var(--muted); stroke-width:1; fill:none; }
.diagram text { fill:var(--ink); font:500 14px system-ui,sans-serif; }
.diagram .active-line { stroke:var(--link); stroke-width:3; }
.diagram text.active-line { fill:var(--link); stroke:none; }
.diagram-legend { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 12px; font-size:12px; }
.diagram-legend > div { overflow-wrap:anywhere; }
.total { font-size:35px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.03em; margin:2px 0 8px; }
.total span { font-size:16px; color:var(--muted); letter-spacing:0; font-weight:400; }
.breakdown { padding-top:12px; margin-top:14px; border-top:1px solid var(--line); }
.breakdown-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; margin-bottom:6px; }
.breakdown-row > :first-child { min-width:0; overflow-wrap:anywhere; }
.breakdown-row > :last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.room-jump { display:flex; justify-content:space-between; gap:10px; width:100%; border:0; background:transparent; text-align:left; font-size:13px; padding:6px 8px; margin:0 0 4px; }
.room-jump > :first-child { min-width:0; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:3px; }
.room-jump > :last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.room-jump[aria-current="true"] { background:var(--soft); }
.results .actions { margin-top:16px; }
.results .result-actions { margin-top:10px; }
.preview-card { padding:16px 18px; margin-bottom:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.preview-card .diagram svg { height:180px; }
.preview-card > p { margin-bottom:6px; }
.preview-card .diagram-legend { margin-bottom:10px; }
.result-panel { border-top:1px solid var(--line); margin-top:12px; padding-top:8px; }
.result-panel > summary { cursor:pointer; padding:8px 0; font-size:14px; font-weight:500; }
.result-panel .panel-glance { display:block; margin-left:17px; margin-top:3px; font-weight:400; }
.result-panel[open] .panel-glance { display:none; }
.panel-content { padding:8px 0 0; }
.calculation-room { margin-bottom:16px; }
.calculation-line { display:grid; gap:3px; margin:10px 0; font-size:13px; overflow-wrap:anywhere; }
.calculation-line > :last-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.calculation-net { font-size:13px; font-weight:500; margin:10px 0 14px; overflow-wrap:anywhere; }
.estimate-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:12px 0; }
.scope-note { margin-top:5px; }
.material-room-choices { margin-top:10px; }
.material-room-choices label { display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-weight:400; font-size:13px; }
.material-room-choices input { flex:none; width:16px; height:16px; min-height:0; margin-top:2px; }
.area-field input { padding-right:60px; }
.material-price { margin:12px 0; }
.material-result { border-radius:6px; background:var(--soft); padding:12px; margin:14px 0 12px; }
.material-result .breakdown-row { flex-wrap:wrap; gap:2px 12px; }
.material-result .breakdown-row > :last-child { margin-left:auto; }
.cost-basis { margin-top:10px; margin-bottom:0; overflow-wrap:anywhere; }
/* One complete result, with the same hand-off control as the result card. */
.share-control { display:inline-flex; }
.share-menu { position:fixed; inset:auto; margin:0; min-width:220px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); box-shadow:0 6px 20px rgb(0 0 0 / .12); }
.share-menu p { margin:0 0 8px; }
.share-menu button { width:100%; justify-content:flex-start; }
.full-result { width:min(800px,calc(100vw - 32px)); max-height:calc(100vh - 40px); margin:auto; border:1px solid var(--line); border-radius:10px; padding:0 22px 22px; background:var(--panel); color:var(--ink); overflow:auto; }
.full-result::backdrop { background:rgb(0 0 0 / .4); }
.report-header { position:sticky; top:0; z-index:1; background:var(--panel); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.report-header h2 { margin:0; }
.report-section { margin-top:20px; }
.report-section > h3,.report-section > .room-heading { margin-bottom:12px; font-size:18px; }
.report-section + .report-section { border-top:1px solid var(--line); padding-top:20px; }
.report-totals { margin-top:16px; }
.report-room { padding:14px; margin-top:12px; border:1px solid var(--line); border-radius:6px; }
.report-calculation { margin-top:12px; }
.report-calculation h4 { font-size:14px; font-weight:500; margin:0 0 4px; }
.report-calculation p { margin-bottom:6px; }
.formula { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.report-settings { margin:12px 0; font-size:13px; }
.report-settings > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; margin-bottom:7px; }
.report-settings dt { color:var(--muted); }
.report-settings dd { margin:0; overflow-wrap:anywhere; }
.manual-copy { margin-top:16px; }
.manual-copy textarea { height:260px; resize:vertical; font:400 13px/1.6 ui-monospace,monospace; margin-bottom:12px; }
[data-panel="materials"] { scroll-margin-top:16px; }
.help-links { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; }
.banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:var(--soft); border-radius:6px; padding:12px 15px; margin-top:15px; }
.guide { border-top:1px solid var(--line); padding:24px 0; margin-top:24px; scroll-margin-top:20px; }
.guide.selected { border-top-color:var(--link); }
.guide-grid { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); gap:22px; }
ol { padding-left:22px; margin:0 0 16px; } li { margin-bottom:8px; }
.aid { background:var(--soft); border-radius:8px; padding:16px; margin-top:16px; }
.aid .actions { margin-top:16px; }
.summary { padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--panel); margin-top:20px; }
.summary textarea { min-height:170px; resize:vertical; font:400 13px/1.5 ui-monospace,monospace; }
.summary-intro { margin:12px 0 4px; }
.summary .actions { margin-top:12px; }
.copy-status { min-height:20px; margin-top:8px; margin-bottom:0; }
.results .copy-status:empty { display:none; }
.footer { color:var(--muted); font-size:13px; margin-top:20px; }
@media(max-width:700px) { .workspace,.guide-grid { grid-template-columns:minmax(0,1fr); } aside { position:static; } main { padding:16px; } .nav { padding:12px 16px; } }
@media(max-width:400px) { body { padding:8px; } .fields { grid-template-columns:minmax(0,1fr); } .room { padding:12px; } h1 { font-size:24px; } .room-toggle { flex-wrap:wrap; } .room-toggle .amount { flex-basis:100%; margin-left:18px; } }
@media(pointer:coarse) { button,a.action,input,select { min-height:44px; } }

#share-card { anchor-name:--share-card; }
#share-report { anchor-name:--share-report; }
#share-menu-card { position-anchor:--share-card; top:anchor(bottom); left:anchor(left); margin-top:6px; }
#share-menu-report { position-anchor:--share-report; top:anchor(bottom); right:anchor(right); margin-top:6px; }

.share-control > button { gap:6px; }

/* Room status lives in the heading; only compound rooms need a local reconciliation. */
.room-heading .amount { display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; }
.room-total-label { font-size:11px; font-weight:400; color:var(--muted); }
.main-footprint-label { font-size:14px; font-weight:500; margin:0 0 4px; }
.field-error { margin:6px 0 0; font-size:12px; font-weight:400; line-height:1.4; }
input[aria-invalid="true"] { border-color:var(--error); }
.room-breakdown { margin-top:16px; padding:14px 0 0; border-top:1px solid var(--line); }
.room-breakdown h4 { margin:0 0 10px; font-size:14px; font-weight:500; }
.room-breakdown .breakdown-row { font-size:13px; }
.room-breakdown-total { padding-top:8px; margin-top:8px; border-top:1px solid var(--line); font-weight:500; }
.room-breakdown > p { margin:8px 0 0; font-size:12px; }
.section-area { margin-bottom:0; }

/* Names are the primary measurement labels; letters are shared visual references. */
.field-title { display:flex; align-items:center; gap:7px; }
.edge-tag { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:21px; height:21px; padding:0 4px; border:1px solid var(--line); border-radius:4px; font-size:11px; line-height:1; font-weight:500; color:var(--muted); }
.dimension-field.is-active .field-title { color:var(--link); }
.dimension-field.is-active .edge-tag,.diagram-legend .is-active .edge-tag { color:var(--link); border-color:var(--link); background:var(--soft); }
.dimension-field.is-active input { border-color:var(--link); }
.dimension-field.is-active input[aria-invalid="true"] { border-color:var(--error); }
.diagram text { font-size:14px; }
.diagram text.notch-label { font-size:12px; }
.diagram-legend > div { display:flex; flex-direction:column; gap:3px; padding:4px; border-radius:4px; }
.diagram-legend > div > :first-child { display:flex; align-items:center; gap:5px; }
.diagram-legend > div > :last-child { font-variant-numeric:tabular-nums; }
.diagram-legend .is-active { color:var(--link); background:var(--soft); }
.room-toggle { cursor:pointer; }

#sfp-heading { scroll-margin-top:16px; }

/* Keep object-level measurement help beside the optional name. */
.name-help-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:end; margin:14px 0 16px; }
.name-help-row > .room-name,.name-help-row > .item-name { margin:0; }
.name-help-row .shape-help { display:flex; align-items:center; align-self:end; min-height:40px; margin:0; line-height:1.4; }
.subarea .name-help-row { margin:0 0 12px; }
/* One visible next-step entry after the net area actions. */
.material-panel { border:1px solid var(--line); border-radius:6px; padding:0; margin-top:16px; background:var(--soft); }
.material-panel > summary { padding:11px 12px; }
.material-entry-title { font-size:14px; font-weight:500; }
.material-entry-description { display:block; margin:4px 0 0 17px; font-size:12px; font-weight:400; }
.material-panel .panel-glance { font-size:12px; }
.material-panel .panel-glance:empty { display:none; }
.material-panel .panel-content { padding:0 12px 12px; }
@media(max-width:500px) { .name-help-row { grid-template-columns:minmax(0,1fr); gap:6px; } .name-help-row .shape-help { min-height:0; } }

.name-help-row + .toolbar,.name-help-row + .sub-toolbar { margin-bottom:14px; }

/* v10: a quiet measuring workspace, with diagrams owned by each record. */
body { background:light-dark(#f4f3ed,#171b19); padding:24px; }
#square-footage-task-prototype {
  --surface:light-dark(#faf9f5,#1d2320); --panel:light-dark(#fffefa,#252d28);
  --ink:light-dark(#253c32,#e7ede8); --muted:light-dark(#68736b,#b3beb6);
  --line:light-dark(#d9dfd6,#455348); --soft:light-dark(#f0f3ec,#303d32);
  --link:light-dark(#285b4a,#addac5); --error:light-dark(#993e24,#ffbaa0);
  max-width:1200px; border:0; border-radius:0; background:transparent;
}
main { padding:32px 0; }
.nav { padding:0 0 18px; background:transparent; border-radius:0; }
.brand { display:flex; align-items:center; gap:9px; font-weight:600; letter-spacing:-.02em; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; background:var(--link); color:var(--panel); width:30px; height:30px; border-radius:4px; font-size:26px; }
.nav nav button { background:transparent; border-color:transparent; }
.nav nav button[aria-pressed="true"] { background:var(--soft); color:var(--link); border-color:var(--line); }
.eyebrow { font-size:10px; letter-spacing:.17em; color:var(--muted); margin:0 0 10px; }
h1 { font:400 clamp(28px,3vw,40px)/1.1 Georgia,"Times New Roman",serif; letter-spacing:-.035em; text-wrap:balance; margin-bottom:12px; }
main > p.muted { max-width:65ch; }
.workspace { grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr); gap:28px; margin-top:28px; }
.room { border-radius:8px; padding:20px; margin-bottom:14px; }
.room-title { font-size:18px; font-weight:600; }
.room-heading .amount { font-size:14px; }
.remove-room { color:var(--muted); }
button,a.action,input,select { min-height:40px; }
button { cursor:pointer; transition:background .16s ease,border-color .16s ease; }
button:not(:disabled):hover { background:var(--soft); border-color:var(--muted); }
button:not(:disabled):active { transform:translateY(1px); }
button:disabled { cursor:default; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--link); outline-offset:3px; }
input { font-variant-numeric:tabular-nums; }
.room-actions { gap:12px; }
.subarea { margin-top:22px; padding:18px; border-left-color:var(--link); }
.subarea .room-heading button { min-height:32px; font-size:12px; }
.object-measurements { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:16px; align-items:start; margin-top:18px; }
.object-measurements > .fields { grid-column:1; grid-row:1; grid-template-columns:minmax(0,1fr); gap:12px; }
.object-sketch { grid-column:2; grid-row:1; position:sticky; top:16px; padding:10px 8px; border-radius:6px; background:var(--soft); border:1px solid transparent; }
.object-sketch.is-current { border-color:var(--line); }
.object-sketch > p { font-size:10px; margin-bottom:2px; }
.object-sketch .diagram svg { height:160px; }
.object-sketch .diagram-legend { display:none; }
.results { padding:22px; border-radius:8px; border-top:3px solid var(--link); }
.total { font-size:44px; font-weight:500; letter-spacing:-.045em; margin:8px 0; }
#share-card { background:var(--link); border-color:var(--link); color:var(--panel); }
#share-card:hover { background:var(--ink); }
.breakdown { margin-top:24px; padding-top:18px; }
.material-panel { margin-top:22px; background:var(--panel); border-radius:6px; }
.material-panel > summary { padding:14px; }
.material-panel .panel-content { padding:0 14px 16px; }
.material-step { border-top:1px solid var(--line); padding:16px 0; }
.material-step h3 { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:12px; }
.step-number { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; background:var(--soft); color:var(--link); border-radius:3px; font-size:11px; }
.step-result { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 12px; margin-top:12px; background:var(--soft); border-radius:4px; }
.step-result strong { font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.material-step:last-of-type .step-result strong { font-size:28px; }
.step-result .small { font-size:12px; }
.material-step .estimate-fields { margin-top:0; }
.guide { padding:30px 0; margin-top:28px; }
.guide p,.guide li { max-width:65ch; }
.skip-link { position:absolute; left:24px; top:-100px; padding:12px; background:var(--panel); z-index:3; }
.skip-link:focus { top:8px; }
.full-result { border-radius:8px; }
@media(max-width:1100px) and (min-width:701px) {
  .workspace { grid-template-columns:minmax(0,1.4fr) minmax(310px,1fr); gap:20px; }
  .object-measurements { grid-template-columns:minmax(0,1fr); }
  .object-sketch { grid-column:1; grid-row:1; position:static; }
  .object-sketch .diagram { max-width:300px; margin:auto; }
  .object-sketch .diagram svg { height:130px; }
  .object-measurements > .fields { grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  body { padding:16px; }
  main { padding:24px 0; }
  .nav { padding:0 0 14px; gap:10px; }
  .nav nav { gap:2px; }
  .nav nav button { padding:6px 8px; font-size:13px; }
  .workspace { grid-template-columns:minmax(0,1fr); gap:20px; margin-top:22px; }
  .room,.results { padding:16px; }
  .room-heading { gap:8px; }
  .room-title { font-size:16px; }
  .room-heading .amount { font-size:12px; }
  .object-measurements { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:14px; }
  .object-sketch { grid-column:1; grid-row:1; position:static; padding:6px 10px; }
  .object-sketch .diagram { max-width:320px; margin:auto; }
  .object-sketch .diagram svg { height:135px; }
  .object-measurements > .fields { grid-column:1; grid-row:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .subarea { padding:12px; }
  .field-title { font-size:13px; gap:4px; }
  .edge-tag { min-width:17px; height:18px; font-size:10px; }
  .unit-inputs { gap:5px; }
  .unit-field input { padding-left:7px; padding-right:24px; }
  .unit-suffix { right:7px; }
  .area-field input { padding-right:60px; }
  .room-actions { gap:8px; }
  .full-result { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:0 16px 16px; }
  .report-settings > div { grid-template-columns:100px minmax(0,1fr); gap:12px; }
}
@media(max-width:380px) {
  .object-measurements > .fields { grid-template-columns:minmax(0,1fr); }
  .room-toggle { flex-wrap:wrap; }
  .room-toggle .amount { flex-basis:100%; margin-left:18px; align-items:flex-start; }
  .brand { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } button:not(:disabled):active { transform:none; } }

.layout-picker { margin:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; }
.layout-picker>summary { cursor:pointer; display:flex; align-items:center; gap:10px; font-size:14px; }
.layout-picker>summary .mini-drawing { width:48px; flex:none; }
.layout-picker>summary strong { display:block; font-weight:600; }
.layout-picker>summary .small { display:block; }
.layout-options { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px; margin-top:16px; }
.layout-group+.layout-group { margin-top:16px; }
.layout-group h4 { font-size:12px; margin:0 0 8px; font-weight:600; color:var(--muted); }
.layout-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.layout-choice { display:flex; align-items:center; gap:7px; min-width:0; min-height:58px; font-size:12px; line-height:1.3; padding:6px 8px; text-align:left; }
.layout-choice .mini-drawing { width:42px; flex:none; }
.layout-choice[aria-pressed="true"] { border-color:var(--link); background:var(--soft); box-shadow:inset 3px 0 var(--link); }
.mini-drawing svg,.layout-preview svg { display:block; width:100%; height:auto; }
.sketch-area { fill:var(--soft); stroke:var(--link); stroke-width:2; }
.sketch-cut { fill:var(--panel); stroke:var(--link); stroke-width:2; }
.sketch-split { fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 3; }
.sketch-edge { fill:none; stroke:var(--link); stroke-width:2; }
.layout-preview { align-self:start; position:sticky; top:16px; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.layout-preview h4 { font-size:13px; margin:6px 0; }
.layout-preview p { font-size:12px; line-height:1.5; margin:0; }
.layout-preview .preview-label { color:var(--muted); font-size:10px; margin-bottom:4px; }
.layout-note,.shape-composition { margin:12px 0; font-size:12px; line-height:1.5; }
.shape-composition { padding:10px 12px; border-left:2px solid var(--line); background:var(--soft); }
.shape-composition p { margin:0; }
.layout-undo { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; background:var(--soft); margin:12px 0; font-size:12px; }
.layout-undo button { min-height:32px; }
.subarea .sub-toolbar { grid-template-columns:minmax(0,1fr) 100px; }
.surface-label { margin:12px 0 0; font-size:12px; color:var(--muted); }
.wall-input .object-sketch { background:var(--soft); }
.simple-measurement .measurement-keys { display:flex; gap:5px; flex-wrap:wrap; font-size:11px; line-height:1.5; }
.simple-measurement .measurement-keys span { border-top:1px solid var(--line); padding-top:4px; }
.simple-measurement .measurement-keys .is-active { color:var(--link); border-color:var(--link); font-weight:600; }
@media(max-width:1100px) { .layout-options { grid-template-columns:minmax(0,1fr) 160px; } }
@media(max-width:550px) { .layout-options { grid-template-columns:minmax(0,1fr); } .layout-preview { position:static; display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; } .layout-preview .preview-label { grid-column:1/-1; } .layout-choice { min-height:64px; } }

body { padding:16px; }
main { padding:24px 0; }
.room { padding:16px; }
.name-help-row { margin:10px 0 12px; }
.object-measurements { margin-top:14px; }
.object-sketch { padding:8px; }
.object-sketch .diagram svg { height:140px; }
/* One compact field. The menu overlays the page; it never adds page height. */
.shape-dropdown { min-width:0; }
.shape-dropdown>.field-title { margin-bottom:5px; font-size:13px; font-weight:500; }
.shape-trigger { display:flex; align-items:center; gap:7px; width:100%; text-align:left; min-height:40px; font-size:13px; padding:5px 9px; }
.shape-trigger>.mini-drawing { width:30px; flex:none; }
.shape-trigger>:nth-child(2) { flex:1; min-width:0; }
.picker-chevron { color:var(--muted); font-size:12px; }
.room-input-tools { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:12px; align-items:end; }
.picker-popover { position:fixed; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) 190px; grid-template-rows:minmax(0,1fr) auto; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); box-shadow:0 8px 24px rgb(0 0 0 / .13); max-height:min(370px,calc(100dvh - 24px)); overflow:hidden; }
.picker-popover[hidden] { display:none; }
.picker-list { min-height:0; overflow:auto; overscroll-behavior:contain; max-height:310px; padding:2px 5px 2px 0; }
.picker-option { display:flex; align-items:center; gap:7px; width:100%; text-align:left; min-height:34px; padding:5px 7px; font-size:12px; line-height:1.35; background:transparent; border:1px solid transparent; border-radius:3px; }
.picker-option .mini-drawing { flex:none; width:29px; }
.picker-option[aria-selected="true"] { background:var(--soft); border-color:var(--line); color:var(--link); }
.picker-option:hover,.picker-option:focus-visible { background:var(--soft); outline:2px solid var(--link); outline-offset:-2px; }
.picker-preview { min-height:0; overflow:auto; padding:7px 10px; border-left:1px solid var(--line); }
.picker-preview svg { display:block; width:100%; height:112px; }
.picker-preview h4 { font-size:13px; font-weight:600; line-height:1.35; margin:5px 0; }
.picker-preview p { font-size:12px; line-height:1.5; margin:5px 0; }
.picker-preview .picker-formula { padding-top:7px; margin-top:8px; border-top:1px solid var(--line); color:var(--ink); }
.picker-preview .preview-label { font-size:10px; color:var(--muted); }
.picker-note { grid-column:1/-1; border-top:1px solid var(--line); padding:6px 5px 1px; font-size:10px; line-height:1.4; color:var(--muted); margin:0; }
.opening-action { width:auto; margin:0; }
.opening-action select { font-size:13px; }
.other-sections { position:relative; margin:0; }
.other-sections>summary { cursor:pointer; font-size:12px; padding:10px 4px; color:var(--muted); }
.other-section-actions { position:absolute; bottom:calc(100% + 5px); right:0; z-index:3; min-width:170px; padding:6px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.other-section-actions button { width:100%; margin:2px 0; text-align:left; justify-content:flex-start; font-size:12px; }
.opening-note { font-size:11px; margin:6px 0 0; }
.room-actions { margin-top:14px; }
.subarea .room-heading h3 { min-width:0; overflow-wrap:anywhere; }
.subarea .sub-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 90px; align-items:end; }
.shape-composition { margin:8px 0; padding:8px 10px; }
@media(max-width:1100px) and (min-width:701px) {
  .object-measurements { grid-template-columns:minmax(0,1fr) 145px; }
  .object-measurements>.fields { grid-column:1; grid-row:1; grid-template-columns:minmax(0,1fr); }
  .object-sketch { grid-column:2; grid-row:1; }
}
@media(max-width:550px) {
  .room-input-tools { grid-template-columns:minmax(0,1fr) 115px; gap:8px; }
  .picker-popover { grid-template-columns:minmax(0,1fr) 135px; }
  .picker-preview { padding:6px; }
  .picker-preview svg { height:85px; }
  .picker-preview p,.picker-option { font-size:11px; }
  .picker-option .mini-drawing { width:24px; }
  .shape-trigger { font-size:12px; }
}

.picker-option,.shape-trigger { justify-content:flex-start; text-align:left; }
.picker-option>span:last-child { flex:1; min-width:0; text-align:left; }
.name-help-row { grid-template-columns:minmax(0,1fr); }
.inline-measure-help { margin:8px 0 0; font-size:12px; }
.inline-measure-help>summary { cursor:pointer; color:var(--link); width:fit-content; padding:4px 0; }
.inline-measure-help>p { max-width:65ch; margin:6px 0; line-height:1.5; }
.inline-measure-help[open] { padding-bottom:4px; }
.inline-measure-help+.object-measurements { margin-top:8px; }
.subtract-action { margin:0; width:auto; }
.subtract-action select { margin-top:0; font-size:13px; min-height:40px; }
.material-guidance { margin:16px 0 0; padding:10px 12px; background:var(--soft); border-left:2px solid var(--line); border-radius:3px; }
.material-guidance p { font-size:12px; line-height:1.5; margin:0; }
.material-guidance button { margin-top:7px; min-height:32px; font-size:12px; }
.material-guidance.ready { padding:0; background:transparent; border:0; color:var(--muted); }
.material-guidance+.material-panel { margin-top:10px; }

/* Added and removed areas stay readable without relying on colour alone. */
.subarea { padding:0; border:1px solid var(--line); border-left:3px solid var(--area-tone); background:var(--panel); }
.area-add { --area-tone:light-dark(#245b79,#a6d8f0); --area-wash:light-dark(#edf5fa,#253b48); }
.area-subtract { --area-tone:light-dark(#914725,#f0bd9c); --area-wash:light-dark(#fcf0e8,#453329); }
.area-header { padding:9px 12px 2px; background:var(--area-wash); border-radius:4px 4px 0 0; }
.area-header>h3 { flex:1; min-width:0; margin:0; }
.area-toggle { display:flex; align-items:center; justify-content:flex-start; gap:7px; width:100%; min-height:36px; padding:3px 0; border:0; background:transparent; text-align:left; color:var(--area-tone); font-size:14px; }
.subarea .area-header .area-toggle { min-height:36px; font-size:14px; }
.area-toggle:not(:disabled):hover { background:transparent; }
.area-toggle .chevron { color:var(--area-tone); }
.area-sign { display:inline-flex; justify-content:center; align-items:center; flex:none; width:21px; height:21px; border:1px solid currentColor; border-radius:4px; font-size:16px; line-height:1; }
.area-title { min-width:0; flex:1; overflow-wrap:anywhere; font-weight:600; }
.area-amount { flex:none; white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; font-weight:500; }
.subarea>.owner { margin:0; padding:0 12px 9px; background:var(--area-wash); color:var(--area-tone); font-size:12px; }
.subarea.is-collapsed>.owner { border-radius:0 0 4px 4px; }
.subarea-body { padding:12px; }
.subarea-body>.name-help-row { margin:0 0 12px; }
.subarea .item-name input { color:var(--area-tone); }
.subarea .area-header>button { color:var(--muted); }
.area-choice-step .material-guidance { margin:0 0 12px; }
.area-choice-step .material-guidance.ready { margin-bottom:10px; }
.subtract-action option[hidden] { display:none; }
@media(pointer:coarse) { .subarea .area-header .area-toggle { min-height:44px; } }
@media(max-width:550px) {
  .area-header { gap:7px; padding:7px 9px 2px; }
  .area-toggle { flex-wrap:wrap; gap:5px; }
  .area-title { min-width:75px; }
  .area-amount { flex-basis:100%; margin-left:42px; }
  .subarea>.owner { padding-left:9px; }
}

/* Unit labels mirror their input suffixes; the compact selector stays one row. */
.room-input-tools { grid-template-columns:minmax(0,1fr) 120px; }
@media(max-width:550px) { .room-input-tools { grid-template-columns:minmax(0,1fr) 100px; } }

/* The homepage keeps the measured workspace first; explanations follow it. */
.brand { text-decoration:none; color:var(--ink); }
.nav nav a { padding:7px 9px; border-radius:4px; text-decoration:none; font-size:14px; }
.nav nav a:hover,.nav nav a:focus-visible { background:var(--soft); text-decoration:underline; }
.home-intro>p { max-width:85ch; color:var(--muted); margin:0; font-size:15px; line-height:1.65; }
#sfp-calculator { scroll-margin-top:18px; }
/* Reserve the loading workspace; contain its margin so hydration does not move the section. */
#sfp-calculator-runtime { display:flow-root; }
#sfp-calculator-runtime:empty { min-block-size:800px; }
.workspace { margin-top:22px; }
.page-contents { margin:30px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.page-contents>p { margin:0 0 7px; font-size:13px; font-weight:600; }
.page-contents>div { display:flex; flex-wrap:wrap; gap:6px 19px; font-size:13px; }
.home-content { max-width:940px; margin:0 auto; }
.home-section { padding:30px 0; scroll-margin-top:20px; }
.home-section+.home-section { border-top:1px solid var(--line); }
.home-section h2 { font-size:clamp(22px,2.2vw,27px); line-height:1.25; margin:0 0 15px; letter-spacing:-.025em; font-weight:550; }
.home-section h3 { margin:0 0 10px; font-size:17px; font-weight:600; line-height:1.4; }
.home-section p,.home-section li { max-width:78ch; }
.home-section p { line-height:1.7; }
.home-section .guide { margin:0; padding:0; border:0; scroll-margin-top:20px; }
.home-section.guide { margin-top:0; }
.home-section .guide+.guide,.article-subsection { margin-top:26px; }
.home-section .guide-grid { grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr); gap:25px; align-items:center; }
.article-diagram { margin:0; }
.article-diagram svg { display:block; width:100%; max-height:245px; }
.article-diagram text { font:500 15px system-ui,sans-serif; fill:var(--ink); }
.article-footprint { stroke:var(--link); stroke-width:1.8; fill:var(--soft); }
.article-edge { stroke:var(--muted); stroke-width:1; fill:none; }
.article-ghost { stroke:var(--muted); stroke-width:1; fill:none; stroke-dasharray:5 4; }
.article-diagram figcaption { color:var(--muted); font-size:12px; margin:5px 0 0; }
.formula-callout { background:var(--soft); border-left:3px solid var(--link); padding:12px 16px; font-size:16px; font-variant-numeric:tabular-nums; }
[data-guide-controls] .actions { margin-top:12px; gap:12px; }
[data-guide-controls] .actions>a { font-size:13px; }
[data-guide-controls] button { font-size:13px; }
.home-section .guide.selected h3 { color:var(--link); }
.table-scroll { max-width:100%; overflow-x:auto; margin:14px 0; }
.home-content table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; line-height:1.6; }
.home-content caption { text-align:left; color:var(--muted); font-size:12px; margin-bottom:8px; }
.home-content th,.home-content td { padding:9px 14px 9px 0; vertical-align:top; overflow-wrap:anywhere; }
.home-content thead th { border-bottom:1px solid var(--line); color:var(--muted); font-weight:500; font-size:12px; }
.home-content tbody th { font-weight:500; }
.home-content tbody tr:nth-child(even) { background:var(--soft); }
.home-content tbody tr:nth-child(even)>:first-child { padding-left:8px; }
.formula-reference>summary,.home-faq>summary { cursor:pointer; padding:12px 0; font-weight:500; }
.formula-reference { margin-top:22px; }
.formula-reference table { min-width:430px; }
.purchase-example { padding:16px 20px; background:var(--soft); margin:15px 0; }
.purchase-example dl { max-width:480px; margin:12px 0; }
.purchase-example dl>div { display:flex; justify-content:space-between; gap:20px; margin-bottom:7px; }
.purchase-example dt { color:var(--muted); }
.purchase-example dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.purchase-example>p:last-child { margin:0; }
.home-faq+.home-faq { border-top:1px solid var(--line); }
.home-faq p { margin:0 0 15px; color:var(--muted); }
.related-links { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; }
.related-links li { margin:0; }
.related-links a { font-weight:500; }
.related-links span { display:block; margin-top:5px; font-size:13px; color:var(--muted); }
.site-footer { padding:22px 0 30px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.site-footer p { max-width:100ch; }
@media(max-width:700px) {
  .home-section .guide-grid { grid-template-columns:minmax(0,1fr); }
  .article-diagram { max-width:360px; }
  .related-links { grid-template-columns:minmax(0,1fr); }
  .home-section { padding:25px 0; }
  .nav { align-items:flex-start; }
  .nav nav { gap:1px; }
  .nav nav a { font-size:12px; padding:6px; }
}
@media(max-width:450px) {
  .nav { gap:8px; }
  .nav nav { width:100%; justify-content:space-between; }
  .nav nav a { padding:5px 2px; }
  .home-intro>p { font-size:14px; }
  .purchase-example { padding:13px; }
  .purchase-example dl { font-size:13px; }
}

/* Independent V19 treatment. Existing geometry, disclosure and report rules remain. */
body { padding:22px 24px; background:light-dark(#f4f6f5,#141c19); }
#square-footage-task-prototype {
  --surface:light-dark(#f4f6f5,#141c19); --panel:light-dark(#fff,#1e2924);
  --ink:light-dark(#20372d,#edf4ef); --muted:light-dark(#52665b,#b7c8bd);
  --line:light-dark(#cdd9d1,#4b6255); --soft:light-dark(#edf3ef,#2b3c32);
  --link:light-dark(#245c43,#b0dfbf); --error:light-dark(#933c25,#ffc4af);
  --result-wash:light-dark(#e7f0e9,#263e2f);
  --input-line:light-dark(#a5b8ac,#7d9686);
  max-width:1200px;
}
.nav { min-height:44px; padding-bottom:16px; }
.brand { font-size:17px; letter-spacing:-.025em; }
.brand-mark { width:32px; height:32px; border-radius:6px; }
.nav nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; font-size:14px; }
main { padding:24px 0 0; }
h1 { font:650 clamp(29px,3.1vw,40px)/1.15 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:-.045em; margin-bottom:10px; }
.home-intro>p { max-width:88ch; font-size:15px; line-height:1.65; }
button,a.action { min-height:44px; padding:8px 12px; border-radius:6px; }
input,select,textarea { min-height:44px; border-color:var(--input-line); border-radius:5px; }
input::placeholder { color:var(--muted); opacity:1; }
button { transition:background .12s ease,border-color .12s ease; }
button:not(:disabled):active { transform:none; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--link); outline-offset:3px; }
.workspace-tools { display:flex; align-items:center; justify-content:space-between; gap:16px 28px; margin:24px 0 14px; }
.workspace-intent { flex:1; min-width:0; }
.workspace-intent h2 { margin:0 0 4px; font-size:18px; font-weight:650; letter-spacing:-.02em; }
.draft-status { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.draft-status.save-unavailable { color:var(--error); }
.workspace-units { display:flex; align-items:center; gap:12px; max-width:360px; }
.workspace-units label { display:flex; flex:none; align-items:center; gap:8px; font-size:13px; }
.workspace-units select { width:135px; margin:0; font-size:14px; }
.workspace-units>p { margin:0; max-width:18ch; color:var(--muted); font-size:12px; line-height:1.4; }
.workspace { grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr); gap:24px; margin-top:0; }
.workspace>div,.workspace>aside { min-width:0; }
.room { padding:0; border-radius:10px; margin-bottom:12px; overflow:visible; }
.room>.room-heading { padding:10px 16px; border-radius:10px 10px 0 0; gap:12px; }
.room[data-expanded="true"]>.room-heading { border-bottom:1px solid var(--line); background:var(--soft); }
.room>div[id^="body-"] { padding:16px 18px 18px; }
.room-toggle { min-height:44px; gap:9px; padding:4px 0; }
.room-toggle:not(:disabled):hover { background:transparent; }
.room-title { font-size:17px; font-weight:650; }
.room-heading .amount { font-size:14px; line-height:1.4; }
.room-total-label { font-size:12px; }
.remove-room,.area-header>button { min-height:44px; font-size:12px; border-color:transparent; background:transparent; padding:7px 6px; }
.name-help-row { margin:0 0 14px; }
.name-help-row label { font-size:13px; color:var(--muted); }
.name-help-row input { color:var(--ink); }
.room-input-tools { display:block; margin-bottom:10px; }
.shape-dropdown>.field-title { font-size:13px; color:var(--muted); }
.shape-trigger { min-height:44px; padding:7px 10px; font-size:14px; border-color:var(--input-line); }
.shape-trigger>.mini-drawing { width:32px; }
.inline-measure-help { margin-top:8px; font-size:13px; }
.inline-measure-help>summary { min-height:36px; padding:8px 2px; }
.inline-measure-help>p { font-size:13px; }
.inline-measure-help+.object-measurements { margin-top:6px; }
.object-measurements { grid-template-columns:minmax(0,1fr) 172px; gap:18px; align-items:start; }
.object-measurements>.fields { grid-column:1; grid-row:1; grid-template-columns:minmax(0,1fr); gap:14px; }
.field-title { font-size:14px; font-weight:600; }
.unit-inputs { gap:8px; }
.unit-field input { font-size:17px; min-height:46px; padding:9px 33px 9px 11px; }
.unit-suffix { font-size:13px; right:11px; }
.edge-tag { color:var(--muted); background:var(--soft); border-color:var(--line); font-size:11px; }
.object-sketch { grid-column:2; grid-row:1; position:static; padding:9px; background:var(--soft); border:0; border-radius:6px; }
.object-sketch>p { font-size:11px; line-height:1.45; margin-bottom:4px; }
.object-sketch .diagram { max-width:none; }
.object-sketch .diagram svg { height:132px; }
.simple-measurement .measurement-keys { font-size:12px; }
.main-footprint-label { font-weight:600; font-size:13px; margin-top:14px; }
.room-actions { padding-top:14px; margin-top:16px; gap:8px; border-top:1px solid var(--line); }
.room-actions>button,.subtract-action select { font-size:13px; min-height:44px; }
.room-actions>button { background:var(--panel); }
.add-room { min-height:46px; background:transparent; border:1px dashed var(--link); color:var(--link); font-size:14px; font-weight:600; margin-bottom:8px; }
.help-links { gap:0 18px; }
.help-links a { display:inline-flex; align-items:center; min-height:40px; font-size:12px; }
.subarea { padding:0; margin-top:18px; border-radius:7px; }
.area-header { padding:7px 10px 0; }
.subarea .area-header .area-toggle { min-height:44px; font-size:14px; }
.subarea .area-header>button { min-height:44px; font-size:12px; }
.subarea>.owner { padding:0 10px 9px 37px; font-size:12px; }
.subarea-body { padding:14px; }
.area-amount { font-size:12px; }
.subarea .item-name { margin-bottom:0; }
.subarea .sub-toolbar { grid-template-columns:minmax(0,1fr) 80px; gap:10px; }
.area-add { --area-tone:light-dark(#245c7c,#b6dcf3); --area-wash:light-dark(#ecf4fa,#273d4c); }
.area-subtract { --area-tone:light-dark(#884429,#f6c3a4); --area-wash:light-dark(#fbf0e9,#43342c); }
.shape-composition { padding:10px 12px; line-height:1.6; font-size:13px; }
.section-area { font-size:13px; }
.results { padding:0; border:0; background:transparent; border-radius:0; }
.net-result { padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.result-number { padding:16px 18px; border-radius:7px; background:var(--result-wash); }
.result-label { font-size:14px; font-weight:600; margin-bottom:2px; }
.total { font-size:clamp(36px,4vw,48px); line-height:1.2; font-weight:650; letter-spacing:-.045em; margin:8px 0; overflow-wrap:anywhere; }
.total span { display:inline-block; font-size:16px; font-weight:500; }
.result-number>p:last-child { margin-bottom:0; font-size:12px; line-height:1.55; }
.results .result-actions { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.result-actions button,.share-control { width:100%; }
#share-card { color:light-dark(#fff,#183121); background:var(--link); font-weight:600; }
#share-card:not(:disabled):hover { background:var(--ink); color:var(--panel); }
.copy-status:empty { display:none; }
.copy-status:not(:empty) { margin:9px 0 0; }
.breakdown { padding-top:14px; margin-top:16px; }
.breakdown>p { font-size:12px; margin-bottom:5px; }
.room-jump { min-height:44px; padding:8px; margin-bottom:2px; gap:12px; border-radius:4px; font-size:13px; }
.room-jump>:first-child { text-decoration:none; }
.room-jump:hover>:first-child { text-decoration:underline; }
.material-panel { border:1px solid var(--line); border-radius:10px; margin-top:14px; padding:0; }
.material-panel>summary { padding:17px 16px; min-height:64px; line-height:1.5; }
.material-entry-title { font-size:14px; font-weight:650; }
.material-entry-title .small { font-size:12px; font-weight:400; }
.material-entry-description { font-size:12px; margin-top:3px; }
.material-panel .panel-content { padding:0 16px 16px; }
.material-step { padding:16px 0; }
.material-step h3 { font-size:14px; margin-bottom:12px; gap:8px; }
.step-number { width:23px; height:23px; border-radius:50%; font-size:12px; }
.material-step label { font-size:13px; }
.material-step input,.material-step select { font-size:16px; }
.step-result { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:baseline; background:transparent; border-top:1px dashed var(--line); border-radius:0; margin-top:12px; padding:10px 0 0; }
.step-result>strong { font-size:18px; text-align:right; overflow-wrap:anywhere; max-width:16ch; }
.step-result>span:last-child:not(:first-child) { grid-column:1/-1; }
.step-result .small { font-size:12px; line-height:1.5; }
.material-step:last-of-type .step-result { background:var(--result-wash); padding:12px; border:0; border-radius:6px; }
.material-step:last-of-type .step-result strong { font-size:25px; }
.material-guidance { padding:10px; }
.material-guidance p { font-size:13px; }
.material-guidance button { min-height:44px; font-size:13px; }
.material-room-choices label { min-height:44px; align-items:center; font-size:13px; }
.material-room-choices input { width:19px; height:19px; margin:0; }
.scope-note { font-size:12px; }
.picker-option { min-height:44px; font-size:13px; }
.picker-preview h4 { font-size:14px; }
.picker-preview p { font-size:13px; }
.picker-preview .preview-label,.picker-note { font-size:12px; }
.picker-list { max-height:390px; }
.page-contents { margin-top:32px; padding:18px 0; }
.page-contents>div a { display:inline-flex; align-items:center; min-height:36px; }
.home-content { max-width:960px; }
.home-section { padding:32px 0; }
.home-section h2 { font-size:clamp(22px,2.1vw,27px); font-weight:650; letter-spacing:-.025em; }
.home-section p,.home-section li { font-size:15px; }
.formula-reference>summary,.home-faq>summary { min-height:48px; }
.site-footer { line-height:1.65; }
@media(max-width:1000px) {
  .workspace { grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:18px; }
  .object-measurements { grid-template-columns:minmax(0,1fr) 138px; gap:12px; }
  .object-sketch .diagram svg { height:120px; }
  .net-result { padding:16px; }
  .result-number { padding:14px; }
}
@media(max-width:850px) {
  .workspace { grid-template-columns:minmax(0,1fr); gap:18px; }
  .workspace-tools { align-items:flex-start; }
  .workspace-units { flex-direction:column; align-items:flex-end; gap:4px; }
  .workspace-units>p { max-width:26ch; text-align:right; }
  .object-measurements { grid-template-columns:minmax(0,1fr) 172px; gap:18px; }
  .object-sketch .diagram svg { height:132px; }
  .net-result { padding:18px; }
}
@media(max-width:550px) {
  body { padding:12px; }
  main { padding-top:20px; }
  .nav { padding-bottom:10px; }
  .nav nav { width:100%; gap:0; justify-content:space-between; }
  .nav nav a { font-size:13px; min-height:44px; padding:8px 3px; }
  .home-intro>p { font-size:14px; line-height:1.6; }
  .workspace-tools { flex-wrap:wrap; gap:12px; margin-top:20px; }
  .workspace-intent { flex-basis:100%; }
  .workspace-units { flex-direction:row; align-items:center; width:100%; max-width:none; gap:12px; }
  .workspace-units>p { max-width:20ch; text-align:left; }
  .room>.room-heading { padding:8px 12px; gap:6px; }
  .room>div[id^="body-"] { padding:14px 12px; }
  .room-toggle { flex-wrap:wrap; gap:5px 8px; }
  .room-title { font-size:16px; }
  .room-toggle .amount { flex-basis:100%; margin-left:18px; align-items:flex-start; font-size:13px; }
  .room-toggle .room-total-label { display:none; }
  .object-measurements { grid-template-columns:minmax(0,1fr); gap:14px; }
  .object-measurements>.fields { grid-column:1; grid-row:1; grid-template-columns:minmax(0,1fr); gap:14px; }
  .object-sketch { grid-column:1; grid-row:2; padding:8px; }
  .object-sketch>p { margin-bottom:0; }
  .object-sketch .diagram { max-width:260px; margin:auto; }
  .object-sketch .diagram svg { height:115px; }
  .subarea-body { padding:12px; }
  .area-header { padding:5px 8px 0; gap:5px; }
  .area-toggle { flex-wrap:wrap; }
  .area-amount { flex-basis:100%; margin-left:42px; }
  .subarea>.owner { padding-left:35px; font-size:12px; }
  .picker-popover { grid-template-columns:minmax(0,1fr) 132px; }
  .picker-option { font-size:13px; min-height:44px; padding:6px; }
  .picker-preview p { font-size:13px; }
  .shape-trigger { font-size:13px; }
  .net-result { padding:14px; }
  .total { font-size:40px; }
  .room-jump { flex-wrap:wrap; gap:2px 10px; }
  .room-jump>:last-child { margin-left:auto; }
  .home-section { padding:26px 0; }
  .home-section .guide-grid { grid-template-columns:minmax(0,1fr); }
  .home-content th,.home-content td { padding-right:10px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }
@media(forced-colors:active) { .area-sign,.step-number { border:1px solid currentColor; } .room[data-expanded="true"]>.room-heading,.result-number { border-bottom:1px solid currentColor; } }

/* Confirmed fusion: candidate surfaces, V19 hierarchy and geometry. */
body { padding:16px; background:light-dark(#f8fafc,#101725); }
#square-footage-task-prototype {
  --surface:light-dark(#f8fafc,#101725); --panel:light-dark(#fff,#182438);
  --ink:light-dark(#172235,#eef3fc); --muted:light-dark(#526071,#bac7da);
  --line:light-dark(#dce3ed,#41516b); --soft:light-dark(#f2f6fb,#223249);
  --link:light-dark(#3c6594,#b7d5ff); --error:light-dark(#963c28,#ffc2ad);
  --result-wash:light-dark(#eaf2fc,#253c59); --input-line:light-dark(#bac7d8,#7a90af);
  --shadow:0 2px 5px rgb(27 48 80 / .055);
  max-width:1200px; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
}
.nav { margin:0; min-height:68px; padding:12px 28px; border-radius:14px 14px 0 0; background:var(--soft); }
.brand { color:var(--ink); font-size:17px; }
.brand-mark { background:transparent; color:var(--link); width:22px; font-size:25px; }
.nav nav a { color:var(--muted); font-weight:500; }
.nav nav a:hover { color:var(--link); background:var(--panel); }
main { padding:24px 28px 0; }
.home-intro>p { max-width:88ch; color:var(--muted); }
h1 { font-weight:650; }
button { font-size:14px; font-weight:500; }
button:not(:disabled):hover { background:var(--soft); border-color:var(--link); }
button:disabled { opacity:.42; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--link); outline-offset:3px; }
input,select,textarea { background:var(--panel); border-color:var(--input-line); }
input:focus,select:focus,textarea:focus { border-color:var(--link); }
.workspace { margin-top:24px; grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr); gap:24px; }
.workspace-tools { margin:0 0 14px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--soft); align-items:center; flex-wrap:wrap; gap:8px 16px; }
.workspace-intent { flex:1 1 250px; }
.workspace-intent h2 { font-size:16px; margin-bottom:3px; }
.draft-status { font-size:12px; }
.workspace-units { display:flex; flex:0 1 auto; max-width:none; align-items:flex-end; gap:5px; flex-direction:column; }
.workspace-units label { font-size:13px; }
.workspace-units select { width:118px; min-height:42px; }
.workspace-units>p { max-width:26ch; font-size:11px; text-align:right; }
.room { border-color:var(--line); border-radius:11px; box-shadow:var(--shadow); }
.room>.room-heading { padding:10px 16px; border-radius:11px 11px 0 0; }
.room[data-expanded="true"]>.room-heading { background:var(--panel); }
.room-title { color:var(--ink); font-size:17px; }
.room>div[id^="body-"] { padding:14px 16px 16px; }
.room-heading .amount { font-weight:600; }
.name-help-row label { color:var(--ink); font-weight:600; }
.name-help-row input { font-weight:400; }
.shape-dropdown { position:relative; }
.shape-dropdown>.field-title { color:var(--ink); font-weight:600; min-height:44px; padding:4px 140px 4px 0; margin:0; line-height:1.45; }
.shape-trigger { font-size:14px; font-weight:500; padding:7px 10px; }
/* Native disclosure keeps keyboard semantics; only its summary sits in the label row. */
.shape-dropdown>.inline-measure-help { margin:0; font-size:13px; }
.shape-dropdown>.inline-measure-help>summary { position:absolute; top:0; right:0; display:list-item; list-style:disclosure-closed inside; width:auto; min-height:44px; padding:12px 0 10px 8px; color:var(--link); font-size:13px; font-weight:500; line-height:20px; border-radius:3px; }
.shape-dropdown>.inline-measure-help[open]>summary { list-style-type:disclosure-open; }
.inline-measure-help>summary:hover { text-decoration:underline; text-underline-offset:3px; }
.inline-measure-help[open] { padding:0; }
.measure-help-content { margin-top:10px; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--link); border-radius:6px; background:var(--soft); }
.measure-help-content p { font-size:13px; line-height:1.6; margin:0; max-width:65ch; }
.measure-help-content p+p { margin-top:7px; }
.measure-help-content p:last-child { font-weight:600; color:var(--link); }
.name-help-row+.toolbar,.name-help-row+.sub-toolbar { margin-bottom:14px; }
.object-measurements { grid-template-columns:minmax(0,1fr) 206px; gap:16px; align-items:start; margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.object-measurements>.fields { gap:12px; }
.dimension-field { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:10px; }
.dimension-field.is-active { border-color:var(--link); box-shadow:0 0 0 2px light-dark(#e5effb,#344f73); }
.dimension-field .field-title { justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:6px; }
.dimension-field .edge-tag { color:var(--muted); border:0; background:var(--soft); width:21px; height:21px; font-size:11px; border-radius:50%; }
.dimension-field.is-active .edge-tag { background:var(--link); color:var(--panel); }
.unit-field input { font-size:16px; min-height:44px; border-color:var(--line); }
.dimension-field input:focus-visible { outline-width:2px; outline-offset:1px; }
.unit-field input[aria-invalid="true"] { border-color:var(--error); }
.object-sketch { padding:0; background:transparent; border:0; }
.object-sketch>p { font-size:11px; margin:0 0 6px; }
.object-sketch .diagram svg { height:164px; }
.object-sketch .diagram { max-width:240px; margin:auto; }
.simple-measurement .measurement-keys { font-size:11px; }
.room-actions { gap:10px; }
.room-actions>[data-action="add-section"] { color:light-dark(#245c7c,#b6dcf3); border-color:light-dark(#b7cfe0,#58768c); }
.room-actions>[data-action="add-deduction"],.subtract-action select { color:light-dark(#884429,#f6c3a4); border-color:light-dark(#dfc7b8,#8b6e58); }
.add-room { color:var(--link); background:var(--soft); border-color:var(--input-line); border-radius:8px; }
.main-footprint-label { margin-top:12px; }
.subarea { padding:0; margin-top:16px; border:1px solid var(--area-border); border-radius:10px; background:var(--area-wash); }
.area-add { --area-tone:light-dark(#245c7c,#b6dcf3); --area-wash:light-dark(#edf5fb,#223b4c); --area-border:light-dark(#bcd3e5,#537891); }
.area-subtract { --area-tone:light-dark(#884429,#f6c3a4); --area-wash:light-dark(#fcf3eb,#403026); --area-border:light-dark(#e3cdbb,#906e53); }
.area-header { border-radius:10px 10px 0 0; padding:7px 12px 0; background:transparent; }
.subarea>.owner { background:transparent; color:var(--area-tone); padding:0 12px 10px 39px; }
.area-sign { border:0; background:var(--panel); border-radius:50%; font-weight:600; }
.subarea-body { padding:14px; }
.subarea .name-help-row label { color:var(--area-tone); }
.subarea .sub-toolbar { align-items:start; grid-template-columns:minmax(0,1fr) 78px; gap:12px; }
.subarea .sub-toolbar>label { padding-top:23px; font-size:13px; font-weight:600; }
.subarea .object-measurements { background:var(--panel); }
.subarea .dimension-field { background:var(--panel); }
.subarea .object-sketch { background:transparent; }
.subarea .area-header>button { color:var(--muted); border:1px solid var(--line); background:var(--panel); min-height:36px; padding:5px 8px; }
.net-result { padding:18px; box-shadow:var(--shadow); border-radius:11px; }
.result-number { padding:16px; background:var(--result-wash); }
.result-label { font-size:13px; font-weight:600; }
.total { font-size:46px; font-weight:650; }
.total span { font-size:15px; }
.result-actions button { font-weight:600; font-size:13px; }
#share-card { color:light-dark(#fff,#15263b); background:var(--link); }
#share-card:disabled { opacity:.42; }
.room-jump { font-size:13px; min-height:44px; }
.room-jump>:last-child { font-weight:600; }
.material-panel { border-radius:11px; box-shadow:var(--shadow); }
.material-panel>summary { font-size:14px; min-height:72px; }
.material-panel .panel-content { padding:0 14px 14px; display:grid; gap:12px; }
.material-step { border:1px solid var(--line); padding:14px; border-radius:8px; background:var(--soft); min-width:0; }
.material-step h3 { font-size:14px; font-weight:650; }
.step-number { background:var(--link); color:var(--panel); width:22px; height:22px; }
.material-step label { font-size:13px; font-weight:600; }
.material-step input,.material-step select { border-color:var(--line); background:var(--panel); }
.material-guidance { border:1px solid var(--line); border-left:3px solid var(--link); background:var(--panel); padding:10px; }
.material-guidance p { font-size:12px; }
.material-guidance button { font-size:12px; }
.material-guidance.ready { border:0; background:transparent; padding:0; }
.step-result { border-top:1px solid var(--line); }
.step-result strong { font-size:18px; }
.material-step:last-of-type .step-result { background:var(--panel); }
.material-step:last-of-type .step-result strong { font-size:26px; }
.material-panel .panel-content>p,.material-panel .panel-content>button { margin:0; }
.material-panel .panel-content>button { justify-self:start; }
.picker-popover { border-radius:8px; box-shadow:0 8px 22px rgb(27 48 80 / .16); background:var(--panel); }
.picker-preview { background:var(--soft); border-radius:5px; }
.picker-formula { font-weight:600; color:var(--link); }
.home-content { max-width:960px; }
.home-section p,.home-section li { max-width:78ch; }
.home-section .guide-grid { grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr); }
.formula-callout { background:var(--soft); border-left:4px solid var(--link); border-radius:0 6px 6px 0; font-weight:600; padding:13px 16px; }
.home-content th,.home-content td { padding:10px 14px; border-bottom:1px solid var(--line); }
.home-content thead th { background:var(--soft); font-size:13px; font-weight:600; }
.home-content tbody th { font-weight:600; }
.home-content tbody tr:nth-child(even) { background:transparent; }
.home-content tbody tr:nth-child(even)>:first-child { padding-left:14px; }
.home-content tbody tr:hover { background:var(--soft); }
.purchase-example { border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:18px; }
.purchase-example dl { max-width:520px; }
.purchase-example dd { font-weight:600; }
.article-diagram { min-width:0; }
.article-diagram svg { width:100%; height:auto; max-height:245px; }
.home-faq>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:15px; font-weight:600; list-style:none; padding:16px 0; }
.home-faq>summary::-webkit-details-marker { display:none; }
.home-faq>summary::after { content:'+'; color:var(--muted); font-size:20px; font-weight:400; flex:none; }
.home-faq[open]>summary::after { content:'−'; }
.related-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.related-links li { padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.related-links a { display:inline-block; font-weight:600; text-decoration:none; }
.related-links a:hover { text-decoration:underline; }
.site-footer { padding:24px 28px; margin-top:28px; background:var(--soft); border-radius:0 0 14px 14px; font-size:12px; }
@media(max-width:1100px) {
  .workspace { grid-template-columns:minmax(0,1.5fr) minmax(305px,1fr); gap:18px; }
  .workspace-intent { flex-basis:210px; }
  .workspace-units { align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:4px 10px; }
  .workspace-units>p { max-width:none; align-self:center; text-align:left; }
  .object-measurements { grid-template-columns:minmax(0,1fr) 176px; gap:12px; padding:12px; }
  .object-sketch .diagram svg { height:154px; }
  .unit-inputs { gap:6px; }
  .dimension-field { padding:8px; }
  .net-result { padding:14px; }
  .total { font-size:40px; }
}
@media(max-width:920px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .workspace-tools { flex-wrap:nowrap; }
  .workspace-intent { flex-basis:220px; }
  .workspace-units { flex-direction:column; align-items:flex-end; }
  .workspace-units>p { text-align:right; align-self:flex-end; }
  .object-measurements { grid-template-columns:minmax(0,1fr) 206px; gap:16px; padding:14px; }
  .object-sketch .diagram svg { height:164px; }
}
@media(max-width:600px) {
  body { padding:8px; }
  .nav { padding:10px 16px; gap:5px; }
  .nav nav { width:100%; justify-content:space-between; }
  main { padding:20px 14px 0; }
  h1 { font-size:30px; }
  .workspace { margin-top:18px; }
  .workspace-tools { padding:12px; flex-wrap:wrap; gap:10px; }
  .workspace-intent { flex-basis:100%; }
  .workspace-units { flex-direction:row; align-items:center; width:100%; gap:10px; flex-wrap:wrap; }
  .workspace-units>p { max-width:20ch; text-align:left; align-self:center; font-size:11px; }
  .workspace-units label { flex:none; }
  .room>.room-heading { padding:8px 12px; }
  .room>div[id^="body-"] { padding:12px; }
  .room-title { font-size:16px; }
  .shape-dropdown>.field-title { font-size:13px; padding-right:135px; }
  .shape-trigger { font-size:13px; }
  .object-measurements { grid-template-columns:minmax(0,1fr); padding:10px; gap:14px; }
  .object-measurements>.fields { grid-column:1; grid-row:1; gap:10px; }
  .object-sketch { grid-column:1; grid-row:2; }
  .object-sketch .diagram { max-width:260px; }
  .object-sketch .diagram svg { height:150px; }
  .subarea-body { padding:10px; }
  .subarea .sub-toolbar { grid-template-columns:minmax(0,1fr); gap:10px; }
  .subarea .sub-toolbar>label { padding-top:0; width:90px; }
  .area-header { padding:6px 8px 0; }
  .subarea>.owner { padding-left:35px; }
  .material-panel .panel-content { padding:0 12px 12px; }
  .material-step { padding:12px; }
  .step-result { grid-template-columns:minmax(0,1fr) auto; }
  .step-result strong { max-width:13ch; }
  .home-section .guide-grid { grid-template-columns:minmax(0,1fr); }
  .related-links { grid-template-columns:minmax(0,1fr); }
  .site-footer { padding:20px 14px; }
  .purchase-example { padding:14px; }
  .home-content th,.home-content td { padding:9px; }
  .home-content tbody tr:nth-child(even)>:first-child { padding-left:9px; }
}
@media(max-width:350px) {
  .shape-dropdown>.field-title { padding-right:0; min-height:32px; }
  .shape-dropdown>.inline-measure-help>summary { position:static; min-height:40px; padding:4px 0; }
}
@media(pointer:coarse) { .subarea .area-header>button { min-height:44px; } }
/* Keep the first calculation compact, including the shared-unit explanation. */
@media(min-width:601px) {
  main { padding-top:20px; }
  .workspace { margin-top:18px; }
  .workspace-units { flex-direction:row; align-items:center; gap:10px; }
  .workspace-units>p { max-width:14ch; text-align:left; align-self:center; }
  .room>.room-heading { padding-top:6px; padding-bottom:6px; }
  .object-measurements { padding:12px; }
  .dimension-field { padding:8px; }
}
@media(max-width:600px) {
  .workspace-units { flex-wrap:nowrap; }
  .workspace-units>p { flex:1; max-width:none; min-width:0; }
}
@media(min-width:601px) {
  .nav { min-height:64px; }
  .workspace-tools { margin-bottom:10px; }
  .room>div[id^="body-"] { padding-top:10px; }
  .name-help-row { margin-bottom:8px; }
  .name-help-row+.toolbar,.name-help-row+.sub-toolbar { margin-bottom:10px; }
  .object-measurements { margin-top:10px; }
}

/* V21: targeted review fixes; keep V20 layout and calculation hierarchy. */
main { padding-top:28px; }
.home-intro h1 { margin-bottom:14px; }
.workspace { margin-top:24px; }
.workspace-units select {
  appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23526071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
/* A medium solid disclosure triangle, consistent with the materials entry. */
.room-toggle>.chevron,.area-toggle>.chevron {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px;
  flex:none; font-size:0;
}
.room-toggle>.chevron { background:var(--soft); color:var(--ink); }
.area-toggle>.chevron { background:var(--panel); color:var(--area-tone); }
.room-toggle>.chevron::before,.area-toggle>.chevron::before {
  content:''; display:block; width:0; height:0;
  border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  border-left:8px solid currentColor; transform:translateX(1px);
}
.room-toggle[aria-expanded="true"]>.chevron::before,
.area-toggle[aria-expanded="true"]>.chevron::before {
  border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:8px solid currentColor; border-bottom:0; transform:translateY(1px);
}
.room-toggle:hover>.chevron { background:var(--line); }
.room-heading .amount>:last-child { font-weight:750; }
/* Slightly narrower cards without reducing text size or control hit areas. */
@media(min-width:1101px) {
  .object-measurements { grid-template-columns:minmax(0,1fr) 226px; gap:18px; }
}
@media(min-width:601px) {
  .object-measurements>.fields { gap:10px; }
  .dimension-field { padding:6px 8px; }
}
/* Example and personal-workspace actions have separate, aligned groups. */
.guide-example {
  display:grid; justify-items:start; gap:8px; max-width:78ch;
  margin-top:20px; padding:14px 16px; border-radius:8px; background:var(--soft);
}
.guide-example button { background:var(--panel); text-align:left; }
.guide-example p { margin:0; font-size:13px; line-height:1.5; }
[data-guide-controls] .guide-actions {
  display:flex; justify-content:space-between; align-items:center;
  max-width:78ch; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); gap:12px 20px;
}
.guide-actions>a { display:inline-flex; align-items:center; min-height:44px; }
.guide-actions>a::before { content:'←'; margin-right:7px; text-decoration:none; }
.guide-actions>button { flex:none; }
/* All five table rows contain data. Do not make the next section look like a sixth. */
#room-sizes .table-scroll { margin-bottom:0; }
#room-sizes+.home-section { border-top:0; }
.related-links li { padding:0; display:flex; }
.related-links a.related-card {
  display:flex; flex-direction:column; justify-content:center;
  width:100%; height:100%; padding:16px; border-radius:8px;
  color:var(--link); text-decoration:none;
}
.related-card .related-card-heading {
  display:flex; align-items:baseline; gap:16px;
  margin:0; font-size:15px; font-weight:600; color:inherit;
}
.related-card-heading>span { display:inline; margin:0; font:inherit; color:inherit; }
.related-card-heading>.related-card-arrow { flex:none; margin-left:auto; font-size:21px; line-height:1; }
.related-card .related-card-description { margin-top:5px; font-size:13px; font-weight:400; color:var(--muted); }
.related-links a.related-card:hover { background:var(--result-wash); text-decoration:none; }
.related-card:hover .related-card-heading>span:first-child { text-decoration:underline; text-underline-offset:3px; }
@media(prefers-color-scheme:dark) {
  .workspace-units select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23bac7da' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
@media(max-width:600px) {
  main { padding-top:26px; }
  .workspace { margin-top:24px; }
  .guide-example { padding:12px; }
  [data-guide-controls] .guide-actions { flex-wrap:wrap; }
}

/* Continue from measured area to purchasing within one result container. */
.net-result>.material-panel {
  margin-top:16px; padding:0; border:0; border-top:1px solid var(--line);
  border-radius:0; box-shadow:none; background:transparent;
}
.net-result>.material-panel>summary { padding:16px 0; min-height:76px; }
.net-result>.material-panel .material-entry-title { font-size:16px; font-weight:650; }
.net-result>.material-panel .material-entry-title .small { font-size:12px; font-weight:400; }
.net-result>.material-panel>.panel-content { padding:0; }
.material-choice-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.material-choice-copy .choice-note { font-size:12px; font-weight:400; line-height:1.45; }
.material-room-choices label { padding:7px 0; }
.material-room-choices label.unavailable-area { color:var(--muted); cursor:default; }
.material-room-choices input:disabled { cursor:not-allowed; opacity:.55; }

/* Flooring inherits the reviewed calculator. Recovery stays close to the inputs. */
.page-context { font-size:12px!important; margin-bottom:9px!important; }
.nav-tools { position:relative; }
.nav-tools>summary { cursor:pointer; color:var(--muted); font-size:14px; font-weight:500; padding:8px 12px; min-height:44px; display:flex; gap:7px; align-items:center; list-style:none; }
.nav-tools>summary::-webkit-details-marker { display:none; }
.nav-tools>summary::after { content:'▾'; font-size:12px; }
.nav-tool-menu { position:absolute; top:100%; right:0; width:235px; z-index:20; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); padding:6px; }
.nav .nav-tool-menu a { display:flex; width:100%; font-size:13px; }
.load-drafts { min-height:28px; padding:1px 0; margin-top:3px; border:0; background:transparent; border-radius:2px; color:var(--link); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.load-drafts:hover { background:transparent!important; }
.draft-recovery { margin-top:18px; padding:12px 14px; border:1px solid var(--input-line); background:var(--soft); border-radius:8px; }
.draft-recovery-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.draft-recovery-bar>p { margin:0; font-size:13px; line-height:1.5; }
.draft-recovery-actions { display:flex; flex:none; gap:8px; }
.draft-recovery-actions button { min-height:40px; padding:8px 12px; font-size:13px; }
.draft-recovery .restore-intro { font-size:13px; line-height:1.6; margin:12px 0; }
.saved-draft { padding:12px 0; border-top:1px solid var(--line); }
.saved-draft:last-child { padding-bottom:0; }
.saved-draft-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.saved-draft-heading>div { min-width:0; }
.saved-draft h3 { margin:0 0 3px; font-size:14px; overflow-wrap:anywhere; }
.saved-draft p { margin:0; font-size:12px; }
.saved-draft-heading>button,.saved-draft-heading>a { flex:none; font-size:13px; }
.saved-draft .saved-draft-areas { margin-top:6px; }
.restore-review { padding:12px; margin-top:12px; background:var(--panel); border-radius:7px; }
.restore-choices { margin:8px 0 12px; display:grid; gap:6px; }
.restore-choices label,.transfer-panel>label { display:flex; align-items:center; gap:10px; min-height:44px; padding:5px 0; font-size:13px; }
.restore-choices input,.transfer-panel input { flex:none; width:19px; height:19px; min-height:0; margin:0; }
.restore-choices label>span .small { display:block; }
.draft-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 0; padding:10px 14px; border-left:3px solid var(--link); background:var(--soft); border-radius:5px; }
.draft-notice p { margin:0; font-size:13px; line-height:1.6; }
.draft-notice button { flex:none; font-size:12px; min-height:36px; background:var(--panel); }
.continue-link { display:block; width:100%; padding:9px 0; margin-top:8px; text-align:left; font-size:13px; color:var(--link); background:transparent; border:0; }
.transfer-panel { padding:12px; margin-top:6px; background:var(--soft); border:1px solid var(--line); border-radius:7px; }
.transfer-panel p { font-size:13px; line-height:1.6; margin:0 0 8px; }
.transfer-estimate { border-top:1px solid var(--line); margin-top:8px; padding-top:10px!important; }
.transfer-panel .actions { gap:8px; }
[data-task='flooring'] .material-panel .panel-glance { display:block; color:var(--link); font-size:14px; font-weight:600; }
[data-task='flooring'] .material-entry-description { font-size:12px; }
.flooring-steps { padding-left:22px; }
.flooring-steps li { padding-left:4px; margin-bottom:9px; }
.purchase-example dl>div { display:flex; justify-content:space-between; gap:16px; padding:5px 0; }
.purchase-example dd { margin:0; }
@media(max-width:600px) {
  .nav-tools>summary { padding:8px 2px; font-size:13px; }
  .nav-tool-menu { right:auto; left:0; }
  .draft-recovery { padding:12px; }
  .draft-recovery-bar { align-items:stretch; flex-direction:column; gap:10px; }
  .draft-recovery-actions button { flex:1; min-width:0; min-height:44px; }
  .saved-draft-heading { flex-wrap:wrap; }
  .saved-draft-heading>button { min-height:44px; }
  .draft-notice { align-items:flex-start; flex-wrap:wrap; padding:10px; }
  .restore-review { padding:10px; }
  .restore-review .actions button { width:100%; }
  .transfer-panel { padding:10px; }
}
@media(pointer:coarse) { .load-drafts { min-height:44px; } }

/* Shared menu indicators: visible geometry instead of font-dependent tiny glyphs. */
#square-footage-task-prototype select {
  appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M0 0h10L5 8Z' fill='%23526071'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 8px;
}
.picker-chevron { font-size:0; width:0; height:0; flex:none; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid currentColor; }
.shape-trigger[aria-expanded='true']>.picker-chevron { transform:rotate(180deg); }
.nav-tools>summary::after { content:''; width:0; height:0; flex:none; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid currentColor; }
.nav-tools[open]>summary::after { transform:rotate(180deg); }
.inline-measure-help>summary,.material-panel>summary,.formula-reference>summary { list-style:none!important; }
.inline-measure-help>summary::-webkit-details-marker,.material-panel>summary::-webkit-details-marker,.formula-reference>summary::-webkit-details-marker { display:none; }
.shape-dropdown>.inline-measure-help>summary { padding-left:22px; }
.inline-measure-help>summary::before,.material-panel>summary::before,.formula-reference>summary::before {
  content:''; display:inline-block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; margin-right:8px; vertical-align:-1px;
}
.inline-measure-help[open]>summary::before,.material-panel[open]>summary::before,.formula-reference[open]>summary::before {
  border-top:8px solid currentColor; border-bottom:0; border-left:5px solid transparent; border-right:5px solid transparent; vertical-align:1px;
}
.shape-dropdown>.inline-measure-help>summary::before { position:absolute; left:8px; top:17px; margin:0; }
.shape-dropdown>.inline-measure-help[open]>summary::before { top:18px; }
/* Preserve the existing Room / Section toggle geometry. */
[data-action='aid']::before { content:''; display:inline-block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; margin-right:8px; vertical-align:-1px; }
[data-action='aid'][aria-expanded='true']::before { border-top:8px solid currentColor; border-bottom:0; border-left:5px solid transparent; border-right:5px solid transparent; vertical-align:1px; }
/* Floor steps disclose independently. Summary values remain visible when closed. */
[data-material-step].material-step { padding:0; }
[data-material-step]>summary {
  display:grid; grid-template-columns:22px minmax(0,1fr) 10px; column-gap:9px; row-gap:3px;
  padding:12px; min-height:70px; align-items:center; cursor:pointer; list-style:none; border-radius:8px;
}
[data-material-step]>summary::-webkit-details-marker { display:none; }
[data-material-step]>summary::after { content:''; width:0; height:0; grid-column:3; grid-row:1 / span 2; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
[data-material-step][open]>summary::after { border-top:8px solid currentColor; border-bottom:0; border-left:5px solid transparent; border-right:5px solid transparent; }
[data-material-step]>summary .step-number { grid-column:1; grid-row:1; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.material-step-title { grid-column:2; font-size:14px; font-weight:650; }
.material-step-glance { grid-column:2; font-size:13px; line-height:1.5; color:var(--muted); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
[data-material-step='cost'] .material-step-glance { color:var(--ink); font-weight:700; }
[data-material-step]>summary:hover { background:var(--line); }
[data-material-step]>.material-step-body { padding:0 12px 12px; }
[data-material-step][open]>summary { margin-bottom:2px; }
.material-step-body>.material-guidance { margin-top:0; }
.content-updated { margin:20px 0 0; font-size:12px; }
.site-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; }
.site-footer p { margin:0; }
@media(prefers-color-scheme:dark) {
  #square-footage-task-prototype select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M0 0h10L5 8Z' fill='%23bac7da'/%3E%3C/svg%3E"); }
}
@media(max-width:600px) {
  [data-material-step]>summary { padding:12px 10px; }
  [data-material-step]>.material-step-body { padding:0 10px 12px; }
}
@media(max-width:360px) {
  .shape-dropdown>.inline-measure-help>summary::before { top:9px; }
  .shape-dropdown>.inline-measure-help[open]>summary::before { top:10px; }
}

.wall-result-breakdown { display:grid; gap:8px; margin:12px 0 16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.wall-result-breakdown>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wall-result-breakdown strong { flex:none; font-variant-numeric:tabular-nums; }
.wall-result-breakdown>p { margin:0; }
[data-task='wall'] .nav-tool-menu a[aria-current='page'] { background:var(--soft); font-weight:650; }

.full-measure-guide { display:inline-flex; align-items:center; min-height:40px; margin-top:4px; font-size:13px; }
[data-room-guide] main { padding-bottom:12px; }
.guide-intro { padding-bottom:26px; border-bottom:1px solid var(--line); }
.guide-intro .breadcrumb { font-size:12px; margin-bottom:22px; }
.guide-kicker { color:var(--link); font-size:13px; font-weight:650; margin-bottom:9px; }
.guide-intro h1 { max-width:24ch; font-size:38px; line-height:1.15; text-wrap:balance; }
.guide-intro>p:not(.breadcrumb):not(.guide-kicker) { max-width:72ch; }
.guide-start { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:20px; }
.guide-start button { background:var(--link); border-color:var(--link); color:var(--panel); padding:10px 16px; min-height:44px; font-weight:600; }
.guide-start button:hover { color:var(--ink); }
.guide-start a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; }
.guide-current-record { margin:14px 0 0; padding:10px 12px; background:var(--soft); border-left:3px solid var(--link); font-size:13px; }
.guide-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:48px; margin-top:34px; align-items:start; }
.guide-contents { position:sticky; top:20px; }
.guide-contents nav { display:flex; flex-direction:column; gap:4px; border-left:1px solid var(--line); margin-bottom:22px; }
.guide-contents nav p { font-weight:650; font-size:13px; padding-left:14px; margin-bottom:8px; }
.guide-contents a { display:block; color:var(--muted); padding:7px 0 7px 14px; font-size:13px; line-height:1.45; text-decoration:none; }
.guide-contents a:hover { color:var(--link); text-decoration:underline; }
.guide-contents>a { padding-left:0; color:var(--link); font-weight:600; }
.room-guide { min-width:0; max-width:760px; }
.guide-section { scroll-margin-top:24px; padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--line); }
.guide-section h2 { font-size:25px; line-height:1.25; font-weight:650; letter-spacing:-.025em; margin-bottom:16px; text-wrap:balance; }
.guide-section h3 { font-weight:650; font-size:17px; margin:20px 0 10px; }
.guide-section p,.guide-section li,.guide-section dd { font-size:15px; line-height:1.75; max-width:72ch; text-wrap:pretty; }
.guide-section p.small { font-size:13px; }
.measure-steps { list-style:none; padding:0; margin:20px 0; counter-reset:measure; }
.measure-steps li { counter-increment:measure; position:relative; padding:0 0 18px 44px; }
.measure-steps li::before { content:counter(measure); position:absolute; left:0; top:1px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--soft); color:var(--link); font-weight:650; font-size:14px; }
.measure-steps strong,.measure-steps span { display:block; }
.guide-note { padding:14px 16px; border-left:3px solid var(--link); background:var(--soft); border-radius:0 6px 6px 0; margin-top:18px; }
.measure-explainer { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(200px,1fr); gap:20px; align-items:center; }
.guide-figure { margin:0; padding:14px 12px; min-width:0; background:var(--soft); border:1px solid var(--line); border-radius:8px; }
.guide-figure svg { display:block; width:100%; height:auto; max-height:245px; }
.guide-figure text { fill:var(--ink); font:500 16px system-ui,sans-serif; }
.guide-figure .figure-note { fill:var(--muted); font-size:14px; }
.guide-figure figcaption { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.guide-figure-wide { max-width:520px; margin:20px auto; }
.guide-formula { padding:14px 18px; background:var(--result-wash); border-radius:7px; margin:18px 0 24px; font-variant-numeric:tabular-nums; }
.guide-formula>span { display:block; font-size:12px; color:var(--muted); }
.guide-formula>strong { display:block; font-size:21px; font-weight:650; margin:2px 0 7px; }
.guide-formula>p { margin:0; font-size:14px; }
.section-examples { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
.section-example { padding:14px 16px; border-radius:7px; border:1px solid var(--line); }
.section-example h3 { font-size:15px; margin:0 0 7px; }
.section-example p { font-size:14px; margin:0; }
.add-example { color:light-dark(#245c7c,#b6dcf3); background:light-dark(#edf5fb,#223b4c); border-color:light-dark(#bcd3e5,#537891); }
.subtract-example { color:light-dark(#884429,#f6c3a4); background:light-dark(#fcf3eb,#403026); border-color:light-dark(#e3cdbb,#906e53); }
.worked-measurement { padding:18px; border:1px solid var(--line); border-radius:8px; margin:22px 0; }
.worked-measurement h3 { margin:0 0 12px; }
.worked-measurement dl { margin:0 0 16px; font-size:14px; }
.worked-measurement dl>div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; }
.worked-measurement dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:14px; }
.worked-total { border-top:1px solid var(--line); font-weight:650; }
.worked-measurement p { margin-bottom:0; font-size:14px; }
.include-list { margin:0; }
.include-list>div { padding:13px 0; border-bottom:1px solid var(--line); }
.include-list>div:last-child { border:0; }
.include-list dt { font-weight:650; margin-bottom:4px; }
.include-list dd { margin:0; color:var(--muted); }
.measurement-checklist { padding-left:22px; }
.measurement-checklist li { margin-bottom:8px; }
.guide-end-action { background:var(--soft); padding:18px; border-radius:8px; margin-top:22px; }
.guide-end-action h3 { margin:0 0 8px; }
.guide-end-action a { display:inline-block; padding:10px 0 0; font-weight:600; }
.guide-sources { border:0; padding-bottom:0; }
.guide-sources h2 { font-size:18px; }
.guide-sources p,.guide-sources li { font-size:13px; }
.guide-sources ul { padding-left:20px; }
.guide-related { border-top:1px solid var(--line); padding-top:28px; margin-top:0; }
.guide-recorder { padding:20px; margin:24px 0 32px; border:1px solid var(--input-line); border-radius:10px; background:var(--soft); scroll-margin-top:16px; }
.record-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.record-heading h2 { margin:0; font-size:22px; font-weight:650; }
.record-tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.5fr); gap:16px; align-items:start; }
.record-tools label>span { display:block; font-size:11px; margin-top:5px; }
.record-layout { max-width:360px; margin-top:16px; }
.record-shape { margin:16px 0 0; font-size:14px; }
.guide-recorder .object-measurements { grid-template-columns:minmax(0,1fr) 240px; background:var(--panel); }
.guide-recorder .object-measurements>.fields { grid-template-columns:1fr 1fr; }
.guide-recorder .object-sketch .diagram svg { height:190px; }
.record-result { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; padding:16px 0 10px; }
.record-result strong { font-size:22px; font-weight:650; font-variant-numeric:tabular-nums; }
.record-continue { min-height:44px; }
@media(max-width:1000px) { .guide-layout { grid-template-columns:155px minmax(0,1fr); gap:28px; } .measure-explainer { grid-template-columns:1fr; } .measure-explainer .guide-figure { max-width:360px; width:100%; margin:0 auto; } .guide-recorder .object-measurements>.fields { grid-template-columns:1fr; } }
@media(max-width:700px) { .guide-intro h1 { font-size:30px; } .guide-layout { grid-template-columns:1fr; gap:28px; margin-top:24px; } .guide-contents { position:static; } .guide-contents nav { flex-direction:row; flex-wrap:wrap; gap:4px 12px; border-left:0; padding:14px; background:var(--soft); border-radius:8px; margin-bottom:0; } .guide-contents nav p { width:100%; padding:0; margin:0 0 4px; } .guide-contents a { padding:6px 0; text-decoration:underline; } .guide-contents>p,.guide-contents>a { display:none; } .guide-section h2 { font-size:23px; } .guide-recorder .object-measurements { grid-template-columns:1fr; } .guide-recorder .object-sketch { max-width:260px; width:100%; margin:0 auto; } }
@media(max-width:480px) { .section-examples,.record-tools { grid-template-columns:1fr; } .guide-intro h1 { font-size:28px; } .guide-intro { padding-bottom:22px; } .guide-section { margin-bottom:24px; padding-bottom:24px; } .guide-section p,.guide-section li,.guide-section dd { font-size:14px; } .guide-recorder { padding:14px; } .worked-measurement { padding:14px; } .worked-measurement dl>div { gap:10px; } .worked-measurement dd,.worked-measurement dt { font-size:13px; } .guide-start { gap:8px 16px; } }

.guide-record-shortcut { margin-bottom:18px; font-size:13px; min-height:40px; }
@media(max-width:700px) { .guide-contents .guide-record-shortcut { display:none; } }

/* The wall guide shares the established reading and recording layout. */
.record-net { margin:0 0 12px; }
.nav-guides a[aria-current="page"] { font-weight:650; background:var(--soft); }
@media(max-width:600px) { .nav-guides .nav-tool-menu { left:auto; right:0; } }
[data-wall-guide] main { padding-bottom:12px; }
.wall-guide .guide-figure .article-footprint { fill:var(--result-wash); stroke:var(--link); stroke-width:2; }
.wall-guide #openings .article-ghost { stroke:light-dark(#884429,#f6c3a4); stroke-dasharray:5 4; }
@media(max-width:480px) { .wall-guide #openings .guide-figure text { font-size:22px; } }

[data-flooring-guide] main { padding-bottom:12px; }
.guide-start a.buying-primary { background:var(--link); color:var(--panel); border:1px solid var(--link); border-radius:6px; padding:10px 16px; text-decoration:none; }
.guide-start a.buying-primary:hover { background:var(--soft); color:var(--link); }
.buying-quick-answer { margin:26px 0 0; padding:20px 22px; background:var(--result-wash); border-radius:9px; scroll-margin-top:20px; }
.buying-quick-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; }
.buying-quick-heading h2 { font-size:21px; font-weight:650; letter-spacing:-.02em; margin:0; }
.buying-quick-heading p { margin:0; }
.buying-flow { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:24px; padding:0; list-style:none; margin:20px 0 16px; }
.buying-flow li { position:relative; min-width:0; padding-right:20px; }
.buying-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-4px; top:30px; color:var(--link); font-size:22px; }
.buying-flow li>span { display:block; font-size:13px; color:var(--muted); }
.buying-flow strong { display:block; font-size:29px; line-height:1.3; font-weight:650; font-variant-numeric:tabular-nums; margin:4px 0; }
.buying-flow small { font-size:14px; font-weight:500; }
.buying-flow p { font-size:13px; line-height:1.6; margin:0; }
.buying-quick-answer>p { margin-bottom:0; }
.box-label-example { max-width:430px; border:1px solid var(--input-line); padding:18px 20px; border-radius:8px; margin:22px 0; background:var(--panel); }
.box-label-top { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; font-size:14px; font-weight:600; margin-bottom:12px; }
.box-label-example dl { margin:0; }
.box-label-example dl>div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; padding:12px 0; }
.box-label-example dd { margin:0; font-variant-numeric:tabular-nums; }
.box-label-example .box-coverage-highlight { border-top:2px solid var(--link); border-bottom:1px solid var(--line); }
.box-coverage-highlight dt { font-weight:650; }
.box-coverage-highlight dd strong { font-size:30px; color:var(--link); }
.box-label-example figcaption { font-size:12px; color:var(--muted); line-height:1.65; margin-top:10px; }
.buying-example-action { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.buying-example-action a { display:inline-flex; min-height:40px; align-items:center; font-size:14px; font-weight:600; }
.buying-example-action p { margin:4px 0 0; }
.buying-cost-options { margin:20px 0; }
.buying-cost-options>div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; padding:14px 0; border-bottom:1px solid var(--line); }
.buying-cost-options dd { margin:0; font-variant-numeric:tabular-nums; }
.material-guide-link { margin:16px 0; }
.material-guide-link a { display:inline-flex; align-items:center; min-height:40px; font-size:13px; }
/* Keep the card heading and description when its return label changes. */
.related-card[data-action="guide-continue"] { display:block; }
@media(max-width:700px) { .buying-quick-answer { padding:18px; } .buying-flow { gap:18px; } .buying-flow li { padding-right:10px; } .buying-flow strong { font-size:26px; } }
@media(max-width:480px) { .buying-quick-heading h2 { font-size:20px; } .buying-flow { grid-template-columns:1fr; gap:12px; margin:16px 0; } .buying-flow li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:14px; padding:0 0 12px; border-bottom:1px solid var(--line); } .buying-flow li:last-child { border-bottom:0; padding-bottom:0; } .buying-flow li::after { display:none; } .buying-flow strong { margin:0; font-size:25px; } .buying-flow p { grid-column:1/-1; } .box-label-example { padding:15px; } .flooring-buying-guide .worked-measurement dl>div { flex-wrap:wrap; } .flooring-buying-guide .worked-measurement dd { margin-left:auto; } .flooring-buying-guide .guide-formula>strong { font-size:19px; } }

[data-units-guide] main { padding-bottom:12px; }
.full-units-guide { display:flex; align-items:center; min-height:40px; margin-top:4px; font-size:13px; }
.units-full-guide { margin:16px 0 0; }
.units-full-guide a { display:inline-flex; align-items:center; min-height:40px; font-size:14px; }
.units-entry-example { padding:20px 22px; margin-top:26px; background:var(--result-wash); border-radius:9px; scroll-margin-top:20px; }
.units-example-heading h2 { margin:0 0 6px; font-size:22px; font-weight:650; letter-spacing:-.02em; }
.units-example-heading>p { margin:0; }
.entry-illustration { margin:18px 0 0; }
.entry-illustration table { border-collapse:collapse; width:100%; max-width:650px; table-layout:fixed; }
.entry-illustration caption { text-align:left; font-size:12px; color:var(--muted); padding-bottom:10px; }
.entry-illustration th,.entry-illustration td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.entry-illustration thead th { font-size:12px; color:var(--muted); font-weight:500; }
.entry-illustration th:first-child { width:46%; padding-left:0; }
.entry-illustration tbody th { font-size:14px; font-weight:600; }
.entry-illustration tbody th span { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:3px; }
.entry-illustration td { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
.entry-illustration td.entry-blank { font-size:13px; color:var(--muted); font-weight:400; }
.entry-illustration figcaption { font-size:12px; color:var(--muted); line-height:1.6; margin-top:12px; max-width:65ch; }
.units-example-result { display:flex; align-items:baseline; justify-content:space-between; gap:16px; max-width:650px; padding-top:16px; }
.units-example-result>span { font-size:14px; }
.units-example-result strong { font-size:30px; font-weight:650; font-variant-numeric:tabular-nums; }
.units-example-result small { font-size:14px; font-weight:500; }
.units-calculation-steps { padding-left:22px; }
.units-calculation-steps li { padding-bottom:8px; }
.units-input-table { width:100%; border-collapse:collapse; margin:20px 0; table-layout:fixed; }
.units-input-table caption { text-align:left; font-size:13px; padding-bottom:10px; color:var(--muted); }
.units-input-table th,.units-input-table td { text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.65; }
.units-input-table thead { background:var(--soft); }
.units-input-table thead th { font-weight:600; font-size:13px; }
.units-input-table th:first-child { width:32%; }
.units-input-table th:nth-child(2) { width:25%; }
.units-input-table tbody th { font-weight:500; }
.inch-fraction-reference { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:16px 0; margin:18px 0; border-block:1px solid var(--line); }
.inch-fraction-reference dt { font-weight:600; font-size:17px; }
.inch-fraction-reference dd { margin:4px 0 0; color:var(--muted); }
@media(max-width:700px) { .units-entry-example { padding:18px; } .units-example-heading h2 { font-size:21px; } }
@media(max-width:480px) { .entry-illustration th,.entry-illustration td { padding:10px 8px; } .entry-illustration th:first-child { width:45%; } .entry-illustration td { font-size:23px; } .units-example-result strong { font-size:28px; } .units-input-table th,.units-input-table td { padding:10px 7px; font-size:13px; } .units-input-table thead th { font-size:12px; } .units-input-table th:first-child { width:31%; } .units-input-table th:nth-child(2) { width:25%; } .inch-fraction-reference { gap:12px; } .units-input-guide .guide-formula>strong { font-size:20px; } }

.concept-overview { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:center; gap:32px; margin-top:28px; padding:22px; background:var(--soft); border:1px solid var(--line); border-radius:9px; }
.concept-overview h2 { font-size:24px; letter-spacing:-.02em; line-height:1.25; margin:0 0 14px; }
.concept-overview p { max-width:58ch; line-height:1.7; }
.concept-overview .guide-formula { margin:14px 0; }
.concept-overview .guide-formula strong { font-size:24px; }
.concept-unit-figure { padding:8px; border:0; background:transparent; }
.concept-fill { fill:var(--result-wash); stroke:var(--link); stroke-width:2; }
.concept-grid { fill:none; stroke:var(--link); stroke-width:.6; opacity:.4; }
.concept-yard-grid { fill:none; stroke:var(--link); stroke-width:1.5; }
.concept-unit-figure .concept-area-label { font-size:23px; font-weight:700; paint-order:stroke; stroke:var(--result-wash); stroke-width:7px; stroke-linejoin:round; }
.concept-yard-figure { max-width:350px; }
.concept-yard-figure svg { max-height:280px; }
.concept-yard-figure .yard-cell-label { font-size:14px; }
.concept-conversions { width:100%; border-collapse:collapse; table-layout:fixed; margin:20px 0; font-variant-numeric:tabular-nums; }
.concept-conversions caption { text-align:left; color:var(--muted); font-size:13px; padding-bottom:10px; }
.concept-conversions th,.concept-conversions td { text-align:left; vertical-align:top; font-size:14px; line-height:1.65; border-bottom:1px solid var(--line); padding:12px; overflow-wrap:anywhere; }
.concept-conversions thead { background:var(--soft); }
.concept-conversions th { font-weight:600; }
.concept-conversions th:first-child { width:34%; }
@media(max-width:700px) { .concept-overview { grid-template-columns:1fr; gap:12px; padding:18px; } .concept-unit-figure { max-width:280px; width:100%; margin:0 auto; } .concept-overview h2 { font-size:23px; } }
@media(max-width:480px) { .concept-conversions th,.concept-conversions td { padding:10px 7px; font-size:13px; } .concept-conversions thead th { font-size:12px; } .concept-overview .guide-formula strong { font-size:22px; } .concept-guide .guide-formula>strong { font-size:21px; } }

.converter-intro .breadcrumb { font-size:12px; margin-bottom:20px; }
.converter-intro h1 { max-width:32ch; font-size:38px; line-height:1.15; text-wrap:balance; }
.converter-intro>p { max-width:76ch; }
.converter-panel { margin:24px 0 40px; max-width:900px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); padding:24px; }
.converter-panel h2 { font-size:17px; margin:0 0 20px; }
.conversion-fields { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); align-items:end; gap:14px; }
.conversion-field { min-width:0; display:block; font-size:14px; font-weight:600; }
.conversion-input-wrap { display:block; position:relative; margin-top:9px; }
.conversion-input-wrap input { width:100%; min-width:0; min-height:60px; font-size:25px; padding:10px 64px 10px 14px; font-variant-numeric:tabular-nums; border:1px solid var(--input-line); background:var(--panel); color:var(--ink); border-radius:7px; }
.conversion-input-wrap input::placeholder { font-size:17px; font-weight:400; }
.conversion-input-wrap input:focus { outline:2px solid var(--link); outline-offset:2px; }
.conversion-input-wrap input[aria-invalid="true"] { border-color:var(--error); }
.conversion-unit { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; font-weight:500; pointer-events:none; }
.conversion-between { align-self:end; display:flex; justify-content:center; align-items:center; height:60px; font-size:24px; color:var(--muted); }
.conversion-result { margin:22px 0 16px; padding:16px 18px; background:var(--result-wash); border-radius:7px; }
.conversion-result output { display:block; font-size:23px; line-height:1.5; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.conversion-result p { margin:6px 0 0; line-height:1.6; }
.conversion-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.conversion-actions button { min-height:42px; font-size:13px; }
.conversion-actions .conversion-copy { background:var(--link); border-color:var(--link); color:var(--panel); font-weight:600; }
.conversion-actions .conversion-copy:disabled { opacity:.5; }
.conversion-actions .conversion-precision { border-color:transparent; background:transparent; color:var(--link); margin-left:auto; text-decoration:underline; }
.conversion-examples { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.conversion-examples button { font-size:12px; min-height:36px; padding:6px 12px; }
#conversion-copy-status:empty { margin:0; }
#conversion-copy-status:not(:empty) { margin:12px 0; }
#conversion-manual-copy { margin-top:16px; }
#conversion-manual-copy label { display:block; font-size:13px; margin-bottom:8px; }
#conversion-copy-text { width:100%; font-size:14px; padding:10px; background:var(--panel); color:var(--ink); border:1px solid var(--input-line); border-radius:6px; }
.converter-measure-link { font-size:13px; color:var(--muted); margin:18px 0 0; line-height:1.7; }
.converter-article { max-width:900px; }
.converter-section { margin:0 0 28px; padding:0 0 28px; border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.converter-section h2 { font-size:25px; font-weight:650; line-height:1.3; letter-spacing:-.025em; margin:0 0 16px; text-wrap:balance; }
.converter-section h3 { font-size:17px; font-weight:650; margin:20px 0 10px; }
.converter-section p,.converter-section dd { max-width:72ch; font-size:15px; line-height:1.75; }
.converter-section .guide-formula { max-width:760px; }
.converter-section .guide-formula strong { font-size:20px; overflow-wrap:anywhere; }
.conversion-tables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.conversion-tables table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; font-variant-numeric:tabular-nums; }
.conversion-tables caption { text-align:left; font-size:13px; color:var(--muted); margin-bottom:10px; }
.conversion-tables th,.conversion-tables td { text-align:left; vertical-align:top; padding:11px 12px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.conversion-tables thead { background:var(--soft); }
.conversion-tables thead th { font-size:12px; font-weight:600; }
.conversion-tables tbody th { font-weight:500; }
@media(max-width:700px) { .converter-intro h1 { font-size:30px; } .converter-panel { padding:18px; } .conversion-fields { grid-template-columns:1fr; gap:16px; } .conversion-between { display:none; } .conversion-tables { grid-template-columns:1fr; } .conversion-result output { font-size:21px; } .conversion-actions .conversion-precision { margin-left:0; } }
@media(max-width:480px) { .converter-intro h1 { font-size:28px; } .converter-section h2 { font-size:23px; } .converter-section p,.converter-section dd { font-size:14px; } .converter-section .guide-formula strong { font-size:18px; } .conversion-input-wrap input { font-size:24px; } .conversion-result { padding:14px; } .conversion-result output { font-size:20px; } .conversion-examples>span { flex-basis:100%; } }



.nav .nav-tool-menu .nav-directory-link {
  justify-content:space-between; gap:10px; font-weight:650;
  border-bottom:1px solid var(--line); border-radius:0; margin-bottom:4px;
}
.nav .nav-tool-menu .nav-directory-link[aria-current='page'] { color:var(--link); background:var(--soft); }
.nav-directory-link>span:last-child { flex-shrink:0; }
.directory-content { max-width:960px; margin:0 auto; padding:8px 0 4px; }
.directory-intro { margin-bottom:26px; }
.directory-intro .breadcrumb { font-size:12px; color:var(--muted); margin:0 0 20px; }
.directory-intro h1 { font-size:36px; line-height:1.2; margin:0 0 12px; }
.directory-intro>p:last-child { color:var(--muted); font-size:15px; line-height:1.7; margin:0; max-width:70ch; }
.directory-card-grid { display:grid; gap:16px; }
.directory-calculator-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.directory-converter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.directory-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:22px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:9px; text-decoration:none;
}
.directory-card:hover { border-color:var(--link); background:var(--soft); }
.directory-card h2 { font-size:18px; line-height:1.4; font-weight:650; letter-spacing:-.02em; margin:0; }
.directory-card p { font-size:14px; line-height:1.7; color:var(--muted); margin:0; }
.directory-card-icon { display:flex; width:40px; height:40px; align-items:center; justify-content:center; color:var(--link); background:var(--soft); border-radius:7px; margin-bottom:4px; }
.directory-card-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.directory-card-action { display:flex; align-items:center; justify-content:space-between; align-self:stretch; gap:12px; margin-top:auto; padding-top:10px; font-size:13px; font-weight:600; color:var(--link); }
.directory-card-action>span:last-child { font-size:19px; line-height:1; }
.directory-help { margin-top:26px; padding:18px 0 0; border-top:1px solid var(--line); }
.directory-help p { font-size:13px; line-height:1.8; color:var(--muted); margin:0; }
.directory-help p+p { margin-top:6px; }
.directory-help a { color:var(--link); text-underline-offset:3px; }
.directory-guide-group { display:grid; grid-template-columns:150px minmax(0,1fr); gap:26px; border-top:1px solid var(--line); padding:20px 0; }
.directory-guide-group>h2 { font-size:15px; line-height:1.5; color:var(--muted); font-weight:600; margin:10px 0 0; }
.directory-guide-list { padding:0; margin:0; list-style:none; }
.directory-guide-list>li+li { border-top:1px solid var(--line); }
.directory-guide-row { display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--ink); text-decoration:none; padding:12px; margin:0 -12px; border-radius:6px; }
.directory-guide-row>span:first-child { min-width:0; }
.directory-guide-row:hover { background:var(--soft); }
.directory-guide-row h3 { font-size:16px; font-weight:650; line-height:1.5; margin:0 0 5px; letter-spacing:-.015em; }
.directory-guide-row p { font-size:13px; line-height:1.65; color:var(--muted); margin:0; }
.directory-row-arrow { flex-shrink:0; color:var(--link); font-size:20px; }
.directory-page .directory-guide-group+.directory-help { margin-top:6px; }
@media(max-width:850px) {
  .directory-calculator-grid { grid-template-columns:1fr; }
  .directory-card { padding:20px; }
}
@media(max-width:600px) {
  .nav-converters .nav-tool-menu { left:50%; right:auto; transform:translateX(-50%); }
  .directory-content { padding-top:4px; }
  .directory-intro { margin-bottom:22px; }
  .directory-intro h1 { font-size:29px; }
  .directory-intro>p:last-child { font-size:14px; }
  .directory-converter-grid { grid-template-columns:1fr; }
  .directory-guide-group { grid-template-columns:1fr; gap:8px; padding:16px 0; }
  .directory-guide-group>h2 { margin:0; font-size:14px; }
  .directory-guide-row { margin:0; padding:12px 4px; }
  .directory-guide-row h3 { font-size:15px; }
}


/* Short information pages share the existing site tokens and natural document height. */
.info-content { max-width:760px; margin:0 auto; padding:8px 0 4px; }
.info-intro { margin-bottom:28px; }
.info-intro .breadcrumb { font-size:12px; line-height:1.6; color:var(--muted); margin:0 0 20px; }
.info-intro h1 { font-size:36px; line-height:1.2; margin:0 0 12px; }
.info-intro>p:last-child { color:var(--muted); font-size:16px; line-height:1.7; margin:0; max-width:65ch; }
.info-section { margin-top:26px; }
.info-section h2 { font-size:21px; font-weight:650; line-height:1.4; margin:0 0 10px; letter-spacing:-.02em; }
.info-section p,.info-section li { font-size:15px; line-height:1.75; }
.info-section p { margin:0 0 12px; }
.info-section p:last-child { margin-bottom:0; }
.info-section ul,.info-section ol { padding-left:22px; margin:0; }
.info-section li+li { margin-top:8px; }
.info-section strong { font-weight:650; }
.info-contact-note { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; line-height:1.7; }
.contact-email { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:18px 20px; }
.contact-email p { color:var(--muted); }
.contact-email .contact-unavailable { color:var(--ink); font-weight:600; }
.info-section .contact-privacy { color:var(--muted); font-size:13px; margin-top:14px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; }
.site-footer-copy p { margin:0; }
.site-footer-copy p+p { margin-top:5px; }
.site-footer .site-footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; }
.site-footer-links a { display:inline-flex; align-items:center; min-height:36px; font-size:13px; text-underline-offset:3px; }
.site-footer-links [aria-current='page'] { font-weight:700; color:var(--ink); text-decoration:none; }
@media(max-width:600px) {
  .info-content { padding-top:4px; }
  .info-intro { margin-bottom:24px; }
  .info-intro h1 { font-size:29px; }
  .info-intro>p:last-child { font-size:15px; }
  .info-section { margin-top:24px; }
  .info-section h2 { font-size:20px; }
  .contact-email { padding:16px; }
  .site-footer { align-items:flex-start; flex-direction:column; gap:10px; }
  .site-footer .site-footer-links { gap:4px 24px; }
}


/* Readable policy drafts; retain the established information-page layout and themes. */
.policy-page .info-intro { margin-bottom:20px; }
.policy-meta { color:var(--muted); font-size:12px; margin:0 0 16px; }
.policy-preview { border-left:3px solid var(--link); background:var(--soft); padding:12px 16px; margin:0 0 18px; border-radius:0 6px 6px 0; }
.policy-preview p { font-size:13px; line-height:1.7; margin:0; }
.policy-preview strong { font-weight:650; }
.policy-contents { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 26px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.policy-contents a { font-size:13px; line-height:1.6; padding:4px 0; }
.policy-page .info-section h2 { scroll-margin-top:20px; }
.policy-page .info-section h2:target { color:var(--link); }
.policy-page .policy-status { font-weight:650; }
@media(max-width:600px) {
  .policy-preview { padding:12px 14px; }
  .policy-contents { gap:4px 18px; }
}


.result-conversion { margin:0 0 16px; font-size:13px; }
.result-conversion summary { color:var(--link); cursor:pointer; padding:4px 0; font-weight:600; }
.result-conversion p { margin:8px 0; }
.conversion-targets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.conversion-targets button { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 10px; font-size:12px; text-align:left; }
.result-conversion #conversion-transfer-error:empty { display:none; }
.conversion-source { background:var(--soft); border-left:3px solid var(--link); border-radius:0 6px 6px 0; padding:12px 16px; margin:12px 0 22px; }
.conversion-source p { margin:0 0 8px; }
.conversion-source .conversion-source-title { font-size:14px; font-weight:700; }
.conversion-source a { font-size:13px; }


/* V40: keep disclosed navigation within narrow viewports, including wrapped bars. */
@media(max-width:600px) {
  .nav nav { position:relative; }
  .nav .nav-tools { position:static; }
  .nav .nav-tool-menu {
    left:0; right:auto; top:100%; transform:none;
    width:min(320px,100%); max-height:min(400px,calc(100dvh - 180px));
    overflow-y:auto;
  }
}
/* A saved custom name must not push its net area beyond the result dialog. */
.full-result .room-net { flex-wrap:wrap; }
.full-result .room-net>span:first-child { min-width:0; overflow-wrap:anywhere; flex:1 1 120px; }
.full-result .room-net>span:last-child { flex:0 0 auto; margin-left:auto; }

/* V41: compact waste shortcuts; free entry and product-specific guidance remain available. */
.waste-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.waste-shortcuts button { min-width:52px; min-height:44px; padding:6px 12px; font-size:14px; }
.waste-shortcut-note { margin:0 0 12px; }

.shape-change-confirm { width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); }
.shape-change-confirm::backdrop { background:rgb(0 0 0 / .4); }
.shape-change-confirm h2 { margin-bottom:12px; }
.shape-change-confirm p { overflow-wrap:anywhere; }
.shape-change-confirm button { min-height:44px; }
.shape-change-confirm #confirm-new-shape { background:var(--link); color:var(--panel); border-color:var(--link); }

.waste-shortcuts button[aria-pressed="true"] { background:var(--link); color:var(--panel); border-color:var(--link); font-weight:600; }

/* V42: summaries for sharing, detailed evidence on demand, and a separate print sheet. */
.full-result { width:min(820px,calc(100vw - 32px)); }
.report-header h2 { font-size:21px; line-height:1.3; text-wrap:balance; flex:1 1 220px; }
.report-header>button { flex-shrink:0; }
.report-toolbar { margin-top:16px; gap:10px; }
.report-toolbar button { min-height:44px; }
.report-toolbar [data-copy-format="summary"] { background:var(--link); color:var(--panel); border-color:var(--link); font-weight:650; }
.report-summary { background:var(--result-wash,var(--soft)); border-radius:8px; padding:18px; }
.report-summary .total,.report-totals,.report-materials .breakdown-row,.report-settings { font-variant-numeric:tabular-nums; }
.report-summary h3 { margin:0 0 10px; font-size:15px; }
.report-summary .total { margin:4px 0 6px; }
.report-totals .breakdown-row { align-items:flex-start; gap:16px; }
.report-totals .breakdown-row>span:first-child { min-width:0; overflow-wrap:anywhere; }
.report-totals .breakdown-row>span:last-child { flex-shrink:0; }
.report-area-breakdown { margin-top:12px; }
.report-area-breakdown>summary { cursor:pointer; color:var(--link); min-height:36px; padding:5px 0; font-size:13px; font-weight:600; }
.report-state { padding:10px 12px; background:var(--soft); border-left:3px solid var(--link); font-size:13px; overflow-wrap:anywhere; }
.report-materials .room-heading { align-items:center; }
.report-materials .room-heading h3 { margin:0; }
.report-material-scope { margin:0 0 14px; font-size:13px; overflow-wrap:anywhere; }
.report-scope-details>summary { cursor:pointer; color:var(--link); min-height:36px; padding:5px 0; }
.report-scope-details p { margin:6px 0 12px; }
.report-materials .material-result { margin:0; }
.report-materials .breakdown-row { gap:16px; align-items:flex-start; }
.report-materials .breakdown-row>span:first-child { min-width:0; flex:1; }
.report-materials .breakdown-row>span:last-child { flex-shrink:0; }
.report-basis-heading { font-size:13px; margin:18px 0 8px; }
.report-measurements>summary { cursor:pointer; color:var(--link); font-size:16px; font-weight:650; min-height:44px; padding:8px 0; }
.report-measurements .report-measurement-content { margin-top:10px; }
.report-attribution { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.report-detail-action { margin-top:16px; }
.report-detail-action button { min-height:44px; }
.report-detail-action p,.print-help { margin:8px 0 0; }
.report-no-estimate p { margin:0 0 10px; }
.report-materials .report-settings dd { text-align:left; }
.site-footer-copy .site-contact { margin-top:8px; font-size:13px; }
.site-contact a { display:inline-flex; align-items:center; min-height:24px; }
.contact-email .email-address { display:inline-block; font-size:clamp(18px,3vw,24px); font-weight:650; overflow-wrap:anywhere; margin:0 0 12px; }
.contact-actions { display:flex; flex-wrap:wrap; gap:10px; }
.contact-actions button,.contact-actions a { min-height:44px; }
#contact-copy-status:empty { display:none; }
.contact-email [hidden] { display:none; }
.contact-email-fallback { margin-top:12px; }
.contact-email-fallback input { max-width:360px; }
.site-facts { margin:12px 0 0; }
.site-facts>div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; margin:8px 0; }
.site-facts dt { color:var(--muted); }
.site-facts dd { margin:0; overflow-wrap:anywhere; }
#sfp-print-report { display:none; }
@media(max-width:600px) {
  .full-result { width:calc(100vw - 20px); padding-inline:16px; }
  .report-header h2 { font-size:18px; flex-basis:0; min-width:0; }
  .report-header>button { align-self:flex-start; }
  .report-summary { padding:14px; }
  .report-materials .breakdown-row,.report-totals .breakdown-row { flex-wrap:wrap; gap:4px 14px; }
  .report-materials .breakdown-row>span:last-child,.report-totals .breakdown-row>span:last-child { margin-left:auto; }
  .report-materials .room-heading { flex-wrap:wrap; gap:8px; }
  .site-facts>div { grid-template-columns:80px minmax(0,1fr); }
}
@media print {
  @page { size:auto; margin:14mm; }
  html:has(body.printing-result) { color-scheme:light; background:#fff; }
  body.printing-result { background:#fff!important; color:#182235!important; margin:0!important; padding:0!important; }
  body.printing-result>*:not(#sfp-print-report) { display:none!important; }
  body.printing-result #sfp-print-report { display:block!important; color:#182235; background:#fff; font:10pt/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; max-width:none; margin:0; padding:0; }
  #sfp-print-report * { color:inherit!important; background:transparent!important; box-shadow:none!important; max-height:none!important; overflow:visible!important; }
  #sfp-print-report a { color:#182235!important; text-decoration:underline; }
  #sfp-print-report button { display:none!important; }
  #sfp-print-report .print-heading { border-bottom:1pt solid #8995a5; padding-bottom:8pt; margin-bottom:10pt; break-inside:avoid; }
  #sfp-print-report .print-heading p { font-size:9pt; margin:0 0 5pt; }
  #sfp-print-report h1 { font-size:20pt; margin:0 0 6pt; line-height:1.2; }
  #sfp-print-report h3,#sfp-print-report .report-measurements>summary { font-size:12pt; margin:0 0 8pt; break-after:avoid; }
  #sfp-print-report h4 { font-size:10pt; margin:8pt 0 4pt; break-after:avoid; }
  #sfp-print-report .report-section { margin-top:10pt; padding:0; border:0; }
  #sfp-print-report .report-summary { padding:8pt 10pt; border:1pt solid #bdc7d4; border-radius:0; }
  #sfp-print-report .report-summary h3 { margin-bottom:4pt; }
  #sfp-print-report .report-summary>p { margin:2pt 0; }
  #sfp-print-report .total { font-size:24pt; font-weight:700; margin:2pt 0; font-variant-numeric:tabular-nums; }
  #sfp-print-report .total span { font-size:11pt; font-weight:500; }
  #sfp-print-report .small { font-size:9pt; }
  #sfp-print-report p { margin:5pt 0; overflow-wrap:anywhere; }
  #sfp-print-report .report-state { border-left:2pt solid #62748c; padding:6pt 8pt; font-size:9pt; break-inside:avoid; }
  #sfp-print-report .report-totals { margin-top:6pt; }
  #sfp-print-report .report-area-breakdown { margin-top:6pt; }
  #sfp-print-report .report-area-breakdown>summary { font-size:9pt; min-height:0; padding:0; }
  #sfp-print-report .breakdown-row,#sfp-print-report .room-net { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4pt 14pt; border-bottom:.5pt solid #d5dbe2; padding:4pt 0; margin:0; break-inside:avoid; font-variant-numeric:tabular-nums; }
  #sfp-print-report .breakdown-row>span:first-child,#sfp-print-report .room-net>span:first-child { flex:1 1 60%; min-width:0; overflow-wrap:anywhere; }
  #sfp-print-report .breakdown-row>span:last-child,#sfp-print-report .room-net>span:last-child { flex-shrink:0; margin-left:auto; }
  #sfp-print-report .material-result { padding:0; margin:6pt 0; }
  #sfp-print-report .report-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5pt 16pt; font-size:9pt; }
  #sfp-print-report .report-settings>div { display:grid; grid-template-columns:80pt minmax(0,1fr); gap:8pt; margin:0; break-inside:avoid; }
  #sfp-print-report .report-settings dd { margin:0; }
  #sfp-print-report .report-measurements { display:block; border-top:1pt solid #bdc7d4; padding-top:10pt; }
  #sfp-print-report .report-measurements>summary { display:block; padding:0; min-height:0; list-style:none; }
  #sfp-print-report .report-measurement-content { margin:0; }
  #sfp-print-report .report-room { padding:6pt 0; margin:6pt 0; border:0; border-bottom:.5pt solid #d5dbe2; border-radius:0; break-inside:avoid-page; }
  #sfp-print-report .report-calculation { break-inside:avoid; margin:6pt 0; }
  #sfp-print-report .report-calculation p { margin:3pt 0; font-size:9pt; }
  #sfp-print-report .report-attribution { margin-top:8pt; padding-top:6pt; border-top:1pt solid #bdc7d4; font-size:9pt; break-inside:avoid; }
}

/* V43: optional analytics choice, separate from calculation storage. */
.analytics-choice {
  --line:light-dark(#b5c6df,#526780); --panel:light-dark(#fff,#203147); --ink:light-dark(#182235,#edf2ff); --link:light-dark(#3e6492,#b3d3ff);
  position:fixed; z-index:200; left:16px; right:16px; bottom:16px; max-width:1080px; margin:auto;
  padding:14px 16px; display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); box-shadow:0 3px 18px #0002; font:400 14px/1.5 system-ui,sans-serif;
}
.analytics-choice p { flex:1; min-width:0; margin:0; }
.analytics-choice-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.analytics-choice button { min-height:40px; cursor:pointer; }
.analytics-choice button:focus-visible,.analytics-choice a:focus-visible { outline:2px solid var(--link); outline-offset:3px; }
#square-footage-task-prototype .analytics-settings { display:inline; padding:0; min-height:24px; border:0; background:none; color:var(--link); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:13px; }
@media(max-width:700px){.analytics-choice{left:8px;right:8px;bottom:8px;display:block;padding:12px;}.analytics-choice-actions{margin-top:10px;}.analytics-choice button{font-size:13px;}}
@media print{.analytics-choice,.analytics-settings{display:none!important;}}