/* Configurator: drawing on the left, options on the right. */
:root {
  --ino-line: #1f2d45; --ino-body: #ffffff; --ino-band: #eef1f5; --ino-bay: #f6f8fb; --ino-dim: #59627d;
  --ino-tray: #f6cfcf; --ino-bin: #d6e1ef; --ino-metal: #dfe3ea; --ino-metal-lip: #c8d0dc; --ino-sel: #b9c4f7;
}
.cfg-steps { display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 8px 0 0; list-style: none; }
.cfg-steps a { display: block; padding: 8px 14px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14px; }
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; padding: 20px 24px 40px; max-width: 1700px; margin-inline: auto; align-items: start; }
.cfg-stage { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; min-width: 0; position: sticky; top: 84px; }
.cfg-status { min-height: 66px; padding: 10px 14px; border-radius: 6px; background: var(--bg); font-size: 15px; line-height: 1.5; color: var(--muted); display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.cfg-status.ok { background: var(--ok-soft); color: #134d2c; }
.cfg-status.bad { background: var(--bad-soft); color: #7a1416; }
.cfg-status.info { background: var(--accent-soft); color: var(--accent-dark); }
.cfg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoom { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.zoom input { width: 140px; accent-color: var(--accent); }
.cfg-drawing { overflow: auto; max-height: calc(100vh - 230px); background: var(--bg); border-radius: 6px; padding: 8px; }
.cfg-drawing svg { display: block; height: var(--draw-h, 860px); width: auto; max-width: none; margin-inline: auto; user-select: none; -webkit-user-select: none; }
.cfg-legend { font-size: 13px; color: var(--muted); }
.cfg-panel { display: grid; gap: 16px; }
.cfg-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 12px; }
.cfg-box h2 { font-size: 20px; }
.cfg-box h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cfg-box .hint, #mode-hint { font-size: 13px; color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--fg); padding: 7px 14px; font: 600 13px var(--font-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; }
.stepper button { width: 32px; height: 30px; border: 0; background: transparent; color: var(--fg); font-size: 17px; cursor: pointer; }
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { min-width: 30px; text-align: center; font: 600 14px var(--font-data); }
#parts .row { padding: 5px 0; border-top: 1px solid var(--line); }
#parts .row:first-child { border-top: 0; }
#parts .name { font: 700 14px var(--font-data); }
#parts .kind { color: var(--muted); font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* palette */
.size-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: start; }
.size-row:first-child { border-top: 0; }
.size-row .code { font: 700 16px var(--font-display); display: block; }
.size-row .w { font: 400 12px var(--font-data); color: var(--muted); display: block; }
.size-row .box { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cell-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
             color: var(--fg); cursor: grab; touch-action: none; font: 600 13px var(--font-data); }
.cell-chip:hover { border-color: var(--accent); }
.cell-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cell-chip img { height: 22px; width: auto; }
.edge { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.edge button { border: 0; background: transparent; padding: 3px 8px; font: 600 12px var(--font-body); cursor: pointer; color: var(--fg); }
.edge button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); background: var(--panel); color: var(--accent); font: 700 12px var(--font-body); cursor: help; padding: 0; }
.popover { position: fixed; z-index: 50; width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
           box-shadow: 0 12px 32px rgba(20, 28, 51, 0.18); display: grid; gap: 8px; font-size: 13px; }
.popover img { width: 100%; height: auto; border-radius: 6px; background: var(--bg); }
.popover .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }

/* drawing states */
.cfg-drawing .shelf .bay { transition: fill 0.12s; }
.cfg-drawing .shelf.drop-ok .bay { fill: var(--ok-soft); }
.cfg-drawing .shelf.drop-no .bay { fill: var(--bad-soft); }
.cfg-drawing .cell { cursor: grab; }
.cfg-drawing .cell.is-selected .bin, .cfg-drawing .cell.is-selected .metal, .cfg-drawing .cell.is-selected .tray { fill: var(--ino-sel); }
.cfg-drawing .cell.is-dragging { opacity: 0.35; }
.cfg-drawing .board[data-index] { cursor: ns-resize; }
.cfg-drawing .board.is-moving { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5; }
.cfg-drawing .move-dim line { stroke: var(--accent); stroke-width: 2.5; }
.cfg-drawing .move-dim rect { fill: var(--accent); }
.cfg-drawing .move-dim text { fill: #fff; font: 700 22px var(--font-data); }
.ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; opacity: 0.9; transform: translate(-50%, -80%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
@media (prefers-reduced-motion: reduce) { .cfg-drawing .shelf .bay { transition: none; } }

/* tablet and phone: options under the drawing */
@media (max-width: 1100px) {
  .cfg { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 32px; }
  .cfg-stage { position: static; }
  .cfg-drawing { max-height: 75vh; }
}
@media (max-width: 760px) {
  .cfg { padding-inline: 8px; gap: 12px; }
  .cfg-stage, .cfg-box { padding: 12px; }
  .cfg-steps a { padding: 6px 10px; font-size: 13px; }
  .zoom input { width: 110px; }
  .cfg-drawing { max-height: 65vh; padding: 4px; }
  .row { flex-wrap: wrap; }
  .size-row { grid-template-columns: 56px minmax(0, 1fr); }
  .popover { width: min(320px, calc(100vw - 24px)); }
}
@media (max-width: 760px) {
  .cell-chip { max-width: 100%; }
  .cell-chip img { max-width: 150px; object-fit: contain; }
}

/* custom size cell */
.custom-row { background: var(--accent-soft); margin: 6px -10px 0; padding: 12px 10px; border-radius: 8px; border-top: 0; }
.custom-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.custom-form label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.custom-form input, .custom-form select { font: 500 14px var(--font-body); padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); }
.custom-form input { width: 84px; }
.cell-chip svg { height: 22px; width: auto; }
.ghost svg { display: block; }
.cell-chip img, .cell-chip svg { max-width: 150px; object-fit: contain; }

/* the pop-up must really hide (display: grid above would override the hidden attribute),
   and it never takes the pointer, so it cannot cover the "?" button and keep itself open */
.popover[hidden] { display: none; }
/* the pop-up takes the pointer: the cursor can rest on it (see configurator.js) */
/* palette pictures are drawn at one real scale (set in configurator.js), so cells without a box look flat */
.cell-chip img, .cell-chip svg { height: auto; max-width: none; }
.chips .cell-chip { align-items: flex-end; }

/* views: 1-2 build, 3 review, 4 quote (only one is shown) */
.cfg[hidden], .cfg-view[hidden] { display: none; }
.cfg-steps a[aria-current="step"] { background: var(--accent); color: #fff; }
.cfg-bar-r { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cfg-next { display: grid; }
.cfg-next .btn { justify-content: center; }
.cfg-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cfg-nav .btn:last-child { margin-left: auto; }
.cfg-msg { margin-top: 10px; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.review-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.review-side { display: grid; gap: 24px; }
.review-drawing { padding: 16px; }
.review-drawing svg { display: block; width: 100%; height: auto; max-height: 760px; }
.table-scroll { overflow-x: auto; }
@media (max-width: 1000px) { .review-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cfg-nav .btn { flex: 1 1 100%; justify-content: center; } .cfg-nav .btn:last-child { margin-left: 0; } }

/* palette: no weights (the weight is chosen on the drawing) */
.cell-chip .kg { display: none; }
.ghost .kg { display: none; }
.chip-wrap { display: inline-flex; align-items: stretch; }
.chip-wrap .cell-chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chip-x { border: 1px solid var(--line); border-left: 0; border-radius: 0 6px 6px 0; background: var(--panel); color: var(--muted); font: 600 16px var(--font-body);
          width: 30px; cursor: pointer; padding: 0; }
.chip-x:hover { color: #7a1416; background: var(--bad-soft); }

/* cell menu on the drawing */
.cell-menu { position: fixed; z-index: 55; width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
             box-shadow: 0 12px 32px rgba(20, 28, 51, 0.2); display: grid; gap: 8px; font-size: 13px; }
.cell-menu[hidden] { display: none; }
.cm-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cm-head b { font: 700 14px var(--font-data); }
.cm-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.cm-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cell-menu .seg { justify-self: start; }
.cm-note { color: var(--muted); font-size: 12px; }
.cm-remove { justify-self: start; color: #7a1416; border-color: #e2b4b5; }
.cm-remove:hover { background: var(--bad-soft); }

/* print (when the PDF tool cannot load): the review only */
@media print {
  .site-header, .site-footer, .cfg, #view-quote, .cfg-nav, .cfg-msg, section.alt:first-of-type .lead, .cfg-steps, .popover, .cell-menu { display: none !important; }
  #view-review { display: block !important; }
  .review-top { grid-template-columns: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
}
#sum-shelves td.mono, #sum-shelves th { white-space: nowrap; }
@media (max-width: 760px) { #sum-shelves { min-width: 560px; } }

/* "?" of each size: picture and box size */
.size-row .code { display: flex; align-items: center; gap: 6px; }
.popover .pic { background: var(--bg); border-radius: 6px; padding: 10px; display: grid; place-items: center; }
.popover .pic svg { width: 100%; height: auto; max-height: 110px; }
.popover .kg { display: none; }
.popover table.mini { font-size: 13px; }
.popover table.mini th, .popover table.mini td { padding: 5px 6px; }
.popover table.mini th { font-size: 11px; }

/* "?" buttons stay round: never squeezed by the label column; on a narrow column the "?" moves to the next line */
.help { flex: none; }
.h-help { display: flex; align-items: center; gap: 8px; }
.h-help .help { text-transform: none; letter-spacing: 0; }
.size-row { grid-template-columns: 100px minmax(0, 1fr); }
.size-row .code { flex-wrap: wrap; }
@media (max-width: 760px) { .size-row { grid-template-columns: 96px minmax(0, 1fr); } }

/* realistic look (pictures rendered with Blender, build-inostorage.js look: 'render') */
.seg[hidden] { display: none; }
.cfg-drawing .ino-render .cell.is-selected .hit { fill: rgba(52, 120, 246, 0.22); stroke: #8fb4ff; stroke-width: 3; }
.cfg-drawing .ino-render .shelf.drop-ok .bay { fill: rgba(40, 170, 90, 0.28); }
.cfg-drawing .ino-render .shelf.drop-no .bay { fill: rgba(220, 50, 50, 0.28); }
.cfg-drawing .ino-render .board.is-moving { fill: rgba(52, 120, 246, 0.35); stroke: #8fb4ff; }
.popover .pic img { max-width: 100%; width: auto; height: auto; max-height: 110px; }
.popover .pair img { max-width: 100%; height: auto; }
.ghost img { display: block; }

/* site look (2026-10-19): same width as the menu and the other pages, rounded cards with soft shadows, pill buttons */
.cfg { max-width: var(--wrap); padding: 24px 24px 56px; gap: 24px; }
.cfg-stage, .cfg-box { border-radius: 18px; border-color: color-mix(in oklab, var(--line) 70%, transparent); box-shadow: var(--shadow-soft); }
.cfg-stage { padding: 18px; }
.cfg-box { padding: 22px; }
.cfg-status, .cfg-drawing { border-radius: 12px; }
.cfg-steps { gap: 8px; margin-top: 14px; }
.cfg-steps a { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--fg); box-shadow: var(--shadow-sm); }
.cfg-steps a:hover { border-color: var(--accent); color: var(--accent); }
.cfg-steps a[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.seg, .stepper, .edge { border-radius: 999px; }
.seg button { padding: 7px 16px; }
.edge button { padding: 3px 9px; white-space: nowrap; }
.size-row .box { flex-wrap: wrap; }
.edge button[aria-pressed="true"] { background: var(--accent); }
.cell-chip { border-radius: 10px; }
.chip-x { border-radius: 0 10px 10px 0; }
.chip-wrap .cell-chip { border-radius: 10px 0 0 10px; }
.custom-row { border-radius: 12px; }
.custom-form input, .custom-form select { border-radius: 8px; }
.popover, .cell-menu { border-radius: 14px; }
@media (max-width: 1100px) { .cfg { padding: 16px 16px 32px; } }
@media (max-width: 760px) { .cfg { padding-inline: 8px; } .cfg-stage, .cfg-box { padding: 12px; border-radius: 14px; } }

/* choice buttons: the selected button is solid blue with a check mark, the others are white with grey text.
   In 1a the two choices fill the full width, so there is no empty third place. */
.cfg-box > .seg { display: flex; width: 100%; }
.cfg-box > .seg button { flex: 1 1 0; justify-content: center; padding: 9px 12px; }
.seg { background: #fff; padding: 3px; gap: 3px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: var(--muted); }
.seg button:hover { color: var(--accent); background: var(--accent-soft); }
.seg button[aria-pressed="true"], .seg button[aria-pressed="true"]:hover { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(52, 120, 246, 0.3); }
.seg button[aria-pressed="true"]::before, .edge button[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
.edge { background: #fff; padding: 2px; gap: 2px; }
.edge button { border-radius: 999px; color: var(--muted); }
.edge button[aria-pressed="true"] { color: #fff; }