/*
  Roll20 Token Maker — Grimoire Design System
  All values use semantic tokens from packages/grimoire/tokens/tokens.css
  No hardcoded hex, rgba, or px values for design properties.
*/

/* ─── Grimoire Token Definitions (Dark mode — dark-first) ─── */
:root {
  color-scheme: dark;

  /* Surface */
  --color-surface-page:            #111111;
  --color-surface-container:       #171717;
  --color-surface-raised:          #1E1E1E;
  --color-surface-elevated:        #252525;
  --color-surface-sunken:          #111111;
  --color-surface-tooltip:         #F5F5F5;
  --color-surface-brand-tint:      #130719;
  --color-surface-brand-subtle:    #E4D7EA;
  --color-surface-glass-container: #1E1E1EB2;
  --color-surface-glass-raised:    #1E1E1ECC;
  --color-surface-glass-elevated:  #1E1E1EE5;
  --color-surface-glass-sunken:    #1E1E1E99;

  /* Text */
  --color-text-default:            #E6E6E6;
  --color-text-subtle:             #C2C2C2;
  --color-text-tertiary:           #A9A9A9;
  --color-text-placeholder:        #8A8A8A;
  --color-text-disabled:           #5A5A5A;
  --color-text-link:               #BA9ACA;
  --color-text-brand:              #BA9ACA;
  --color-text-destructive:        #EDACB0;
  --color-text-on-brand:           #FFFFFF;
  --color-text-always-dark:        #000000;
  --color-text-invert:             #000000;
  --color-text-on-ghost:           #E6E6E6;

  /* Action */
  --color-action-primary:          #702C91;
  --color-action-primary-hover:    #9867B0;
  --color-action-secondary:        #9867B0;
  --color-action-tertiary:         #BA9ACA;
  --color-action-ghost-hover:      #FFFFFF1A;
  --color-action-ghost:            #363636;
  --color-action-tab-hover:        #D1BBDC;
  --color-action-destructive:      #AA4146;
  --color-action-destructive-hover:#DA535A;
  --color-action-success:          #148748;
  --color-action-success-hover:    #1AAD5C;
  --color-action-disabled:         #A9A9A9;
  --color-action-on-primary:       #FFFFFF;
  --color-action-on-secondary:     #FFFFFF;
  --color-action-on-tertiary:      #BA9ACA;
  --color-action-on-disabled:      #5A5A5A;

  /* Border */
  --color-border-default:          #8A8A8A;
  --color-border-subtle:           #5A5A5A;
  --color-border-focus:            #D1BBDC;
  --color-border-focus-agnostic:   #E6E6E6;
  --color-border-brand:            #9867B0;
  --color-border-destructive:      #EDACB0;
  --color-border-success:          #B6E5CB;

  /* Icon */
  --color-icon-default:            #C2C2C2;
  --color-icon-subtle:             #8A8A8A;
  --color-icon-brand:              #BA9ACA;
  --color-icon-on-brand:           #FFFFFF;
  --color-icon-destructive:        #E48388;
  --color-icon-disabled:           #5A5A5A;

  /* Control */
  --color-control-surface-on:      #702C91;
  --color-control-surface-off:     #404040;
  --color-control-thumb:           #FFFFFF;
  --color-control-track:           #262626;
  --color-control-scrollbar:       #5A5A5A;

  /* Feedback */
  --color-feedback-error-fg:       #EDACB0;
  --color-feedback-error-bg:       #250504;
  --color-feedback-info-fg:        #ADDDF6;
  --color-feedback-info-bg:        #0E1F28;
  --color-feedback-success-fg:     #5AC48A;
  --color-feedback-success-bg:     #041D10;

  /* Premium */
  --color-premium-fg:              #FFEBB6;
  --color-premium-bg:              #2B1D00;
  --color-premium-icon:            #FFE291;
  --color-premium-chip:            #473000;

  /* Overlay */
  --color-overlay-grayscale-xxs:   #FFFFFF0D;
  --color-overlay-grayscale-xs:    #FFFFFF1A;
  --color-overlay-grayscale-sm:    #FFFFFF33;
  --color-overlay-grayscale-md:    #FFFFFF4D;
  --color-overlay-grayscale-lg:    #FFFFFF80;
  --color-overlay-grayscale-xl:    #FFFFFFCC;
  --color-overlay-brighten-xs:     #FFFFFF1A;
  --color-overlay-brighten-sm:     #FFFFFF33;

  /* Spacing */
  --spacing-0:   0px;
  --spacing-2:   2px;
  --spacing-4:   4px;
  --spacing-6:   6px;
  --spacing-8:   8px;
  --spacing-10:  10px;
  --spacing-12:  12px;
  --spacing-14:  14px;
  --spacing-16:  16px;
  --spacing-20:  20px;
  --spacing-24:  24px;
  --spacing-28:  28px;
  --spacing-32:  32px;

  /* Border Radius */
  --rounded-0:    0px;
  --rounded-xs:   4px;
  --rounded-sm:   6px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-2xl:  24px;
  --rounded-3xl:  32px;
  --rounded-full: 9999px;

  /* Border Width */
  --border-xs: 0.5px;
  --border-sm: 1px;
  --border-md: 2px;
  --border-lg: 3px;
  --border-xl: 4px;

  /* Component Height */
  --height-16: 16px;
  --height-18: 18px;
  --height-28: 28px;
  --height-30: 30px;
  --height-32: 32px;
  --height-34: 34px;
  --height-36: 36px;
  --height-46: 46px;
  --height-54: 54px;
  --height-64: 64px;

  /* Typography — Families */
  --family-Brand:       'nunito', sans-serif;
  --family-Sans-Serif:  'proxima-nova', sans-serif;
  --family-Condensed:   'proxima-nova-condensed', sans-serif;
  --family-Monospace:   'roboto-mono', monospace;

  /* Typography — Size scale */
  --size-2xs: 8px;
  --size-xs:  10px;
  --size-sm:  13px;
  --size-md:  16px;
  --size-lg:  20px;
  --size-xl:  25px;
  --size-2xl: 31px;
  --size-3xl: 39px;

  /* Typography — Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Shadows — Dark mode */
  --shadow-sm: 0 1px 2px rgba(31,41,55,0.08);
  --shadow-md: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.20);
  --shadow-xl: 0 12px 17px rgba(0,0,0,0.14), 0 5px 22px rgba(0,0,0,0.12), 0 7px 8px rgba(0,0,0,0.20);

  /* Motion */
  --motion-duration-fast:   200ms;
  --motion-duration-normal: 300ms;
  --motion-duration-slow:   500ms;
  --motion-easing-default:  ease-out;
  --motion-easing-in-out:   ease-in-out;
  --motion-easing-enter:    cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* Z-index scale */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-popover:  300;
  --z-modal:    400;
  --z-overlay:  500;
  --z-dialog:   600;

  /* App shell height token */
  --app-shell-h: 52px;
}

/* ─── Light mode overrides ─── */
[data-theme="light"] {
  color-scheme: light;
  --color-surface-page:            #FFFFFF;
  --color-surface-container:       #FFFFFF;
  --color-surface-raised:          #FFFFFF;
  --color-surface-elevated:        #FFFFFF;
  --color-surface-sunken:          #F9FAFB;
  --color-surface-brand-tint:      #F8E8F2;
  --color-text-default:            #141414;
  --color-text-subtle:             #262626;
  --color-text-tertiary:           #404040;
  --color-text-placeholder:        #595959;
  --color-text-disabled:           #999999;
  --color-text-link:               #B4006A;
  --color-text-brand:              #87004F;
  --color-action-primary:          #B4006A;
  --color-action-primary-hover:    #BB1A79;
  --color-border-default:          #737373;
  --color-border-subtle:           #C7C7C7;
  --color-border-focus:            #DB85B7;
  --color-border-brand:            #BB1A79;
  --shadow-md: 0 2px 4px rgba(31,41,55,0.06), 0 4px 6px rgba(31,41,55,0.10);
  --shadow-lg: 0 10px 15px rgba(31,41,55,0.10), 0 0px 6px rgba(31,41,55,0.05);
  --shadow-xl: 0 20px 25px rgba(31,41,55,0.10), 0 10px 10px rgba(31,41,55,0.04);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface-page);
  color: var(--color-text-default);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-md);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top bar ─── */
.app-shell__bar {
  height: var(--app-shell-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-20);
  border-bottom: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-container);
  flex-shrink: 0;
}

.app-shell__brand {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-12);
}

.app-shell__title {
  margin: 0;
  font-family: var(--family-Brand);
  font-size: var(--size-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  color: var(--color-text-default);
  line-height: 1.2;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-4);
  letter-spacing: -0.02em;
}

.brand-mark svg {
  height: 1.2em;
  width: auto;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

/* ─── Layout: workspace | inspector ─── */
.layout {
  display: grid;
  grid-template-columns: 1fr minmax(292px, 392px);
  grid-template-areas: "workspace inspector";
  align-items: stretch;
  height: calc(100dvh - var(--app-shell-h));
  max-height: calc(100dvh - var(--app-shell-h));
  min-height: 0;
  overflow: hidden;
}

.workspace {
  grid-area: workspace;
  padding: var(--spacing-16) var(--spacing-20) var(--spacing-20);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-12);
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background: radial-gradient(
    120% 80% at 50% -10%,
    var(--color-surface-brand-tint) 0%,
    var(--color-surface-page) 55%
  );
}

.casting-stage,
.sign-in-prompt--workspace {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.inspector {
  grid-area: inspector;
  border-left: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-container);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  max-height: 100%;
  overscroll-behavior: contain;
}

/* ─── Inspector tabs (Grimoire Tab spec) ─── */
.inspector-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0;
  padding: 0 var(--spacing-8);
  border-bottom: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-container);
}

.inspector-tabs__btn {
  flex: 1 1 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-transform: none;
  padding: var(--spacing-12) var(--spacing-8);
  border: none;
  border-bottom: var(--border-md) solid transparent;
  margin-bottom: calc(-1 * var(--border-sm));
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
  white-space: nowrap;
}

.inspector-tabs__btn:hover {
  color: var(--color-text-subtle);
  border-bottom-color: var(--color-border-subtle);
}

.inspector-tabs__btn.is-active {
  color: var(--color-text-default);
  border-bottom-color: var(--color-border-brand);
}

.inspector-tabs__btn:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: -2px;
  box-shadow: none;
  border-radius: var(--rounded-xs) var(--rounded-xs) 0 0;
}

/* ─── Inspector panels ─── */
.inspector-panels {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.inspector-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-16);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-control-scrollbar) transparent;
}

