/* Ангельская нумерология на редизайне. Разметку результата рисует /js/ezoterika/angelskaya-numerologiya.js:
   карточка, сумма цифр и строка «ближайшее время» лежат в #an-result одним уровнем, поэтому раскладка
   собрана сеткой на самом #an-result: у карточки и её тела display: contents, фон карточки — ::before,
   заголовок «Сумма цифр» — ::after. Чип примера JS перезаписывает через innerHTML — иконка идёт маской в ::before.
   Раскладка результата зависит от ширины блока результата (container query), а не окна. */

/* ===== форма ===== */
.rd #an-calc .rda-form { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.rd #an-calc .an-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rd #an-calc .an-tabs { display: inline-flex; gap: 0; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: var(--pill); }
.rd #an-calc .an-tab { flex: none; width: auto; min-width: 0; margin: 0; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--mute); font: 400 13px/1.2 var(--f-ui); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.rd #an-calc .an-tab.is-active { background: var(--tile); color: var(--ink); font-weight: 500; }
.rd #an-calc .an-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rd #an-calc .an-intro-line { margin: 0; font: 400 15px/1.5 var(--f-ui); color: var(--mute); opacity: 1; }

.rd #an-calc .an-fields { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.rd #an-calc .an-fields[style*="none"] { display: none; }
.rd #an-calc .an-field { display: flex; flex-direction: column; gap: 8px; width: 160px; min-width: 0; margin: 0; }
.rd #an-calc .an-field--wide { width: 340px; max-width: 100%; }
.rd #an-calc .an-field > label { margin: 0; padding: 0; opacity: 1; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.rd #an-calc .an-colon { flex: none; margin: 0; padding: 0; font: 600 28px/48px var(--f-ui); color: var(--mute); }
.rd #an-calc .an-sel { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 48px; margin: 0; padding: 0 44px 0 16px; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; outline: none; font: 500 16px/1 var(--f-ui); color: var(--ink); cursor: pointer; }
.rd #an-calc input.an-sel { padding: 0 16px; background-image: none; cursor: text; }
.rd #an-calc .an-sel::placeholder { color: var(--mute); opacity: .6; }
.rd #an-calc .an-sel:focus { border-color: var(--accent); box-shadow: none; }

/* кнопки */
.rd #an-calc .rda-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rd #an-calc .rda-btn, .rd #an-calc .an-chip, .rd #an-calc .an-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; width: auto; height: auto; border: 1px solid transparent; border-radius: 999px; box-shadow: none; opacity: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rd #an-calc .rda-btn[style*="none"] { display: none; }
.rd #an-calc .rda-btn--ink { padding: 13px 28px; background: var(--ink); color: #fff; font: 500 15px/1 var(--f-ui); }
.rd #an-calc .rda-btn--pill { padding: 14px 24px; background: var(--pill); color: var(--ink); font: 400 13px/1 var(--f-ui); }
.rd #an-calc .an-chip { padding: 13px 16px; background: transparent; border-color: var(--line); color: var(--mute); font: 400 13px/1 var(--f-ui); }
.rd #an-calc .an-chip::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--an-spark) no-repeat center / contain; mask: var(--an-spark) no-repeat center / contain; }
.rd #an-calc { --an-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); }
.rd #an-calc .rda-btn:hover, .rd #an-calc .an-chip:hover, .rd #an-calc .an-copy:hover { opacity: .85; }
.rd #an-calc .an-chip:hover { color: var(--ink); }

.rd #an-calc .an-error { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font: 500 14px/1.45 var(--f-ui); text-align: left; }
.rd #an-calc .an-error[style*="none"] { display: none; }

/* ===== результат ===== */
.rd #an-calc .rda-result { display: flex; flex-direction: column; gap: 28px; padding: 28px; border-radius: 20px; background: var(--tile); container: anres / inline-size; }
.rd #an-calc .rda-result:has(> #an-output[style*="none"]):has(> #an-num-output[style*="none"]) { display: none; }
.rd #an-calc #an-output:not([style*="none"]),
.rd #an-calc #an-num-output:not([style*="none"]) { display: flex !important; flex-direction: column; gap: 28px; }
.rd #an-calc .rating-nudge { margin: 0; }

.rd #an-calc .an-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rd #an-calc .an-copy { padding: 8px 14px; background: var(--pill); color: var(--ink); font: 500 13px/1 var(--f-ui); }

/* сетка результата: 1–7 — карточка (поля 24px), 8 — тип и ближайшее время, 9 — «Сумма цифр», 10 — сумма.
   Граница между двумя нижними карточками — ровно середина: трек 4 считается от ширины блока результата. */
