/* Дизайн-система платформы. Тема: outdoor / sport / fitness.
 *
 * Единственный источник оформления: страницы и компоненты используют только
 * токены отсюда, без «сырых» значений цвета и размера. Смена темы — правка
 * токенов, разметку трогать не нужно (platform/PLAN.md, раздел 4.2).
 *
 * Палитра: хвойная зелень как основной акцент, тёплый камень для фона,
 * графит для текста. Функциональные цвета семантические и общие для всего
 * интерфейса: зелёный — норма, янтарный — внимание, терракота — проблема.
 */

:root {
  /* Основа */
  --c-bg:          #f4f1ea;   /* тёплый камень */
  --c-surface:     #fffdf9;
  --c-surface-alt: #eeeae1;
  --c-border:      #ddd6c9;
  --c-text:        #23282b;
  --c-text-dim:    #6b7176;

  /* Акцент: хвойная зелень */
  --c-accent:      #2f6b4f;
  --c-accent-dim:  #4f8c6c;
  --c-accent-soft: #e2ede6;

  /* Семантика состояний */
  --c-ok:          #2f6b4f;
  --c-ok-soft:     #dcefe2;
  --c-warn:        #b4720f;
  --c-warn-soft:   #fbeed3;
  --c-err:         #b23c2c;
  --c-err-soft:    #f9e2dd;

  /* Данные на графиках: держим здесь, чтобы светлая и тёмная темы совпадали
     по смыслу цвета, а не по случайному подбору в коде страницы. */
  --c-sleep-deep:  #23543f;
  --c-sleep-light: #6fa389;
  --c-sleep-rem:   #7d6ba8;
  --c-sleep-awake: #d9a689;
  --c-hr:          #b23c2c;
  --c-hrv:         #2f6b4f;
  --c-stress:      #c77b1a;
  --c-battery:     #4f8c6c;
  --c-steps:       #5b8ab0;
  --c-vo2:         #35607f;

  /* Типографика и метрика */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: 1.35rem;
  --fs-h2: 1.02rem;
  --fs-base: .95rem;
  --fs-sm: .86rem;
  --fs-xs: .8rem;

  --sp-1: .3rem;
  --sp-2: .6rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(35, 40, 43, .06), 0 4px 12px rgba(35, 40, 43, .04);
}

/* Тёмная тема: показания смотрят рано утром и поздно вечером.
   Переопределяем только цвета, метрика и типографика общие. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #14181a;
    --c-surface:     #1c2225;
    --c-surface-alt: #232a2e;
    --c-border:      #333c41;
    --c-text:        #e6e3dc;
    --c-text-dim:    #9aa3a8;

    --c-accent:      #6bb08c;
    --c-accent-dim:  #4f8c6c;
    --c-accent-soft: #1e2f27;

    --c-ok:          #6bb08c;
    --c-ok-soft:     #1e2f27;
    --c-warn:        #d99a3c;
    --c-warn-soft:   #33291a;
    --c-err:         #d9705e;
    --c-err-soft:    #33211e;

    --c-sleep-deep:  #3f7f61;
    --c-sleep-light: #8fbfa6;
    --c-sleep-rem:   #9b8ac4;
    --c-sleep-awake: #d9a689;
    --c-hr:          #d9705e;
    --c-hrv:         #6bb08c;
    --c-stress:      #d99a3c;
    --c-battery:     #6bb08c;
    --c-steps:       #7aa8cc;
    --c-vo2:         #5f96bb;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);
  }
}

/* --- База --- */
* { box-sizing: border-box; }

/* Место под вертикальную полосу прокрутки резервируется всегда: короткая страница
   (вход) и длинная (кабинет) иначе отличаются на ширину полосы, и центрированная
   колонка со шапкой сдвигается на ~15 px при каждом переходе. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  margin: 0;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.45;
}

/* Одна ширина рабочих страниц (графики, состав данных, кабинет): при переходе между
   разделами шапка и колонка стоят на месте (замечание заказчика 2026-09-03 —
   «при переключении всё прыгает»; раньше /data был шире на 100 px). */