.inspector-panel::-webkit-scrollbar { width: 4px; }
.inspector-panel::-webkit-scrollbar-track { background: transparent; }
.inspector-panel::-webkit-scrollbar-thumb {
  background: var(--color-control-scrollbar);
  border-radius: var(--rounded-full);
}

.inspector-panel.is-active {
  display: block;
}

.inspector-panel > .inspector__block > .inspector__heading {
  display: none;
}

.sign-in-prompt--workspace {
  display: block;
}

/* ─── Inspector section blocks ─── */
.inspector__block {
  padding: var(--spacing-12) 0;
  border-bottom: var(--border-sm) solid var(--color-border-subtle);
}

.inspector__block:last-child,
.inspector__block--footer {
  border-bottom: none;
  padding-bottom: var(--spacing-4);
}

.inspector__heading {
  margin: 0 0 var(--spacing-10);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ─── Form fields ─── */
.field label,
label.library-section__title {
  display: block;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  color: var(--color-text-subtle);
  margin-bottom: var(--spacing-6);
}

.field .library-section__title {
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-transform: none;
  color: var(--color-text-default);
  margin-bottom: var(--spacing-8);
}

.field--spaced {
  margin-top: var(--spacing-20);
}

/* ─── Inputs (Grimoire Field + Input spec) ─── */
input[type="search"],
input[type="number"] {
  width: 100%;
  height: var(--height-36);
  padding: 0 var(--spacing-12);
  border-radius: var(--rounded-sm);
  border: var(--border-sm) solid var(--color-border-default);
  background: var(--color-surface-sunken);
  color: var(--color-text-default);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-regular);
  line-height: var(--height-36);
  box-sizing: border-box;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

input[type="search"]::placeholder,
input[type="number"]::placeholder {
  color: var(--color-text-placeholder);
}

input[type="search"]:hover,
input[type="number"]:hover {
  border-color: var(--color-border-default);
}

input[type="search"]:focus-visible,
input[type="number"]:focus-visible {
  outline: none;
  border-width: var(--border-md);
  border-color: var(--color-border-focus);
  box-shadow: none;
}

/* ─── Range sliders ─── */
input[type="range"] {
  width: 100%;
  accent-color: var(--color-action-primary);
  cursor: pointer;
}

input[type="color"] {
  width: 34px;
  height: var(--height-28);
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-xs);
  padding: 0;
  background: var(--color-surface-page);
  cursor: pointer;
}

/* ─── Buttons — Primary (Grimoire Button spec) ─── */
button.primary {
  font-family: var(--family-Brand);
  font-size: var(--size-md);
  font-weight: var(--weight-black);
  letter-spacing: 0.02em;
  width: 100%;
  height: var(--height-46);
  padding: 0 var(--spacing-16);
  border-radius: var(--rounded-md);
  border: none;
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.primary:hover:not(:disabled) {
  background: var(--color-action-primary-hover);
}

button.primary:disabled {
  background: var(--color-action-disabled);
  color: var(--color-action-on-disabled);
  cursor: not-allowed;
}

button.primary:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Buttons — Secondary ─── */
button.secondary {
  font-family: var(--family-Brand);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  width: 100%;
  height: var(--height-46);
  padding: 0 var(--spacing-16);
  border-radius: var(--rounded-md);
  border: var(--border-sm) solid var(--color-border-brand);
  background: transparent;
  color: var(--color-action-on-secondary);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.secondary:hover:not(:disabled) {
  background: var(--color-action-ghost-hover);
}

button.secondary:disabled {
  border-color: var(--color-border-subtle);
  color: var(--color-action-on-disabled);
  cursor: not-allowed;
  opacity: 1;
}

button.secondary:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Casting stage ─── */
.is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.casting-stage {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.casting-stage__hero {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6) var(--spacing-8) var(--spacing-4);
  overflow: visible;
}

.casting-stage__canvas-wrap {
  position: relative;
  flex: 0 0 auto;
  width: min(calc(100vw - 1.5rem), 36dvh, 320px);
  aspect-ratio: 1;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--spacing-6);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (min-width: 921px) {
  .casting-stage {
    flex: 1 1 auto;
  }

  .casting-stage__hero {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--spacing-12) var(--spacing-16) var(--spacing-6);
    overflow-x: visible;
    overflow-y: hidden;
    container-type: size;
    container-name: casting-hero;
  }

  .casting-stage__canvas-wrap {
    width: min(100cqw, 100cqh, 640px);
    padding: clamp(0.75rem, 2.5vmin, 1.25rem);
  }
}

@supports not (width: 1cqw) {
  @media (min-width: 921px) {
    .casting-stage__canvas-wrap {
      width: min(100%, calc(100dvh - var(--app-shell-h) - 14rem), 640px);
      aspect-ratio: 1;
      height: auto;
    }
  }
}

.casting-stage__map-inset {
  position: absolute;
  right: clamp(-0.85rem, -2vmin, -0.35rem);
  bottom: clamp(0.35rem, 1.5vmin, 0.75rem);
  width: 70px;
  height: 70px;
  border-radius: var(--rounded-full);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: var(--z-base);
  background: var(--color-surface-page);
}

.casting-stage__favorite {
  position: absolute;
  top: clamp(0.35rem, 1.5vmin, 0.75rem);
  right: clamp(-0.85rem, -2vmin, -0.35rem);
  z-index: var(--z-base);
  width: var(--height-36);
  height: var(--height-36);
  border-radius: var(--rounded-full);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-glass-elevated);
  color: var(--color-icon-subtle);
  font-size: var(--size-lg);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default),
    color var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.casting-stage__favorite:hover {
  background: var(--color-surface-elevated);
  color: var(--color-icon-default);
  border-color: var(--color-border-default);
}

