/* Readable console (Nikhil, 2026-09-09: "the whole platform is really hard to
 * understand").
 *
 * Every screen used to explain how a number was measured in paragraphs before,
 * beside and after the number. The rule now: a one-line title, at most one
 * short sentence under it, then the content — and every method, caveat and
 * measurement note folded into ONE disclosure per screen (or per card, where a
 * screen is long). Nothing was deleted; the explanations moved behind
 * <details class="rd-more">. This file styles that fold and the few plain
 * primitives the simplified screens lean on. Loaded after style.css and
 * detail.css so it wins ties without touching either. */

/* ---------- the disclosure ---------- */
.rd-more { margin-top: 12px; }
.rd-more > summary {
  cursor: pointer; width: fit-content; list-style: none;
  color: var(--muted); font-size: 12.5px; padding: 4px 0;
  user-select: none;
}
.rd-more > summary::-webkit-details-marker { display: none; }
.rd-more > summary::before {
  content: '+'; display: inline-block; width: 14px;
  font-variant-numeric: tabular-nums;
}
.rd-more[open] > summary::before { content: '\2212'; }
.rd-more > summary:hover { color: var(--text); }
.rd-more[open] > summary { color: var(--text-2); }
/* The folded copy reads as notes: quiet, measured line length, never as wide
   as a table. */
.rd-more > :not(summary) {
  color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 72ch;
}
.rd-more > p { margin-top: 6px; }
.rd-more > p + p { margin-top: 8px; }
.rd-more ul { margin: 6px 0 0 18px; padding: 0; }
.rd-more li + li { margin-top: 4px; }
.rd-more b { color: var(--text-2); font-weight: 600; }
.rd-more code { font-size: 12.5px; }

/* A fold at the foot of a card sits on the card's own rule, so a card ending
   in one reads as "content, then notes" rather than as a dangling link. */
.card > .rd-more { border-top: 1px solid var(--border-soft); padding-top: 6px; margin-top: 14px; }
.card > .rd-more > summary { padding-top: 6px; }

/* The screen-level fold on "Your sound" (.advanced, style.css) wears the same
   marker as the card folds, so the two kinds of disclosure read as one. */
.advanced > summary { list-style: none; padding: 6px 0; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before {
  content: '+'; display: inline-block; width: 14px; font-variant-numeric: tabular-nums;
}
.advanced[open] > summary::before { content: '\2212'; }

/* ---------- the one sentence under a title ---------- */
.rd-lede { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -4px 0 12px; }
.rd-lede:last-child { margin-bottom: 0; }

/* ---------- buttons in a row, with real gaps ---------- */
.rd-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- alarms, said once ---------- */
/* The head and the list are the alarm; the reasoning lives in the card's fold. */
.alarm-block { padding: 10px 0; }
.alarm-list { margin-top: 6px; }

/* ---------- the spread band, captioned in one phrase ---------- */
.band-cap { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- the roster key's note folds too ---------- */
.fit-key .rd-more { margin-top: 6px; }
.fit-key .rd-more > summary { font-size: 11.5px; padding: 2px 0; }
.fit-key .rd-more > :not(summary) { font-size: 11.5px; }

/* Stat tile labels stay short now, so they can sit on one line. */
.stat-k { white-space: normal; }