/* «Мой счёт»: баллы, абонементы, сертификаты, витрина покупки.
   Шрифт задаём каждому элементу явно, по ролям шкалы: наследование от
   контейнера окна дало бы соседним блокам разные гарнитуры. */

    .acc-block { margin-bottom: var(--bp-space-6); }

    /* Карточка счёта — абонемент или сертификат: название, остаток, срок.
       Одна строка списка, отступы как у строк чека. */
    .acc-ab { border-bottom: 1px dashed var(--bp-line); }
    .acc-ab:last-child { border-bottom: 0; }
    .acc-ab__head {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "title value go"
            "term  term  go";
        gap: var(--bp-space-1) var(--bp-space-3);
        width: 100%;
        padding: var(--bp-space-3) 0;
        border: 0;
        background: none;
        text-align: left;
        color: var(--bp-ink);
        font: inherit;
    }
    button.acc-ab__head { cursor: pointer; }
    /* `min-width` — чтобы длинное название переносилось, а не выталкивало
       остаток со стрелкой за край узкого экрана. */
    .acc-ab__title {
        grid-area: title;
        min-width: 0;
        overflow-wrap: anywhere;
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-body);
        line-height: 1.2;
    }
    .acc-ab__value {
        grid-area: value;
        align-self: center;
        font-family: var(--ff-mono);
        font-weight: 600;
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .acc-ab__term {
        grid-area: term;
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        color: var(--bp-ink-soft);
    }
    .acc-ab__go {
        grid-area: go;
        align-self: center;
        color: var(--bp-ink-soft);
    }
    /* Завершённый — тем же контрастом, без прозрачности: его читают, когда
       выясняют, куда делись деньги. Отличие — остаток подписью, не цветом. */
    .acc-ab--done .acc-ab__value { color: var(--bp-ink-soft); }

    /* «Завершённые (N)» — раскрывающаяся строка под живыми абонементами. */
    .acc-fold {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-top: 1px dashed var(--bp-line);
        background: none;
        color: var(--bp-ink-soft);
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-secondary);
        cursor: pointer;
    }

    .acc-caption {
        margin: var(--bp-space-2) 0 0;
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        color: var(--bp-ink-soft);
    }

    /* Кнопка витрины — второстепенная: контур, не заливка. Заливка остаётся
       у кнопок покупки внутри витрины. */
    .acc-shop-toggle {
        width: 100%;
        min-height: 44px;
        padding: 0 var(--bp-space-4);
        border: 1px solid var(--bp-green-on-paper);
        border-radius: var(--bp-radius-sm);
        background: transparent;
        color: var(--bp-green-on-paper);
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-body);
        cursor: pointer;
    }
    .acc-shop { padding-top: var(--bp-space-4); }

    /* Переключатель клуба — полноразмерное поле: от него зависят все цены
       ниже. Пока список клубов не пришёл, на месте названия — плашка
       каркаса той же высоты. */
    .acc-club-field {
        position: relative;
        display: block;
        margin-bottom: var(--bp-space-3);
        padding: var(--bp-space-2) var(--bp-space-3) 0;
        border: 1px solid var(--bp-line-strong);
        border-radius: var(--bp-radius-sm);
        background: var(--bp-paper);
    }
    .acc-club-field .sheet-label { margin: 0; }
    .acc-club-field__chevron {
        position: absolute;
        right: var(--bp-space-3);
        bottom: var(--bp-space-3);
        font-size: var(--bp-fs-secondary);
        color: var(--bp-ink-soft);
        pointer-events: none;
    }
    .acc-club {
        width: 100%;
        /* `appearance: none` схлопывает поле до строки текста — высоту
           пальца задаём явно. */
        min-height: 44px;
        padding: 0 var(--bp-space-6) 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--bp-ink);
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-input);
        appearance: none;
        -webkit-appearance: none;
    }
    .acc-club:focus-visible {
        outline: 2px solid var(--bp-green-on-paper);
        outline-offset: 2px;
    }
    .acc-club-field__skel { display: none; }
    .acc-club-field--loading .acc-club { visibility: hidden; }
    .acc-club-field--loading .acc-club-field__skel {
        display: block;
        position: absolute;
        left: var(--bp-space-3);
        right: calc(var(--bp-space-6) + var(--bp-space-3));
        bottom: var(--bp-space-3);
        height: 20px;
        border-radius: var(--bp-radius-xs);
        background: var(--bp-line);
    }

    /* Три предложения держат место с первого кадра: замер 118 px на
       320/390/430 каждое, три подряд — 357 с рамками. */
    .acc-offers { min-height: 357px; }
    .acc-offer {
        padding: var(--bp-space-3) 0;
        border-bottom: 1px dashed var(--bp-line);
    }
    .acc-offer:last-child { border-bottom: 0; }
    .acc-offer__head {
        display: flex;
        align-items: center;
        gap: var(--bp-space-2);
    }
    .acc-offer__title {
        min-width: 0;
        overflow-wrap: anywhere;
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-body);
        line-height: 1.2;
    }
    .acc-badge {
        flex-shrink: 0;
        padding: 0 var(--bp-space-2);
        border-radius: var(--bp-radius-sm);
        background: var(--bp-green-a15);
        color: var(--bp-green-on-paper);
        font-family: var(--ff-mono);
        font-weight: 600;
        font-size: var(--bp-fs-micro);
        line-height: 1.8;
    }
    .acc-offer__terms {
        margin: var(--bp-space-1) 0 var(--bp-space-2);
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        color: var(--bp-ink-soft);
    }
    .acc-offer__buy {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: var(--bp-space-1) var(--bp-space-3);
        border: 0;
        border-radius: var(--bp-radius-sm);
        background: var(--bp-green-on-paper);
        color: var(--bp-on-accent);
        font-family: var(--ff-body);
        font-weight: 600;
        font-size: var(--bp-fs-body);
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
    }
    /* Подпись клуба тише цены размером, не прозрачностью: это тот клуб, в
       который сейчас заплатят. */
    .acc-offer__buy-where {
        font-weight: 400;
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    .acc-offer__buy:disabled {
        background: var(--bp-line-strong);
        color: var(--bp-ink-soft);
        cursor: default;
    }
    .acc-offer__error:empty { display: none; }
    .acc-offer__error {
        margin-top: var(--bp-space-2);
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        color: var(--bp-stamp-red);
    }

    .acc-notice:not(:empty) {
        margin-top: var(--bp-space-3);
        padding: var(--bp-space-2) var(--bp-space-3);
        border-radius: var(--bp-radius-sm);
        background: var(--bp-paper);
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
        color: var(--bp-ink-soft);
    }

    /* Строка движения в чеке абонемента: за что, когда и на сколько. */
    .acc-mv {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--bp-space-1) var(--bp-space-3);
        padding: var(--bp-space-3) 0;
        border-bottom: 1px dashed var(--bp-line);
    }
    .acc-mv:last-child { border-bottom: 0; }
    .acc-mv__title {
        min-width: 0;
        overflow-wrap: anywhere;
        font-family: var(--ff-body);
        font-size: var(--bp-fs-secondary);
        line-height: 1.4;
    }
    .acc-mv__at {
        font-family: var(--ff-mono);
        font-weight: 600;
        font-size: var(--bp-fs-micro);
        line-height: 1.2;
        color: var(--bp-ink-soft);
    }
    .acc-mv__sum {
        grid-row: 1 / span 2;
        grid-column: 2;
        align-self: center;
        font-family: var(--ff-mono);
        font-weight: 600;
        font-size: var(--bp-fs-secondary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }