/* --- база (стили компонентов кита: только токены, без литеральных ------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px;
       background: var(--surface); color: var(--ink);
       -webkit-font-smoothing: antialiased; }
/* зерно: лёгкая «щетина» поверх бархата (как в components.css) */
body::after { content: ""; position: fixed; inset: 0; z-index: 9999;
              pointer-events: none; opacity: .07; mix-blend-mode: soft-light;
              background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

a { color: var(--link); text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: color .2s, text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }

p { margin: 0; }
h1 { font-family: var(--font-mono); font-size: 40px; line-height: 46px;
     font-weight: 600; letter-spacing: -.04em;
     margin: var(--space-8) 0 var(--space-2); text-wrap: balance; }
h2 { font-family: var(--font-mono); font-size: 17px; line-height: 24px;
     font-weight: 600; letter-spacing: -.015em; margin: 0; }
h3 { font-family: var(--font-mono); font-size: 17px; line-height: 24px;
     font-weight: 600; letter-spacing: -.015em; margin: 0; }
/* T67/T70: заголовки-пустышки («Путёвка», «Путёвка — налог ИП») убраны с
   экранов по разметке заказчика: шапка уже называет сервис, экран
   начинается сразу с вопроса/бейджа периода. Сам заголовок остаётся
   в DOM невидимым (скринридеры, структура документа). */
.visually-hidden { position: absolute; width: 1px; height: 1px;
                   margin: -1px; padding: 0; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* бейдж периода/шага на месте бывшего h1 — с тем же верхним отступом */
.stage-pill { margin: var(--space-8) 0 var(--space-2); height: 26px; }

/* T64: раскрывашки ответов на возражения — как ui-link--quiet кита */
details.objection { margin: var(--space-1) 0 0; }
details.objection > summary {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none; user-select: none;
  font-size: 14px; line-height: 22px; color: var(--ink-muted);
  transition: color .2s; }
details.objection > summary::-webkit-details-marker { display: none; }
details.objection > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s; }
details.objection[open] > summary { color: var(--ink); }
details.objection[open] > summary::before { transform: rotate(45deg); margin-top: 0; }
details.objection > p { margin: var(--space-2) 0 0; }

/* --- страница ---------------------------------------------------------- */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; }
.sub { color: var(--ink-muted); font-size: 14px; line-height: 22px; margin: 0; }

/* --- карточка (ui-card: surface-raised, line, radius-lg, space-6) ------ */
.card { display: flex; flex-direction: column; gap: var(--space-3);
        background: var(--surface-raised); border: 1px solid var(--line);
        border-radius: var(--radius-lg); padding: var(--space-8);
        margin: var(--space-4) 0; box-shadow: var(--shadow-sm); }
.card { position: relative; }
.card > * { min-width: 0; }
/* кнопка в карточке — по ширине текста, не во всю карточку (ui-card) */
.card > button { align-self: flex-start; }
.card p { font-size: 15px; line-height: 24px; }
.card p.sub { font-size: 14px; line-height: 22px; }
.card--narrow { max-width: 460px; }

/* --- кнопка (ui-btn: accent — одно главное действие на экране) --------- */
button { display: inline-flex; align-items: center; justify-content: center;
         gap: var(--space-2); height: var(--control-md);
         padding: 0 var(--space-6); border: 1px solid transparent;
         border-radius: var(--radius-full); background: var(--accent);
         color: var(--on-accent); font-family: var(--font-mono);
         font-size: 14px; font-weight: 500; letter-spacing: -.01em;
         line-height: 1; white-space: nowrap; text-decoration: none;
         cursor: pointer;
         box-shadow: inset 0 1px 0 #ffffff33, var(--shadow-sm);
         transition: background-color .25s, border-color .25s, color .25s,
                     box-shadow .25s, transform .25s cubic-bezier(.2,.7,.2,1); }
button:not(:disabled):hover { background: var(--accent-hover);
                              box-shadow: inset 0 1px 0 #ffffff40, var(--shadow-md);
                              transform: translateY(-1px); }
button:active { transform: scale(.98); }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none;
                  transform: none; }
/* ui-btn--ghost */
button.ghost { background: transparent; color: var(--ink-muted);
               box-shadow: none; }
button.ghost:not(:disabled):hover { background: var(--surface-raised);
                                    color: var(--ink); box-shadow: none;
                                    transform: none; }
