/* Оформление сервиса. Значения и правила — docs/reference/ui.md, решения — ADR-0027
   (три ширины, откуда взято) и ADR-0019 (кегль, контраст, доступность).
   Вёрстка идёт от телефона: всё ниже описывает телефон, медиазапросы только добавляют.

   Цвета затемнены против посадочной страницы: там текст рекламный, здесь его читают
   на улице, при солнце, с телефона в руке. Каждая пара «текст на фоне» — не ниже 4.5:1. */

:root {
  --paper:#ffffff; --surface:#f9f8f8; --line:#ebebeb; --line-soft:#f1f1f1;
  --ink:#262f3c;                 /* 13.5:1 на белом */
  --muted:#606c7e;               /* 5.3:1 на белом, 5.0:1 на карточке */
  --accent:#16b6d2;              /* только рамки и заливки: текста на нём не бывает */
  --accent-ink:#0a6c7d;          /* текст, ссылки, кнопки — 6.1:1 */
  --accent-2:#c8384a;            /* наведение — 5.1:1 с белым */
  --accent-soft:#e6f7fb; --accent-line:#cceef5;
  --on-accent:#ffffff;
  --frame:#d6dfeb;
  --price:#c62222;               /* 5.8:1 на белом */
  --quota:#436f0c; --quota-bg:#eff8e4;   /* 5.5:1 на своей плашке */
  --warn:#8a6d0b; --warn-bg:#fff8dd;     /* 4.6:1 на своей плашке */
  --shadow:0 1px 2px rgba(38,47,60,.05), 0 8px 24px -12px rgba(38,47,60,.22);
  --r:12px;
  /* Шрифт системный: витрину открывают на рынке, с мобильной связи (ADR-0027). */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* Базовый кегль 18, и ни одна надпись в интерфейсе не мельче 16 (ADR-0019). */
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
       font-size:18px; line-height:1.6; }
img { max-width:100%; }
a { color:var(--accent-ink); }

.wrap { max-width:960px; margin:0 auto; padding:0 18px; }

/* ---------- шапка и подвал ---------- */
.top { border-bottom:1px solid var(--line); background:var(--surface); }
.top .wrap { display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; }
.top .brand { font-weight:800; letter-spacing:-.02em; text-decoration:none; color:var(--ink);
              margin-right:auto; }
.top nav { display:flex; gap:16px; flex-wrap:wrap; font-size:16px; align-items:center; }
.top nav a { color:var(--accent-ink); }
.top nav a:hover { color:var(--accent-2); }

main { padding:28px 0 48px; }
footer { padding:24px 0 40px; font-size:16px; color:var(--muted); }

/* ---------- общее ---------- */
h1 { font-size:clamp(26px,5.2vw,34px); line-height:1.12; letter-spacing:-.024em;
     font-weight:800; margin:0 0 .4em; text-wrap:balance; }
h2 { font-size:clamp(20px,3.4vw,25px); line-height:1.2; letter-spacing:-.02em;
     font-weight:800; margin:1.4em 0 .5em; }
p { margin:0 0 1em; }
.lede { max-width:60ch; }
.muted { color:var(--muted); }
.eyebrow { font-size:16px; letter-spacing:.12em; text-transform:uppercase;
           color:var(--muted); font-weight:700; }

/* Кнопка не ниже 48 пикселей и достаёт до большого пальца (ADR-0019). */
.btn { display:inline-block; text-decoration:none; font-weight:600; font-size:17px;
       min-height:48px; padding:12px 26px; border-radius:999px;
       border:2px solid var(--accent-ink); background:var(--accent-ink);
       color:var(--on-accent); cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--accent-2); border-color:var(--accent-2); }
.btn.ghost { background:transparent; color:var(--accent-ink); }
.btn.ghost:hover { background:var(--accent-ink); color:var(--on-accent); }

/* ---------- формы ---------- */
/* Узкая колонка: вход набирают одной рукой, стоя. На широком экране растягивать
   поле ввода через весь экран незачем. */
.form { max-width:26rem; }
.form label { display:block; font-size:16px; font-weight:650; margin-bottom:6px; }
.form input, .form select {
  width:100%; font:inherit; color:inherit; background:var(--paper);
  border:1px solid var(--frame); border-radius:9px; padding:12px 14px;
  min-height:48px; font-size:18px;
}
.form input:focus, .form select:focus {
  outline:2px solid var(--accent-ink); border-color:var(--accent-ink);
}
.form .field { margin-bottom:18px; }
.form .hint { font-size:16px; color:var(--muted); margin:6px 0 0; }
.form .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px; }
.form input.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:28px;
                   font-weight:800; letter-spacing:.22em; text-align:center; }

