/* Shower builder (shower-builder.html). The layout, steps, choices, drawings
 * and print sheet come from wine-builder.css; this adds only what is new. */

.wb-page .wb-app [data-only][hidden]{display:none!important}

/* How-to-measure sketch */
.sb-measure{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:flex;justify-content:center}
.sb-measure svg{width:100%;max-width:260px;height:auto;display:block}

/* Inches, typed */
.wb-dim-exact .sb-exact{width:92px}
.sb-eg{color:var(--ink-3);font-size:.76rem;margin-left:4px}

/* Door layout cards: a front-view icon and whether it fits */
.sb-elev svg{width:64px;height:44px;display:block;margin-bottom:4px}
.sb-fit{font-size:.74rem;font-weight:700;line-height:1.3;margin-top:4px;padding-left:16px;position:relative}
.sb-fit::before{content:"";position:absolute;left:0;top:.28em;width:10px;height:10px;border-radius:50%}
.sb-fit.ok{color:var(--leaf)}
.sb-fit.ok::before{background:var(--leaf)}
.sb-fit.no{color:var(--ink-3);font-weight:600}
.sb-fit.no::before{border:1.5px solid var(--ink-3);box-sizing:border-box}
/* A layout that won't fit still shows why, so it stays readable when disabled. */
.wb-choices button.sb-x,.sb-configs button:disabled,.sb-styles button:disabled{opacity:.62}
.sb-configs button:disabled .sb-fit,.sb-styles button:disabled .sb-fit{opacity:1}

.sb-switch{font-size:.86rem;background:#FBF0E4;border:1px solid #EFDCC4;border-radius:var(--radius);padding:9px 12px;color:var(--ink-2);margin:0 0 .6em}
.sb-switch[hidden]{display:none}

/* Opening not square? */
.sb-more-btn{margin-top:18px;background:none;border:1px dashed var(--line);border-radius:var(--radius);padding:10px 14px;width:100%;text-align:left;font:600 .88rem/1.3 var(--sans);color:var(--navy);cursor:pointer}
.sb-more-btn:hover{border-color:var(--navy)}
.sb-more-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sb-more{margin-top:12px;padding:4px 14px 14px;border-left:3px solid var(--glass-2)}
.sb-mini{font-size:.82rem;color:var(--ink-2);margin:.2em 0 .5em}
.wb-choices button[hidden]{display:none}

.sb-next-tip{margin:14px 0 0;font-size:.86rem;color:var(--navy);font-weight:600}

/* Flags on the drawings: numbered notes for the measure */
.sb-flags{margin:.5em 0 0;padding-left:1.7em;font-size:.8rem;line-height:1.45;color:var(--ink-2);text-align:left}
.sb-flags li{margin:.25em 0}
.sb-flags li::marker{color:#c4521a;font-weight:700}

/* Glass on three sides: which side the door steps are editing */
.sb-sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 14px;padding:4px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius)}
.sb-sides[hidden]{display:none}
.sb-sides button{background:transparent;border:1px solid transparent;border-radius:calc(var(--radius) - 2px);padding:8px 6px;text-align:center;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.sb-sides button .wb-lbl{display:block;font-weight:700;font-size:.86rem}
.sb-sides button .wb-desc{display:block;font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sides button[aria-selected="true"]{background:#fff;border-color:var(--navy);box-shadow:0 1px 3px rgba(15,61,110,.15)}
.sb-sides button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}