/* Небопись — оформление по эскизу A «Планисфера» (docs/astro-2026-10/comps/A-*.html).
   Светлая бумага сверху, ниже — тёмный диск звёздной карты; результат, справка и подвал стоят на диске.
   Только свой origin: шрифты из ../assets/fonts/, никаких inline-стилей (CSP style-src 'self'). */

/* ---------- Шрифты (OFL, подмножества кириллица + латиница) ---------- */
@font-face{font-family:'Jost Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../assets/fonts/jost-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../assets/fonts/jost-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text Variable';font-style:normal;font-display:swap;font-weight:400 900;
  src:url(../assets/fonts/golos-text-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text Variable';font-style:normal;font-display:swap;font-weight:400 900;
  src:url(../assets/fonts/golos-text-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Токены ---------- */
:root{
  color-scheme:light dark;
  --paper:#E7ECEF; --ink:#0F2035; --muted:#44576B; --line:#B7C4CE; --field:#F3F6F8;
  --sky:#132A47; --on-sky:#E8EDF1; --on-sky-muted:#A8B9CA; --sky-line:#2C4767; --grid:#21395A;
  --star:#E8C64A; --on-star:#0F2035; --bad:#A3261B; --bad-sky:#FF9A8C;
  --f-display:'Jost Variable','Futura','Century Gothic',sans-serif;
  --f-text:'Golos Text Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:20px; --r:8px; --d:1100px; --cx:62%;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#08121F; --ink:#E3E9EE; --muted:#9AADBF; --line:#2A3F57; --field:#0E1B2C;
    --sky:#12284A; --on-sky-muted:#A6B8CA; --sky-line:#2D4970; --grid:#1D375B; --bad:#FF9A8C; }
}
.home{--d:820px}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f-text);overflow-x:clip}
::selection{background:var(--star);color:var(--on-star)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--star);outline-offset:3px;border-radius:2px}
.ic{width:1em;height:1em;flex:none}
[hidden]{display:none!important}
.offscreen{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:10;padding:10px 14px;border-radius:var(--r);background:var(--ink);color:var(--paper)}
.skip:focus{top:8px}

/* ---------- Шапка ---------- */
.top{max-width:1200px;margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  font:500 15px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase}
.brand svg{width:26px;height:26px}
.brand .b-disc{fill:none;stroke:currentColor;stroke-width:1.6}
.brand .b-idx{fill:currentColor}

/* ---------- Первый экран на бумаге ---------- */
.hero{max-width:640px;padding:14px var(--gut) 0}
h1{margin:0;font:500 clamp(40px,11vw,68px)/1.02 var(--f-display);letter-spacing:-.018em}
h1 .sub{display:block;margin-top:10px;font-weight:300;font-size:clamp(21px,5.8vw,30px);line-height:1.2;letter-spacing:0;color:var(--muted)}
.lead{margin:16px 0 0;max-width:36ch;color:var(--muted)}
.home .hero{max-width:1200px;margin:0 auto;padding:8px var(--gut) 0}
.home h1{font-size:clamp(42px,11.4vw,80px);max-width:11.5ch;text-wrap:balance}
.home h1 .sub{margin-top:12px;font-size:clamp(20px,5.6vw,30px);line-height:1.25;max-width:20ch}

