/* Луна сегодня и лунный календарь (pages/moon.py). Общие части — pages.css; здесь только своё. */

/* диск Луны: тёмная сторона, освещённая часть, ободок */
.mn-dark { fill: #0a1247; }
.mn-lit { fill: var(--title); }
.mn-rim { fill: none; stroke: rgba(255, 215, 114, .45); stroke-width: 1.2; }
.mn-disc { display: block; width: 200px; height: 200px; max-width: 100%; filter: drop-shadow(0 0 28px rgba(255, 215, 114, .32)); }
.mn-icon { display: block; flex: none; }
.mn-icon .mn-rim { stroke-width: 3; }
.mn-icon--row { width: 22px; height: 22px; }
.mn-g { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', var(--text); color: var(--glow); }

/* первый экран: Луна сейчас */
.mn-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center; }
.mn-now__sky { display: grid; justify-items: center; gap: 14px; }
.mn-now__stamp { font-size: .82rem; line-height: 1.45; color: var(--mute); text-align: center; }
.mn-kicker { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }
.mn-now h2 { margin-top: 6px; font: 400 clamp(2rem, 4.2vw, 3.1rem)/1.06 var(--display); color: var(--title); }
.mn-deg { font-family: var(--mono); font-size: .45em; letter-spacing: 0; color: var(--glow-hi); vertical-align: .35em; white-space: nowrap; }
.mn-now__phase { margin-top: 10px; color: var(--ink); line-height: 1.5; }

.mn-facts { margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 10px; }
.mn-facts div { padding: 14px 16px; border: 1px solid rgba(255, 215, 114, .22); border-radius: 16px; background: rgba(255, 255, 255, .03); }
.mn-facts dt { font-size: .78rem; color: var(--mute); }
.mn-facts dd { margin: 6px 0 0; font: 400 1.32rem/1.15 var(--display); color: var(--title); }
.mn-facts small { display: block; margin-top: 6px; font: 400 .8rem/1.4 var(--text); color: var(--mute); }

.mn-voc { margin-top: 16px; padding: 12px 16px; border-left: 2px solid rgba(255, 215, 114, .45); font-size: .92rem; line-height: 1.55; color: var(--mute); }
.mn-voc b { color: var(--ink); font-weight: 500; }
.mn-voc--on { border-left-color: var(--tense); background: rgba(201, 169, 255, .07); border-radius: 0 12px 12px 0; }

/* толкование знака и фазы — в карте, чтобы текст читался поверх неба */
.mn-read .pg__text { margin-top: 0; max-width: 72ch; }
.mn-read .pg__text > h2:first-child { margin-top: 0; }

/* полоса фаз цикла */
.mn-cycle { margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; max-width: 900px; }
.mn-cycle li { display: grid; justify-items: center; gap: 8px; padding: 12px 4px; border: 1px solid transparent; border-radius: 16px; text-align: center; font-size: .78rem; line-height: 1.25; color: var(--mute); }
.mn-cycle .mn-icon { width: 40px; height: 40px; }
.mn-cycle li.is-now { border-color: rgba(255, 215, 114, .5); background: rgba(255, 215, 114, .07); color: var(--ink); }
.mn-cycle li.is-now .mn-icon { filter: drop-shadow(0 0 10px rgba(255, 215, 114, .5)); }

/* заголовки разделов вне .pg__text */
.mn-h2 { margin-top: clamp(40px, 5vw, 60px); font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 var(--display); color: var(--title); }
.mn-h3 { margin-top: 26px; font: 400 1.3rem/1.2 var(--display); }
.mn-h3 a { color: var(--ink); text-decoration-color: rgba(255, 215, 114, .45); text-underline-offset: .2em; }
.mn-intro { margin-top: 12px; max-width: 64ch; line-height: 1.6; color: var(--mute); }
.mn-intro a, .mn-more a { color: var(--glow-hi); text-decoration-color: rgba(255, 215, 114, .45); text-underline-offset: .2em; }
.mn-more { margin-top: 18px; color: var(--mute); }

/* таблица по дням */
.mn-table td, .mn-table th { vertical-align: top; }
.mn-table tbody th { min-width: 74px; }
.mn-table .is-now th { background: linear-gradient(rgba(255, 215, 114, .1), rgba(255, 215, 114, .1)), #0a1247; }   /* закреплённая колонка остаётся непрозрачной */
.mn-d { display: block; font: 400 1.15rem/1.1 var(--display); color: var(--title); }
.mn-wd { display: block; margin-top: 2px; font-size: .76rem; font-weight: 400; color: var(--mute); }
.mn-we .mn-wd { color: var(--glow-hi); }
.mn-sub { display: block; margin-top: 4px; font-size: .8rem; color: var(--mute); }
.mn-ph { display: inline-flex; align-items: center; gap: 8px; }
.mn-ev strong { color: var(--glow-hi); font-weight: 500; }
.mn-ecl { color: var(--tense); }
.mn-voc-cell { display: block; }
.mn-voc-cell + .mn-voc-cell { margin-top: 4px; }
.mn-none { color: rgba(182, 194, 240, .5); }
.mn-line { display: block; }
.mn-line + .mn-line { margin-top: 6px; }
.mn-table--year tbody th a { color: var(--ink); text-decoration-color: rgba(255, 215, 114, .45); text-underline-offset: .2em; }
.mn-scroll { background: rgba(8, 14, 52, .55); }
.pg__card > .mn-h2:first-child { margin-top: 0; }
.mn-scroll:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* сводка месяца */
.mn-month > h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 var(--display); color: var(--title); }
.mn-sum { margin-top: 14px; padding: 0; list-style: none; max-width: 76ch; }
.mn-sum li { position: relative; margin-top: 10px; padding-left: 22px; line-height: 1.6; color: var(--mute); }
.mn-sum li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px rgba(255, 215, 114, .6); }

