/* MMAS UI — переписанная разметка шести компонентов дизайн-системы.
   Источник: ../Competition_Platform/docs/design/дизайн-система/components/.
   Цвета, радиусы и состояния берутся из .jsx/.prompt.md дословно, кроме случаев,
   где T2 §3 (углы 4/6/10px, pill только у бейджей поясов) сужает первоисточник
   для этого проекта — см. комментарии у .btn/.field__input/.card/.badge и
   task-3-report.md. */

.switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;
        background:none;border:0;padding:0 var(--space-2);font:inherit;cursor:pointer}
.switch__track{width:44px;height:26px;border-radius:var(--radius-pill);
        background:var(--gray-3);position:relative;flex-shrink:0;
        transition:background var(--dur-med) var(--ease-out)}
.switch__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
        background:var(--white);transition:left var(--dur-med) var(--ease-out),
        background var(--dur-med)}
.switch--on .switch__track{background:var(--yellow)}
.switch--on .switch__knob{left:21px;background:var(--black)}
.switch:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Button.jsx: borderRadius var(--radius-sm) — план ошибочно указывал radius-md.
   Круг правок 1 задачи 12 (Critical): было font:inherit — это шорткод, он
   сбрасывает ВСЕ составляющие шрифта, включая font-family, значения
   которого здесь не было — то есть family резолвилась в «inherit» и
   перебивала правило про font-family для .btn из typography.css —
   при равной специфичности выигрывает более позднее подключение
   ui.css. Снаружи дефект не был виден: капс и разрядка не входят в
   шорткод font, поэтому кнопка выглядела «почти как надо», а
   getComputedStyle показывал PT Sans вместо Oswald. Заменено на точечные
   свойства без font-family — семейство теперь целиком отдаётся каскаду
   typography.css. display/gap — под инлайновую SVG-иконку (иконка,
   задача 12 круг правок 1): без него текст в кнопке садится вплотную
   к иконке. */
.btn{min-height:44px;padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);
     display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
     font-size:inherit;line-height:inherit;font-weight:600;cursor:pointer;
     transition:background var(--dur-fast) var(--ease-out)}
/* Ссылка в виде кнопки («Написать в Telegram», «Вернуться к товару») —
   без браузерного подчёркивания. */
a.btn{text-decoration:none}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-hover)}
.btn--danger{background:var(--action-danger-bg);color:var(--action-danger-fg)}
.btn--danger:hover{background:var(--action-danger-hover)}
.btn--ghost{background:none;color:var(--text-body);
     box-shadow:inset 0 0 0 var(--border-w-strong) var(--border-strong)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Финальное ревью, находка 10: у отключённой кнопки не было оформления —
   жёлтая «Этот цвет закончился» выглядела нажимаемой. Единственное
   правило для disabled в проекте — у чипов размера (.чип:disabled в
   app.css); повторяем ту же меру приглушения (opacity), без
   зачёркивания — оно годится для короткой цифры размера, не для фразы. */
.btn:disabled{opacity:.35;cursor:not-allowed}

/* Заголовок раскрывающегося блока <details> (templates/ui/disclosure.html) —
   общее оформление, а не правило под конкретный блок экрана. Раньше оно было
   привязано к имени одного блока (.добавить-варианты), и заведённое следом
   «Описание для покупателя» осталось без вида кнопки: два соседних <details>
   выглядели по-разному. Оформление живёт здесь, рядом с правилами кнопки, от
   которых заголовок и берёт вид (.btn--ghost); частное каждого блока — ширина
   колонки, отступы, высота textarea — осталось в app.css при его собственном
   классе.
   Селектор summary.disclosure (а не просто .disclosure) — чтобы не зависеть
   от порядка правил внутри файла: display у кнопки задан inline-flex, и
   правило равной специфичности перебивало бы его, только стоя ниже по файлу.
   Здесь же тег + класс специфичнее одного класса при любом порядке.
   display:flex во всю ширину колонки (а не inline-flex кнопки) — это
   заголовок блока, он тянется на ту же ширину, что и содержимое под ним;
   justify-content возвращаем к началу строки, иначе центровка кнопки увела
   бы текст в середину и стало бы непонятно, к чему относится шеврон.
   Отдельного правила фокуса не нужно и заводить его нельзя: box-shadow здесь
   перебил бы красное кольцо из токена --focus-ring, которое на фокусе с
   клавиатуры рисует правило кнопки (.btn:focus-visible).
   margin-bottom отбивает рамку от того, что раскрывается следом: без него
   первое поле формы липнет вплотную к границе кнопки и читается её частью. */
summary.disclosure{display:flex;width:100%;justify-content:flex-start;
     margin-bottom:var(--space-3);min-height:56px;background:var(--surface-card);
     border-radius:var(--radius-md)}
/* Макет 12а: заголовок блока — белая карточка без рамки призрачной кнопки.
   Рамку (inset box-shadow от .btn--ghost) снимаем только вне фокуса: на
   фокусе с клавиатуры остаётся красное кольцо из .btn:focus-visible. */
summary.disclosure:not(:focus-visible){box-shadow:none}
/* Шеврон прижат к правому краю — так его видно, не вчитываясь в текст,
   и он же служит признаком состояния: вниз — закрыто, вверх — раскрыто.
   Поворот, а не подмена иконки: [open] переключается мгновенно, и без
   перехода блок дёргался бы. Длительность и кривая — общие проектные
   токены, чтобы движение совпадало с тумблерами наличия на том же экране.
   Состояние держится на атрибуте [open], а не на :hover — на телефоне
   наведения нет, подсказка обязана работать от нажатия. */
summary.disclosure .icon{margin-left:auto;
     transition:transform var(--dur-fast) var(--ease-out)}
details[open] > summary.disclosure .icon{transform:rotate(180deg)}

.field{display:block;margin-bottom:var(--space-3)}
/* Подпись поля — Oswald капсом с разрядкой, как Input в библиотеке MMAS
   (макет витрины, 08.10.2026). */
.field__label{display:block;font:600 13px/1.2 var(--font-display);text-transform:uppercase;
     letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-2)}