/* ui-btn--secondary */
button.secondary, button.btn-secondary {
  background: var(--surface-raised); border-color: var(--line);
  color: var(--ink); box-shadow: var(--shadow-sm); }
button.secondary:not(:disabled):hover, button.btn-secondary:not(:disabled):hover {
  border-color: var(--line-strong); }
/* текстовая ссылка-кнопка (ui-link кита): sans, с подчёркиванием на
   hover — заглавная «О» в моноширинном шрифте читается как ноль */
button.ghost.link-btn { height: auto; padding: 0; font-family: var(--font-sans);
                        font-size: 14px; line-height: 22px;
                        color: var(--ink-muted); }
button.ghost.link-btn:not(:disabled):hover { background: transparent;
                                             color: var(--ink);
                                             text-decoration: underline;
                                             text-underline-offset: 4px; }
/* ui-btn--sm / --lg / --icon / --block */
button.btn-sm { height: var(--control-sm); padding: 0 var(--space-4);
                font-size: 13px; }
button.btn-lg { height: var(--control-lg); padding: 0 var(--space-8);
                font-size: 15px; }
button.btn-block { width: 100%; }
button.btn-icon { width: var(--control-md); padding: 0; }
/* маленькая иконка-кнопка в строке списка (ui-btn--ghost --icon --sm) */
button.btn-icon-xs { width: 28px; height: 28px; padding: 0;
                     border-radius: var(--radius-full); }
/* иконка кита: stroke=currentColor, 24×24 */
.ui-icon { width: 20px; height: 20px; flex: none; fill: none;
           stroke: currentColor; stroke-width: 1.6;
           stroke-linecap: round; stroke-linejoin: round; }
.ui-icon--sm { width: 16px; height: 16px; }
.ui-icon--lg { width: 24px; height: 24px; stroke-width: 1.5; }

/* T01: выбор режима налогообложения — группа равнозначных вариантов:
   по киту это secondary-кнопки («Не знаю» — ghost в разметке). */
.regime-btns { display: flex; gap: var(--space-3); flex-wrap: wrap;
               margin-top: var(--space-1); }
.regime-btns button:not(.ghost) {
  background: var(--surface-raised); border-color: var(--line);
  color: var(--ink); box-shadow: var(--shadow-sm); }
.regime-btns button:not(.ghost):not(:disabled):hover {
  border-color: var(--line-strong); background: var(--surface-raised); }

/* --- поле (ui-field: field-фон, radius-sm, focus-halo) ----------------- */
label { font-family: var(--font-mono); font-size: 13px; line-height: 18px;
        font-weight: 500; color: var(--ink-muted); }
input, select, textarea { font-family: var(--font-sans); }
input { width: 100%; height: var(--control-md); padding: 0 var(--space-4);
        margin: 6px 0 10px; font-size: 15px; color: var(--ink);
        background: var(--field); border: 1px solid var(--field-border);
        border-radius: var(--radius-sm);
        box-shadow: inset 0 1px 2px #00000014;
        transition: border-color .2s, box-shadow .2s; }
input::placeholder { color: var(--ink-subtle); opacity: 1; }
input:hover { border-color: var(--field-border-hover); }
input:focus { outline: none; border-color: var(--accent);
              box-shadow: 0 0 0 4px var(--focus-halo); }
input:disabled { background: var(--surface-sunken); border-color: var(--line);
                 color: var(--ink-subtle); cursor: not-allowed;
                 box-shadow: none; }
input[aria-invalid="true"] { border-color: var(--danger); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto; margin: 0 6px 0 0; padding: 0;
  appearance: auto; accent-color: var(--accent); box-shadow: none; }
/* file-input: нативное поле рисует системную кнопку «Choose File» и
   обрезает подпись «Файл не выбран» в узкой колонке. Поэтому поле
   собираем из кита: кнопка (ui-btn--secondary --sm) + имя файла, а
   сам input прячем — клик по label открывает выбор файла, имя пишет
   bindFile(). Разметка вложена в .file-field. */
.file-field { position: relative; display: flex; align-items: center;
              gap: var(--space-3); min-height: var(--control-md);
              padding: 6px; margin: 6px 0 10px;
              background: var(--field); border: 1px solid var(--field-border);
              border-radius: var(--radius-sm);
              transition: border-color .2s, box-shadow .2s; }
.file-field:hover { border-color: var(--field-border-hover); }
.file-field:focus-within { border-color: var(--accent);
                           box-shadow: 0 0 0 4px var(--focus-halo); }