.wrap, .wrap-wide { max-width: 1040px; margin: 0 auto; }

a { color: var(--c-accent); }

/* --- Шапка --- */
.head {
  /* По центру по вертикали: справа в шапке кнопки, а не текстовые ссылки,
     базовая линия их бы «уронила» относительно названия. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-border);
}
.head h1 {
  font-size: var(--fs-h1); margin: 0; letter-spacing: -.01em;
  /* Та же высота, что у ряда кнопок .nav (2.5rem): шапка одинаковой высоты и там,
     где навигации нет (вход), — бренд не подпрыгивает между страницами. */
  min-height: 2.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .4rem;
}
.head h1 .mark { color: var(--c-accent); }
.head-sub { font-weight: 400; color: var(--c-text-dim); font-size: var(--fs-h2); }

/* Навигация разделов: ряд кнопок-ссылок в ритме .btn; текущий раздел —
   мягкий акцентный фон. На узком экране ряд переносится. */
.nav { display: flex; align-items: center; justify-content: flex-end;
       gap: var(--sp-1); flex-wrap: wrap; }
.nav-btn {
  display: inline-flex; align-items: center; min-height: 2.2rem;
  padding: .35rem .75rem; font-size: var(--fs-sm);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text); text-decoration: none;
}
.nav-btn:hover { background: var(--c-accent-soft); border-color: var(--c-accent-dim); }
.nav-btn.active {
  background: var(--c-accent-soft); border-color: var(--c-accent-dim);
  color: var(--c-accent); font-weight: 600;
}

/* Круглая иконочная кнопка (выход в шапке): значок по центру, подпись —
   в aria-label и title, поэтому размер держим на цели нажатия. */
.btn-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; font: inherit;
  border: 1px solid var(--c-border); border-radius: 50%;
  background: var(--c-surface); color: var(--c-text); cursor: pointer;
}
.btn-round:hover { background: var(--c-accent-soft); border-color: var(--c-accent-dim); }
.btn-round svg { display: block; width: 1.1rem; height: 1.1rem; }
/* Палец вместо курсора: тач-цели не меньше 44×44 px (DESIGN.md, п. 4) */
@media (pointer: coarse) {
  .btn-round { width: 2.75rem; height: 2.75rem; }
  .nav-btn { min-height: 2.75rem; }
}

/* --- График в карточке --- */
/* Высота канваса известна до отрисовки (Chart.js рисует в обёртку с
   maintainAspectRatio: false): карточка не вырастает после загрузки данных,
   подвал не уезжает (аудит скачков 2026-09-03). */
:root { --chart-h: 22rem; }
.chart { position: relative; height: var(--chart-h); width: 100%; }
.chart canvas { display: block; }

/* --- Карточка --- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-bottom: var(--sp-3);
}
.card h2 {
  font-size: var(--fs-h2); margin: 0 0 var(--sp-2);
  color: var(--c-text); font-weight: 600;
}

/* --- Кнопки --- */
.btn, .daybar button {
  font: inherit; font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  padding: .35rem .75rem;
  cursor: pointer;
}
.btn:hover, .daybar button:hover {
  background: var(--c-accent-soft); border-color: var(--c-accent-dim);
}
.btn-primary, .daybar button.active {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.btn-primary:hover, .daybar button.active:hover {
  background: var(--c-accent-dim); border-color: var(--c-accent-dim); color: #fff;
}
.btn-danger { border-color: var(--c-err); color: var(--c-err); }
.btn-danger:hover { background: var(--c-err-soft); border-color: var(--c-err); }
button:disabled { opacity: .4; cursor: default; }
/* Ссылка-действие в виде кнопки (переходы из пустых состояний): та же кнопка,
   без подчёркивания и с центровкой подписи. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* --- Панели выбора периода --- */
.daybar { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); flex-wrap: wrap; }

