/* ── Swatch pickers ───────────────────────────────────────────────────────
   A dropdown that shows what it is choosing. Shaped to match the <select>s
   beside it — same height, border, chevron — so a row of controls still reads
   as one set. A <details> carries the open state, which means the summary is
   focusable and Escape-dismissable without any of that being written by hand.

   Shared by every map generator that offers color and texture choices, so the
   widget cannot drift between the pages that use it. Palette variables come
   from app-shell.css; this file adds no colors of its own. */

.swatch-picker { position: relative; min-width: 0; }

.swatch-trigger {
    height: 2.4rem; box-sizing: border-box; width: 100%;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 2rem 0.4rem 0.5rem;
    border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm);
    background: var(--maroon-deep); color: var(--silver);
    cursor: pointer; list-style: none; text-align: left;
    font: inherit; transition: border-color 0.15s;
}
.swatch-trigger::-webkit-details-marker { display: none; }
.swatch-trigger::after {
    content: "\25BE"; position: absolute; right: 0.7rem; top: 0.6rem;
    color: var(--silver-dim); pointer-events: none;
}
.swatch-picker[open] .swatch-trigger { border-color: var(--gold); }
.swatch-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* In the flow, not floating. A floating list is the nicer shape, but the
   settings pane it lives in is an `overflow: auto` scroller, so an absolutely
   positioned list is clipped at the pane's edge — several of the colors were
   simply unreachable. Opening in the flow grows the row instead, which the pane
   can scroll, and nothing can cut off. */
.swatch-list {
    margin-top: 0.25rem;
    max-height: 13rem; overflow-y: auto; padding: 0.25rem;
    border: 1px solid var(--gold); border-radius: var(--radius-sm);
    background: var(--maroon-deep);
}
.swatch-option {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.3rem 0.4rem; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--silver); font: inherit; text-align: left;
    cursor: pointer;
}
.swatch-option:hover, .swatch-option:focus-visible {
    background: rgba(230, 192, 74, 0.14); color: var(--gold); outline: none;
}
.swatch-option[aria-selected="true"] { color: var(--gold); }
.swatch-option[aria-selected="true"]::after { content: "\2713"; margin-left: auto; }

/* The chip itself. A checkerboard sits under it so a white swatch is still
   visibly a swatch against the dark dialog rather than a hole. */
.swatch-chip {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 3px;
    border: 1px solid var(--maroon-edge);
    background-color: #fff;
    background-image: linear-gradient(45deg, #d9d4cc 25%, transparent 25%, transparent 75%, #d9d4cc 75%),
                      linear-gradient(45deg, #d9d4cc 25%, transparent 25%, transparent 75%, #d9d4cc 75%);
    background-size: 8px 8px; background-position: 0 0, 4px 4px;
}
/* 48px is the repeat the map itself draws these at, so a 24px chip shows one
   grid cell of floor at true scale — the grain you will actually get, rather
   than the whole tile squeezed down to a smudge. */
.swatch-chip.is-image { background-size: 48px 48px; background-position: center; }