/**
 * The curtain builder.
 *
 * Desktop is a table: the rows have to be readable together, because the customer is
 * checking their list against a floor plan on the desk beside them. Below 900px the same
 * markup stacks into cards, because a five-column grid on a phone is unusable -- and the
 * per-cell labels that are hidden on desktop become the card's field labels there.
 */

.pcc-builder { --pcc-teal:#0f766e; --pcc-line:#e5e7eb; --pcc-ink:#111827; --pcc-soft:#6b7280;
               --pcc-amber:#a1560a; --pcc-bad:#b32d2e; }
.pcc-builder [x-cloak] { display:none !important; }

/* ── the building ─────────────────────────────────────────────────────────── */
.pcc-b-building { background:#f9fafb; border:1px solid var(--pcc-line); border-radius:12px;
                  padding:1.25rem; margin-bottom:1.5rem; }
.pcc-b-building h3 { margin:0 0 1rem; font-size:1.05rem; font-weight:700; color:var(--pcc-ink); }
.pcc-b-bfields { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.pcc-b-field label, .pcc-b-legend { display:block; font-weight:600; font-size:.9rem;
                                    color:var(--pcc-ink); margin-bottom:.35rem; }
.pcc-b-field input[type=text] { width:100%; padding:.6rem .75rem; border:1px solid #d1d5db;
                                border-radius:8px; font-size:1rem; background:#fff; }
.pcc-b-field input[type=text]:focus { outline:2px solid var(--pcc-teal); outline-offset:1px; border-color:var(--pcc-teal); }
.pcc-b-mount { display:flex; gap:1rem; flex-wrap:wrap; }
.pcc-b-mount label { font-weight:500; display:inline-flex; align-items:center; gap:.35rem; margin:0; }
.pcc-b-help { font-size:.78rem; color:var(--pcc-soft); margin:.35rem 0 0; line-height:1.45; }

/* The echo underneath an input. Amber whenever we had to guess the unit, because that is
   the only case where the reading can be wrong and the visitor is the only one who knows. */
.pcc-b-note { font-size:.78rem; color:var(--pcc-teal); margin:.3rem 0 0; min-height:1.1em;
              font-variant-numeric:tabular-nums; }
.pcc-b-note.is-guess { color:var(--pcc-amber); }
.pcc-b-note.is-bad   { color:var(--pcc-bad); }

/* ── rows ─────────────────────────────────────────────────────────────────── */
.pcc-b-head, .pcc-b-row { display:grid; grid-template-columns:13rem 1fr 11rem 7.5rem 6rem; gap:1rem; align-items:start; }
.pcc-b-head { padding:0 .9rem .5rem; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
              color:var(--pcc-soft); font-weight:700; }
.pcc-b-row { background:#fff; border:1px solid var(--pcc-line); border-radius:10px;
             padding:.9rem; margin-bottom:.6rem; }
.pcc-b-row.is-incomplete { border-left:3px solid #fcd34d; }
.pcc-b-mlabel { display:none; }

.pcc-b-cell select, .pcc-b-cell input[type=text] { width:100%; padding:.5rem .6rem;
             border:1px solid #d1d5db; border-radius:7px; font-size:.92rem; background:#fff; }
.pcc-b-cell input.is-bad { border-color:var(--pcc-bad); }
.pcc-b-cell select:focus, .pcc-b-cell input:focus { outline:2px solid var(--pcc-teal); outline-offset:1px; }

.pcc-b-legs { display:flex; gap:.6rem; flex-wrap:wrap; }
.pcc-b-leg { flex:1 1 6.5rem; min-width:6.5rem; }
.pcc-b-legname { display:block; font-size:.72rem; font-weight:700; color:var(--pcc-teal); margin-bottom:.2rem; }
.pcc-b-leg .pcc-b-note { font-size:.72rem; }

.pcc-chip { display:inline-block; font-size:.75rem; padding:.2rem .45rem; border-radius:5px;
            font-variant-numeric:tabular-nums; white-space:nowrap; }
.pcc-chip-inherit { background:#ccfbf1; color:#115e59; }
.pcc-b-hinput { max-width:8rem; }

.pcc-b-link { display:inline-block; background:none; border:0; padding:.2rem 0; margin-top:.25rem;
              color:var(--pcc-teal); font-size:.78rem; font-weight:600; cursor:pointer;
              text-decoration:underline; text-underline-offset:2px; }
.pcc-b-link:hover { color:#134e4a; }
.pcc-b-link:disabled { color:#9ca3af; cursor:not-allowed; text-decoration:none; }
.pcc-b-link:focus-visible { outline:2px solid var(--pcc-teal); outline-offset:2px; border-radius:3px; }
.pcc-b-remove { color:var(--pcc-bad); }
.pcc-b-remove:hover { color:#7f1d1d; }
.pcc-b-actions { display:flex; flex-direction:column; align-items:flex-start; }

.pcc-b-stepper { display:inline-flex; align-items:stretch; border:1px solid #d1d5db; border-radius:7px; overflow:hidden; }
.pcc-b-stepper button { width:2rem; border:0; background:#f3f4f6; color:var(--pcc-ink);
                        font-size:1.05rem; line-height:1; cursor:pointer; }
.pcc-b-stepper button:hover { background:#e5e7eb; }
.pcc-b-stepper button:focus-visible { outline:2px solid var(--pcc-teal); outline-offset:-2px; }
.pcc-b-stepper input { width:3rem; border:0; border-left:1px solid #d1d5db; border-right:1px solid #d1d5db;
                       text-align:center; font-size:.95rem; padding:.45rem 0;
                       font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.pcc-b-stepper input::-webkit-outer-spin-button,
.pcc-b-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.pcc-b-foot { display:flex; justify-content:space-between; align-items:center; gap:1rem;
              flex-wrap:wrap; padding:.9rem; background:#f9fafb; border:1px solid var(--pcc-line);
              border-radius:10px; margin-top:.2rem; }
.pcc-b-add { background:none; border:1px dashed var(--pcc-teal); color:var(--pcc-teal);
             padding:.55rem 1rem; border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer; }
.pcc-b-add:hover { background:#f0fdfa; }
.pcc-b-add:disabled { border-color:#d1d5db; color:#9ca3af; cursor:not-allowed; background:none; }
.pcc-b-add:focus-visible { outline:2px solid var(--pcc-teal); outline-offset:2px; }
.pcc-b-totals { margin:0; font-size:.9rem; color:var(--pcc-soft); font-variant-numeric:tabular-nums; }
.pcc-b-totals strong { color:var(--pcc-ink); }
.pcc-b-max, .pcc-b-pending { font-size:.85rem; color:var(--pcc-amber); margin:.75rem 0 0; }

/* ── phone: the same markup, stacked ──────────────────────────────────────── */
@media (max-width:900px) {
    .pcc-b-head { display:none; }
    .pcc-b-row  { grid-template-columns:1fr; gap:.85rem; padding:1rem; }
    /* The column headers are gone, so each cell carries its own label here. */
    .pcc-b-mlabel { display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
                    color:var(--pcc-soft); font-weight:700; margin-bottom:.3rem; }
    .pcc-b-leg { flex:1 1 100%; }
    .pcc-b-actions { flex-direction:row; gap:1.25rem; padding-top:.35rem;
                     border-top:1px solid #f3f4f6; }
    .pcc-b-hinput { max-width:100%; }
    .pcc-b-foot { flex-direction:column; align-items:stretch; text-align:center; }
    .pcc-b-add { width:100%; }
}

/* Reduced motion, without reaching for !important on a wildcard.
   x-collapse animates by writing transitionDuration as an INLINE style, and a stylesheet
   rule marked !important beats an inline one -- so the blanket version of this silently
   killed the fold as well as the decoration, and made every duration and easing change
   invisible. These name the decorative transitions instead, which is all that was ever
   meant by it. */
@media (prefers-reduced-motion: reduce) {
    .pcc-builder .pcc-b-add,
    .pcc-builder .pcc-b-link,
    .pcc-builder .pcc-b-stepper button { transition: none; }
}

/* ── the shape drawings, in the row ───────────────────────────────────────────
   These replaced a <select> reading "Straight / L-shape / U-shape". The diagrams
   existed from phase one and were only ever shown in the Lab, so the one thing
   built to explain what an L-shape IS never reached the person choosing one.

   Real radio inputs underneath: keyboard-reachable and announced as a group
   before any script runs. The input is hidden and the label carries the state,
   so focus has to be drawn on the label instead — see :focus-visible below. */
.pcc-b-shapes { display:flex; gap:.3rem; }
.pcc-b-shapeopt { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
                  gap:.15rem; padding:.4rem .2rem; cursor:pointer; border-radius:7px;
                  border:1.5px solid var(--pcc-line); background:#fff;
                  transition:border-color .12s, background .12s; }
.pcc-b-shapeopt:hover { border-color:#99f6e4; background:#f0fdfa; }
.pcc-b-shapeopt.is-on { border-color:var(--pcc-teal); background:#f0fdfa; }
.pcc-b-shapeopt input { position:absolute; opacity:0; width:0; height:0; }
.pcc-b-shapeopt:focus-within { outline:2px solid var(--pcc-teal); outline-offset:1px; }
.pcc-b-shapeart { display:block; width:100%; }
.pcc-b-glyph { display:block; width:100%; height:auto; max-height:2.1rem; }
/* The bed is context, the track is the subject — so the track keeps its weight and
   the bed drops back until the option is the chosen one. */
.pcc-b-shapeopt .pcc-shape-bed { fill:#f1f5f9; stroke:#cbd5e1; stroke-width:1.5; }
.pcc-b-shapeopt .pcc-shape-track { fill:none; stroke:#94a3b8; stroke-width:4;
                                   stroke-linecap:round; stroke-linejoin:round; }
.pcc-b-shapeopt.is-on .pcc-shape-track { stroke:var(--pcc-teal); }
.pcc-b-shapeopt .pcc-shape-letter { font:700 11px system-ui,sans-serif; fill:#94a3b8; text-anchor:middle; }
.pcc-b-shapeopt.is-on .pcc-shape-letter { fill:var(--pcc-teal); }

/* A statement of fact about the product, not a warning and not a prompt for a
   decision -- so it reads as small print under the choice rather than competing
   with it. */
.pcc-b-cornerbox { margin-top:.45rem; }
.pcc-b-cornernote { margin:0; font-size:.72rem; line-height:1.5; color:#64748b; }
/* A link, not a button: it opens a question, it does not perform an action, and a
   second button beside Duplicate would compete with it. */
.pcc-b-radiustoggle { margin-top:.3rem; padding:0; border:0; background:none;
                      font:inherit; font-size:.72rem; color:var(--pcc-teal);
                      text-decoration:underline; cursor:pointer; }
.pcc-b-radiustoggle:hover { text-decoration:none; }
.pcc-b-radiustoggle:focus-visible { outline:2px solid var(--pcc-teal); outline-offset:2px; }
.pcc-b-radiusask { display:block; margin-top:.35rem; }
.pcc-b-radiusask input { width:100%; padding:.32rem .5rem; font-size:.78rem;
                         border:1.5px solid var(--pcc-line); border-radius:6px; }
.pcc-b-radiusask input:focus { outline:2px solid var(--pcc-teal); outline-offset:1px;
                               border-color:var(--pcc-teal); }

.pcc-b-shapename { font-size:.68rem; font-weight:700; color:var(--pcc-soft);
                   text-align:center; line-height:1.2; }
.pcc-b-shapeopt.is-on .pcc-b-shapename { color:var(--pcc-teal); }

/* On a phone the row is a card and there is width to spare, so the drawings get it. */
@media (max-width:900px) {
    .pcc-b-shapeopt { padding:.7rem .4rem; gap:.35rem; }
    .pcc-b-glyph { max-height:3.2rem; }
    .pcc-b-shapename { font-size:.78rem; }
}