.casting-stage__favorite.is-active {
  color: var(--color-premium-fg);
  border-color: var(--color-color-border-brand);
}

.casting-stage__favorite:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.casting-stage__favorite.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.casting-stage__hint-bar {
  position: relative;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-8);
  padding: var(--spacing-6) var(--spacing-12);
  border-radius: var(--rounded-sm);
  background: var(--color-surface-elevated);
  border: var(--border-sm) solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}

.casting-stage__hint-bar[hidden] {
  display: none !important;
}

.casting-stage__hint {
  margin: 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
  line-height: 1.35;
}

.casting-stage__hint--error {
  color: var(--color-feedback-error-fg);
}

.casting-stage__hint-dismiss {
  flex-shrink: 0;
  width: var(--height-28);
  height: var(--height-28);
  padding: 0;
  border: none;
  border-radius: var(--rounded-xs);
  background: transparent;
  color: var(--color-icon-subtle);
  font-size: var(--size-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.casting-stage__hint-dismiss:hover {
  color: var(--color-icon-default);
  background: var(--color-overlay-grayscale-xs);
}

.casting-stage__hint-dismiss:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 920px), (max-height: 800px) {
  .casting-stage__map-inset {
    display: none;
  }
}

.casting-stage__map-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--rounded-full);
  background:
    linear-gradient(var(--color-overlay-grayscale-xxs) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-overlay-grayscale-xxs) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.55;
  pointer-events: none;
}

#preview-map {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--rounded-full);
}

canvas#preview {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: var(--rounded-xs);
  cursor: grab;
  touch-action: none;
  box-shadow: var(--shadow-xl);
  background: repeating-conic-gradient(
    var(--color-surface-elevated) 0% 25%,
    var(--color-surface-raised) 0% 50%
  ) 50% / 14px 14px;
}

canvas#preview.dragging {
  cursor: grabbing;
}

/* ─── Variation dock ─── */
.variation-dock {
  --variation-swatch-size: 4.1rem;
  --variation-row-scrollbar: 12px;
  --variation-row-pad-top: 3px;
  --variation-row-pad-bottom: 6px;
  --variation-row-height: calc(
    var(--variation-swatch-size)
    + var(--variation-row-pad-top)
    + var(--variation-row-pad-bottom)
    + var(--variation-row-scrollbar)
  );
  display: grid;
  grid-template-rows: auto var(--variation-row-height);
  flex-shrink: 0;
  border-top: var(--border-sm) solid var(--color-border-subtle);
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-12);
  background: var(--color-surface-raised);
}

.variation-dock.is-empty {
  grid-template-rows: auto 0px;
}

.variation-dock.is-empty .variation-dock__panel {
  height: 0;
  max-height: 0;
  overflow: hidden;
}

.variation-dock.is-empty .variation-dock__row {
  min-height: 0;
  height: 0;
}

.variation-dock__head {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-8);
  min-width: 0;
}

/* Variation dock tabs — pill toggle style */
.variation-dock__tabs {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-radius: var(--rounded-sm);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-sunken);
}

.variation-dock__tab {
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-transform: none;
  padding: var(--spacing-4) var(--spacing-10);
  border: none;
  border-radius: var(--rounded-xs);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition:
    color var(--motion-duration-fast) var(--motion-easing-default),
    background var(--motion-duration-fast) var(--motion-easing-default);
}

.variation-dock__tab.is-active {
  color: var(--color-text-default);
  background: var(--color-action-ghost);
}

.variation-dock__tab:hover:not(.is-active) {
  color: var(--color-text-subtle);
}

.variation-dock__tab:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.variation-dock__context {
  margin: 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-tertiary);
  line-height: 1.3;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.variation-dock__context.is-hidden {
  display: none;
}

.variation-dock__context a {
  color: var(--color-text-link);
  text-decoration: none;
}

.variation-dock__context a:hover {
  text-decoration: underline;
}

.variation-dock__panel {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.variation-dock__panel[hidden] {
  display: none !important;
}

.variation-dock__scroller {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.variation-dock__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: var(--variation-row-pad-top) 0 var(--variation-row-pad-bottom);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-control-scrollbar) transparent;
}

.variation-dock__row::-webkit-scrollbar {
  height: var(--variation-row-scrollbar);
}

.variation-dock__row::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--rounded-full);
}

.variation-dock__row::-webkit-scrollbar-thumb {
  background: var(--color-control-scrollbar);
  border-radius: var(--rounded-full);
}

.variation-swatch-item {
  position: relative;
  flex: 0 0 var(--variation-swatch-size);
  width: var(--variation-swatch-size);
  scroll-snap-align: start;
}

.variation-swatch-item--breakout-host {
  z-index: 1;
}

.variation-swatch-item--breakout-host:has(.is-selected) {
  z-index: 2;
}

.variation-swatch-item--breakout-host .thumb-breakout-chip {
  bottom: var(--spacing-4);
  font-size: var(--size-xs);
  padding: var(--spacing-2) var(--spacing-4);
}

