/* Palette swatches: the main colour chip and the 8-band strip beside a Slot Exact Palette value.
   Colours arrive as the --sw custom property, written through CSSOM by PaletteSwatch.tsx (the page's
   style-src 'self' blocks style attributes). Kept apart from loot-editor.css / loot-form.css on purpose. */
.lp-swatch { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; vertical-align: middle; }
/* The swatch sits beside the input in a row, so validation text under the field never moves it. */
.lf-input-row { display: flex; align-items: center; gap: 8px; }
.lf-input-row > input { flex: 1 1 auto; min-width: 0; }
.lp-main { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.35); background: var(--sw, transparent); }
.lp-bands { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 3px; overflow: hidden; }
.lp-band { width: 10px; height: 18px; background: var(--sw, transparent); }
.lp-band + .lp-band { border-left: 1px solid rgba(0, 0, 0, 0.35); }
/* A band no item draws equals the main colour: grey it out and hatch it so it reads as absent. */
.lp-band.lp-unused {
    opacity: 0.35;
    filter: grayscale(1);
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 4px);
    background-color: var(--sw, transparent);
}
.lp-unknown { font-size: 12px; color: var(--muted, #8a8f98); }
.lp-num { font-variant-numeric: tabular-nums; }
.lp-note { font-style: italic; }