/* GEN2 Planner styles */

:root {
  /* JERRARI brand palette */
  --bg: #2c2d31;
  --panel: #3a3b3f;
  --panel-2: #2c2d31;
  --line: #4a4b50;
  --text: #ececee;
  --muted: #a6a8ad;
  --accent: #ff8a40;       /* JERRARI orange */
  --accent-dim: #c96a2e;
  --on-accent: #1d1e20;
  --blue: #2f9be0;         /* JERRARI blue — 2nd part-coding color */
  --blue-dim: #1f6ea6;
  --good: #4cc38a;
  --bad: #e5534b;
  --wood: #6b5138;
  --radius: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* honor the hidden attribute over author display rules (.ut-shelves/.ut-mode/.ut-edit-btn etc.) */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.45;
}

a { color: var(--accent); }

/* ---------- chrome ---------- */

/* Parallax hero: a short window onto an oversized background photo that pans
   slower than the page as you scroll (see js/hero.js), revealing more of it. */
.hero {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../img/page/GEN2-Background-A.jpg") center top / cover no-repeat;
  will-change: background-position;
}
.hero-shade {                  /* darken top + fade into the page for legibility */
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20,21,23,0.55) 0%, rgba(20,21,23,0.10) 42%,
    rgba(44,45,49,0.85) 86%, var(--bg) 100%);
  pointer-events: none;
}
.hero-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
}
.hero .brand-mark,
.hero .brand-sub,
.hero .brand-link { text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.hero .brand-sub,
.hero .brand-link { color: #d7d8db; }
.hero .brand-link:hover { color: var(--accent); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { height: 44px; width: auto; flex-shrink: 0; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); }
.brand-mark {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.brand-sub {
  margin-left: 8px;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--muted);
}
.brand-link { font-size: 0.85rem; text-decoration: none; color: var(--muted); }
.brand-link:hover { color: var(--accent); }

main { max-width: 1180px; margin: 0 auto; padding: 12px 28px 60px; }

.footer {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------- steps ---------- */

.step { margin-top: 36px; }
.step h2 { font-size: 1.15rem; font-weight: 600; }
.step-pick { display: none; }   /* collapsed-step summary — shown on mobile only */
.step-num {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 800;
}
.hint { color: var(--muted); font-size: 0.9rem; margin-top: -4px; }

/* "Unsure which length to choose?" — a compact expandable helper in Step 3 */
.length-help { margin: 8px 0 16px; max-width: 780px; }
.length-help > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.9rem; font-weight: 600; color: var(--accent); padding: 4px 0;
}
.length-help > summary::-webkit-details-marker { display: none; }
.length-help > summary::before {
  content: "\25B8"; color: var(--accent); font-size: 0.7rem; transition: transform 0.15s ease;
}
.length-help[open] > summary::before { transform: rotate(90deg); }
.length-help > summary:hover { color: var(--text); }
.length-help-body {
  margin-top: 8px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); font-size: 0.86rem; line-height: 1.55; color: var(--muted);
}
.length-help-body p { margin: 0 0 8px; }
.length-help-body p:last-child { margin-bottom: 0; }
.length-help-body b { color: var(--text); }
.length-help-body ul { margin: 8px 0; padding-left: 18px; }
.length-help-body li { margin-bottom: 6px; }

/* ---------- cards ---------- */

.card-row { display: flex; flex-wrap: wrap; gap: 14px; }

.card {
  flex: 1 1 220px;
  max-width: 320px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.card.active { border-color: var(--accent); background: var(--panel-2); }
.card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}
.card.disabled:hover { border-color: var(--line); transform: none; }
.badge.nofit { background: var(--bad); color: var(--text); }
.card.slim { flex: 1 1 160px; max-width: 220px; }
.card-title { font-size: 1.2rem; font-weight: 700; }
.card-title .mm { font-size: 0.75rem; color: var(--muted); margin-left: 2px; }
.card-blurb { font-size: 0.83rem; color: var(--muted); margin-top: 6px; }
/* Install-location cards with a hero photo: fades from the dark card (left) into
   the image (right), like the faceplate cards. Text gets a shadow + brighter blurb
   so it stays legible where it overlaps the photo. */
.card.has-img { background-size: cover; background-position: right center; background-repeat: no-repeat; }
.card.has-img .card-title { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.card.has-img .card-blurb { color: var(--text); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }
.badge {
  margin-left: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 99px;
  padding: 2px 8px;
  vertical-align: middle;
}

.len-card .len-num { color: var(--len-color, var(--text)); }
.len-card.active { border-color: var(--len-color, var(--accent)); }

.card-icon svg { width: 96px; height: 64px; }
.i-wood { fill: var(--wood); }
.i-drawer { fill: #46474b; }
.i-handle { fill: var(--text); opacity: 0.8; }
.i-accent { fill: var(--accent); }

/* ---------- space & printer ---------- */

.space-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.space-box {
  flex: 1 1 320px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.space-box h3 { margin: 2px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.space-box.inline { margin-bottom: 16px; flex: none; max-width: 520px; }
details.space-box > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
details.space-box > summary::-webkit-details-marker { display: none; }
details.space-box > summary::before {
  content: "\25B8";
  font-size: 0.7rem;
  color: var(--accent);
  transition: transform 0.15s ease;
  align-self: center;
}
details.space-box[open] > summary::before { transform: rotate(90deg); }
.sb-sum-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sb-sum-status { font-size: 0.8rem; color: var(--accent); }
details.space-box > summary:hover .sb-sum-title { color: var(--text); }
details.space-box[open] .sb-sum-status { display: none; }

/* ---------- info tooltip ( i ) ---------- */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  font: italic 700 11px/1 Georgia, "Times New Roman", serif;
  cursor: help;
  vertical-align: middle;
  flex: none;
}
.info-tip::before { content: "i"; }
.info-tip:hover, .info-tip:focus {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  background: #1d1e20;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: 400 0.8rem/1.4 system-ui, sans-serif;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 40;
  pointer-events: none;
}
.info-tip:hover::after, .info-tip:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Disabled length cards & size tiles: reveal the "won't fit" reason on hover
   OR focus — so a tap on touch reveals it too (native title= is hover-only).
   Reuses the info-tip tooltip look. Set via data-tip in app.js. */
.card.disabled[data-tip], .palette-item.disabled[data-tip], .seg button.disabled[data-tip] { position: relative; }
.card.disabled[data-tip]::after, .palette-item.disabled[data-tip]::after, .seg button.disabled[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 230px;
  background: #1d1e20;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: 400 0.8rem/1.4 system-ui, sans-serif;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 40;
  pointer-events: none;
}
.card.disabled[data-tip]:hover::after, .card.disabled[data-tip]:focus::after,
.palette-item.disabled[data-tip]:hover::after, .palette-item.disabled[data-tip]:focus::after,
.seg button.disabled[data-tip]:hover::after, .seg button.disabled[data-tip]:focus::after {
  opacity: 1;
  visibility: visible;
}
.card.disabled:focus-visible, .palette-item.disabled:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
}
.field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.field-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); }
.field-row input, .field-row select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.9rem;
  min-width: 130px;
}
.field-row input:focus, .field-row select:focus { outline: none; border-color: var(--accent); }
.printer-pick { display: flex; align-items: center; gap: 9px; }
.printer-icon { flex: none; width: 26px; height: 26px; color: var(--muted); display: inline-flex; }
.printer-icon svg { width: 100%; height: 100%; }
.printer-icon .pi-print { fill: var(--accent); }
#space-readout, #printer-readout { color: var(--accent); min-height: 1.2em; }

