/* Стили Indicatory — перенесены из «Подходов» (Gym/src/index.css и ui.tsx)
   вместе с обоснованиями. Там Tailwind, здесь те же значения руками.

   ---------- палитра ----------
   Жёлтый акцент, тёмные подписи на нём: белым по жёлтому контраст 1,51 —
   нечитаемо, тёмным 11,75. Жёлтым только заливают. Писать и чертить им нельзя:
     --c-accent      заливает: кнопки, отметки, активные плашки;
     --c-accent-ink  пишет по заливке, всегда почти чёрный;
     --c-accent-text галочки, рамки и кольца выбранного — всё тонкое на фоне
                     страницы; на светлой теме темнее заливки;
     --c-link        ссылки и текстовые кнопки.
   Тем три: светлая, тёмная и «чёрная» — чистый чёрный, на котором пиксели OLED
   просто гаснут. Пока человек не выбрал ни одну, идём за настройкой телефона. */
:root {
  --c-bg: #101319;
  --c-surface: #1f242e;
  --c-surface2: #2a303c;
  --c-surface3: #353c4a;
  --c-line: #333a47;
  --c-ink: #eceef3;
  --c-muted: #98a1b2;
  --c-faint: #6d7688;

  --c-accent: #ffcc00;
  --c-accent-ink: #16181d;
  --c-accent-soft: rgba(255, 204, 0, 0.16);
  --c-accent-text: #ffcc00;
  --c-accent-line: color-mix(in srgb, var(--c-accent-text) 45%, transparent);
  --c-link: #7fb0ff;

  --c-danger: #ff6b6b;
  --c-danger-solid: #d23434;
  --c-ok: #3ddc97;
  --c-warn: #ffb020;

  /* Цвета графиков показателей: бирюзовый и розовый — из типов подходов. */
  --c-set-easy: #2ec4b6;
  --c-set-drop: #e0579b;
  --c-set-hard: #a77bff;

  --font-sans: ui-sans-serif, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --radius-card: 20px;
  --radius-tile: 16px;
  --fs: 1;

  color-scheme: dark;
}

/* «Чёрная»: фон чистый чёрный, остальное как в тёмной, только поверхности глубже. */
:root[data-theme='black'] {
  --c-bg: #000000;
  --c-surface: #101216;
  --c-surface2: #1a1d24;
  --c-surface3: #252932;
  --c-line: #23272f;
  --c-ink: #e9ebf0;
  --c-muted: #8b93a4;
  --c-faint: #646c7d;
  color-scheme: dark;
}

/* Светлая палитра записана дважды намеренно: для телефона, который сам говорит,
   что он на светлой теме, и для того, кто выбрал её вопреки телефону. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='black']) {
    --c-bg: #e8ecf2;
    --c-surface: #ffffff;
    --c-surface2: #f2f4f8;
    --c-surface3: #e7ebf1;
    --c-line: #e3e7ee;
    --c-ink: #16181d;
    --c-muted: #5f6676;
    --c-faint: #8b92a1;
    --c-link: #0b63ce;
    --c-accent-soft: rgba(255, 204, 0, 0.22);
    --c-accent-text: #a76a00;
    --c-accent-line: var(--c-accent-text);
    --c-ok: #0f7a4a;
    --c-danger: #c0392b;
    --c-warn: #a76a00;
    --c-set-easy: #0f8f84;
    --c-set-drop: #c2327a;
    --c-set-hard: #7c4ddb;
    color-scheme: light;
  }
}

:root[data-theme='light'] {
  --c-bg: #e8ecf2;
  --c-surface: #ffffff;
  --c-surface2: #f2f4f8;
  --c-surface3: #e7ebf1;
  --c-line: #e3e7ee;
  --c-ink: #16181d;
  --c-muted: #5f6676;
  --c-faint: #8b92a1;
  --c-link: #0b63ce;
  --c-accent-soft: rgba(255, 204, 0, 0.22);
  --c-accent-text: #a76a00;
  --c-accent-line: var(--c-accent-text);
  --c-ok: #0f7a4a;
  --c-danger: #c0392b;
  --c-warn: #a76a00;
  --c-set-easy: #0f8f84;
  --c-set-drop: #c2327a;
  --c-set-hard: #7c4ddb;
  color-scheme: light;
}

/* ПРАВКА 1 из «Подходов» (15.09.2026): серый текст едва заметный — основной
   цвет, чуть подмешанный к фону. Формула одна на все темы. */
