/* HealthCoach — личный дашборд в духе Apple Health. Контрасты пар измерены (DESIGN.md). */
:root {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --text: #000000;
  --text-2: #6C6C70;
  --text-2-bg: #5A5A5E;
  --line: #D1D1D6;
  --sleep: #5856D6;
  --heart: #D70015;
  --load: #C93400;
  --bp: #0066CC;
  --good: #1E7B34;
  --button: #4B49C6;
  --button-text: #FFFFFF;
  --deep: #3634A3;
  --core: #007AFF;
  --rem: #5AC8FA;
  --radius: 14px;
  --gap: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --text: #FFFFFF;
    --text-2: #C2C2C7;
    --text-2-bg: #C2C2C7;
    --line: #38383A;
    --sleep: #A29FFF;
    --heart: #FF6961;
    --load: #FF9F0A;
    --bp: #409CFF;
    --good: #30D158;
    --button: #5856D6;
    --deep: #5E5CE6;
    --core: #0A84FF;
    --rem: #64D2FF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.4 var(--font);
  font-variant-numeric: tabular-nums;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
::selection { background: color-mix(in srgb, var(--sleep) 30%, transparent); }
:focus-visible { outline: 3px solid var(--bp); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

/* Вход */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: 100%; max-width: 360px; }
.login h1 { font: 700 34px/1.15 var(--display); letter-spacing: -0.02em; margin: 0 0 8px; }
.login p { color: var(--text-2-bg); margin: 0 0 24px; }
button.primary {
  width: 100%; min-height: 50px; border: 0; border-radius: 12px;
  background: var(--button); color: var(--button-text); font: 600 17px var(--font); cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: default; }
button.primary:not(:disabled):active { transform: scale(0.99); }
.error { color: var(--heart) !important; margin-top: 16px !important; }

/* Каркас */
#app { max-width: 760px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
main:focus { outline: none; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.tabs button {
  flex: 1; max-width: 120px; min-height: 48px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-2); font: 600 12px var(--font);
}
.tabs svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-current="page"] { color: var(--sleep); }
@media (min-width: 900px) {
  #app { padding-top: 72px; padding-bottom: 48px; }
  .tabs { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); padding: 6px; }
  .tabs button { flex-direction: row; gap: 8px; max-width: 160px; font-size: 15px; }
  .tabs svg { width: 20px; height: 20px; }
}

header.page { padding: 24px 0 8px; }
header.page h1 { font: 700 34px/1.15 var(--display); letter-spacing: -0.02em; margin: 0; }
header.page p { margin: 4px 0 0; color: var(--text-2-bg); font-size: 15px; }
h2 { font: 700 22px/1.2 var(--display); letter-spacing: -0.01em; margin: 32px 0 10px; }

.panel { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.panel + .panel { margin-top: 12px; }
.muted { color: var(--text-2); }
.small { font-size: 15px; }
.caption { font-size: 13px; color: var(--text-2); }

/* Сегодня */
.ready { display: grid; gap: 4px; }
.ready .score { font: 700 76px/1 var(--display); letter-spacing: -0.03em; }
.ready .score small { font-size: 28px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.ready .zone { font: 600 20px/1.3 var(--display); }
.ready .decision { margin-top: 12px; font-size: 17px; }
.ready .decision b { font-weight: 600; }
.zone-Пик, .zone-Высокая { color: var(--good); }
.zone-Нормальная { color: var(--bp); }
.zone-Сниженная { color: var(--load); }
.zone-Восстановление { color: var(--heart); }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 10px 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; padding-top: 0; }
ul.plain li:last-child { padding-bottom: 0; }

.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; }
.metric .label { font: 600 15px var(--font); }
.metric .value { font: 600 28px/1.15 var(--display); margin-top: 6px; }
.metric .value small { font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.c-sleep { color: var(--sleep); } .c-heart { color: var(--heart); } .c-load { color: var(--load); } .c-bp { color: var(--bp); } .c-good { color: var(--good); }

/* Таблицы */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-weight: 600; color: var(--text-2); font-size: 13px; padding: 0 8px 8px 0; }
td { padding: 10px 8px 10px 0; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
td.num, th.num { text-align: right; padding-right: 0; padding-left: 8px; }

/* Графики */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--text-2); font: 12px var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .limit { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 4 4; }
/* Цвета серий — классами: CSP не пускает inline-стили, а var() в SVG-атрибутах ненадёжен. */
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.fill-deep, .bg-deep { fill: var(--deep); background: var(--deep); }
.fill-core, .bg-core { fill: var(--core); background: var(--core); }
.fill-rem, .bg-rem { fill: var(--rem); background: var(--rem); }
.fill-heart, .bg-heart { fill: var(--heart); background: var(--heart); }
.fill-bp, .bg-bp { fill: var(--bp); background: var(--bp); }
.fill-load, .bg-load { fill: var(--load); background: var(--load); }
.fill-good, .bg-good { fill: var(--good); background: var(--good); }
.stroke-heart { stroke: var(--heart); } .stroke-bp { stroke: var(--bp); } .stroke-load { stroke: var(--load); } .stroke-good { stroke: var(--good); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.state { padding: 48px 0; text-align: center; color: var(--text-2-bg); }
.state button { margin-top: 16px; max-width: 240px; }

/* Один авторский момент: число готовности проявляется после загрузки. */
@media (prefers-reduced-motion: no-preference) {
  .ready .score { animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
}