/* картанеба.рф — ночное оформление поверх общего движка (css/sky.css,
 * копия из lessons/). Раскладка у сайтов общая — шапка-капсула и карта с
 * панелью в одной скруглённой карточке, — а отличаются они не только
 * текстом: тёмный интерфейс, золотой акцент, свой логотип. Правила здесь —
 * только перекраска; поведение у карты то же самое, что у соседнего сайта.
 *
 * Подключается после sky.css (и pages.css на текстовых страницах). */

:root {
  --accent: #f5c451; --accent-d: #e2ad2f; --accent-l: rgba(245, 196, 81, .14); --accent-b: rgba(245, 196, 81, .45);
  --ink: #eef2fa; --ink-2: #d5ddec; --muted: #a5b3cc; --muted-2: #7f8eaa; --faint: #6c7a96;
  --line: rgba(160, 185, 230, .16); --line-2: rgba(160, 185, 230, .10); --panel: #0f1730; --soft: rgba(255, 255, 255, .04);
  --app: #060b1a; --seg: rgba(255, 255, 255, .07); --ok: #59c983;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45); --shadow-sm: 0 2px 6px rgba(0, 0, 0, .35);
  --card: #111a35; --card-2: #16213f;
  color-scheme: dark;
}
/* Отсвет — один раз вверху: без no-repeat он повторялся бы через каждую
 * высоту окна с резкой границей на длинных страницах (текст под картой, блог). */