:root:root:root:root {
  --c-muted: color-mix(in srgb, var(--c-ink) 86%, var(--c-bg));
  --c-faint: color-mix(in srgb, var(--c-ink) 76%, var(--c-bg));
}
/* ПРАВКА 2: яркие рамки в тёмной и «чёрной» — рамки карточек и полей
   сливались с фоном. Светлая не тронута. */
:root:root:root:root[data-theme='dark'] {
  --c-line: #5a6479;
  --c-surface2: #303746;
}
:root:root:root:root[data-theme='black'] {
  --c-line: #4d5566;
  --c-surface2: #242833;
}

/* ---------- база ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--c-line);
}
html,
body {
  height: 100%;
}
html {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
@media (display-mode: standalone) {
  html {
    height: 100lvh;
  }
}
html.ios-home {
  height: 100lvh;
}

/* Размеров текста шесть, как в «Подходах» (другие там не пропускает сборка):
     11 — мелкие подписи: меню внизу, метки, оси графиков;
     13 — второстепенное: даты, пояснения под строкой;
     15 — основной текст, пункты списков, кнопки;
     17 — заголовки окон, поля ввода, крупные цифры;
     20 — числа и заголовки, которые видно издалека;
     32 — название на входе.
   Каждый умножается на --fs — настройку «Размер текста». */
.t11 { font-size: calc(11px * var(--fs)); }
.t13 { font-size: calc(13px * var(--fs)); }
.t15 { font-size: calc(15px * var(--fs)); }
.t17 { font-size: calc(17px * var(--fs)); }
.t20 { font-size: calc(20px * var(--fs)); }
.t32 { font-size: calc(32px * var(--fs)); }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: calc(15px * var(--fs));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.18s ease, color 0.18s ease;
}
/* iPhone приближает страницу, если у поля ввода текст мельче 16px. */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: calc(17px * var(--fs));
  line-height: inherit;
  color: inherit;
  margin: 0;
}
button {
  font-size: inherit;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
a {
  color: var(--c-link);
  text-decoration: none;
}
h1, h2, h3, p {
  margin: 0;
  font-weight: inherit;
}
svg {
  display: block;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--c-muted); }
.faint { color: var(--c-faint); }
.ink { color: var(--c-ink); }
.danger { color: var(--c-danger); }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hidden { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

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

/* ---------- каркас: main по центру, вкладки внизу, на широком — слева ---------- */
.app {
  min-height: 100%;
  display: flex;
}
.aside {
  display: none;
}
.content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex-grow: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 12px 12px max(10rem, calc(var(--bottom-h, 0px) + 1rem));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
/* Полоса под строкой состояния телефона. */
.status-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--c-bg);
  pointer-events: none;
  height: env(safe-area-inset-top, 0px);
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}
.bottom-slot {
  max-width: 42rem;
  margin: 0 auto;
  padding: 24px 12px 8px;
  pointer-events: auto;
  background: linear-gradient(to top, var(--c-bg), var(--c-bg), transparent);
}
.bottom-slot:empty { display: none; }
.tabs {
  position: relative;
  pointer-events: auto;
  background: color-mix(in srgb, var(--c-bg) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs-row {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
}
.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 8px;
  color: var(--c-faint);
  transition: color 0.15s;
}
.tab.active { color: var(--c-ink); }
.tab .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 9999px;
  transition: background-color 0.15s;
}
/* Жёлтая плашка под значком говорит, что вкладка выбрана; сам значок остаётся
   обычного цвета — жёлтым его набрать нельзя. */
