/* Backlit shadow box (/gifts/shadow-box/). Builds on the Map Art Studio
   layout (/art/art.css): the preview sits on the same mat. */

.sbx-stage { --cm: 20px; }
.sbx-stage[data-mode="box"] .sbx-3d { display: block; }
.sbx-stage[data-mode="laser"] .ats-laser { display: block; }
.sbx-pieces { display: none; position: absolute; inset: 0; overflow: auto; padding: 16px; }
.sbx-stage[data-mode="pieces"] .sbx-pieces { display: block; }
.sbx-pieces canvas { display: block; margin: 0 auto; }
.sbx-3d { background: #121417; }

.sbx-tools { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.sbx-tool {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(236, 238, 233, 0.22); background: rgba(20, 23, 22, 0.82); color: var(--ink);
    font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.sbx-tool:hover { border-color: var(--ink); }
.sbx-tool[aria-pressed="true"] { border-color: var(--accent); }
.sbx-tool i { width: 10px; height: 10px; border-radius: 50%; background: #555a58; }
#sbxLed[aria-pressed="true"] i { background: #ffd37a; box-shadow: 0 0 8px 2px rgba(255, 205, 110, 0.75); }
.sbx-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sbx-busy {
    position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; margin: 0;
    background: rgba(20, 23, 22, 0.88); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-size: 0.85rem;
    max-width: 90%; text-align: center; pointer-events: none;
}

/* map markers: the eye (where you stand) and the target */
.sbx-map { aspect-ratio: 4 / 3; }
.sbx-mk { width: 22px; height: 22px; border-radius: 50%; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.sbx-mk-eye { background: #ff8f1f; border: 3px solid #fff; }
.sbx-mk-eye::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #1b2140; }
.sbx-mk-tgt { width: 18px; height: 18px; background: transparent; border: 3px solid #1b2140; box-shadow: 0 0 0 2px #fff; }
.sbx-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }
.sbx-key-eye { background: #ff8f1f; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px rgba(0, 0, 0, 0.3); }

.sbx-mt { margin-top: 12px; }
.sbx-mt0 { margin-top: 0; }
.sbx .ats-sec .ats-seg + .ats-range { margin-top: 14px; }
.sbx #sbxTp { margin-top: 2px; }

/* palettes */
.sbx-pals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sbx-pal {
    display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px; border-radius: 8px; border: 1px solid transparent;
    background: var(--field); color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left;
}
.sbx-pal i { height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.sbx-pal:hover { color: var(--ink); }
.sbx-pal[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.sbx-pal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sbx-parts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.sbx-parts li { display: flex; align-items: center; gap: 9px; }
.sbx-parts i { width: 16px; height: 16px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.sbx-count { min-width: 2.4em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sbx-small { font-size: 0.84rem; margin: 10px 0 0; }
.sbx-license a { color: var(--ink); }

@media (max-width: 900px) {
    .sbx-stage { padding: 0; }
    .sbx-3d, .sbx-pieces { position: relative; inset: auto; height: 400px; }
    .sbx-stage[data-mode="pieces"] .sbx-pieces { height: auto; max-height: 560px; }
}
@media (max-width: 420px) {
    .sbx-3d { height: 330px; }
    .sbx-tool { padding: 6px 9px; font-size: 0.8rem; }
    .sbx-pals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbx [hidden] { display: none !important; }