input[type=date] {
  font: inherit; font-size: var(--fs-sm); padding: .3rem .5rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
}

/* --- Закладки --- */
.tabs {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-border); flex-wrap: wrap;
}
.tabs button {
  font: inherit; font-size: var(--fs-base);
  border: 1px solid var(--c-border); border-bottom: 2px solid transparent;
  background: var(--c-surface-alt); color: var(--c-text-dim);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: .45rem 1.05rem; cursor: pointer;
}
.tabs button:hover { color: var(--c-text); }
.tabs button.active {
  background: var(--c-surface); color: var(--c-accent); font-weight: 600;
  /* Наезд на линию — отрицательным нижним полем, а не top: 2px: ряд закладок не
     меняет высоту, когда JS навешивает .active (аудит скачков 2026-09-03). */
  margin-bottom: -2px; border-bottom-color: var(--c-surface);
}

/* --- Плашка состояния --- */
.live {
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3); border-left: 5px solid;
}
.live-ok    { background: var(--c-ok-soft);   border-color: var(--c-ok);   color: var(--c-ok); }
.live-warn  { background: var(--c-warn-soft); border-color: var(--c-warn); color: var(--c-warn); }
.live-error { background: var(--c-err-soft);  border-color: var(--c-err);  color: var(--c-err); }
.live b { font-size: var(--fs-base); }
.live-d { font-size: var(--fs-sm); margin-top: .25rem; opacity: .85; }
.live-p { margin: var(--sp-1) 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); }

/* --- Метки статуса --- */
.st { padding: .1rem .5rem; border-radius: 10px; font-size: var(--fs-xs); white-space: nowrap; }
.st-yes { background: var(--c-ok-soft);   color: var(--c-ok); }
.st-can { background: var(--c-accent-soft); color: var(--c-accent); }
.st-no  { background: var(--c-surface-alt); color: var(--c-text-dim); }

/* --- Таблица --- */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { border-bottom: 1px solid var(--c-border); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { color: var(--c-text-dim); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* overflow: auto, не hidden: широкая таблица (/data на телефоне) прокручивается
   внутри карточки, а не обрезается. position: sticky у th снят — внутри
   overflow-контейнера он не работал (аудит скачков 2026-09-03). */
.table-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.table-card th { background: var(--c-surface-alt); }
/* Длинный журнал (прогоны за 30 дней) — в рамке конечной высоты с прокруткой внутри;
   заголовок таблицы липнет к верху рамки (здесь sticky работает: рамка и есть
   прокручиваемый контейнер). */
.table-card.scroll { max-height: 24rem; overflow: auto; }
.table-card.scroll table { border-collapse: separate; border-spacing: 0; }
.table-card.scroll th { position: sticky; top: 0; z-index: 1; }
td.cat { font-weight: 600; color: var(--c-accent); white-space: nowrap; }

/* --- Мелочи --- */
/* Абзацы — одним ритмом от токена, а не UA-маргином 1em: первый зазор под шапкой
   одинаков на всех разделах (аудит скачков 2026-09-03). */
p { margin: 0 0 var(--sp-3); }
.hint { color: var(--c-text-dim); font-size: var(--fs-xs); margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); }
.sub { color: var(--c-text-dim); font-size: var(--fs-sm); }
.empty { color: var(--c-text-dim); text-align: center; padding: var(--sp-4) var(--sp-3); }

#tip {
  position: fixed; display: none; max-width: 300px;
  background: var(--c-text); color: var(--c-bg);
  padding: var(--sp-2) .7rem; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); pointer-events: none; z-index: 10; line-height: 1.35;
}

/* --- Подвал --- */
/* Компактный и симметричный (решение заказчика 2026-09-03): бренд по центру,
   три дисклеймера тремя равными колонками, одна строка реквизитов по центру.
   На телефоне колонки складываются в одну. */
.foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  line-height: 1.45;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.foot-brand { color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); }
.foot-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  width: 100%; text-align: left;
}
.foot-note { margin: 0; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-2); }
.foot-line > span + span::before { content: "·"; margin-right: var(--sp-2); }
.foot strong { color: var(--c-text); font-weight: 600; }

/* Узкий экран: сначала телефон */
@media (max-width: 640px) {
  body { padding: var(--sp-3) var(--sp-2); }
  .foot-notes { grid-template-columns: 1fr; gap: var(--sp-2); }
  :root { --chart-h: 15rem; }
  .tabs button { padding: .4rem .7rem; font-size: var(--fs-sm); }
  /* Шапка: подписи разделов остаются (иконки без подписей не читаются),
     но ряд компактнее и выравнивается по левому краю после переноса. */
  .nav { justify-content: flex-start; }
  .nav-btn { padding: .3rem .55rem; font-size: var(--fs-xs); }
}

/* --- Формы и вход (единый дизайн, platform/DESIGN.md, 2026-08-19) --- */
.wrap-narrow { max-width: 26rem; margin: 0 auto; }

.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--fs-sm); color: var(--c-text-dim); margin-bottom: var(--sp-1); }
.field input {
  /* Центровка текста: фиксированная высота + нулевой вертикальный паддинг —
     браузер центрирует однострочный input сам, без подгонки line-height. */
  width: 100%; height: 2.6rem; padding: 0 .75rem; font: inherit;
  line-height: normal; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.btn[disabled] { color: var(--c-text-dim); border-color: var(--c-border); background: var(--c-surface-alt); cursor: default; }

.btn:focus-visible, .field input:focus-visible, a:focus-visible,
.tabs button:focus-visible, .captcha-knob:focus-visible,
.nav-btn:focus-visible, .btn-round:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}

/* Капча: пазл-слайдер (шлюз перед формой входа) */
.captcha-stage {
  position: relative; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); overflow: hidden;
  /* Сцена ровно по картинке (320px) и по центру карточки: без этого рамка
     тянется на всю карточку и картинка стоит асимметрично. */
  max-width: 320px; margin: 0 auto;
}
.captcha-stage img { display: block; max-width: 100%; }
.captcha-piece { position: absolute; top: 0; left: 0; pointer-events: none; }
.captcha-track {
  /* Трек той же ширины и по той же оси, что сцена: слайдер 1:1 с картинкой */
  max-width: 320px; margin-left: auto; margin-right: auto;
  position: relative; height: 44px; margin-top: var(--sp-2);
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.captcha-knob {
  position: absolute; top: 0; left: 0; width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff; border: 0; border-radius: var(--radius-sm);
  cursor: grab; touch-action: none; font-size: 1.1rem;
}
.captcha-knob:active { cursor: grabbing; background: var(--c-accent-dim); }

/* Кнопка выхода в шапке (DESIGN.md: рабочая область, 2026-08-19;
   с 2026-09-03 — круглая иконочная .btn-round внутри этой формы) */
.nav-logout { display: inline-flex; margin: 0 0 0 var(--sp-1); }

/* Компактный подвал первого экрана (вход): симметрично, по центру
   (решение заказчика 2026-08-19; полные дисклеймеры — на страницах данных) */
.foot-compact {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  text-align: center; font-size: var(--fs-xs); color: var(--c-text-dim);
}
.foot-compact .foot-brand { display: block; color: var(--c-text); margin-bottom: var(--sp-1); }
.foot-compact a { color: inherit; }

/* --- Кабинет (Э3/Э4, DESIGN.md блок 3) --- */
.card h3 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-2); color: var(--c-text); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.kv dt { color: var(--c-text-dim); }
.kv dd { margin: 0; }
.field select {
  width: 100%; height: 2.6rem; padding: 0 .75rem; font: inherit; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.field select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.field.check label { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-base); color: var(--c-text); }