.tab.active .pill { background: var(--c-accent-soft); }
.tab .label {
  font-size: calc(11px * var(--fs));
  line-height: 1;
}

@media (min-width: 64rem) {
  .aside {
    display: flex;
    flex-direction: column;
    width: 15rem;
    flex-shrink: 0;
    border-right: 1px solid var(--c-line);
    padding: 24px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .aside .brand {
    padding: 0 12px;
    margin-bottom: 28px;
  }
  .aside nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .aside nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 12px;
    border-radius: 9999px;
    color: var(--c-muted);
    font-size: calc(15px * var(--fs));
    transition: color 0.15s, background-color 0.15s;
  }
  .aside nav a:hover {
    color: var(--c-ink);
    background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  }
  .aside nav a.active {
    background: var(--c-accent-soft);
    color: var(--c-ink);
    font-weight: 500;
  }
  .tabs { display: none; }
  .bottom-slot { max-width: none; padding-left: 15rem; }
  .bottom-slot > * { max-width: 42rem; margin: 0 auto; }
  main { padding-bottom: max(6rem, calc(var(--bottom-h, 0px) + 1rem)); }
}

/* ---------- компоненты из ui.tsx ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
}
.p-3\.5 { padding: 14px; }
.p-4 { padding: 16px; }
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 12px; }
.stack-4 > * + * { margin-top: 16px; }
.stack-5 > * + * { margin-top: 20px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-3 { gap: 12px; }
.grow { flex-grow: 1; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 9999px;
  font-size: calc(15px * var(--fs));
  transition: background-color 0.15s, color 0.15s, filter 0.15s;
  user-select: none;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-sm { height: 36px; padding: 0 16px; gap: 6px; }
.btn-block { width: 100%; }
.btn-primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { filter: brightness(0.95); }
/* ПРАВКА 3: неактивная главная кнопка нейтральная, без прозрачности. */
.btn-primary:disabled {
  background: var(--c-surface2);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-line);
  opacity: 1;
  filter: none;
}
.btn-secondary {
  background: var(--c-surface2);
  color: var(--c-ink);
}
.btn-secondary:hover, .btn-secondary:active { background: var(--c-surface3); }
.btn-outline {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}
.btn-outline:hover { background: var(--c-surface2); }
.btn-ghost { color: var(--c-muted); }
.btn-ghost:hover { color: var(--c-ink); background: var(--c-surface2); }
.btn-danger {
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  color: var(--c-danger);
}
.btn-danger:hover { background: color-mix(in srgb, var(--c-danger) 20%, transparent); }

.input,
.textarea {
  width: 100%;
  background: var(--c-surface2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tile);
  color: var(--c-ink);
  outline: none;
  transition: border-color 0.15s;
}
.input {
  height: 44px;
  padding: 0 14px;
}
.textarea {
  display: block;
  padding: 10px 14px;
  resize: none;
  min-height: 88px;
  line-height: 1.5;
}
.input::placeholder,
.textarea::placeholder { color: var(--c-faint); }
.input:focus,
.textarea:focus {
  border-color: color-mix(in srgb, var(--c-accent-text) 60%, transparent);
}

/* Ряд вариантов одной плашкой, выбранный залит акцентом — как в «Сколько ем». */
.seg {
  display: flex;
  background: var(--c-surface2);
  border: 1px solid var(--c-line);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
}
.seg button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.25;
  text-align: center;
  font-size: calc(13px * var(--fs));
  color: var(--c-muted);
  transition: background-color 0.15s, color 0.15s;
}
.seg button:hover { color: var(--c-ink); }
.seg button[aria-pressed='true'] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 600;
}

