/* Темы поверх style.css. Раскладка одна: мала на входе и на «Сегодня», крупная бусина на нити в практике.
   Светлая — «утро на льне», тёмная — «тёплая темнота». Различаются только палитра и картинки. */

/* ---------- палитры ---------- */
:root[data-theme=light] {
  --bg: #F3EBDC; --bg2: #FBF6EC; --surface: rgba(255,251,243,.62); --line: rgba(57,41,31,.13);
  --fg: #39291F; --muted: rgba(57,41,31,.62); --dim: rgba(57,41,31,.42);
  --amber: #BE824A; --rose: #7D432C; --indigo: #D9B48A; --violet: #E6C9A4; --teal: #667653; --err: #9A3F27;
  --accent: #7D432C; --on-primary: #F6EEDF; --btn: rgba(255,251,243,.7);
  --tile: url('/img/bead-light.png'); --mala: url('/img/mala-linen.jpg'); --intro: url('/img/mala-linen.jpg');
  background: var(--bg);
}
:root[data-theme=dark] {
  --bg: #17120F; --bg2: #322216; --surface: rgba(234,215,186,.06); --line: rgba(234,215,186,.1);
  --fg: #EAD7BA; --muted: #B29B82; --dim: rgba(178,155,130,.7);
  --amber: #BE824A; --rose: #D9784F; --indigo: #7A4E2A; --violet: #9C6534; --teal: #B5BC8B; --err: #D9784F;
  --accent: #BE824A; --on-primary: #17120F; --btn: rgba(234,215,186,.06);
  --tile: url('/img/bead-dark.png'); --mala: url('/img/mala-dark.jpg'); --intro: url('/img/intro.jpg');
}

:root[data-theme=light] body { background: linear-gradient(180deg, rgba(246,239,226,.72), rgba(243,235,220,.82)), url('/img/linen.jpg') center / cover fixed, var(--bg); }
:root[data-theme=dark] body { background: radial-gradient(110% 60% at 50% 0%, #2A1D14, var(--bg) 62%); }
:root[data-theme] button.primary { color: var(--on-primary); }
:root[data-theme=light] button { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(57,41,31,.06); }
:root[data-theme=light] button.primary { box-shadow: 0 6px 18px rgba(57,41,31,.18); }
:root[data-theme=light] button.ghost, :root[data-theme=light] .tabs button, :root[data-theme=light] .topbar .icon, :root[data-theme=light] .seg button { box-shadow: none; }
:root[data-theme=light] input { color-scheme: light; }
:root[data-theme=light] .aura i { opacity: .45; }
:root[data-theme=dark] .aura i { opacity: .5; }
:root[data-theme=light] .seg button.on { background: rgba(255,255,255,.8); }
:root[data-theme=light] .bars .b.on { background: linear-gradient(180deg, var(--amber), var(--accent)); }
:root[data-theme] #s-result .lead { color: var(--accent); }
:root[data-theme] .logo { color: var(--muted); }
:root[data-theme] .card, :root[data-theme] #s-today .card { background: var(--surface); }
:root[data-theme=light] .flash { animation-name: flash-l; }
@keyframes flash-l { from { color: var(--accent); transform: scale(1.03); } to { color: var(--fg); transform: none; } }

/* ---------- первый экран: мала сверху ---------- */
:root[data-theme] .intro-art { background: var(--intro) center 45% / cover no-repeat; opacity: 1; }
:root[data-theme=light] #s-onboard .step[data-step=intro] .logo,
:root[data-theme=light] #s-onboard .step[data-step=intro] h1 { text-shadow: none; }

:root[data-theme] #b-continue { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme] #b-new { color: var(--fg); } /* «Новая мантра» — так же ярко, как «Продолжить» */
/* «Мантрик» — к левому краю, по линии кнопки «Назад» Telegram */
:root[data-theme] #t-name { margin-left: -10px; }
/* на входе «МАНТРИК» справа и выше — слева на фото рука, не читалось */
:root[data-theme] #s-onboard .step[data-step=intro] .logo { margin: -18px 0 0 -10px; position: relative; z-index: 1; }

/* ---------- «Сегодня»: счёт дня внутри малы ---------- */
/* Блок с малой забирает всё свободное место экрана, мала — по размеру этого места (cqh),
   счёт по центру кольца. Без vh: влезает при любой высоте и панели Telegram. */
:root[data-theme] #s-today .hero { flex: 1 1 0; min-height: 190px; padding: 0; display: flex; flex-direction: column; justify-content: center; container-type: size; }
:root[data-theme] #s-today .hero > * { flex: 0 0 auto; }
:root[data-theme] #s-today .hero { --m: min(104vw, 440px, 44vh); --hx: 49.5%; --hy: 50.5%; --rb: .33; --ty: 4px; }
:root[data-theme=light] #s-today .hero { --m: min(118vw, 500px, 48vh); --hx: 50%; --hy: 52.7%; --rb: .34; --ty: -13px; }
@supports (height: 1cqh) {
  :root[data-theme] #s-today .hero { --m: min(127vw, 540px, 135cqh); } /* кольцо — 0,67 кадра */ /* кольцо — 0,8 кадра, края кадра всё равно в маске */
  :root[data-theme=light] #s-today .hero { --m: min(128vw, 540px, 140cqh); } /* на льне кольцо — 0,6 кадра */
}
:root[data-theme] #s-today .hero .aura { display: none; }
:root[data-theme=light] #s-today .hero-num, :root[data-theme=light] #s-today .hero .muted { text-shadow: none; }
:root[data-theme] #s-today .hero-num::before {
  top: 50%; bottom: auto; transform: translate(calc(var(--hx) * -1), calc(var(--hy) * -1 + var(--ty))); /* --ty: по скринам Алёши 21.09 — крупная цифра в центре внешнего круга бусин */ width: var(--m); height: var(--m); opacity: 1;
  background: var(--mala) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 42%, transparent 66%);
          mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 42%, transparent 66%);
}
/* тёмная: кольцо целиком в кадре (mala-dark.jpg, 21.09) — маска по кольцу */
:root[data-theme=dark] #s-today .hero-num::before {
  -webkit-mask-image: radial-gradient(circle at 49.5% 49.5%, #000 calc(var(--m) * .36), transparent calc(var(--m) * .47));
          mask-image: radial-gradient(circle at 49.5% 49.5%, #000 calc(var(--m) * .36), transparent calc(var(--m) * .47));
}
:root[data-theme] #s-today .hero-of { display: block; font-size: 17px; margin-top: 2px; }
:root[data-theme] #s-today .hero > .muted { margin-top: max(12px, calc(var(--m) * var(--rb) - var(--nh, 50px) + var(--ty) + 22px)); } /* --nh: половина высоты «N из M»; +22px (21.09) — подпись с чертой ниже, не липнет к бусинам */
:root[data-theme] #s-today .bar { margin-top: 14px; }
:root[data-theme=dark] #s-today .hero-num { text-shadow: 0 3px 34px rgba(0,0,0,.8); }
@media (max-height: 720px) {
  :root[data-theme] #s-today .hero-num { font-size: 64px; }
  :root[data-theme] #s-today .hero { --nh: 36px; }
  :root[data-theme] #s-today > p.center:not(#t-global) { display: none; } /* про экран — есть и на практике */
}

/* ---------- практика: одна крупная бусина на нити, на повтор уходит вниз ---------- */
/* Нить — обычный блок в потоке: занимает всё место между верхней строкой и счётом,
   бусина по центру этого места. Никаких vh — экран влезает при любой высоте и панели Telegram. */
:root[data-theme] #s-practice > * { order: 3; }
:root[data-theme] #s-practice > .topbar { order: 0; }
:root[data-theme] #s-practice > .strand {
  order: 1; position: relative !important; inset: auto; flex: 1 1 0; min-height: 110px; height: auto; margin: 0 -22px; opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 70%, transparent 100%);
}
:root[data-theme] #s-practice > .ring { order: 2; }
:root[data-theme] .strand .beads {
  --bead-step: 228px; --bead-tile: 228px;
  width: 240px; margin-left: -120px; top: calc(50% - 114px - 456px); height: calc(100% + 912px);
  background: var(--tile) top center / 240px auto repeat-y;
  transition: none;
}
:root[data-theme] #s-practice .ring { width: 100%; aspect-ratio: auto; margin: 0; flex-direction: column; gap: 2px; }
:root[data-theme] #s-practice .ring::before, :root[data-theme] #s-practice .ring::after { display: none; }
:root[data-theme] #s-practice .ring .num { font-size: clamp(60px, 18vw, 80px); text-shadow: none; }
:root[data-theme] #s-practice .ring .of { position: static; font-size: 16px; text-shadow: none; }
:root[data-theme] #s-practice .actions button, :root[data-theme] #s-practice .adjust button { background: var(--btn); }
:root[data-theme] #s-practice .actions button.primary { background: var(--btn); color: var(--fg); border-color: var(--line); font-weight: inherit; }
:root[data-theme=light] #s-practice .actions button.primary { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(57,41,31,.06); }
/* ±1 — крупные круглые кнопки по бокам от счёта */
:root[data-theme] #s-practice .ring .adjust { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 0; pointer-events: none; z-index: 2; }
:root[data-theme] #s-practice .ring .adjust button { pointer-events: auto; width: 76px; height: 76px; min-height: 76px; padding: 0; font-size: 28px; color: var(--fg); border-radius: 50%; }
:root[data-theme] #p-blink { display: none; }
@media (max-height: 780px) {
  :root[data-theme] .strand .beads { --bead-step: 190px; --bead-tile: 190px; width: 200px; margin-left: -100px; top: calc(50% - 95px - 380px); background-size: 200px auto; }
  :root[data-theme] #s-practice .ring .num { font-size: 64px; }
}
@media (max-height: 680px) {
  :root[data-theme] .strand .beads { --bead-step: 152px; --bead-tile: 152px; width: 160px; margin-left: -80px; top: calc(50% - 76px - 304px); background-size: 160px auto; }
  :root[data-theme] #s-practice { gap: 8px; }
  :root[data-theme] #s-practice .ring .num { font-size: 56px; }
  :root[data-theme] #s-practice .actions { gap: 8px; }
  :root[data-theme] #s-practice .actions button { min-height: 46px; padding: 10px 14px; }
}

/* ---------- выбор темы в настройках ---------- */
.theme-choices { grid-template-columns: repeat(2, 1fr) !important; }
:root[data-theme] #s-practice.dim .strand { opacity: .08; }
:root[data-theme=light] #s-practice.dim .num { color: rgba(243,235,220,.55); }
/* настройки длиннее экрана телефона — прокрутка внутри экрана */
#s-settings.on { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 -22px; padding: 0 22px 12px; }
/* 21.09: вход — кнопки тем же тонким шрифтом, что «С чем сегодня?», подписи под ними как «Ничего не записывается…» */
#s-onboard .step[data-step=intro] #b-continue, #s-onboard .step[data-step=intro] #b-new { font-weight: 300; letter-spacing: -0.02em; font-size: 24px; }
#s-onboard .step[data-step=intro] .under { font-size: 13px; color: var(--muted); }
/* 21.09: практика — «N кругов сегодня» убрано, статус «Слушаю / Не слышу» по центру и заметнее */
#s-practice .topbar.p-top { justify-content: center; }
#s-practice .topbar.p-top .status { font-size: 16px; }