/* ---------- Форма ---------- */
.panel{margin-top:24px}
.dob{display:grid;grid-template-columns:.8fr 1.55fr 1fr;gap:16px 10px}
.f label,.f .lab{display:block;margin-bottom:6px;font:500 14px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.f input,.f select{width:100%;height:58px;margin:0;padding:0 12px;border:1.5px solid var(--ink);border-radius:var(--r);
  background:var(--field);color:var(--ink);font:500 22px/1 var(--f-display);appearance:none;-webkit-appearance:none}
.f input{text-align:center;font-variant-numeric:tabular-nums}
.f input::placeholder{color:var(--muted);opacity:.55}
.f input:disabled{opacity:.45}
.f-city{position:relative;margin-top:16px}
.f-city input{text-align:left;font:400 18px/1.2 var(--f-text);padding:0 14px}
.sel{position:relative;display:block}
.sel select{padding-right:34px}
.sel .ic{position:absolute;right:11px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none}
.f [aria-invalid=true]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.row-time{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;align-items:end;margin-top:16px}
.chk{display:flex;align-items:center;gap:12px;min-height:58px;cursor:pointer;font-size:16px;line-height:1.3}
.chk input{flex:none;width:24px;height:24px;margin:0;font-size:16px;accent-color:var(--ink)}
.err{margin:14px 0 0;color:var(--bad);font-size:16px}
.go{display:block;width:100%;height:60px;margin-top:18px;border:0;border-radius:var(--r);background:var(--ink);color:var(--paper);
  font:500 19px/1 var(--f-display);letter-spacing:.02em;cursor:pointer;transition:transform .15s ease}
.go:active{transform:translateY(1px)}
.trust-s{display:flex;gap:10px;align-items:center;margin:14px 0 0;font-size:15px;color:var(--muted)}
.trust-s .ic{width:20px;height:20px}

/* подсказки города */
.suggest{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;max-height:320px;overflow:auto;
  border:1.5px solid var(--ink);border-radius:var(--r);background:var(--field);color:var(--ink);box-shadow:0 10px 30px rgb(15 32 53 / .18)}
.suggest li{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 14px;cursor:pointer;line-height:1.3}
.suggest li small{font-size:14px;color:var(--muted)}
.suggest li[aria-selected=true]{background:var(--ink);color:var(--paper)}
.suggest li[aria-selected=true] small{color:inherit;opacity:.8}

/* два человека (совместимость) */
.person{margin:0 0 22px;padding:0;border:0;min-width:0}
.person legend{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;font:500 20px/1.2 var(--f-display)}
.who-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;
  font:500 15px/1 var(--f-display);border:1.5px solid currentColor}
.who-n.n1{background:var(--star);border-color:var(--star);color:var(--on-star)}
.more{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;cursor:pointer;list-style:none;font-size:16px;color:var(--muted)}
.more summary::-webkit-details-marker{display:none}
.more summary .ic{width:18px;height:18px;transition:transform .25s ease}
.more[open] summary .ic{transform:rotate(180deg)}
.more-in{padding:2px 0 16px}
.more-in .f-time{max-width:180px}
.more-in .hint{margin:10px 0 0;font-size:15px;color:var(--muted)}

/* ---------- Диск звёздной карты ---------- */
.sky{--dd:max(var(--d),min(100vw,1200px));position:relative;isolation:isolate;overflow:hidden;max-width:1200px;margin:44px auto 0;
  padding:92px var(--gut) 0;color:var(--on-sky);scroll-margin-top:0}
.sky::before{content:"";position:absolute;z-index:-1;top:0;width:var(--dd);aspect-ratio:1;border-radius:50%;left:calc(var(--cx) - var(--dd) / 2);background:var(--sky)}
.sky::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:calc(var(--dd) / 2);background:var(--sky)}
.sky-in{position:relative;max-width:600px}
.sky a{color:var(--on-sky)}
h2{margin:0;font:500 31px/1.1 var(--f-display);letter-spacing:-.01em}
#res-title:focus{outline:none}
.res-date{margin:6px 0 0;font:300 24px/1.2 var(--f-display);color:var(--on-sky-muted)}
[data-state=empty] .res-date{font-size:19px;line-height:1.35}

/* главная: диск — настоящая планисфера со шкалой дат */
.home .sky{margin-top:18px;padding-top:124px}
.home .sky::before{display:none}
.home .sky::after{z-index:-2}
.home .sky-in{max-width:640px}
.disc{position:absolute;z-index:-1;top:0;width:var(--dd);height:auto;left:calc(var(--cx) - var(--dd) / 2)}
.disc .disc-bg{fill:var(--sky)}
.disc .disc-grid circle,.disc .disc-grid path{fill:none;stroke:var(--grid);stroke-width:1.4}
.disc .ring-line{stroke:var(--on-sky-muted)}
.disc .tk{stroke-width:1.1}
.disc .tk-month{stroke-width:1.8}
.disc .ring-lab{letter-spacing:.18em}

/* ---------- Схемы (SVG) ---------- */
.fig{margin:18px -8px 0}
.fig-box{position:relative;aspect-ratio:1/1}
.fig-box.mx-box{aspect-ratio:480/498}
.fig-box svg{display:block;width:100%;height:100%}
.fig figcaption{margin:10px 8px 0;font-size:15px;line-height:1.45;color:var(--on-sky-muted)}
.ring-line{fill:none;stroke:var(--sky-line);stroke-width:1.2}
.ring-in{stroke-dasharray:2 5}
.tk{stroke:var(--on-sky-muted);stroke-width:1}
.tk-month{stroke:var(--on-sky);stroke-width:1.6}
.ring-lab{fill:var(--on-sky-muted);font-family:var(--f-display);font-weight:500;letter-spacing:.16em}
.ring-lab.is-on{fill:var(--star)}
.idx{fill:var(--star)}
.idx-line{stroke:var(--star);stroke-width:2}