body { background: radial-gradient(1200px 700px at 70% -10%, #142456 0%, rgba(20, 36, 86, 0) 60%) no-repeat, var(--app); color: var(--ink); }
::selection { background: var(--accent); color: #1a1405; }

/* Обод и стороны света вокруг круга — светлым по тёмной странице (js/sky.js, THEME) */
#sky { --sky-ring: #2a3a66; --sky-ring2: rgba(245, 196, 81, .35); --sky-north: #f5c451; --sky-dir: #e7ecf7; --sky-dir2: #7f8eaa; }

/* ── Шапка: та же капсула, что у урокиастрономии.рф, — тёмное стекло ─── */
.topbar { background: rgba(15, 23, 48, .88); border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 44px -24px rgba(0, 0, 0, .7), 0 3px 10px -6px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.skm-logo { gap: 9px; }
.skm-logo svg { flex: none; display: block; }
.skm-logo .w { margin-left: 0; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.skm-logo .w i { font-style: normal; color: var(--accent); }
.skm-logo .w small { font-size: inherit; font-weight: 600; color: var(--muted-2); }
.topnav a { color: var(--muted); }
.topnav a:hover { background: var(--seg); color: var(--ink); }
.topnav a[aria-current="page"] { background: var(--accent-l); color: var(--accent); }
.topnav a.ext::after, .navm-list a.ext::after { content: " ↗"; color: var(--faint); }
.topbar-now { color: var(--muted); }
.navm summary { background: var(--card); color: var(--ink-2); border-color: var(--line); }
.navm-list { background: var(--card); border-color: var(--line); }
.navm-list a { color: var(--ink-2); }
.navm-list a:hover { background: var(--seg); }

/* ── Рабочая область: карта и панель в одной скруглённой карточке ───── */
.work { border-color: var(--line); background: #0b1229; box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .8), 0 3px 10px -6px rgba(0, 0, 0, .5); }
.stage { background: radial-gradient(ellipse at 50% 45%, #0e1938 0%, #08102a 55%, #050a18 100%); }
.stage.is-sky { background: #050a18; }
.vmode, .is-sky .vmode { background: rgba(17, 26, 53, .92); border: 1px solid var(--line); }
.vmode button, .is-sky .vmode button { color: var(--muted); }
.panel { background: rgba(9, 15, 34, .86); border-left: 1px solid var(--line); }
.panel-in::-webkit-scrollbar-thumb { background: #26335a; border-color: #0b1229; }
.panel-tab { background: var(--card); border-color: var(--line); color: var(--muted); box-shadow: -3px 2px 10px rgba(0, 0, 0, .35); }
.pc { background: var(--card); border-color: var(--line); box-shadow: none; }
.pc-lab, .speedlab { color: var(--muted-2); }
.btn { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }
.btn:hover { background: var(--accent-l); border-color: var(--accent-b); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1405; }
.btn.primary:hover { background: var(--accent-d); color: #1a1405; }
.ibtn, .ddl, .tc-edit input, .stepgroup button { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }
.ddl .car, .panel-tab { color: var(--muted-2); }
.stepgroup { border-color: var(--line); }
.seg button { color: var(--muted); }
.seg button.on, .vmode button.on, .is-sky .vmode button.on { background: var(--accent); color: #1a1405; box-shadow: none; }
.cbtn { background: rgba(17, 26, 53, .92); border-color: var(--line); color: var(--ink-2); }
.cbtn:hover { border-color: var(--accent-b); color: var(--accent); }
.cbtn.on { background: var(--accent); border-color: var(--accent); color: #1a1405; }
.tip, .objcard, .menu, .hint, .arnote { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.tip b, .oc-title b, .oc-facts dd, .tc-clock, .sunrow b { color: var(--ink); }
.oc-x { background: var(--seg); color: var(--muted); }
.menu-search input { background: var(--card-2); border-color: var(--line); color: var(--ink); }
.menu-search input:focus { background: var(--card-2); }
.menu-list::-webkit-scrollbar-thumb { background: #26335a; border-color: var(--card); }
.menu-item { color: var(--ink-2); }
.dayline input::-webkit-slider-thumb { background: #1a1405; }
.dayline input::-moz-range-thumb { background: #1a1405; }
/* Облака по часам — светлым по тёмному */
.cloudline { background: rgba(255, 255, 255, .05); }
.cloudline i { --cloud: #c9d3e6; }
/* Ночь на полосах почти того же цвета, что карточка, — контур держит их край */
.dayline input::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 1px rgba(160, 185, 230, .22); }
.dayline input::-moz-range-track { box-shadow: inset 0 0 0 1px rgba(160, 185, 230, .22); }
.tg i { background: #2a3658; }
.tg i::after { background: #e7ecf7; }
.obj.down .obj-ic { background: #1c2747; }
.chip.vis, .pass.is-vis .pass-date { background: rgba(89, 201, 131, .16); }
.chip.vis, .pass.is-vis .pass-date b { color: #7fdca2; }
.chip.day { background: rgba(245, 196, 81, .16); color: var(--accent); }
.issnext-btn { background: var(--accent); color: #1a1405; }
.sister { background: var(--accent-l); border-color: var(--accent-b); color: var(--accent); }
.sister:hover { background: rgba(245, 196, 81, .22); }

/* Ручка панели на телефоне — с того же порога, что в sky.css (800 px) */
@media (max-width: 800px) {
  .panel-tab { background: var(--card); }
  .panel-tab::before { background: #33426c; }
}

/* ── Кнопка «Сохранить картинку» (js/skymap.js) ─────────────────────── */
.skm-save { position: absolute; right: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--accent-b); background: rgba(17, 26, 53, .92);
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.skm-save:hover { background: var(--accent); color: #1a1405; }
.skm-save[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 560px) { .skm-save span { display: none; } .skm-save { padding: 0 11px; } }

/* ── Текстовые страницы (pages.css) — те же тёмные карточки ─────────── */
.page { color: var(--ink-2); }
.page h1, .page h2, .page h3 { color: var(--ink); }
.psec, .pcard { background: var(--card); border-color: var(--line); box-shadow: none; }
.pfaq { border-color: var(--line); }
.pfaq summary { color: var(--ink); }
.pfoot { color: var(--muted-2); }
.pfoot a { color: var(--muted); }
.pfoot a:hover, .pfoot .pfoot-sister { color: var(--accent); }

/* ── «Небо на дату» (na-datu/) ──────────────────────────────────────── */
.skm-page { max-width: 960px; margin: 0 auto; padding: 26px 16px 34px; }
.skm-hero { padding: 26px 24px; border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(700px 300px at 85% 0%, rgba(245, 196, 81, .14), rgba(245, 196, 81, 0) 70%), var(--card); }
.skm-hero h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.skm-hero .lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.skm-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 10px; align-items: end; }
.skm-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2); }
.skm-form input { height: 44px; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.skm-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 196, 81, .2); }
.skm-form .ddl { flex: none; width: 100%; height: 44px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.skm-form .btn { height: 44px; padding: 0 18px; font-size: 14px; }
.skm-note { margin: 12px 0 0; font-size: 13px; color: var(--muted-2); }
.skm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.skm-grid > div { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.skm-grid b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 15px; }
.skm-grid p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.skm-sec { margin-top: 16px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.skm-sec h2 { margin: 0 0 12px; font-size: 19px; color: var(--ink); }
.skm-sec p, .skm-sec li { font-size: 14px; line-height: 1.6; color: var(--muted); }
.skm-sec a { color: var(--accent); }
.skm-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.skm-links a { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.skm-links a:hover { border-color: var(--accent-b); color: var(--accent); }
.skm-foot { max-width: 960px; margin: 0 auto; padding: 0 16px 30px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted-2); }
.skm-foot a { color: var(--muted); text-decoration: none; }
.skm-foot a:hover, .skm-foot .sister-link { color: var(--accent); }
@media (max-width: 760px) {
  .skm-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .skm-form .wide, .skm-form .btn { grid-column: 1 / -1; }
  .skm-grid { grid-template-columns: minmax(0, 1fr); }
  .skm-hero h1 { font-size: 24px; }
}

/* ── Карты-страницы (karta-sozvezdiy/, s-planetami/, severnoe-polusharie/) ─
 * Та же карта на весь экран, под ней — текст о ней. Ссылка в панели ведёт
 * вниз: на весь экран карта текст закрывает. */
.skm-below { padding-top: 34px; scroll-margin-top: 0; }
.skm-below .skm-hero .lead { margin-bottom: 0; max-width: 760px; }
.skm-sec p + p { margin-top: 10px; }
.skm-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  font-size: 13px; font-weight: 700; text-decoration: none; }
.skm-more:hover { border-color: var(--accent-b); color: var(--accent); }
/* ── Блог (blog/, css/blog.css) — та же раскладка, что у соседа, ночью ── */
/* Герой и призыв — карточкой с золотым отсветом, как «Небо на дату» */
.pnight { background: radial-gradient(700px 300px at 85% 0%, rgba(245, 196, 81, .14), rgba(245, 196, 81, 0) 70%), var(--card);
  border: 1px solid var(--line); }
.phero, .pcta { box-shadow: none; }
.phero h1, .pcta b, .phero-facts b { color: var(--ink); }
.phero .lead, .pcta span { color: var(--muted); }
.phero .crumbs, .phero .crumbs a, .phero .bmeta, .phero-facts span { color: var(--muted-2); }
.phero .crumbs a:hover { color: var(--accent); }
.phero-facts li { background: var(--soft); border-color: var(--line); }
.page .phero-btn, .pcta .btn { background: var(--accent); border-color: var(--accent); color: #1a1405; box-shadow: none; }
.page .phero-btn:hover, .pcta .btn:hover { background: var(--accent-d); color: #1a1405; }
/* Карточки ленты и содержание */
.page .bcard, .page .pchips a { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }
.page .bcard { color: var(--ink); }
.page .bcard:hover, .page .pchips a:hover { background: var(--accent-l); border-color: var(--accent-b); color: var(--accent); }
.page .bcard:hover b { color: var(--ink); }
/* Текст статьи и блоки SuperBlocks */
.post code { border-color: var(--line); }
.post .b-code, .post pre { background: #070d20; border: 1px solid var(--line); color: var(--ink-2); }
.post .b-fig img { box-shadow: 0 0 0 1px var(--line); }
.page .post .b-btn { color: #1a1405; box-shadow: 0 10px 24px -14px rgba(245, 196, 81, .6); }
.page .post .b-btn:hover { background: var(--accent-d); }
.post mark { color: var(--accent); }
.ptable tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Разделов в шапке шесть, с блогом — семь (строкой влезают от 1061 px):
 * подпись «где и когда» справа влезает целиком только на широком экране,
 * обрезанная многоточием («Москва · 5 октя…») выглядит сломанной. Время и
 * место и так крупно стоят на панели карты. */
@media (max-width: 1340px) { .topbar-now { display: none; } }