.errors { background:var(--warn-bg); border:1px solid var(--warn); border-radius:9px;
          padding:12px 14px; margin-bottom:18px; font-size:17px; }
.errors ul { margin:0; padding-left:18px; }

/* ---------- карточки ---------- */
.cards { display:grid; gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
        padding:18px; }
.card h3 { margin:0 0 .2em; font-size:18px; font-weight:700; }
.card p { margin:0; font-size:17px; color:var(--muted); }
.card a.title { text-decoration:none; color:inherit; }

/* Состояние подписано словом, а не только цветом (ADR-0019, правило 23). */
.state { display:inline-block; font-size:16px; font-weight:700; border-radius:999px;
         padding:4px 12px; background:var(--line-soft); color:var(--muted); }
.state.on { background:var(--quota-bg); color:var(--quota); }
.state.off { background:var(--warn-bg); color:var(--warn); }

/* Фотография в карточке списка: прилавок узнают по ней, а не по названию
   (ТЗ 5.1). Кадр 4:3 — та же пропорция, в которой лежит превью (ADR-0015). */
.card-photo { display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
              border-radius:9px; margin:0 0 12px; background:var(--line-soft); }

/* Города строкой: их единицы, и выпадающий список тут был бы лишним экраном. */
.towns { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.town { display:inline-block; font-size:17px; font-weight:650; border-radius:999px;
        padding:10px 16px; background:var(--surface); border:1px solid var(--line);
        text-decoration:none; color:var(--accent-ink); }
.town.here { background:var(--accent-soft); border-color:var(--accent-line);
             color:var(--ink); }

.empty { background:var(--accent-soft); border:1px solid var(--accent-line);
         border-radius:var(--r); padding:24px 20px; }
.empty p:last-child { margin:0; }
.state-row { margin-top:10px; }

/* Демо-рынок подписан на каждом экране: перепутать его с рабочим прилавком
   не должен ни покупатель, ни продавец (ADR-0019, правило 8). */
.demo { background:var(--warn-bg); border:1px solid var(--warn); color:var(--warn);
        border-radius:9px; padding:12px 14px; font-weight:650; margin:0 0 20px; }

/* ---------- карточка прилавка ---------- */
.panel { border-top:1px solid var(--line); padding-top:8px; margin-top:28px; }
.panel h2 { margin-top:.6em; }
.panel p:last-child { margin-bottom:0; }
.stall-photo { border-radius:var(--r); display:block; max-width:100%; height:auto; }

/* Пары «что — сколько»: на телефоне столбиком, дальше в две колонки. */
.pairs { margin:0 0 16px; }
.pairs dt { font-size:16px; color:var(--muted); }
.pairs dd { margin:0 0 12px; font-weight:650; }

.address { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px;
           background:var(--surface); border:1px dashed var(--frame); border-radius:9px;
           padding:12px 14px; overflow-wrap:anywhere; }

/* Необратимое действие спрятано за раскрытием и не стоит рядом с обычными. */
.danger { margin-top:28px; border:1px solid var(--warn); background:var(--warn-bg);
          border-radius:9px; padding:14px 16px; }
.danger summary { cursor:pointer; font-weight:700; }
.danger p { margin:.8em 0; font-size:17px; }

/* ---------- строки списка ---------- */
/* Строка товара: название слева, число справа — как на макетах телефона. */
.rows { width:100%; border-collapse:collapse; }
.rows td { border-bottom:1px solid var(--line-soft); padding:12px 0; vertical-align:top; }
.rows tr:last-child td { border-bottom:0; }
.rows .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rows .act { text-align:right; white-space:nowrap; padding-left:12px; }
.rows .sub { font-size:16px; color:var(--muted); font-weight:400; }
.rows .price { color:var(--price); font-weight:700; }
/* Кончилось — цена бледнеет и зачёркивается, а рядом стоит слово «нет». */
.rows .price.out { color:var(--muted); text-decoration:line-through; }

/* Действие внутри строки выглядит ссылкой, но остаётся кнопкой формы. */
.linkish { background:none; border:0; padding:0; font:inherit; color:var(--accent-ink);
           cursor:pointer; text-decoration:underline; }
.linkish:hover { color:var(--accent-2); }
.rows form { display:inline; margin-left:12px; }

/* ---------- витрина дня ---------- */
/* Позиция, по которой приём остановлен: бледнее и со словом, а не только бледнее. */
.rows tr.gone td { opacity:.55; }
.rows .left { color:var(--quota); font-weight:700; }
.inline { font-size:16px; color:var(--muted); white-space:nowrap; }
.mini { width:6.5rem; font:inherit; font-size:17px; padding:8px 10px; min-height:44px;
        border:1px solid var(--frame); border-radius:8px; margin-left:6px;
        font-variant-numeric:tabular-nums; }
.rows .act form { display:block; margin:0 0 8px; }
.inline-form { margin-top:16px; }
.inline-form .btn + .btn { margin-left:10px; }

.note { background:var(--quota-bg); border:1px solid var(--quota); color:var(--ink);
        border-radius:9px; padding:12px 14px; margin-bottom:18px; font-size:17px; }

/* ---------- корзина ---------- */
/* Подпись к полю количества нужна тому, кто слушает страницу, и мешает тому,
   кто её видит: единица и так написана рядом с полем. Поэтому не display:none —
   спрятанное так поле не читает и озвучиватель. */
.sr { position:absolute; width:1px; height:1px; overflow:hidden;
      clip-path:inset(50%); white-space:nowrap; }
/* Итог по прилавку стоит под столбцом сумм, а не под названиями. */
p.num { text-align:right; font-variant-numeric:tabular-nums; margin:8px 0 0; }
/* Строка корзины: поле количества и действия под названием, а не в столбце цены. */
.rows .inline-form { margin-top:10px; }
.rows .inline-form .mini { margin-left:0; }

/* Код визита — то, что человек показывает и называет у прилавка: он крупнее
   всего на странице, потому что читают его через прилавок и не с первого ряда. */
.visit-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
              font-size:56px; font-weight:800; letter-spacing:.08em;
              margin:.1em 0 .3em; color:var(--accent-ink); }

