/* Ретроградный Меркурий: живой блок «сейчас», таблица дат (на телефоне — карточки), схема попятного движения.
   Дополняет css/site.css тем же набором токенов. Только классы: CSP style-src 'self' запрещает inline-стили. */

/* ---------- Живой блок на бумаге ---------- */
.now{margin-top:24px;padding:18px 18px 14px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--field)}
.now-k{margin:0;font:500 14px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.now-h{margin:8px 0 0;font:500 26px/1.15 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.now-t{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--muted)}
.now[data-state=static] .now-h{font-size:21px}
.now-fig{margin:14px 0 0}
.now-fig svg{display:block;width:100%;height:auto;overflow:visible}
.tl-shadow{stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.tl-retro{stroke:var(--star);stroke-width:9;stroke-linecap:round}
.tl-tick{stroke:var(--ink);stroke-width:1.5}
.tl-now{fill:var(--ink)}
.tl-date{fill:var(--ink);font:500 13px var(--f-display);font-variant-numeric:tabular-nums}
.tl-lab{fill:var(--muted);font:400 11.5px var(--f-text)}

/* ---------- Таблица дат ---------- */
.rt-dates .hint{margin-top:12px}
.rt-year{margin-top:30px}
.rt-year h3{margin:0;font:500 23px/1.2 var(--f-display)}
.rt-tbl{margin-top:10px}
.rt-tbl tbody th{font:500 17px/1.3 var(--f-display)}
.rt-tbl time{display:block;white-space:nowrap}
.rt-tbl td span{display:block}
.rt-pos{font-size:14.5px;color:var(--on-sky-muted)}
.rt-p{margin:12px 0 0}

@media (max-width:599px){
  /* таблица превращается в карточки: строка — период, подпись столбца берётся из data-label */
  .rt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rt-tbl,.rt-tbl tbody,.rt-tbl tr,.rt-tbl th,.rt-tbl td{display:block}
  .rt-tbl tr{padding:14px 0 10px;border-bottom:1px solid var(--sky-line)}
  .rt-tbl tr:first-child{border-top:1px solid var(--sky-line)}
  .rt-tbl th,.rt-tbl td{padding:0;border:0}
  .rt-tbl tbody th{margin-bottom:6px;font-size:21px;line-height:1.25}
  .rt-tbl td{display:grid;grid-template-columns:5.6em 1fr;column-gap:12px;padding:5px 0}
  .rt-tbl td::before{content:attr(data-label);grid-row:1 / span 2;padding-top:2px;
    font:500 13px/1.5 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-sky-muted)}
  .rt-tbl td>*{grid-column:2}
}

/* ---------- Схема попятного движения ---------- */
.rt-figure{margin:22px -8px 0}
.rt-figbox{aspect-ratio:360/456}
.rt-fig{display:block;width:100%;height:100%}
.rt-figure figcaption{margin:10px 8px 0;font-size:15px;line-height:1.45;color:var(--on-sky-muted)}
.rt-fig text{font-family:var(--f-display);font-weight:500}
.rt-cap{fill:var(--on-sky-muted);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.rt-star{fill:var(--on-sky-muted);opacity:.7}
.rt-track{fill:none;stroke:var(--on-sky);stroke-width:1.6}
.rt-arr{fill:var(--on-sky)}
.rt-lab{fill:var(--on-sky-muted);font-size:12px}
.rt-lab-r{fill:var(--star)}
.rt-n circle{fill:var(--sky);stroke:var(--on-sky);stroke-width:1.3}
.rt-n text{fill:var(--on-sky);font-size:11px}
.rt-n.rt-st circle{fill:var(--star);stroke:none}
.rt-n.rt-st text{fill:var(--on-star)}
.rt-path{fill:none;stroke:var(--sky-line);stroke-width:1.3;stroke-dasharray:3 4}
.rt-ray{stroke:var(--on-sky-muted);stroke-width:1;opacity:.7}
.rt-ray-st{stroke:var(--star);opacity:1}
.rt-sun{fill:var(--star)}
.rt-earth{fill:var(--on-sky)}
.rt-merc{fill:var(--sky);stroke:var(--star);stroke-width:2}
.rt-num{fill:var(--on-sky);font-size:12px}
.rt-num-m{fill:var(--star)}
.rt-name{fill:var(--on-sky);font-size:13px}

@media (min-width:600px){
  .rt-tbl tbody th{width:27%}
}