.mx .ln{fill:none;stroke:var(--on-sky);stroke-width:1.4}
.mx .ax{stroke:var(--on-sky-muted);stroke-width:1;stroke-dasharray:2 6}
.nd circle{fill:var(--sky);stroke:var(--on-sky);stroke-width:1.5}
.nd text{fill:var(--on-sky);font-family:var(--f-display);font-weight:500;font-variant-numeric:tabular-nums}
.nd-rod circle,.nd-in circle{stroke:var(--on-sky-muted);stroke-width:1}
.nd-rod text,.nd-in text{fill:var(--on-sky-muted)}
.nd-center circle{fill:var(--star);stroke:none}
.nd-center text{fill:var(--on-star)}
.mx-cap text{fill:var(--star);font:500 16px var(--f-display);letter-spacing:.04em}

.ch-axis{stroke:var(--on-sky);stroke-width:1.6}
.ch-cusp{stroke:var(--sky-line);stroke-width:1.2}
.ch-hnum{fill:var(--on-sky-muted);font-family:var(--f-display);font-weight:500}
.ch-mc{fill:none;stroke:var(--on-sky);stroke-width:1.5}
.ch-angle{fill:var(--star);font-family:var(--f-display);font-weight:500;letter-spacing:.08em}
.asp-soft{stroke:var(--star);stroke-width:1.2;opacity:.85}
.asp-hard{stroke:var(--on-sky-muted);stroke-width:1.2;stroke-dasharray:4 4}
.ch-pl{fill:var(--on-sky);font-family:var(--f-display);font-weight:500}
.ch-sun{fill:var(--star)}
.ch-pl-tick{stroke:var(--on-sky);stroke-width:1.6}
.ch-pl-lead{stroke:var(--on-sky-muted);stroke-width:.8}

.cp-arc{fill:none;stroke:var(--star);stroke-width:3;stroke-linecap:round}
path.cp-one,.cp-dot.cp-one{fill:var(--star)}
path.cp-two,.cp-dot.cp-two{fill:var(--sky);stroke:var(--on-sky);stroke-width:1.6}
.cp-maybe{stroke-dasharray:3 3;opacity:.8}
.cp-dot.cp-one.cp-maybe{fill:var(--sky);stroke:var(--star);stroke-width:1.6}
.cp-num{fill:var(--on-sky);font-family:var(--f-display);font-weight:500}
.cp-big{fill:var(--on-sky);font-family:var(--f-display);font-weight:300}
.cp-small{fill:var(--on-sky-muted);font-family:var(--f-display);font-weight:500;letter-spacing:.1em}

/* ---------- Результат ---------- */
.res-body:empty{display:none}
.res-body p{margin:0 0 12px}
.res-sum{margin-top:18px!important;font-size:16px;color:var(--on-sky-muted)}
.res-sum strong{display:block;margin-top:2px;font:500 21px/1.3 var(--f-display);color:var(--on-sky)}
.note{margin-top:16px!important;font-size:15px;color:var(--on-sky-muted)}
.note-box{margin:14px 0 0!important;padding:12px 14px;border-left:3px solid var(--star);background:rgb(255 255 255 / .04);font-size:15.5px;line-height:1.5}
.res-h{margin:38px 0 8px;font:500 23px/1.2 var(--f-display)}
.pts{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--sky-line)}
.pts li{display:grid;grid-template-columns:58px 1fr;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--sky-line)}
.pt-n{font:300 38px/1 var(--f-display);font-variant-numeric:tabular-nums}
.pt-t b{display:block;font:500 19px/1.25 var(--f-display)}
.pt-t span{display:block;margin-top:2px;font-size:15.5px;line-height:1.4;color:var(--on-sky-muted)}
.pt-t .pt-x{margin-top:8px;font-size:16px;line-height:1.5;color:var(--on-sky)}
.pts .is-center .pt-n{color:var(--star)}
.pts-s .pt-n{font-size:30px}
.tbl-wrap{margin:12px 0 0;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:9px 8px 9px 0;border-bottom:1px solid var(--sky-line);text-align:left;vertical-align:baseline}
.tbl thead th{font:500 13px/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-sky-muted)}
.tbl tbody th{font-weight:400}
.tbl .num{white-space:nowrap}
.tbl .total th,.tbl .total td{font-weight:600;color:var(--star)}
.hint{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--on-sky-muted)}
.asp{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--sky-line)}
.asp li{padding:9px 0;border-bottom:1px solid var(--sky-line)}
.asp small{font-size:14px;color:var(--on-sky-muted);white-space:nowrap}
.reading h4{margin:22px 0 6px;font:500 19px/1.25 var(--f-display)}
.reading p{margin:0 0 10px}
.pair{display:grid;gap:12px;margin-top:20px}
.who{padding:16px;border:1px solid var(--sky-line);border-radius:var(--r)}
.who-h{display:flex;align-items:center;gap:10px;margin:0!important;font:500 19px/1.25 var(--f-display)}
.who .hint{margin-top:6px}
.list{margin:10px 0 0;padding-left:18px}
.list li{margin:4px 0}
.share{margin-top:34px}
.ghost{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:1px solid var(--sky-line);border-radius:var(--r);
  background:transparent;color:var(--on-sky);font:500 16px var(--f-text);cursor:pointer;text-align:left}
