/* eat.kupus.me — дизайн-система, собранная в один файл.
   Источник: design/ (colors.css + typography.css + spacing.css + styles.css + local.css).
   Правки вносить там, затем: node tools/build-css.js */

:root {
  /* ── Kupus base palette ─────────────────────────────────────────
     Dark is the default scheme (the app is used outdoors, at night,
     in the hand). Light is a separate scheme, not an inversion.     */

  /* neutrals — slightly green-shifted graphite, so food photos read warm */
  --bg:        #0e1311;
  --bg-card:   #161d1a;
  --bg-btn:    #1f2925;
  --bg-sunken: #0a0e0c;
  --line:      #27332e;
  --line-soft: #1c2521;

  /* text */
  --fg:        #e9efec;
  --fg-dim:    #9aa8a2;
  --fg-faint:  #7f8d86;   /* 5.4:1 на --bg — вспомогательный, но читаемый */

  /* green — juicy, for dark surfaces */
  --accent:      #5ee08a;
  --accent-fg:   #05170c;
  --accent-soft: rgba(94, 224, 138, 0.14);
  --accent-line: rgba(94, 224, 138, 0.30);

  /* warn — warm, honest, not a red error */
  --warn:      #f2b061;
  --warn-fg:   #241505;
  --warn-soft: rgba(242, 176, 97, 0.13);

  /* red cabbage — fourth ink, a few drops only */
  --plum:      #c497e6;
  --plum-soft: rgba(196, 151, 230, 0.13);

  /* error (upload only) */
  --error:      #f08f7d;
  --error-soft: rgba(240, 143, 125, 0.12);

  /* leaf-vein texture: 2–4% contrast to its background */
  --veins: rgba(233, 239, 236, 0.035);

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.38);
  --shadow-cta:  0 6px 18px rgba(94, 224, 138, 0.18);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f4f6f4;
    --bg-card:   #ffffff;
    --bg-btn:    #e7ebe8;
    --bg-sunken: #eceeeb;
    --line:      #dbe2dd;
    --line-soft: #e6ebe7;

    --fg:        #101713;
    --fg-dim:    #58655e;
    --fg-faint:  #62706a;   /* 4.6:1 на --bg */

    /* green — deep, usable as text (4.5:1+) */
    --accent:      #147a45;
    --accent-fg:   #ffffff;
    --accent-soft: rgba(20, 122, 69, 0.10);
    --accent-line: rgba(20, 122, 69, 0.26);

    --warn:      #9a5a12;
    --warn-fg:   #ffffff;
    --warn-soft: rgba(154, 90, 18, 0.09);

    --plum:      #6b3f8f;
    --plum-soft: rgba(107, 63, 143, 0.09);

    --error:      #a33417;
    --error-soft: rgba(163, 52, 23, 0.08);

    --veins: rgba(16, 23, 19, 0.038);

    --shadow-card: 0 1px 2px rgba(16,23,19,0.05), 0 10px 28px rgba(16,23,19,0.07);
    --shadow-cta:  0 6px 18px rgba(20, 122, 69, 0.22);
  }
}

:root {
  /* One family, system stack: local, offline, and every member covers
     č ć š ž đ (SF Pro / Segoe UI / Roboto / Noto Sans all do).
     Two weights only: 400 and 650-ish (600 where the face has no 650). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* five text steps, nothing else */
  --t-dish:  28px;   /* dish name — largest text in the app */
  --t-head:  23px;   /* screen headings */
  --t-body:  16px;   /* body, secondary buttons */
  --t-num:   14px;   /* figures: kcal / macros / price */
  --t-cap:   13px;   /* captions, sub-labels, подписи вкладок */

  /* две кнопочные ступени: главное действие крупнее основного текста,
     иначе на 390px оно не читается как главное. Ступени текста не трогают. */
  --t-action:    19px;   /* .cta */
  --t-action-sm: 17px;   /* .cta--sm */

  --lh-tight: 1.18;
  --lh-body:  1.45;

  --w-reg: 400;
  --w-med: 600;
}

:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 40px;
  --s-8: 56px;

  --gutter: 20px;          /* screen side padding at 390px */
  --tap: 44px;             /* minimum finger target */
  --cta-h: 60px;           /* main action height (>=56) */
  --cta-sm-h: 52px;
  --tabbar-h: 56px;        /* нижнее меню, без safe-area */

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   eat.kupus.me — styles.css
   Pure CSS, no build. Tokens live in :root (tokens/*.css when used
   inside the design system; inline them into this file's top for the
   app if you ship a single stylesheet).
   Dark is default; light via prefers-color-scheme.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: var(--w-reg) var(--t-body)/var(--lh-body) var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a, .link { color: var(--accent); }
a:hover, .link:hover { color: var(--accent); opacity: .78; }

::selection { background: var(--accent-soft); }

/* ── Frame ──────────────────────────────────────────────────── */

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--safe-t) + var(--s-5))
    var(--gutter)
    calc(var(--safe-b) + var(--tabbar-h) + var(--s-5));
  max-width: 480px;
  margin: 0 auto;
}
.screen[hidden] { display: none; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  flex: 1;
  min-width: 0;
}