.rd #an-calc #an-result, .rd #an-calc #an-num-result {
    position: relative; display: grid; align-items: start;
    grid-template-columns: 24px 220px 24px minmax(0, 1fr) 12px minmax(0, 1fr) 24px;
    grid-template-columns: 24px 220px 24px calc(50cqw - 274px) 12px minmax(0, 1fr) 24px;
    grid-template-rows: 24px 1fr auto auto auto 1fr 24px auto auto auto;
}
.rd #an-calc #an-num-result { grid-template-rows: 24px 1fr auto auto auto 1fr 24px auto auto; }
.rd #an-calc #an-result:empty, .rd #an-calc #an-num-result:empty { display: none; }
.rd #an-calc #an-result::before, .rd #an-calc #an-num-result::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 8; align-self: stretch; border-radius: 16px; background: var(--card); }
.rd #an-calc #an-result::after, .rd #an-calc #an-num-result::after { content: "Сумма цифр"; grid-column: 1 / -1; grid-row: 9; margin-top: 28px; font: 600 20px/1.25 var(--f-ui); letter-spacing: -.2px; color: var(--ink); }
.rd #an-calc #an-result:empty::before, .rd #an-calc #an-result:empty::after,
.rd #an-calc #an-num-result:empty::before, .rd #an-calc #an-num-result:empty::after { content: none; }
.rd #an-calc #an-result > .an-card, .rd #an-calc #an-num-result > .an-card,
.rd #an-calc .an-card__body { display: contents; }

.rd #an-calc .an-card__visual { grid-column: 2; grid-row: 2 / 7; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 220px; height: 140px; margin: 0; padding: 12px; border: 0; border-radius: 16px; background: var(--accent-soft); overflow: hidden; }
.rd #an-calc .an-clock { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 56px/1 var(--f-ui); letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--accent); }
.rd #an-calc .an-numview { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; overflow-wrap: anywhere; text-align: center; font-weight: 700; font-family: var(--f-ui); line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--accent); }
/* JS задаёт кегль числа инлайном по длине (20/17/15/13/11 px) — переводим в размер плашки */
.rd #an-calc .an-numview[style*="20px"] { font-size: 56px !important; letter-spacing: -2px; }
.rd #an-calc .an-numview[style*="17px"] { font-size: 46px !important; letter-spacing: -1.5px; }
.rd #an-calc .an-numview[style*="15px"] { font-size: 34px !important; }
.rd #an-calc .an-numview[style*="13px"] { font-size: 24px !important; letter-spacing: -.5px; }
.rd #an-calc .an-numview[style*="11px"] { font-size: 20px !important; letter-spacing: -.2px; }
.rd #an-calc .an-card__mark { margin: 0; padding: 0; opacity: 1; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }

.rd #an-calc .an-card__eyebrow { grid-column: 4 / 7; grid-row: 3; justify-self: start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); opacity: 1; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.rd #an-calc .an-card__title { grid-column: 4 / 7; grid-row: 4; margin: 10px 0 0; padding: 0; border: 0; font: 600 32px/1.15 var(--f-ui); letter-spacing: -.8px; color: var(--ink); }
.rd #an-calc .an-card__text { grid-column: 4 / 7; grid-row: 5; margin: 10px 0 0; opacity: 1; font: 400 15px/1.5 var(--f-ui); color: var(--mute); }

/* нижний ряд: тип сочетания и ближайшее особенное время */
.rd #an-calc .an-card__note, .rd #an-calc .an-next { grid-row: 8; align-self: stretch; box-sizing: border-box; margin: 16px 0 0; padding: 16px 18px; border: 0; border-radius: 14px; background: var(--card); opacity: 1; font: 400 14px/1.5 var(--f-ui); color: var(--ink); }
.rd #an-calc .an-card__note { grid-column: 1 / 5; }
.rd #an-calc .an-card__note::before { content: "Тип сочетания"; display: block; margin-bottom: 8px; font: 400 11px/1.3 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.rd #an-calc .an-next { grid-column: 6 / -1; }
.rd #an-calc .an-next b { font-weight: 600; color: var(--accent); }

/* сумма цифр */
.rd #an-calc .an-sum { grid-column: 1 / -1; grid-row: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 20px; border: 0; border-radius: 16px; background: var(--card); }
.rd #an-calc #an-num-result > .an-sum { grid-row: 9; }
.rd #an-calc #an-num-result::after { grid-row: 8; }
.rd #an-calc .an-sum__n { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 600 40px/1 var(--f-ui); letter-spacing: -1.2px; color: var(--ink); }
.rd #an-calc .an-sum__n--master { color: var(--accent); }
.rd #an-calc .an-sum__txt { margin: 0; opacity: 1; font: 400 14px/1.55 var(--f-ui); color: var(--ink); }
.rd #an-calc .an-sum__txt b { font-weight: 600; }
.rd #an-calc .an-sum__txt i { display: block; margin-top: 8px; font: 400 11px/1.4 var(--f-mono); font-style: normal; letter-spacing: 1px; color: var(--mute); }

