/* Box Design workspace — visual styles only. Logic lives in box-design-workspace.js.
 * The workspace responds to CSS viewport/container dimensions, not physical monitor resolution.
 */
.box-design-page{max-width:var(--page-max)}
.box-design-intro{display:flex;align-items:end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.box-design-intro>div{min-width:0}.box-design-intro .eyebrow{color:var(--design-color)}
.box-design-intro .page-title{margin-bottom:10px}.box-design-intro .page-lede{margin-bottom:0;max-width:clamp(900px,48vw,1250px)}
.box-design-reset{flex:0 0 auto}

.box-design-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1);margin:0 0 var(--space-2)}
.box-design-step{border:1px solid var(--line);border-radius:10px;padding:clamp(8px,.45vw,12px) clamp(10px,.6vw,16px);background:#fff;display:flex;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--font-base);line-height:1.35;min-width:0}
.box-design-step b{display:grid;place-items:center;width:clamp(22px,1.35vw,30px);height:clamp(22px,1.35vw,30px);border-radius:50%;font-size:var(--font-md);font-weight:var(--weight-bold);flex:0 0 auto}
.box-design-step:nth-child(1) b{color:#087f94;background:#eafbfe}.box-design-step:nth-child(1).is-active,.box-design-step:nth-child(1).is-complete{border-color:color-mix(in srgb,var(--drivers-color) 58%,#dce3ec)}.box-design-step:nth-child(1).is-complete b{background:var(--drivers-color);color:#fff}
.box-design-step:nth-child(2) b{color:var(--design-color);background:#eef2ff}.box-design-step:nth-child(2).is-active,.box-design-step:nth-child(2).is-complete{border-color:color-mix(in srgb,var(--design-color) 50%,#dce3ec)}.box-design-step:nth-child(2).is-complete b{background:var(--design-color);color:#fff}
.box-design-step:nth-child(3) b{color:var(--learn-color);background:#f5efff}.box-design-step:nth-child(3).is-active,.box-design-step:nth-child(3).is-complete{border-color:color-mix(in srgb,var(--learn-color) 44%,#dce3ec)}.box-design-step:nth-child(3).is-complete b{background:var(--learn-color);color:#fff}
.box-design-step:nth-child(4) b{color:var(--projects-color);background:#fff0f7}.box-design-step:nth-child(4).is-active,.box-design-step:nth-child(4).is-complete{border-color:color-mix(in srgb,var(--projects-color) 44%,#dce3ec)}.box-design-step:nth-child(4).is-complete b{background:var(--projects-color);color:#fff}

/* Filters grow least, Preview grows most. Fluid column limits preserve the approved 1080p density. */
.box-design-workspace{
  display:grid;
  grid-template-columns:
    clamp(220px,12.5vw,320px)
    minmax(clamp(320px,18vw,480px),1fr)
    minmax(clamp(320px,18vw,480px),1fr)
    minmax(clamp(560px,34vw,1080px),2.2fr);
  gap:var(--panel-gap);
  align-items:start;
}
.box-driver-zone{display:contents}

.box-filter-rail{grid-column:1;position:sticky;top:calc(var(--header-height) + 14px);border:1px solid color-mix(in srgb,var(--drivers-color) 30%,var(--line));border-top:3px solid var(--drivers-color);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--drivers-color) 5%,#fff),#fff 150px);padding:clamp(13px,.75vw,20px);max-height:calc(100dvh - var(--header-height) - 28px);overflow:auto;scrollbar-gutter:stable}
.box-filter-rail__title{margin:0 0 7px;color:var(--ink);font-size:clamp(18px,calc(16px + .104vw),21px);line-height:1.2}
.box-filter-rail__subtitle{margin:0 0 var(--space-2);color:var(--muted);font-size:var(--font-md);line-height:1.45}
.box-filter-rail .library-search{margin-bottom:var(--space-3)}.box-filter-rail .library-filter-toggle{display:none}.box-filter-rail .library-filter-panel{padding:0;border:0;background:transparent}
.box-filter-rail .library-facet{padding-bottom:var(--space-2);margin-bottom:var(--space-2)}.box-filter-rail .library-facet__options{max-height:clamp(210px,18dvh,300px)}
.box-filter-rail .library-filter-actions{position:sticky;bottom:-13px;background:linear-gradient(180deg,rgba(255,255,255,.84),#fff 30%);padding:var(--space-3) 0 0;margin-top:var(--space-2)}.box-filter-rail .library-filter-actions .library-filter-done{display:none}

.box-driver-column{grid-column:2;container-type:inline-size;container-name:box-drivers;border:1px solid color-mix(in srgb,var(--drivers-color) 28%,var(--line));border-top:3px solid var(--drivers-color);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--drivers-color) 4%,#fff),#fff 130px);padding:clamp(12px,.72vw,20px);min-width:0;min-height:clamp(620px,58dvh,980px)}
.box-enclosure-column{grid-column:3;border:1px solid color-mix(in srgb,var(--design-color) 24%,var(--line));border-top:3px solid var(--design-color);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--design-color) 4%,#fff),#fff 150px);padding:clamp(12px,.72vw,20px);min-width:0;min-height:clamp(620px,58dvh,980px)}
.box-column-head{margin-bottom:var(--space-2)}.box-column-head h2{margin:0;color:var(--ink);font-size:var(--font-xl);line-height:1.2}.box-column-head p{margin:4px 0 0;color:var(--muted);font-size:var(--font-md);line-height:1.45}
.box-driver-toolbar{display:flex;align-items:center;gap:var(--space-1);margin:var(--space-2) 0}.box-driver-toolbar [data-box-driver-count]{font-size:var(--font-md);color:var(--muted);white-space:nowrap;margin:0}.box-driver-toolbar .library-sort{font-size:var(--font-md);margin-left:auto;white-space:nowrap}.box-driver-toolbar select{min-width:clamp(108px,7vw,160px);min-height:calc(var(--control-height) - 6px);padding:6px 7px;font-size:var(--font-base)}
.box-driver-column .library-active-filters{min-height:0;margin-bottom:var(--space-1)}
.box-driver-results-note{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--font-sm);line-height:1.4}
.box-driver-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1);align-items:stretch}
.box-driver-card{appearance:none;text-align:left;border:1px solid #dbe9e7;border-radius:10px;background:rgba(255,255,255,.9);padding:clamp(9px,.5vw,14px);cursor:pointer;transition:.15s ease;min-width:0;min-height:clamp(108px,9dvh,154px);color:var(--text)}
.box-driver-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--drivers-color) 70%,#9eb1bd);box-shadow:0 7px 18px color-mix(in srgb,var(--drivers-color) 10%,transparent)}
.box-driver-card.is-selected{border-color:var(--drivers-color);background:color-mix(in srgb,var(--drivers-color) 5%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--drivers-color) 16%,transparent)}
.box-driver-card small{display:block;color:var(--muted);font-size:var(--font-sm);line-height:1.35}
.box-driver-card strong{display:block;color:var(--ink);font-size:clamp(14px,calc(12px + .104vw),17px);line-height:1.22;margin:3px 0 6px;overflow-wrap:anywhere}
.box-driver-card__specs{display:flex;gap:5px 7px;flex-wrap:wrap;color:#667085;font-size:var(--font-sm);line-height:1.35}.box-driver-card__specs b{color:#344054}

/* Driver cards stay two-up on desktop so Driver and Enclosure carry equal visual weight. */

.box-family-groups{display:grid;gap:var(--space-2);margin-top:var(--space-2)}.box-family-group{border-top:3px solid var(--box-accent);padding-top:var(--space-1)}
.box-family-group__head{margin-bottom:var(--space-1)}.box-family-group__head h3{margin:0;color:var(--ink);font-size:var(--font-xl);line-height:1.2}.box-family-group__head p{margin:2px 0 0;color:var(--muted);font-size:var(--font-md);line-height:1.4}
.box-family-list{display:grid;grid-template-columns:1fr;gap:var(--space-1)}.box-family-card{appearance:none;text-align:left;border:1px solid #e2e7ef;border-radius:9px;background:#fff;padding:clamp(9px,.5vw,14px);cursor:pointer;width:100%;min-height:clamp(52px,4.4dvh,70px);color:var(--text);transition:.15s ease}
.box-family-card:hover{border-color:var(--box-accent);background:color-mix(in srgb,var(--box-accent) 3%,#fff)}.box-family-card.is-selected{border-color:var(--box-accent);background:color-mix(in srgb,var(--box-accent) 4%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--box-accent) 14%,transparent)}
.box-family-card strong{display:block;color:var(--ink);font-size:var(--font-base);line-height:1.25}.box-family-card span{display:block;color:var(--muted);font-size:var(--font-sm);line-height:1.4;margin-top:3px}

.box-preview{grid-column:4;position:sticky;top:calc(var(--header-height) + 14px);border:1px solid color-mix(in srgb,var(--projects-color) 25%,var(--line));border-top:3px solid var(--projects-color);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--projects-color) 4%,#fff),#fff 175px);overflow:hidden;min-width:0;min-height:clamp(620px,58dvh,980px)}
.box-preview__head{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center;padding:clamp(13px,.8vw,22px);border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--projects-color) 5%,#fff),transparent)}
.box-preview__head small{display:block;color:var(--projects-color);font-size:var(--font-sm);font-weight:var(--weight-extrabold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}.box-preview__head h2{margin:0;color:var(--ink);font-size:var(--font-panel);line-height:1.2}
.box-preview__state{border-radius:999px;padding:6px 9px;background:#f2f4f7;color:#667085;font-size:var(--font-sm);font-weight:var(--weight-bold);white-space:nowrap}.box-preview__state.is-ready{background:color-mix(in srgb,var(--projects-color) 10%,#fff);color:#a7175a}
.box-preview__canvas{margin:var(--space-2);border:1px solid #e5e9f2;border-radius:10px;background:linear-gradient(180deg,#fbfcff,#f7f9fc);min-height:clamp(320px,38dvh,760px);display:grid;place-items:center;padding:clamp(18px,1vw,30px);position:relative;overflow:hidden}
.box-preview__canvas:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#eef1f6 1px,transparent 1px),linear-gradient(90deg,#eef1f6 1px,transparent 1px);background-size:clamp(22px,1.35vw,34px) clamp(22px,1.35vw,34px);opacity:.45}.box-preview__canvas-inner{position:relative;z-index:1;width:100%;text-align:center}.box-preview__canvas svg{width:100%;max-width:clamp(380px,25vw,620px);height:clamp(220px,18dvh,360px)}.box-preview__canvas h3{margin:8px 0 3px;color:var(--ink);font-size:var(--font-xl);line-height:1.25}.box-preview__canvas p{margin:0 auto;color:var(--muted);font-size:var(--font-md);line-height:1.45;max-width:clamp(360px,24vw,620px)}
.box-preview__summary{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);padding:0 var(--space-2) var(--space-2)}.box-preview__summary div{border:1px solid #edf0f4;border-radius:8px;padding:clamp(9px,.55vw,15px);background:#fff;min-width:0}.box-preview__summary small{display:block;color:var(--muted);font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}.box-preview__summary strong{display:block;color:var(--ink);font-size:var(--font-base);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box-preview__future{border-top:1px solid var(--line);padding:var(--space-2)}.box-preview__future>small{display:block;color:var(--projects-color);font-size:var(--font-sm);text-transform:uppercase;letter-spacing:.09em;font-weight:var(--weight-extrabold);margin-bottom:var(--space-1)}.box-preview__slots{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.box-preview__slot{border:1px solid #edf0f4;border-radius:8px;padding:clamp(10px,.6vw,16px);background:#fafbfc;min-height:clamp(62px,5dvh,82px)}.box-preview__slot b{display:block;color:var(--ink);font-size:var(--font-base);line-height:1.3}.box-preview__slot span{display:block;color:var(--muted);font-size:var(--font-sm);line-height:1.4;margin-top:2px}.box-preview__note{margin:var(--space-2) 0 0;color:#667085;font-size:var(--font-sm);line-height:1.45}
.box-design-empty{border:1px dashed #ccd3df;border-radius:9px;padding:var(--space-3);text-align:center;color:var(--muted);font-size:var(--font-base);background:#fafbfc}

/* Breakpoints only change structure when columns can no longer remain comfortable. */
@media(max-width:1500px){
  .box-design-workspace{grid-template-columns:clamp(220px,16vw,280px) minmax(320px,1fr) minmax(320px,1fr)}
  .box-preview{grid-column:2/4;position:static;min-height:0}
}
@media(max-width:980px){
  .box-design-workspace{grid-template-columns:1fr 1fr}
  .box-filter-rail,.box-driver-column,.box-enclosure-column,.box-preview{position:static;min-height:0}
  .box-filter-rail{grid-column:1;max-height:none;overflow:visible}.box-driver-column{grid-column:2}.box-enclosure-column{grid-column:1}.box-preview{grid-column:2}
  .box-filter-rail .library-filter-toggle{display:flex;width:100%;justify-content:space-between}.box-filter-rail .library-filter-panel[hidden]{display:none}.box-filter-rail .library-filter-actions .library-filter-done{display:inline-flex}
}
@media(max-width:720px){
  .box-design-intro{display:block}.box-design-reset{margin-top:10px}
  .box-design-steps{grid-template-columns:1fr 1fr}
  .box-design-workspace{grid-template-columns:1fr}.box-filter-rail,.box-driver-column,.box-enclosure-column,.box-preview{grid-column:1}
  .box-driver-grid{grid-template-columns:1fr}
  .box-preview__summary,.box-preview__slots{grid-template-columns:1fr}
}
@media(max-width:430px){.box-design-steps{grid-template-columns:1fr}}