/* Shared by the home demonstration and its published ouvrage. */
.masonry-lab { --lab-ink:#142d40; --lab-blue:#2455c9; color:var(--lab-ink); background:#fff; border:1px solid #c4d4c8; border-radius:10px; padding:26px; min-width:0; }
.masonry-lab button,.masonry-lab input { font:inherit; }
.masonry-lab button { min-height:44px; }
.masonry-lab :is(button,input,summary):focus-visible { outline:3px solid #b77722; outline-offset:3px; }
.lab-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:20px; border-bottom:1px solid #dce5dc; }
.lab-eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.9px; color:#486852; margin-bottom:8px; }
.masonry-lab .lab-heading h3 { font-size:clamp(22px,2.2vw,28px); line-height:1.3; letter-spacing:-.65px; margin:0; }
.lab-heading p { font-size:15px; line-height:1.7; color:#526772; margin-top:9px; }
.lab-mode { flex-shrink:0; font-size:12px; line-height:1.5; padding:7px 9px; background:#edf3e7; color:#3d603b; border:1px solid #c9d9c0; border-radius:4px; }
.masonry-lab[data-trial=true] .lab-mode { color:#704c13; background:#fff4dc; border-color:#e7d1a7; }
.lab-start { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding-block:20px; }
.masonry-lab .lab-primary { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:11px 16px; font-size:14px; font-weight:600; line-height:1.6; border-radius:5px; background:var(--lab-blue); color:#fff; }
.masonry-lab .lab-primary:hover { background:#1744aa; }
.masonry-lab .lab-primary > span { font-size:20px; line-height:1; }
.lab-start-note { font-size:13px; line-height:1.6; color:#526772; }
.lab-text-button { color:var(--lab-blue); font-size:14px; padding:9px 1px; text-decoration:underline; text-underline-offset:4px; line-height:1.6; }
.lab-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:17px; }
.lab-steps > button { display:flex; align-items:center; justify-content:flex-start; gap:9px; padding:10px 12px; font-size:14px; line-height:1.5; text-align:left; border:1px solid #d0dcd1; border-radius:5px; background:#f6f8f3; }
.lab-steps > button > span { width:23px; height:23px; flex-shrink:0; display:grid; place-items:center; background:#e4ebdf; color:#43613f; border-radius:50%; font-size:12px; }
.lab-steps > button:hover,.lab-pick > button:hover { border-color:#8da8ce; background:#f1f5fd; }
.lab-steps > button[aria-pressed=true] { border-color:var(--lab-blue); background:#eaf0ff; box-shadow:inset 0 -2px var(--lab-blue); color:#19489f; }
.lab-steps > button[aria-pressed=true] > span { background:var(--lab-blue); color:#fff; }
.lab-guidance { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; margin-bottom:18px; background:#edf3e7; border-left:3px solid #76946e; border-radius:0 5px 5px 0; }
.lab-progress { font-size:12px; color:#476240; margin:0 0 6px; }
.masonry-lab h4 { margin:0; font-size:16px; line-height:1.6; font-weight:600; }
.lab-guidance [data-lab-step-text] { color:#36523d; font-size:14px; line-height:1.75; margin-top:7px; max-width:66ch; }
.lab-step-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.lab-step-controls > button { border:1px solid #bbcdb4; border-radius:4px; color:#31542e; background:#fff; font-size:13px; padding:9px 11px; white-space:nowrap; }
.lab-step-controls > button:disabled { opacity:.48; }
.lab-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.lab-schema { min-width:0; background:#f2f6f0; border:1px solid #dbe5d7; border-radius:6px; padding:16px; }
.lab-drawing { display:block; width:100%; height:auto; max-height:280px; }
.lab-wall { fill:#dce8fa; stroke:#52729c; stroke-width:1.6; cursor:pointer; }
.lab-wall-lines { fill:none; stroke:#a3b8d4; stroke-width:.8; pointer-events:none; }
.lab-opening { fill:#fff; stroke:#657782; stroke-width:1.6; stroke-dasharray:4 3; cursor:pointer; }
.lab-dimension { fill:none; stroke:#657782; stroke-width:1; }
.lab-drawing-labels { fill:#142d40; font-family:inherit; font-size:15px; }
.lab-drawing-labels [data-lab-zone] { cursor:pointer; }
.lab-opening-size { font-size:13px; }
.masonry-lab[data-focus=wall] .lab-wall { fill:#c4d7fb; stroke:#2455c9; stroke-width:3; }
.masonry-lab[data-focus=opening] .lab-opening { fill:#feecc8; stroke:#8e5d10; stroke-width:3; stroke-dasharray:none; }
.lab-pick { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lab-pick > button { border:1px solid #bccdc2; border-radius:4px; font-size:14px; line-height:1.5; padding:10px 8px; background:#fff; color:#3d5d4d; }
.lab-pick > button[aria-pressed=true] { background:#e7eeff; border-color:var(--lab-blue); color:#174798; }
.lab-caption { font-size:12px; line-height:1.7; color:#526772; margin:12px 0 0; }
.lab-calculation { min-width:0; }
.lab-calculation > h4 { margin:1px 0 12px; }
.lab-calculation-row { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; border:1px solid #d2ddd5; border-radius:5px; padding:16px; margin-bottom:10px; background:#f8faf6; text-align:left; }
.lab-calculation-row > span { min-width:0; }
.lab-calculation-row strong { display:block; font-size:15px; font-weight:600; }
.lab-calculation-row small { display:block; font-size:14px; line-height:1.6; color:#526772; margin-top:5px; }
.lab-calculation-row > b { font-size:20px; font-weight:500; line-height:1.4; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lab-calculation-row[aria-pressed=true] { border-color:var(--lab-blue); background:#edf2ff; box-shadow:inset 3px 0 var(--lab-blue); }
.masonry-lab[data-focus=opening] .lab-calculation-row[data-lab-highlight=opening] { border-color:#b98226; background:#fff3dc; box-shadow:inset 3px 0 #a16d18; }
.lab-result { background:#142d40; color:#fff; border:3px solid #142d40; border-radius:5px; padding:17px; margin-top:15px; }
.lab-result > span { display:block; font-size:13px; color:#dce7eb; }
.lab-result > strong { display:block; font-size:31px; line-height:1.35; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; }
.lab-result > p { margin-top:9px; font-size:14px; line-height:1.7; color:#dce7eb; }
.masonry-lab[data-focus=result] .lab-result { border-color:#a4c0f6; }
.lab-output { border:1px solid #cad8cd; border-radius:6px; margin-top:20px; overflow:hidden; }
.lab-output-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; padding:14px 17px; background:#f0f5ec; }
.lab-output-heading > span { font-size:12px; color:#4f6955; }
.lab-table-wrap { overflow-x:auto; }
.lab-output table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; }
.lab-output th,.lab-output td { padding:13px 16px; border-top:1px solid #d4dfd5; }
.lab-output th { font-weight:600; color:#526772; background:#fafbf8; }
.lab-output td { line-height:1.7; }
.lab-output :is(th,td):last-child { text-align:right; font-variant-numeric:tabular-nums; }
.lab-output :is(th,td):nth-child(n+2) { white-space:nowrap; }
.masonry-lab[data-focus=output] .lab-output { border-color:var(--lab-blue); box-shadow:0 0 0 2px #2455c933; }
.masonry-lab[data-focus=output] .lab-output tbody { background:#edf3ff; }
.lab-conditions { padding:17px 19px; margin-top:20px; background:#f4f7f0; border-left:3px solid #839f78; }
.lab-conditions > p { color:#435d46; font-size:14px; line-height:1.8; margin-top:6px; }
.lab-conditions .lab-trial-note { font-weight:600; color:#70511f; }
.lab-trial { margin-top:22px; border-top:1px solid #d3ded3; }
.lab-trial > summary { cursor:pointer; min-height:52px; padding:15px 0; color:var(--lab-blue); font-size:14px; line-height:1.6; font-weight:600; }
.lab-trial > div { padding:0 0 5px; }
.lab-trial > div > p { font-size:14px; line-height:1.75; color:#526772; margin-bottom:20px; }
.lab-trial-fields { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(0,1.2fr); gap:24px; align-items:center; }
.lab-trial-fields > label { font-size:14px; line-height:1.6; font-weight:600; }
.lab-trial-fields input[type=text] { display:block; width:100%; max-width:230px; min-height:46px; padding:10px 12px; margin-top:8px; font-size:17px; border:1px solid #94a99b; border-radius:4px; background:#fff; color:#142d40; }
.lab-trial-fields input[aria-invalid=true] { border-color:#a53e2f; box-shadow:0 0 0 1px #a53e2f; }
.lab-trial-fields label > small { display:block; font-size:12px; font-weight:400; color:#526772; margin-top:6px; }
.lab-deduct { display:flex; align-items:flex-start; gap:10px; min-height:44px; padding-block:10px; }
.lab-deduct input { width:20px; height:20px; flex-shrink:0; margin:2px 0 0; accent-color:#2455c9; }
.lab-trial-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:18px; }
.lab-error { color:#8b3528; background:#fff1ed; padding:12px 14px; margin-top:16px; border-left:3px solid #a14635; font-size:14px; line-height:1.7; }
.reader .masonry-lab { padding:22px; }
.reader .lab-workspace { grid-template-columns:minmax(0,1fr); }
.reader .lab-heading { flex-wrap:wrap; gap:12px; }
.reader .lab-guidance { display:block; }
.reader .lab-step-controls { margin-top:14px; justify-content:space-between; }
.reader .lab-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
.reader .lab-schema { padding:13px; }
.reader .lab-drawing { max-height:260px; }
.reader .lab-conditions > p { font-size:calc(var(--reader-copy,16px) - 1px); }
@media (max-width:850px) {
  .lab-heading { flex-wrap:wrap; gap:12px; }
  .lab-guidance { display:block; }
  .lab-step-controls { justify-content:space-between; margin-top:14px; }
}
@media (max-width:640px) {
  .masonry-lab,.reader .masonry-lab { padding:18px 16px; }
  .masonry-lab .lab-heading h3 { font-size:23px; }
  .lab-heading p { font-size:14px; }
  .lab-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .lab-steps > button { padding:10px; font-size:14px; }
  .lab-workspace { grid-template-columns:minmax(0,1fr); gap:19px; }
  .lab-schema { padding:12px; }
  .lab-guidance { padding:16px; }
  .lab-output-heading { padding:13px; }
  .lab-output th,.lab-output td { padding:11px 10px; font-size:13px; }
  .lab-conditions { padding:15px; }
  .lab-trial-fields { grid-template-columns:minmax(0,1fr); gap:10px; }
  .lab-trial-fields input[type=text] { max-width:none; }
  .lab-calculation-row { padding:14px; }
  .lab-calculation-row > b { font-size:19px; }
}
@media (max-width:360px) {
  .masonry-lab,.reader .masonry-lab { padding-inline:12px; }
  .lab-steps,.reader .lab-steps { grid-template-columns:minmax(0,1fr); }
  .lab-calculation-row { flex-wrap:wrap; gap:8px; }
  .lab-calculation-row > b { margin-left:auto; }
  .lab-pick > button { padding-inline:5px; font-size:14px; }
}
@media print {
  .masonry-lab { border:1px solid #a1afa2; padding:15px; }
  .lab-start,.lab-steps,.lab-guidance,.lab-pick,.lab-trial { display:none !important; }
  .lab-heading,.lab-output-heading { break-inside:avoid; break-after:avoid; }
  .lab-mode,.masonry-lab[data-trial=true] .lab-mode { color:#142d40; background:transparent; border-color:#6a786f; }
  .lab-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .lab-result { background:#f2f5ef; color:#142d40; border-color:#bbcbbc; }
  .lab-result > span,.lab-result > p { color:#294638; }
  .lab-output,.lab-conditions { break-inside:avoid; }
}