/* Заказы одного визита идут подряд под общим кодом: разделяет их отступ
   и название прилавка, а не рамка — рамок на странице и так довольно. */
.order { margin-top:22px; }
.order h2 { margin:0 0 .2em; font-size:19px; }

/* Имя покупателя крупное, код рядом моноширинным: продавец окликает по имени,
   а сверяет по коду (ТЗ 4.10, ADR-0017). */
.order h2 .code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                  font-size:22px; color:var(--accent-ink); margin-left:10px;
                  letter-spacing:.06em; }

/* ---------- выдача ---------- */
/* Имя первое и самое крупное: на нём стоит вторая проверка кода (ADR-0019,
   правило 17). Кнопка «Выдал» — во всю ширину и высокая: её нажимают десятки
   раз в день большим пальцем руки, держащей телефон (правило 18). */
.handout-find .code { width:100%; max-width:12rem; }
.handout-name { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 .2em; }
.handout-total { font-size:26px; font-weight:800; color:var(--price);
                 text-align:right; margin:.4em 0 1em; font-variant-numeric:tabular-nums; }
.btn.big { width:100%; min-height:64px; font-size:20px; }
.handout-card .danger { margin-top:28px; }
.rows .code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
              font-size:19px; color:var(--accent-ink); }

/* ---------- стартовая страница ---------- */
/* Обещание сервиса стоит выше дверей, но не заслоняет их: рассказ о том, как всё
   устроено, идёт ниже — пришедшему сделать дело листать до конца не нужно. */
.hero { margin-bottom:8px; }
.hero .eyebrow { margin:0 0 8px; }
.hero .lede { font-size:19px; }
.after-cards { font-size:16px; margin:16px 0 0; }

/* Шаги нумерованы кружком, а не точкой: номер здесь часть смысла — порядок дня
   продавца, — и читается он раньше заголовка. */
.steps { counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.steps li { position:relative; background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r); padding:18px 18px 18px 62px; counter-increment:step; }
.steps li::before { content:counter(step); position:absolute; left:18px; top:18px;
                    width:30px; height:30px; border-radius:999px;
                    background:var(--accent-ink); color:var(--on-accent);
                    font-size:17px; font-weight:800; line-height:30px; text-align:center; }
.steps h3 { margin:0 0 .3em; font-size:19px; font-weight:700; }
.steps p { margin:0; font-size:17px; color:var(--muted); }

.callout { background:var(--accent-soft); border:1px solid var(--accent-line);
           border-radius:var(--r); padding:20px; margin:28px 0 0; }
.callout p { margin:0; font-size:19px; font-weight:650; }

/* Вопрос сложен раскрытием: на телефоне четыре ответа подряд — это экран,
   который пролистывают, не читая. Раскрытие родное, скриптов не требует. */
.faq { border-top:1px solid var(--line-soft); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:700; }
.faq p { margin:.7em 0 0; font-size:17px; color:var(--muted); max-width:64ch; }

/* ---------- планшет ---------- */
@media (min-width:640px) {
  .cards { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .pairs { display:grid; grid-template-columns:auto 1fr; gap:8px 24px; }
  .pairs dt, .pairs dd { margin:0; }
  .stall-photo { max-width:560px; }
}

/* ---------- компьютер ---------- */
@media (min-width:960px) {
  main { padding:40px 0 64px; }
  .cards { grid-template-columns:1fr 1fr 1fr; }
}