/* Phone layout: one column, thumb-sized targets, no horizontal scroll.

   The settings are laid out as a grid rather than a wrapping row, so the
   panel is a predictable four rows tall instead of reflowing into five or
   six depending on how long the selected option's text happens to be. */
body { padding: 12px 10px 10px; }
.panel { padding: 11px 11px; border-radius: 12px; }

.controls { display: block; }
.panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-dim);
  font-size: 12.5px;
}
.panel-toggle .chev { transition: transform 140ms ease; }
.panel-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.controls-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 9px 10px;
  padding-top: 10px;
}
.g-notes, .g-checks { grid-column: 1 / -1; }
.g-tone { flex: 1 1 auto; min-width: 0; }
.g-tone select { flex: 1; min-width: 0; }
/* Label above the control: two pickers sit side by side in the width of one
   inline row, and each select still gets room for its longest option. */
.g-style, .g-plays { flex-direction: column; align-items: stretch; gap: 3px; }
.g-style select, .g-plays select { width: 100%; min-width: 0; }
.g-gain, .g-vol { flex: 1 1 auto; min-width: 0; }

.seg { width: 100%; }
.seg-btn { flex: 1; padding: 8px 0; }

.transport { width: 100%; gap: 7px; }
.transport button { flex: 1; padding: 11px 4px; font-size: 12.5px; }

.slot { min-width: 74px; padding: 5px 9px 6px; }
.slot-value { font-size: 15px; }

/* Thirteen columns are unreadably narrow on a phone; seven keeps the 25
   intervals to four rows. */
.palette.intervals { grid-template-columns: repeat(7, 1fr); }
.palette.notes { grid-template-columns: repeat(6, 1fr); }
.pal { padding: 10px 1px; font-size: 12.5px; }

.actions { width: 100%; }
.actions button { flex: 1; }

/* Touch has no hover and no keyboard. */
.hint { display: none; }

.answer-list li { grid-template-columns: 1fr auto; row-gap: 1px; padding: 4px 9px; }
.a-yours { grid-column: 2; }

/* The shape stays beside the marking here too — stacked, the pair is taller
   than any phone. A smaller box loses the note names, not the shape. */
:root { --chordbox: 146px; }
.reveal { gap: 10px; }

/* Short phones — an SE, or anything in landscape — lose the extras. */
@media (max-height: 700px) {
  .check em { display: none; }
}
/* Keep six columns even here: five would cost the interval palette a whole
   extra row, which is worth more than the couple of pixels per button. */
@media (max-width: 360px) {
  .pal { font-size: 11px; padding: 9px 0; }
  .slot { min-width: 66px; }
  .transport button { font-size: 12px; padding: 10px 2px; }
}

/* The neck is there to hunt for the note *before* answering; once the answer
   is out the reveal's chord box shows the same shape, so the neck gives its
   space back. */
body.revealed .neck-wrap { display: none; }

/* The neck needs finger-sized rows more than it needs to be short. */
.nk-string { height: 25px; }
.nk-cell { flex-basis: 40px; }
.nk-cell.nk-open { flex: 0 0 27px; }
.nk-name { font-size: 10px; }
.nk-fret::after { height: 20px; width: min(78%, 24px); }
.neck-label { font-size: 10px; }

.g-material { grid-column: 1 / -1; }
.g-material .seg { flex: 1; }
/* Every other segmented control on a phone is full width; this one has to
   stay compact to share a line with the prompt. */
.dir-toggle { width: auto; }
.dir-toggle .seg-btn { flex: none; padding: 7px 14px; }
.tab { width: calc(var(--chordbox) * 1.1); }