.file-field input[type="file"] { position: absolute; width: 1px;
                                 height: 1px; margin: 0; padding: 0;
                                 opacity: 0; pointer-events: none;
                                 border: 0; box-shadow: none; }
.file-btn { display: inline-flex; align-items: center; justify-content: center;
            flex: none; height: var(--control-sm); padding: 0 var(--space-4);
            border: 1px solid var(--line); border-radius: var(--radius-full);
            background: var(--surface-raised); color: var(--ink);
            font-family: var(--font-mono); font-size: 13px; font-weight: 500;
            line-height: 1; white-space: nowrap; cursor: pointer;
            box-shadow: var(--shadow-sm); transition: border-color .2s; }
.file-btn:hover { border-color: var(--line-strong); }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; font-size: 13px; line-height: 18px;
             color: var(--ink-muted); }

/* --- таблица ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px;
        line-height: 22px; }
th { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line);
     text-align: left; font-family: var(--font-mono); font-size: 11px;
     line-height: 16px; font-weight: 500; letter-spacing: .16em;
     text-transform: uppercase; color: var(--ink-subtle); }
td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line);
     text-align: left; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* сумма — одной строкой: «325 955,26 ₽» не рвётся между числом и знаком
   валюты в узкой колонке (первая колонка с названием поля сжимается) */
td.num { font-family: var(--font-mono); white-space: nowrap; }
td:first-child { width: 100%; }
.num { white-space: nowrap; }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* --- сообщение (ui-alert: тон — фон status-soft + полоса, текст ink) --- */
.msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
       border-left: 2px solid transparent; margin: 0;
       background: var(--surface-raised); color: var(--ink);
       font-size: 14px; line-height: 22px; }
.msg.ok  { background: var(--success-soft); border-left-color: var(--success); }
.msg.err  { background: var(--danger-soft); border-left-color: var(--danger);
            white-space: pre-line; }
.msg.info { background: var(--accent-soft); border-left-color: var(--gilt); }
.msg.defer { background: var(--warning-soft); border-left-color: var(--warning); }
.msg.gap   { background: var(--danger-soft); border-left-color: var(--danger); }
.msg b { font-weight: 600; }
/* кнопка внутри плашки (сверка «Что с этим делать?») — отдельной строкой
   с воздухом; на цветной подложке ghost теряется, поэтому — как
   ui-btn--secondary кита */
.msg .row { margin-top: var(--space-3); }
.msg .row button.ghost { background: var(--surface-raised); color: var(--ink);
                         border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.msg .row button.ghost:not(:disabled):hover { border-color: var(--line-strong); }
/* апсейл ТО под результатом месяца — вложенная карточка (как ui-card--flat
   кита): рамка, радиус, ровный шаг между заголовком, плашкой, текстом и
   кнопками; не сливается с плашкой сверки над ним */
.upsell-card { display: flex; flex-direction: column; gap: var(--space-4);
               margin-top: var(--space-5); padding: var(--space-6);
               background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--radius-md); }
.upsell-card h3, .upsell-card p { margin: 0; }
.upsell-card p { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.upsell-card .row { margin-top: var(--space-1); }
/* «Отчетность» (#service-box): плашки «Принято» / «Бухгалтер проверит» /
   «Как посчитали» и кнопка с подписью — с шагом кита, не впритык
   (скрин 22.10: всё склеилось) */
#service-box, #service-calc { display: flex; flex-direction: column;
                              gap: var(--space-3); }
#service-box > button { align-self: flex-start; }
#service-box p { margin: 0; }
/* --- бейдж (ui-badge) -------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px;
        height: 26px; padding: 0 12px; border-radius: var(--radius-full);
        background: var(--accent-soft); color: var(--gilt);
        font-family: var(--font-mono); font-size: 12px; font-weight: 500;
        line-height: 1; vertical-align: middle; }
.err-f { color: var(--danger); font-size: 13px; line-height: 18px;
         margin: calc(var(--space-1) * -1) 0 var(--space-2); }
.hidden { display: none !important; }

/* T47: единый отступ 16px от краёв экрана у ВСЕХ экранов SPA —
   как у колонок сетки раньше (теперь padding стоит на контейнере
   экрана, колонки .layout3/.layout2 свою добавку не дублируют). */
#regime, #regime_hint, #tow_offer, #autopay, #autopay_hint,
#other_business, #service_offer, #other_business_stopped,
#anon, #login, #stage1, #stage2, #tariffs {
  padding: var(--space-10) 16px var(--space-16); }

