/* ============================================================================
   messiah.by — раздел «Чтения дня».
   Общий вид плиток, кнопок, теней и цвета берётся из style.css: здесь только
   то, что есть именно у этого раздела.
   ========================================================================= */

.cht { padding: clamp(1.5rem, 4vw, 3rem) 0 var(--section-y); }
.cht .wrap { max-width: var(--wrap-narrow); }

/* ---- Вступление раздела -------------------------------------------------
   Нужно только на «сегодня»: на видах дня и одного чтения свой <h1>.
   ------------------------------------------------------------------------- */
.cht-intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cht-intro h1 {
  margin: .4rem 0 .6rem; font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: 600; letter-spacing: var(--track-tight);
  line-height: 1.05;
}
.cht-intro p { margin: 0; color: var(--ink-600); font-size: var(--t-lead); }
body[data-view="day"] .cht-intro,
body[data-view="one"] .cht-intro { display: none; }

/* ---- Полоса дня ---------------------------------------------------------
   Приклеена под шапкой: длинное чтение листают долго, а перейти на другой
   день должно быть можно не возвращаясь наверх.
   ⚠️ Высоту шапки берём переменной --head-h, а не числом: на этом уже
   наступали в поиске — ящик меню наезжал на кнопку.
   ------------------------------------------------------------------------- */
.cht-bar {
  position: sticky; top: calc(var(--head-h, 64px) + .5rem); z-index: 5;
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: .5rem .6rem;
  background: rgba(255, 253, 250, .86);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-hair); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.cht-bar__mid {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 2vw, 1.25rem); min-width: 0;
}

/* Кружок со стрелкой. 44px — чтобы попадать пальцем. */
.cht-step {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-700); background: var(--paper-0);
  border: 1px solid var(--line); text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.cht-step svg { width: 20px; height: 20px; }
.cht-step:hover { color: var(--red-700); border-color: var(--line-gold); transform: scale(1.06); }
.cht-step.is-off { opacity: .3; cursor: default; }

.cht-pick { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.cht-pick__label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-400);
}
.cht-pick input {
  font: inherit; font-size: var(--t-small); color: var(--ink-800);
  padding: .4rem .6rem; min-height: 44px;
  background: var(--paper-0); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.cht-pick input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.cht-today-link {
  /* ⚠️ Не просто текст-ссылка: это цель для пальца. Высоту держим 44px —
     проверка на телефоне ругалась на 25px, и была права. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .6rem; border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 600; color: var(--red-700);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cht-today-link:hover {
  color: var(--red-800); border-color: var(--line-gold); background: var(--paper-25);
}

/* ---- Заголовок дня ----------------------------------------------------- */
.cht-day-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.cht-day-head__date {
  margin: .35rem 0 .3rem; font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: 600; line-height: 1;
  letter-spacing: var(--track-tight);
}
.cht-day-head__wd { margin: 0; color: var(--ink-500); font-size: var(--t-small); }
.cht-day-head__wd a { color: var(--ink-600); }

/* Пояснение, когда чтений на день больше двух. */
.cht-note {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); padding: .9rem 1.1rem;
  color: var(--ink-600); font-size: var(--t-small);
  background: linear-gradient(135deg, var(--paper-25), var(--paper-30));
  border: 1px solid var(--line-hair); border-radius: var(--r-md);
}

/* ---- Карточка чтения --------------------------------------------------- */
.cht-readings { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.cht-reading, .cht-single, .cht-outside {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
/* Багряная нить по левому краю — тот же приём, что у молитв. */
.cht-reading::after, .cht-single::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--red-600), var(--gold-500));
  opacity: .85;
}
.cht-reading, .cht-single { position: relative; }

.cht-reading__head { margin-bottom: 1.1rem; }
.cht-kind {
  display: inline-block; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  padding: .26rem .7rem; border-radius: var(--r-pill);
  color: var(--gold-700); border: 1px solid var(--gold-300);
  background: rgba(240, 227, 198, .35);
}
.cht-kind--evangelie { color: #fff; background: var(--red-600); border-color: var(--red-600); }
.cht-kind--paremiya { color: var(--ink-600); border-color: var(--line-strong); background: var(--paper-25); }

.cht-reading__ref, .cht-single h1 {
  margin: .7rem 0 .2rem; font-family: var(--font-display);
  font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--track-tight);
}
.cht-single h1 { font-size: var(--t-h2); }
.cht-reading__book, .cht-single__book {
  margin: 0; color: var(--ink-500); font-size: var(--t-small);
}

/* Сам текст. Мера строки держится узкой — так читают, а не сканируют. */
.cht-reading__body { font-size: var(--t-lead); line-height: 1.8; }
.cht-part + .cht-part { margin-top: 1.25rem; }
.cht-part__ch {
  margin: 0 0 .5rem; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-400);
}
.cht-verse {
  margin: 0 0 .55rem; display: grid; grid-template-columns: 2.1rem 1fr;
  align-items: baseline; gap: .35rem;
}
.cht-verse__n {
  font-family: var(--font-display); font-size: var(--t-small);
  font-weight: 600; color: var(--gold-700); text-align: right;
  font-variant-numeric: tabular-nums;
}

.cht-reading__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line-hair);
}
.cht-reading__single { font-size: var(--t-small); color: var(--ink-500); }
.cht-single__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* ---- Низ, служебное --------------------------------------------------- */
.cht-source {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--line-hair);
  color: var(--ink-500); font-size: var(--t-small);
}
.cht-back {
  display: inline-block; margin-bottom: 1rem; color: var(--ink-600);
  font-size: var(--t-small); text-decoration: none;
}
.cht-back:hover { color: var(--red-700); }
.cht-outside h2 {
  margin: 0 0 .6rem; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600;
}
.cht-outside p { margin: 0 0 .8rem; color: var(--ink-600); }
.cht-outside__links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

.cht-loading, .cht-error, .cht-empty {
  margin: 2rem 0; color: var(--ink-500); text-align: center;
}
.cht-error { color: var(--red-700); }

@media (max-width: 560px) {
  /* ⚠️ Полосу НЕ переносим на две строки: стрелки уезжали под поле даты и
     справа оставалась пустота (видно на снимке с телефона). Стрелки остаются
     по краям, а подпись «Другой день» прячем — поле говорит само за себя,
     чтецу экрана подпись по-прежнему слышна. */
  .cht-bar { gap: .4rem; padding: .4rem; }
  .cht-bar__mid { gap: .4rem; }
  .cht-pick { flex: 1; min-width: 0; }
  .cht-pick__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .cht-pick input { width: 100%; }
  .cht-today-link { padding: 0 .4rem; }
  .cht-verse { grid-template-columns: 1.7rem 1fr; }
}