/* 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)}
.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}

.field{display:block;margin-bottom:var(--space-3)}
.field__label{display:block;font-size:14px;color:var(--text-muted);margin-bottom:var(--space-1)}
/* 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)}

/* Финальное ревью, находка 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--ok{background:var(--success);color:var(--white)}
.toast--danger{background:var(--action-danger-bg);color:var(--action-danger-fg)}
@keyframes toast-out{to{opacity:0;visibility:hidden}}