/* Ask Lyra — стили сайта (specs/003-asklyra-site). Токены — docs/DESIGN-BRIEF-pwa.md v6, раздел 5:
   светлая тема по умолчанию, тёмная — по настройке телефона или cookie lyra_t (data-theme на <html>).
   Inline-стилей на страницах нет (CSP), всё оформление здесь. */

/* Шрифты (OFL, файлы в static/lyra/fonts, лицензии рядом): кириллица с Ґ, І, Ї, Є и латиница с ’.
   Заголовки — Fira Sans Extra Condensed 700 (решение владельца 25.10). Sofia Sans Condensed не подходит:
   строчную кириллицу рисует болгарскими формами (д как g, т как m), украинского варианта в шрифте нет. */
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/s/fira-sans-extra-condensed-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/s/fira-sans-extra-condensed-latin.woff2) format('woff2'); 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: 'Onest'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/s/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/s/onest-latin.woff2) format('woff2'); 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 {
  --bg: #FFFFFF; --bg-quiet: #EDECFF; --bg-tile: #FFFFFF; --line: #DCDAF5;
  --text: #161543; --text-soft: #5C5A9B; --link: #3A1FA8; --focus: #3A1FA8;
  --action: #161543; --on-action: #FFFFFF; --outline: #161543; --field-edge: #161543;
  --accent: #FFE066; --accent-2: #FF8497; --danger: #D32943; --ok: #00875A;
  --frame: #FFFFFF; --frame-edge: #161543; --plate: #161543; --on-plate: #FFFFFF;
  --back: #161543; --back-edge: #161543; --back-line: #ACABFE;
  --ritual: #EDECFF; --ritual-raised: #FFFFFF; --fan-edge: #FFFFFF; --ink: #161543; --cloud: #FFFFFF; --moon-fill: none;
  --font-head: 'Fira Sans Extra Condensed', 'Avenir Next Condensed', 'Roboto Condensed', sans-serif-condensed, 'Arial Narrow', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0A0920; --bg-quiet: #161543; --bg-tile: #0A0920; --line: #343368;
  --text: #EDECFF; --text-soft: #9897D0; --link: #ACABFE; --focus: #EDECFF;
  --action: #EDECFF; --on-action: #161543; --outline: #ACABFE; --field-edge: #ACABFE;
  --danger: #F0566F; --ok: #2BB583; --frame: #EDECFF; --frame-edge: #EDECFF; --back-edge: #ACABFE;
  --ritual: #0A0920; --ritual-raised: #161543; --fan-edge: #ACABFE; --ink: #EDECFF; --cloud: #343368; --moon-fill: #FFE066;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0920; --bg-quiet: #161543; --bg-tile: #0A0920; --line: #343368;
    --text: #EDECFF; --text-soft: #9897D0; --link: #ACABFE; --focus: #EDECFF;
    --action: #EDECFF; --on-action: #161543; --outline: #ACABFE; --field-edge: #ACABFE;
    --danger: #F0566F; --ok: #2BB583; --frame: #EDECFF; --frame-edge: #EDECFF; --back-edge: #ACABFE;
    --ritual: #0A0920; --ritual-raised: #161543; --fan-edge: #ACABFE; --ink: #EDECFF; --cloud: #343368; --moon-fill: #FFE066;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font-text); }
html.ritual, html.ritual body { background: var(--ritual); }
a { color: var(--link); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Колонка ширины телефона, на десктопе по центру */
.shell { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }
.ritual .shell { background: var(--ritual); }
.top { height: 56px; padding: 0 20px; padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.top.slim { padding: 0 12px; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.wordmark { font: 700 24px/1 var(--font-head); letter-spacing: .01em; }
.icon-btn { width: 44px; height: 44px; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; }
.ritual .icon-btn { background: var(--ritual-raised); border-color: transparent; }
.icon-btn svg { width: 20px; height: 20px; }
.top .q-line { margin: 0; flex: 1; min-width: 0; font-size: 14px; font-style: italic; text-align: center; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .spacer { width: 44px; flex-shrink: 0; }

/* Логотип и иллюстрации: линия и точки — цвет темы */
.ink-line { stroke: var(--ink); }
.ink-fill { fill: var(--ink); }
.star { fill: var(--accent); stroke: var(--ink); }
.star-2 { fill: var(--accent-2); stroke: var(--ink); }
.moon-icon { fill: var(--moon-fill); stroke: var(--text); }
.sky-bg { fill: var(--bg-quiet); }
.cloud { fill: var(--cloud); stroke: var(--ink); }
.cloud-star { fill: var(--bg); stroke: var(--ink); }

.page { flex: 1; padding: 4px 20px 128px; display: flex; flex-direction: column; gap: 16px; }
.page.no-nav { padding-bottom: 24px; }
/* B5: короткий результат должен уместиться в экран телефона вместе с кнопками (бриф, раздел 7). */
.page.compact { gap: 8px; }
.card.sm { width: 100px; height: 170px; padding: 5px; gap: 4px; border-radius: 12px; }
.card.sm .plate { height: 22px; font-size: 12px; border-radius: 6px; }
.page.compact .halo { width: 190px; height: 140px; margin-left: -95px; }
.page.compact > .card-stage { padding: 4px 0; }
.page.compact .halo { top: 8px; }
.hero { display: block; width: 100%; height: auto; }

.rubric { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.h1 { font: 700 48px/.98 var(--font-head); }
.h1.m { font-size: 40px; line-height: 1; }
.h1.s { font-size: 36px; line-height: 1; }
.h2 { font: 700 34px/1 var(--font-head); }
.lead { font-size: 16px; color: var(--text-soft); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack.wide { gap: 14px; }
.center { align-items: center; text-align: center; }
.note { font-size: 13px; line-height: 1.4; color: var(--text-soft); }
.note.c { text-align: center; }
.body-text { font-size: 17px; line-height: 1.6; }
.read-text { font-size: 18px; line-height: 1.7; }

/* Поле вопроса */
.field { width: 100%; padding: 16px 18px; font-size: 18px; line-height: 1.45; color: var(--text); background: var(--bg); border: 1.5px solid var(--field-edge); border-radius: 22px; resize: none; }
.field:focus-visible { outline: none; border: 2px solid var(--focus); padding: 15.5px 17.5px; }
.field::placeholder { color: var(--text-soft); opacity: 1; }
.field-meta { display: flex; justify-content: space-between; gap: 12px; }
.field-error { color: var(--danger); }

/* Чипы-темы и ряды знаков */
.chips { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); background: var(--bg-quiet); border: none; border-radius: 999px; text-decoration: none; }
.chip.sign { padding: 0 16px 0 12px; font-size: 15px; background: var(--bg); border: 1.5px solid var(--line); }
.chip.sign[aria-current="page"] { font-weight: 600; color: var(--on-action); background: var(--action); border-color: var(--action); }
.chip svg { width: 20px; height: 20px; }
.sign-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Кнопки (раздел 5 брифа): пилюля, надпись заголовочным шрифтом */
.btn { min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 21px/1 var(--font-head); text-align: center; text-decoration: none; border-radius: 999px; border: 1.6px solid transparent; }
.btn.lg { min-height: 58px; font-size: 22px; }
.btn-primary { color: var(--on-action); background: var(--action); border-color: var(--action); }
.btn-primary:hover { color: var(--on-action); }
.btn-secondary { color: var(--text); background: var(--bg); border-color: var(--outline); }
.btn-ghost { min-height: 46px; color: var(--link); background: transparent; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { padding: 0 12px; font-size: 20px; white-space: nowrap; }
.btn-row > .btn-primary { flex: 1.3; }
.btn-row > .btn-secondary { flex: 1; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

/* Секции */
.quiet { padding: 22px 16px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--bg-quiet); border-radius: 28px; }
.quiet.p { padding: 16px 20px 18px; gap: 6px; border-radius: 22px; }
.boxed { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; border: 1.6px solid var(--outline); border-radius: 22px; }
.quiet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 4px; }
.mt { margin-top: 20px; }
.sign-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sign-tile { min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text); background: var(--bg-tile); border-radius: 16px; text-decoration: none; }
.sign-tile svg { width: 24px; height: 24px; }
.sign-grid.big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sign-grid.big .sign-tile { min-height: 100px; background: var(--bg-quiet); border-radius: 18px; gap: 3px; }
.sign-grid.big .sign-tile b { font-size: 15px; font-weight: 600; }
.sign-grid.big .sign-tile small { font-size: 12px; color: var(--text-soft); }
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1.5px solid var(--line); font-size: 17px; font-weight: 500; }
.steps li:last-child { border-bottom: 1.5px solid var(--line); }
.steps b { width: 28px; flex-shrink: 0; font: 700 34px/1 var(--font-head); color: #ACABFE; }
.faq { margin: 0; }
.faq > div { padding: 14px 0; border-top: 1.5px solid var(--line); }
.faq > div:last-child { border-bottom: 1.5px solid var(--line); }
.faq-q { font-size: 17px; font-weight: 600; }
.faq-a { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-soft); }
.swap { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.swap li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1.5px solid var(--line); }
.swap li:last-child { border-bottom: 1.5px solid var(--line); }
.swap b { font-size: 15px; font-weight: 500; color: var(--text-soft); }
.swap span { font-size: 17px; font-weight: 600; }
.foot { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.foot p { font-size: 14px; color: var(--text-soft); }
.foot nav { display: flex; gap: 20px; font-size: 14px; }
.foot nav a { min-height: 44px; display: flex; align-items: center; }

/* Нижняя панель */
.tabbar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(448px, calc(100% - 32px)); padding: 6px; display: flex; gap: 6px; background: var(--bg); border: 1.5px solid var(--outline); border-radius: 999px; z-index: 10; }
.tabbar a { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; color: var(--text); font: 700 19px/1 var(--font-head); text-decoration: none; }
.tabbar a[aria-current="page"] { color: var(--on-action); background: var(--action); }
.tabbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Карта: рамка скана с плашкой (вариант A холста), скан не трогаем */
.card { position: relative; width: 114px; height: 194px; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 5px; background: var(--frame); border: 1.6px solid var(--frame-edge); border-radius: 13px; flex-shrink: 0; overflow: hidden; }
/* У сканов Старших Арканов внизу английская подпись (≈14 % высоты): название даёт наша плашка,
   поэтому скан чуть увеличен от верхнего края, и подпись уходит за рамку. Сам рисунок не трогаем. */
.card picture { flex: 1 1 0; min-height: 0; display: block; }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 7px; background: #F4F1E6; transform: scale(1.05); transform-origin: 50% 0; }
.card.reversed img { transform: rotate(180deg) scale(1.08); transform-origin: 50% 50%; }
.card.xs img { transform: scale(1.18); }
.card .plate { position: relative; z-index: 1; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 4px; font: 700 14px/1 var(--font-head); text-transform: uppercase; color: var(--on-plate); background: var(--plate); border-radius: 7px; white-space: nowrap; overflow: hidden; }
.card.md { width: 156px; height: 268px; padding: 8px; gap: 6px; border-radius: 16px; }
.card.md .plate { height: 32px; font-size: 16px; border-radius: 9px; }
.card.lg { width: 172px; height: 296px; padding: 8px; gap: 6px; border-radius: 17px; }
.card.lg .plate { height: 34px; font-size: 17px; border-radius: 10px; }
.card.xl { width: 196px; height: 336px; padding: 10px; gap: 8px; border-radius: 20px; }
.card.xl .plate { height: 38px; font-size: 19px; border-radius: 11px; }
.card.xs { width: 76px; height: 130px; padding: 4px; border-radius: 10px; }
.card.xs .plate { display: none; }
.rev-note { font-size: 13px; color: var(--text-soft); text-align: center; }
.card-stage { position: relative; display: flex; justify-content: center; padding: 14px 0; }
.halo { position: absolute; left: 50%; top: 22px; width: 220px; height: 166px; margin-left: -110px; background: var(--bg-quiet); border-radius: 999px; }
.spark { position: absolute; }
.spark.a { left: 22%; top: 18px; width: 22px; }
.spark.b { right: 22%; bottom: 22px; width: 14px; }
.spark.c { right: 12%; top: 40%; width: 18px; }

/* Рубашка */
.back-rect { fill: var(--back); stroke: var(--back-edge); stroke-width: 1.2; }
.back-inner { fill: none; stroke: var(--back-line); stroke-width: 1; }
.back-line { fill: none; stroke: var(--back-line); stroke-width: 1.1; stroke-linecap: round; }
.back-dot { fill: #FFFFFF; }
.back-star { fill: var(--accent); }

/* B3: выбор карты — три веера */
.fan-wrap { display: flex; flex-direction: column; align-items: center; }
.fan { position: relative; width: 348px; height: 140px; }
.fan + .fan { margin-top: -52px; }
.fan button { position: absolute; width: 60px; height: 102px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--back); border: 1.5px solid var(--fan-edge); border-radius: 9px; transition: transform .2s ease; }
.fan button svg { width: 16px; height: 16px; fill: var(--accent); }
.fan button[aria-pressed="true"] { visibility: hidden; }
.fan button:nth-child(1) { left: 0; top: 34px; transform: rotate(-16deg); }
.fan button:nth-child(2) { left: 36px; top: 19px; transform: rotate(-12deg); }
.fan button:nth-child(3) { left: 72px; top: 8px; transform: rotate(-8deg); }
.fan button:nth-child(4) { left: 108px; top: 2px; transform: rotate(-4deg); }
.fan button:nth-child(5) { left: 144px; top: 0; }
.fan button:nth-child(6) { left: 180px; top: 2px; transform: rotate(4deg); }
.fan button:nth-child(7) { left: 216px; top: 8px; transform: rotate(8deg); }
.fan button:nth-child(8) { left: 252px; top: 19px; transform: rotate(12deg); }
.fan button:nth-child(9) { left: 288px; top: 34px; transform: rotate(16deg); }
.fan button:hover { transform: translateY(-6px); }
.slot-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slot { width: 84px; height: 136px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.6px dashed var(--text-soft); border-radius: 14px; }
.slot svg { width: 68px; height: 116px; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent); }
.ritual-main { flex: 1; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.ritual-actions { padding: 0 20px; display: flex; flex-direction: column; gap: 2px; }

/* B4: ожидание */
.wait-lines { padding: 0 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.wait-lines .now { font: 700 32px/1.05 var(--font-head); }
.wait-lines .next { font-size: 16px; color: var(--text-soft); }

/* B5/B6: результат */
.phrase { font: 700 28px/1.06 var(--font-head); text-align: center; }
.phrase.l { text-align: left; font-size: 30px; line-height: 1.06; }
.q-italic { font-style: italic; font-size: 16px; line-height: 1.4; }
.reading { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 24px; }
.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; font-size: 17px; line-height: 1.55; }
.bullets svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 6px; fill: var(--ink); }
.fade { max-height: 92px; overflow: hidden; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
details.how { border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); }
details.how summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; cursor: pointer; list-style: none; }
details.how summary::-webkit-details-marker { display: none; }
details.how p { padding-bottom: 14px; color: var(--text-soft); }

/* C1: карта дня — переворот */
.flip { position: relative; width: 156px; height: 268px; padding: 0; background: transparent; border: none; perspective: 900px; }
.flip-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s ease; }
.flip.open .flip-in { transform: rotateY(180deg); }
.flip-face, .flip-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-face { transform: rotateY(180deg); }
.flip-back svg { width: 100%; height: 100%; }
.flip-hint { font-size: 14px; color: var(--text-soft); text-align: center; }

/* Мелочи раскладки */
.row-card { display: flex; gap: 14px; align-items: flex-start; }
.row-card .phrase.l { font-size: 24px; }
.mini-back svg { width: 58px; height: 98px; transform: rotate(7deg); }
.link-row { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }
.sticky-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); margin-top: auto; }
details.tip summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; }
details.tip p { font-size: 14px; }
.empty-card svg { width: 72px; height: 122px; opacity: .9; }
.quiet.center { align-items: center; text-align: center; }
.card-stage.quiet { flex-direction: row; justify-content: center; align-items: center; padding: 22px 0; }
.quiet.center .btn { align-self: stretch; }

/* Системные состояния, тост, экран помощи */
.state { flex: 1; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.state .t { font: 700 28px/1.08 var(--font-head); }
.help-box { padding: 20px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-quiet); border-radius: 22px; text-align: left; }
.help-box .num { font: 700 40px/1 var(--font-head); }
/* Тост сверху: снизу он закрывал бы главную кнопку экрана (выбор карты, результат). */
.toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(448px, calc(100% - 32px)); padding: 10px 10px 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--on-action); background: var(--action); border-radius: 999px; z-index: 20; }
.toast button { min-height: 44px; padding: 0 20px; font: 700 18px/1 var(--font-head); color: var(--text); background: var(--bg); border: none; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 370px) {
  .h1 { font-size: 42px; }
  .fan { transform: scale(.92); transform-origin: top center; }
}