/* Выбираемая таблетка: показатель на графике, период. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: calc(15px * var(--fs));
  border: 1px solid var(--c-line);
  background: var(--c-surface2);
  color: var(--c-muted);
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
}
.chip:hover { color: var(--c-ink); }
.chip.active {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
  font-weight: 500;
}
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}
.chips .chip { flex-shrink: 0; }

/* Плитка показателя: подпись, число, пояснение. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tile {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  min-width: 0;
}
.tile .label {
  font-size: calc(13px * var(--fs));
  color: var(--c-muted);
}
.tile .value {
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  line-height: 1.25;
}
/* Единица мельче и может уйти на вторую строку: на телефоне три плитки в
   ряд, и «7 ч 40 мин» в одну строку не влезает. */
.tile .value .unit {
  font-size: calc(13px * var(--fs));
  font-weight: 400;
  color: var(--c-muted);
  white-space: nowrap;
}
.tile .sub {
  font-size: calc(13px * var(--fs));
  color: var(--c-faint);
  margin-top: 2px;
  line-height: 1.3;
}
/* Плитка внутри карточки дня: фон полей, а не карточки, чтобы отличалась. */
.card .tile { background: var(--c-surface2); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
}
.empty .icon { color: var(--c-faint); margin-bottom: 12px; }
.empty h3 {
  font-size: calc(17px * var(--fs));
  font-weight: 500;
}
.empty p {
  font-size: calc(15px * var(--fs));
  color: var(--c-muted);
  margin-top: 6px;
  max-width: 20rem;
  line-height: 1.625;
}

/* Кружки цветов темы — ряд из экрана «Цвета». */
.swatches {
  display: flex;
  gap: 10px;
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swatch.active {
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent-line);
}

/* Тумблер (Toggle из настроек «Подходов»). */
.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.toggle .knob {
  width: 46px;
  height: 28px;
  border-radius: 9999px;
  background: var(--c-surface3);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.15s;
}
.toggle .knob::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #fff;
  transition: transform 0.15s;
}
.toggle[aria-checked='true'] .knob { background: var(--c-accent); }
.toggle[aria-checked='true'] .knob::after { transform: translateX(18px); }

/* ---------- экраны ---------- */
.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
  margin-bottom: 8px;
}
.day-card .note-saved {
  font-size: calc(13px * var(--fs));
  color: var(--c-faint);
  height: 18px;
  padding: 0 4px;
}
details.raw > summary {
  list-style: none;
  cursor: pointer;
  font-size: calc(13px * var(--fs));
  color: var(--c-faint);
  padding: 4px;
}
details.raw > summary::-webkit-details-marker { display: none; }
details.raw pre {
  font-size: calc(11px * var(--fs));
  color: var(--c-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 24rem;
  overflow: auto;
  margin: 0;
  background: var(--c-surface2);
  border-radius: var(--radius-tile);
  padding: 10px 12px;
}
.more-btn {
  width: 100%;
  text-align: center;
  color: var(--c-muted);
  font-size: calc(13px * var(--fs));
  padding: 6px;
}
.more-btn:hover { color: var(--c-ink); }
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface2);
  border: 1px solid var(--c-line);
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: calc(13px * var(--fs));
  color: var(--c-muted);
}
.act b {
  font-weight: 500;
  color: var(--c-ink);
}
.chart {
  width: 100%;
  font-size: calc(11px * var(--fs));
}
.chart svg {
  width: 100%;
  height: auto;
}
.log {
  font-size: calc(13px * var(--fs));
  color: var(--c-muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 16rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sticky-head {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px));
  z-index: 10;
  background: var(--c-bg);
  padding: 4px 0 8px;
}

/* Вход — колонка по центру, как LoginPage. */
.login {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
  max-width: 24rem;
  margin: 0 auto;
}
.login .middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.login .title {
  font-size: calc(32px * var(--fs));
  font-weight: 600;
  letter-spacing: -0.025em;
}

.made-by {
  text-align: center;
  font-size: calc(11px * var(--fs));
  color: var(--c-faint);
  padding: 8px 0 16px;
}
.made-by a {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--c-line);
}
.made-by a:hover { color: var(--c-link); }

@keyframes pop {
  0% { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop { animation: pop 0.14s ease-out; }