/* Основа макета: типографика обеих ролей, кнопки, поля, фокус, ссылки (спека 028, T002).
   Все размеры - через токены tokens.css. Роль задаёт класс на body: role-warehouse, role-full,
   role-auth (вход: масштаб склада). */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Склад - по умолчанию; вход читают те же люди */
body {
  --fs-caption: var(--wh-caption);
  --fs-text: var(--wh-text);
  --lh: var(--wh-line);
  --fs-title: var(--wh-title);
  --fs-status: var(--wh-status);
  --btn-h: var(--wh-button-h);
  --target: 56px;
  --gap: var(--wh-gap);
  --side: var(--wh-side);
  --page: var(--wh-page);
  --tile-h: var(--wh-tile-h);
  --tile-ico: var(--wh-tile-ico);
  --tile-verb: var(--wh-tile-verb);
  --tile-min: 420px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-text);
  line-height: var(--lh);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.role-full {
  --fs-caption: var(--m-caption);
  --fs-text: var(--m-text);
  --lh: var(--m-line);
  --fs-title: var(--m-title);
  --fs-status: var(--m-title);
  --btn-h: var(--m-target);
  --target: var(--m-target);
  --gap: var(--m-gap);
  --side: var(--sp-5);
  --page: var(--m-page);
  --tile-h: calc(var(--m-target) + var(--sp-4));
  --tile-ico: 2em;
  --tile-verb: var(--m-text);
  --tile-min: 300px;
}

/* Поле при фокусе: оранжевое кольцо 3px */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 0; border-color: var(--amber-ink); }
/* Фокус виден на всех элементах: светлый янтарь на светлом фоне почти не виден */
:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.nums { font-variant-numeric: lining-nums tabular-nums; }

/* Страница и вертикальный ритм */
.page { max-width: var(--page); margin: 0 auto; padding: var(--sp-4) var(--side) var(--sp-6); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--gap); }
.actions { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }

/* Текст */
.title { font-family: var(--display); font-size: var(--fs-title); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.caption { font-size: var(--fs-caption); line-height: 1.35; color: var(--ink-dim); }
.lead { font-size: var(--fs-text); }
.faint { color: var(--ink-faint); }          /* только подписи Марины на --surface */
.ok-text { color: var(--green-ink); }
.err-text { color: var(--danger-ink); }
b, strong { font-weight: 700; }

/* Ссылки */
a { color: var(--ink); text-underline-offset: 3px; }
.link {
  display: inline-flex; align-items: center; min-height: var(--target);
  color: var(--ink-dim); text-decoration: underline;
}

/* Кнопки: главная - заливка янтарём и рамка 2px тёмного янтаря; обычная - рамка 2px --ink-dim */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--sp-4);
  font-family: var(--display); font-weight: 700; font-size: var(--fs-text); line-height: 1.2;
  text-align: center; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.btn-main { background: var(--amber); border-color: var(--amber-ink); }
.btn-danger { color: var(--danger-ink); border-color: var(--danger-ink); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-dim); text-decoration: underline; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-dim); cursor: default; }
body.role-full .btn { font-weight: 600; }
.btn-main { box-shadow: var(--shadow-soft); }

/* Опасное действие стоит отдельно: промежуток от соседей не меньше 24px */
.btn-danger { margin-left: var(--sp-4); }
.btn-danger:first-child { margin-left: 0; }

/* Поля ввода: рамка 2px --ink-dim */
label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
input, select, textarea {
  width: 100%; min-height: var(--btn-h); padding: 0 var(--sp-3);
  font: inherit; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--radius);
}
textarea { padding: var(--sp-2) var(--sp-3); min-height: calc(var(--btn-h) * 2); }
input[type="checkbox"], input[type="radio"] { width: var(--target); min-height: var(--target); accent-color: var(--ink); }
.field { display: block; }
.field-hint { font-size: var(--fs-caption); color: var(--ink-dim); margin-top: var(--sp-1); }
.check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--target); font-weight: 400; margin: 0; }
.check input { width: var(--target); flex: none; }

/* Скрыто визуально, читается с экрана */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Галочка: рамка 2px тёмная, ✓ - значком; зона нажатия 56px (родные галочки браузера бледные) */
.check input[type="checkbox"], .lab-block input[type="checkbox"], .lab-again input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: var(--target); height: var(--target); min-height: var(--target);
  flex: none; cursor: pointer; background: var(--surface) center / 70% no-repeat;
  border: 2px solid var(--line); border-radius: var(--radius-check);
}
.check input[type="checkbox"]:checked, .lab-block input[type="checkbox"]:checked, .lab-again input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0F14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}