/* соседние месяцы, годы */
.mn-pager { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mn-pager a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; color: var(--glow-hi); text-decoration: none;
  border: 1px solid rgba(255, 215, 114, .4); border-radius: 999px; background: rgba(255, 215, 114, .05); }
.mn-pager a:hover, .mn-pager a[aria-current] { background: rgba(255, 215, 114, .14); border-color: var(--glow); }
.mn-pager a[aria-current] { color: var(--ink); }
.mn-pager__year { color: var(--ink) !important; }
.mn-months { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.mn-months a { justify-content: center; min-height: 48px; }
.mn-months a[aria-current] { border-color: rgba(255, 215, 114, .6); background: rgba(255, 215, 114, .08); }

/* толкования знаков и вопросы */
.mn-signs .pg-faq summary .mn-g { margin-right: 6px; }
.mn-links { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 10px; }
.mn-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--glow-hi); text-decoration: none;
  border: 1px solid rgba(255, 215, 114, .4); border-radius: 999px; background: rgba(255, 215, 114, .05); }
.mn-links a:hover { background: rgba(255, 215, 114, .14); border-color: var(--glow); }

@media (max-width: 760px) {
  .mn-now { grid-template-columns: minmax(0, 1fr); }
  .mn-disc { width: 160px; height: 160px; }
  .mn-now__info { text-align: left; }
  .mn-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mn-pager { justify-content: center; }
  .mn-pager a { padding: 8px 12px; font-size: .9rem; white-space: nowrap; }
  .mn-pager__prev, .mn-pager__next { flex: 1 1 40%; justify-content: center; }
  .mn-pager__year { order: 3; flex: 1 1 100%; justify-content: center; }
  .mn-table tbody th { min-width: 64px; }
  .mn-cycle li { padding: 10px 2px; font-size: .74rem; }
  .mn-facts div { padding: 12px 13px; }
  .mn-facts dd { font-size: 1.2rem; }
}