/* Свой слой поверх дизайн-системы рег-сайта (assets/app.css вендорится вместе
   с пакетом). Здесь только то, чего в ней нет: плитки чисел, таблицы
   агрегатов, столбики и плашки свежести. Столбики — CSS, JS-библиотек на
   сайте нет вовсе. Цвета — брендовые токены :root из app.css. */

.page { max-width: 1100px; margin: 0 auto; padding: 16px; }

.screens { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1100px; margin: 12px auto 0; padding: 0 16px; }
.screens a {
    padding: 8px 16px; border-radius: 999px; text-decoration: none;
    background: #fff; border: 1px solid var(--line, #dadada); color: var(--ink, #111);
}
.screens a.is-active { background: #111; color: #fff; border-color: #111; }

.card { background: #fff; border: 1px solid var(--line, #dadada); border-radius: 14px; padding: 20px; margin: 16px 0; }
.card--narrow { max-width: 460px; margin: 48px auto; }
.card h1 { margin: 0 0 12px; font-size: 22px; }
.card h2 { margin: 0 0 12px; font-size: 18px; }

.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile {
    flex: 1 1 150px; min-width: 130px; padding: 14px 16px;
    border: 1px solid var(--line, #dadada); border-radius: 12px; background: #fbfbfc;
}
.tile b { display: block; font-size: 28px; line-height: 1.1; }
.tile span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted, #5a6572); }
.tile--accent { background: #111; color: #fff; border-color: #111; }
.tile--accent span { color: #dcdcdc; }
.tile--bad b { color: var(--brand, #ec4e4b); }

table.grid, table.bars { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th, table.grid td, table.bars th, table.bars td {
    padding: 7px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle;
}
table.grid thead th { font-size: 12px; text-transform: uppercase; color: var(--muted, #5a6572); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.is-bad { color: var(--brand, #ec4e4b); font-weight: 700; }
.bar-cell { width: 40%; }
.bar { display: block; height: 10px; border-radius: 999px; background: #56c4f2; min-width: 2px; }
table.bars .bar { background: #111; }

/* Свежесть: три уровня, каждый со своим цветом — отставание подписывается,
   а не скрывается. */
.freshness {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
    margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px;
    border: 1px solid var(--line, #dadada); background: #fff;
}
.freshness strong { font-weight: 700; }
.freshness span { color: var(--muted, #5a6572); }
.freshness--ok { border-color: #cfe9d8; background: #f3faf5; }
.freshness--warn { border-color: #f3dcae; background: #fdf7e9; }
.freshness--stale, .freshness--never { border-color: #f0c0bf; background: #fdf1f1; }
.freshness--stale strong { color: #d04344; }
.freshness-contact { color: var(--ink, #111) !important; }

.site-footer { max-width: 1100px; margin: 24px auto; padding: 0 16px 24px; font-size: 12px; color: var(--muted, #5a6572); }
.logout-form { display: flex; align-items: center; gap: 10px; }
.logout-form .who { font-size: 13px; color: var(--muted, #5a6572); }
.form { display: flex; flex-direction: column; gap: 8px; }
.form input[type=email] { padding: 10px 12px; border: 1px solid var(--line, #dadada); border-radius: 10px; font-size: 16px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; border: 1px solid #111; cursor: pointer; font-size: 15px; text-decoration: none; }
.btn-primary { background: #111; color: #fff; }
.btn-ghost { background: #fff; color: #111; padding: 7px 16px; font-size: 13px; }
.muted { color: var(--muted, #5a6572); font-size: 13px; }
.ok { color: #1a7f47; }
.err { color: #d04344; }

/* Широкие таблицы (письма входа — девять колонок) прокручиваются ВНУТРИ
   своей рамки: страница целиком по горизонтали ездить не должна, а обрезать
   колонки на телефоне нельзя — поддержка смотрит статистику как раз с
   телефона. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    .bar-cell { display: none; }
    table.grid { font-size: 13px; }
    .table-scroll table.grid { min-width: 520px; }
    .tile b { font-size: 22px; }
    .card { padding: 14px; }
    .page { padding: 10px; }
}

/* Диаграмма экрана «по дням». SVG считается на сервере (Screens::chart),
   здесь только оформление; JS-библиотек на сайте по-прежнему нет. */
.chart { margin: 0 0 20px; }
.chart:last-child { margin-bottom: 0; }
.chart figcaption { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
/* Пропорция фиксированная (viewBox 720×210), ширина по месту: тогда подписи
   осей масштабируются вместе с картинкой и не расползаются. Размер шрифта
   задан в единицах viewBox, поэтому на телефоне он поднимается — см. ниже. */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-size: 13px; color: var(--muted, #5a6572); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-grid { stroke: #eceef1; stroke-width: 1; }

/* Точные числа. Целиться в тонкий столбик мышью невозможно, поэтому наведение
   ловит полоса шириной в день, а числа выводятся строкой в шапке графика — на
   одном месте, а не всплывающей подсказкой рядом с курсором. На телефоне
   наведения нет вовсе: там точный источник — таблица под графиками. */
.chart-band { fill: #111111; fill-opacity: 0; }
.chart-col:hover .chart-band { fill-opacity: 0.05; }
.chart-readout { font-size: 11px; fill: var(--ink, #111); font-weight: 700; opacity: 0; pointer-events: none; }
.chart-col:hover .chart-readout { opacity: 1; }
.chart-tick { font-size: 9px; fill: var(--muted, #5a6572); }
.chart-tick--y { text-anchor: end; }
.chart-tick--x { text-anchor: middle; }

@media (max-width: 640px) {
    /* Ужимать график до ширины телефона нельзя: подписи дней слипаются.
       Он прокручивается внутри своей рамки — как широкие таблицы. */
    .chart svg { min-width: 520px; }
    .chart-tick { font-size: 12px; }
}