/* O64 (the owner, 18 Oct 2026): the guided box builder - three plain steps, the engine does the maths.
   Loaded by screen-boxes.html after shop.css; only the builder's new pieces and its calmer layout live here. */

.bx-guided .bx-say{margin:0;color:var(--text-2);font-size:15px;line-height:1.5}
.bx-guided .bx-steps li[data-current="true"]{color:var(--text);border-color:var(--gold)}
.bx-guided .bx-steps li[data-current="true"] b{background:var(--gold);color:#1a1205}

/* a step that is not live yet reads as "next", never as broken */
.bx-guided .bx-step[data-locked="true"]{opacity:.55}
.bx-guided .bx-step[data-locked="true"] h2::after{content:"next";margin-left:auto;font:600 11px/1 var(--body,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* step 1: the big hits */
.bx-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bx-chosen[hidden]{display:none}
.bx-chosen-k{font-weight:700;font-size:14px}
.bx-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid var(--gold);background:rgba(242,193,78,.12);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.bx-chip b{font-size:15px;line-height:1;color:var(--text-2)}
.bx-chip:hover b,.bx-chip:focus-visible b{color:var(--text)}
.bx-fill-row{display:flex;justify-content:center;padding-top:4px}
.bx-fill{min-width:min(100%,360px)}
.bx-fill:disabled{opacity:.5;cursor:not-allowed}
.bx-guided .bx-card-name{overflow-wrap:anywhere}

/* step 2 (the owner, 18 Oct): the customer's own cards - the meter, their chips, and cards that cannot go in greyed
   out with the reason on the card */
.bx-meter{display:grid;gap:6px}
.bx-meter-bar{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bx-meter-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--gold);transition:width .25s}
.bx-meter-say{font-size:14px;color:var(--text-2)}
.bx-own{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bx-own[hidden]{display:none}
.bx-card[aria-disabled="true"]{opacity:.42;filter:grayscale(.85);cursor:not-allowed}
.bx-card[aria-disabled="true"]:hover{transform:none}
.bx-card-why{display:block;font-size:11px;line-height:1.3;color:var(--warn,#f0b357);overflow-wrap:anywhere}

/* step 3: the feel */
.bx-feel{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.bx-feel-opt{display:grid;gap:4px;align-content:start;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.bx-feel-opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.bx-feel-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bx-feel-opt[aria-checked="true"]{border-color:var(--gold);background:rgba(242,193,78,.12);box-shadow:0 0 0 1px var(--gold)}
.bx-feel-name{font:700 18px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.bx-feel-price{font-weight:700;font-size:16px;color:var(--gold)}
.bx-feel-hit{font-size:14px}
.bx-feel-say{color:var(--text-2);font-size:13px;line-height:1.4}
.bx-feel-note{margin:0;font-size:12px;color:var(--ok)}
.bx-feel-note[hidden]{display:none}

/* Fine-tune: the per-card odds, tucked away */
.bx-adv{border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s4,14px) var(--s5);background:var(--ink-1)}
.bx-adv>summary{cursor:pointer;font-weight:700;font-size:15px;list-style-position:inside}
.bx-adv>summary small{font-weight:400;color:var(--text-3)}
.bx-adv[open]{display:grid;gap:var(--s3)}
.bx-adv-tools{display:flex;flex-wrap:wrap;gap:8px}
.bx-adv-tools [hidden]{display:none}
.bx-line[data-chase="true"]{border-color:rgba(242,193,78,.55)}

/* the side box: short now, so nothing is cut off at the bottom */
.bx-guided .bx-box{max-height:none;overflow:visible;align-content:start}
/* This static preview never runs the pack-stage sheen sweep. Keep its
   highlight inside the artwork instead of parking its SVG geometry off-canvas. */
.bx-pack .pkr-sheen{x:0}
.bx-guided .bx-actions{display:grid;grid-template-columns:1fr;gap:6px;justify-items:stretch}
.bx-make{width:100%}
.bx-make:disabled{opacity:.5;cursor:not-allowed}
.bx-why{margin:0;min-height:1.2em;font-size:13px;color:var(--text-2);text-align:center}
.linkish{justify-self:center;padding:4px 8px;border:0;background:none;color:var(--text-2);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.linkish:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}
.bx-guided .bx-status{font-size:14px}
.bx-guided .bx-fine{font-size:12px;color:var(--text-3)}
.bx-guided .bx-fine summary{cursor:pointer}
.bx-guided .bx-fine p{margin:6px 0 0;line-height:1.5}

@media (prefers-reduced-motion:reduce){.bx-feel-opt{transition:none}.bx-feel-opt:hover{transform:none}}