/* Settings: a drawer on the right edge over the library, a popover anchored
 * bottom-right over the player (the video keeps playing).  base.css draws
 * every control; this lays them out in groups. */

#settings {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(360px, 92vw);
  padding: var(--s-6);
  overflow-y: auto;
  background: var(--seat);
  border-left: 1px solid var(--rail);
  color: var(--star);
  font: var(--t-body);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

/* The first frame after `hidden` comes off: 12px to the right, then in.
   Closing needs no exit; the attribute just removes it. */
@starting-style {
  #settings:not([hidden]) {
    transform: translateX(var(--s-3));
    opacity: 0;
  }
}

#settings[hidden] { display: none !important; }

/* Over the player: a popover above the bottom bar's right end. */
body:not(.browsing) #settings {
  top: auto;
  right: var(--s-6);
  bottom: 64px;
  max-height: calc(100vh - 64px - var(--s-6));
  border: 1px solid var(--rail);
  border-radius: var(--r-md);
}
@starting-style {
  body:not(.browsing) #settings:not([hidden]) {
    transform: translateY(var(--s-2));
    opacity: 0;
  }
}

/* -- head --------------------------------------------------------------- */

.sets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 20px;
}
.sets-head h2 {
  font: var(--t-headline);
  letter-spacing: var(--track-headline);
}

/* -- groups ------------------------------------------------------------- */

.sets-group {
  margin: var(--s-6) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* The head already spaces itself from the first group. */
.sets-head + .sets-group { margin-top: 0; }

.sets-group > legend {
  padding: 0;
  margin: 0 0 var(--s-3);
  font: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--star-dim);
}

/* -- rows: a name, its control, one line of hint ------------------------ */

.set-row { display: block; }
.sets-group > label + label { margin-top: var(--s-4); }

.set-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font: var(--t-title);
  color: var(--star);
}
.set-name .set-value {
  margin-left: auto;
  color: var(--star);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.set-row > input[type="range"] {
  display: block;
  margin-top: var(--s-1);
}
.set-row > .select-wrap { margin-top: var(--s-2); }
/* A block select, or the wrap grows a descender gap and the chevron drifts. */
.select-wrap select { display: block; }

.set-hint {
  display: block;
  margin-top: var(--s-1);
  font: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--star-dim);
}

/* -- switch rows: the whole row is the target ---------------------------- */

.set-switch {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding: var(--s-2);
  margin-inline: calc(-1 * var(--s-2));   /* the tint bleeds past the text */
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
}
.set-switch + .set-switch { margin-top: var(--s-3); }
.set-switch:hover { background: var(--seat-2); }
.set-switch .set-name { display: block; }
.set-switch .set-hint {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* -- foot ---------------------------------------------------------------- */

.sets-reset { margin-top: var(--s-6); }

.set-note {
  margin-top: var(--s-3);
  font: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--star-dim);
}