.variation-swatch-item--buy-more {
  scroll-snap-align: start;
}

.variation-buy-more {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--variation-swatch-size);
  padding: var(--spacing-4);
  border-radius: var(--rounded-sm);
  border: var(--border-sm) dashed var(--color-border-brand);
  background: transparent;
  color: var(--color-text-brand);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.variation-buy-more:hover {
  background: var(--color-action-ghost-hover);
  border-color: var(--color-action-primary-hover);
}

.variation-buy-more:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.variation-swatch {
  position: relative;
  width: 100%;
  height: var(--variation-swatch-size);
  padding: 0;
  border: var(--border-sm) solid transparent;
  border-radius: var(--rounded-sm);
  background: var(--color-surface-page);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default),
    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
}

.variation-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.variation-swatch:hover {
  border-color: var(--color-border-subtle);
}

.variation-swatch.is-selected {
  border-color: var(--color-border-brand);
  border-width: var(--border-md);
}

.variation-swatch--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.variation-swatch--locked:hover {
  border-color: transparent;
}

.variation-swatch:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

@media (max-width: 920px) {
  .variation-dock {
    --variation-swatch-size: 3.35rem;
  }
}

/* ─── Thumb grid ─── */
.thumb-grid {
  --tg-gap: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--tg-cell-px, 64px);
  align-items: stretch;
  justify-items: stretch;
  gap: var(--tg-gap);
  height: var(--tg-strip-h-px, 216px);
  max-height: var(--tg-strip-h-px, 216px);
  min-height: 0;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--spacing-2);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-control-scrollbar) transparent;
}

.thumb-grid::-webkit-scrollbar { width: 4px; }
.thumb-grid::-webkit-scrollbar-track { background: transparent; }
.thumb-grid::-webkit-scrollbar-thumb {
  background: var(--color-control-scrollbar);
  border-radius: var(--rounded-full);
}

/* ─── Thumb item ─── */
.thumb {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: var(--border-sm) solid transparent;
  border-radius: var(--rounded-xs);
  padding: 0;
  cursor: pointer;
  background: var(--color-surface-page);
  overflow: hidden;
  flex-shrink: 0;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default),
    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--rounded-xs) - 1px);
}

.thumb:hover {
  border-color: var(--color-border-subtle);
}

.thumb[aria-pressed="true"] {
  border-color: var(--color-border-brand);
  border-width: var(--border-md);
}

.thumb--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.thumb--locked:hover {
  border-color: transparent;
}

.thumb-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-lg);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.thumb-none-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.25;
  padding: var(--spacing-4);
  color: var(--color-text-tertiary);
  white-space: pre-line;
}

.thumb--upload {
  background: var(--color-overlay-grayscale-xxs);
  border-style: dashed;
  border-color: var(--color-border-subtle);
  cursor: pointer;
}

.thumb--upload:hover {
  border-color: var(--color-border-brand);
  background: var(--color-action-ghost-hover);
}

.thumb--upload[aria-pressed="true"] {
  border-style: solid;
}

.thumb-upload-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-align: center;
  line-height: 1.2;
  padding: var(--spacing-4);
  color: var(--color-text-tertiary);
  white-space: pre-line;
  pointer-events: none;
}

.thumb-upload-icon {
  display: block;
  font-size: var(--size-lg);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-icon-brand);
  margin-bottom: var(--spacing-2);
}

.thumb--custom {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
}

.thumb--custom.is-selected .thumb__pick {
  outline: var(--border-md) solid var(--color-border-brand);
  outline-offset: -2px;
}

.thumb--custom .thumb__pick {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
  display: block;
}

.thumb--custom .thumb__pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.thumb-custom-delete {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 2;
  width: var(--height-18);
  height: var(--height-18);
  padding: 0;
  border: none;
  border-radius: var(--rounded-full);
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-text-on-brand);
  font-size: var(--size-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
}

.thumb--custom:hover .thumb-custom-delete,
.thumb--custom:focus-within .thumb-custom-delete {
  opacity: 1;
}

.thumb-custom-delete:hover {
  background: var(--color-action-destructive);
}

.thumb-upload-badge {
  position: absolute;
  bottom: var(--spacing-2);
  right: var(--spacing-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--height-16);
  height: var(--height-16);
  border-radius: var(--rounded-xs);
  background: var(--color-surface-elevated);
  border: var(--border-sm) solid var(--color-border-subtle);
  font-size: var(--size-xs);
  font-weight: var(--weight-bold);
  color: var(--color-icon-brand);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ─── Breakout chip ─── */
.thumb-breakout-chip {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: var(--spacing-2) var(--spacing-6);
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-xs);
  background: var(--color-surface-glass-elevated);
  color: var(--color-text-tertiary);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default),
    color var(--motion-duration-fast) var(--motion-easing-default),
    background var(--motion-duration-fast) var(--motion-easing-default);
}

.thumb-breakout-chip__label {
  display: block;
}

.thumb-breakout-chip.is-locked .thumb-breakout-chip__label {
  opacity: 0.6;
}

.thumb-breakout-chip__lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--height-18);
  min-height: var(--height-18);
  padding: var(--spacing-2) var(--spacing-4);
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-xs);
  background: var(--color-surface-elevated);
  font-size: var(--size-sm);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.thumb-breakout-chip:hover {
  border-color: var(--color-border-default);
  color: var(--color-text-default);
}

