/*
  Forge Black: near-black grounds with amber "forge" accents. The header offers
  a few primary-button amber picks (below) while we settle on one; item-rarity
  colors and the forge loading screen stay game-like.
*/
:root {
    color-scheme: dark;
    --ground: #070809;
    --surface: #0d0f11;
    --raised: #15181b;
    --well: #040506;
    --line: #202428;
    --line-strong: #30363c;
    --text: #e8e3d9;
    --muted: #9c978d;
    --faint: #7f7b73;
    --ember: #f0a541;
    --ember-hi: #ffc06a;
    --ember-ink: #1a1207;
    --ember-soft: rgba(240, 165, 65, 0.13);
    /* Primary buttons use Bronze, a calmer amber than focus rings/accents. */
    --ember-btn: #c78a3c;
    --ember-btn-hi: #dba04f;
    --mod: #9aa6ff;
    --mod-soft: rgba(154, 166, 255, 0.12);
    --no: #e87964;
    --no-soft: rgba(232, 121, 100, 0.13);
    --ok: #9bc487;
    /* Surfaces that used to be hardcoded so every theme can restyle them. */
    --btn-hover: #1c2024;
    --btn-hover-line: #394047;
    --anchor: #4b4a45;
    --card-bg: #08090a;
    /* Text/surfaces that are game-like but must follow light/dark themes. */
    --rarity-normal: #d4d4d4;
    --rarity-magic: #8888ff;
    --rarity-rare: #ffff77;
    --rarity-unique: #af6025;
    --exc-ink: #f3b3a6;
    --mod-ink: #11131c;
    --tint: rgba(255, 255, 255, 0.06);
    --loader-ink: #9aa4b2;
    /* Structural chrome; light variants can tint the bars and page. */
    --head-bg: transparent;
    --head-ink: var(--text);
    --head-sub: var(--faint);
    --head-link: var(--muted);
    --head-line: var(--line);
    --foot-bg: transparent;
    --foot-ink: var(--faint);
    --foot-link: var(--muted);
    --foot-line: var(--line);
    --page-bg: transparent;
    --panel-accent: transparent;
    /* Item cards stay game-dark in every theme; these keep them readable. */
    --card-ink: var(--text);
    --card-sub: var(--muted);
    --card-faint: var(--faint);
    --card-line: var(--line-strong);
    --card-hover: var(--raised);
    --card-no: var(--no);
    --r: 4px;
    --r-lg: 7px;
    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/*
  Sandstone Bench: a tan workbench page with dark bronze chrome and game-dark
  item cards. The three options differ only in the CTA amber, moving from
  bronze toward gold; accent text stays dark enough to read on the tan page.
*/
:root[data-theme="bench-amber"] {
    color-scheme: light;
    --ground: #e4d0b0;
    --surface: #fdf8ee;
    --raised: #f1e6d3;
    --well: #fffdf9;
    --line: #d6c3a4;
    --line-strong: #b09a77;
    --text: #2a2013;
    --muted: #615440;
    --faint: #645742;
    --ember: #7f4a0c;
    --ember-hi: #a96a1c;
    --ember-ink: #241705;
    --ember-soft: rgba(176, 120, 42, 0.14);
    --ember-btn: #d99a3a;
    --ember-btn-hi: #edb054;
    --mod: #414ac0;
    --mod-soft: rgba(65, 74, 192, 0.12);
    --mod-ink: #ffffff;
    --no: #93331f;
    --no-soft: rgba(147, 51, 31, 0.12);
    --ok: #3d612c;
    --btn-hover: #e9dcc6;
    --btn-hover-line: #a8916d;
    --anchor: #b09a77;
    --exc-ink: #93331f;
    --tint: rgba(42, 32, 19, 0.06);
    --loader-ink: #5d5140;
    --head-bg: #3b2a16;
    --head-ink: #f7ecd9;
    --head-sub: #c8b593;
    --head-link: #ddc9a5;
    --head-line: #6b5028;
    --foot-bg: #3b2a16;
    --foot-ink: #c8b593;
    --foot-link: #ddc9a5;
    --foot-line: #6b5028;
    --page-bg: linear-gradient(180deg, #efe1c9 0%, #e4d0b0 55%, #dfc9a7 100%);
    --panel-accent: #e6b566;
    --card-bg: #1b140d;
    --card-ink: #ece3d4;
    --card-sub: #b4a892;
    --card-faint: #948875;
    --card-line: #4f3c27;
    --card-hover: rgba(255, 255, 255, 0.10);
    --card-no: #e08a76;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--ground);
    color: var(--text);
    font: 14px/1.45 var(--sans);
    -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; overflow-y: auto; }
#app { height: 100%; }
h1, h2 { margin: 0; font: inherit; }
code { font-family: var(--mono); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
/* FocusOnNavigate moves focus to the h1 for screen readers; it is not interactive. */
h1:focus { outline: none; }

/* ---------- Shell ---------- */

.shell { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.shell-bar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0 1.25rem; height: 3.25rem; flex: none;
    background: var(--head-bg); border-bottom: 1px solid var(--head-line);
}
.shell-icon { width: 1.9rem; height: 1.9rem; flex: none; }
.shell-title {
    font-family: var(--serif); font-variant: small-caps; font-size: 1.3rem;
    letter-spacing: 0.02em; color: var(--head-ink); white-space: nowrap;
}
.shell-sub { color: var(--head-sub); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shell-actions { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 1.25rem; }
.shell-link {
    border: 0; background: none; padding: 0; font: inherit; font-size: 0.86rem;
    color: var(--head-link); text-decoration: none; cursor: pointer;
}
.shell-link:hover { color: var(--head-ink); }
.shell-link:disabled { color: var(--head-link); opacity: 0.45; cursor: default; text-decoration: none; }
.shell-link:disabled:hover { color: var(--head-link); }
/* ---------- Options popover ---------- */

.options-wrap { position: relative; }
.options-backdrop { position: fixed; inset: 0; z-index: 30; }
.options-pop {
    position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 31;
    width: min(20rem, calc(100vw - 1.5rem));
    display: grid; gap: 0.7rem;
    padding: 0.9rem 0.95rem 0.8rem;
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: var(--text); text-align: left;
}
.options-title { font-weight: 600; font-size: 0.95rem; }
.options-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; color: var(--muted); font-size: 0.84rem; }
.options-row select { height: 2rem; padding: 0 0.35rem; font-size: 0.84rem; min-width: 9.5rem; }
.options-seg { display: inline-flex; gap: 1px; padding: 2px; background: var(--well); border: 1px solid var(--line); border-radius: 5px; }
.options-seg button { border: 0; background: none; padding: 0.28rem 0.7rem; border-radius: 3px; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.options-seg button:hover { color: var(--text); }
.options-seg button.on { background: var(--surface); color: var(--ember); box-shadow: inset 0 0 0 1px var(--line-strong); }
.options-note { margin: 0; color: var(--faint); font-size: 0.75rem; }

.shell-body { flex: 1 0 auto; display: flex; flex-direction: column; background: var(--page-bg); }

/* ---------- Controls ---------- */

button { font: inherit; color: inherit; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    height: 2rem; padding: 0 0.85rem; white-space: nowrap;
    font-size: 0.86rem; color: var(--text);
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r);
    cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover-line); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--ember-btn); border-color: var(--ember-btn); color: var(--ember-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--ember-btn-hi); border-color: var(--ember-btn-hi); }
.btn-danger { color: var(--no); background: var(--no-soft); border-color: rgba(236, 122, 101, 0.45); }
.btn-danger:hover:not(:disabled) { background: rgba(236, 122, 101, 0.22); border-color: var(--no); }

.link {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.86rem; color: var(--muted); text-decoration: underline;
    text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.link:hover { color: var(--text); text-decoration-color: var(--muted); }

select, input, textarea {
    background: var(--well); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    font: inherit; font-size: 0.9rem;
}
input, select { height: 2.25rem; padding: 0 0.65rem; }
input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; margin: 0; accent-color: var(--ember); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
textarea { width: 100%; padding: 0.55rem 0.7rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft);
}
input:disabled { opacity: 0.5; }

.more, .hint { color: var(--muted); font-size: 0.84rem; }
.field-error { color: var(--no); font-size: 0.84rem; }
.warn { color: var(--ember); }

/* ---------- Bench layout ---------- */

.bench {
    flex: 1 0 auto;
    display: flex; flex-direction: column; gap: 0.9rem;
    padding: 0.9rem 1.25rem;
    overflow: visible;
}

.bench-bar { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.seg {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--well); border: 1px solid var(--line); border-radius: 6px;
}
.seg-opt {
    border: 0; background: none; cursor: pointer;
    padding: 0.3rem 0.95rem; border-radius: var(--r);
    font-size: 0.88rem; color: var(--muted);
}
.seg-opt:hover { color: var(--text); }
.seg-opt.active { background: var(--raised); color: var(--ember); box-shadow: inset 0 0 0 1px var(--line-strong); }
.seg-note { color: var(--ember); font-size: 0.86rem; }
.seg-hint { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.bench-bar { flex-wrap: wrap; row-gap: 0.5rem; }
.bench-notice {
    flex: none; margin: 0; padding: 0.5rem 0.75rem; display: flex; align-items: baseline; gap: 0.75rem;
    font-size: 0.86rem; background: var(--ember-soft); border: 1px solid rgba(240, 165, 65, 0.3); border-radius: var(--r);
}

.saved-picks { position: relative; display: flex; align-items: center; gap: 0.5rem; }
.saved-picks-count {
    min-width: 1.2rem; padding: 0 0.3rem; border-radius: 0.6rem; text-align: center;
    background: var(--well); color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums;
}
.saved-picks-pop {
    position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 41;
    width: min(26rem, calc(100vw - 2rem)); padding: 0.8rem; display: grid; gap: 0.6rem;
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.saved-picks-save { display: flex; gap: 0.5rem; }
.saved-picks-save input { flex: 1; min-width: 0; height: 2rem; }
.saved-picks-undo { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; color: var(--muted); font-size: 0.84rem; }
.saved-picks-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.saved-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.6rem; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.saved-pick-what { min-width: 0; display: flex; flex-direction: column; }
.saved-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-pick-meta { color: var(--muted); font-size: 0.78rem; }
.saved-pick-row .btn { height: 1.75rem; padding: 0 0.65rem; }

.bench-main {
    flex: 1 1 0; min-height: 26rem;
    /* Size containment keeps the long mod list out of the page height; the lists scroll inside. */
    contain: size;
    display: grid; gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
}
.mode-advanced .bench-main {
    grid-template-columns:
        clamp(24rem, 24vw, 40rem)
        minmax(0, 1fr)
        clamp(26rem, 26vw, 32rem);
    gap: 1.25rem;
}

.col-doll, .col-picker, .col-out { min-height: 0; min-width: 0; }
.col-picker { display: flex; flex-direction: column; container-type: inline-size; }
.col-out { overflow-y: auto; padding: 0 0.25rem 0.5rem 0.55rem; scrollbar-gutter: stable; }
.col-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.col-title { font-size: 1.05rem; font-weight: 600; }
.col-sub { color: var(--muted); font-size: 0.88rem; }
.col-empty {
    margin: 0; padding: 2.5rem 1rem; text-align: center;
    color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}

/* ---------- Paper doll ---------- */

/* Slot geometry assumes a 4:3 panel; positions come from PaperDoll.razor. */
.doll {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    pointer-events: none;
}
.doll .gear-slot { pointer-events: auto; z-index: 1; }

.gear-slot {
    position: absolute;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0.2rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r);
    color: var(--muted);
}
.gear-slot:hover { border-color: var(--line-strong); background: var(--raised); }
.gear-slot.active { background: var(--mod-soft); border-color: rgba(154, 166, 255, 0.45); color: var(--text); }
.gear-slot.focused { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); color: var(--text); }
.gear-focus {
    position: absolute; inset: 0; z-index: 1;
    background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: inherit;
}
.gear-stack {
    position: absolute; left: 4%; right: 4%; bottom: 4%; z-index: 2;
    display: flex; flex-direction: column; gap: 0.05rem; align-items: stretch;
    pointer-events: none;
}
.gear-class {
    font-size: 0.66rem; line-height: 1.2; text-align: center; color: var(--faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gear-slot.active .gear-class, .gear-slot.focused .gear-class { color: var(--muted); }
.col-class { height: 1.9rem; font-size: 0.86rem; }
.gear-label { font-size: 0.72rem; line-height: 1.15; text-align: center; pointer-events: none; }
.gear-count {
    position: absolute; top: 0.25rem; left: 0.3rem; z-index: 2; pointer-events: none;
    min-width: 1.1rem; height: 1.1rem; padding: 0 0.25rem; border-radius: 0.55rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mod); color: var(--mod-ink); font-size: 0.68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gear-slot.small .gear-count { top: 0.15rem; left: 0.15rem; min-width: 0.85rem; height: 0.85rem; padding: 0 0.15rem; font-size: 0.58rem; }
.gear-slot.small .gear-label { font-size: 0.62rem; }
/* ---------- Mod picker ---------- */

.modpicker { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modrow { display: flex; gap: 0.5rem; }
.mod-scope { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0.45rem 0.35rem 0.25rem; color: var(--muted); font-size: 0.8rem; }
.mod-scope .link { font-size: 0.8rem; }
.search-unit { display: flex; gap: 0.5rem; flex: 1; min-width: 0; }
.search-unit #mod-search { flex: 1 1 auto; min-width: 0; }
#suggest-all { flex: none; height: 2.25rem; }
#suggest-all {
    padding: 0 0.85rem; font-size: 0.86rem; cursor: pointer;
    background: var(--mod-soft); color: var(--mod);
    border: 1px solid rgba(154, 166, 255, 0.4); border-radius: var(--r);
}
#suggest-all:hover:not(:disabled) { background: rgba(154, 166, 255, 0.22); }
#suggest-all:disabled { opacity: 0.45; cursor: not-allowed; }

.mod-list { flex: 1 1 16rem; min-height: 0; overflow-y: auto; margin-top: 0.75rem; padding-right: 0.25rem; }
.mod-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; align-items: start; }
.mod-cols.single { grid-template-columns: minmax(0, 1fr); }
.mod-sec { min-width: 0; }
@container (max-width: 34rem) {
    .mod-cols { grid-template-columns: minmax(0, 1fr); }
}
.gen-head {
    position: sticky; top: 0; z-index: 1;
    background: var(--ground);
    color: var(--muted); font-size: 0.8rem; font-weight: 600;
    padding: 0.2rem 0.35rem 0.4rem; border-bottom: 1px solid var(--line-strong);
}
.suggest { list-style: none; margin: 0; padding: 0; }
.suggest.picker-off { opacity: 0.45; }
.fam-block { break-inside: avoid; }

.suggest-row { display: flex; gap: 0.25rem; align-items: center; }
.suggest-row.fam-row { min-height: 2.15rem; padding: 0.1rem 0.15rem 0.1rem 0.35rem; border-bottom: 1px solid var(--line); }
.suggest-row.fam-row:hover { background: var(--surface); }
.suggest-row.fam-row.picked { background: var(--mod-soft); }
.suggest-row.tier-row.covered { background: var(--surface); }
.suggest-row.tier-row.covered .tier-name { color: var(--mod); }
.suggest-row.fam-row.excluded, .suggest-row.tier-row.excluded {
    background: var(--no-soft);
}
.suggest-row.fam-row.picked.excluded, .suggest-row.tier-row.picked.excluded {
    background: linear-gradient(90deg, var(--mod-soft), var(--no-soft));
}
.picked-count { flex: none; color: var(--ember); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.excluded-count { flex: none; color: var(--no); font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.summary-sep { flex: none; color: var(--faint); }
.covered-note { flex: none; color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.excluded .fam-text, .excluded .tier-name { color: var(--text); }
.suggest-line { flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-line.multi { display: flex; flex-direction: column; white-space: normal; gap: 0.05rem; }
.suggest-line.multi .mod-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fam-toggle {
    display: flex; gap: 0.5rem; align-items: baseline; text-align: left;
    background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
}
.fam-caret { flex: none; width: 0.8em; color: var(--faint); font-size: 0.7rem; }
.fam-toggle:hover .fam-caret { color: var(--text); }
.fam-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-text.multi { display: flex; flex-direction: column; white-space: normal; gap: 0.05rem; }
.fam-text.multi .mod-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-count { flex: none; font-size: 0.76rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.picked .fam-text { color: var(--text); }

.tier-list { list-style: none; margin: 0; padding: 0.15rem 0 0.35rem 1.35rem; border-bottom: 1px solid var(--line); }
.suggest-row.tier-row { min-height: 1.8rem; padding-left: 0.25rem; border-radius: var(--r); }
.suggest-row.tier-row:hover { background: var(--surface); }
.suggest-row.tier-row.picked { background: var(--mod-soft); }
.tier-row .tier-name {
    flex: none; width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
    font-size: 0.84rem; color: var(--muted);
}
.tier-row .suggest-line { font-size: 0.86rem; color: var(--text); }

.suggest-row > button:not(.fam-toggle) {
    flex: none; width: 1.75rem; height: 1.75rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--r);
    color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer;
}
.suggest-row:hover > button:not(.fam-toggle) { border-color: var(--line-strong); }
.suggest-row > button:not(.fam-toggle):hover:not(:disabled) { color: var(--mod); background: var(--mod-soft); border-color: rgba(154, 166, 255, 0.5); }
.suggest-row > button.active { color: var(--mod); background: var(--mod-soft); border-color: var(--mod); }
.suggest-row > button.exc { color: var(--faint); }
.suggest-row > button.exc:hover:not(:disabled) { color: var(--no); background: var(--no-soft); border-color: rgba(236, 122, 101, 0.5); }
.suggest-row > button.exc.active { color: var(--no); background: var(--no-soft); border-color: var(--no); }
.suggest-row > button:disabled { color: var(--faint); cursor: not-allowed; border-color: transparent; opacity: 0.5; }
.suggest-row > button.btn { width: 1.75rem; height: 1.75rem; }
.suggest-row > button.btn:disabled { color: var(--faint); }

/* ---------- Search string ---------- */

.hero {
    flex: none; display: grid; gap: 0.6rem;
    padding: 0.85rem 1rem 0.8rem;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px;
    box-shadow: inset 0 2px 0 var(--panel-accent);
}
.hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hero-title { font-size: 1.05rem; font-weight: 600; }
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; }
.hero-side { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; }
.hero-copy { height: 3.2rem; min-width: 9rem; font-size: 1rem; }
.hero-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.hero-checks, .hero-lib { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.out-len { color: var(--faint); font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.out-len b { color: var(--text); font-weight: 600; font-size: 1rem; }
.out-len.over b, .out-over { color: var(--no); }
.out-warn { margin: 0; color: var(--no); font-size: 0.84rem; }

.qbox {
    display: flex; align-items: center; min-height: 3.2rem; max-height: 7.6rem; overflow-y: auto;
    padding: 0.6rem 0.85rem;
    background: var(--well); border: 1px solid var(--line-strong); border-radius: var(--r);
}
.qbox.over { border-color: rgba(236, 122, 101, 0.6); }
.qbox-empty { color: var(--faint); font-size: 0.95rem; }
.qtext {
    display: block; width: 100%; font-size: 1rem; line-height: 1.75;
    white-space: normal; overflow-wrap: anywhere; color: var(--text);
}

.tool-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; height: 2rem; padding: 0 0.75rem;
    font-size: 0.86rem; color: var(--text); cursor: pointer;
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r);
}
.tool-toggle:hover { background: var(--raised); }
.tool-toggle.on { background: var(--raised); border-color: var(--muted); color: var(--ember); }
.tool-chev {
    width: 0.75rem; height: 0.75rem; flex: none; color: var(--muted);
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.15s ease;
}
.tool-toggle.on .tool-chev { transform: rotate(180deg); }
.tool-count {
    min-width: 1.3rem; padding: 0 0.35rem; border-radius: 0.65rem; text-align: center;
    background: var(--well); color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums;
}
.tool-sub { color: var(--ember); font-size: 0.8rem; }

/* The panel opened from the bar reads as part of it: shared border, no gap. */
.drawer {
    flex: none; display: grid; gap: 0.7rem; max-height: 48vh; overflow-y: auto;
    padding: 0.85rem 1rem;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px;
}
.hero:has(+ .drawer) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero + .drawer { margin-top: calc(-0.9rem - 1px); border-top-color: var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.drawer-lead { margin: 0; color: var(--muted); font-size: 0.86rem; }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.75rem; align-items: start; }

.picks { display: flex; flex-direction: column; gap: 0.6rem; container-type: inline-size; }
.picks-title { font-size: 1.05rem; font-weight: 600; }
.picks-empty { margin: 0; color: var(--muted); font-size: 0.88rem; }
.qb {
    text-decoration: underline 2px; text-underline-offset: 5px;
    text-decoration-skip-ink: none; border-radius: 2px;
}
.qb-anchor { color: var(--muted); text-decoration-color: var(--line-strong); }
.qb-inc { text-decoration-color: rgba(154, 166, 255, 0.55); }
.qb-exc { color: var(--exc-ink); text-decoration-color: rgba(236, 122, 101, 0.6); }
.qb.hot { background: var(--mod-soft); text-decoration-color: var(--mod); }
.qb-exc.hot { background: var(--no-soft); text-decoration-color: var(--no); }
.qb-anchor.hot { background: var(--tint); text-decoration-color: var(--muted); }

.ruler {
    position: relative; display: flex; height: 6px; border-radius: 3px;
    background: var(--well); overflow: visible;
}
.ruler.empty { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.ruler-seg { height: 100%; flex: none; box-shadow: inset -2px 0 0 var(--surface); }
.ruler-seg:first-child { border-radius: 3px 0 0 3px; }
.seg-anchor { background: var(--anchor); }
.seg-inc { background: rgba(154, 166, 255, 0.7); }
.seg-exc { background: rgba(236, 122, 101, 0.75); }
.seg-external { background: var(--ember-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ruler-seg.hot { background: var(--text); }
.seg-inc.hot { background: var(--mod); filter: brightness(1.2); }
.ruler-limit { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--no); }


.bd-sec { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.bd-sec.focused .bd-slot { color: var(--ember); }
.bd-head { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.bd-name { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.bd-slot { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.bd-slot:hover { color: var(--ember); }
.bd-sub { color: var(--muted); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bd-cost {
    margin-left: auto; color: var(--muted); font-size: 0.8rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bd-cost::after { content: " chars"; color: var(--faint); }
.bd-clear { font-size: 0.8rem; }
.bd-anchor .bd-head { align-items: center; }
.bd-anchor .bd-name { font-weight: 500; color: var(--muted); font-size: 0.86rem; }
.bd-anchor .bd-frag { max-width: none; flex: 1 1 auto; }
.bd-sec.hot .bd-name:not(.bd-slot) { color: var(--text); }

.bd-logic { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.45rem 0 0.2rem; color: var(--faint); font-size: 0.78rem; }
.logic-seg { display: inline-flex; gap: 1px; padding: 1px; background: var(--well); border: 1px solid var(--line); border-radius: 5px; }
.logic-seg button { border: 0; background: none; padding: 0.1rem 0.55rem; border-radius: 3px; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.logic-seg button:hover { color: var(--text); }
.logic-seg button.on { background: var(--raised); color: var(--ember); box-shadow: inset 0 0 0 1px var(--line-strong); }
.logic-note { color: var(--ember); }
.bd-list { list-style: none; margin: 0; padding: 0; }
.bd-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(3.4rem, auto) 1.6rem;
    align-items: center; gap: 0.4rem;
    padding: 0.2rem 0 0.2rem 0.55rem; margin-left: -0.55rem; border-radius: var(--r);
}
.bd-row.ro { grid-template-columns: minmax(0, 1fr) auto auto minmax(3.4rem, auto); }
.bd-row.imported { grid-template-columns: minmax(0, 1fr) minmax(3.4rem, auto) 1.6rem; }
.bd-row.imported.ro { grid-template-columns: minmax(0, 1fr) minmax(3.4rem, auto); }
@container (max-width: 27rem) {
    .bd-row.inc { grid-template-columns: auto minmax(0, 1fr) auto 1.6rem; }
    .bd-row.inc .bd-what { grid-column: 1 / -1; }
    .bd-row.inc .bd-frag { max-width: none; }
}
.bd-row:hover, .bd-row.hot { background: var(--raised); }
.bd-what { min-width: 0; display: flex; flex-direction: column; }
.bd-label { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-detail { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-row.exc .bd-label { color: var(--exc-ink); }
.bd-row.imported .bd-label { font-family: var(--mono); }
.bd-row.imported:not(.exc) .bd-label { color: var(--ember); }
.bd-frag {
    max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.78rem; color: var(--muted);
    background: var(--well); padding: 0.05rem 0.35rem; border-radius: 3px;
}
.bd-frag.missing { font-family: var(--sans); color: var(--no); background: none; }
.bd-n { text-align: right; font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-unit { font-size: 0.7rem; color: var(--faint); }
.bd-min { width: 3rem; height: 1.6rem; padding: 0 0.35rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: right; }
.bd-min::placeholder { text-align: right; }
.bd-min.noop { color: var(--muted); }
.bd-min.working { opacity: 0.55; }
.bd-x {
    width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: var(--r);
    background: none; color: var(--faint); font-size: 1rem; line-height: 1; cursor: pointer;
}
.bd-x:hover { color: var(--no); background: var(--no-soft); }

.out-dock { display: none; }

.intro-card {
    margin-bottom: 0.9rem; padding: 0.85rem 1rem;
    background: var(--ember-soft); border: 1px solid rgba(240, 165, 65, 0.3); border-radius: var(--r-lg);
}
.intro-head { display: flex; align-items: baseline; justify-content: space-between; }
.intro-title { font-weight: 600; font-size: 0.95rem; color: var(--ember-hi); }
.intro-lead { margin: 0.45rem 0 0.3rem; font-size: 0.88rem; }
.intro-goals { margin: 0.1rem 0 0.3rem; padding-left: 1.2rem; font-size: 0.88rem; }
.intro-goals li { margin: 0.2rem 0; }
.intro-goals li::marker { color: var(--ember); }
.intro-goals b { font-weight: 600; }
.intro-flow { margin: 0; color: var(--muted); font-size: 0.85rem; }
.intro-flow b { font-weight: 600; color: var(--text); }

/* Two placements: wide keeps the card in the output column, stacked shows it first below the top bar. */
.intro-top { display: none; flex: none; }
.intro-top .intro-card { margin-bottom: 0; }

/* ---------- Test items ---------- */

.pack-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: none; }

/* Cells snap down to whole pixels: fractional cells drift against the background grid lines. */
.pack-wrap {
    max-height: 19rem; width: min(100%, 46rem);
    overflow-y: auto; position: relative;
}
.pack {
    --pack-cell: 2.6rem;
    display: grid; gap: 2px;
    grid-template-columns: repeat(12, var(--pack-cell));
    grid-auto-rows: var(--pack-cell);
    min-height: calc(5 * var(--pack-cell) + 4 * 2px);
    background: var(--well);
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: calc(var(--pack-cell) + 2px) calc(var(--pack-cell) + 2px);
    border: 1px solid var(--line); border-radius: var(--r);
}
@supports (container-type: inline-size) {
    .pack-wrap { container-type: inline-size; }
    .pack {
        --pack-cell: calc((100cqw - 24px) / 12);
        font-size: clamp(0.6rem, 1.1cqw, 1rem);
    }
}
@supports (width: round(down, 10px, 1px)) {
    .pack { --pack-cell: round(down, calc((100cqw - 24px) / 12), 1px); }
}
.pack-placed {
    overflow: hidden; padding: 0.15rem; cursor: pointer;
    font-size: 0.7rem; line-height: 1.2; text-align: center; color: var(--text);
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: 3px;
}
.pack-placed:hover { border-color: var(--muted); }
.pack-placed.hit { background: var(--ember-soft); border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 12px rgba(240, 165, 65, 0.3); }
.pack-placed.dim { opacity: 0.35; }
.pack-placed.selected { outline: 2px solid var(--text); outline-offset: -2px; opacity: 1; }

/* ---------- Help tip ---------- */

.help { position: relative; display: inline-flex; align-items: center; }
.help-btn {
    width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%;
    border: 1px solid var(--line-strong); background: none; color: var(--muted);
    font-size: 0.8rem; cursor: pointer;
}
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--text); border-color: var(--muted); }
.help-backdrop { position: fixed; inset: 0; z-index: 40; }
.help-pop {
    position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 41;
    width: max-content; max-width: min(22rem, calc(100vw - 3rem));
    padding: 0.65rem 0.8rem; font-size: 0.86rem; line-height: 1.45;
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.help-right .help-pop { left: auto; right: 0; }
.help-pop:focus { outline: none; }
.help-pop ul { margin: 0; padding-left: 1rem; }
.help-pop li + li { margin-top: 0.3rem; }
.help-pop b { font-weight: 600; }

/* ---------- Item card ---------- */

.rarity-normal { color: var(--rarity-normal); }
.rarity-magic { color: var(--rarity-magic); }
.rarity-rare { color: var(--rarity-rare); }
.rarity-unique { color: var(--rarity-unique); }

.iprev {
    background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 0.55rem 0.8rem 0.65rem; font-size: 0.84rem; text-align: center;
    color: var(--card-ink);
}
.iprev-name { font-weight: 600; font-size: 1rem; }
.item-tooltip .iprev-name { padding: 0 1.4rem; }
.iprev-sub { color: var(--card-sub); font-size: 0.8rem; margin-top: 0.1rem; }
.iprev-sep { height: 1px; margin: 0.45rem 1.5rem; background: linear-gradient(90deg, transparent, var(--card-line), transparent); }
.iprev-stats, .iprev-meta { color: var(--card-sub); }
.iprev-mod + .iprev-mod { margin-top: 0.35rem; }
.iprev-cap { color: var(--card-faint); font-size: 0.74rem; margin: 0.1rem 0; }
.iprev-line { display: flex; gap: 0.5rem; align-items: baseline; justify-content: center; padding: 0.05rem 0; }
.iprev-text { min-width: 0; overflow-wrap: anywhere; color: var(--rarity-magic); }
.iprev-annot { white-space: nowrap; font-size: 0.74rem; }
.iprev-corrupt { color: #d20000; font-weight: 600; }
.map-none { color: var(--no); font-size: 0.76rem; }
.map-one { color: var(--faint); font-size: 0.76rem; font-family: var(--mono); }
.iprev .map-none { color: var(--card-no); }
.iprev .map-one { color: var(--card-faint); }

.item-tooltip {
    position: fixed; z-index: 40;
    width: 24rem; max-width: calc(100vw - 1rem); max-height: min(28rem, calc(100vh - 1rem));
}
.item-tooltip .iprev { max-height: inherit; overflow-y: auto; }
.tt-close {
    position: absolute; top: 0.3rem; right: 0.35rem; z-index: 1;
    width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--r);
    background: none; color: var(--card-sub); font-size: 1rem; line-height: 1; cursor: pointer;
}
.tt-close:hover { color: var(--card-ink); background: var(--card-hover); }

/* ---------- Dialogs ---------- */

.dlg-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; overflow-y: auto;
    background: rgba(6, 8, 10, 0.72);
}
.dlg {
    width: 38rem; max-width: 100%; max-height: 85vh; margin: auto;
    display: flex; flex-direction: column; gap: 0.75rem;
    padding: 1.15rem 1.25rem 1.1rem; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
/* Import stays one height and scrolls, so parsing never resizes the dialog. */
.dlg-import { height: min(82vh, 44rem); max-height: 88vh; }
.panel-head { font-size: 1.1rem; font-weight: 600; }
.dlg textarea { min-height: 8rem; font-family: var(--mono); font-size: 0.84rem; }
.dlg .modrow { flex-wrap: wrap; }
.dlg .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.import-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; align-self: flex-start; }
.import-source .seg { flex: none; }
.guide-section {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding-top: 0.45rem; border-top: 1px solid var(--line); font-size: 0.84rem;
}
.guide-section-head { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-section-group { display: flex; flex-direction: column; gap: 0.2rem; }
.guide-section-sub { color: var(--faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.guide-branch { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.84rem; }
.guide-branch code { font-family: var(--mono); }
.guide-query code { overflow-wrap: anywhere; }
.guide-pick-desktop { position: relative; flex: 1 1 16rem; min-width: 0; }
.guide-pick-mobile { display: none; }
.guide-pick-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; padding: 0.32rem 0.6rem; font-size: 0.84rem; line-height: 1.3;
    color: var(--text); background: var(--raised); border: 1px solid var(--line-strong);
    border-radius: 6px; cursor: pointer; text-align: left;
}
.guide-pick-trigger:hover, .guide-pick-trigger[aria-expanded="true"] { border-color: var(--ember); }
.guide-pick-caret { color: var(--muted); }
.guide-pick-backdrop { position: fixed; inset: 0; z-index: 60; }
.guide-pick-pop {
    position: fixed; z-index: 61; top: 20%; left: 20%; width: 17rem;
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.3rem; max-height: min(17rem, 50vh); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.guide-pick-option { display: flex; align-items: center; gap: 0.45rem; padding: 0.22rem 0.35rem; border-radius: 5px; cursor: pointer; }
.guide-pick-option:hover { background: var(--card-hover); }
.guide-pick-option input { accent-color: var(--ember); }
.guide-pick-native { display: none; }
#query-import-preview { margin-top: 0.35rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
#query-import-preview .picks { gap: 0.45rem; }
#query-import-preview .picks-title { font-size: 0.95rem; color: var(--muted); }
#query-import-preview .bd-sec:first-of-type { border-top: 0; padding-top: 0; }
.chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.55rem; font-size: 0.82rem; cursor: pointer;
    color: var(--text); background: var(--mod-soft);
    border: 1px solid rgba(154, 166, 255, 0.4); border-radius: var(--r);
}
.chip:hover { border-color: var(--no); background: var(--no-soft); }

#import-preview { width: 100%; max-width: 32rem; margin: 0 auto; }
.import-batch { display: flex; flex-direction: column; gap: 0.4rem; }
.import-batch-head { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.import-nav-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.import-batch-status { text-align: center; }
.import-batch-ok { color: var(--ok); font-size: 0.84rem; }
.import-carousel { display: flex; align-items: center; gap: 0.5rem; }
.import-carousel .iprev { flex: 1 1 auto; min-width: 0; }
.import-side-btn { height: 3rem; font-size: 1.2rem; }

.dlg-builder { width: 58rem; }
.builder-cols { display: flex; gap: 1.25rem; align-items: stretch; min-height: 0; }
.builder-left { flex: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.builder-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.builder-left .modrow > * { flex: 1; min-width: 0; }
/* No columns here: a height-capped multicol spills into sideways columns instead of scrolling. */
.builder-left .suggest { overflow-y: auto; max-height: 46vh; min-height: 10rem; }
.builder-right .iprev { overflow-y: auto; max-height: 46vh; }
.gen-tag {
    flex: none; min-width: 3.4rem; text-align: center;
    font-size: 0.72rem; color: var(--muted);
    border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 0.3rem;
}

/* ---------- Footer and check panels ---------- */

.shell-foot {
    flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1.25rem;
    padding: 0.5rem 1.25rem;
    background: var(--foot-bg); border-top: 1px solid var(--foot-line);
    color: var(--foot-ink); font-size: 0.78rem;
}
.shell-foot .hint { font-size: 0.78rem; color: var(--foot-ink); font-style: normal; }
.foot-reset { margin-left: auto; font-size: 0.78rem; color: var(--foot-ink); }
.foot-reset:hover { color: var(--no); text-decoration-color: var(--no); }
.legal-links { display: flex; gap: 0.75rem; }
.legal-links a { color: var(--foot-link); }
.legal-links a:hover { color: var(--foot-ink); }

.qcard { background: var(--well); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.75rem 0.85rem; }
.qcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.45rem; }
.qcard-title { font-weight: 600; }
.meter-num { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.meter-num.over { color: var(--no); }
.qquery { font-family: var(--mono); font-size: 0.84rem; overflow-wrap: anywhere; padding: 0.5rem 0.6rem; background: var(--surface); border-radius: var(--r); }
.qactions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.55rem; flex-wrap: wrap; }
.qcopy-status, .qwarn { font-size: 0.82rem; color: var(--muted); }
.qdiag { font-size: 0.82rem; color: var(--ember); margin-top: 0.35rem; }
.qparts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.8rem; margin: 0.55rem 0 0; font-size: 0.82rem; }
.qparts dt { color: var(--muted); }
.qparts dd { margin: 0; overflow-wrap: anywhere; }
.qexplain { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: 0.84rem; }
.qexplain-token { display: flex; gap: 0.6rem; align-items: baseline; }
.qexplain-kind { color: var(--muted); font-size: 0.8rem; }
.qexplain-block + .qexplain-block { margin-top: 0.45rem; }
.qexplain-mods { margin: 0.15rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.8rem; }
#query-import-tokens > div { font-family: var(--mono); font-size: 0.8rem; }

/* ---------- Boot ---------- */

.boot-overlay { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--ground); }
#blazor-error-ui { display: none; }

/* ---------- Responsive ---------- */

/* Set by uiscale.js when the scaled bench no longer fits: the page scrolls and columns take natural height. */
body.compact { overflow-y: auto; }
body.compact #app, body.compact .shell { height: auto; min-height: 100%; }
body.compact .bench { flex: none; overflow: visible; padding-bottom: 0.5rem; }
body.compact .bench-main { grid-template-columns: minmax(0, 1fr); contain: none; flex: none; }
body.compact .mode-advanced .bench-main { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); }
body.compact .mode-advanced .col-out { grid-column: 1 / -1; }
body.compact .col-out { overflow: visible; }
body.compact .intro-top { display: block; }
body.compact .intro-side { display: none; }
body.compact .mod-list { flex: 0 0 auto; max-height: 60vh; }
body.compact .pack-wrap { max-height: none; }
body.compact .shell { padding-bottom: 3.75rem; }
body.compact .out-dock {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line-strong);
}

@media (max-width: 430px) {
    .shell-title { display: none; }
    .shell-actions { gap: 0.7rem; }
}

@media (max-width: 700px) {
    html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
    #app, .shell { height: auto; min-height: 100%; }
    .shell-bar { padding: 0 0.75rem; gap: 0.5rem; }
    .shell-sub { display: none; }
    .shell-actions { gap: 0.9rem; }
    .options-pop { position: fixed; top: 3.35rem; left: 0.75rem; right: 0.75rem; width: auto; }
    .bench { flex: none; overflow: visible; padding: 0.75rem; }
    .bench-bar { flex-wrap: wrap; }
    .bench-main, .mode-advanced .bench-main, body.compact .mode-advanced .bench-main { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .col-out { overflow: visible; }
    .intro-top { display: block; }
    .intro-side { display: none; }
    .bench-main { contain: none; flex: none; }
    .mod-list { flex: 0 0 auto; max-height: 60vh; }
    .pack-wrap { width: 100%; max-height: none; }
    .hero-main { grid-template-columns: minmax(0, 1fr); }
    .hero-side { flex-direction: row; align-items: center; justify-content: space-between; }
    .hero-copy { height: 2.5rem; }
    .shell-foot { padding: 0.5rem 0.75rem 4.5rem; }
    .foot-reset { margin-left: 0; }
    .dlg, .dlg-builder { width: 100%; max-height: none; }
    .dlg.dlg-import {
        height: min(78vh, 34rem);
        height: min(78dvh, 34rem);
        max-height: 88vh;
        max-height: 88dvh;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .dlg-import textarea { min-height: 6rem; }
    .builder-cols { flex-direction: column; }
    .builder-right .iprev { max-height: none; }
}

/* Touch devices: the native picker is the control; the styled face sits under
   a transparent select so tapping opens the OS picker instead of a listbox. */
@media (pointer: coarse) {
    .guide-pick-desktop { display: none; }
    .guide-pick-mobile { position: relative; display: block; flex: 1 1 16rem; min-width: 0; }
    .guide-pick-native {
        display: block;
        position: absolute; inset: 0; width: 100%; height: 100%;
        opacity: 0; cursor: pointer;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tool-chev { transition: none; }
}

/* Forge loading screen; keeps its own dark palette. */
.forge-loader{
  --forge-size:min(380px,82vw);
  --forge-dur:1.4s;
  --iron-hi:#aab4c2;--iron-lo:#566070;--iron-edge:#0b0d11;
  --wood-hi:#86603a;--wood-lo:#52371f;
  --spark-hi:#fff1b8;--spark-lo:#ff9a22;
  --shadow:rgba(0,0,0,.5);
  width:var(--forge-size);display:grid;justify-items:center;gap:6px;
  font:500 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;color:var(--loader-ink);
}
.forge-loader svg{display:block;width:100%;height:auto;overflow:visible}
.forge-loader .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.forge-loader .shadow{fill:var(--shadow)}
.forge-loader .grain{fill:none;stroke:#000;stroke-opacity:.2;stroke-width:1.2;stroke-linecap:round}
.forge-loader .anvil,.forge-loader .head{stroke:var(--iron-edge);stroke-width:1.5;stroke-linejoin:round}
.forge-loader .anvil{fill:url(#fg-iron)}
.forge-loader .head{fill:url(#fg-iron-h)}
.forge-loader .shine{fill:none;stroke:#fff;stroke-opacity:.35;stroke-width:1.6;stroke-linecap:round}
.forge-loader .bevel{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:1;stroke-linecap:round}
.forge-loader .notch{fill:var(--iron-edge)}
.forge-loader .grip{fill:#3d2b20}
.forge-loader .hot{fill:#fff1b8;opacity:0}
.forge-loader .star{fill:var(--spark-hi)}
.forge-loader .flash{opacity:0}
.forge-loader .glow{opacity:.45}
.forge-loader .label{margin:0}
.forge-loader .label i{font-style:normal;opacity:.25}

.forge-loader .hammer{transform:rotate(54deg);animation:fg-swing var(--forge-dur) infinite}
.forge-loader .body{animation:fg-jolt var(--forge-dur) linear infinite}
.forge-loader .bar{animation:fg-squash var(--forge-dur) linear infinite}
.forge-loader .glow{animation:fg-glow var(--forge-dur) ease-out infinite}
.forge-loader .hot{animation:fg-hot var(--forge-dur) linear infinite}
.forge-loader .flash{animation:fg-flash var(--forge-dur) linear infinite}
.forge-loader .s{opacity:0;animation:fg-fly var(--forge-dur) linear var(--d,0s) infinite}
.forge-loader .s>*{transform:rotate(var(--a0));animation:fg-turn var(--forge-dur) linear var(--d,0s) infinite}
.forge-loader .label i{animation:fg-dot var(--forge-dur) linear infinite}
.forge-loader .label i:nth-child(2){animation-delay:.06s}
.forge-loader .label i:nth-child(3){animation-delay:.12s}

@keyframes fg-swing{
  0%{transform:rotate(54deg);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
  38%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  46%{transform:rotate(6deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  88%,100%{transform:rotate(54deg)}
}
@keyframes fg-jolt{0%,37.9%{transform:none}39.5%{transform:translateY(1.6px)}41.5%{transform:translateY(-1px)}44%{transform:translateY(.5px)}47%,100%{transform:none}}
@keyframes fg-squash{0%,37.9%{transform:none}38%{transform:scale(1.05,.82)}47%{transform:scale(1.01,.96)}55%,100%{transform:none}}
@keyframes fg-glow{0%,37.9%{opacity:.45}38%{opacity:1}72%,100%{opacity:.45}}
@keyframes fg-hot{0%,37.9%{opacity:0}38%{opacity:1}64%,100%{opacity:0}}
@keyframes fg-flash{0%,37.9%{opacity:0;transform:scale(.3)}38%{opacity:1;transform:scale(.5)}42%{opacity:.85;transform:scale(1.15)}48%,100%{opacity:0;transform:scale(1.5)}}
@keyframes fg-fly{
  0%,37.9%{opacity:0;transform:translate(0,0)}
  38%{opacity:1;transform:translate(0,0) scale(1)}
  44%{transform:translate(calc(var(--x) * .28),calc(var(--u) * -.28 + var(--f) * .04)) scale(1)}
  50%{transform:translate(calc(var(--x) * .52),calc(var(--u) * -.52 + var(--f) * .16)) scale(1)}
  56%{opacity:1;transform:translate(calc(var(--x) * .72),calc(var(--u) * -.72 + var(--f) * .36)) scale(.9)}
  62%{transform:translate(calc(var(--x) * .88),calc(var(--u) * -.88 + var(--f) * .64)) scale(.75)}
  68%,100%{opacity:0;transform:translate(var(--x),calc(var(--f) - var(--u))) scale(.5)}
}
@keyframes fg-turn{0%,38%{transform:rotate(var(--a0))}68%,100%{transform:rotate(var(--a1))}}
@keyframes fg-dot{0%,37.9%{opacity:.25}38%,70%{opacity:1}80%,100%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  .forge-loader .hammer{animation:none;transform:rotate(28deg)}
  .forge-loader :is(.body,.bar,.hot,.flash,.s,.s>*,.label i){animation:none}
  .forge-loader .label i{opacity:.7}
  .forge-loader .glow{animation:fg-breathe 2.4s ease-in-out infinite}
}
@keyframes fg-breathe{0%,100%{opacity:.35}50%{opacity:1}}