/* ====================================================================
 *  Оформление — по дизайн-системе Notion (getdesign.md → VoltAgent/
 *  awesome-design-md, design/DESIGN-notion.md), применено 24.10.2026.
 *  Из неё взято: тёплые серые, текст #37352f, шрифт Inter, пастельные
 *  метки (цвета тегов Notion), врезки с иконкой, карточки с тонкой рамкой
 *  без тени. Маркетинговая часть системы (синие шапки, фиолетовые
 *  кнопки-пилюли, иллюстрации) сознательно не берётся: это документ.
 *  Слой с компонентами — в конце файла, раздел «Notion».
 * ==================================================================== */

/* Inter (variable 400–700), Google Fonts, лицензия SIL OFL 1.1. Только нужные наборы: кириллица и латиница.
   Раздаём со своего сервера — без запросов к Google и без зависимости от того, открыт ли он из России. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-cyrillic.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: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f7f6f3;
  --ink: #37352f;
  --ink-soft: #5d5b54;
  --ink-faint: #787671;
  --line: #e9e7e3;
  --accent: #2383e2;
  --green: #2b7a3d;
  --amber: #b35a00;
  --red: #d44c47;
  --blue: #0b6bcb;
  --fresh: #6940a5;
  --shadow: 0 1px 2px rgba(15, 15, 15, .05);
  --radius: 10px;
  --max: 1240px;

  /* метки — цвета тегов Notion: фон и текст */
  --tag-gray-bg: #e3e2e0;   --tag-gray: #32302c;
  --tag-brown-bg: #eee0da;  --tag-brown: #64473a;
  --tag-orange-bg: #fadec9; --tag-orange: #8a4300;
  --tag-yellow-bg: #fdecc8; --tag-yellow: #7a5a00;
  --tag-green-bg: #dbeddb;  --tag-green: #1f6b33;
  --tag-blue-bg: #d3e5ef;   --tag-blue: #1f5d8a;
  --tag-purple-bg: #e8deee; --tag-purple: #5b3a8f;
  --tag-pink-bg: #f5e0e9;   --tag-pink: #8f2f5e;
  --tag-red-bg: #ffe2dd;    --tag-red: #a8322b;

  /* фоны врезок — светлее меток, как у блоков-callout в Notion */
  --co-gray: #f1f1ef;
  --co-yellow: #fbf3db;
  --co-green: #edf3ec;
  --co-blue: #e7f3f8;
  --co-purple: #f6f3f9;
  --co-red: #fdebec;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919;
    --bg-raised: #202020;
    --bg-sunken: #252525;
    --ink: #d4d4d4;
    --ink-soft: #a3a3a3;
    --ink-faint: #7f7f7f;
    --line: #2f2f2f;
    --accent: #529cca;
    --green: #6fc28a;
    --amber: #ffa344;
    --red: #ff7369;
    --blue: #6ab0de;
    --fresh: #b48ee8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);

    --tag-gray-bg: #373530;   --tag-gray: #d4d4d4;
    --tag-brown-bg: #4a3a33;  --tag-brown: #e3c2b2;
    --tag-orange-bg: #5c3b23; --tag-orange: #ffc08a;
    --tag-yellow-bg: #564328; --tag-yellow: #ffdc8a;
    --tag-green-bg: #2b4632;  --tag-green: #9fd8ad;
    --tag-blue-bg: #28456c;   --tag-blue: #a7cdf2;
    --tag-purple-bg: #492f64; --tag-purple: #d4bff5;
    --tag-pink-bg: #69314c;   --tag-pink: #f6b7d4;
    --tag-red-bg: #6e3630;    --tag-red: #ffb3aa;

    --co-gray: #252525;
    --co-yellow: #372e20;
    --co-green: #242b26;
    --co-blue: #1f282d;
    --co-purple: #2a2430;
    --co-red: #332523;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- hero ---------- */

.hero {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, var(--bg-sunken), var(--bg));
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
}
.lede { margin: 0 0 20px; max-width: 68ch; font-size: 18px; color: var(--ink-soft); }
.meta { margin: 0; font-size: 14px; color: var(--ink-faint); }

/* ---------- nav ---------- */

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tabs .wrap { display: flex; gap: 4px; overflow-x: auto; }
.tabs a {
  flex: none;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- sections ---------- */

section { padding: 56px 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }
h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.015em;
}
.section-note { margin: 0 0 26px; max-width: 74ch; color: var(--ink-soft); }

/* ---------- summary cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  padding: 20px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.01em; }
.card p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.accent-green { border-left-color: var(--green); }
.accent-amber { border-left-color: var(--amber); }
.accent-red { border-left-color: var(--red); }
.accent-blue { border-left-color: var(--blue); }

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 26px 26px;
  border-left: 2px solid var(--line);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink-faint);
  border: 2px solid var(--bg);
}
.timeline li.critical::before { background: var(--red); }
.timeline li.high::before { background: var(--amber); }
.timeline .t-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-bottom: 4px;
}
.timeline .t-date { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.timeline .t-country { font-weight: 600; }
.timeline p { margin: 0; color: var(--ink-soft); max-width: 78ch; }

/* ---------- controls ---------- */

.controls {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 22px;
  padding: 20px 22px;
  margin-bottom: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 820px) { .controls { grid-template-columns: 1fr; } }

.weights { display: grid; gap: 12px; align-content: start; }
.weight { display: grid; grid-template-columns: 1fr 132px 26px; gap: 12px; align-items: center; }
.weight label { font-size: 14px; color: var(--ink-soft); }
.weight output { font-size: 13px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.filters { display: grid; gap: 12px; align-content: start; }
.filters label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); }
.filters label.checkbox { display: flex; gap: 8px; align-items: center; }
select {
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- table ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
thead th {
  position: sticky; top: 0;
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
thead th:hover { color: var(--ink); }
thead th.num, td.num { text-align: center; }
thead th.sorted::after { content: " ↓"; color: var(--accent); }
thead th.sorted.asc::after { content: " ↑"; }

tbody tr.row { border-bottom: 1px solid var(--line); cursor: pointer; }
tbody tr.row:hover { background: var(--bg-sunken); }
tbody tr.open { background: var(--bg-sunken); }
td { padding: 13px 14px; vertical-align: middle; }
td.col-country { font-weight: 600; white-space: nowrap; }
td.col-country .flag { margin-right: 8px; }
td .sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-faint); }

