/* ══════════════════════════════════════════════════════════════════════════
   zodiacdaily.net — публічна частина

   Усі кольори, розміри, радіуси й відступи беруться з tokens.css. Жодного
   власного hex-коду тут бути не повинно: §105 ТЗ по дизайну забороняє
   змінювати color/typography/radius/spacing без погодження, і єдиний спосіб
   це витримати — не мати другого місця, де їх можна задати.

   Порядок пріоритетів — §109: readability → navigation → engagement →
   discovery → conversion → decoration. Тому тут багато про читабельність і
   майже нічого про декор.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
    /* Боковий відступ сторінки — §7: 24–32px */
    padding: 0 var(--page-x) var(--s-16);
}

/* Контейнер 1280px (§7). Текстові блоки окремо обмежені --measure (§8):
   full-width текст на статтях заборонений. */
.top, .foot, .crumbs, main { max-width: var(--container); margin: 0 auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text); }

/* Фокус мусить бути видимий (§60). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ── Типографіка (§16–§19) ──────────────────────────────────────────────────
   Заголовки — serif, інтерфейс — sans. Це головне, що відрізняє editorial
   від generic SaaS, тому стосується всіх рівнів, не лише H1. */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: -.01em;
    margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); margin-top: var(--s-10); }
h2 { font-size: var(--fs-h2); margin-top: var(--s-16); }
h3 { font-size: var(--fs-h3); margin-top: var(--s-10); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

/* Type scale mobile (§18) */
@media (max-width: 767px) {
    :root {
        --fs-h1: 34px;   /* 32–36 */
        --fs-h2: 28px;   /* 26–30 */
        --fs-h3: 22px;   /* 21–24 */
    }
    body { padding-bottom: calc(var(--bottomnav-h) + var(--s-10)); }
}

.lede      { color: var(--text-2); font-size: var(--fs-body-lg); max-width: var(--measure); }
.fine      { color: var(--text-muted); font-size: var(--fs-body-sm); }
.eyebrow   {
    color: var(--accent); font-size: var(--fs-caption);
    letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-2);
}

/* ── Пропустити до змісту (§60) ─────────────────────────────────────────── */
.skip { position: absolute; left: -9999px; }
.skip:focus {
    left: 50%; top: var(--s-2); transform: translateX(-50%);
    background: var(--surface-up); color: var(--text);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-md); z-index: 20;
}

/* ── Хедер (§20, §22) ──────────────────────────────────────────────────── */
.top {
    display: flex; align-items: center; gap: var(--s-6);
    min-height: var(--header-h);
    border-bottom: 1px solid var(--border);
}
.brand {
    font-family: var(--font-serif);
    font-size: var(--fs-h4); font-weight: 500;
    letter-spacing: .04em; color: var(--text); text-decoration: none;
    /* §21: logo 160–190px, не oversized */
    max-width: 190px;
}
.menu { display: flex; gap: var(--s-6); margin-left: auto; }        /* §22: 24–28px */
.menu a {
    font-size: var(--fs-body-sm); color: var(--text-2); text-decoration: none;
    padding: var(--s-2) 0;
    transition: color var(--t-base) var(--ease);                     /* §22: 150–200ms */
}
.menu a:hover { color: var(--text); }
.menu a[aria-current] {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);                        /* subtle indicator */
}

@media (max-width: 767px) {
    .top { min-height: var(--header-h-sm); }
    /* §23: основна навігація переїжджає в bottom navigation, тому верхнє меню
       на мобільному не дублюється. */
    .menu { display: none; }
}

/* ── Нижня навігація, мобільна (§24) ───────────────────────────────────── */
.bottomnav { display: none; }

@media (max-width: 767px) {
    .bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
        height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);   /* §24: safe-area */
        background: color-mix(in srgb, var(--bg-2) 88%, transparent);
        backdrop-filter: blur(12px);                   /* §24: surface + blur */
        border-top: 1px solid var(--border);
    }
    .bottomnav a {
        flex: 1; display: grid; place-content: center; gap: var(--s-1);
        text-align: center; text-decoration: none;
        color: var(--text-2); font-size: var(--fs-caption);
        /* §60: тач-таргет мінімум 44×44 — тут уся висота рядка */
        min-height: 44px;
    }
    .bottomnav a[aria-current] { color: var(--accent); }
    .bottomnav .ico { font-size: var(--fs-h4); line-height: 1; }
}