.thumb-breakout-chip.is-on {
  border-color: var(--color-border-brand);
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
  font-weight: var(--weight-bold);
}

.thumb-breakout-chip:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.thumb-breakout-tip-float {
  position: fixed;
  z-index: var(--z-popover);
  transform: translate(-50%, -100%);
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--rounded-xs);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  color: var(--color-text-default);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}

.thumb--none.thumb--locked .thumb-none-label {
  color: var(--color-text-tertiary);
}

/* ─── Mixer panel ─── */
.inspector__block--mixer {
  padding-bottom: var(--spacing-12);
}

.mixer-panel {
  position: relative;
  border-radius: var(--rounded-lg);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-14);
  overflow: hidden;
}

.mixer-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
  padding: 0 var(--spacing-2);
}

.mixer-panel__title {
  margin: 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Reset view button — Tertiary style */
.mixer-pad {
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  padding: var(--spacing-4) var(--spacing-10);
  border-radius: var(--rounded-full);
  border: var(--border-sm) solid var(--color-border-brand);
  background: transparent;
  color: var(--color-action-on-tertiary);
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
  height: var(--height-28);
  display: inline-flex;
  align-items: center;
}

.mixer-pad:hover {
  background: var(--color-action-ghost-hover);
}

.mixer-pad:active {
  background: var(--color-overlay-grayscale-xs);
}

.mixer-pad:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.mixer-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.mixer-channel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-10);
  border-radius: var(--rounded-md);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-raised);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.mixer-channel:hover {
  border-color: var(--color-border-default);
}

.mixer-channel:focus-within {
  border-color: var(--color-border-brand);
}

.mixer-channel--portrait {
  --channel-accent: var(--color-icon-brand);
}

.mixer-channel--frame {
  --channel-accent: var(--color-border-focus);
}

.mixer-channel__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--channel-accent);
  padding-bottom: var(--spacing-4);
  border-bottom: var(--border-sm) solid var(--color-border-subtle);
}

.mixer-channel__badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--rounded-full);
  background: var(--channel-accent);
  animation: mixer-led 2.4s ease-in-out infinite;
}

@keyframes mixer-led {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.mixer-control__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

.mixer-control__label {
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mixer-lcd {
  font-family: var(--family-Monospace);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--channel-accent, var(--color-icon-brand));
  min-width: 2.6rem;
  text-align: right;
}

.mixer-control__slider {
  display: flex;
  align-items: center;
}

.mixer-control input[type="range"] {
  width: 100%;
  flex: 1;
  min-width: 0;
  accent-color: var(--color-action-primary);
}

.mixer-control.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mixer-control.is-disabled .mixer-lcd {
  color: var(--color-text-disabled);
}

@media (max-width: 360px) {
  .mixer-channels {
    grid-template-columns: 1fr;
  }
}

/* ─── Look panel ─── */
.inspector__block--look {
  padding-bottom: var(--spacing-16);
}

.look-field {
  width: 100%;
  min-width: 0;
}

.look-field + .look-field {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: var(--border-sm) solid var(--color-border-subtle);
}

.look-field__title {
  margin: 0 0 var(--spacing-8);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  color: var(--color-text-default);
}

.look-field__strength {
  margin-top: var(--spacing-8);
  width: 100%;
}

/* Filter chips */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  width: 100%;
}

.filter-row__chip {
  flex: 0 1 auto;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.25px;
  padding: var(--spacing-4) var(--spacing-10);
  border-radius: var(--rounded-full);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  height: var(--height-28);
  display: inline-flex;
  align-items: center;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default),
    color var(--motion-duration-fast) var(--motion-easing-default),
    background var(--motion-duration-fast) var(--motion-easing-default);
}

.filter-row__chip:hover {
  border-color: var(--color-border-default);
  color: var(--color-text-subtle);
}

.filter-row__chip.is-active {
  border-color: var(--color-border-brand);
  border-width: var(--border-md);
  background: var(--color-action-ghost-hover);
  color: var(--color-text-brand);
}

.filter-row__chip:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Swatch / color picker ─── */
.swatch-picker {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.swatch-picker__controls {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-10);
  border-radius: var(--rounded-sm);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-raised);
}

.swatch-picker__hue {
  position: relative;
  width: 100%;
  height: var(--height-28);
  border-radius: var(--rounded-full);
  overflow: hidden;
  border: var(--border-sm) solid var(--color-border-subtle);
  background: linear-gradient(
    90deg,
    hsl(0 100% 50%),
    hsl(60 100% 50%),
    hsl(120 100% 50%),
    hsl(180 100% 50%),
    hsl(240 100% 50%),
    hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
  touch-action: none;
  cursor: pointer;
}

.swatch-picker__hue-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: calc(100% + 2px);
  border-radius: var(--rounded-xs);
  border: var(--border-md) solid var(--color-control-thumb);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.swatch-picker__lightness {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  width: 100%;
  min-width: 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
}

.swatch-picker__lightness-lbl {
  flex-shrink: 0;
}

.swatch-picker__lightness input[type="range"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  accent-color: var(--color-action-primary);
}

.swatch-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-6);
  overflow-x: auto;
  padding-bottom: var(--spacing-2);
  scrollbar-width: thin;
  scrollbar-color: var(--color-control-scrollbar) transparent;
}

