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

/* ── Design tokens ─────────────────────────────────────────────────────── */
/* Fluid type and space scales via Utopia (utopia.fyi) */
:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-2:  clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3:  clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4:  clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5:  clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs:  clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s:   clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m:   clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l:   clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl:  clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs:  clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s:    clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m:     clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l:     clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl:    clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl:  clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
  --space-s-l:     clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

  --radius:      10px;
  --radius-pill: 99px;

  --tile-height:    66px;
  --grid-columns:   4;

  /* Motion */
  --transition-fast:  0.12s ease;
  --transition-base:  0.2s ease;
  --transition-panel: 0.5s ease;
  --transition-pop:   0.18s ease;

  /* Focus */
  --focus-outline:        2px solid var(--fg-primary);
  --focus-outline-offset: 2px;

  /* Palette — light mode */
  --bg-page:            #f2eaff;
  --bg-tile:            #fbfbfb;
  --bg-tile-hover:      #EFEFE8;
  --bg-input:           #FCFCF9;
  --fg-primary:         #000000;
  --fg-secondary:       #393939;
  --fg-tertiary:        #888888;
  --fg-btn-primary:     #FFFFFF;
  --fg-error:           #cc2200;
  --border-btn-color:   #C5C5C0;
  --border-tile:        1.5px solid #DCDCCE;
  --border-btn:         1.5px solid var(--border-btn-color);
  --divider:            var(--fg-tertiary);

  --bg-btn-primary:     var(--fg-primary);
  --border-btn-primary: 1.5px solid var(--fg-primary);
  --shadow-rgb:         0, 0, 0;
  --shadow-tile:        0 1px 4px  rgba(var(--shadow-rgb), 0.08);
  --shadow-hover:       0 4px 10px rgba(var(--shadow-rgb), 0.13);
  --shadow-pressed:     0 0 0 4px  rgba(var(--shadow-rgb), 0.08),
                        0 14px 28px rgba(var(--shadow-rgb), 0.15);
}

/* Palette — dark mode */
[data-theme="dark"] {
  --bg-page:            #151317;
  --bg-tile:            #292929;
  --bg-tile-hover:      #3B3B42;
  --bg-input:           #25252A;
  --fg-primary:         #ECECEC;
  --fg-secondary:       #B5B5BA;
  --fg-tertiary:        #75757B;
  --fg-btn-primary:     #1B1B1F;
  --border-btn-color:   #555560;
  --border-tile:        1.5px solid #494950;
  --divider:            #3B3B42;
  --shadow-rgb:         255, 255, 255;
  --shadow-pressed:     0 0 0 4px  rgba(var(--shadow-rgb), 0.05),
                        0 14px 28px rgba(var(--shadow-rgb), 0.10);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  color: var(--fg-primary);
  background: var(--bg-page);
  transition: background var(--transition-base), color var(--transition-base);
  min-height: 100vh;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
#app {
  padding: var(--space-l) var(--space-m);
  max-width: 700px;
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--divider);
}

.app-title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-sub {
  font-size: var(--step--1);
  color: var(--fg-secondary);
  margin-top: var(--space-xs);
}

/* ── Theme toggle ──────────────────────────────────────────────────────── */
#theme-toggle {
  background: var(--bg-tile);
  border: var(--border-btn);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--fg-primary);
  font-family: inherit;
  font-weight: 600;
  transition: background var(--transition-base);
  flex-shrink: 0;
  margin-left: 12px;
  margin-top: 2px;
}
#theme-toggle:hover { background: var(--bg-tile-hover); }
#theme-toggle:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }

/* ── Panels ────────────────────────────────────────────────────────────── */
/* Generic reveal/hide container. Animates between hidden (0fr) and open (1fr).
   Wrap a panel's children in <div class="panel-content"> so its overflow can
   be clipped during the transition. */
.panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-panel);
}

.panel > .panel-content {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 8px;
  opacity: 0;
  transition: opacity var(--transition-panel);
}

.panel.panel-open {
  grid-template-rows: 1fr;
}

.panel.panel-open > .panel-content {
  opacity: 1;
}

textarea {
  width: 100%;
  height: clamp(100px, 14vw, 130px);
  font-family: monospace;
  font-size: var(--step--1);
  padding: var(--space-s) var(--space-m);
  border: var(--border-tile);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--fg-primary);
  resize: vertical;
  transition: background var(--transition-base), color var(--transition-base);
}
textarea::placeholder { color: var(--fg-tertiary); }
textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--fg-primary); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
  align-items: center;
}

button {
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: var(--space-2xs-xs);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast),
              transform  var(--transition-fast),
              opacity    var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
button:active { transform: scale(0.97); }
button:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }

.btn-primary {
  background: var(--bg-btn-primary);
  color: var(--fg-btn-primary);
  border: var(--border-btn-primary);
}
.btn-primary:hover { opacity: 0.8; }

.btn-secondary {
  background: var(--bg-tile);
  color: var(--fg-primary);
  border: var(--border-btn);
}
.btn-secondary:hover { background: var(--bg-tile-hover); }

/* ── Error message ─────────────────────────────────────────────────────── */
#err {
  font-size: var(--step--1);
  color: var(--fg-error);
}

/* ── Color picker ──────────────────────────────────────────────────────── */
.color-bar {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
  padding: 5px;
}

.swatch {
  font-size: var(--step--1);
  font-weight: 700;
  padding: 5px clamp(9px, 1.8vw, 15px);
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition-fast),
              filter    var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  letter-spacing: 0.01em;
}
.swatch:hover {
  transform: scale(0.96);
  filter: brightness(0.94);
}
.swatch:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }

.sw-none   { background: var(--bg-tile); color: var(--fg-primary); }
.sw-yellow { background: #F9DF6D; color: #3D3000; }
.sw-green  { background: #A0C35A; color: #1A3300; }
.sw-blue   { background: #B0C4EF; color: #0D1F4A; }
.sw-purple { background: #BA81C5; color: #2D0A40; }

.swatch.active {
  transform: scale(0.93);
}

.chk { width: 11px; height: 11px; display: none; flex-shrink: 0; }
.swatch.active .chk { display: block; }

/* ── Tile grid ─────────────────────────────────────────────────────────── */
#grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--space-s);
}

.tile {
  border-radius: var(--radius);
  border: var(--border-tile);
  background: var(--bg-tile);
  color: var(--fg-primary);
  font-size: var(--tile-font);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: grab;
  user-select: none;
  touch-action: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  height: var(--tile-height);
  box-shadow: var(--shadow-tile);
  transition: background   var(--transition-base),
              color        var(--transition-base),
              border-color var(--transition-fast),
              transform    var(--transition-fast),
              box-shadow   var(--transition-fast);
}
.tile:hover,
.tile.drag-over {
  background: var(--bg-tile-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.tile.pressed {
  background: var(--bg-tile-hover);
  transform: scale(1.08);
  box-shadow: var(--shadow-pressed);
  z-index: 1;
}
.tile:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }
.tile.dragging      { cursor: grabbing; }
.tile.just-swapped  { animation: pop var(--transition-pop); }

@keyframes pop {
  from { transform: scale(0.91); }
  to   { transform: scale(1); }
}

/* ── Misc ──────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--divider);
  margin: var(--space-xs) 0;
}

.hint {
  font-size: var(--step--1);
  color: var(--fg-tertiary);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  margin-top: var(--space-s-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--divider);
  font-size: var(--step--1);
  color: var(--fg-tertiary);
  line-height: 1.5;
}