/* Theme switchers — the Settings picker and the Live-page control.

   NO COLOUR IS DEFINED IN THIS FILE, with one deliberate exception: the little
   previews. Those are painted from --apt-* / --gs-* custom properties that
   js/views/settings.js and js/views/gigmode.js set inline, straight out of
   each theme's own token block in js/themes/app/*.js. A preview drawn any
   other way is a preview that can lie about what it is previewing, and this is
   the one place where showing a theme's raw values IS the job. Everything
   structural — surfaces, borders, text, the accent — is a semantic token as
   usual.

   Loaded last so it can sit on top of shell.css and dashboard.css without
   either of them needing to know these controls exist.                       */

/* ==========================================================================
   Settings — the artist's default, for every logged-in screen
   ========================================================================== */

.apt-choices {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

/* A row, not a tile. The description is the reason the artist is here — it
   says which ROOM the theme is for — and a row gives it a line of its own at
   every width instead of squeezing it into a swatch caption. */
/* Top-aligned, not centred, so a description that wraps to two lines on a
   narrow phone still lines its swatch up with the name beside it. */
.apt-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: calc(12px * var(--density)) calc(14px * var(--density));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  cursor: pointer;
}

/* The input covers the whole row: one target, and :focus-visible then draws
   the app's standard ring around exactly the thing that is selectable. */
.apt-input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

/* Selected is a border, a tick and a weight change — three signals, no hue
   working on its own. */
.apt-choice.is-on {
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}
.apt-choice.is-on .apt-name { font-weight: var(--weight-strong); }

.apt-preview {
  flex: none;
  width: 64px;
  height: 46px;
  border-radius: 10px;
  padding: 7px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Raw theme values. See the file header. */
  background: var(--apt-bg);
  box-shadow: inset 0 0 0 1px var(--apt-border);
}
.apt-p-card {
  width: 100%;
  border-radius: 6px;
  padding: 6px;
  background: var(--apt-surface);
  display: grid;
  gap: 3px;
}
.apt-p-line { height: 3px; border-radius: 2px; background: var(--apt-text); }
.apt-p-line.is-short { width: 55%; background: var(--apt-muted); }
.apt-p-pill { height: 6px; width: 34%; border-radius: 3px; background: var(--apt-action); margin-top: 1px; }

.apt-body { min-width: 0; flex: 1; }
.apt-name { display: block; font-size: 16px; font-weight: var(--weight-medium); }
.apt-desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Not buried, not a tooltip, not behind a caret. Stage has never been looked
   at in a room with LED pars cycling, and an artist about to rely on it at a
   wedding is entitled to know that before the wedding. */

.apt-tick {
  flex: none;
  width: 22px;
  /* Sits on the theme's name rather than in the middle of the box, so on the
     tall option it still reads as "this one is selected". */
  margin-top: 1px;
  text-align: center;
  font-size: 16px;
  font-weight: var(--weight-strong);
  color: var(--action-on-surface);
  visibility: hidden;
}
.apt-choice.is-on .apt-tick { visibility: visible; }

/* Shown only while a gig override is running, because otherwise picking Light
   in here and watching nothing change is an unexplained bug rather than the
   feature it is. */
.apt-override-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--notice-surface);
  color: var(--notice-text);
  font-size: 13px;
  line-height: 1.5;
}
.apt-override-note[hidden] { display: none; }

/* ==========================================================================
   Gig Mode — this gig only
   ========================================================================== */

/* Placement. It sits at the right-hand end of the LIVE row of the bar, which
   is the only spot on this screen that satisfies all four constraints at once:
 *
 *   - the bar is fixed, so it is one tap from the live screen and never
 *     scrolls away mid-gig;
 *   - it is nowhere near Played / Skip (in the scrolling queue below) or End
 *     gig (bottom of that scroll), so a mis-tap while working the queue cannot
 *     reach it and a mis-tap here cannot reach them;
 *   - .gm-bar-status already reserves 64px on its right for the absolutely
 *     positioned ✕, which leaves 24px of clear space between this control and
 *     "leave Gig Mode" — enough that the two are not neighbours;
 *   - the only flexible thing in that row is the venue name, which is built to
 *     truncate, so the control costs nothing at 430px or 389px where the bar
 *     starts shedding pieces. It is flex:none and never shrinks.             */
.gm-theme-wrap {
  position: relative;
  flex: none;
  margin-left: auto;
}

.gm-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
/* The visible chip stays small because the bar is small; the TARGET does not.
   A musician taps this between songs, one-handed, and a 32px pill is not a
   target. This pads it out to ~46px without moving anything in the bar. */
.gm-theme::after {
  content: '';
  position: absolute;
  inset: -7px -6px;
}
.gm-theme[aria-expanded="true"] {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Override running. Three signals again — the border, the weight, and the
   word GIG — so it survives a coloured wash, greyscale and every dichromat.
   Someone who switched to Stage last night has to be able to see at a glance
   that tonight is back on their own default. */
.gm-theme.is-override {
  border-color: var(--action);
  color: var(--text-primary);
}
.gm-theme-tag {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--action);
  color: var(--action-text);
  font-size: 9px;
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* The chip's own swatch: the current theme, in its own colours. */
.gm-theme-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--gs-bg);
  box-shadow: inset 0 0 0 1px var(--gs-border);
  position: relative;
  overflow: hidden;
}
.gm-theme-dot::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--gs-action);
}

.gm-theme-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; }

/* Catches the tap that dismisses the menu, so the first tap outside it only
   closes it. Without this, reaching past an open menu to mark a song Played
   would do both at once — which is exactly the accident this control has to
   be impossible to cause. */
.gm-theme-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--layer-sheet);
  background: transparent;
}

.gm-theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--layer-sheet) + 1);
  width: min(268px, calc(100vw - 40px));
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  text-align: left;
}
.gm-theme-menu[hidden] { display: none; }
/* The chip is pinned to the right of the LIVE row on a phone and sits just
   after the word LIVE once the bar collapses to one line on a wide screen. A
   menu hung off its right edge is correct in the first case and hangs off the
   left of the window in the second, so gigmode.js measures after opening and
   flips the anchor. Measured rather than hard-coded against a breakpoint,
   because the breakpoint belongs to css/shell.css and is not ours to depend
   on. */
.gm-theme-menu.is-left { right: auto; left: 0; }

.gm-theme-menu-title {
  margin: 2px 4px 8px;
  font-size: 11px;
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gm-theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-align: left;
}
.gm-theme-option + .gm-theme-option { margin-top: 2px; }
/* An accent ring, NOT --action-quiet. On Dark and Stage --action-quiet is the
   same value as --surface-raised — correctly, they are both "the raised plane"
   — so a quiet fill here is invisible in two themes out of three. The ring is
   the same signal in all of them, and the tick still carries it if colour
   fails altogether. */
.gm-theme-option.is-on { box-shadow: inset 0 0 0 1px var(--action); }
.gm-theme-option .gm-theme-dot { width: 20px; height: 20px; border-radius: 6px; }
.gm-theme-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-theme-opt-tick {
  flex: none;
  width: 16px;
  text-align: center;
  color: var(--action-on-surface);
  font-weight: var(--weight-strong);
  visibility: hidden;
}
.gm-theme-option.is-on .gm-theme-opt-tick { visibility: visible; }


.gm-theme-reset {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-align: center;
}

.gm-theme-menu-note {
  margin: 9px 4px 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
}