.space-fields { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
#space-graphic { flex: 0 0 auto; }
#space-graphic .sg { width: 240px; height: auto; display: block; }
#space-graphic .sg.ghost { opacity: 0.45; }
.sg-area { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sg-cell { fill: rgba(255, 138, 64, 0.22); stroke: var(--accent-dim); stroke-width: 0.75; }
.sg-dim { stroke: var(--muted); stroke-width: 1; }
.sg-label { fill: var(--muted); font-size: 10px; }
.sg-caption { margin: 2px 0 0; font-size: 0.72rem; color: var(--accent); text-align: center; max-width: 240px; }

/* ---------- explainer ---------- */

.explainer {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  max-width: 760px;
}
.explainer-tip { margin: 0; font-size: 0.92rem; color: var(--text); }
.explainer-tip:empty { display: none; }
.explainer-primer { margin-top: 10px; }
.explainer-tip:empty + .explainer-primer { margin-top: 0; }
.explainer-primer summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.explainer-primer summary::-webkit-details-marker { display: none; }
.explainer-primer summary::before {
  content: "\25B8";
  font-size: 0.7rem;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.explainer-primer[open] summary::before { transform: rotate(90deg); }
.explainer-primer summary:hover { color: var(--text); }
.explainer-body { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.explainer-art { flex: 0 0 130px; height: 96px; }
.explainer ol { margin: 0; padding-left: 18px; font-size: 0.86rem; color: var(--muted); }
.explainer ol li { margin-bottom: 6px; }
.explainer ol b { color: var(--text); }
.e-mount { fill: var(--accent); }
.e-case { fill: #46474b; }
.e-case-in { fill: #2c2d31; }
.e-drawer { fill: #55565b; stroke: #6a6b70; stroke-width: 1.5; }
.e-rail { fill: #6a6b70; }
.e-arrow { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; }

/* ---------- layout designer ---------- */

.layout-wrap { display: flex; gap: 20px; align-items: flex-start; }

.palette {
  flex: 0 0 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.palette h3 { margin: 4px 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.seg button {
  flex: 1; padding: 7px 6px;
  background: transparent; border: 0;
  color: var(--muted); font-weight: 600; cursor: pointer;
  text-align: left;
  font-size: 0.83rem;
}
.seg button.active { background: var(--accent); color: var(--on-accent); }
.seg.vertical { flex-direction: column; }
.seg.vertical button { border-bottom: 1px solid var(--line); padding: 8px 10px; }
.seg.vertical button:last-child { border-bottom: 0; }
.soon {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 99px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.seg button.active .soon { background: rgba(0,0,0,0.15); color: inherit; border-color: transparent; }

/* Faceplate style — grouped selectable cards: Core System vs Club Expansions.
   Orange stays the selected state; blue is the Club identity (never orange). */
.fp-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fp-group-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 6px; }
.fp-group-club .fp-group-title { color: var(--blue); }
.fp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-card {
  position: relative; flex: 1 1 140px; min-width: 128px; max-width: 230px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--panel-2); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 12px 11px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.fp-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.fp-card.active { border-color: var(--accent); background: rgba(255, 138, 64, 0.09); }
.fp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fp-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.fp-sub { font-size: 0.72rem; color: var(--muted); }
/* Club expansion cards: a thin blue top accent + sparkle mark them as add-ons. */
.fp-card.club { border-top-color: var(--blue); }
.fp-card.club:hover { border-color: var(--blue-dim); border-top-color: var(--blue); }
.fp-card.club.active { border-color: var(--accent); border-top-color: var(--accent); }
.fp-spark { position: absolute; top: 8px; right: 9px; color: var(--blue); font-size: 0.85rem; line-height: 1; }
.club-note {
  margin: 12px 0 0; padding: 9px 12px; font-size: 0.78rem; line-height: 1.5;
  background: rgba(47, 155, 224, 0.08); border: 1px solid rgba(47, 155, 224, 0.4);
  border-radius: 8px; color: var(--text);
}
.club-note strong { color: var(--blue); }
.club-note a { color: var(--blue); font-weight: 600; white-space: nowrap; }
/* Faceplate cards WITH a hero image: crop is painted via inline background (fades
   from the dark card on the left into the photo on the right). Shadow keeps text
   legible where it overlaps the photo. */
.fp-card.has-img { background-size: cover; background-position: right center; background-repeat: no-repeat; }
.fp-card.has-img .fp-name { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); }
.fp-card.has-img .fp-sub { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
/* Reuse the fill-tile .tip-card hover popover for faceplate cards (full image + info) */
.fp-card .tip-card { left: 0; }
.fp-row .fp-card:last-child:nth-child(n+2) .tip-card { left: auto; right: 0; }
.fp-card:hover .tip-card, .fp-card:focus-within .tip-card { opacity: 1; visibility: visible; transform: translateY(0); }

.style-pick { margin-bottom: 12px; }
.style-pick label { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }

/* Faceplate/door style picker: a highlighted card atop the parts list, since
   the choice materially changes which parts get billed. */
.bom-style-row {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start;
  margin: 6px 0 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.bom-style-row .style-pick { min-width: 280px; margin-bottom: 4px; }
.bom-style-row .style-pick > label { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.bom-style-row .style-help { font-size: 0.8rem; color: var(--muted); margin: 0 0 8px; max-width: 320px; }
.bom-style-row .seg { margin-bottom: 0; background: var(--panel-2); }
.bom-style-row .seg button { text-align: center; padding: 8px 12px; }
/* The label-generator handoff is the highest-value click for an EdgeLabel /
   Classic Pro user (it carries their typed drawer labels, pre-filled) — so
   it's the one SOLID accent button in this card; the ghost video chip below
   reads as its secondary. Pill radius matches the .video-chip family. */
.label-gen {
  display: inline-block; margin-top: 10px;
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
  color: #1d1e20; background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px;
}
.label-gen:hover { background: #ffa161; border-color: #ffa161; }
.label-gen .lg-count { font-weight: 600; opacity: 0.75; }
.label-gen .lg-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }

#grid-h-auto { font-size: 0.72rem; margin: -2px 0 8px; }

.inspector {
  margin-top: 14px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 138, 64, 0.06);
}
.inspector h3 { margin: 0 0 6px; }
.insp-title { font-weight: 700; margin-bottom: 8px; }
.insp-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.inspector .btn { width: 100%; margin-top: 8px; }
.inspector .hint { font-size: 0.72rem; }

.palette-row { display: flex; gap: 6px; margin-bottom: 6px; }
.palette-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--muted);
}
.palette-item:hover { border-color: var(--accent-dim); }
.palette-item.active { border-color: var(--accent); color: var(--text); }
.palette-item.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-style: dashed;
}
/* A size that doesn't exist in the lineup — holds the column's width but
   shows nothing, leaving a clean gap in the grid. */
.palette-blank { flex: 1; }
.palette-item.disabled .palette-box {
  background: repeating-linear-gradient(45deg, #46474b, #46474b 3px, #323337 3px, #323337 6px);
}
.palette-box {
  width: calc(var(--pw) * 10px);
  height: calc(var(--ph) * 10px);
  min-height: 5px;
  background: #46474b;
  border: 1px solid #5b5c61;
  border-radius: 2px;
}
/* The size-footprint box depicts a case of the CHOSEN length, so its active
   tint wears the length's lineup color (set as --len-color from refresh());
   the tile's selected border stays accent orange — that's selection chrome. */
.palette-item.active .palette-box { background: var(--len-color-dim, var(--accent-dim)); border-color: var(--len-color, var(--accent)); }
.palette-label { font-size: 0.72rem; }

.fill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.fill-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  aspect-ratio: 1 / 0.92;
  justify-content: center;
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 8px 4px;
  text-align: center;
}
.fill-tile:hover { border-color: var(--accent-dim); }
.fill-tile.active { border-color: var(--accent); color: var(--text); background: rgba(255, 138, 64, 0.07); }
.fill-icon svg { width: 56px; height: 40px; display: block; }
.fi-case { fill: #46474b; }
.fi-face { fill: #55565b; }
.fi-dark { fill: #26272a; }
.fi-lip { fill: #6a6b70; }
.fi-wall { fill: #45464b; }
.fi-rail { fill: #6a6b70; }
.fi-line { stroke: #5e5f64; stroke-width: 2; }
.fi-item { fill: #5e5f64; }
.fi-door { fill: #55565b; stroke: #6a6b70; stroke-width: 1; }
.fi-knob { fill: var(--text); opacity: 0.8; }
/* Cabinet hinges wear the chosen length's lineup color even when the tile
   isn't selected (matches the product-color board's cabinet hinges); falls
   back to dim accent before a length is picked. */
.fi-hinge { fill: var(--len-color, var(--accent-dim)); }
/* Other active fill-icon details (decor rails, classic scoop) depict product
   parts too, so they take the lineup color while their tile is selected. */
.fill-tile.active .fi-rail, .fill-tile.active .fi-lip { fill: var(--len-color, var(--accent)); }

/* Parts-list thumbnail magnifier: one shared fixed-position card (it must
   escape .bom-scroll's overflow clipping, so it can't live inside the table).
   Image only — the row already carries the name/notes. */
.thumb-zoom {
  position: fixed;
  z-index: 90;
  pointer-events: none;   /* never traps the cursor or blocks clicks */
  background: #1d1e20;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.thumb-zoom img {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 6px;
  background: #2c2d31;
}
.thumb-zoom .tz-name {
  display: block;
  width: 220px;
  margin-top: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}

/* Instructional-video modal: a native <dialog> (backdrop, ESC, focus handling
   for free). The 16:9 frame holds the lazy YouTube embed. */
.video-modal {
  background: #1d1e20;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  width: min(760px, 92vw);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
.video-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.vm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vm-title { flex: 1; font-weight: 600; font-size: 0.95rem; }
.vm-close {
  background: none; border: 0; color: var(--muted); font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px;
}
.vm-close:hover { color: var(--text); background: #2c2d31; }
.vm-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.vm-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vm-yt {
  display: inline-block; margin-top: 10px;
  font-size: 0.78rem; color: var(--muted); text-decoration: none;
}
.vm-yt:hover { color: var(--accent); }

/* "▶ Watch" chips — rendered wherever a video's context matches (selected-unit
   toolbar, parts-list section titles). */
.video-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  color: var(--accent);
  font: inherit; font-size: 0.74rem; font-weight: 600;
  text-transform: none; letter-spacing: normal;
  padding: 3px 10px;
  cursor: pointer;
  vertical-align: middle;
}
.video-chip:hover { border-color: var(--accent); background: rgba(255, 138, 64, 0.08); }
/* red play glyph = instant "video" association; chip chrome stays accent */
.video-chip .vc-play { color: #ff4444; font-size: 0.85em; }
.ut-video { margin-top: 6px; }
.fp-video { margin-top: 8px; }
#bom h3 .video-chip { margin-left: 10px; }

/* Rich hover card on the fill tiles (image + caption) */
.tip-card {
  position: absolute;
  bottom: calc(100% + 8px);
  width: 184px;
  max-width: calc(100vw - 24px);
  background: #1d1e20;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.13s ease, transform 0.13s ease;
  z-index: 50;
  pointer-events: none;
}
/* Left-column tiles anchor their card to the left edge, right-column to the
   right edge, so a wide card never spills off-screen in the 2-col grid. */
.fill-tile:nth-child(odd) .tip-card { left: 0; }
.fill-tile:nth-child(even) .tip-card { right: 0; }
.tip-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #2c2d31;
  margin-bottom: 7px;
}
.tip-card-text {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
}
.tip-card-text b { display: block; color: var(--text); margin-bottom: 2px; font-size: 0.82rem; }
.fill-tile:hover .tip-card,
.fill-tile:focus-within .tip-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fill-blurb {
  font-size: 0.76rem;
  color: var(--muted);
  margin: -6px 0 14px;
  min-height: 2.2em;
}
.palette-units { font-size: 0.72rem; color: var(--muted); margin: -6px 0 8px; }
.palette-inside { font-size: 0.74rem; color: var(--accent); margin: 6px 0 0; font-weight: 600; }
.palette-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--muted);
  margin: 4px 0 0;
}
.legend-swatch {
  display: inline-block;
  width: 16px; height: 12px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #46474b, #46474b 3px, #323337 3px, #323337 6px);
  opacity: 0.6;
}

.palette-tools { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.palette-tools .btn { width: 100%; margin-top: 8px; font-size: 0.78rem; padding: 7px 10px; }
/* Load example + Clear share one row to cut vertical clutter. */
.tool-row { display: flex; gap: 6px; }
.tool-row .btn { flex: 1; }

/* Save & share — tucked into a collapsible so the default view stays clean. */
details.builds { margin-top: 12px; }
details.builds > summary {
  cursor: pointer; list-style: none;
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 7px; padding: 4px 0;
}
details.builds > summary::-webkit-details-marker { display: none; }
details.builds > summary::before {
  content: "\25B8"; color: var(--accent); font-size: 0.7rem; transition: transform 0.15s ease;
}
details.builds[open] > summary::before { transform: rotate(90deg); }
details.builds > summary:hover { color: var(--text); }
.builds-body .build-import { display: block; text-align: center; }
.build-list:not(:empty) { margin-top: 8px; }
.builds-empty { font-size: 0.76rem; color: var(--muted); margin: 6px 0 0; }
.build-row { display: flex; gap: 5px; margin-top: 6px; }
.build-load {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 0.78rem; font-weight: 600; padding: 7px 10px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.build-load:hover { border-color: var(--accent); background: rgba(255, 138, 64, 0.08); }
.build-act {
  flex: none; width: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; font-size: 0.85rem;
}
.build-act:hover { border-color: var(--accent); color: var(--accent); }
.build-del:hover { border-color: var(--bad); color: var(--bad); }
.share-url {
  width: 100%; margin-top: 6px; font-size: 0.72rem; padding: 6px 8px;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 8px; color: var(--text);
}
.grid-controls label { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper b { min-width: 30px; text-align: center; color: var(--text); }
.stepper button {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
}
.stepper button:hover { border-color: var(--accent); }

.board-area { flex: 1; min-width: 0; position: relative; }
.board-helper {
  font-size: 0.82rem;
  color: var(--accent);
  margin: 0 0 8px;
  min-height: 1.2em;
}
.board-scroll {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  padding: 8px;
}
/* touch-action:none — the board owns tap/drag gestures, so the browser can't
   hijack a near-miss tap as a scroll/zoom (which made units hard to select on
   touch devices). */
#board { display: block; margin: 0 auto; max-width: 100%; height: auto; touch-action: none; }
.board-meta { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.warn {
  margin-top: 8px;
  background: rgba(229, 83, 75, 0.12);
  border: 1px solid rgba(229, 83, 75, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}
.warn.warn-soft {        /* advisory (e.g. bow risk) — amber, not alarming red */
  background: rgba(232, 176, 75, 0.12);
  border-color: rgba(232, 176, 75, 0.55);
}
.warn-fix { display: block; margin-top: 10px; }
.fix-note {
  margin-top: 8px;
  background: rgba(76, 195, 138, 0.12);
  border: 1px solid rgba(76, 195, 138, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text);
}

/* board svg pieces — tuned for contrast: a dark "well" behind brighter,
   clearly-outlined units so the layout reads at a glance. */
.g-bg { fill: #1b1c1f; }
.g-line { stroke: #4c4e55; stroke-width: 1; }
.g-line.faint { stroke: #383a40; stroke-dasharray: 3 4; }
.s-wood { fill: var(--wood); }
.s-wood-grain { stroke: #5a432e; stroke-width: 2; }
.s-label { fill: var(--text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.s-part { fill: var(--accent); }
.s-part-label { fill: var(--accent); font-size: 12px; font-weight: 600; }
.s-hint-label { fill: var(--muted); font-size: 10px; }
/* Staggered cover (CU/CL) + foot-rail (FR-U/FR-L) layers: two tones so the
   brick offset reads. Upper = bright accent, lower = dim, both outlined. */
.s-cover-u { fill: var(--accent); }
.s-cover-l { fill: var(--accent-dim); }
.s-fr-u { fill: var(--blue); }
.s-fr-l { fill: var(--blue-dim); }
.s-foot { fill: var(--blue-dim); }
.s-wallmount { fill: var(--blue); }      /* wall brackets share the blue mounting-hardware coding */
.s-tag { fill: var(--muted); font-size: 9px; font-weight: 600; }
.wall-opt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wall-opt-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.wall-opt .seg { margin-bottom: 0; }
.wall-opt .seg button { padding: 5px 12px; font-size: 0.78rem; }
.wall-opt-hint { font-size: 0.78rem; color: var(--accent); }

/* Covers panel (tabletop/wall): wall layout toggle + "how covers stack" guide. */
.cover-panel {
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.cover-guide { background: none; border: 0; border-radius: 0; padding: 0; }
.cover-guide summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.cover-guide summary::-webkit-details-marker { display: none; }
.cover-guide summary::before { content: "\25B8"; color: var(--accent); font-size: 0.7rem; transition: transform 0.15s ease; }
.cover-guide[open] summary::before { transform: rotate(90deg); }
.cg-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 20px; padding: 1px 8px; }
.cg-body { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.cg-svg { width: 360px; max-width: 100%; height: auto; flex: 0 1 360px; }
.cg-cu { fill: var(--accent); stroke: #1b1c1f; stroke-width: 1; }
.cg-cl { fill: var(--accent-dim); stroke: #1b1c1f; stroke-width: 1; }
.cg-pcs { fill: var(--on-accent); font-size: 13px; font-weight: 700; text-anchor: middle; }
.cg-lab { fill: var(--muted); font-size: 12px; font-weight: 600; }
.cg-seam { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.5; }
.cg-note { fill: var(--muted); font-size: 11px; }
.cg-cap { flex: 1 1 220px; font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin: 0; }
.cg-cap b { color: var(--text); }
.cg-cap b.cg-blue { color: var(--blue); }
.drawer { cursor: pointer; }
.d-case { fill: #5b5d64; stroke: #9094a0; stroke-width: 1.6; }
.d-face { fill: #3c3d41; }
.d-handle { fill: var(--text); opacity: 0.85; }
.d-scoop { fill: #1b1c1f; }
.d-interior { fill: #161719; }
.d-door { fill: #54565d; stroke: #9094a0; stroke-width: 1.2; }
.d-knob { fill: #f0f1f3; }
.d-hinge { fill: var(--accent); }
.d-shelf-line { stroke: #9094a0; stroke-width: 2; }
.d-shelf-line.dashed { stroke-dasharray: 4 4; stroke: var(--accent); }
.d-rail { fill: #7a7d86; }
.d-lip { fill: #70737c; }
/* classic-drawer handle scoop: light chamfer ramp → thin lip edge → recessed wall */
.d-scoop { fill: #83868e; }
.d-scoop-wall { fill: #55575d; }
.d-scoop-edge { stroke: #9a9eaa; stroke-width: 1.2; }
/* decor-drawer recessed centre panel between the faceplate rails */
.d-panel { fill: #2b2c31; }

/* Product colors (default board style, toggleable to schematic grays in the
   palette): drawer fronts wear the CHOSEN LENGTH's lineup color, like the real
   collections (165 blue, 185 orange, 240 teal, 270 red…) — same shading logic
   per shade. The --len-face-* vars are computed in refresh() and set INLINE on
   the #board svg (not :root) so the share-card clone carries them; fallbacks
   are the 185 orange. Cases/cabinets/shelves stay dark, true to the product. */
#board.product .d-face { fill: var(--len-face, #e0702a); }
#board.product .d-scoop { fill: var(--len-face-light, #f18a45); }
#board.product .d-scoop-wall { fill: var(--len-face-dark, #a3511d); }
#board.product .d-scoop-edge { stroke: var(--len-face-edge, #ffc08a); }
#board.product .d-panel { fill: var(--len-face-dark, #aa5520); }
#board.product .d-rail { fill: var(--len-face-light, #f18a45); }
/* cabinet hinges + shelf/seam lines are accent details too — same lineup
   shade as the drawer rails (the ID selector also wins over .dashed's stroke,
   so cabinet seams recolor while keeping their dash pattern). */
#board.product .d-hinge { fill: var(--len-face-light, #f18a45); }
#board.product .d-shelf-line { stroke: var(--len-face-light, #f18a45); }

/* the Product/Schematic picker in the palette's Grid tools */
.board-colors { margin: 4px 0 12px; }
.board-colors .bc-label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; }
.board-colors .seg { margin-bottom: 0; }
.board-colors .seg button { text-align: center; padding: 6px 8px; font-size: 0.78rem; }
.s-screw { fill: var(--bg); }
/* dark outline behind board text so labels read on any drawer fill */
.d-label, .d-userlabel { paint-order: stroke; stroke: #15161b; stroke-linejoin: round; }
/* size badge = metadata: small, dim, light — the user's label is the headline.
   On labelled units it only appears on hover/selection (.on-demand). */
.d-label { fill: #aab0bb; font-size: 8.5px; font-weight: 500; stroke-width: 2px; transition: opacity 0.12s; }
.d-label.on-demand { opacity: 0; }
.drawer:hover .d-label.on-demand, .drawer.selected .d-label.on-demand { opacity: 1; }
/* the user's label is the content — bright + bold. font-size set per-unit inline. */
.d-userlabel { fill: #f2f3f5; font-weight: 700; stroke-width: 2.5px; }
.drawer:hover .d-case { stroke: var(--accent); }
.drawer.selected .d-case { stroke: var(--accent); stroke-width: 3; }
/* Drawer fronts slide "toward you" on hover/selection — in a front view an
   opening drawer reads as the front growing slightly and casting a shadow.
   Works because mousemove never rebuilds the board (see updateGhost). */
.drawer .d-front { transform-box: fill-box; transform-origin: center; }
.drawer:not(.dragging):hover .d-front,
.drawer.selected .d-front {
  transform: scale(1.05);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
  .drawer .d-front { transition: transform 0.16s ease, filter 0.16s ease; }
  /* One-shot stagger when an example/surprise build loads: units settle in
     sequence toward the mount surface (renderBoard sets the per-unit vars). */
  .drawer.drop-in {
    animation: unit-drop 0.3s ease backwards;
    animation-delay: var(--drop-delay, 0ms);
  }
  @keyframes unit-drop {
    from { opacity: 0; transform: translateY(var(--drop-from, -10px)); }
  }
}
.drawer.bow .d-case { stroke: #e8b04b; stroke-width: 2.5; stroke-dasharray: 6 3; }
.drawer.dragging { opacity: 0.35; }
.drawer { cursor: grab; }
.ghost.ok { fill: rgba(76, 195, 138, 0.25); stroke: var(--good); stroke-dasharray: 5 4; }
.ghost.bad { fill: rgba(229, 83, 75, 0.18); stroke: var(--bad); stroke-dasharray: 5 4; }

/* ---------- selected-unit toolbar ---------- */

.unit-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s;
}
.unit-toolbar.active { opacity: 1; border-color: var(--accent-dim); }
.ut-info { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.ut-thumb {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ut-thumb.empty { visibility: hidden; }
.ut-title { font-weight: 700; font-size: 0.9rem; }
.ut-sub { font-size: 0.75rem; color: var(--muted); }

.ut-pad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(2, 36px);
  gap: 5px;
  flex: 0 0 auto;
}
.ut-arrow {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.ut-arrow.up    { grid-area: 1 / 2; }
.ut-arrow.left  { grid-area: 2 / 1; }
.ut-arrow.down  { grid-area: 2 / 2; }
.ut-arrow.right { grid-area: 2 / 3; }
.unit-toolbar.active .ut-arrow:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.unit-toolbar.active .ut-arrow:not(:disabled):hover { background: var(--accent); color: var(--on-accent); }
.ut-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

.ut-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; }
.ut-shelves { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
/* Per-drawer closure picker (None / Magnets / Push-Click) */
.ut-closure { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.ut-closure .seg { margin-bottom: 0; }
.ut-closure .seg button { padding: 5px 12px; font-size: 0.78rem; text-align: center; white-space: nowrap; }
.seg button.disabled { opacity: 0.45; cursor: not-allowed; }
.ut-label { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.ut-label input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: 0.85rem;
  text-transform: uppercase;   /* show caps as you type (value is stored uppercase too) */
}
.ut-label input:focus { outline: none; border-color: var(--accent); }
.ut-actions .btn { font-size: 0.78rem; padding: 7px 12px; }
.ut-mode { width: auto; margin-bottom: 0; }            /* compact inline toggle (override .seg) */
.ut-mode button { flex: 0 0 auto; text-align: center; padding: 6px 12px; }

/* advanced cabinet interior editor */
.ut-interior { flex-basis: 100%; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.ut-sheet-backdrop, .ut-sheet-head { display: none; }  /* shown only as a mobile sheet */
.ut-int-hint { font-size: 0.75rem; color: var(--muted); margin: 0 0 8px; }
.ut-int-pal { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ut-int-chip {
  flex: 0 0 auto; font-size: 0.72rem; padding: 5px 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.ut-int-chip:hover { border-color: var(--accent-dim); color: var(--text); }
.ut-int-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.ut-int-grid { display: block; max-width: 100%; height: auto; }  /* board-scale, but never overflow its container */
.ic-empty { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; cursor: pointer; }
.ic-empty:hover { fill: rgba(255, 138, 64, 0.18); }
.ic-block { fill: #54565d; stroke: #9094a0; stroke-width: 1.2; cursor: pointer; }
.ic-comp:hover .ic-block { stroke: var(--bad); }       /* hints "click to remove" */
.ic-seam { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ic-slice { fill: var(--muted); font-size: 10px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ic-slice.case { fill: #dcdde1; font-size: 12px; font-weight: 600; }   /* the case slice shows its size */
.ic-outline { fill: none; stroke-width: 2.5; pointer-events: none; }
.ic-outline.ok { stroke: var(--accent); }
.ic-outline.bad { stroke: var(--bad); }
.ic-ghost { pointer-events: none; }                          /* placement preview, mirrors .ghost on the board */
.ic-ghost.ok { fill: rgba(76, 195, 138, 0.25); stroke: var(--good); stroke-dasharray: 5 4; }
.ic-ghost.bad { fill: rgba(229, 83, 75, 0.18); stroke: var(--bad); stroke-dasharray: 5 4; }
.ut-int-warn { margin: 8px 0 0; color: var(--bad); font-size: 0.8rem; }
.btn.ut-edit-btn { display: none; }                    /* desktop: editor is inline, no open button */

/* board: compartment outlines + interior-validity ring on the cabinet's case */
.d-compartment { fill: none; stroke: #9094a0; stroke-width: 1.2; }
.d-hardware-ghost { opacity: 0.5; }   /* knob + hinges kept faint over the x-rayed interior */
.d-case.tiled-ok { stroke: var(--accent); stroke-width: 2.4; }
.d-case.tiled-bad { stroke: var(--bad); stroke-width: 2.4; }
.drawer.selected .d-case.tiled-bad { stroke: var(--bad); }  /* stay red even when selected */
.drawer:hover .d-case.tiled-bad { stroke: var(--bad); }     /* …and on hover (beats .drawer:hover .d-case) */

/* ---------- BOM ---------- */

#bom h3 {
  margin: 22px 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.bom-scroll { overflow-x: auto; }   /* safety net: a wide row scrolls instead of blowing out the page */
.bom-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bom-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bom-table tr:last-child td { border-bottom: 0; }
.bom-table .thumb { width: 58px; padding: 6px 0 6px 10px; }
/* real renders invite the magnifier; the cursor is set from JS only on rows
   with a real image (generic placeholder/hardware icons don't zoom) */
.bom-table .thumb img.zoomable { cursor: zoom-in; }
.bom-table .thumb img {
  width: 46px; height: 46px;
  object-fit: contain;
  background: var(--panel-2);
  border-radius: 8px;
  display: block;
}
.bom-table .qty { width: 50px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.bom-table .name { font-weight: 600; }
.bom-table .note { font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.bom-table .link { width: 200px; text-align: right; white-space: nowrap; }
.bom-table .link .btn { margin-left: 4px; }
.soon-tag { border-color: var(--accent-dim); color: var(--accent); }
.club-tag { border-color: var(--blue); color: var(--blue); }
.bom-table tr.optional .name, .bom-table tr.optional .qty { opacity: 0.8; }
.tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 99px;
  padding: 2px 8px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 4px 10px; font-size: 0.72rem; }

.bom-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tip {
  margin-top: 18px;
  background: rgba(255, 138, 64, 0.08);
  border: 1px solid rgba(255, 138, 64, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
}
.fineprint { color: var(--muted); font-size: 0.75rem; margin-top: 14px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  main { padding-left: 14px; padding-right: 14px; }   /* reclaim width → bigger, easier-to-tap cells */
  /* Off-screen hover/focus tooltips & preview cards must not make the whole page
     scroll sideways on a phone — clip stray horizontal overflow at the edge.
     Must be on the root element (html) for the viewport scroll to honor it. */
  html, body { overflow-x: hidden; }
  .layout-wrap { flex-direction: column; }
  .palette { flex: none; width: 100%; }

  /* Collapse the chosen setup steps (location / printer / length) to a one-line
     summary so the design board is reachable without a long scroll. */
  .step.collapsible > h2 { cursor: pointer; }
  .step.collapsible > h2::after {
    content: "\25BE"; float: right; margin-top: 3px;
    color: var(--accent); font-size: 0.8rem; transition: transform 0.15s ease;
  }
  .step.collapsed > h2::after { content: "\25B8"; }
  .step.collapsed { margin-top: 16px; }
  .step.collapsed > *:not(h2) { display: none; }
  .step.collapsed .step-pick { display: inline; color: var(--accent); font-weight: 600; }
  .step.collapsed .step-pick::before { content: " · "; color: var(--muted); font-weight: 400; }
  .palette-row { flex-wrap: wrap; }
  /* the advanced interior becomes a bottom sheet, opened by the Edit interior button */
  .btn.ut-edit-btn { display: inline-block; }
  .ut-interior { flex-basis: auto; margin: 0; border-top: 0; padding-top: 0; }
  .ut-interior:not(.open) { display: none; }
  .ut-interior.open .ut-sheet-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 40; }
  .ut-interior.open .ut-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    background: var(--panel); border-top: 1px solid var(--accent-dim);
    border-radius: 14px 14px 0 0; padding: 14px 16px 22px; max-height: 72vh; overflow: auto;
  }
  .ut-interior.open .ut-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .ut-sheet-title { font-weight: 700; }
  .ut-sheet-close { background: none; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  body.sheet-open { overflow: hidden; }

  /* Bigger tap targets for the fiddly controls on touch (guideline ~44px). */
  .stepper button { width: 40px; height: 40px; font-size: 1.15rem; }
  .stepper b { min-width: 34px; }
  .ut-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  .build-row .build-load, .build-row .build-act { min-height: 40px; }
  .build-act { width: 40px; }

  /* Parts-list rows adapt to width instead of overflowing: smaller thumb, and
     the store links wrap under the name rather than holding a fixed column. */
  .bom-table .thumb { width: 42px; padding-left: 8px; }
  .bom-table .thumb img { width: 34px; height: 34px; }
  .bom-table td { padding: 8px; }
  .bom-table .link { width: auto; white-space: normal; text-align: left; }
  .bom-table .link .btn { margin: 4px 4px 0 0; }
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; color: #000; }
  .hero, .palette, .board-warnings, .bom-actions, .footer, .explainer,
  .board-helper, .unit-toolbar, #step-mount, #step-length, #step-printer { display: none !important; }
  .bom-table, .bom-table td { border-color: #ccc; background: #fff; color: #000; }
  #bom h3 { color: #000; }
  a { color: #000; }
}