/* centred variant: the start screen and the done screen breathe.
   Верхнее меню остаётся сверху, а содержимое центрируется в остатке. */
.stack--center {
  justify-content: flex-start;
  align-items: stretch;
  text-align: center;
  gap: var(--s-6);
}
.stack--center > .topbar { margin-bottom: auto; }
.stack--center > :last-child { margin-bottom: auto; }

/* ── Верхнее меню ──────────────────────────────────────────────
   Стоит на всех экранах, прилипает к верху, тянется до края и держит
   safe-area. Внутри только логотип и вход — больше в нём ничего нет. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin:
    calc((var(--safe-t) + var(--s-5)) * -1)
    calc(var(--gutter) * -1)
    var(--s-2);
  padding: calc(var(--safe-t) + var(--s-2)) var(--gutter) var(--s-2);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

/* Логотип: знак 22px + eat.kupus.me. Кликабельный — ведёт на главную.
   Мишень 44px по высоте, отрицательный margin держит оптический край. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  margin-left: calc(var(--s-2) * -1);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: var(--t-num);
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s ease, opacity .12s ease;
}
.brand svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
.brand b { font-weight: var(--w-med); color: var(--fg); }
.brand:hover { color: var(--fg-dim); opacity: .78; }
.brand:active { opacity: .6; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Вход: человечек. Мишень 44px, круг 40px внутри. */
.avatar {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-right: -2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg-dim);
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.avatar > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-card);
}
.avatar svg { width: 20px; height: 20px; }
.avatar:hover { color: var(--fg); }
.avatar:active { transform: scale(.96); }
/* вошёл: зелёное кольцо и инициал вместо человечка */
.avatar--in { color: var(--accent); }
.avatar--in > span {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-size: var(--t-num);
  font-weight: var(--w-med);
}

/* ── Type ───────────────────────────────────────────────────── */

.h1, .h2 {
  margin: 0;
  font-weight: var(--w-med);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h1 { font-size: var(--t-dish); }
.h2 { font-size: var(--t-head); }

.sub {
  margin: 0;
  color: var(--fg-dim);
  font-size: var(--t-body);
  text-wrap: pretty;
  max-width: 34ch;
}
.stack--center .sub { margin-inline: auto; }

.label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--fg-dim);
  font-size: var(--t-cap);
  font-weight: var(--w-med);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* day-state line: present but quiet — must not fight the CTA */
.context {
  color: var(--fg-dim);
  font-size: var(--t-num);
  letter-spacing: 0.01em;
  min-height: 1.45em;
  text-wrap: pretty;
}
.context:empty { display: none; }

/* ── Buttons ────────────────────────────────────────────────── */

button, .cta, .btn, .goal, .chip, .place, .alt, .link, .ghost-link {
  font-family: inherit;
  font-variant-numeric: inherit;
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, label.cta, .place, .alt, .chip):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* main action — one per screen */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-h);
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--t-action);
  font-weight: var(--w-med);
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:active {
  transform: scale(.982);
  filter: brightness(.94);
  box-shadow: none;
}
.cta--sm {
  min-height: var(--cta-sm-h);
  font-size: var(--t-action-sm);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.cta[disabled], .cta:disabled {
  background: var(--bg-btn);
  color: var(--fg-faint);
  box-shadow: none;
  cursor: default;
  filter: none;
}

/* ordinary button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-btn);
  color: var(--fg);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.btn:hover { border-color: var(--fg-faint); }
.btn:active { transform: scale(.985); }

.btn--quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-dim);
  font-weight: var(--w-reg);
}
.btn--quiet:hover { color: var(--fg); background: var(--bg-btn); }

/* "I think I'm about to break" — warm, not a red alarm */
.btn--warn {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
  font-weight: var(--w-reg);
}
.btn--warn:hover { background: var(--warn-soft); border-color: var(--warn); }

.btn[disabled], .btn:disabled {
  color: var(--fg-faint);
  background: transparent;
  border-color: var(--line-soft);
  cursor: default;
}

/* text link */
.link {
  align-self: center;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--t-body);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link:hover { border-bottom-color: var(--accent-line); }
.link:active { opacity: .7; }

/* floating link pinned above the home indicator */
.ghost-link {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-b) + var(--tabbar-h) + var(--s-3));
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--fg-dim);
  font-size: var(--t-num);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.ghost-link:hover { color: var(--fg); }
