/* Ларёк. Один файл стилей на все экраны. Только светлая тема, крупно, без мелких деталей:
   хозяин — пожилой человек, работает с ноутбука и иногда с телефона. */

@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/golos-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/golos-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/golos-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/golos-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #F1F4EF; --surface: #FFFFFF; --ink: #14201A; --ink-soft: #2F3D34; --muted: #4A5A50; --line: #D5DCD3;
  --green: #166534; --green-wash: #E3F0E6; --green-line: #B9D6C0;
  --brown: #A8480A; --brown-ink: #8F3B06; --brown-wash: #FBEBDD; --brown-line: #E7C3A2; --brown-soft: #5E3A1C;
  --blue: #1D4E89;
}

*, *::before, *::after { box-sizing: border-box; }
/* Без этого любой блок с display: flex показывался бы, даже когда он скрыт. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 32px 24px 48px;
  background: var(--bg); color: var(--ink);
  font-family: "Golos Text", "Segoe UI", Tahoma, sans-serif; font-size: 20px; line-height: 1.4;
}
h1, h2, p { margin: 0; }
a { color: var(--ink); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
/* Видно, где сейчас курсор: и мышью, и с клавиатуры. */
:focus-visible { outline: 4px solid var(--green); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.wrap.narrow { max-width: 520px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row.end { align-items: flex-end; }
.row.between { align-items: center; justify-content: space-between; }

/* ---------- шапка ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.top.left { justify-content: flex-start; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-name { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; }
.date { font-size: 22px; color: var(--muted); }
h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.caps { font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 18px; }
.back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 20px;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 12px;
  text-decoration: none; font-size: 20px; font-weight: 600;
}

/* ---------- карточки ---------- */
.card {
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.card.tight { gap: 12px; }
.card.loss { background: var(--brown-wash); border-color: var(--brown-line); }
.card.gain { background: var(--green-wash); border-color: var(--green-line); }
.stat { flex: 1 1 300px; gap: 8px; }
.stat.week { flex: 1 1 230px; padding: 20px; gap: 6px; }
.stat-name { font-size: 22px; font-weight: 600; }
.stat.week .stat-name { font-size: 20px; }
.big { font-size: clamp(36px, 10vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mid { font-size: 36px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.green { color: var(--green); }
.brown { color: var(--brown-ink); }
.blue { color: var(--blue); }
.loss .muted { color: var(--brown-soft); }

/* ---------- четыре большие кнопки главного ---------- */
.action {
  flex: 1 1 260px; min-width: 0; min-height: 150px; border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  color: #FFFFFF; text-decoration: none; border: 2px solid transparent;
}
.action.supply { background: var(--green); }
.action.waste { background: var(--brown); }
.action.cash { background: var(--ink); }
.action.count { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.action-name { display: block; font-size: 28px; font-weight: 700; line-height: 1.15; }
.action-hint { display: block; font-size: 18px; margin-top: 4px; }
.action.count .action-hint { color: var(--muted); }

/* ---------- списки ---------- */
.list { flex: 1 1 420px; gap: 0; }
.list h2 { margin-bottom: 12px; }
.line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.line .what { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.line .sum { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line.total { border-top: 2px solid var(--ink); padding: 14px 0 0; font-size: 22px; font-weight: 700; }
.line.total .sum { font-weight: 700; }
.line .mini { margin-left: auto; }
.note { color: var(--muted); font-size: 18px; }
.note:empty { display: none; }

/* ---------- две колонки: форма и то, что уже записано ---------- */
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.side-col { flex: 1 1 320px; gap: 0; }
.side-col h2 { margin-bottom: 12px; }
.side-col .note { margin-top: 16px; }
.side-col .label { padding: 12px 0 8px; }
.side-col .err { margin: 12px 0; }

/* ---------- поля ---------- */
/* Основа ширины — только внутри строки (.row). Карточка — столбик: там flex-basis стал бы высотой поля. */
.field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.row > .field { flex: 1 1 200px; }
.row > .field.wide { flex: 2 1 320px; }
.field label, .label { font-weight: 600; }
input[type="text"] {
  -webkit-appearance: none; appearance: none;      /* на айфоне у полей иначе своя тень и скругление */
  width: 100%; height: 64px; padding: 0 16px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--surface);
  font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums;
}
input[type="text"].words { font-size: 24px; font-weight: 500; }
input[type="text"].bad { border-color: var(--brown); background: var(--brown-wash); }
input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.scan { display: flex; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 12px; padding: 0 16px; background: var(--surface); }
.scan svg { flex: none; }
.scan:focus-within { outline: 4px solid var(--green); outline-offset: 3px; }
.scan input[type="text"]:focus-visible { outline: none; }
.scan input[type="text"] { flex: 1 1 auto; min-width: 0; height: 60px; border: 0; padding: 0; font-size: 24px; background: transparent; }
.check { display: flex; align-items: center; gap: 14px; min-height: 56px; font-weight: 600; }
.check input { width: 32px; height: 32px; flex: none; accent-color: var(--green); }

/* ---------- плитки товаров и выбор из нескольких ---------- */
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile {
  flex: 1 1 150px; min-width: 0; min-height: 68px; padding: 10px 16px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--surface);
  font-size: 22px; font-weight: 600; overflow-wrap: anywhere;
}
.tile.tall { flex-basis: 170px; min-height: 84px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.tile.tall .sub { font-size: 17px; font-weight: 400; }
.tile.add { border-style: dashed; color: var(--green); }
.tile.pick { flex-basis: 110px; min-height: 64px; font-size: 20px; padding: 8px 14px; }
.tile[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 72px; padding: 10px 24px; border: 2px solid transparent; border-radius: 12px;
  font-size: 26px; font-weight: 700; text-decoration: none; color: #FFFFFF;
}
.btn.go { background: var(--green); }
.btn.lose { background: var(--brown); }
.btn.dark { background: var(--ink); }
.btn.plain { background: var(--surface); color: var(--ink); border-color: var(--ink); font-size: 22px; font-weight: 600; }
.btn.low { min-height: 64px; font-size: 24px; }
/* В строке главная кнопка вдвое шире «Отмены»; на узком экране кнопки встают друг под другом. */
.row > .btn.go, .row > .btn.lose { flex: 2 1 260px; }
.row > .btn.dark { flex: 0 1 320px; }
.row > .btn.plain { flex: 1 1 160px; }
.mini {
  min-height: 56px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--surface); font-size: 18px; font-weight: 600; white-space: nowrap;
}

/* ---------- расчёт под формой ---------- */
.calc { border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 6px; background: var(--green-wash); }
.calc.loss { background: var(--brown-wash); }
.calc .head { font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.calc .sub { color: var(--ink-soft); }
.calc.loss .sub { color: var(--brown-soft); }
.daysum { flex: 1 1 240px; min-width: 0; background: var(--green-wash); border-radius: 12px; padding: 12px 20px; }
.daysum .sum { font-size: 34px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; line-height: 1.2; }

/* ---------- сообщения ---------- */
.err {
  background: var(--brown-wash); border: 2px solid var(--brown); border-radius: 12px;
  padding: 14px 18px; color: var(--brown-ink); font-weight: 600;
}
.wait { color: var(--muted); padding: 10px 0; }

/* ---------- таблицы: широкая прокручивается в своей рамке ---------- */
.scroll { overflow-x: auto; }
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th { text-align: left; padding: 10px 16px 10px 0; font-size: 18px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.name { font-weight: 600; overflow-wrap: anywhere; }
td input[type="text"] { max-width: 140px; height: 56px; padding: 0 14px; font-size: 24px; border-radius: 10px; }
td .mini { min-height: 48px; }
/* Кнопка прямо в карточке (карточка — столбик) не растягивается на всю ширину; длинная подпись переносится. */
.card > .mini { align-self: flex-start; white-space: normal; text-align: left; }
table.wide { min-width: 860px; }
/* Подпись только для тех, кому экран читает программа: глазами в шапке таблицы она не нужна. */
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- переспрос и «Записано» поверх экрана ---------- */
.shade { position: fixed; inset: 0; z-index: 10; background: rgba(20, 32, 26, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.dialog { width: 100%; max-width: 560px; margin: auto; background: var(--surface); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.dialog .ask { font-size: 26px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dialog .more { white-space: pre-line; overflow-wrap: anywhere; }
.dialog .row > .btn { flex: 1 1 200px; }
.done { position: fixed; inset: 0; z-index: 20; background: var(--green); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }
.done-mark { width: 120px; height: 120px; border: 8px solid #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.done-mark::before { content: ""; width: 34px; height: 64px; margin-top: -12px; border: solid #FFFFFF; border-width: 0 12px 12px 0; transform: rotate(45deg); }
.done-text { font-size: 48px; font-weight: 700; line-height: 1.1; }
.done-sub { font-size: 24px; overflow-wrap: anywhere; }

.foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* ---------- телефон ---------- */
@media (max-width: 560px) {
  body { padding: 20px 12px 40px; }
  .card { padding: 18px; }
  .dialog { padding: 20px; }
  h1 { font-size: 30px; }
  .brand-name { font-size: 30px; }
  .date { font-size: 20px; }
  .action { min-height: 124px; padding: 20px; }
  .action-name { font-size: 26px; }
  .btn { font-size: 24px; }
  .done-text { font-size: 40px; }
  .tile { flex-basis: 130px; padding: 10px 12px; font-size: 20px; }   /* по две плитки в ряд */
  .tile.tall { flex-basis: 130px; }
}