/* External Skeleton · Stage 4 · екран «Довідка» — номери треків, зони
   календаря, зарезервовані слова. Токени і базові класи (.micro, .link,
   .mono, .plan__head/.plan__title/.plan__close, .plan__note, .plan__error,
   .plan__empty) — з tokens.css/styles.css/plan.css. Нових кольорів тут немає:
   --zone-red/orange/yellow вже визначені в tokens.css для зон дня на «today»,
   тут той самий токен фарбує той самий смисл. Мобільний < 900 px, десктоп >= 900 px.

   Екран не має дій, крім закриття й повтору запиту: це шпаргалка для читання
   на бігу, а не редактор. Тому в жодній секції немає touch-цілей понад ті,
   що вже дає .plan__close/.link.
*/

.reference__section + .reference__section {
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------- зони */

.ref-zones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ref-zone {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Кружок звичайним CSS (не емодзі): колір ставиться інлайном з тієї самої
   мапи токенів, що й зони на шкалі дня «today» — нового кольору тут немає. */
.ref-zone__dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: var(--radius-round);
}

.ref-zone__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ref-zone__calendar {
  font: var(--w-semibold) 15px/20px var(--font-sans);
  color: var(--text-1);
}

.ref-zone__meaning {
  font: var(--w-regular) 13px/18px var(--font-sans);
  color: var(--text-2);
}

/* ---------------------------------------------------------- номери треків */

.ref-tracks {
  display: flex;
  flex-direction: column;
}

.ref-track {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--divider);
}
.ref-track:last-child { border-bottom: 0; }

/* Номер моноширинний і приглушений, як у згорнутому рядку екрана «Треки»
   (`3 · Billing`): головне в рядку — назва, номер лише підказка для пошуку. */
.ref-track__number {
  font: var(--w-medium) 14px/20px var(--font-mono);
  color: var(--text-2);
}

.ref-track__name {
  font: var(--w-regular) 15px/20px var(--font-sans);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

/* Той самий прийом роздільника, що й у `.track__name`/`.track__facts` на
   екрані «Треки»: розділювач належить наступній частині і не виникає сам
   по собі, якщо цієї частини немає. */
.ref-track > span + span::before {
  content: "\0020\00B7\0020";
  color: var(--text-2);
}

/* -------------------------------------------------------- зарезервовані слова */

.ref-reserved__hint {
  font: var(--w-regular) 12.5px/1.5 var(--font-sans);
  color: var(--text-2);
  margin: 0 0 var(--sp-3);
}

.ref-reserved {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Обводка замість заливки — той самий стриманий прийом, що й у card__tag--context:
   попередження «це не номер трека», без крику й заливки кольором. */
.ref-reserved__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-8);
}

.ref-reserved__word {
  flex: none;
  font: var(--w-medium) 13px/18px var(--font-mono);
  color: var(--text-1);
}

.ref-reserved__meta {
  font: var(--w-regular) 12px/18px var(--font-mono);
  color: var(--text-2);
}
.ref-reserved__meta > span + span::before { content: "\0020\00B7\0020"; }

/* ================================================== desktop >= 900 px */

@media (min-width: 900px) {
  .reference__section { max-width: 640px; }

  .ref-zone__calendar { font-size: 16px; }
  .ref-zone__meaning { font-size: 14px; }

  .ref-track__number,
  .ref-track__name { font-size: 16px; line-height: 24px; }

  .ref-reserved__word { font-size: 14px; }
  .ref-reserved__meta { font-size: 12.5px; }
}