/*
 * components.css — qayta ishlatiladigan bo'laklar.
 *
 * tokens.css va base.css dan KEYIN yuklanadi.
 * Bu yerda sahifaga xos hech narsa yo'q — u pages.css da.
 */

/* ==========================================================================
   Tugma
   ========================================================================== */

.btn {
    --btn-spinner: currentColor;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.btn:active:not([disabled]):not(.is-loading) {
    transform: scale(.97);
}

/* --- Variantlar --- */

.btn--primary {
    --btn-spinner: #fff;
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: #fff;
}

.btn--primary:hover:not([disabled]) {
    background: var(--cobalt-ink);
    border-color: var(--cobalt-ink);
}

.btn--ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.btn--ghost:hover:not([disabled]) {
    background: var(--cobalt-wash);
    border-color: var(--cobalt-wash);
    color: var(--cobalt);
}

.btn--danger {
    --btn-spinner: #fff;
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn--danger:hover:not([disabled]) {
    filter: brightness(.92);
}

/* "Bekor qilish" — xavfli, lekin asosiy harakat emas (docs/05 Task 15) */
.btn--danger.btn--ghost {
    --btn-spinner: var(--danger);
    background: transparent;
    border-color: var(--line);
    color: var(--danger);
}

.btn--danger.btn--ghost:hover:not([disabled]) {
    background: var(--danger-wash);
    border-color: var(--danger-wash);
    filter: none;
}

/* --- O'lchamlar --- */

.btn--lg {
    min-height: 52px;
    padding: 0 var(--sp-5);
    border-radius: var(--r);
    font-size: 16px;
}

.btn--sm {
    min-height: 34px;
    padding: 0 var(--sp-3);
    font-size: 14px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* --- Holatlar --- */

.btn[disabled],
.btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.is-loading > * {
    visibility: hidden;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--btn-spinner);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Doira ikonka tugmasi
   ========================================================================== */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.icon-btn:active:not([disabled]) {
    transform: scale(.9);
}

/* Menyudagi (+) — kobalt chegara (docs/03 §7.4) */
.icon-btn--cobalt {
    border-color: var(--cobalt);
    color: var(--cobalt);
}

.icon-btn--cobalt:hover:not([disabled]) {
    background: var(--cobalt-wash);
}

.icon-btn--plain {
    border-color: transparent;
    background: transparent;
}

.icon-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Stepper  (−  2  +)
   ========================================================================== */

/*
 * Miqdor uyasi. (+) tugma stepper'ga aylanganda sahifa SAKRAMASLIGI kerak —
 * shuning uchun uya kengligi oldindan stepper kengligiga teng qilib qotiriladi
 * (docs/05 Task 8-E).
 */
.qty-slot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    width: 112px;
    min-height: 36px;
}

.stepper {
    display: inline-flex;
    align-items: center;
    height: 36px;
    border: 1px solid var(--cobalt);
    border-radius: 999px;
    background: var(--surface);
    color: var(--cobalt);
    animation: stepper-in var(--dur-fast) var(--ease);
}

.stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    border-radius: 999px;
    color: inherit;
}

.stepper__btn:active:not([disabled]) {
    background: var(--cobalt-wash);
}

.stepper__btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.stepper__value {
    min-width: 34px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

@keyframes stepper-in {
    from { transform: scale(.9); opacity: .4; }
    to   { transform: scale(1);  opacity: 1; }
}

/* ==========================================================================
   Karta va ajratgich
   ========================================================================== */

.card {
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}

.card--flush {
    padding: 0;
    overflow: hidden;
}

.divider {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--line);
}

/* ==========================================================================
   Status belgisi (badge)
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--line);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Ranglar OrderStatus::colors() bilan bir xil (common/helpers/OrderStatus.php) */

.badge--new        { background: var(--cobalt-wash);    color: var(--cobalt); }
.badge--accepted   { background: var(--cobalt-wash);    color: var(--cobalt-ink); }
.badge--cooking    { background: var(--turquoise-wash); color: var(--turquoise); }
.badge--delivering { background: var(--turquoise-wash); color: var(--turquoise); }
.badge--delivered  { background: var(--turquoise);      color: #fff; }
.badge--cancelled  { background: var(--danger-wash);    color: var(--danger); }

/* ==========================================================================
   Holat nuqtasi (ochiq / yopiq)
   ========================================================================== */

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ink-soft);
}

.status-dot--open   { background: var(--turquoise); }
.status-dot--closed { background: var(--danger); }

/* ==========================================================================
   Pastdan chiqadigan modal (sheet)
   ========================================================================== */

.sheet__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--scrim);
    animation: fade-in var(--dur) var(--ease);
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sheet);
    max-width: var(--page-w);
    margin: 0 auto;
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface);
    animation: sheet-in var(--dur) var(--ease);
}