/* Input.jsx: borderRadius var(--radius-sm) — план ошибочно указывал radius-md. */
.field__input{width:100%;min-height:44px;font-size:16px;font-family:inherit;
     padding:0 var(--space-3);border:var(--border-w) solid var(--border-default);
     border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body)}
.field__input:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Card.jsx/.prompt.md: радиус 6px (var(--radius-md)) и рамка var(--border-default) —
   план ошибочно указывал radius-lg без рамки. Внутренний паддинг source (--space-5)
   сюда сознательно не перенесён: задача 4 кладёт фото вплотную к краям карточки и
   отступ вешает на .карточка__низ сама, общий паддинг на .card сломал бы фото. */
.card{background:var(--surface-card);border:var(--border-w) solid var(--border-default);
      border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}

/* Badge.jsx/.prompt.md — «пилюля-бейдж», радиус var(--radius-pill) без исключений,
   но это общий первоисточник платформы соревнований, где бейдж пояса — основной
   случай. T2 §3 сужает правило именно для этого проекта: «Капсульных кнопок нет;
   pill только у бейджей поясов». badge--out/ok/neutral — статусы наличия товара,
   не бейджи поясов (кю/гып/дан), под исключение не попадают → radius-sm, как и
   было в плане до отступления (Круг правок 1 ревью задачи 3). Появятся бейджи
   поясов — заведут отдельный капсульный класс; сейчас потребителя нет.
   Имена вариантов (neutral/out/ok) — не из источника, а из плана: они предметные
   для мерча («нет в наличии», «черновик») и используются так в задачах 4 и 7,
   поэтому не переименованы под brand/accent/dark исходника. */
.badge{display:inline-block;padding:2px var(--space-2);border-radius:var(--radius-sm);
       font-size:14px;font-weight:600}
.badge--neutral{background:var(--gray-2);color:var(--text-muted)}
.badge--out{background:var(--gray-2);color:var(--text-faint)}
.badge--ok{background:var(--yellow-tint);color:var(--black)}
/* Статусы заказа владелицы (макет order-row, Tag библиотеки MMAS). */
.badge--success,.badge--brand,.badge--accent,.заказ-строка .badge--neutral{font:600 11px/1.6 var(--font-display);
       text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.badge--success{background:var(--surface-success-tint);color:var(--success)}
.badge--brand{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.badge--accent{background:var(--surface-accent-tint);color:var(--error)}
/* Тёмная плашка поверх фото в каталоге (макет 01, Tag tone=Dark): «нет в
   наличии» должно читаться на бледном снимке. Капс и разрядка — как у тегов
   библиотеки MMAS. */
.badge--dark{background:var(--surface-dark);color:var(--text-inverse);
       font:600 11px/1.6 var(--font-display);text-transform:uppercase;letter-spacing:.14em}

/* Финальное ревью, находка 2 (Critical): вариантов toast--ok/toast--danger
   не было вовсе — только базовый тёмный, так что отказ («не сохранилось»)
   было не отличить от успеха («сохранилось») цветом, хотя спека §5 требует
   именно этого. Цвета — фирменные токены: успех зелёный (--success), а не
   жёлтый (--action-primary-bg — это CTA-жёлтый, у него другое значение),
   отказ — красный (--action-danger-bg), тот же, что у btn--danger. */
.toast{position:fixed;left:50%;bottom:var(--space-5);transform:translateX(-50%);
       background:var(--surface-dark);color:var(--text-inverse);
       padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
       box-shadow:var(--shadow-pop);animation:toast-out .2s var(--ease-out) 2.8s forwards}
/* Макет toast: тёмная плашка у обоих видов, различие — цветная полоса
   слева (успех зелёный, отказ красный). Иконки в тосте нет: toast.js
   ставит один текст, а различие видно цветом. */
.toast{width:min(358px,calc(100% - var(--space-6)))}
.toast--ok{box-shadow:var(--shadow-pop),inset 4px 0 0 var(--success)}
.toast--danger{box-shadow:var(--shadow-pop),inset 4px 0 0 var(--action-danger-bg)}
@keyframes toast-out{to{opacity:0;visibility:hidden}}