/*
 * The mode picker (js/picker.js): the Modes sheet's one page of tiles.
 * Linked from index.html under the same media query as css/mobile.css, so
 * a desktop never sees it; the sheet it sits in (its 14px side padding and
 * the scroller) is the shell's, and this file styles only what picker.js
 * builds. Sizes follow the spec's section 5: piece tiles three across, 88
 * tall, art 44px (40 on a narrow phone; the 96px floor goes at 320, where
 * three floors and two gaps are 300 inside a 292 sheet); game tiles two
 * across, 56 tall, the glyph 28px and the name 17px; the Workbench shelf's
 * rows 44px, the name and its muted line side by side so a row is one line
 * unless the line is long ("A player's games from chess.com or lichess").
 */

#picker {
  padding-bottom: 12px;
}

/* The build line (js/version.js, moved here from the rail by js/mobile.js) closes the Modes sheet. */
#sheet-modes > .version {
  margin: 0;
  padding: 4px 2px 8px;
  text-align: center;
}

/* Group headings: small, muted, the same voice as the rail's titles. */
.picker-heading {
  margin: 14px 0 8px;
  padding-left: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#picker > .picker-heading:first-child {
  margin-top: 4px;
}

/* ---------- Pieces: six artwork tiles, three across ---------- */

.picker-pieces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.picker-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  height: 88px;
  padding: 6px 4px;
  font: inherit;
  font-size: 15px;
  line-height: 1.1;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: center;
}

.picker-piece .piece.icon {
  width: 44px;
  height: 44px;
}

/* A narrow phone (360): the art steps down so three tiles still breathe. */
@media (max-width: 379px) {
  .picker-piece .piece.icon {
    width: 40px;
    height: 40px;
  }
}

/* The smallest phones (320): three 96px floors and two gaps are 300 inside
   a 292 sheet, so the floor goes and the 1fr columns share what there is. */
@media (max-width: 339px) {
  .picker-piece {
    min-width: 0;
  }
}

.picker-piece.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------- Game tiles: two across, the glyph beside the registered name ---------- */

.picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.picker-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 10px;
  font: inherit;
  font-size: 17px;
  line-height: 1.15;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 10px;
  text-align: left;
}

.picker-tile .piece.icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* The name may take two lines ("Knight route trainer"); it never clips. */
.picker-tile-name {
  min-width: 0;
}

.picker-tile.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

/* The sheet's own button rule (#sheet button, two ids) would win the tile's 56px: this one outweighs it. */
#sheet .picker-tile {
  min-height: 56px;
}

/* ---------- Workbench: a shelf, closed unless opened on this phone ---------- */

.picker-workbench {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.picker-workbench-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 2px;
  list-style: none;
  cursor: pointer;
}

.picker-workbench-summary::-webkit-details-marker {
  display: none;
}

/* "Workbench ›": the chevron turns when the shelf is open. */
.picker-workbench-title {
  font-size: 1rem;
  font-weight: 600;
}

.picker-workbench-title::after {
  content: '\203A';
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.picker-workbench[open] .picker-workbench-title::after {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .picker-workbench-title::after {
    transition: none;
  }
}

.picker-workbench-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.picker-workbench-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
}

/* A row is the name and its line side by side on one 44px line; a long
   line ("A player's games from chess.com or lichess") wraps under the name. */
.picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  text-align: left;
}

.picker-row-name {
  font-size: 1rem;
}

.picker-row-note {
  font-size: 0.85rem;
  color: var(--muted);
}

.picker-row.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.picker-row.active .picker-row-name {
  font-weight: 600;
}