.sheet[hidden],
.sheet__backdrop[hidden] {
    display: none;
}

/* Barmoq bilan tortish uchun "tutqich" — bosilmaydi, faqat ishora */
.sheet__handle {
    width: 36px;
    height: 4px;
    margin: 0 auto var(--sp-4);
    border-radius: 999px;
    background: var(--line);
}

.sheet__title {
    margin-bottom: var(--sp-3);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.sheet__text {
    margin-bottom: var(--sp-4);
    color: var(--ink-soft);
}

.sheet__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

@keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   Forma
   ========================================================================== */

.field {
    display: block;
    margin-bottom: var(--sp-4);
}

.field__label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
}

.field__hint {
    display: block;
    margin-top: var(--sp-2);
    color: var(--ink-soft);
    font-size: 13px;
}

/* Xato matni — maydon OSTIDA, 13px danger (docs/05 Task 10-D) */
.field__error {
    display: block;
    margin-top: var(--sp-2);
    color: var(--danger);
    font-size: 13px;
}

.field__error:empty {
    display: none;
}

.input,
.textarea {
    display: block;
    width: 100%;
    padding: 12px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);

    /* 16px — iOS shundan kichigida inputga bosilganda sahifani kattalashtiradi */
    font-size: 16px;
    line-height: 1.4;
    transition: border-color var(--dur-fast) var(--ease);
}

.input {
    min-height: 48px;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--ink-soft);
    opacity: .8;
}

.input:focus,
.textarea:focus {
    border-color: var(--cobalt);
}

.textarea {
    min-height: 88px;
    resize: vertical;
}

.field.has-error .input,
.field.has-error .textarea {
    border-color: var(--danger);
}

.char-count {
    display: block;
    margin-top: var(--sp-1);
    text-align: right;
    color: var(--ink-soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.char-count.is-limit {
    color: var(--danger);
}

/* ==========================================================================
   Bo'sh va xato holatlari
   ========================================================================== */

.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    min-height: 55vh;
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.empty-state__icon { color: var(--ink-soft); }
.error-state__icon { color: var(--danger); }

.empty-state__title,
.error-state__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.empty-state__text,
.error-state__text {
    max-width: 34ch;
    color: var(--ink-soft);
}

.empty-state .btn,
.error-state .btn {
    margin-top: var(--sp-2);
}

/* Xato sahifasidagi ikkita yo'l (Task 18): tor ekranda ustma-ust, keng
   ekranda yonma-yon. Ikkalasi ham bir xil kenglikda — biri "asosiy" bo'lib
   ko'rinmasligi uchun o'lchov emas, RANG ishlatiladi. */
.error-state__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 100%;
    max-width: 280px;
    margin-top: var(--sp-2);
}

.error-state__actions .btn {
    margin-top: 0;
}

/* ==========================================================================
   Tarmoq banneri (Task 18) — aloqa uzilganda sahifa tepasida
   ==========================================================================

   `position: fixed`, chunki u sahifa qayerda turganidan qat'i nazar
   ko'rinishi kerak: mijoz savatni pastga surib ketgan bo'lsa ham aloqa
   yo'qligini bilishi shart. Markupni `net.js` yasaydi. */

.net-banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-toast);
    padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-4) var(--sp-2);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    animation: net-banner-in var(--dur) var(--ease);
}

.net-banner--offline {
    background: var(--danger);
    color: #fff;
}

.net-banner--online {
    background: var(--turquoise);
    color: #fff;
}

@keyframes net-banner-in {
    from { transform: translateY(-100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .net-banner {
        animation: none;
    }
}

/* Alpine yuklanmadi (Task 18): sahifa jim qolib ketmasin.
   Banner emas, oqim ichidagi blok — u yo'qolmaydi va tugmasi bosiladi. */
.net-stalled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    text-align: center;
}

.net-stalled__text {
    max-width: 34ch;
    color: var(--ink-soft);
    font-size: 14px;
}

.error-state__debug {
    max-width: 34ch;
    color: var(--ink-soft);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Skeleton (yuklanayotgan joy)
   ========================================================================== */

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--line);
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
    animation: shimmer 1400ms infinite;
}

.skeleton--text  { height: 12px; border-radius: 4px; }
.skeleton--title { height: 18px; width: 55%; border-radius: 4px; }
.skeleton--line  { height: 12px; width: 80%; border-radius: 4px; }
.skeleton--img   { width: 88px; height: 88px; }

@keyframes shimmer {
    to { transform: translateX(100%); }
}

/* ==========================================================================
   CHEK — signature element (docs/03 §7.3)
   ==========================================================================
   Quyidagi .ticket va .stamp qoidalari TZ dan AYNAN olingan. */