/* T72: заказчик — воздух сверху анонимки меньше */
#anon { padding-top: var(--space-5); }

/* единая сетка экранов (#anon, #stage2, #stage1 — 3 колонки; на
   узких экранах колонки стекаются в одну), шаг сетки — space-6 кита */
.layout3 { display: grid; grid-template-columns: 1fr 1.2fr 1fr;
           gap: var(--space-8); align-items: start;
           padding: 0; }  /* отступ от краёв теперь у контейнера экрана (T47) */
.layout2 { display: grid; grid-template-columns: 1.2fr 1fr;
           gap: var(--space-8); align-items: start;
           padding: 0; }  /* отступ от краёв теперь у контейнера экрана (T47) */
@media (max-width: 960px) { .layout3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .layout2 { grid-template-columns: 1fr; } }
.layout3 > *, .layout2 > * { min-width: 0; }
.layout3 > .card, .layout2 > .card { height: 100%; margin: 0; }
/* колонка-обёртка с карточками (#stage2-info): верх первой карточки — по
   одной линии с соседними колонками (скрин 22.10: «Отчетность» была
   ниже на margin .card), между карточками внутри — обычный шаг */
.layout3 > div:not(.card) > .card:first-child,
.layout2 > div:not(.card) > .card:first-child { margin-top: 0; }

/* --- история месяцев: список строк-карточек --------------------------- */
.months { display: flex; flex-direction: column; gap: var(--space-2); }
.month-btn { display: flex; justify-content: space-between; align-items: center;
             gap: var(--space-3); width: 100%; height: auto;
             padding: var(--space-3) var(--space-4);
             border-radius: var(--radius-md); border: 1px solid var(--field-border);
             background: var(--field); font-family: var(--font-sans);
             font-size: 15px; line-height: 22px; cursor: pointer; text-align: left;
             color: var(--ink); box-shadow: none; }
.month-btn:not(:disabled):hover { background: var(--field);
                                  border-color: var(--line-strong);
                                  transform: none; box-shadow: none; }
.month-btn.loaded { background: var(--accent-soft); border-color: var(--accent); }
.month-btn.loaded:not(:disabled):hover { background: var(--accent-soft);
                                         border-color: var(--accent-hover); }
.month-btn.empty { opacity: .55; cursor: default; }
/* пустой месяц — та же сетка, что у шапки таблицы истории: название в
   колонке «Месяц», прочерк — в «Доходы» (остальное пусто) */
.month-btn.empty { display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr)
                         minmax(0, .95fr) minmax(0, .9fr);
  column-gap: var(--space-2); align-items: center;
  padding: 10px var(--space-3); text-align: left; }
.month-btn .rev { font-variant-numeric: tabular-nums; color: var(--gilt);
                  font-weight: 600; white-space: nowrap; }
/* T53: строка месяца — статус ФОНОМ (лампу-эмодзи сняли, решение
   заказчика 22.10): классы month-ok/month-attention/month-mismatch
   дают soft-подложку токенов success/warning/danger — работают и на
   кнопке истории (.month-btn.month-*), и на строке диагностики
   (.month-row.month-*); обе темы — var(--...), переопределять нечего
   (правила стоят ПОСЛЕ .month-btn.loaded). */
.month-btn.month-ok, .month-row.month-ok {
  background: var(--success-soft); border-color: var(--success); }
.month-btn.month-attention, .month-row.month-attention {
  background: var(--warning-soft); border-color: var(--warning); }
.month-btn.month-mismatch, .month-row.month-mismatch {
  background: var(--danger-soft); border-color: var(--danger); }
/* T74 (патент): «удержано лишнего» — хорошая новость, нейтрально-
   акцентная подложка (не danger и не warning); токен accent-soft. */
.month-btn.month-refund, .month-row.month-refund {
  background: var(--accent-soft); border-color: var(--accent); }
/* T53: строка месяца как div (кнопка «?» внутри не может быть вложена
   в <button>): та же композиция, что у .month-btn + подпись под
   названием месяца (.month-sub — налог/доплата/срок). */
.month-row { display: flex; justify-content: space-between; align-items: center;
             gap: var(--space-3); padding: var(--space-3) var(--space-4);
             border-radius: var(--radius-md);
             border: 1px solid var(--field-border); background: var(--field);
             font-size: 15px; line-height: 22px; cursor: pointer; text-align: left;
             color: var(--ink); }
.month-row:hover { border-color: var(--line-strong); }
.month-row .month-main { display: flex; flex-direction: column; gap: 2px;
                         min-width: 0; }
.month-row .month-sub { color: var(--ink-muted); font-size: 12px;
                        line-height: 16px; white-space: normal; }
/* T80.2 + T74: подпись статуса НЕ обрезается — патентная длиннее
   («налога с дохода нет · удержано лишнего N ₽»), ellipsis глотал
   смысл. month-main уже flex-колонка — подпись переносится сама. */
.month-row .month-side { display: flex; align-items: center; gap: var(--space-2); }
.month-row .rev { font-variant-numeric: tabular-nums; color: var(--gilt);
                  font-weight: 600; white-space: nowrap; }
/* T53: кнопка «?» в строке месяца (aria-label «Что означает цвет
   строки» — открывает пояснение цветов showMonthHelp() маленькой
   круглой кнопкой, не всплывающая лампа). */
.month-help { width: 32px; min-width: 32px; height: 32px; padding: 0;
              font-size: 14px; line-height: 1; border-radius: var(--radius-full); }
/* T68: «?» — один на блок, в правом верхнем углу карточки
   (распознанные месяцы / история), НЕ в строках месяцев */
.month-help-corner { position: absolute; top: var(--space-4); right: var(--space-4); }

/* T49: панель «История» — ТАБЛИЦА: шапка с колонками «Месяц /
   Доходы / Налог / Примененный вычет» (.months-head) и строки
   .month-row.month-row-grid той же сеткой; фон строки по статусу
   (.month-*) не менялся, кнопка «?» — в последней колонке. Шапка
   без подложки — подписи колонок в стиле overline кита. */
.months-head, .month-row.month-row-grid {
  display: grid; grid-template-columns:
    minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, .9fr);
  grid-template-areas: "name income tax ded";
  column-gap: var(--space-2); row-gap: 2px; align-items: center; }
.months-head { padding: 0 var(--space-3) var(--space-1); color: var(--ink-subtle);
               font-family: var(--font-mono); font-size: 10px;
               line-height: 13px; font-weight: 500;
               letter-spacing: .06em; text-transform: uppercase; }
.month-row.month-row-grid { font-size: 13px; line-height: 18px;
                            padding: 10px var(--space-3);
                            grid-template-areas: "name income tax ded"
                                                 "sub sub sub sub"; }
/* подпись с налогом/доплатой/сроком идёт ВТОРОЙ строкой на всю ширину
   — в узкой колонке она обрезалась многоточием */
.month-row.month-row-grid .month-main { display: contents; }
.month-row.month-row-grid .month-main > span:first-child {
  grid-area: name; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.month-row.month-row-grid .month-sub { grid-area: sub; font-size: 11px;
                                       line-height: 15px; white-space: normal; }
.month-row.month-row-grid .rev { font-size: 12px; }
.month-row.month-row-grid .month-side { justify-content: flex-end; }
/* T49: поле вычета в строке (клик по нему НЕ открывает окно месяца —
   гасим click на обёртке .ded-cell). */
/* поле вычета — «тихое»: рамка и фон появляются при наведении/фокусе,
   чтобы строка истории оставалась ровной (ui-input внутри списка) */
.month-ded { width: 100%; min-width: 0; height: 30px;
             margin: 0; padding: 0 6px; font-family: var(--font-mono);
             font-size: 11px; text-align: right; background: transparent;
             border-color: transparent; box-shadow: none; }
.month-ded:hover { border-color: var(--field-border-hover);
                   background: var(--field); }
.month-ded:focus { border-color: var(--accent); background: var(--field); }
.ded-cell { display: block; min-width: 0; grid-area: ded; }
.month-tax-cell { display: flex; flex-direction: column; align-items: flex-end;
                  gap: 2px; min-width: 0; grid-area: tax; }
.month-tax-cell .rev { white-space: nowrap; }
.month-ded-note { font-family: var(--font-mono); font-size: 10px;
                  line-height: 13px; color: var(--ink-muted);
                  white-space: nowrap; overflow: hidden;
                  text-overflow: ellipsis; max-width: 100%; }
/* T51: блок «Оплата / Услуги» стоит в конце истории месяцев —
   вложенная карточка на фоне страницы (ui-card--flat кита). */
#pay-card { margin-top: 0; background: var(--surface); box-shadow: none; }