.ghost-link[hidden] { display: none; }

/* ── Recommendation card — the answer ───────────────────────── */

.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0 var(--s-5) var(--s-5);
  /* no kupus motif here on purpose: the photo is the hero */
}

/* Photos are 233x233 menu cut-outs, often on white.
   A 4:3 window keeps more of the plate than 16:10, and a neutral mat
   plus a soft inner edge stops white backgrounds from bleeding out. */
.card__photo {
  display: block;
  width: calc(100% + var(--s-5) * 2);
  margin: 0 calc(var(--s-5) * -1) var(--s-4);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line-soft);
}
.card__photo[hidden] { display: none; }
.card__photo + .card__place { margin-top: 0; }

.card__place {
  margin-top: var(--s-5);
  color: var(--accent);
  font-size: var(--t-num);
  font-weight: var(--w-med);
  letter-spacing: 0.01em;
}

.card__dish {
  margin-top: var(--s-2);
  font-size: var(--t-dish);
  font-weight: var(--w-med);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;      /* names up to 30 chars stay on 2 tidy lines */
  hyphens: none;
}

.card__ru {
  margin-top: var(--s-2);
  color: var(--fg-dim);
  font-size: var(--t-body);
  text-wrap: pretty;       /* 64 chars = 2 lines, no orphan */
}
.card__ru:empty { display: none; }

/* figures: tabular, wraps predictably, separators stay attached */
.card__meta {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  color: var(--fg);
  font-size: var(--t-num);
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  text-wrap: pretty;
}

.card__why {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: var(--t-num);
  line-height: 1.5;
  text-wrap: pretty;
}

.card__detail {
  margin-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--fg-dim);
  font-size: var(--t-cap);
  line-height: 1.55;
}
.card__detail[hidden] { display: none; }
.card__detail > div {
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  text-wrap: pretty;
}

/* ── Actions under the card ─────────────────────────────────── */

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.actions .cta { margin-bottom: var(--s-1); }

/* ── Feed of alternatives — deliberately secondary ──────────── */

.feed {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.feed__title {
  color: var(--fg-faint);
  font-size: var(--t-cap);
  line-height: 1.45;
  margin-bottom: var(--s-2);
  text-wrap: pretty;
}
.feed__end {
  padding: var(--s-6) 0 var(--s-2);
  text-align: center;
  color: var(--fg-faint);
  font-size: var(--t-cap);
}
.feed__sentinel { height: 1px; }

.alt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 78px;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  color: var(--fg-dim);
  text-align: left;
  cursor: pointer;
}
.alt:hover { background: var(--bg-card); }
.alt:active { background: var(--bg-btn); }
.alt:last-of-type { border-bottom: 0; }

.alt__photo {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-sunken);
}
.alt__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alt__name {
  color: var(--fg);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alt__meta { font-size: var(--t-num); color: var(--fg-dim); }
.alt__place {
  font-size: var(--t-cap);
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Places ─────────────────────────────────────────────────── */

.places {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 66px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-dim);
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.place:hover { border-color: var(--line); background: var(--bg-card); }
.place:active { background: var(--bg-btn); }

.place__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.place__main > span:first-child {
  color: var(--fg-dim);
  font-size: var(--t-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.place__sub { font-size: var(--t-cap); color: var(--fg-faint); }
.place__walk {
  flex: 0 0 auto;
  font-size: var(--t-num);
  color: var(--fg-faint);
}

/* loaded menu: filled card + green marker on the left edge */
.place--ready {
  background: var(--bg-card);
  border-color: var(--line);
  padding-left: calc(var(--s-4) - 3px);
  border-left: 3px solid var(--accent);
}
.place--ready .place__main > span:first-child {
  color: var(--fg);
  font-weight: var(--w-med);
}
.place--ready .place__sub { color: var(--accent); }
.place--ready .place__walk { color: var(--fg-dim); }

/* ── Upload ─────────────────────────────────────────────────── */

.upload-status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: var(--t-num);
  line-height: 1.45;
  text-wrap: pretty;
}
.upload-status[hidden] { display: none; }

/* expanding kupus rings = work in progress */
.upload-status::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: kupus-rings 1.5s ease-out infinite;
}
.upload-status--error {
  background: var(--error-soft);
  color: var(--error);
}
.upload-status--error::before {
  animation: none;
  border-color: currentColor;
  border-style: solid;
  opacity: .55;
}

@keyframes kupus-rings {
  0%   { transform: scale(.35); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.dishes {
  display: flex;
  flex-direction: column;
}
.dish-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-body);
}
.dish-row:last-child { border-bottom: 0; }
.dish-row > span:first-child { min-width: 0; }
.dish-row__meta {
  flex: 0 0 auto;
  color: var(--fg-faint);
  font-size: var(--t-cap);
  white-space: nowrap;
}

/* ── Form / chips ───────────────────────────────────────────── */

.field { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-dim);
  font-size: var(--t-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.chip:hover { color: var(--fg); border-color: var(--fg-faint); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: var(--w-med);
}

/* ── Done ───────────────────────────────────────────────────── */

.done-mark {
  align-self: center;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-dish);
  line-height: 1;
}

/* ── Empty states (new) ─────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-4);
  text-align: center;
}
.empty svg { width: 96px; height: 96px; color: var(--accent); opacity: .8; }
.empty__title { font-size: var(--t-head); font-weight: var(--w-med); }
.empty__text { color: var(--fg-dim); font-size: var(--t-body); max-width: 30ch; text-wrap: pretty; }

/* the third empty state (stop-products / over budget) uses the plum ink */
.empty--blocked svg { color: var(--plum); }

/* ── Нижнее меню ───────────────────────────────────────────────
   Три вкладки, прибито к низу, держит safe-area. Активная — зелёная.
   Иконки линейные, 22px, currentColor: у «Что поесть» кольца среза —
   это ядро продукта, поэтому знак и вкладка совпадают. */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: var(--safe-b);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tabbar-h);
  padding: var(--s-2) var(--s-1);
  border: 0;
  background: none;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: var(--t-cap);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color .12s ease;
}
.tab svg { width: 22px; height: 22px; flex: 0 0 auto; }
.tab:hover { color: var(--fg); }
.tab:active { opacity: .65; }
.tab--on { color: var(--accent); font-weight: var(--w-med); }

/* ── Дневник еды ───────────────────────────────────────────────
   Журнал, не трекер: факты и цифры, ни прогресс-баров, ни оценок,
   ни серий. Пропущенный день просто отсутствует. */

.days { display: flex; flex-direction: column; gap: var(--s-6); }

.day { display: flex; flex-direction: column; gap: var(--s-1); }
.day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.day__date { font-size: var(--t-body); font-weight: var(--w-med); }
.day__sum { color: var(--fg-dim); font-size: var(--t-num); }
/* перебор бюджета — факт, а не ошибка: тёплый, не красный */
.day__sum--over { color: var(--warn); }

.entry {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.entry:last-child { border-bottom: 0; }
.entry__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entry__meal { color: var(--fg-faint); font-size: var(--t-cap); }
.entry__dish { font-size: var(--t-body); text-wrap: pretty; }
.entry__place { color: var(--fg-dim); font-size: var(--t-cap); }
.entry__num { flex: 0 0 auto; color: var(--fg-dim); font-size: var(--t-num); white-space: nowrap; }
/* строка про перекус или срыв — та же сухая интонация */
.entry__note { color: var(--warn); font-size: var(--t-cap); }

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Наши классы, которых нет в дизайн-системе.
 *
 * Отдельный файл не по прихоти: когда приходит новая поставка дизайна,
 * содержимое design/ заменяется целиком. В прошлый раз дописанное прямо
 * в app/styles.css именно так и потерялось. Здесь оно переживёт замену.
 *
 * Правило: сюда попадает только то, чего в брифе не было — экран входа
 * появился после него. Всё остальное берём из системы, ничего не
 * переопределяя. Язык тот же: те же токены, та же мишень, тот же фокус.
 */

/* ── Поля ввода ─────────────────────────────────────────────── */

.input {
  appearance: none;
  width: 100%;
  min-height: var(--cta-sm-h);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font: var(--w-reg) var(--t-body)/var(--lh-body) var(--font);
  transition: border-color .12s ease;
}

.input::placeholder { color: var(--fg-faint); }
.input:hover { border-color: var(--fg-faint); }
.input[hidden] { display: none; }

.input:focus-visible,
.input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent-line);
}

/* Код из письма: крупно и вразрядку — его вводят одной рукой, на улице. */
.input--code {
  font-size: var(--t-head);
  font-weight: var(--w-med);
  letter-spacing: .34em;
  text-indent: .34em;      /* компенсируем трекинг, чтобы центр был центром */
  text-align: center;
}

/* ── Список устройств ───────────────────────────────────────── */

.devices { display: flex; flex-direction: column; gap: var(--s-2); }

.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--t-cap);
  color: var(--fg-dim);
}

.device b { color: var(--fg); font-weight: var(--w-reg); font-size: var(--t-body); }

.device button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--fg-faint); font: inherit; font-size: var(--t-cap);
  min-height: var(--tap); padding: 0 var(--s-2);
}
.device button:hover { color: var(--warn); }
.device button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Две ветки экрана аккаунта — гость и вошедший. */
#account-guest, #account-member { display: flex; flex-direction: column; gap: var(--s-4); }
#account-member[hidden], #account-guest[hidden] { display: none; }