.ticket {
    background: var(--surface);
    padding: var(--sp-5) var(--sp-4);
    position: relative;

    /* TZ ro'yxatida `border-radius` fallback ichida edi. Bu yerga ko'chirildi:
       mask ostida u KO'RINMAYDI (yuqori-pastki qirralarni baribir tishlar
       yeydi), lekin mask biror sababga ko'ra ishlamay qolsa — masalan
       DevTools'da o'chirilsa yoki klient uni qo'llab-quvvatlamasa — chek
       yalang'och oq to'rtburchak bo'lib qolmaydi. */
    border-radius: var(--r);

    /* perforatsiya: yuqori va pastki qirra tishli */
    -webkit-mask:
        radial-gradient(circle 7px at 7px 0,    transparent 7px, #000 7.5px) 0 0   / 18px 51% repeat-x,
        radial-gradient(circle 7px at 7px 100%, transparent 7px, #000 7.5px) 0 100% / 18px 51% repeat-x;
            mask:
        radial-gradient(circle 7px at 7px 0,    transparent 7px, #000 7.5px) 0 0   / 18px 51% repeat-x,
        radial-gradient(circle 7px at 7px 100%, transparent 7px, #000 7.5px) 0 100% / 18px 51% repeat-x;
}

/*
 * FALLBACK.
 *
 * TZ da shart `@supports not (mask: ...)` deb yozilgan edi. Unga prefiksli
 * variant QO'SHILDI: Safari 15.4 dan eskisi `mask` ni bilmaydi, lekin
 * `-webkit-mask` ni to'liq bajaradi. Faqat prefikssiz nomni tekshirsak,
 * o'sha Safari'da perforatsiya ISHLAY TURIB o'chib qolardi.
 *
 * Fallback ko'rinishi: radius + 1px chegara — savat va checkout kartalari
 * bilan bir xil til, ya'ni chek "buzilgan" emas, shunchaki tinchroq.
 */
@supports not ((mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000))) {
    .ticket {
        border: 1px solid var(--line);
        -webkit-mask: none;
        mask: none;
    }
}

/* --- Chek ichi (docs/05 Task 12-A) --- */

/*
 * O'ng tomondagi 160px — shtamp uchun ajratilgan joy: eng uzun status
 * ("Tayyorlanmoqda") shtampi 155px chiqadi. Shu sababli sarlavhada faqat
 * buyurtma RAQAMI turadi ("A-1042"), "Buyurtma" so'zi esa `visually-hidden`
 * bo'lib skrin-riderga o'qiladi: to'liq matn 143px olardi va 360px enli
 * telefonda uzun shtamp ostiga kirib ketardi.
 *
 * `flex-wrap`: keng ekranda raqam va vaqt bir qatorda (TZ maketidagidek),
 * tor ekranda yoki uzun sanada vaqt pastki qatorga tushadi — matn hech
 * qachon shtamp bilan ustma-ust tushmaydi.
 */
.ticket__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
    padding-right: 160px;
    margin-bottom: var(--sp-4);
}

.ticket__number {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.ticket__time {
    color: var(--ink-soft);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Nuqtali ajratgich — chekning "qog'oz" hissi */
.ticket__rule {
    height: 0;
    margin: var(--sp-3) 0;
    border: 0;
    border-top: 1px dotted var(--line);
}

/* Qator: nom — nuqtali chiziq — narx */
.ticket__row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 3px 0;
}

.ticket__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bo'sh element: nom bilan narx orasini nuqta bilan to'ldiradi */
.ticket__dots {
    flex: 1 1 auto;
    min-width: var(--sp-4);
    border-bottom: 1px dotted var(--line);
    transform: translateY(-3px);
}

.ticket__qty {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.ticket__price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.ticket__row--total .ticket__name,
.ticket__row--total .ticket__price {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.ticket__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 3px 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.ticket__meta svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Bekor qilish sababi — mijoz uchun eng muhim qator, shuning uchun danger */
.ticket__meta--reason {
    color: var(--danger);
}

.ticket__meta[hidden] {
    display: none;
}

/* --- Yig'iladigan chek (Buyurtmalarim, docs/05 Task 12-C) --- */

/*
 * `<details>` — JS'siz akkordeon. Chek yopiq holatda sarlavha, shtamp va
 * JAMI ni ko'rsatadi; ochilganda ostiga qatorlar va manzil qo'shiladi.
 *
 * JAMI ochiq holatda ham qoladi (ikkinchi nusxa chizilmaydi): shu tufayli
 * bosish nuqtasi ham, chevron ham joyidan qimirlamaydi.
 */
.ticket--fold > summary {
    display: block; /* Firefox: `list-item` ni bekor qiladi */
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.ticket--fold > summary::-webkit-details-marker {
    display: none;
}

.ticket--fold > summary:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Ochilish/yopilish belgisi — JAMI qatorining o'ng chekkasida */
.ticket__chevron {
    display: flex;
    flex: 0 0 auto;
    margin-left: var(--sp-1);
    color: var(--ink-soft);
    transition: transform var(--dur) var(--ease);
}

.ticket--fold[open] .ticket__chevron {
    transform: rotate(180deg);
}

.ticket__fold {
    animation: fold-in var(--dur) var(--ease);
}

@keyframes fold-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* --- Status shtampi (docs/03 §7.3, AYNAN) --- */

.stamp {
    position: absolute; top: 18px; right: 14px;
    transform: rotate(-6deg);
    border: 2px solid currentColor; border-radius: 4px;
    padding: 3px 8px;
    /* TZ da `font: 600 12px/1 Inter` yozilgan. `Inter` — bizda ro'yxatdan
       o'tgan oila nomi emas (u 'Inter Variable'), shuning uchun shtamp
       zaxira shriftda chiqardi. Faqat oila nomi tuzatildi. */
    font: 600 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
    opacity: .9;
}
.stamp--cobalt    { color: var(--cobalt); }
.stamp--turquoise { color: var(--turquoise); }
.stamp--solid     { color: #fff; background: var(--turquoise); border-color: var(--turquoise); }
.stamp--danger    { color: var(--danger); }

/* Success sahifasida shtamp 300 ms kechikib "bosiladi" (docs/03 §7.3) */
.stamp--animate {
    animation: stamp-press var(--dur) var(--ease) var(--dur-slow) backwards;
}

/*
 * Buyurtmalarim sahifasida status o'zgarganda shtamp shu yerda va shu zahoti
 * qayta "bosiladi" — kechikishsiz (orders.js sinfni qo'yib, tugagach oladi).
 */
.stamp--press {
    animation: stamp-press var(--dur) var(--ease) backwards;
}

@keyframes stamp-press {
    from { transform: rotate(-6deg) scale(1.35); opacity: 0; }
    to   { transform: rotate(-6deg) scale(1);    opacity: .9; }
}

/* Chek pastdan chiqadi (docs/03 §7.5.4) — success sahifasida */
.ticket--rise {
    animation: ticket-rise var(--dur) var(--ease) backwards;
}

@keyframes ticket-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Pastki sticky panel
   ========================================================================== */

.sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bar);
    padding: var(--sp-2) var(--sp-4);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: var(--paper);
    box-shadow: var(--shadow-bar);
    animation: bar-in var(--dur) var(--ease);
}

.sticky-bar__inner {
    max-width: var(--page-w);
    margin: 0 auto;
}

@keyframes bar-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/*
 * Alpine `x-show` bilan boshqariladigan panel (menyudagi savat qatori).
 * Kirish/chiqishni x-transition beradi, shuning uchun CSS o'zining kirish
 * animatsiyasini o'chiradi — aks holda ikkalasi bir vaqtda ishlardi.
 */
.sticky-bar--toggle {
    animation: none;
}

/* x-transition sinflari: pastdan chiqadi, pastga tushib ketadi (docs/03 §7.4) */
.bar-t {
    transition:
        transform var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.bar-t--hidden { transform: translateY(100%); opacity: 0; }
.bar-t--shown  { transform: translateY(0);    opacity: 1; }

/* ==========================================================================
   Almashinadigan raqam (docs/03 §7.5.3)
   ==========================================================================
   Ikki qavat: tepada yangi qiymat, ostida eskisi. Uya bir qator pastga
   suriladi — yangi raqam YUQORIDAN tushib kelgandek ko'rinadi.

   Balandlik `em` da: atrofdagi matnning line-height'i 1.5 bo'lishi kutiladi
   (base.css dagi body qiymati). Boshqa qatorda ishlatilsa --roll-h beriladi. */

.roll {
    --roll-h: 1.5em;

    display: inline-block;
    overflow: hidden;
    height: var(--roll-h);

    /* Qator qutisining tepasiga tekislanadi: uya balandligi line-height'ga
       teng bo'lgani uchun bazaviy chiziqlar ham mos tushadi. */
    vertical-align: top;
}

.roll__slot {
    display: block;
}

.roll__cell {
    display: block;
    height: var(--roll-h);
    line-height: var(--roll-h);
}

.roll__slot.is-rolling {
    animation: roll-down var(--dur) var(--ease);
}

@keyframes roll-down {
    from { transform: translateY(calc(-1 * var(--roll-h))); }
    to   { transform: none; }
}

/* ==========================================================================
   Ketma-ket paydo bo'lish (docs/03 §7.5.1)
   ==========================================================================
   PHP style="--i: 3" beradi, JS kerak emas. */

.rise {
    animation: rise 260ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}