/*
 * Zodiac Pulse — карта неба.
 * Раскладка: ввод данных и глобус рядом, ответ под формой; ниже — два прибора и две таблицы.
 * Одна тёмная тема (ночное небо бренда). Все цвета — в токенах ниже.
 */
:root {
  --sky: #0c0b22;          /* фон */
  --sky-2: #13123a;        /* поля ввода, полосы таблиц */
  --line: #2a2860;         /* линии и рамки */
  --ink: #ece9ff;          /* основной текст */
  --muted: #9b96c6;        /* вторичный текст */
  --lilac: #b8a6ff;        /* акцент бренда: созвездия, активные элементы */
  --sun: #f4c866;          /* Солнце и «твоё» созвездие */
  --alert: #ff9b8a;        /* пограничный день */
  --ocean: #151446;        /* глобус: океан */
  --land: #2e2b74;         /* глобус: суша */
  --dome-night: #0a0920;   /* купол: ночь */
  --dome-day: #3a4f97;     /* купол: день */

  --display: "Forum", "Cormorant Garamond", Georgia, serif;
  --body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font: 16px/1.6 var(--body);
}
.page {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 0 40px;
}
main { display: grid; gap: 72px; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: 28px; line-height: 1.15; }
p { margin: 0; }
a { color: var(--lilac); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.muted { color: var(--muted); }

/* ---------- шапка ---------- */
.top { display: flex; justify-content: space-between; align-items: center; padding-block: 22px 40px; }
.brand { font-family: var(--display); font-size: 21px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.brand span { color: var(--lilac); }
.lang { display: flex; gap: 2px; }
.lang button { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font: 500 12px var(--mono); letter-spacing: .08em; padding: 6px 10px; cursor: pointer; }
.lang button[aria-pressed="true"] { border-color: var(--line); color: var(--ink); }

/* ---------- первый экран ---------- */
.hero { display: grid; gap: 16px; max-width: 780px; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
h1 { font-size: clamp(36px, 6vw, 62px); line-height: 1.04; }
.lede { color: var(--muted); font-size: 18px; max-width: 62ch; }
.stat { color: var(--muted); max-width: 56ch; }
.stat b { font: 400 34px/1 var(--display); color: var(--sun); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* ---------- ввод + глобус + ответ ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "form globe" "result globe";
  gap: 40px 56px;
  align-items: start;
}
.form { grid-area: form; display: grid; gap: 14px; }
.globe-wrap { grid-area: globe; margin: 0; display: grid; gap: 14px; position: sticky; top: 16px; }
.result { grid-area: result; display: grid; gap: 18px; min-width: 0; }
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "globe" "result"; }
  .globe-wrap { position: static; }
}

.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tag { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac); }
.grid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.grid-place { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.field { display: grid; gap: 6px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
input, select {
  width: 100%; min-width: 0;
  background: var(--sky-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 12px; font: 16px var(--body);
}
input:focus, select:focus { border-color: var(--lilac); outline: none; }
.hint { font-size: 13px; color: var(--muted); }
.btn { justify-self: start; background: var(--sun); color: var(--sky); border: 0; border-radius: 8px; padding: 12px 22px; font: 600 16px var(--body); cursor: pointer; }
.btn:hover { filter: brightness(1.06); }

/* глобус */
.globe-host { width: 100%; aspect-ratio: 1 / 1; max-width: 100%; touch-action: none; }
.globe { display: block; width: 100%; height: 100%; cursor: grab; }
.globe.dragging { cursor: grabbing; }
.g-ocean { fill: var(--ocean); }
.g-rim { fill: none; stroke: var(--line); stroke-width: 1; }
.g-grat { fill: none; stroke: var(--ink); stroke-opacity: .06; }
.g-land { fill: var(--land); }
.g-borders { fill: none; stroke: var(--sky); stroke-opacity: .55; stroke-width: .5; }
.g-twilight { fill: #05041a; fill-opacity: .18; }
.g-night { fill: #05041a; fill-opacity: .45; }
.g-equator { fill: none; stroke: var(--lilac); stroke-width: 1.4; }
.g-tropic { fill: none; stroke: var(--lilac); stroke-opacity: .55; stroke-dasharray: 3 4; }
.g-hemi text { fill: var(--ink); fill-opacity: .55; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.g-cities circle { fill: var(--ink); fill-opacity: .55; }
.g-sun-glow { fill: var(--sun); fill-opacity: .25; }
.g-sun-core { fill: var(--sun); }
.g-pin-ring { fill: none; stroke: var(--sun); stroke-width: 2; }
.g-pin-dot { fill: var(--sun); }

figcaption { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
figcaption strong { font: 400 22px var(--display); color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-top: 4px; }
.legend i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; }
.k-equator { border-top: 2px solid var(--lilac); }
.k-tropic { border-top: 2px dashed var(--lilac); opacity: .7; }
.k-night { height: 10px !important; width: 12px !important; background: #05041a; border: 1px solid var(--line); border-radius: 2px; }
.k-sun { height: 10px !important; width: 10px !important; border-radius: 50%; background: var(--sun); }

/* ответ */
.verdict { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; }
.verdict .g { color: var(--sun); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.pair > div { display: grid; gap: 2px; padding: 14px 0; }
.pair > div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.pair small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pair strong { font: 400 26px var(--display); font-weight: 400; }
.pair .real strong { color: var(--sun); }
.boundary { border-left: 2px solid var(--alert); padding: 4px 0 4px 14px; }
.boundary b { color: var(--alert); font-weight: 600; }
.facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.facts dt { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts dd { margin-bottom: 10px; } }

/* ---------- приборы ---------- */
.instruments, .tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
@media (max-width: 900px) { .instruments, .tables { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
.block { display: grid; gap: 14px; align-content: start; min-width: 0; border-top: 1px solid var(--line); padding-top: 22px; }
.figure { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; }
.figure svg, .figure canvas { display: block; width: 100%; height: 100%; }
.control { display: grid; gap: 8px; }
.control-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
output { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--lilac); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); padding: 5px 10px; font: 13px var(--body); cursor: pointer; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--lilac); color: var(--ink); }

/* колесо */
.w-base { fill: var(--sky); stroke: var(--line); }
.w-sign { fill: none; stroke: var(--line); }
.w-sign.on { fill: rgba(244, 200, 102, .12); }
.w-const { fill: rgba(184, 166, 255, .07); stroke: var(--lilac); stroke-opacity: .4; }
.w-const.on { fill: rgba(244, 200, 102, .2); stroke: var(--sun); stroke-opacity: 1; }
.w-glyph { fill: var(--muted); font: 20px serif; text-anchor: middle; dominant-baseline: central; }
.w-glyph.c { fill: var(--lilac); }
.w-glyph.on { fill: var(--sun); }
.w-equinox { stroke: var(--muted); stroke-dasharray: 3 4; }
.w-sunline { stroke: var(--sun); stroke-width: 2; }
.w-sun { fill: var(--sun); }
.w-year { fill: var(--ink); font: 30px var(--display); text-anchor: middle; }
.w-small { fill: var(--muted); font: 11px var(--mono); text-anchor: middle; dominant-baseline: central; }

/* ---------- таблицы ---------- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
td.mono { font: 14px var(--mono); }
.num { text-align: right; }
tr.me td { color: var(--sun); }
tr.diff td:last-child { color: var(--alert); }

/* ---------- метод ---------- */
.method { display: grid; gap: 14px; max-width: 760px; border-top: 1px solid var(--line); padding-top: 22px; }
#method { display: grid; gap: 10px; color: var(--muted); }
.cta { display: grid; gap: 4px; margin-top: 18px; }
.cta strong { font: 400 26px var(--display); }
.foot { margin-top: 64px; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }