/* ============================================================================
   Стиль «Ретро»: html[data-style="retro"], только у админа (auth.js
   ADMIN_ONLY_STYLES). Тот же язык, что в Replify (app/retro.css): одноцветный
   ЖК-экран. Светлая тема: бледный экран и почти черные «чернила», темная:
   фосфор на темном экране. Акцент выбирает оттенок экрана: синий и изумрудный
   дают зеленый, кобальт синий, фиолетовый сиреневый, терракота янтарь.
   Выбранное инвертируется (заливка чернилами, текст цвета экрана).

   Только жесткие края: без скруглений, мягких теней и размытия. Карточки это
   окна с двойной рамкой и жесткой тенью, у кнопок срезаны угловые пиксели.
   Заголовки, числа, подписи моно-капсом и кнопки набраны пиксельным Tiny5
   (OFL, public/fonts), обычный текст остается обычным шрифтом.
   Пиксельные иконки: public/retro-icons.css (генерирует Replify,
   scripts/retro/pixel-icons.mjs --fuel), у svg класс ic-<имя>.
   Все правила под атрибутом: обычный стиль и стекло не меняются.
   ========================================================================== */

@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/tiny5-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/tiny5-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: 'Tiny5';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/tiny5-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;
}

/* ── Палитры: те же значения, что в Replify. --r*-ink-hsl это чернила тройкой
   HSL для --primary. Приглушенный текст это чернила, смешанные с экраном
   (≥ 4,5:1 на --v2-card2 во всех палитрах). ─────────────────────────────── */
:root[data-style="retro"] {
  --rl-bg: #C9D5A2; --rl-card: #D7E0B6; --rl-card2: #BDC994; --rl-card3: #AFBC85;
  --rl-ink: #1B2A12; --rl-ink-hsl: 98 40% 12%;
  --rd-bg: #0C130B; --rd-card: #131D11; --rd-card2: #1A2717; --rd-card3: #22321F;
  --rd-ink: #A3E08C; --rd-ink-hsl: 104 58% 71%;
}
:root[data-style="retro"][data-accent="emerald"] {
  --rl-bg: #B8D3C5; --rl-card: #C9E0D4; --rl-card2: #A6C4B5; --rl-card3: #97B7A7;
  --rl-ink: #0E2A21; --rl-ink-hsl: 161 50% 11%;
  --rd-bg: #091412; --rd-card: #0F1F1C; --rd-card2: #152A26; --rd-card3: #1C3530;
  --rd-ink: #83E2C5; --rd-ink-hsl: 162 62% 70%;
}
:root[data-style="retro"][data-accent="cobalt"] {
  --rl-bg: #BACBD6; --rl-card: #CBDAE3; --rl-card2: #A9BCCA; --rl-card3: #9AAFBF;
  --rl-ink: #0F2433; --rl-ink-hsl: 205 55% 13%;
  --rd-bg: #0A1019; --rd-card: #101926; --rd-card2: #162233; --rd-card3: #1D2B40;
  --rd-ink: #93C9FF; --rd-ink-hsl: 210 100% 79%;
}
:root[data-style="retro"][data-accent="violet"] {
  --rl-bg: #CCC4DA; --rl-card: #DAD3E6; --rl-card2: #BDB3CF; --rl-card3: #AFA4C3;
  --rl-ink: #22163A; --rl-ink-hsl: 260 45% 16%;
  --rd-bg: #110D19; --rd-card: #191425; --rd-card2: #211A31; --rd-card3: #2A213E;
  --rd-ink: #C9ADFF; --rd-ink-hsl: 260 100% 84%;
}
:root[data-style="retro"][data-accent="terracotta"] {
  --rl-bg: #E1CFA3; --rl-card: #EBDDB9; --rl-card2: #D4BF8F; --rl-card3: #C7B17F;
  --rl-ink: #35210A; --rl-ink-hsl: 32 68% 12%;
  --rd-bg: #140E06; --rd-card: #1E160A; --rd-card2: #29200F; --rd-card3: #342914;
  --rd-ink: #FFB84D; --rd-ink-hsl: 36 100% 65%;
}

/* ── Тема: светлая берет --rl-*, темная --rd-*. Цвета состояний: темные
   чернила на светлых экранах, яркий фосфор на темных. ───────────────────── */
:root[data-style="retro"] {
  --r-bg: var(--rl-bg); --r-card: var(--rl-card); --r-card2: var(--rl-card2); --r-card3: var(--rl-card3);
  --r-ink: var(--rl-ink); --r-ink-hsl: var(--rl-ink-hsl);
  --r-ok: #174A12; --r-warn: #5A3900; --r-err: #7A150C; --r-violet: #3E2A80;
  --r-drop: var(--r-ink);
  --r-grid: color-mix(in srgb, var(--r-ink) 5%, transparent);
}
:root[data-style="retro"][data-theme="dark"] {
  --r-bg: var(--rd-bg); --r-card: var(--rd-card); --r-card2: var(--rd-card2); --r-card3: var(--rd-card3);
  --r-ink: var(--rd-ink); --r-ink-hsl: var(--rd-ink-hsl);
  --r-ok: #8FE07C; --r-warn: #F2C14E; --r-err: #FF7B6B; --r-violet: #C9ADFF;
  --r-drop: color-mix(in srgb, var(--r-ink) 30%, transparent);
  --r-grid: color-mix(in srgb, var(--r-ink) 4%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-style="retro"]:not([data-theme="light"]) {
    --r-bg: var(--rd-bg); --r-card: var(--rd-card); --r-card2: var(--rd-card2); --r-card3: var(--rd-card3);
    --r-ink: var(--rd-ink); --r-ink-hsl: var(--rd-ink-hsl);
    --r-ok: #8FE07C; --r-warn: #F2C14E; --r-err: #FF7B6B; --r-violet: #C9ADFF;
    --r-drop: color-mix(in srgb, var(--r-ink) 30%, transparent);
    --r-grid: color-mix(in srgb, var(--r-ink) 4%, transparent);
  }
}

/* ── Токены приложения переведены на экран. Селектор повторяет темный, чтобы
   перебить темные блоки style.css в обеих темах. ─────────────────────────── */
:root[data-style="retro"],
:root[data-style="retro"][data-theme="dark"],
:root[data-style="retro"][data-accent]:not([data-theme="light"]) {
  --primary: var(--r-ink-hsl);
  --primary-fill: var(--r-ink-hsl);
  --v2-bg: var(--r-bg);
  --v2-bg1: var(--r-bg);
  --v2-card: var(--r-card);
  --v2-card2: var(--r-card2);
  --v2-card3: var(--r-card3);
  --v2-line: color-mix(in srgb, var(--r-ink) 28%, transparent);
  --v2-line2: color-mix(in srgb, var(--r-ink) 50%, transparent);
  --v2-fg: var(--r-ink);
  --v2-fg-dim: color-mix(in srgb, var(--r-ink) 88%, var(--r-bg));
  --v2-fg-muted: color-mix(in srgb, var(--r-ink) 80%, var(--r-bg));
  --v2-fg-faint: color-mix(in srgb, var(--r-ink) 80%, var(--r-bg));
  --v2-primary: var(--r-ink);
  --v2-primary-fill: var(--r-ink);
  --v2-primary-dim: color-mix(in srgb, var(--r-ink) 14%, transparent);
  --v2-ok: var(--r-ok); --v2-warn: var(--r-warn); --v2-err: var(--r-err);
  --v2-warn-ink: var(--r-warn); --v2-chip-warn: var(--r-warn); --v2-chip-err: var(--r-err);
  --v2-amber: var(--r-warn); --v2-amber-dim: color-mix(in srgb, var(--r-warn) 16%, transparent);
  --v2-violet: var(--r-violet); --v2-gold: var(--r-warn);
  --v2-shadow-card: 4px 4px 0 0 var(--r-drop);
  --v2-shadow-fab: 3px 3px 0 0 var(--r-drop);
  --r-pixel: 'Tiny5', var(--font-mono);
}

/* ── 1. Экран: ровный цвет и едва заметная пиксельная сетка ЖК. ──────────── */
:root[data-style="retro"] { background: var(--r-bg) !important; }
:root[data-style="retro"] body { background: transparent !important; color: var(--r-ink); overflow-x: clip; }
:root[data-style="retro"] {
  --r-screen:
    linear-gradient(var(--r-grid) 1px, transparent 1px) 0 0 / 3px 3px fixed,
    linear-gradient(90deg, var(--r-grid) 1px, transparent 1px) 0 0 / 3px 3px fixed,
    var(--r-bg);
}
:root[data-style="retro"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--r-screen);
}
:root[data-style="retro"] ::selection { background: var(--r-ink); color: var(--r-bg); }
/* Никаких скруглений: точки становятся пикселями, капсулы табличками. */
:root[data-style="retro"] *,
:root[data-style="retro"] *::before,
:root[data-style="retro"] *::after { border-radius: 0 !important; }

/* ── 2. Пиксельный шрифт: заголовки, числа-содержание, подписи моно-капсом.
   font-size-adjust держит x-высоту обычного шрифта, верстка не сдвигается. */
:root[data-style="retro"] :is(.display, .num, .amt, .kicker, .mono, h1, .sheet .head h2, .weekstrip button, .weekstrip button b, .qty b, .stepper input, .facts b, table.ing th, table.review th) {
  font-family: var(--r-pixel);
  font-weight: 400;
  font-size-adjust: ex-height 0.56;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: none;
}
:root[data-style="retro"] :is(.display, h1, .sheet .head h2) { text-transform: uppercase; letter-spacing: 0.03em; }
:root[data-style="retro"] svg.chart text { font-family: var(--r-pixel); }

/* ── 3. Шапка: экран с сеткой, под ней двойная линия. ──────────────────── */
:root[data-style="retro"] .hdr { background: var(--r-screen); border-bottom: 4px double var(--r-ink); }

/* ── 4. Вкладки снизу: ряд ячеек под двойной линией, выбранная инвертирована. */
:root[data-style="retro"] .tabs {
  background: var(--r-bg);
  border-top: 4px double var(--r-ink);
  justify-content: center;
  gap: 0;
}
:root[data-style="retro"] .tabs button {
  flex: 0 1 96px; min-width: 0; min-height: 46px;
  color: var(--r-ink);
  border: 2px solid transparent;
  transition: none;
}
:root[data-style="retro"] .tabs button:active { transform: translate(1px, 1px); }
:root[data-style="retro"] .tabs button.on { background: var(--r-ink); color: var(--r-bg); border-color: var(--r-ink); }
:root[data-style="retro"] .tabs svg { width: 24px; height: 24px; }
/* «+» окном с жесткой тенью, а не инверсией: рядом с выбранной вкладкой они не сливаются */
:root[data-style="retro"] .fab { border-radius: 0; background: var(--r-card); color: var(--r-ink); border: 2px solid var(--r-ink); box-shadow: 3px 3px 0 0 var(--r-drop); }
:root[data-style="retro"] .slotpick button { border-radius: 0; }
:root[data-style="retro"] .slotpick button.on { background: var(--r-ink); color: var(--r-bg); }

/* ── 5. Карточки: окна. Рамка чернилами, тонкая вторая линия внутри,
   жесткая тень. ─────────────────────────────────────────────────────────── */
:root[data-style="retro"] :is(.card:not(.inset), .meal, .hero, .cta, .buybar, .selbar, .expline, .login .card) {
  background: var(--r-card) !important;
  border: 2px solid var(--r-ink);
  box-shadow: inset 0 0 0 2px var(--r-card), inset 0 0 0 3px var(--r-ink), 4px 4px 0 0 var(--r-drop);
}
:root[data-style="retro"] .meal.done { background: var(--r-card2) !important; }
:root[data-style="retro"] .meal:active { transform: translate(1px, 1px); }
/* Карточка в карточке: простая вставка, одна тонкая линия, без тени. */
:root[data-style="retro"] :is(.card, .hero, .sheet) :is(.card, .meal) ,
:root[data-style="retro"] .card.inset {
  background: var(--r-card2) !important;
  border: 1px solid var(--v2-line2);
  box-shadow: none;
}
:root[data-style="retro"] :is(.meal-empty, .addmeal) { border: 2px dashed var(--r-ink); background: transparent; }
:root[data-style="retro"] .weekstrip button { background: var(--r-card); border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 0 var(--r-drop); color: var(--r-ink); }
:root[data-style="retro"] .weekstrip button.on { background: var(--r-ink); }
:root[data-style="retro"] .weekstrip button.on,
:root[data-style="retro"] .weekstrip button.on b { color: var(--r-bg); }
:root[data-style="retro"] :is(.cta-ic, .act-ic) { background: var(--r-ink); color: var(--r-bg); box-shadow: none; }
:root[data-style="retro"] .chip { border: 1px solid currentColor; background: transparent; }
:root[data-style="retro"] .bar { background: var(--r-card2); border: 1px solid var(--r-ink); height: 8px; }
:root[data-style="retro"] .bar i { background: var(--r-ink); }
:root[data-style="retro"] .bar i.plan {
  background: repeating-conic-gradient(var(--r-ink) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}

/* ── 6. Листы и окна поверх точечной вуали. ──────────────────────────────── */
:root[data-style="retro"] .modal {
  background: repeating-conic-gradient(color-mix(in srgb, var(--r-ink) 55%, transparent) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
:root[data-style="retro"] .sheet {
  background: var(--r-card);
  border: 2px solid var(--r-ink);
  box-shadow: inset 0 0 0 2px var(--r-card), inset 0 0 0 3px var(--r-ink), 6px 6px 0 0 var(--r-drop);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-style="retro"] .sheet .head { background: var(--r-card); }
:root[data-style="retro"] .sheet .foot { background: var(--r-card); border-top: 2px solid var(--r-ink); }
:root[data-style="retro"] .toast { background: var(--r-ink); color: var(--r-bg); box-shadow: 4px 4px 0 0 var(--r-drop); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── 7. Кнопки: срезанные угловые пиксели. Основные залиты чернилами,
   остальные это экран в рамке. ──────────────────────────────────────────── */
:root[data-style="retro"] :is(.btn:not(.ghost), .seg button.on) {
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  box-shadow: none;
  background-image: none;
  transition: none;
}
:root[data-style="retro"] .btn.primary {
  background: var(--r-ink);
  color: var(--r-bg);
  font-family: var(--r-pixel);
  font-weight: 400;
  font-size-adjust: ex-height 0.56;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: none;
}
:root[data-style="retro"] .btn:not(.primary):not(.ghost) {
  background: var(--r-card);
  border: 2px solid var(--r-ink);
  color: var(--r-ink);
}
:root[data-style="retro"] .btn.danger { color: var(--r-err); border-color: var(--r-err); }
:root[data-style="retro"] .btn:active:not(:disabled) { transform: translate(1px, 1px); }

/* ── 8. Сегменты и переключатель человека: полоса в рамке, выбранное
   инвертировано. ──────────────────────────────────────────────────────── */
:root[data-style="retro"] :is(.seg, .who-switch) {
  background: var(--r-card);
  border: 2px solid var(--r-ink);
  padding: 2px;
  box-shadow: none;
}
:root[data-style="retro"] :is(.seg button, .who-switch button) {
  font-family: var(--r-pixel);
  font-weight: 400;
  font-size-adjust: ex-height 0.56;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--r-ink);
  transition: none;
  -webkit-font-smoothing: none;
}
:root[data-style="retro"] :is(.seg button.on, .who-switch button.on, .filters button.on) {
  background: var(--r-ink);
  color: var(--r-bg);
  box-shadow: none;
}
:root[data-style="retro"] .filters button { background: var(--r-card); border: 2px solid var(--r-ink); color: var(--r-ink); }
:root[data-style="retro"] .whos .who { background: var(--r-card2); border: 1px solid var(--r-ink); }
:root[data-style="retro"] .whos .who + .who { box-shadow: none; }

/* ── 9. Кнопки-иконки и поля: квадраты в рамке. ────────────────────────── */
:root[data-style="retro"] .ib:not(.plain) {
  background: var(--r-card);
  border: 2px solid var(--r-ink);
  color: var(--r-ink);
  box-shadow: 2px 2px 0 0 var(--r-drop);
}
:root[data-style="retro"] .ib:active { transform: translate(1px, 1px); }
:root[data-style="retro"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .stepper) {
  background: var(--r-card);
  border: 2px solid var(--r-ink);
  box-shadow: none;
}
:root[data-style="retro"] .stepper input { border: 0; background: none; }
:root[data-style="retro"] input[type=checkbox] { accent-color: var(--r-ink); }

/* ── 10. Фокус: при нажатии без рамки, с клавиатуры пунктир чернилами. ──── */
:root[data-style="retro"] :focus:not(:focus-visible) { outline: none; }
:root[data-style="retro"] :is(a, button, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: 2px dashed var(--r-ink) !important;
  outline-offset: 2px;
  box-shadow: none;
}
:root[data-style="retro"] :is(.btn.primary, .tabs button.on, .seg button.on):focus-visible {
  outline-color: var(--r-bg) !important;
  outline-offset: -5px;
}

/* ── 11. Акценты показывают экран, который дает каждый (маленький ЖК в
   рамке), а не свой цвет. ─────────────────────────────────────────────── */
:root[data-style="retro"] #accSw button {
  background: var(--sw-bg) !important;
  border: 3px solid var(--sw-ink);
  color: var(--sw-ink);
  box-shadow: none !important;
}
:root[data-style="retro"] #accSw button.on { outline: 2px solid var(--r-ink); outline-offset: 2px; }
:root[data-style="retro"] #accSw [data-acc="default"] { --sw-bg: #C9D5A2; --sw-ink: #1B2A12; }
:root[data-style="retro"] #accSw [data-acc="emerald"] { --sw-bg: #B8D3C5; --sw-ink: #0E2A21; }
:root[data-style="retro"] #accSw [data-acc="cobalt"] { --sw-bg: #BACBD6; --sw-ink: #0F2433; }
:root[data-style="retro"] #accSw [data-acc="violet"] { --sw-bg: #CCC4DA; --sw-ink: #22163A; }
:root[data-style="retro"] #accSw [data-acc="terracotta"] { --sw-bg: #E1CFA3; --sw-ink: #35210A; }

/* ── 12. Иконки: частые стали пиксельными (retro-icons.css), остальные
   штрихи с квадратными концами, чтобы стояли рядом с ними. ──────────────── */
:root[data-style="retro"] svg { stroke-linecap: square; stroke-linejoin: miter; }

/* ── 13. Графики: ступеньки вместо сглаживания, растр вместо прозрачности.
   Геометрию строит app.js, когда стиль retro (isRetro): линия веса
   ступеньками (stepPath), под ней растр 25 %, точки квадратами, столбики
   без скруглений по целым пикселям; сегодняшний столбик шахматкой 50 % его
   цвета, неполный день точками 25 %, коридор нормы редким растром 12,5 %.
   Узоры rd50-* / rd25-ink / rd12-ok в скрытом svg.rdefs (app.js), цвет из
   токенов, поэтому тема и акцент меняют их без перерисовки. ─────────────── */
:root[data-style="retro"] svg.chart :is(path, line, rect) { shape-rendering: crispEdges; }
:root[data-style="retro"] svg.chart text {
  font-family: var(--r-pixel);
  font-weight: 400 !important;
  -webkit-font-smoothing: none;
}
:root[data-style="retro"] .ring svg circle { stroke-linecap: butt; shape-rendering: crispEdges; }
:root[data-style="retro"] .ring circle.trk { stroke: url(#rd25-ink); }
:root[data-style="retro"] .ring circle.plan { stroke: url(#rd50-ink); }

/* ── 14. Полосы: заливка чернилами, план и доли растром 2 px. Растры CSS:
   шахматка 50 % (repeating-conic 2x2) и точка на 2x2 (25 %). ─────────────── */
:root[data-style="retro"] {
  --r-d50: repeating-conic-gradient(var(--r-ink) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  --r-d25: conic-gradient(from 90deg at 1px 1px, var(--r-ink) 0 25%, transparent 0) 0 0 / 2px 2px;
}
:root[data-style="retro"] .mc.m-hi .bar i.plan { background: repeating-conic-gradient(var(--r-err) 0 25%, transparent 0 50%) 0 0 / 2px 2px; }
/* Доли БЖУ: на одноцветном экране различаются плотностью, а не цветом:
   белок сплошной, жиры шахматкой, углеводы точками; граница между долями. */
:root[data-style="retro"] .stack-bar { background: var(--r-card2); border: 1px solid var(--r-ink); height: 14px; }
:root[data-style="retro"] .stack-bar i + i { box-shadow: inset 1px 0 0 var(--r-ink); }
:root[data-style="retro"] :is(.stack-bar, .legend) i.s0 { background: var(--r-ink) !important; }
:root[data-style="retro"] :is(.stack-bar, .legend) i.s1 { background: var(--r-d50) !important; }
:root[data-style="retro"] :is(.stack-bar, .legend) i.s2 { background: var(--r-d25) !important; }
:root[data-style="retro"] .legend i { width: 10px; height: 10px; vertical-align: -1px; box-shadow: inset 0 0 0 1px var(--r-ink); }

/* ── 15. Плитки итогов: выбранная в двойной рамке, без полупрозрачной
   подложки. ───────────────────────────────────────────────────────────── */
:root[data-style="retro"] .tile { border: 1px solid var(--v2-line2); }
:root[data-style="retro"] button.tile.sel {
  background: var(--r-card);
  border-color: var(--r-ink);
  box-shadow: inset 0 0 0 1px var(--r-card), inset 0 0 0 2px var(--r-ink), 2px 2px 0 0 var(--r-drop);
  transition: none;
}

/* ── 16. Текст на заливке цвета экрана, а не белый (у темного экрана
   заливка светлая). Отметки квадратные. ───────────────────────────────── */
:root[data-style="retro"] :is(.check.on, .res.picked .add, .li.done .chk, .inv.picked .selbox, .me-ava) { color: var(--r-bg); }
:root[data-style="retro"] .me-ava { background: var(--r-ink); }
:root[data-style="retro"] .ib.on { background: var(--r-ink); color: var(--r-bg); }
:root[data-style="retro"] :is(.check, .li .chk, .selbox) { border-color: var(--r-ink); transition: none; }
:root[data-style="retro"] .full-apps img { box-shadow: 3px 3px 0 0 var(--r-drop); }

/* Выбор «кому» в рецепте: нажатый инвертирован, как выбранный сегмент */
:root[data-style="retro"] .btn.pick.on { background: var(--r-ink); color: var(--r-bg); }
/* «Да», открывший поля КБЖУ в «Своих продуктах»: в Tiny5 нет символа галочки, вместо него пиксельная галочка */
:root[data-style="retro"] .or-ask .btn[aria-pressed="true"]::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background-color: currentColor;
  -webkit-mask: var(--pi-check) center / 100% 100% no-repeat; mask: var(--pi-check) center / 100% 100% no-repeat;
}

/* «Только дневник» (2026-10-18): карточки первого вопроса нового дома окнами, выбранная инвертирована */
:root[data-style="retro"] .obmode button { border-radius: 0; border: 2px solid var(--r-ink); background: var(--r-card2); box-shadow: none; }
:root[data-style="retro"] .obmode button b { font-family: var(--r-pixel); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 400; }
:root[data-style="retro"] .obmode button.on { background: var(--r-ink); color: var(--r-bg); box-shadow: 3px 3px 0 0 var(--r-drop); }
:root[data-style="retro"] .obmode button.on span { color: var(--r-bg); }
/* «Не учитывать день» (2026-10-18): без полупрозрачности (на ЖК-экране только чернила и экран), исключенный день
   отмечен плашкой; тихая кнопка моно-капсом, крестик над столбиком в Итогах целыми пикселями */
:root[data-style="retro"] .hero.skipped :is(.hero-top, .macros3) { opacity: 1; }
:root[data-style="retro"] .skipday { font-family: var(--r-pixel); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 400; color: var(--v2-fg-muted); }
:root[data-style="retro"] svg.chart .skipmark { stroke: var(--v2-fg); stroke-width: 2; stroke-linecap: square; }


/* Широкий экран (2026-10-21): вкладки колонкой ячеек слева под двойной линией справа. */
@media (min-width: 640px) {
  :root[data-style="retro"] .tabs { border-top: 0; border-right: 4px double var(--r-ink); gap: 4px; }
  :root[data-style="retro"] .tabs button { flex: none; width: 52px; height: 48px; min-height: 48px; }
}