/* Тема «редакционная» (15.10.2026), по мотивам стиля Officevibe с refero.design:
   кремовая бумага, заголовки с засечками (Literata), интерфейс на Inter, тёмно-синий и кобальт.
   Подключается после pico.min.css и app.css: app.css — раскладка, этот файл — внешний вид. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/vendor/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/vendor/fonts/literata-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/static/vendor/fonts/literata-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("/static/vendor/fonts/literata-cyrillic-wght-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("/static/vendor/fonts/literata-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Палитра */
:root {
  --ink: #0c1754;          /* заголовки, тёмные карточки */
  --cobalt: #2545ff;       /* действия, активные ссылки */
  --charcoal: #171417;     /* основной текст */
  --graphite: #3a3639;     /* вторичный текст */
  --stone: #7c776f;        /* подсказки, подписи (темнее #969696 ради читаемости) */
  --smoke: #e2dbd1;        /* рамки полей */
  --cream-border: #f0e9e1; /* линии, рамки карточек */
  --canvas: #f9f8f6;       /* фон страницы */
  --paper: #ffffff;        /* карточки */
  --lavender: #eaebf8;     /* бейджи, мягкие подложки */
  --ok: #1f7a4d; --ok-bg: #e5f2ea;
  --warn: #b25a00; --warn-bg: #fbf0e3;
  --bad: #b83227; --bad-bg: #fbe9e7;
  --fire: #D85A30; --fire-soft: #F0997B;
  --books: #7F77DD; --books-soft: #AFA9EC;
  --shadow-card: 0 4px 24px rgba(12, 23, 84, .08);
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Переменные Pico — тот же селектор, что у Pico, чтобы перебить его светлую тему */
:root:not([data-theme=dark]), [data-theme=light] {
  color-scheme: light;
  --pico-font-family: var(--sans);
  --pico-font-family-sans-serif: var(--sans);
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-background-color: var(--canvas);
  --pico-color: var(--charcoal);
  --pico-text-selection-color: rgba(37, 69, 255, .18);
  --pico-muted-color: var(--stone);
  --pico-muted-border-color: var(--cream-border);
  --pico-primary: var(--cobalt);
  --pico-primary-background: var(--cobalt);
  --pico-primary-border: var(--cobalt);
  --pico-primary-underline: rgba(37, 69, 255, .35);
  --pico-primary-hover: #1733d9;
  --pico-primary-hover-background: #1733d9;
  --pico-primary-hover-border: #1733d9;
  --pico-primary-hover-underline: #1733d9;
  --pico-primary-focus: rgba(37, 69, 255, .25);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--graphite);
  --pico-secondary-background: var(--ink);
  --pico-secondary-border: var(--smoke);
  --pico-secondary-underline: rgba(23, 20, 23, .3);
  --pico-secondary-hover: var(--charcoal);
  --pico-secondary-hover-background: var(--charcoal);
  --pico-secondary-hover-border: var(--stone);
  --pico-secondary-focus: rgba(12, 23, 84, .15);
  --pico-secondary-inverse: #fff;
  --pico-contrast: var(--ink);
  --pico-contrast-background: var(--ink);
  --pico-contrast-inverse: #fff;
  --pico-h1-color: var(--ink); --pico-h2-color: var(--ink); --pico-h3-color: var(--ink);
  --pico-h4-color: var(--ink); --pico-h5-color: var(--ink); --pico-h6-color: var(--ink);
  --pico-card-background-color: var(--paper);
  --pico-card-sectioning-background-color: var(--canvas);
  --pico-card-box-shadow: none;
  --pico-border-radius: 16px;
  --pico-form-element-background-color: var(--paper);
  --pico-form-element-selected-background-color: var(--lavender);
  --pico-form-element-border-color: var(--smoke);
  --pico-form-element-color: var(--charcoal);
  --pico-form-element-placeholder-color: var(--stone);
  --pico-form-element-active-background-color: var(--paper);
  --pico-form-element-active-border-color: var(--cobalt);
  --pico-form-element-focus-color: rgba(37, 69, 255, .2);
  --pico-form-element-invalid-border-color: var(--bad);
  --pico-form-element-valid-border-color: var(--smoke);
  --pico-switch-background-color: var(--smoke);
  --pico-switch-checked-background-color: var(--cobalt);
  --pico-table-border-color: var(--cream-border);
  --pico-table-row-stripped-background-color: var(--canvas);
  --pico-accordion-border-color: var(--cream-border);
  --pico-accordion-active-summary-color: var(--ink);
  --pico-accordion-open-summary-color: var(--ink);
  --pico-mark-background-color: var(--lavender);
  --pico-mark-color: var(--ink);
  --pico-code-background-color: var(--lavender);
  --pico-code-color: var(--ink);
}

html { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
main.container { padding-bottom: 5rem; }

/* Типографика: заголовки с засечками, интерфейс на Inter */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); line-height: 1.12; }
h3 { font-size: 1.4rem; line-height: 1.25; }
h1 em, h2 em, h3 em { font-style: italic; }
h4 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -.015em; line-height: 1.25; }
h5, h6 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.page-head { margin-bottom: 1.75rem; }
.page-head h1 { margin: 0; }
hgroup { margin-bottom: 1.75rem; }
hgroup > p:last-child { color: var(--stone); font-size: 1rem; }
hgroup > :not(:first-child):last-child { margin-top: .35rem; }
.eyebrow, a.dash-card-head .muted, .next-label, table thead th {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--stone);
}
.eyebrow { display: block; margin-bottom: .6rem; }
.muted { color: var(--stone); }
a { text-underline-offset: .2em; }
strong, b { font-weight: 600; }

/* Шапка: кремовая, без разделителя, вкладки-пилюли */
header.container { padding-top: 1.1rem; padding-bottom: .6rem; }
header nav { align-items: center; }
nav .brand strong { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); }
nav ul.tabs { gap: .15rem; }
nav ul.tabs a { padding: .45rem 1rem; border: 0; border-radius: 100px; color: var(--graphite); font-size: .92rem; font-weight: 500; transition: background .15s, color .15s; }
nav ul.tabs a:hover { background: var(--lavender); color: var(--ink); }
nav ul.tabs a.active { background: var(--cobalt); color: #fff; font-weight: 500; }
nav ul.tabs button { border-radius: 100px; border-color: var(--smoke); color: var(--graphite); background: transparent; margin-left: .35rem; }
nav ul.tabs button:hover { background: var(--paper); border-color: var(--stone); color: var(--charcoal); }
nav.subtabs { margin-top: .4rem; }
nav.subtabs ul { gap: .25rem; }
nav.subtabs a { padding: .35rem .95rem; border-radius: 100px; color: var(--graphite); font-weight: 500; font-size: .88rem; }
nav.subtabs a:hover { background: var(--paper); color: var(--ink); }
nav.subtabs a.active { background: var(--lavender); color: var(--ink); }

/* Кнопки: пилюли, без теней */
button, [role=button], input[type=submit], input[type=button] { border-radius: 100px; font-weight: 500; box-shadow: none !important; padding-left: 1.4rem; padding-right: 1.4rem; }
button.small, a[role=button].small { padding: .35rem .95rem; }
.secondary.outline, button.outline.secondary, [role=button].outline.secondary { color: var(--graphite); border-color: var(--smoke); background: transparent; }
.secondary.outline:hover, [role=button].outline.secondary:hover { color: var(--ink); border-color: var(--stone); background: var(--paper); }
button.secondary:not(.outline), [role=button].secondary:not(.outline) { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Поля ввода */
input:not([type=checkbox], [type=radio], [type=range]), select, textarea { border-radius: 12px; }
input[type=checkbox], input[type=radio] { border-color: var(--smoke); }
input[type=checkbox]:checked { background-color: var(--cobalt); border-color: var(--cobalt); }
label { color: var(--graphite); }
input[type=search] { border-radius: 100px; }

/* Карточки: белые, кремовая рамка, радиус 16 */
article, .kpi, a.tile, .plan-stage, .rings-hero { background: var(--paper); border: 1px solid var(--cream-border); border-radius: 16px; box-shadow: none; }
article { padding: 1.5rem 1.6rem; }
article > header, article > footer { background: transparent; border-color: var(--cream-border); }
details summary { color: var(--ink); }

/* KPI */
.kpi-grid { gap: 1rem; margin-bottom: 1.75rem; }
.kpi { padding: 1.1rem 1.25rem; }
.kpi .label { margin-bottom: .4rem; font-size: .8rem; font-weight: 500; color: var(--stone); line-height: 1.35; }
.kpi .value { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.kpi .value small { font-family: var(--sans); font-weight: 400; letter-spacing: 0; color: var(--stone); }
.kpi .value.accent { color: var(--cobalt); }
.kpi .delta { color: var(--stone); font-size: .82rem; margin-top: .4rem; }
.delta.up, .ok-text { color: var(--ok); }
.delta.down, .error { color: var(--bad); }
.warn-text { color: var(--warn); }

/* Вердикт FIRE — тёмная карточка */
article.verdict { background: var(--ink); color: #eef0ff; border: 0; border-radius: 16px; padding: 1.35rem 1.6rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.55; }

/* Сообщения */
article.flash { border: 0; border-radius: 12px; padding: .85rem 1.15rem; font-size: .95rem; }
article.flash.ok { background: var(--ok-bg); color: #164f33; }
article.flash.warn { background: var(--warn-bg); color: #6e3a00; }
article.flash.err { background: var(--bad-bg); color: #7c1f17; }
article.flash a { color: inherit; }

/* Прогресс */
.progress { height: 10px; border-radius: 5px; background: var(--cream-border); }
.progress .fill { border-radius: 5px; background: var(--cobalt); }
.progress .mark { background: var(--smoke); opacity: 1; width: 2px; }
.progress .mark.reached { background: var(--ink); }
.marks-labels { color: var(--stone); }

/* Таблицы */
table { --pico-background-color: transparent; }
table thead th { border-bottom: 1px solid var(--smoke); padding-top: .5rem; padding-bottom: .55rem; }
table td, table th { border-bottom-color: var(--cream-border); }
table tr.total td { border-top: 1px solid var(--smoke); color: var(--ink); }
table tfoot td { color: var(--ink); }
table tr.section td { background: var(--canvas); color: var(--ink); }
.table-wrap { background: var(--paper); border: 1px solid var(--cream-border); border-radius: 16px; padding: .35rem 1rem; margin-bottom: 1.5rem; }
.table-wrap table { margin-bottom: 0; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* Бейджи: мягкие подложки, тёмный текст того же тона */
.badge { background: var(--lavender); color: var(--ink); font-weight: 600; border-radius: 16px; padding: .12rem .5rem; }
.badge.fire { background: var(--ok-bg); color: var(--ok); }
.badge.nofire { background: #efebe5; color: #5f5a54; }
.badge.manual { background: var(--warn-bg); color: var(--warn); }
.badge.l100 { background: var(--lavender); color: var(--ink); }
.badge.l125 { background: #fbeee6; color: #993C1D; }
.pill { border-radius: 100px; }

/* Главная */
.tiles { gap: 1.25rem; }
a.tile { padding: 1.6rem 1.7rem; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.tile:hover { border-color: var(--cream-border); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tile-head { align-items: baseline; gap: .8rem; }
.tile-head h3 { font-size: 1.55rem; }
.tile-num { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--cobalt); }
.tile-value { font-family: var(--serif); font-weight: 500; font-size: 2.6rem; letter-spacing: -.03em; color: var(--ink); }
.tile-rings strong { font-family: var(--serif); font-weight: 500; color: var(--ink); }

/* Дашборд: тёмная шапка с кольцами, белые карточки с мягкой тенью */
.rings-hero { background: var(--ink); border-color: var(--ink); padding: 1.3rem 1.6rem; }
.rings-hero .ring-track { stroke: #fff; stroke-opacity: .12; }
ul.rings-legend a { color: #dfe2fb; }
ul.rings-legend .muted { color: #b9bde8; }
ul.rings-legend strong { font-family: var(--serif); font-weight: 500; color: #fff; letter-spacing: -.02em; }
ul.rings-legend .warn-text { color: #FAC775; }
ul.rings-legend .ok-text { color: #9FE1CB; }
.dash-cards { gap: 1.25rem; }
article.dash-card { padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); border-color: var(--cream-border); }
.dash-value .big { font-family: var(--serif); font-weight: 500; font-size: 2.9rem; letter-spacing: -.03em; }
.dash-value .delta { background: var(--lavender); color: var(--ink); font-size: .78rem; font-weight: 500; padding: .2rem .65rem; border-radius: 16px; }
.dash-value .delta.down { background: var(--bad-bg); color: var(--bad); }
.plan-mark { background: var(--ink); }
p.dash-status.ok { color: var(--ok); }
p.dash-status.warn { color: var(--warn); }

/* Книги */
nav.list-switch a { border-color: var(--smoke); border-radius: 100px; padding: .4rem 1rem; font-weight: 500; color: var(--graphite); background: transparent; }
nav.list-switch a:hover { background: var(--paper); }
nav.list-switch a.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }
nav.list-switch a.active .muted { color: #b9bde8; }
table.books .author { color: var(--stone); }
table.books tr.is-read td { background: #f4f5fe; }
table.books tr.is-read td.book .title { text-decoration-color: var(--cobalt); }
td.coef { font-weight: 600; }
td.coef.c10 { color: #1f7a4d; } td.coef.c12 { color: #4f7a1f; } td.coef.c14 { color: #8a7a00; }
td.coef.c16 { color: #b25a00; } td.coef.c18 { color: #b8451f; } td.coef.c20 { color: #b83227; }
td.file-none, td.file-gaps, td.file-part { color: var(--warn); }
button.link-btn { color: var(--cobalt); }
article.next-book { border: 1px solid var(--cream-border); border-radius: 16px; box-shadow: var(--shadow-card); }
article.next-book.is-overdue { border-color: #f3d6b5; }
.next-label { color: var(--books); }
h3.next-title { font-size: 1.7rem; }
.plan-stage { padding: .95rem 1.1rem; }
.pill.int-light { color: var(--ok); } .pill.int-medium { color: #8a6d00; } .pill.int-heavy { color: var(--bad); }

/* Вход и PIN */
.login-card { margin-top: 4rem; padding: 2rem 2.1rem; box-shadow: var(--shadow-card); }
.login-card hgroup h2 { font-size: 2.1rem; }

@media (max-width: 640px) {
  nav ul.tabs { flex-wrap: wrap; justify-content: flex-start; width: 100%; margin-right: 0; }
  nav ul.tabs a { padding: .4rem .65rem; font-size: .88rem; }
  nav ul.tabs button { margin-left: 0; padding: .3rem .8rem; font-size: .82rem; }
  article { padding: 1.15rem 1.2rem; }
  .kpi .value { font-size: 1.35rem; }
  .table-wrap { padding: .2rem .5rem; }
  .dash-value .big { font-size: 2.4rem; }
  .tile-value { font-size: 2.2rem; }
}

/* Здоровье: сон и восстановление */
.sleep-last-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.zone-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.zone-pill.green, .zones .z.green { background: #e1f5ee; color: #0f6e56; }
.zone-pill.yellow, .zones .z.yellow { background: #fbf0d9; color: #8a5a08; }
.zone-pill.red, .zones .z.red { background: #fbe4e0; color: #a3321f; }
.zones .z { display: inline-block; min-width: 1.6rem; margin-right: .25rem; padding: 0 .35rem; border-radius: 999px; text-align: center; font-weight: 500; }
.night-note { margin: .15rem 0 0; }
.night-note summary { cursor: pointer; }
.night-note small { display: block; max-width: 36rem; white-space: normal; color: var(--stone); }
.journal { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.journal-entry { background: var(--paper); border: 1px solid var(--cream-border); border-radius: 12px; padding: .7rem 1rem; }
.journal-entry summary { cursor: pointer; }
.journal-entry table { margin: .6rem 0 .2rem; }
.journal-entry p { margin: .4rem 0 0; }
.day-partial td { color: var(--stone); }
.tile-lines { list-style: none; padding: 0; margin: .6rem 0 0; }
.tile-lines li { list-style: none; margin: .15rem 0; color: var(--ink); }