.swatch-row::-webkit-scrollbar { height: 4px; }
.swatch-row::-webkit-scrollbar-thumb {
  background: var(--color-control-scrollbar);
  border-radius: var(--rounded-full);
}

.swatch-row__chip {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-sm);
  border: var(--border-md) solid var(--color-border-subtle);
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.swatch-row__chip:hover {
  border-color: var(--color-border-default);
}

.swatch-row__chip.is-active {
  border-color: var(--color-border-brand);
  border-width: var(--border-lg);
}

.swatch-row__chip--none {
  position: relative;
  overflow: hidden;
  background: repeating-conic-gradient(
    var(--color-surface-elevated) 0% 25%,
    var(--color-surface-raised) 0% 50%
  ) 50% / 6px 6px;
}

.swatch-row__chip--none::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 145%;
  height: 2px;
  background: var(--color-border-default);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

.swatch-row__chip:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Controls ─── */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10) var(--spacing-16);
  align-items: center;
}

.controls-row--tint {
  margin-top: var(--spacing-6);
}

.controls-row label {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
}

label.checkbox-label {
  color: var(--color-text-default);
}

label.checkbox-label input {
  width: auto;
  accent-color: var(--color-control-surface-on);
}

.control-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
}

.control-inline--grow {
  flex: 1 1 12rem;
  min-width: 0;
}

.control-inline__lbl {
  flex-shrink: 0;
}

.control-inline input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--color-action-primary);
}

.zoom-value {
  font-family: var(--family-Monospace);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
  min-width: 2.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Export panel ─── */
.field__hint {
  font-weight: var(--weight-regular);
  color: var(--color-text-tertiary);
}

.field__note {
  margin: var(--spacing-4) 0 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
}

.export-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.export-share-note {
  margin: 0;
}

/* ─── Sign-in prompts ─── */
.sign-in-prompt {
  width: 100%;
  max-width: min(680px, 100%);
  flex-shrink: 0;
}

.sign-in-prompt.is-hidden {
  display: none;
}

.sign-in-prompt__panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16) var(--spacing-20);
  padding: var(--spacing-16) var(--spacing-32) var(--spacing-16) var(--spacing-20);
  background: var(--color-surface-brand-tint);
  border: var(--border-sm) solid var(--color-border-brand);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-md);
}

.sign-in-prompt__dismiss {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  width: var(--height-32);
  height: var(--height-32);
  padding: 0;
  border: none;
  border-radius: var(--rounded-xs);
  background: transparent;
  color: var(--color-icon-subtle);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.sign-in-prompt__dismiss:hover {
  color: var(--color-icon-default);
  background: var(--color-overlay-grayscale-xs);
}

.sign-in-prompt__text {
  margin: 0;
  flex: 0 1 auto;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  line-height: 1.45;
  color: var(--color-text-default);
  text-align: center;
}

.sign-in-prompt__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--height-36);
  padding: 0 var(--spacing-20);
  border-radius: var(--rounded-full);
  border: none;
  font-family: var(--family-Brand);
  font-size: var(--size-md);
  font-weight: var(--weight-black);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-action-on-primary);
  background: var(--color-action-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.sign-in-prompt__cta:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-on-primary);
}

.sign-in-prompt__cta:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Library sign-in card */
.library-sign-in-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10) var(--spacing-12);
  margin-top: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-14);
  border-radius: var(--rounded-md);
  border: var(--border-sm) solid var(--color-border-brand);
  background: var(--color-surface-brand-tint);
}

.library-sign-in-card[hidden] {
  display: none;
}

.library-sign-in-card__text {
  margin: 0;
  flex: 1 1 10rem;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  line-height: 1.4;
  color: var(--color-text-default);
}

.library-sign-in-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--height-28);
  padding: 0 var(--spacing-16);
  border-radius: var(--rounded-full);
  border: none;
  font-family: var(--family-Brand);
  font-size: var(--size-sm);
  font-weight: var(--weight-black);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-action-on-primary);
  background: var(--color-action-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.library-sign-in-card__cta:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-action-on-primary);
}

.library-sign-in-card__cta:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Library simulate toggle ─── */
.library-simulate {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: var(--border-sm) solid var(--color-border-subtle);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.library-simulate input {
  width: auto;
  accent-color: var(--color-control-surface-on);
}

/* ─── Library actions (random, favorites) ─── */
.library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: var(--border-sm) solid var(--color-border-subtle);
}

.library-actions__btn {
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  height: var(--height-28);
  padding: 0 var(--spacing-12);
  border-radius: var(--rounded-xs);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition:
    background var(--motion-duration-fast) var(--motion-easing-default),
    border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.library-actions__btn:hover {
  background: var(--color-overlay-grayscale-xs);
  border-color: var(--color-border-default);
}

.library-actions__btn--dice {
  font-weight: var(--weight-bold);
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}

.library-actions__btn--dice:hover {
  background: var(--color-action-ghost-hover);
  border-color: var(--color-action-primary-hover);
}

.library-actions__btn:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.library-actions__btn.is-locked {
  opacity: 0.6;
}

.library-actions__menu {
  position: relative;
  flex: 1;
  min-width: 6rem;
}

/* ─── Favorites popover ─── */
.library-actions__popover {
  position: absolute;
  z-index: var(--z-dropdown);
  bottom: calc(100% + var(--spacing-6));
  left: 0;
  right: 0;
  min-width: 14rem;
  max-height: 16rem;
  overflow: auto;
  padding: var(--spacing-6);
  border-radius: var(--rounded-md);
  border: var(--border-sm) solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-xl);
}

