/* Календарь обращений к планетам — страница [qqq_planet_calendar] (inc/planet-calendar.php).
   Грузится только на странице с шорткодом. Все правила под .qqq-cal: токены, шрифты,
   цитата, кнопки — из темы; здесь только раскладка календаря и то, чего в теме нет. */
.qqq-cal {
  --quote-bg: rgba(20, 15, 0, .03);
  --display: 'Noto Sans Display', sans-serif;
  --symbols: 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Segoe UI Symbol', sans-serif;
  /* Поле карточек — одно на главный блок и строки часов: содержимое стоит на одном отступе. */
  --card-pad: var(--sp-5);
}


.qqq-cal [hidden] { display: none !important; }

/* Заголовки сайта */
.qqq-cal h1, .qqq-cal h2, .qqq-cal h3, .qqq-cal .display {
  font-family: var(--display);
  font-weight: 630;
  font-stretch: 95%;
  margin: 0;
}
.qqq-cal h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.017em; margin-bottom: var(--sp-3); }
.qqq-cal h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -0.008em; }

.qqq-cal :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qqq-cal a { color: var(--link); }

/* Мета-строка сайта: дата, рубрики, служебная мелочь */
.qqq-cal .meta {
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-60);
}

/* Цитата сайта (blockquote) — плашки страницы */
.qqq-cal .quote {
  background: var(--quote-bg);
  border-left: 2px solid var(--ink-20);
  border-radius: 2px;
  padding: var(--sp-4) var(--sp-5);
}
.qqq-cal .quote p { margin: 0 0 var(--sp-3); }
.qqq-cal .quote p:last-child { margin-bottom: 0; }

/* Карточка сайта (.qqq-tg-cta) */
.qqq-cal .card { border: 1px solid var(--ink-10); border-radius: 2px; padding: var(--card-pad); }