.score {
  display: inline-block;
  min-width: 26px;
  padding: 2px 0;
  border-radius: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.s5 { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.s4 { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.s3 { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.s2 { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
.s1 { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
td.total .score { min-width: 42px; padding: 3px 8px; }

.yes { color: var(--green); font-weight: 600; }
.no { color: var(--ink-faint); }

/* expanded detail row */
tr.detail > td { padding: 0; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.detail-inner { padding: 6px 18px 26px; }
.detail-summary { margin: 0 0 20px; max-width: 84ch; color: var(--ink-soft); }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .pc { grid-template-columns: 1fr; } }
.pc h4 {
  margin: 0 0 10px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.pc .pros h4 { color: var(--green); }
.pc .cons h4 { color: var(--red); }
.pc ul { margin: 0; padding-left: 18px; }
.pc li { margin-bottom: 7px; color: var(--ink-soft); }
.facts {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.fact {
  padding: 11px 13px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.fact dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.fact dd { margin: 3px 0 0; font-size: 14px; }

/* ---------- birth ---------- */

.birth-list { display: grid; gap: 14px; }
.birth {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  padding: 20px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (max-width: 820px) { .birth { grid-template-columns: 1fr; gap: 14px; } }
.birth-head { display: flex; gap: 12px; align-items: flex-start; }
.rank {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
}
.birth.top .rank { background: var(--green); border-color: var(--green); color: #fff; }
.birth-name { font-weight: 700; line-height: 1.3; }
.birth-verdict { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.birth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.birth-grid dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.birth-grid dd { margin: 3px 0 0; font-size: 14px; }

/* ---------- сроки ---------- */

.deadline-banner {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  margin-bottom: 28px;
  background: color-mix(in srgb, var(--red) 8%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line));
  border-radius: var(--radius);
}
@media (max-width: 820px) { .deadline-banner { grid-template-columns: 1fr 1fr; } .dl-text { grid-column: 1 / -1; } }
.deadline-banner > div { display: flex; flex-direction: column; gap: 2px; }
.dl-num {
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.dl-label { font-size: 12px; color: var(--ink-soft); max-width: 20ch; }
.dl-text { font-size: 15px; color: var(--ink-soft); }
.dl-text strong { color: var(--ink); }

.timeline.weeks li { padding-bottom: 22px; }
.timeline.weeks li.now::before { background: var(--blue); }
.timeline.weeks li.good::before { background: var(--green); }
.timeline.weeks li.warn::before { background: var(--amber); }
.timeline.weeks li.bad::before { background: var(--red); width: 16px; height: 16px; left: -9px; }
.t-week {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.timeline.weeks li.bad .t-week { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); border-color: transparent; }
.timeline.weeks li.good .t-week { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border-color: transparent; }

#visa-table { min-width: 720px; }
#visa-table td { border-bottom: 1px solid var(--line); }

/* ---------- деньги ---------- */

.sub-head { margin: 38px 0 16px; font-size: 17px; letter-spacing: -.01em; }

.money-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 980px) {
  .money-top { grid-template-columns: repeat(3, 1fr); }
  .money-top .breakdown { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .money-top { grid-template-columns: 1fr; } }

.big-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

table.breakdown {
  min-width: 0;
  align-self: stretch;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
.breakdown td { padding: 9px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.breakdown tr:last-child td { border-bottom: 0; }
.breakdown td.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.breakdown tr.sum td { font-weight: 700; color: var(--ink); background: var(--bg-sunken); }

.callout {
  padding: 18px 22px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: var(--radius);
}
.callout p { margin: 0; max-width: 84ch; color: var(--ink-soft); }

#money-table { min-width: 860px; }
#money-table td { border-bottom: 1px solid var(--line); vertical-align: top; }
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.badge.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.badge.tight { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.badge.no { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
td.tax { color: var(--ink-soft); max-width: 34ch; }
td.tax.good { border-left: 3px solid var(--green); }
td.tax.mid { border-left: 3px solid var(--amber); }
td.tax.bad { border-left: 3px solid var(--red); }

.traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.trap {
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius);
}
.trap.critical { border-left-color: var(--red); }
.trap.high { border-left-color: var(--amber); }
.trap.good { border-left-color: var(--green); }
.trap h4 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.01em; }
.trap p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.trap p:last-child { margin-bottom: 0; }
.trap .fix { padding-top: 10px; border-top: 1px dashed var(--line); }
.trap .fix strong { color: var(--ink); }

/* ---------- misc ---------- */

.warn {
  padding: 22px 24px;
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--line));
  border-radius: var(--radius);
}
.warn h3 { margin: 0 0 10px; font-size: 16px; }
.warn p { margin: 0 0 10px; max-width: 82ch; color: var(--ink-soft); }
.warn p:last-child { margin-bottom: 0; }
.chip {
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 13px;
}
.warn-chip { background: color-mix(in srgb, var(--amber) 20%, transparent); }

.sources { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
@media (max-width: 820px) { .sources { columns: 1; } }
.sources li { break-inside: avoid; margin-bottom: 9px; font-size: 14px; }
.sources a { color: var(--blue); text-decoration: none; }
.sources a:hover { text-decoration: underline; }

footer { padding: 30px 0 50px; color: var(--ink-faint); font-size: 13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

.tight-callout { margin: 0 0 20px; }

/* ---------- две колонки «за/против» ---------- */

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 880px) { .cols-2 { grid-template-columns: 1fr; } }
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-bottom: 20px; }
.col-block {
  padding: 20px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.good-block { border-top-color: var(--green); }
.bad-block { border-top-color: var(--red); }
.mid-block { border-top-color: var(--amber); }
.col-block h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: -.01em; }
.good-block h3 { color: var(--green); }
.bad-block h3 { color: var(--red); }
.mid-block h3 { color: var(--amber); }
.col-block ul { margin: 0; padding-left: 18px; }
.col-block li { margin-bottom: 11px; font-size: 14px; color: var(--ink-soft); }
.col-block li:last-child { margin-bottom: 0; }
.col-block strong { color: var(--ink); }

.phase-when {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}
.cost-total { margin: 0 0 14px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.good-block .cost-total { color: var(--green); }
.bad-block .cost-total { color: var(--red); }
.mid-block .cost-total { color: var(--amber); }
.cost-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; }
.cost-table td { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.cost-table tr:last-child td { border-bottom: 0; }
.cost-table td.amount { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 600; padding-left: 14px; }
.cost-gets { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink); }

/* ---------- стратегии и США ---------- */

.strategy-tag {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.routes { display: grid; gap: 14px; }
.route {
  padding: 20px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.route.best { border-left-color: var(--green); }
.route.do-now { border-left-color: var(--blue); }
.route.maybe { border-left-color: var(--amber); }
.route.no { border-left-color: var(--line); opacity: .78; }
.route-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.route-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-right: 10px; }
.route-sub { font-size: 13px; color: var(--ink-faint); }
.route > p { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); max-width: 84ch; }
.route-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 0; padding-top: 14px; border-top: 1px dashed var(--line);
}
@media (max-width: 720px) { .route-grid { grid-template-columns: 1fr; } }
.route-grid dt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.route-grid dd { margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); }

.col-block .fix { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-soft); }
.col-block .fix strong { color: var(--ink); }
.col-block > p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.us-path {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 9px;
}
.us-path.best { border-left-color: var(--green); }
.us-path.good { border-left-color: var(--blue); }
.us-path.mid { border-left-color: var(--amber); }
.us-path-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.us-path p { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

.tool-callout { background: var(--bg-sunken); border-color: var(--line); margin-bottom: 16px; }
.tool-callout code { padding: 1px 5px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 5px; }
.tool-callout p + p { margin-top: 12px; }

/* ---------- страница США ---------- */

.cost-unit { font-size: 15px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.col-block .pc { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.col-block .pc h4 { margin: 0 0 8px; }
.col-block .pc ul { padding-left: 17px; }
.col-block .pc li { margin-bottom: 8px; font-size: 13.5px; }
@media (max-width: 720px) { .col-block .pc { grid-template-columns: 1fr; } }

.page-link {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin: 22px 0 0; padding: 18px 22px;
  background: color-mix(in srgb, var(--blue) 8%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: var(--radius);
}
.page-link a { color: var(--blue); font-weight: 600; text-decoration: none; }
.page-link a:hover { text-decoration: underline; }
.page-link span { color: var(--ink-soft); font-size: 14px; }

/* ---------- пошаговый план ---------- */

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.tag-norm { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.tag-official { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.tag-practice { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }

.stage {
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
}
.stage-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 12px; }
.stage-when {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.stage.bad .stage-when { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; color: var(--red); }
.stage.warn .stage-when { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: transparent; color: var(--amber); }
.stage.good .stage-when { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: transparent; color: var(--green); }
.stage h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.stage-lead { margin: 0 0 18px; max-width: 82ch; color: var(--ink-soft); }

.stage-items { margin: 0; padding: 0; list-style: none; }
.stage-items > li {
  padding: 13px 0 13px 18px;
  border-left: 2px solid var(--line);
  margin-bottom: 2px;
}
.stage.bad .stage-items > li { border-left-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.stage.warn .stage-items > li { border-left-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }
.stage.good .stage-items > li { border-left-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.item-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 5px; }
.item-what { font-weight: 600; font-size: 15px; }
.stage-items p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 84ch; }

.stage-risk {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 88ch;
}
.stage-risk strong { color: var(--ink); }

#plan-deadlines { max-width: 720px; }
#plan-deadlines .dl-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
#plan-deadlines tr.dl-bad .dl-date { color: var(--red); font-weight: 600; }
#plan-deadlines tr.dl-warn .dl-date { color: var(--amber); font-weight: 600; }
#plan-deadlines tr.dl-good .dl-date { color: var(--green); font-weight: 600; }

/* Три колонки, две из которых nowrap, не влезают в телефон: минимальная ширина
   таблицы получается больше вьюпорта, и горизонтально едет вся страница вместе
   со sticky-навигацией. На узком экране раскладываем строку в столбик. */
@media (max-width: 620px) {
  #plan-deadlines { max-width: none; }
  #plan-deadlines tbody,
  #plan-deadlines tr,
  #plan-deadlines td { display: block; }
  #plan-deadlines tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  #plan-deadlines tr:last-child { border-bottom: 0; }
  #plan-deadlines td { padding: 0; border-bottom: 0; }
  #plan-deadlines td.dl-date { white-space: normal; margin-bottom: 2px; }
  #plan-deadlines td.amount { text-align: left; margin-top: 4px; font-size: 13px; color: var(--ink-faint); }

  /* Та же беда у сравнения маршрутов: три колонки текста в 360px не живут.
     Заголовок строки — жирным, две колонки под ним. */
  #plan-consular-table thead, #plan-consular-table tr:first-child { display: none; }
  #plan-consular-table tbody,
  #plan-consular-table tr,
  #plan-consular-table td { display: block; }
  #plan-consular-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  #plan-consular-table tr:last-child { border-bottom: 0; }
  #plan-consular-table td { padding: 0; border-bottom: 0; }
  #plan-consular-table td.dl-date { font-weight: 600; margin-bottom: 6px; }
  #plan-consular-table td:nth-child(2)::before { content: 'Виза D: '; color: var(--ink-faint); }
  #plan-consular-table td:nth-child(3)::before { content: 'Изнутри: '; color: var(--ink-faint); }
  #plan-consular-table td:nth-child(3) { margin-top: 4px; }
}

/* ---------- route.html: маршрут по датам ---------- */

.keyfact, .answer {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin: 0 0 8px;
}
.keyfact { border-left: 4px solid var(--accent); }
.answer { border-left: 4px solid var(--green); }
.keyfact p, .answer p { margin: 0 0 12px; color: var(--ink-soft); max-width: 78ch; }
.keyfact p:last-child, .answer p:last-child { margin-bottom: 0; }
.keyfact-line { font-size: 19px; line-height: 1.5; color: var(--ink) !important; }
.answer-big {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--green) !important;
  margin-bottom: 14px !important;
}
.answer-cond {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 15px;
}

/* Шаг — две колонки: рельс с номером и тело. Рельс рисует вертикальную линию
   псевдоэлементом, поэтому у последнего шага её надо обрезать. */
#route-shift-table .dl-date { font-weight: 600; white-space: normal; }
/* Готовое письмо: моноширинный блок, из которого копируют целиком. */
.letter {
  margin: 0 0 22px;
  padding: 18px 20px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 82ch;
}
#route-shift-table tr.sh-ok .dl-date { color: var(--green); }
#route-shift-table tr.sh-warn .dl-date { color: var(--amber); }

/* Шаги — секции, но глобальное правило section (padding + border-bottom)
   рвёт вертикальную линию таймлайна на куски. Гасим его здесь. */
.rstep { display: grid; grid-template-columns: 52px 1fr; gap: 0 20px; padding: 0; border-bottom: 0; }
.rstep-rail { position: relative; display: flex; justify-content: center; }
.rstep-rail::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}
.rstep:first-child .rstep-rail::before { top: 22px; }
.rstep:last-child .rstep-rail::before { bottom: calc(100% - 22px); }
.rstep-num {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--line);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.rstep.lv-bad .rstep-num { border-color: var(--red); color: var(--red); }
.rstep.lv-warn .rstep-num { border-color: var(--amber); color: var(--amber); }
.rstep.lv-good .rstep-num { border-color: var(--green); color: var(--green); }

.rstep-body { padding: 0 0 34px; min-width: 0; }
.rstep:last-child .rstep-body { padding-bottom: 8px; }
.rstep-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 10px; }
.rstep-when {
  order: -1;
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.rstep.lv-bad .rstep-when { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: transparent; color: var(--red); }
.rstep.lv-warn .rstep-when { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: transparent; color: var(--amber); }
.rstep.lv-good .rstep-when { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: transparent; color: var(--green); }
.rstep-head h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.rstep-why { margin: 0 0 16px; max-width: 80ch; color: var(--ink-soft); }

.rstep-todo { margin: 0; padding: 0; list-style: none; }
.rstep-todo > li {
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--line);
  margin-bottom: 6px;
}
.rstep.lv-bad .rstep-todo > li { border-left-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.rstep.lv-warn .rstep-todo > li { border-left-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }
.rstep.lv-good .rstep-todo > li { border-left-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.rstep-what { font-weight: 600; }
.rstep-todo p { margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); max-width: 82ch; }

.rstep-warn {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-sunken);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 82ch;
}
.rstep-warn strong { color: var(--ink); }

/* Узкий экран: рельс съедает слишком много ширины у текста. */
@media (max-width: 620px) {
  .rstep { grid-template-columns: 36px 1fr; gap: 0 14px; }
  .rstep-num { width: 32px; height: 32px; font-size: 14px; border-width: 2px; }
  .rstep:first-child .rstep-rail::before { top: 16px; }
  .rstep:last-child .rstep-rail::before { bottom: calc(100% - 16px); }
  .rstep-head h3 { font-size: 19px; }
  .keyfact, .answer { padding: 18px 16px; }
  .keyfact-line { font-size: 17px; }
}

/* ---------- howto.html: карточки документов ---------- */

.docs { display: grid; gap: 12px; }
.doc {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 16px;
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.doc-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.doc-body { min-width: 0; }
/* Карточка без номера (роли помощников): иначе тело попадает в узкую
   колонку под цифру и текст рвётся по одной букве в строку. */
.doc-plain { grid-template-columns: 1fr; gap: 0; }
.doc-body h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.01em; }
.doc-body > p { margin: 0 0 10px; color: var(--ink-soft); max-width: 82ch; }
.doc-body > p:last-child { margin-bottom: 0; }

.doc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-faint); }
.doc-meta strong { color: var(--ink-soft); font-weight: 600; }
.doc-state {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-sunken);
  font-size: 12px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.doc.st-done { border-left-color: var(--green); }
.doc.st-done .doc-num, .doc.st-done .doc-state { color: var(--green); }
.doc.st-done .doc-state { background: color-mix(in srgb, var(--green) 14%, transparent); }
.doc.st-ask { border-left-color: var(--amber); }
.doc.st-ask .doc-num, .doc.st-ask .doc-state { color: var(--amber); }
.doc.st-ask .doc-state { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.doc.st-wait { border-left-color: var(--red); }
.doc.st-wait .doc-num, .doc.st-wait .doc-state { color: var(--red); }
.doc.st-wait .doc-state { background: color-mix(in srgb, var(--red) 12%, transparent); }
.doc.st-skip { opacity: .6; }

@media (max-width: 620px) {
  .doc { grid-template-columns: 30px 1fr; gap: 0 12px; padding: 14px 16px; }
  .doc-num { font-size: 18px; }
  .doc-body h3 { font-size: 16px; }
}

/* Страховка от горизонтального скролла: одна длинная неразрывная строка
   (URL, реквизит) не должна уводить вбок весь сайт. clip, а не hidden —
   hidden создаёт скролл-контейнер и ломает position: sticky у навигации. */
html { overflow-x: clip; }
body { overflow-wrap: break-word; }

/* ---------- метки «новое»: что поменялось с прошлой версии ----------
   Юзер просит видеть изменения сразу (24.10.2026). Метка — фиолетовая, чтобы
   не путать с янтарными предупреждениями и зелёным «решено». */
mark.fresh {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fresh);
  color: var(--bg-raised);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
.is-fresh { box-shadow: inset 4px 0 0 var(--fresh); }
section.is-fresh { padding-left: 20px; }
.card.is-fresh { box-shadow: 0 0 0 2px var(--fresh), var(--shadow); }
.tabs a.toc-fresh::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--fresh);
  vertical-align: 2px;
}
.news-list { margin: 0; padding-left: 20px; }
.news-list li { margin-bottom: 8px; color: var(--ink-soft); max-width: 84ch; }
.news-list a { color: var(--blue); }

/* ---------- свёрнутый блок (источники): заголовок — это и есть кнопка ---------- */
details.fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin: 0; display: inline; }
details.fold > summary::before {
  content: "▸";
  color: var(--ink-faint);
  font-size: 18px;
  transition: transform .15s ease;
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 18px; }
.fold-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-left: 4px;
}

/* ---------- План до отъезда (tasks.html) ----------
   Префикс tk- — чтобы не столкнуться с классами остальных страниц. */
.tk-me {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 28px 0 0; padding: 14px 18px;
  border: 2px solid var(--fresh); border-radius: var(--radius);
  background: color-mix(in srgb, var(--fresh) 8%, var(--bg-raised));
  font-size: 15px; color: var(--ink);
}
.tk-me-set { border-width: 1px; border-color: var(--line); background: var(--bg-raised); color: var(--ink-soft); }
#tk-top { padding-top: 22px; }
.tk-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px;
}
.tk-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; color: var(--ink-soft);
}
.tk-num { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-num small { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.tk-stat.is-late .tk-num { color: var(--red); }
.tk-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.tk-bar span { display: block; height: 100%; background: var(--green); border-radius: 99px; }

.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-raised); }
.tk-seg button {
  border: 0; background: none; padding: 7px 11px; font: inherit; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.tk-seg button + button { border-left: 1px solid var(--line); }
.tk-seg button.on { background: var(--accent); color: var(--bg-raised); }
.tk-btn {
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg-raised);
  border-radius: 10px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tk-btn.tk-quiet { background: none; color: var(--accent); }
.tk-add { margin-left: auto; }
.tk-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px;
  color: var(--blue); text-decoration: underline; cursor: pointer;
}
.tk-danger { color: var(--red); }

.tk-new {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px;
  padding: 14px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--bg-raised);
}
.tk-new[hidden] { display: none; }  /* display:flex выше перебивает атрибут hidden */
.tk-new input[name="title"] { flex: 1 1 260px; }
.tk-new input, .tk-new select, .tk-body input, .tk-body select, .tk-body textarea {
  font: inherit; font-size: 14.5px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
}

.tk-group { padding-top: 26px; }
.tk-group h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 20px; margin-bottom: 10px; }
.tk-gcount { font-size: 13px; font-weight: 600; color: var(--ink-faint); }

.tk-task {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; border-left: 4px solid var(--line);
}
.tk-task.st-doing { border-left-color: var(--blue); }
.tk-task.st-waiting { border-left-color: var(--amber); }
.tk-task.st-done { border-left-color: var(--green); }
.tk-task.st-done .tk-title, .tk-task.st-skip .tk-title { color: var(--ink-faint); }
.tk-task.st-skip .tk-title { text-decoration: line-through; }
.tk-task.is-open { box-shadow: var(--shadow); }

.tk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.tk-status {
  flex: none; font: inherit; font-size: 13px; font-weight: 600; border-radius: 99px;
  padding: 4px 8px; border: 1px solid var(--line); background: var(--bg-sunken); color: var(--ink-soft); cursor: pointer;
}
.tk-status.st-doing { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.tk-status.st-waiting { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.tk-status.st-done { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.tk-title {
  flex: 1 1 260px; text-align: left; border: 0; background: none; padding: 2px 0;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.tk-title::after { content: " ▾"; color: var(--ink-faint); font-weight: 400; }
.tk-task.is-open .tk-title::after { content: " ▴"; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip {
  font-size: 12.5px; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--bg-sunken); color: var(--ink-soft);
}
.tk-owner.own-anton { color: var(--blue); }
.tk-owner.own-tanya { color: var(--fresh); }
.due-late { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); font-weight: 600; }
.due-soon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); font-weight: 600; }
.due-none { color: var(--ink-faint); }
.tk-has { color: var(--ink-faint); }

.tk-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.tk-fields { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 6px; }
.tk-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-faint); }
.tk-inline { display: flex; align-items: center; gap: 8px; }
.tk-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tk-body textarea { display: block; width: 100%; resize: vertical; line-height: 1.5; }
.tk-saved { margin: 6px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--ink-faint); }
.tk-conflict {
  margin: 0 0 8px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent);
  font-size: 14px; color: var(--ink-soft);
}
.tk-conflict p { margin: 0 0 8px; }
.tk-conflict pre {
  white-space: pre-wrap; font: inherit; margin: 0 0 10px; padding: 8px 10px;
  background: var(--bg-raised); border-radius: 8px; max-height: 220px; overflow: auto;
}
.tk-conflict .tk-btn { margin-right: 6px; }
.tk-comments { margin-top: 18px; }
.tk-comments h4, .tk-filebox h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.tk-clist { list-style: none; margin: 0 0 10px; padding: 0; }
.tk-clist li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tk-chead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-faint); }
.tk-chead strong { color: var(--ink); }
.tk-chead .tk-link { font-size: 12px; color: var(--ink-faint); }
.tk-clist p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.tk-empty { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-faint); }
.tk-comments textarea { margin-bottom: 8px; }
.tk-foot {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint);
}
.tk-foot span { margin-right: auto; }
.tk-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: var(--shadow);
}
.tk-toast.bad { background: var(--red); color: #fff; }

@media (max-width: 720px) {
  .tk-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-add { margin-left: 0; }
  .tk-seg button { padding: 7px 9px; font-size: 13px; }
  .tk-title { flex-basis: 100%; order: -1; }
  .tk-fields label { flex: 1 1 140px; }
}

/* ---------- Вход (login.html) ---------- */
.lg-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.lg-wrap { width: 100%; max-width: 460px; padding: 24px 16px; }
.lg-card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 26px;
}
.lg-card h1 { margin: 6px 0 14px; font-size: 32px; }
.lg-lead { margin: 0 0 16px; color: var(--ink-soft); font-size: 15.5px; }
.lg-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.lg-buttons .tk-btn { flex: 1 1 140px; padding: 11px 16px; font-size: 16px; }
.lg-row { display: flex; gap: 10px; }
.lg-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 24px; letter-spacing: .3em; text-align: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.lg-small { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-faint); }
.lg-msg { margin: 14px 0 0; min-height: 1.3em; font-size: 14.5px; color: var(--ink-soft); }
.lg-msg.bad { color: var(--red); }
.lg-note { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ====================================================================
 *  Notion: компоненты (24.10.2026)
 *  Переопределяет старые правила выше — поэтому стоит в самом конце.
 * ==================================================================== */

/* ---------- типографика и ритм ---------- */
h1 { font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.25; font-weight: 650; letter-spacing: -.016em; margin-bottom: 10px; }
h3 { font-weight: 600; letter-spacing: -.008em; }
.hero { background: var(--bg); padding: 56px 0 34px; border-bottom: 0; }
.lede { font-size: 18px; line-height: 1.6; max-width: 66ch; }
.section-note { font-size: 16px; line-height: 1.65; max-width: 72ch; }
section { padding: 44px 0; }
.strategy-tag { color: var(--ink-faint); }
a { color: var(--blue); text-underline-offset: 2px; }
.meta a, .lede a, .section-note a { color: var(--blue); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- меню сайта сверху: одно и то же на всех страницах ---------- */
.tabs { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.tabs .wrap { gap: 2px; }
.tabs a { padding: 13px 12px; font-size: 14px; color: var(--ink-soft); border-bottom-width: 2px; }
.tabs a:hover { color: var(--ink); background: var(--bg-sunken); }
.tabs a.here { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* ---------- карточки: тонкая рамка без тени, цвет — точкой у заголовка ---------- */
.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.card h3 { font-size: 16.5px; line-height: 1.35; margin-bottom: 8px; }
.card h3::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0;
  border-radius: 2px; background: var(--dot, var(--ink-faint)); vertical-align: middle;
}
.card p { font-size: 16px; line-height: 1.6; }
.accent-green { --dot: var(--green); border-left-color: var(--line); }
.accent-amber { --dot: var(--amber); border-left-color: var(--line); }
.accent-red { --dot: var(--red); border-left-color: var(--line); }
.accent-blue { --dot: var(--blue); border-left-color: var(--line); }
.card.is-fresh { box-shadow: 0 0 0 2px var(--fresh); }

.col-block { border-radius: var(--radius); box-shadow: none; border-top-width: 1px; }
.col-block li { font-size: 16px; line-height: 1.6; }
.col-block > p { font-size: 15.5px; }
.good-block h3 { color: var(--tag-green); }
.bad-block h3 { color: var(--tag-red); }

/* ---------- таблицы: заголовки как у баз Notion ---------- */
table { font-size: 15px; }
thead th {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-faint); background: var(--bg-sunken);
}
td { font-size: 15px; line-height: 1.55; }
td .sub { font-size: 12.5px; }
table.breakdown td { font-size: 15.5px; }

/* ---------- пастельные метки ---------- */
.tag, .badge, .rstep-when, .t-week, .tk-chip, .tk-status, mark.fresh {
  border: 0; border-radius: 4px; font-weight: 500; letter-spacing: 0;
}
.tag-norm, .badge.ok { background: var(--tag-green-bg); color: var(--tag-green); }
.tag-official { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag-practice, .badge.tight { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.badge.no { background: var(--tag-red-bg); color: var(--tag-red); }
mark.fresh {
  background: var(--tag-purple-bg); color: var(--tag-purple); font-weight: 600;
  padding: 1px 7px; font-size: 12px;
}
.is-fresh { box-shadow: inset 3px 0 0 var(--fresh); }
.tabs a.toc-fresh::after, .toc a.toc-fresh::after { background: var(--fresh); }

/* даты шагов маршрута — меткой по смыслу шага */
.rstep-when { padding: 2px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.rstep.lv-good .rstep-when { background: var(--tag-green-bg); color: var(--tag-green); }
.rstep.lv-warn .rstep-when { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.rstep.lv-bad .rstep-when { background: var(--tag-red-bg); color: var(--tag-red); }
.rstep-why { font-size: 16.5px; line-height: 1.65; }
.rstep-what { font-size: 16.5px; }
.rstep-todo p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.rstep-todo > li { border-left-width: 2px; }

/* «План до отъезда»: статусы и сроки — метки Notion */
.tk-status { padding: 3px 8px; background: var(--tag-gray-bg); color: var(--tag-gray); }
.tk-status.st-doing { background: var(--tag-blue-bg); color: var(--tag-blue); border: 0; }
.tk-status.st-waiting { background: var(--tag-yellow-bg); color: var(--tag-yellow); border: 0; }
.tk-status.st-done { background: var(--tag-green-bg); color: var(--tag-green); border: 0; }
.tk-status.st-skip { background: var(--tag-gray-bg); color: var(--ink-faint); }
.tk-chip { background: var(--tag-gray-bg); color: var(--tag-gray); font-size: 13px; }
.tk-owner.own-anton { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tk-owner.own-tanya { background: var(--tag-pink-bg); color: var(--tag-pink); }
.due-late { background: var(--tag-red-bg); color: var(--tag-red); }
.due-soon { background: var(--tag-orange-bg); color: var(--tag-orange); }
.due-none, .due-closed, .tk-has { background: transparent; color: var(--ink-faint); padding-left: 0; padding-right: 0; }
.tk-task { border-left: 1px solid var(--line); box-shadow: none; }
.tk-task.st-doing { border-left: 3px solid var(--tag-blue-bg); }
.tk-task.st-waiting { border-left: 3px solid var(--tag-yellow-bg); }
.tk-task.st-done { border-left: 3px solid var(--tag-green-bg); }
.tk-task.is-open { box-shadow: 0 2px 10px rgba(15, 15, 15, .06); }
.tk-title { font-size: 16px; }
.tk-btn { border-radius: 6px; background: var(--accent); border-color: var(--accent); }
.tk-btn.tk-quiet { background: transparent; color: var(--accent); }
.tk-seg { border-radius: 6px; }
.tk-seg button.on { background: var(--tag-gray-bg); color: var(--ink); font-weight: 600; }
.tk-stat { box-shadow: none; }

/* ---------- врезки с иконкой, как блоки-callout в Notion ---------- */
.callout, .warn, .rstep-warn, .keyfact, .answer, .col-block .fix, .tk-conflict {
  position: relative;
  padding: 16px 18px 16px 52px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  background: var(--co, var(--co-gray));
}
.callout::before, .warn::before, .rstep-warn::before, .keyfact::before, .answer::before,
.col-block .fix::before, .tk-conflict::before {
  content: var(--co-icon, "💡");
  position: absolute; left: 18px; top: 15px;
  font-size: 19px; line-height: 1.3;
}
.callout { --co: var(--co-gray); --co-icon: "💡"; }
.warn, .rstep-warn, .tk-conflict { --co: var(--co-yellow); --co-icon: "⚠️"; }
.keyfact { --co: var(--co-blue); --co-icon: "📌"; }
.answer { --co: var(--co-green); --co-icon: "✅"; }
.col-block .fix { --co: var(--co-gray); --co-icon: "👉"; margin-top: 14px; border-top: 0; }
.callout p, .warn p, .keyfact p, .answer p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.rstep-warn { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.keyfact-line { font-size: 18px; }

/* ---------- оглавление сбоку (toc.js) ---------- */
.toc { font-size: 14px; }
.toc details > summary {
  cursor: pointer; list-style: none; font-weight: 600; color: var(--ink-soft);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-sunken);
}
.toc details > summary::-webkit-details-marker { display: none; }
.toc details > summary::after { content: " ▾"; color: var(--ink-faint); }
.toc details[open] > summary::after { content: " ▴"; }
.toc ul { list-style: none; margin: 8px 0 0; padding: 0; }
.toc li a {
  display: block; padding: 5px 10px; border-radius: 4px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.toc li a:hover { background: var(--bg-sunken); color: var(--ink); }
.toc li a.on { background: var(--bg-sunken); color: var(--ink); font-weight: 600; }
.toc li.sub a { padding-left: 22px; font-size: 13.5px; }
.toc a.toc-fresh::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px;
  border-radius: 50%; vertical-align: 1px;
}
main.has-toc > .toc { margin: 22px 0 0; }

@media (min-width: 1180px) {
  main.has-toc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 48px;
  }
  main.has-toc > * { grid-column: 2; min-width: 0; }
  main.has-toc > .toc {
    grid-column: 1; grid-row: 1 / span 400;
    align-self: start; position: sticky; top: 64px;
    max-height: calc(100vh - 84px); overflow-y: auto;
    margin-top: 44px; padding-bottom: 24px;
  }
  .toc details > summary {
    pointer-events: none; padding: 0 10px 8px; border: 0; background: none;
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
  }
  .toc details > summary::after, .toc details[open] > summary::after { content: none; }
}

/* разбор с нормами (plan.html) и инструкция (howto.html) */
.stage-when { border: 0; border-radius: 4px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.stage.good .stage-when { background: var(--tag-green-bg); color: var(--tag-green); }
.stage.warn .stage-when { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.stage.bad .stage-when, .stage.critical .stage-when { background: var(--tag-red-bg); color: var(--tag-red); }
.item-what { font-size: 16px; }
.stage-items p { font-size: 15.5px; line-height: 1.6; }
.stage-lead { font-size: 16.5px; line-height: 1.65; }
.tag { font-size: 12px; padding: 1px 6px; }
.doc { box-shadow: none; }
.doc-body > p { font-size: 16px; line-height: 1.6; }
.doc-meta { font-size: 13.5px; }
.doc-state { border-radius: 4px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.doc.st-done .doc-state { background: var(--tag-green-bg); color: var(--tag-green); }
.doc.st-ask .doc-state { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.doc.st-wait .doc-state { background: var(--tag-red-bg); color: var(--tag-red); }
.page-link span { font-size: 15px; }
.col-block .pc li { font-size: 15px; }

@media (max-width: 720px) {
  .hero { padding: 36px 0 22px; }
  .lede { font-size: 17px; }
  /* шаги маршрута: узкая колонка с номером, чтобы тексту на телефоне осталась ширина */
  .rstep { grid-template-columns: 34px 1fr; gap: 0 12px; }
  .rstep-num { width: 30px; height: 30px; font-size: 13px; }
  section { padding: 34px 0; }
  .card p, .col-block li, .rstep-todo p { font-size: 16px; }
  .callout, .warn, .rstep-warn, .keyfact, .answer, .col-block .fix, .tk-conflict { padding-left: 46px; }
  .callout::before, .warn::before, .rstep-warn::before, .keyfact::before, .answer::before,
  .col-block .fix::before, .tk-conflict::before { left: 14px; }
}

/* ====================================================================
 *  Три раздела (24.10.2026): «Сегодня», «План», «Справочник».
 *  Меню — сразу сверху, под ним заголовок страницы; текст — в узкой
 *  колонке для чтения (.narrow). Старые страницы — в /archive/.
 * ==================================================================== */
.wrap.narrow { max-width: 860px; }
.page-head { padding: 40px 24px 6px; }
.page-head h1 { font-size: clamp(30px, 4.4vw, 40px); margin-bottom: 12px; }
.page-head .lede { margin-bottom: 8px; }
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { text-decoration: underline; }
.page-head + main > section:first-child { padding-top: 22px; }
.archive-note { background: var(--co-yellow); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.archive-note .wrap { padding-top: 10px; padding-bottom: 10px; }
.more-link { margin: 14px 0 0; font-size: 15px; }
footer .wrap.narrow p a { color: var(--ink-soft); }

/* счётчики на «Сегодня» */
.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-bottom: 0; }

/* метки-«таблетки» вне плана (те же цвета тегов Notion) */
.tag-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  font-size: 13px; font-weight: 500; background: var(--tag-gray-bg); color: var(--tag-gray);
}
.tag-pill.red { background: var(--tag-red-bg); color: var(--tag-red); }
.tag-pill.orange { background: var(--tag-orange-bg); color: var(--tag-orange); }
.tag-pill.green { background: var(--tag-green-bg); color: var(--tag-green); }
.tag-pill.blue { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag-pill.st-doing { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag-pill.st-waiting { background: var(--tag-yellow-bg); color: var(--tag-yellow); }
.tag-pill.st-done { background: var(--tag-green-bg); color: var(--tag-green); }
.tag-pill.own-anton { background: var(--tag-blue-bg); color: var(--tag-blue); }
.tag-pill.own-tanya { background: var(--tag-pink-bg); color: var(--tag-pink); }

/* строки дел: одна строка — одна задача, ведёт в «План» */
.rows { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 11px 14px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); background: var(--bg-raised);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--bg-sunken); }
.row-title { flex: 1 1 260px; font-weight: 500; line-height: 1.4; }
.row-title small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-faint); }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ключевые даты */
.kd { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.kd li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0 8px 18px; }
.kd li::before {
  content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--ink-faint);
}
.kd-when { font-size: 14.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 1px; }
.kd-what strong { font-weight: 600; }
.kd-what small { display: block; font-size: 13.5px; color: var(--ink-faint); }
.kd li.past { opacity: .5; }
.kd li.past::before { background: var(--ink-faint); }
.kd li.next::before { background: var(--accent); border-color: var(--accent); }
.kd li.next .kd-when { color: var(--accent); font-weight: 600; }

/* «Что решили» и списки ссылок */
.decided, .link-list { list-style: none; margin: 0; padding: 0; }
.decided li a, .link-list li a {
  display: block; padding: 12px 14px; margin: 0 -14px; border-radius: 6px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.5;
}
.decided li a strong, .link-list li a { color: var(--ink); }
.decided li a:hover, .link-list li a:hover { background: var(--bg-sunken); }
.decided li a::after { content: " →"; color: var(--ink-faint); }
.link-list li { display: flex; flex-direction: column; padding: 4px 0; }
.link-list li a { font-weight: 600; margin-bottom: -6px; }
.link-list li span { padding: 0 0 10px; font-size: 14.5px; color: var(--ink-faint); }

/* справочник: оглавление тем и страница темы */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.topic {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
  color: var(--ink); text-decoration: none;
}
.topic:hover { background: var(--bg-sunken); }
.topic-icon { font-size: 22px; line-height: 1; }
.topic strong { font-size: 16.5px; }
.topic span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.topic .tag-pill { align-self: flex-start; margin-top: 4px; }
.key-points { margin: 0; padding-left: 20px; }
.key-points li { margin-bottom: 10px; line-height: 1.6; }
.guide section h2 { font-size: 21px; }
.guide .breakdown td { font-size: 15px; }
.guide .table-scroll table { min-width: 620px; }
.steps { margin: 0; padding-left: 22px; }
.steps li { margin-bottom: 12px; padding-left: 4px; line-height: 1.6; }
.steps li strong:first-child { display: block; }

/* «План»: раздел задачи меткой при группировке по месяцам; подсветка открытой по ссылке */
.tk-cat { background: transparent; color: var(--ink-faint); padding-left: 0; padding-right: 0; }
@keyframes tk-flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
.tk-flash { animation: tk-flash 2.4s ease-out; }

@media (max-width: 720px) {
  .page-head { padding: 26px 16px 4px; }
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd li { grid-template-columns: 1fr; gap: 0; }
}

/* карточки-выводы с «Развернуть» (архивная главная) */
.cards-short { align-items: start; }
.card-short { color: var(--ink) !important; }
.card-more summary { cursor: pointer; list-style: none; margin-top: 10px; font-size: 14px; color: var(--blue); }
.card-more summary::-webkit-details-marker { display: none; }
.card-more .when-open, .card-more[open] .when-closed { display: none; }
.card-more[open] .when-open { display: inline; }
.card-more p { margin-top: 10px !important; }

/* одна ширина для меню и колонки на новых страницах — меню не «прыгает» между разделами */
.wrap.narrow { max-width: 960px; }
.tabs .wrap.narrow { padding-left: 14px; padding-right: 14px; }
.key-points, .steps, .guide .answer p, .guide .warn p, .guide .callout p, .page-head .lede { max-width: 74ch; }

/* «План»: шапка без лишних рамок */
.tk-me, .tk-me.tk-me-set {
  display: block; margin: 4px 0 0; padding: 0; border: 0; background: none;
  font-size: 14px; color: var(--ink-faint);
}
.tk-me span { margin-right: 4px; }
.tk-line { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.tk-line strong { color: var(--ink); }
.tk-line .tk-late { color: var(--red); }
.tk-summary { display: block; margin-bottom: 16px; }
.tk-summary .tk-bar { height: 4px; }
#tk-top { padding-top: 14px; padding-bottom: 6px; }

/* ====================================================================
 *  «План»: строка задачи, поля и перетаскивание (25.10.2026)
 *  Юзер прислал скриншот «тут всё кривое»: стрелка раскрытия отрывалась
 *  от названия на свою строку, поле даты было выше списков, «убрать»
 *  не на одной линии с полями, статус и метки — на разной высоте.
 * ==================================================================== */

/* строка: всё по центру по вертикали; стрелка — ПЕРЕД названием, поэтому не отрывается */
.tk-row { align-items: center; gap: 8px 12px; padding: 10px 14px 10px 10px; }
.tk-title {
  position: relative; padding: 2px 0 2px 20px; line-height: 1.4;
  font-size: 15.5px; font-weight: 600;
}
.tk-title::after { content: none; }
.tk-title::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  border: 5px solid transparent; border-left: 6px solid var(--ink-faint); border-right: 0;
  transition: transform .15s ease;
}
.tk-task.is-open .tk-title::after { content: none; }
.tk-task.is-open .tk-title::before { transform: rotate(90deg); }
.tk-chips { align-items: center; }

/* выпадающие списки и поля — одной высоты, своя стрелка вместо системной (в Safari она другая) */
.tk-status, .tk-body select, .tk-body input, .tk-new select, .tk-new input {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  font: inherit; color: var(--ink); background-color: var(--bg);
}
.tk-body select, .tk-new select, .tk-status {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23878580' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
.tk-body select, .tk-body input, .tk-new select, .tk-new input {
  height: 36px; padding: 0 12px; font-size: 15px; line-height: 34px;
  border: 1px solid var(--line); border-radius: 6px;
}
.tk-body select, .tk-new select { padding-right: 30px; }
.tk-body input[type="date"], .tk-new input[type="date"] { min-width: 150px; padding-right: 8px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.tk-body textarea { border-radius: 6px; padding: 9px 12px; font-size: 15px; }
.tk-fields { align-items: flex-end; gap: 12px 16px; margin-top: 16px; }
.tk-fields label { gap: 6px; font-size: 13px; }
.tk-inline { height: 36px; gap: 10px; }
.tk-inline .tk-link { font-size: 14px; }
.tk-status {
  flex: none; height: 28px; padding: 0 26px 0 10px; font-size: 13px; font-weight: 500;
  border: 0; border-radius: 4px; line-height: 28px; background-position: right 9px center;
}

/* ручки для перетаскивания */
.tk-handle, .tk-sec-handle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 28px; border-radius: 4px; cursor: grab; touch-action: none;
  color: var(--ink-faint); font-size: 16px; line-height: 1; user-select: none; opacity: .55;
}
.tk-handle:hover, .tk-sec-handle:hover { opacity: 1; background: var(--bg-sunken); }
.tk-task:hover .tk-handle { opacity: .9; }

/* раздел: ручка, название, действия */
.tk-sec { padding-top: 22px; border-bottom: 0; }
.tk-ghead { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 0 0 8px -4px; }
.tk-ghead h2 { margin: 0; flex: 1 1 auto; }
.tk-gactions { display: flex; gap: 14px; font-size: 13.5px; }
.tk-gactions .tk-link { font-size: 13.5px; color: var(--ink-faint); text-decoration: none; }
.tk-gactions .tk-link:hover { color: var(--ink); text-decoration: underline; }
.tk-gactions .tk-danger:hover { color: var(--red); }
.tk-items { min-height: 8px; }
.tk-items:empty {
  min-height: 46px; border: 1px dashed var(--line); border-radius: var(--radius);
}
.tk-items:empty::before {
  content: "Пусто — перетащите сюда задачу или нажмите «+ задача»";
  display: block; padding: 12px 16px; font-size: 14px; color: var(--ink-faint);
}

/* как выглядит перетаскивание */
.sortable-ghost { opacity: .35; }
.tk-task.sortable-ghost { background: var(--bg-sunken); }
.sortable-fallback { box-shadow: 0 10px 28px rgba(15, 15, 15, .18) !important; opacity: .96 !important; }
.sortable-chosen .tk-handle, .sortable-chosen .tk-sec-handle { cursor: grabbing; }

/* панель: две кнопки справа и подсказка */
.tk-add { display: inline-flex; gap: 8px; margin-left: auto; }
.tk-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-faint); }

@media (max-width: 720px) {
  /* телефон: в первой строке ручка и название, во второй — статус и метки */
  .tk-row { padding: 10px 12px 10px 6px; }
  .tk-handle { order: 0; }
  .tk-title { order: 1; flex-basis: calc(100% - 34px); }
  .tk-row:not(:has(.tk-handle)) .tk-title { flex-basis: 100%; }
  .tk-status { order: 2; }
  .tk-chips { order: 3; }
  .tk-add { margin-left: 0; }
  .tk-gactions { flex-basis: 100%; padding-left: 30px; }
}
/* статус: цвет фона — отдельным свойством, иначе «background:» выше стирает стрелку */
.tk-status { background-color: var(--tag-gray-bg); color: var(--tag-gray); }
.tk-status.st-doing { background-color: var(--tag-blue-bg); color: var(--tag-blue); }
.tk-status.st-waiting { background-color: var(--tag-yellow-bg); color: var(--tag-yellow); }
.tk-status.st-done { background-color: var(--tag-green-bg); color: var(--tag-green); }
.tk-status.st-skip { background-color: var(--tag-gray-bg); color: var(--ink-faint); }
.tk-status, .tk-status[class*="st-"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23878580' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}
/* поля текста растут по содержимому там, где браузер это умеет */
.tk-body textarea { field-sizing: content; min-height: 4.6em; max-height: 50vh; }
@media (max-width: 720px) {
  /* телефон: статус и метки — одной строкой под названием, метки помельче */
  .tk-chips { flex: 0 1 auto; gap: 4px; }
  .tk-chip { font-size: 12.5px; padding: 2px 7px; }
  .due-rel { display: none; }
  .tk-row .tk-cat { order: 4; flex-basis: 100%; margin-top: -4px; }
  .tk-hint { font-size: 13px; }
}

/* раздел задачи в режиме «По месяцам» — тихой подписью, не меткой */
.tk-row .tk-cat { font-size: 13px; color: var(--ink-faint); white-space: nowrap; background: none; }

/* ====================================================================
 *  «План» по темам (25.10.2026): тема → раздел → задача.
 *  Темы — вкладками (видна одна), действия — иконками.
 * ==================================================================== */
.tk-ttabs {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px;
  margin: 18px 0 0; box-shadow: inset 0 -1px 0 var(--line);  /* линия тенью: на телефоне ряд прокручивается и обрезал бы рамку */
}
.tk-ttab {
  position: relative; padding: 9px 0 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tk-ttab:hover { color: var(--ink); }
.tk-ttab.on { color: var(--ink); font-weight: 600; }
.tk-ttab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.tk-tcount { margin-left: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tk-ttabs .tk-ibtn { margin-left: -6px; }
.tk-ttab.sortable-chosen { cursor: grabbing; }

/* иконка-кнопка: бледная, темнеет при наведении */
.tk-ibtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--ink-faint); cursor: pointer;
}
.tk-ibtn:hover { background: var(--bg-sunken); color: var(--ink); }
.tk-ibtn.tk-danger:hover { color: var(--red); }
.tk-ibtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tk-gactions { gap: 2px; }

.tk-theme { padding: 10px 0 6px; border-bottom: 0; }
.tk-thead { display: flex; align-items: center; gap: 8px; }
.tk-thead .tk-gcount { flex: 1 1 auto; font-size: 13px; }
.tk-sections { padding: 0; min-height: 12px; }
.tk-sections:empty {
  min-height: 46px; margin: 8px 0 0; padding: 0;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.tk-sections:empty::before {
  content: "В теме пока нет разделов — добавьте кнопкой справа";
  display: block; padding: 12px 16px; font-size: 14px; color: var(--ink-faint);
}
.tk-sec { padding: 14px 0 6px; border-bottom: 0; }
.tk-ghead { flex-wrap: nowrap; }
.tk-ghead h3 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 600; }
.tk-ghead h3 .tk-gcount { font-size: 12.5px; }
.tk-items:empty::before { content: "Пусто — перетащите сюда задачу или нажмите +"; }

@media (max-width: 720px) {
  /* телефон: вкладки одной строкой до краёв экрана, листаются вбок */
  .tk-ttabs {
    flex-wrap: nowrap; gap: 0 16px; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 18px -24px 0; padding: 0 24px; scrollbar-width: none;
  }
  .tk-ttabs::-webkit-scrollbar { display: none; }
  .tk-ttab { font-size: 14.5px; padding: 8px 0 9px; }
  .tk-gactions, .tk-thead .tk-gactions, .tk-ghead .tk-gactions { flex-basis: auto; padding-left: 0; }
}

/* ---------- «Relospain» (25.10.2026): пункты переписки, файлы, лента ---------- */
.rs-item .row-title small + small { margin-top: 2px; }
.rs-src { color: var(--blue); }
.rs-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.rs-btn {
  font: inherit; font-size: 13px; padding: 3px 9px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
}
.rs-btn:hover { background: var(--bg-sunken); color: var(--ink); }
.rs-btn:disabled { opacity: .5; cursor: default; }
.rs-decision { box-shadow: inset 3px 0 0 var(--tag-red); }
a.tag-pill { text-decoration: none; }
.rs-empty { margin-bottom: 0; color: var(--ink-faint); }
.rs-feed { list-style: none; margin: 0; padding: 0; }
.rs-feed li {
  display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; padding: 9px 14px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.rs-feed li.us { margin-left: 48px; background: var(--bg-sunken); }
.rs-feed li.them { margin-right: 48px; }
.rs-who { font-size: 13px; color: var(--ink-faint); }
.rs-text { white-space: pre-wrap; line-height: 1.55; }
.rs-att a { color: var(--blue); }
.home-rs .rows { margin-top: 4px; }
@media (max-width: 720px) {
  .rs-actions { width: 100%; }
  .rs-feed li.us { margin-left: 20px; }
  .rs-feed li.them { margin-right: 20px; }
}

/* фото и файлы задачи — то, что прислали боту (25.10.2026) */
.tk-filebox:empty { display: none; }
.tk-files { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tk-files li { display: flex; flex-direction: column; gap: 4px; max-width: 160px; font-size: 12.5px; color: var(--ink-faint); }
.tk-files img {
  display: block; width: 160px; height: 120px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken);
}
.tk-files a { color: var(--blue); overflow-wrap: anywhere; }
.rs-file .row-title, .rs-item .row-title { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .tk-files img { width: 130px; height: 100px; } .tk-files li { max-width: 130px; } }