/* ── Хлібні крошки ─────────────────────────────────────────────────────── */
.crumbs {
    padding-top: var(--s-4);
    font-size: var(--fs-body-sm); color: var(--text-muted);
}
.crumbs a { color: var(--text-muted); }
.crumbs span { padding: 0 var(--s-2); }

/* ── Секції ────────────────────────────────────────────────────────────── */
main > section { margin: var(--section-y) 0; }
@media (max-width: 767px) { main > section { margin: var(--section-y-sm) 0; } }

/* ── Горизонт: контент + right rail (§32) ──────────────────────────────── */
.with-rail {
    display: grid; gap: var(--s-8);                        /* §32: gap 32px */
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    .with-rail { grid-template-columns: minmax(0, 760px) var(--rail); }
}
.rail > * + * { margin-top: var(--s-5); }
.rail .box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--s-5);
}
.rail h3 { margin-top: 0; font-size: var(--fs-h4); }

/* ── Плитки знаків (§28) ────────────────────────────────────────────────────
   «Не використовувати 12 однакових boring buttons» — тому це картки з
   символом, назвою й діапазоном дат, із підйомом на hover (§56). */
.signs {
    list-style: none; padding: 0; margin: var(--s-6) 0;
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.signs > li {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden;
    transition: transform var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.signs > li:hover { transform: translateY(-2px); border-color: var(--accent); }
.signs a { display: block; padding: var(--s-4); text-decoration: none; color: var(--text); }
.signs .glyph { display: block; font-size: var(--fs-h3); color: var(--accent); line-height: 1; }
.signs .name  { display: block; margin-top: var(--s-2); font-weight: 600; }
.signs .dates { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.signs .sub   { display: block; padding: 0 var(--s-4) var(--s-3); font-size: var(--fs-body-sm); }
.signs[aria-current] , .signs .selected {
    border-color: var(--accent); background: var(--surface-up);     /* §28: selected */
}
.signs.compact a { padding: var(--s-2) var(--s-3); }

@media (max-width: 767px) {
    /* §28: на мобільному — горизонтальна прокрутка, а не сітка в стовпчик */
    .signs {
        display: flex; gap: var(--s-3); overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(var(--page-x) * -1); padding-inline: var(--page-x);
    }
    .signs::-webkit-scrollbar { display: none; }
    .signs > li { flex: 0 0 9.5rem; scroll-snap-align: start; }
}

/* ── Картки розділів (§49 Tool Card) ───────────────────────────────────────
   Tool card мусить відчуватися як взаємодія, а не як стаття — тому акцентний
   заголовок і підйом на hover, без зображення. */
.tiles {
    list-style: none; padding: 0; margin: var(--s-6) 0;
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tiles a {
    display: block; padding: var(--s-5);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); text-decoration: none; color: var(--text);
    transition: transform var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.tiles a:hover { transform: translateY(-2px); border-color: var(--accent); }
.tiles strong { display: block; font-family: var(--font-serif);
                font-size: var(--fs-h4); color: var(--accent); }
.tiles span   { color: var(--text-2); font-size: var(--fs-body-sm); }

/* ── Періоди гороскопа (§33) ─────────────────────────────────────────────
   Активна вкладка має бути чітко помітною — не лише кольором тексту. */
.periods { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.periods li, .periods.inline > * {
    padding: var(--s-2) var(--s-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-pill); font-size: var(--fs-body-sm);
}
.periods.inline { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-8); }
.periods.inline a { text-decoration: none; color: var(--text-2); }
.periods.inline a:hover { color: var(--text); }
.periods.inline [aria-current] {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.periods .off { color: var(--text-muted); }

/* ── Основна контентна картка (§34) ─────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--s-8);     /* §34: 32px */
}
@media (max-width: 767px) { .card { padding: var(--s-5); } }   /* §34: 20px */

/* ── Колода й пари ─────────────────────────────────────────────────────── */
.deck, .pairs { list-style: none; padding: 0; margin: var(--s-6) 0; }
.deck { columns: 2; column-gap: var(--s-6); }
.deck li { margin: 0 0 var(--s-2); break-inside: avoid; }
.pairs li {
    display: flex; align-items: baseline; gap: var(--s-3);
    padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.pairs .score {
    margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums;
}

/* ── Бали сумісності (§40) ──────────────────────────────────────────────────
   «Результат не повинен виглядати як дешевий percentage widget» — тому
   підписи, вирівняні числа й стримана шкала, а не великі круги з відсотками. */
.scores { list-style: none; padding: 0; }
.scores li {
    display: grid; grid-template-columns: 9rem 1fr 3rem; gap: var(--s-3);
    align-items: center; margin: 0 0 var(--s-3);
}
.scores .label { color: var(--text-2); font-size: var(--fs-body-sm); }
.scores meter { width: 100%; height: 8px; }
.scores .value {
    text-align: right; color: var(--accent); font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
    .scores li { grid-template-columns: 7rem 1fr 2.5rem; }
}

/* ── Ключові слова карти ───────────────────────────────────────────────── */
.keywords { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; }
.keywords span {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-2); padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill); font-size: var(--fs-body-sm);
}

/* ── Кнопки (§25, §26) ──────────────────────────────────────────────────── */
.btn, .calc button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px;                                   /* §25: 44–48 */
    padding: 0 var(--s-5);                              /* §25: 18–24 */
    border: 1px solid var(--accent); border-radius: var(--r-md);
    background: var(--accent); color: var(--on-accent);
    font: 600 var(--fs-body)/var(--lh-ui) var(--font-sans);
    text-decoration: none; cursor: pointer;
    transition: filter var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.btn:hover, .calc button:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn:active, .calc button:active { transform: translateY(1px); }
.btn[disabled], .calc button[disabled] { opacity: .5; cursor: not-allowed; }
.btn-secondary {
    background: transparent; color: var(--text); border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }

/* ── Форми (§27) ───────────────────────────────────────────────────────── */
.calc {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--s-5);
    display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end;
}
.calc label {
    display: grid; gap: var(--s-1);
    font-size: var(--fs-body-sm); color: var(--text-2);
}
.calc select, .calc input {
    height: 48px;                                      /* §27: 48px */
    padding: 0 var(--s-3);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--bg-2); color: var(--text);
    /* 16px мінімум: при меншому Safari на iOS збільшує сторінку при фокусі,
       і макет стрибає — це прямо суперечить CLS < 0.1 зі §28 основного ТЗ. */
    font: 400 16px/var(--lh-ui) var(--font-sans);
}
.calc select:focus, .calc input:focus { border-color: var(--accent); }

/* ── Інше ──────────────────────────────────────────────────────────────── */
.advice {
    background: var(--surface); border-left: 2px solid var(--accent);
    padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
}
.lucky { color: var(--accent); }

/* §51: наприкінці сторінки — «Your Next Reading», три напрямки. */
.cta { margin: var(--s-12) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-4); }

.hero { padding-top: var(--s-4); }

.foot {
    margin-top: var(--s-20); padding-top: var(--s-6);
    border-top: 1px solid var(--border);
    color: var(--text-muted); font-size: var(--fs-body-sm);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-3); }

/* ── Заглушка ──────────────────────────────────────────────────────────── */
.soon {
    min-height: 100vh; display: grid; place-content: center; text-align: center;
    max-width: 34rem; margin: 0 auto;
}
.soon h1 { font-size: var(--fs-h2); margin: 0 0 var(--s-4); letter-spacing: .06em; }
.soon .lede { margin: 0 auto var(--s-10); }
.soon .mark {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-12);
    color: var(--accent); font-size: var(--fs-h4); line-height: 1; opacity: .5;
}
.soon-note {
    color: var(--text-muted); font-size: var(--fs-caption);
    letter-spacing: .14em; text-transform: uppercase; margin: 0;
}