/* ===========================================================
   TODAY (docs/specs/today.md §7): головна — ритуал дня
   Десктоп: макет A (25 / 50 / 25). Мобільний: макет M1.
   Колонки на мобільному мають display:contents, а їхні діти — order,
   тому єдиний рекламний елемент лишається один і той самий у DOM.
   =========================================================== */

.td-grid{ display:flex; flex-direction:column; gap:1.25rem; }
.td-col{ display:contents; }

/* Мобільний порядок (M1) */
.td-o-head{ order:1; }
.td-o-week{ order:2; }
.td-o-cards{ order:3; }
.td-o-continue{ order:4; }
.td-o-journal{ order:5; }
.td-o-ad{ order:6; }
.td-o-quote{ order:7; }
.td-o-notes{ order:8; }
.td-o-archive{ order:9; }

@media (min-width:992px){
  .td-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
    column-gap:1.5rem; align-items:start;
  }
  .td-col{ display:flex; flex-direction:column; gap:1.25rem; min-width:0; }
  .td-col > *{ order:0; }
}
body.zen .td-grid{ grid-template-columns:minmax(0,1fr); max-width:760px; margin:0 auto; }
body.zen .td-col-left, body.zen .td-col-right{ display:none; }

/* ---------- Заголовок ---------- */
/* main.css має глобальне правило `header, footer {background:#222; padding}` — нейтралізуємо для нашого header. */
.td-head{ margin:0; background:transparent; color:inherit; padding:0; }
.td-date{ margin:0 0 .35rem; font-size:.85rem; color:var(--muted); letter-spacing:.02em; }
.td-title{ font-family:var(--font-serif); font-weight:600; font-size:2.1rem; line-height:1.15; margin:0 0 .4rem; }
.td-sub{ margin:0; color:var(--muted); font-size:1.02rem; }
@media (max-width:575.98px){
  .td-title{ font-size:1.7rem; }
}

/* ---------- Картки ритуалу ---------- */
.td-cards{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.td-card{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem;
}
.td-card.is-done{ opacity:.72; border-color:transparent; }
.td-num{
  flex:0 0 auto; width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--muted); font-size:.9rem; font-family:var(--font-mono);
}
.td-card.is-done .td-num{ background:rgba(51,242,176,.14); border-color:var(--brass); color:var(--brass); }
.td-card-body{ min-width:0; }
.td-card-meta{ color:var(--muted); font-size:.8rem; margin-bottom:.25rem; }
.td-done{ color:var(--brass); }
.td-card-title{ font-family:var(--font-serif); font-weight:600; font-size:1.2rem; line-height:1.3; margin:0; }
.td-card-title a{ color:var(--parchment); text-decoration:none; }
.td-card-title a:hover{ text-decoration:underline; }
.td-card-note{ margin:.4rem 0 0; color:var(--muted); font-size:.88rem; }

.td-alldone{
  margin:0 0 .9rem; padding:.85rem 1rem; border-radius:12px;
  background:rgba(51,242,176,.08); border:1px solid rgba(51,242,176,.35); color:var(--parchment);
}
.td-alldone a{ margin-left:.4rem; color:var(--brass); white-space:nowrap; }

/* ---------- From the Journal ---------- */
.td-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.td-section-title{ font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0; font-family:var(--font-sans); font-weight:600; }
.td-section-head a{ font-size:.88rem; color:var(--brass); text-decoration:none; }
.td-journal{ display:grid; gap:.75rem; }
.td-jcard{ background:transparent; border-top:1px solid var(--line); padding-top:.75rem; }
.td-jtitle{ font-family:var(--font-serif); font-weight:600; font-size:1.1rem; line-height:1.3; margin:0 0 .25rem; }
.td-jtitle a{ color:var(--parchment); text-decoration:none; }
.td-jtitle a:hover{ text-decoration:underline; }
.td-jdek{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; }

/* ---------- Бічні панелі ---------- */
.td-panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; margin:0; }
.td-panel-title{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-family:var(--font-sans); font-weight:600; margin:0 0 .6rem; }

.td-week-days{ display:flex; gap:.4rem; margin:0 0 .6rem; padding:0; list-style:none; }
.td-week-days li{ flex:1 1 0; text-align:center; font-size:.7rem; color:var(--muted); }
.td-dot{
  display:block; width:1.5rem; height:1.5rem; margin:0 auto .2rem; border-radius:50%;
  border:1px solid var(--line);
}
.td-week-days .is-on .td-dot{ background:var(--brass); border-color:var(--brass); }
.td-week-days .is-today{ color:var(--parchment); }
.td-week-days .is-today .td-dot{ border-color:var(--parchment); }
.td-week-text{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.5; }

.td-continue{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; color:var(--parchment); text-decoration:none; }
.td-continue:hover{ color:var(--brass); }

.td-notes, .td-archive{ margin:0; font-size:.9rem; }
.td-notes a, .td-archive a{ color:var(--brass); text-decoration:none; }
.td-notes a:hover, .td-archive a:hover{ text-decoration:underline; }

.td-quote blockquote{ font-family:var(--font-serif); font-size:1.05rem; line-height:1.5; margin:0 0 .5rem; }
.td-quote figcaption{ font-size:.85rem; color:var(--muted); }

.td-ad .ml-ad{ min-height:250px; }