.field.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-accent); }
.field.check input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.field .hint { margin-top: .3rem; }
.reconnect { margin: var(--sp-3) 0; }
.reconnect summary { cursor: pointer; color: var(--c-accent); font-size: var(--fs-sm); }
.reconnect form { margin-top: var(--sp-3); }
.card .table-card { margin: 0 0 var(--sp-3); }                 /* таблица внутри карточки: воздух снизу */
.card .form-actions { margin: var(--sp-3) 0 var(--sp-2); }        /* ряд кнопок не прижимается к соседям */
.card .form-actions:first-child, .card .kv + .form-actions { margin-top: 0; }
.table-card.compact td, .table-card.compact th { padding: .35rem .6rem; font-size: var(--fs-sm); }
.wrap-cell { white-space: normal; word-break: break-word; max-width: 40rem; }
.form-actions .sub { align-self: center; }
/* Ряд кнопок пустого состояния — тот же .form-actions, но по центру блока */
.empty-cta { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; gap: .15rem; } .kv dt { margin-top: .5rem; } }

/* --- Панель периода и выбор дня (2026-09-03, TZ-UI поток B) --- */
/* Период задаётся длиной (сегментированный контрол) и концом (стрелки, «сегодня»,
   произвольные даты); суточные графики получают степпер дня `.daynav`. Всё — на
   токенах темы, тач-цели растут до 44 px на устройствах с пальцем. */
.period { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); position: relative; }
.period-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.period-nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.period-label { font-weight: 600; min-width: 13rem; text-align: center; padding: 0 var(--sp-1); }
.period-custom { font-size: var(--fs-sm); color: var(--c-text-dim); }
.period-field { display: inline-flex; align-items: center; gap: var(--sp-1); }
.period-check {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
  min-height: 2.2rem; cursor: pointer; color: var(--c-text);
}
.period-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--c-accent); }
.period-check:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Сегментированный контрол: кнопки в ритме .btn, активная — как .btn-primary */
.seg {
  display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--c-surface);
}
.seg button {
  font: inherit; font-size: var(--fs-sm); border: 0; border-right: 1px solid var(--c-border);
  background: transparent; color: var(--c-text); padding: .35rem .8rem; min-height: 2.2rem; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--c-accent-soft); }
.seg button.active { background: var(--c-accent); color: #fff; font-weight: 600; }
.seg button.active:hover { background: var(--c-accent-dim); }
.seg button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.period .btn, .daynav .btn { min-height: 2.2rem; min-width: 2.2rem; }
.period .btn:focus-visible, .daynav .btn:focus-visible, .daybar button:focus-visible,
.period input[type=date]:focus-visible, .daynav input[type=date]:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}

/* Индикатор загрузки: тонкая бегущая полоска под панелью периода */
.period::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--sp-2)); height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s;
}
.period.loading::after { opacity: 1; animation: period-load 1s linear infinite; }
@keyframes period-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .period.loading::after { animation: none; background-size: 100% 100%; } }

/* Степпер дня в карточке суточного графика */
.daynav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.daynav-label { font-weight: 600; min-width: 6.5rem; text-align: center; }
.daynav input[type=date] { margin-left: var(--sp-1); }
.daynav .daybar { width: 100%; margin: var(--sp-1) 0 0; }
.daybar button { min-height: 2.2rem; }

/* Графики периода кликабельны: клик по дню выбирает его для суточных графиков */
canvas.pickable { cursor: pointer; }

@media (pointer: coarse) {
  .seg button, .period .btn, .daynav .btn, .daybar button, .period-check,
  .period input[type=date], .daynav input[type=date] { min-height: 44px; }
  .period .btn, .daynav .btn { min-width: 44px; }
}
@media (max-width: 640px) {
  .period-label { min-width: 100%; order: -1; }
  .period-check { margin-left: 0; }
  .seg button { padding: .35rem .6rem; }
}