/* Поле ввода и кнопки сайта */
.qqq-cal input, .qqq-cal .btn-light {
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-20);
  border-radius: 2px;
  padding: 6px 12px;
  min-height: 44px;
}
.qqq-cal .btn-light { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.qqq-cal .btn-light:hover { border-color: var(--ink-40); }
.qqq-cal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--ink); color: #fff; border: 0; border-radius: 2px;
  font: 500 var(--fs-base)/1.2 'Andika', sans-serif;
  padding: var(--sp-2) var(--sp-4); min-height: 44px; cursor: pointer;
  transition: transform .12s ease, background-color .2s ease;
}
.qqq-cal .btn .ti { color: #fff; font-size: 18px; }
.qqq-cal .btn:hover { background: var(--ink-90); transform: scale(1.03); }
.qqq-cal .btn:active { transform: scale(.97); }

.qqq-cal .ti { font-size: 20px; color: var(--ink-90); line-height: 1; }
.qqq-cal .sym { font-family: var(--symbols); font-style: normal; line-height: 1; }
.qqq-cal .picon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
.qqq-cal .picon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* Шапка: место и дата */
.qqq-cal .head { margin-bottom: var(--sp-5); }
.qqq-cal .place { margin-top: var(--sp-4); }
.qqq-cal .place-label { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.qqq-cal .place-label .ti { font-size: 16px; color: var(--ink-60); }
.qqq-cal .place-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qqq-cal #qc-place-input { flex: 1 1 220px; }
.qqq-cal .place-meta { margin: var(--sp-2) 0 0; }
.qqq-cal .error { margin: var(--sp-2) 0 0; color: var(--link); }

/* Лента дней */
.qqq-cal .strip { display: flex; align-items: stretch; gap: var(--sp-2); margin-bottom: var(--sp-6); }
/* Стрелки — кнопка «наверх» сайта (mu-plugin quaqqarum-scroll-top): ширина 48, иконка 20px ink-90,
   при наведении чёрная. Поле 2px сверху и снизу — то же, что у ленты дней (место под рамку дня). */
.qqq-cal .strip-arrow {
  flex: 0 0 48px; margin: 2px 0; padding: 0;
  color: var(--ink-90); font-size: 20px; line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.qqq-cal .strip-arrow:hover, .qqq-cal .strip-arrow:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.qqq-cal .strip-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.qqq-cal .strip-arrow .ti { display: block; color: inherit; }
.qqq-cal .strip-days {
  list-style: none; margin: 0; padding: 2px;
  display: flex; gap: var(--sp-2); flex: 1; overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.qqq-cal .strip-days li { flex: 1 0 64px; scroll-snap-align: start; }
.qqq-cal .tile {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) 4px;
  border: 0; border-radius: 2px;
  font: inherit; color: var(--ink); cursor: pointer; line-height: 1.2;
}
.qqq-cal .tile .d { font-size: var(--fs-sm); }
.qqq-cal .tile .g { font-size: 24px; line-height: 1; }
.qqq-cal .tile .s { font-weight: 700; display: flex; align-items: center; min-height: 20px; }
.qqq-cal .tile .s .ti { font-size: 16px; }
.qqq-cal .tile[aria-current="date"] { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Главный блок дня — карточка сайта */
.qqq-cal .hero { margin-bottom: var(--sp-6); }
.qqq-cal .hero > .meta { margin: 0; }
.qqq-cal .hero-title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.023em; margin: var(--sp-2) 0 var(--sp-4); }
.qqq-cal .hero-when { margin: 0; color: var(--ink-70); }
.qqq-cal .hero-time { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 var(--sp-3); }
.qqq-cal .hero-time .ti { font-size: 24px; }
.qqq-cal .energy {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: 2px;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
}
.qqq-cal .energy + .note { margin-top: var(--sp-3); }
.qqq-cal .energy .ti { font-size: 18px; }
.qqq-cal .nowrap { white-space: nowrap; }
.qqq-cal .hint {
  border: 0; background: none; padding: 2px; cursor: pointer;
  display: inline-flex; vertical-align: middle; min-height: 0;
}
.qqq-cal .hint .ti { font-size: 18px; color: var(--ink-60); }
.qqq-cal .hint:hover .ti { color: var(--ink); }
.qqq-cal .note { margin: 0 0 var(--sp-2); color: var(--ink-70); }
.qqq-cal .hero .quote { margin-top: var(--sp-4); }

/* Часы */
.qqq-cal .hours { margin-bottom: var(--sp-6); }
/* Час — кнопка: поле и зазор 8, как у дней в ленте. Зазор не меняется при раскрытии —
   иначе строка прыгает под пальцем. */
.qqq-cal .hour { border: 1px solid var(--ink-10); border-radius: 2px; margin-bottom: var(--sp-2); }
/* Строка часа — сетка: балл | день/ночь | время | стрелка. На любой ширине
   переносится только текст внутри своей колонки, остальное стоит на месте. */
.qqq-cal .hour summary {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); cursor: pointer; list-style: none;
}
.qqq-cal .hour summary::-webkit-details-marker { display: none; }
.qqq-cal .hour summary::after {
  content: "\ea61"; font: normal normal normal 16px/1 'tabler-icons';
  color: var(--ink-40); transition: transform .2s ease;
}
.qqq-cal .hour[open] summary::after { transform: rotate(90deg); }
.qqq-cal .score {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 32px; border-radius: 2px; font-weight: 700; white-space: nowrap;
}
.qqq-cal .score .ti { font-size: 16px; }
.qqq-cal .hour .when { line-height: 24px; }
.qqq-cal .hour.past summary { opacity: .5; }
.qqq-cal .hour-body { padding: 0 var(--card-pad) var(--card-pad); }
.qqq-cal .hour-body.small { font-size: inherit; } /* класс .small у Bootstrap темы — 80% */
.qqq-cal .hour-body.big { padding: 0; margin-top: var(--sp-4); border-top: 1px solid var(--ink-10); }
.qqq-cal .group, .qqq-cal .reasons { margin-top: var(--sp-4); }
.qqq-cal .group > .meta { margin-bottom: var(--sp-1); }
.qqq-cal .item + .item { margin-top: var(--sp-2); }
.qqq-cal .item { line-height: 24px; display: grid; grid-template-columns: 1.4em 2.2em 1fr; align-items: baseline; }
.qqq-cal .item .m { color: var(--ink-60); }
.qqq-cal .item .m .ti { font-size: 14px; }
.qqq-cal .explain { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.qqq-cal .explain .plain { color: var(--ink); }
.qqq-cal .explain .plain b { font-weight: 700; }
.qqq-cal .explain .gloss { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-70); }
.qqq-cal .explain .src { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-60); }
.qqq-cal .pop .explain { margin: 0 0 var(--sp-3); }
.qqq-cal .pop .explain:last-child { margin-bottom: 0; }
.qqq-cal .counted { font-size: var(--fs-sm); line-height: var(--lh-note); color: var(--ink-60); margin: var(--sp-1) 0 0; }
/* «Небо в этот час» — список с точками: знак обрезан общим правилом выше, здесь он нужен. */
.qqq-cal .facts { list-style: none; margin: 0; line-height: 24px; }
.qqq-cal .facts li { position: relative; padding-left: 1.4em; }
.qqq-cal .facts li + li { margin-top: var(--sp-2) !important; }
.qqq-cal .facts li::before { content: "•" !important; position: absolute; left: 0; color: var(--ink-60); }

/* Небо — плашки-цитаты */
.qqq-cal .sky .quote { margin-bottom: var(--sp-5); }
.qqq-cal .sky h3 { margin-bottom: var(--sp-3); }
.qqq-cal .sky dl { display: grid; grid-template-columns: 11em 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; line-height: 24px; }
.qqq-cal .sky dt { color: var(--ink-60); font-weight: 400; }
.qqq-cal .sky dd { margin: 0; }

.qqq-cal .credit { margin-top: var(--sp-6); }
.qqq-cal .credit p { margin: 0 0 var(--sp-1); }
.qqq-cal .credit p:first-child { margin-bottom: var(--sp-2); }
.qqq-cal .books { list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-sm); line-height: var(--lh-note); color: var(--ink-70); }
.qqq-cal .books li { margin-bottom: var(--sp-2); }
.qqq-cal .books [lang="en"] { display: block; color: var(--ink-60); }