.library-actions__popover[hidden] {
  display: none !important;
}

.library-saved__title {
  margin: var(--spacing-4) var(--spacing-6) var(--spacing-4);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.library-saved__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-height: 7rem;
  overflow: auto;
}

.library-saved__item-row {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-2);
}

.library-saved__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-4) var(--spacing-6);
  border: none;
  border-radius: var(--rounded-xs);
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
  text-align: left;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.library-saved__item:hover {
  background: var(--color-overlay-grayscale-xs);
}

.library-saved__item img {
  width: 28px;
  height: 28px;
  border-radius: var(--rounded-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-page);
}

.library-saved__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-saved__rename {
  flex-shrink: 0;
  width: var(--height-28);
  padding: 0;
  border: none;
  border-radius: var(--rounded-xs);
  background: transparent;
  color: var(--color-icon-subtle);
  font-size: var(--size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.library-saved__rename:hover {
  color: var(--color-icon-default);
  background: var(--color-overlay-grayscale-xs);
}

.library-saved__rename:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.library-saved__empty {
  margin: var(--spacing-4) var(--spacing-6) var(--spacing-8);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
  line-height: 1.35;
}

.empty-hint {
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ─── Dialog (Grimoire Modal spec) ─── */
.favorite-dialog {
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-lg);
  padding: 0;
  background: var(--color-surface-elevated);
  color: var(--color-text-default);
  max-width: min(22rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-xl);
}

.favorite-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.favorite-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-20);
}

.favorite-dialog__title {
  margin: 0;
  font-family: var(--family-Brand);
  font-size: var(--size-xl);
  font-weight: var(--weight-black);
  line-height: 1.2;
  color: var(--color-text-default);
}

.favorite-dialog__input {
  width: 100%;
  box-sizing: border-box;
  height: var(--height-36);
  border: var(--border-sm) solid var(--color-border-default);
  border-radius: var(--rounded-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-default);
  padding: 0 var(--spacing-12);
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
}

.favorite-dialog__input:focus-visible {
  outline: none;
  border-width: var(--border-md);
  border-color: var(--color-border-focus);
  box-shadow: none;
}

.favorite-dialog__hint {
  margin: calc(-1 * var(--spacing-6)) 0 0;
  font-family: var(--family-Sans-Serif);
  font-size: var(--size-sm);
  color: var(--color-text-tertiary);
}

.favorite-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

/* Tertiary dialog button */
.favorite-dialog__btn {
  font-family: var(--family-Brand);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  border: var(--border-sm) solid var(--color-border-subtle);
  border-radius: var(--rounded-md);
  background: transparent;
  color: var(--color-action-on-tertiary);
  cursor: pointer;
  height: var(--height-36);
  padding: 0 var(--spacing-16);
  display: inline-flex;
  align-items: center;
  transition: background var(--motion-duration-fast) var(--motion-easing-default);
}

.favorite-dialog__btn:hover {
  background: var(--color-overlay-grayscale-xs);
}

.favorite-dialog__btn--primary {
  background: var(--color-action-primary);
  border-color: transparent;
  color: var(--color-action-on-primary);
  font-weight: var(--weight-black);
}

.favorite-dialog__btn--primary:hover {
  background: var(--color-action-primary-hover);
}

.favorite-dialog__btn:focus-visible {
  outline: var(--border-md) solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ─── Mobile responsive ─── */
@media (max-width: 920px) {
  :root {
    --app-shell-h: 42px;
  }

  body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  .app-shell__bar {
    padding: 0 var(--spacing-16);
    height: var(--app-shell-h);
  }

  .layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--app-shell-h));
    height: calc(100dvh - var(--app-shell-h));
    min-height: 0;
    overflow: hidden;
  }

  .workspace {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--spacing-8) var(--spacing-12) var(--spacing-8);
    gap: var(--spacing-6);
    border-bottom: var(--border-sm) solid var(--color-border-subtle);
    background: var(--color-surface-page);
    box-sizing: border-box;
  }

  .casting-stage {
    border-radius: var(--rounded-md);
  }

  .variation-dock {
    padding: var(--spacing-6) var(--spacing-10) var(--spacing-8);
    --variation-swatch-size: 3.35rem;
  }

  .inspector {
    flex: 1 1 auto;
    min-height: 0;
    border-left: none;
    border-top: none;
    max-height: none;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px));
  }

  .inspector-panel {
    padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
  }

  .inspector__block {
    padding: var(--spacing-8) 0;
  }

  .sign-in-prompt__panel {
    padding: var(--spacing-10) var(--spacing-32) var(--spacing-10) var(--spacing-12);
    gap: var(--spacing-8) var(--spacing-12);
  }

  .sign-in-prompt__text {
    font-size: var(--size-sm);
  }

  .sign-in-prompt__cta {
    height: var(--height-28);
    padding: 0 var(--spacing-16);
    font-size: var(--size-sm);
  }

  .thumb-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--spacing-6);
    height: auto !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-6);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--color-control-scrollbar) transparent;
  }

  .thumb-grid .thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    min-height: 76px;
    scroll-snap-align: start;
  }

  .thumb-grid::-webkit-scrollbar {
    height: 4px;
    width: auto;
  }
}