.ghost .ic{width:20px;height:20px;color:var(--star)}
.copy-st{min-height:1px;margin:8px 0 0;font-size:15px;color:var(--on-sky-muted);overflow-wrap:anywhere}

/* ---------- Справка, вопросы, двери, канал ---------- */
.block{margin-top:56px}
.prose p{margin:12px 0 0}
.prose h2+p{margin-top:14px}
.prose h3{margin:30px 0 0;font:500 23px/1.2 var(--f-display)}
.prose ul,.prose ol{margin:12px 0 0;padding-left:20px}
.prose li{margin:6px 0}
.prose .small{font-size:15px;color:var(--on-sky-muted)}
.prose .tbl{margin-top:12px}
.faq details{border-bottom:1px solid var(--sky-line)}
.faq h2+details{margin-top:12px;border-top:1px solid var(--sky-line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:10px 0;cursor:pointer;list-style:none;font:500 19px/1.3 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;color:var(--star);transition:transform .25s ease}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{margin:0 0 16px;color:var(--on-sky-muted)}

.doors{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--sky-line)}
.door a{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:18px 0 20px;text-decoration:none;border-bottom:1px solid var(--sky-line)}
.door-title{font:450 26px/1.15 var(--f-display)}
.door-desc{grid-column:1;margin-top:4px;font-size:16px;line-height:1.45;color:var(--on-sky-muted)}
.door-need{grid-column:1;margin-top:9px;font:500 14px/1.3 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--star)}
.door .ic{grid-column:2;grid-row:1 / span 3;width:28px;height:28px;color:var(--star);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.door a:hover .door-title{text-decoration:underline;text-decoration-thickness:1px}
.door a:hover .ic{transform:translateX(4px)}
.home .doors{margin-top:0}
.home .door-title{font-size:29px;line-height:1.12;letter-spacing:-.005em}
.home .door-desc{margin-top:6px}
.home .door .ic{width:30px;height:30px}

.trust{display:flex;gap:12px;align-items:flex-start;margin:30px 0 0;font-size:17px;line-height:1.45}
.trust .ic{width:24px;height:24px;color:var(--star);margin-top:1px}
.tg-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:10px;font-weight:500}
.tg-link .ic{width:24px;height:24px;color:var(--star)}
.tg{margin-top:56px;padding:24px 20px;border:1px solid var(--sky-line);border-radius:var(--r)}
.tg p{margin:8px 0 16px;color:var(--on-sky-muted)}
.sky a.btn-star{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:var(--r);background:var(--star);color:var(--on-star);
  font:500 18px var(--f-display);text-decoration:none}
.btn-star .ic{width:22px;height:22px}

/* ---------- Подвал ---------- */
.foot{margin-top:56px;padding:22px 0 44px;border-top:1px solid var(--sky-line);font-size:15px;line-height:1.5;color:var(--on-sky-muted)}
.foot p{margin:0 0 8px}
.foot nav{display:flex;flex-wrap:wrap;column-gap:22px;margin:4px 0 8px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px}
.foot .src a{display:inline-flex;align-items:center;min-height:44px}
.foot-owner:empty{display:none}

/* ---------- Страница 404 ---------- */
.nf .sky{margin-top:28px}

/* ---------- Широкий экран ---------- */
@media (min-width:600px){
  .pair{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  :root{--cx:50%}
  .hero{margin:0 auto;padding-top:40px}
  .sky{padding-top:170px}
  .sky-in{margin:0 auto}
  .home .sky{padding-top:210px}
  .home h1{max-width:14ch}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}