/* Всплывающее окно — единый компонент (#pop): заголовок, крестик, содержимое.
   Оформление — выпадающая карточка меню сайта 1 в 1 (style.css темы,
   .main-navigation ul li .sub-menu и её пункты). Менять стиль — только здесь. */
.qqq-cal .pop {
  /* место задаёт popup() — под кнопкой, в координатах страницы: окно едет вместе с прокруткой */
  position: absolute; inset: auto; margin: 0;
  max-width: min(420px, calc(100vw - 32px));
  border: 0;
  padding: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
}
.qqq-cal .pop::backdrop { background: transparent; }
.qqq-cal .pop-head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.qqq-cal .pop-title { flex: 1; padding: var(--sp-2) var(--sp-3); }
.qqq-cal .pop-close {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background-color 0.15s ease;
}
.qqq-cal .pop-close:hover, .qqq-cal .pop-close:focus-visible { background-color: var(--ink-05); }
.qqq-cal .pop-close .ti { font-size: 18px; color: var(--ink-60); }
.qqq-cal .pop-body > * { padding: var(--sp-2) var(--sp-3); border-radius: 10px; margin: 0; }
.qqq-cal .pop-body ul { list-style: none; padding: 0; }
.qqq-cal .pop-body li { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 10px; }
.qqq-cal .sw { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 2px; }

.qqq-cal #qc-content.loading { opacity: .4; transition: opacity .2s; }

@media (max-width: 560px) {
  .qqq-cal { --card-pad: var(--sp-4); }
  .qqq-cal .quote { padding: var(--sp-3) var(--sp-4); }
  .qqq-cal .sky dl { grid-template-columns: 1fr; gap: 0; }
  .qqq-cal .sky dd + dt { margin-top: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .qqq-cal * { transition: none !important; }
  .qqq-cal .btn:hover, .qqq-cal .btn:active { transform: none; }
}

/* Правила тела записи (.entry-content, кнопки темы) ставят свои поля, маркеры списков
   и капс кнопок с !important — внутри календаря они не нужны. */
.qqq-cal button { text-transform: none !important; letter-spacing: normal !important; }
.qqq-cal .card { background: transparent; }
.qqq-cal h2 { margin: 0 0 var(--sp-3) !important; font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; }
.qqq-cal h3 { margin: 0 !important; font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important; }
.qqq-cal .sky h3 { margin-bottom: var(--sp-3) !important; }
.qqq-cal ul, .qqq-cal ol { padding-left: 0 !important; margin-top: 0; }
.qqq-cal .strip-days { padding: 2px !important; }
.qqq-cal li { margin: 0 !important; }
.qqq-cal .books li { margin-bottom: var(--sp-2) !important; }
.qqq-cal ul > li::before { content: none !important; }
/* Заголовок окна — ступень h4 лестницы (19/24, как заголовки сайдбара): её даёт правило h3 выше. */