.rd #an-calc .an-pop .an-card__visual, .rd #an-calc .an-pop .an-card__body > * { animation: an-pop .3s ease-out; }
@keyframes an-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rd #an-calc .an-pop .an-card__visual, .rd #an-calc .an-pop .an-card__body > * { animation: none; } }

/* ===== узкий блок результата ===== */
@container anres (max-width: 620px) {
    .rd #an-calc #an-result, .rd #an-calc #an-num-result { grid-template-columns: 20px minmax(0, 1fr) 20px; grid-template-rows: 20px auto auto auto auto 20px auto auto auto auto; }
    .rd #an-calc #an-num-result { grid-template-rows: 20px auto auto auto auto 20px auto auto; }
    .rd #an-calc #an-result::before, .rd #an-calc #an-num-result::before { grid-row: 1 / 7; }
    .rd #an-calc .an-card__visual { grid-column: 2; grid-row: 2; width: auto; height: 120px; }
    .rd #an-calc .an-card__eyebrow { grid-column: 2; grid-row: 3; margin-top: 16px; }
    .rd #an-calc .an-card__title { grid-column: 2; grid-row: 4; font-size: 28px; letter-spacing: -.6px; }
    .rd #an-calc .an-card__text { grid-column: 2; grid-row: 5; }
    .rd #an-calc .an-card__note { grid-column: 1 / -1; grid-row: 7; }
    .rd #an-calc .an-next { grid-column: 1 / -1; grid-row: 8; margin-top: 12px; }
    .rd #an-calc #an-result::after { grid-row: 9; margin-top: 22px; font-size: 18px; }
    .rd #an-calc #an-result > .an-sum { grid-row: 10; }
    .rd #an-calc #an-num-result::after { grid-row: 7; margin-top: 22px; font-size: 18px; }
    .rd #an-calc #an-num-result > .an-sum { grid-row: 8; }
}

/* всплывашка «Скопировано» */
.rd #an-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1000; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 13px/1 var(--f-ui); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); transition: opacity .2s, transform .2s; }
.rd #an-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== статья и боковая колонка ===== */
.rd .rd-article__body .table-scroll { overflow-x: auto; }
.rd .rd-article__body .an-table td:first-child { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rd .rda-src h2.rd-label { margin: 0; padding: 0; border: 0; font: 400 11px/1.4 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--mute); scroll-margin-top: 16px; }
.rd .rda-src__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd .rda-src__list li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rd .rda-src__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.rd .rda-src__list li::before { display: none; }
.rd .rda-src__list b { font: 600 14px/1.35 var(--f-ui); color: var(--ink); }
.rd .rda-src__list span { font: 400 13px/1.45 var(--f-ui); color: var(--mute); }
.rd .rda-src__list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-mid); text-underline-offset: 2px; }
.rd .rd-article__aside .ymyl-disclaimer { margin: 0; padding: 24px; border-radius: 22px; }
.rd .rd-article__aside .ymyl-disclaimer strong { display: block; margin-bottom: 10px; font: 400 11px/1.4 var(--f-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }

/* ===== телефон ===== */
@media (max-width: 639px) {
    .rd #an-calc .rda-form { gap: 24px; }
    .rd #an-calc .an-mode { align-items: stretch; }
    .rd #an-calc .an-tabs { display: flex; }
    .rd #an-calc .an-tab { flex: 1 1 0; padding: 9px 8px; }
    .rd #an-calc .an-field { flex: 1 1 0; width: auto; }
    .rd #an-calc .an-field--wide { width: auto; }

    /* ряд 1 — главная кнопка и «Очистить», ряд 2 — «Сейчас» и пример */
    .rd #an-calc .rda-actions { gap: 10px 8px; }
    .rd #an-calc #an-btn-time, .rd #an-calc #an-btn-number { order: 1; flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
    .rd #an-calc .an-btn-clear { order: 2; flex: none; padding-left: 16px; padding-right: 16px; }
    .rd #an-calc .rda-actions::after { content: ""; order: 3; flex: 0 0 100%; height: 0; margin-top: -10px; }
    .rd #an-calc #an-btn-now { order: 4; flex: 1 1 0; padding: 13px 16px; }
    .rd #an-calc .an-chip { order: 5; flex: 1 1 0; }

    .rd #an-calc .rda-result { gap: 22px; padding: 16px; }
    .rd #an-calc #an-output:not([style*="none"]),
    .rd #an-calc #an-num-output:not([style*="none"]) { gap: 22px; }
    .rd #an-calc .an-top .rd-label { min-width: 0; }
    .rd .rd-article__aside .ymyl-disclaimer { padding: 20px; border-radius: 20px; }
}