/* Карта диплома, вариант «Лента года». Одна рамка, три масштаба, одна ось времени.
   «Год» это одна диаграмма: 42 недели слева направо, четыре дорожки строками, все точки знаками.
   «Модуль» это та же диаграмма с растянутой осью: выбранный модуль занимает полотно, соседние сжаты в поля по краям.
   «Точка» это лист поверх ленты. Двигаются только transform и opacity, длительности умножаются на --slow (?slow=N).
   Кегли: 13 и 14 (только подписи оси и метки дорожек с data-aux), 15, 17, 20, 24, 40. Отступы: 4, 8, 12, 16, 24.
   Блоки (замечание 4 от 09.11): карточка с рамкой 1 px --hair по всему периметру, скругление --r, фон --card; смысл блока несёт подпись
   со знаком перед словом или фишка в верхней строке. Цветных полос слева (border-left цветом, ::before в несколько px) нет. */

@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/GolosText-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/GolosText-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; }
@font-face { font-family: "Golos Fallback"; font-weight: 100 599; src: local("Helvetica Neue"), local("Arial"), local("Roboto"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Golos Fallback"; font-weight: 600 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }

:root {
  --paper: #F4F3EE; --card: #FFFFFF; --paper-2: #EAE8E1; --paper-3: #DDDAD1;
  /* серые и красный затемнены ради контраста 7:1 на карточке, бумаге и затенённом прошедшем (роли прежние) */
  --ink: #15161A; --ink-2: #404248; --ink-3: #45474D;
  --hair: rgba(21, 22, 26, .14); --hair-2: rgba(21, 22, 26, .32);
  --mark: #D7F542; --on-mark: #15161A;
  --today-line: #76862E;
  --bad: #962411; --bad-soft: rgba(150, 36, 17, .08);
  --past: #EAE8E1; --veil: rgba(244, 243, 238, .72);
  --dim: .28;
  --font: "Golos Text", "Golos Fallback", system-ui, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* длительности переходов: вперёд 450, назад 340, между модулями 420, лист 280 и 260; --slow ставит ?slow=N */
  --slow: 1;
  --z-in: calc(450ms * var(--slow)); --z-out: calc(340ms * var(--slow)); --z-side: calc(420ms * var(--slow));
  --sh-in: calc(280ms * var(--slow)); --sh-out: calc(260ms * var(--slow));
  --f-in: calc(170ms * var(--slow)); --f-wait: calc(270ms * var(--slow)); --f-out: calc(110ms * var(--slow));
  --z: var(--z-in);
  --r: 14px; --rb: 12px;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  /* телефон: строка состояния в две строки (44), ряд мини-ленты 48, нижняя панель вкладок 48 + поля + поле индикатора «домой» */
  --bar-h: 44px; --nav-h: 48px; --btn-h: 48px; --rd-h: 80px;
  --tabs-pad: 4px; --tabs-h: calc(48px + 2 * var(--tabs-pad) + var(--safe-b));
  --h1: 26px; --h2: 18px; --h3: 20px;
  --dot: 18px; --ms: 18px; --fw: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /* флажки и поля рисуются в теме карты, а не в теме телефона (Р10) */
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131316; --card: #1C1C21; --paper-2: #24242A; --paper-3: #2F2F36;
    --ink: #F1EFE8; --ink-2: #C4C2BB; --ink-3: #BDBBB4;
    --hair: rgba(241, 239, 232, .15); --hair-2: rgba(241, 239, 232, .34);
    --mark: #C9EC3C; --today-line: #C9EC3C; --bad: #FA9C8B; --bad-soft: rgba(250, 156, 139, .12); --dim: .3;
    --past: #101013; --veil: rgba(19, 19, 22, .72);
  }
}
:root[data-theme="dark"] {
  --paper: #131316; --card: #1C1C21; --paper-2: #24242A; --paper-3: #2F2F36;
  --ink: #F1EFE8; --ink-2: #C4C2BB; --ink-3: #BDBBB4;
  --hair: rgba(241, 239, 232, .15); --hair-2: rgba(241, 239, 232, .34);
  --mark: #C9EC3C; --today-line: #C9EC3C; --bad: #FA9C8B; --bad-soft: rgba(250, 156, 139, .12); --dim: .3;
  --past: #101013; --veil: rgba(19, 19, 22, .72);
}
/* низкое окно (320×568): рамка и ось ужимаются, высота отдаётся дорожкам, чтобы знаки 16 px не касались друг друга */
@media (max-height: 600px) { :root { --bar-h: 40px; --h1: 22px; --h2: 16px; --h3: 16px; --tabs-pad: 2px; --rd-h: 72px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); }
body { color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.3; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; font-synthesis: none; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
b { font-weight: 700; }
em { font-style: normal; }
h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
.live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* цвет дорожки: квадратик 10 px перед подписью (не полоса) */
.tk { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--tc, var(--ink-3)); flex: 0 0 10px; }
/* знак «следующего» перед словом «Следующее»: тот же, что у знака на ленте (лайм в обводке цветом текста) */
.gk { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--mark); border: 2px solid var(--ink); }

/* ---------- рамка: строка состояния, полотно, ряд кнопок с мини-лентой ---------- */
/* телефон: строка состояния, полотно, ряд мини-ленты, нижняя панель вкладок у самого края (безопасное поле внутри панели, Р1, Р11) */
.app { height: 100vh; height: 100dvh; overflow: hidden; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(var(--bar-h), auto) minmax(0, 1fr) var(--nav-h) auto; grid-template-areas: "bar" "canvas" "nav" "tabs"; padding: max(8px, var(--safe-t)) var(--gutter) 0; }
.bar { grid-area: bar; display: flex; align-items: center; min-height: 0; }
.st { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.st .chip { flex: none; background: var(--mark); color: var(--on-mark); border-radius: 8px; padding: 6px 10px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.st .chip .l { display: none; }
.st .where { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.2; }
.st .w1, .st .w2 { display: block; }
.st .w1 { white-space: nowrap; overflow: hidden; }
.st .w2 { color: var(--ink-2); font-weight: 400; }
.st .w2 span { white-space: nowrap; }
.st .w2 .late { color: var(--bad); font-weight: 700; white-space: nowrap; position: relative; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; touch-action: manipulation; }
/* «просрочено N» это ссылка (F7): зона нажатия 44 px по высоте, больше вверх, чтобы не заходить на ленту */
.st .w2 .late::after { content: ""; position: absolute; left: -6px; right: -6px; top: -19px; bottom: -9px; }
/* две строки на узком окне (Р3): без «недели N из 42», затем без строки сессии */
.st.nw .w2 .wk, .st.nw .w2 .wk + .sep { display: none; }
.st.ns .w1 .ss { display: none; }
.bar { position: relative; z-index: 6; }
.nav { grid-area: nav; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); min-width: 48px; padding: 0 18px; border-radius: var(--rb); font-weight: 700; font-size: 15px; white-space: nowrap; touch-action: manipulation; border: 2px solid var(--ink); flex: none; }
/* «К году» обведена, не залита (T8): главная кнопка «Модуля» одна, это «Открыть» */
.btn.up { background: var(--card); color: var(--ink); }
.btn.lst { background: var(--card); color: var(--ink); }
.yl { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; height: var(--btn-h); }
.btn:active, .rd-b:active .rd-go, .nb:active, .btn-done:active, .btn-th:active, .cls:active { transform: translateY(1px); filter: brightness(.92); }
@media (max-width: 1023px) {
  /* «‹ Год | I | II | III | IV»: клетка «Год» 64 px слева, обведена цветом текста, отрезки модулей справа одной полосой */
  .yl .btn.up { min-width: 64px; padding: 0 8px; gap: 6px; border-radius: var(--rb) 0 0 var(--rb); }
  .yl .btn.up i { width: 9px; height: 9px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); margin-left: 2px; }
  .yl .mini { border-radius: 0 var(--rb) var(--rb) 0; }
  .yl .mini::after { border-radius: 0 var(--rb) var(--rb) 0; border-left: 0; }
  /* на «Годе» ряд пуст: на его месте строка-подсказка строки чтения; рамка «Года» это «Где вы» и «Разделы» */
  .app[data-scale="year"] .yl { visibility: hidden; }
  .nav > .btn.lst { display: none; }
}
/* клетка «Год» на «Годе» телефона остаётся в раскладке (её прячет visibility у .yl): мини-лента одной ширины на всех масштабах, окно встаёт на свой отрезок (D1, S1) */
@media (min-width: 1024px) {
  .app[data-scale="year"] .btn.up { display: none; }
  .yl { display: contents; }
  .btn.lst { order: -1; }
  /* «Меню» и «К году» одной ширины: мини-лента рядом с ними не меняет размер при смене масштаба */
  .btn.up, .btn.lst { min-width: 96px; }
  .app:not([data-scale="year"]) .btn.lst { display: none; }
}
/* нижняя панель вкладок (Р1): вид как в разделах, зона 48 px, подпись 15 px жирным, текущая залита цветом текста */
.tabs { grid-area: tabs; margin: -8px calc(-1 * var(--gutter)) 0; min-width: 0; }
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: var(--paper); box-shadow: 0 -1px 0 var(--hair); padding: var(--tabs-pad) max(4px, env(safe-area-inset-right)) calc(var(--tabs-pad) + var(--safe-b)) max(4px, env(safe-area-inset-left)); }
/* текущая вкладка залита прямоугольником со скруглением 14 px, а не таблеткой: буквы не упираются в круглые края (D6) */
.tabbar a, .tabbar .tab { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0; border: 0; border-radius: 14px; font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-align: center; color: var(--ink-2); background: none; touch-action: manipulation; }
.tabbar a.on { background: var(--ink); color: var(--paper); }
.tabbar a:active, .tabbar .tab:active { background: var(--paper-2); }
.tabbar a.on:active { background: var(--ink); }
@media (max-width: 399px) { .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tabbar a[data-nav="vkr"] { display: none; } }
/* пять вкладок от 400 px: поле 2 px внутри вкладки, «Текст ВКР» на 400-414 px встаёт в две строки, а не упирается буквами в края заливки (D6) */
@media (min-width: 400px) { .tabbar a, .tabbar .tab { padding: 0 2px; } }
/* лист модальный: панель под ним гаснет, когда лист уже поднялся (без мигания), и возвращается сразу при закрытии */
.tabbar { transition: visibility 0s; }
.app[data-scale="point"] .tabbar { visibility: hidden; transition: visibility 0s linear var(--sh-in); }
.canvas { grid-area: canvas; position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* мини-лента года в рамке: четыре отрезка по числу недель, прошедшее затенено, «сегодня» чертой, окно на открытом модуле */
.mini { position: relative; flex: 1 1 auto; min-width: 0; height: var(--btn-h); display: flex; border-radius: var(--rb); background: var(--card); overflow: hidden; }
.mini::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--hair-2); border-radius: var(--rb); pointer-events: none; z-index: 2; }
.mini a { position: relative; z-index: 2; flex: 1 1 0; min-width: 44px; display: flex; align-items: flex-start; padding: 6px 0 0 9px; font-size: 15px; font-weight: 700; line-height: 1.2; border-left: 2px solid var(--hair-2); touch-action: manipulation; }
.mini a:first-of-type { border-left: 0; }
.mini a .nm { display: none; }
.mini .mp { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 0; background: var(--past); z-index: 0; }
.mini .mt { position: absolute; left: 0; bottom: 0; height: 20px; width: 3px; margin-left: -1.5px; background: var(--today-line); z-index: 1; }
.mini .md { position: absolute; bottom: 6px; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); transform: rotate(45deg); z-index: 1; pointer-events: none; }
.mini .md.done, .mini .md.next { background: var(--mark); outline: 2px solid var(--ink); }
.mini .md.gone { background: var(--card); outline: 2px solid var(--bad); }
.mini .mw { position: absolute; left: 0; top: 0; bottom: 0; width: 100px; box-sizing: border-box; transform-origin: 0 0; border: 3px solid var(--ink); border-radius: 9px; z-index: 3; pointer-events: none; transition: transform var(--z-side) var(--ease); }
.mini a:focus-visible { outline-offset: -4px; }

/* ---------- лента: одна диаграмма на «Годе» и «Модуле» ---------- */
.mod { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--hair-2); border-radius: var(--r); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.mv { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform var(--z) var(--ease), opacity var(--f-out) linear; }
.ax, .info { transition: opacity var(--f-out) linear; }
.app[data-dir="out"] { --z: var(--z-out); }
.app[data-dir="side"] { --z: var(--z-side); }
.app[data-dir="sheet"] { --z: var(--sh-in); }
.app[data-dir="unsheet"] { --z: var(--sh-out); }
.app.jump .ax, .app.jump .info, .app.jump .mv, .app.jump .mw, .app.jump .sheet, .app.jump .det, .app.jump .wl, .app.jump .mo, .app.jump .mo span, .app.jump .mh, .app.jump .bd, .app.jump .tflag, .app.jump .fld, .app.jump .tn, .app.jump .mini, .app.jump .ylb { transition: none !important; animation: none !important; }

/* ось: названия модулей, месяцы, засечки недель; на «Модуле» название модуля, месяцы и числа недель */
.ax { position: relative; flex: 0 0 calc(var(--h1) + var(--h2) + var(--h3)); border-bottom: 2px solid var(--hair-2); z-index: 4; background: var(--card); }
.mh { height: 100%; min-width: 44px; padding-left: 8px; font-size: 15px; font-weight: 700; line-height: var(--h1); white-space: nowrap; z-index: 3; cursor: pointer; transition: transform var(--z) var(--ease), opacity var(--f-out) linear; }
.mh:focus-visible { outline-offset: -3px; }
.app:not([data-scale="year"]) .mh { pointer-events: none; }
.app:not([data-scale="year"]) .mh:not(.sel) { opacity: 0; }
.app[data-scale="year"] .mh { transition: transform var(--z) var(--ease), opacity var(--f-in) linear calc(var(--z-out) - var(--f-in)); }
.mo, .wk, .tflag { pointer-events: none; }
/* засечка границы месяца стоит в ряду месяцев и чуть заходит в ряд засечек недель: числа недель на «Модуле» она не касается */
.mtk { top: calc(var(--h1) + 2px); height: calc(var(--h2) + 1px); width: 2px; margin-left: -1px; background: var(--ink-3); pointer-events: none; }
.mo { top: var(--h1); height: var(--h2); font-size: 13px; line-height: var(--h2); color: var(--ink-2); white-space: nowrap; opacity: 0; transition: transform var(--z) var(--ease), opacity var(--f-out) linear; }
/* судьи 10.11 (M1): месяц на «Годе» подписан только тремя буквами; если месяцы колонки так не входят, колонку подписывает диапазон
   «янв-мар» (.mo.mrg), а засечки месяцев внутри неё гаснут (.mtk.yh). На «Модуле» месяцы и засечки снова свои */
.mo .m3 { transition: opacity var(--f-out) linear; }
.app[data-scale="year"] .mtk.yh { opacity: 0; }
.app[data-scale="year"] .mo.y1, .app:not([data-scale="year"]) .mo.on { opacity: 1; }
/* на обратном пути месяцы «Года» проявляются, когда ось уже почти встала: пока она сжата, подписи слиплись бы */
.app[data-scale="year"] .mo.y1 { transition: transform var(--z) var(--ease), opacity var(--f-in) linear calc(var(--z-out) - var(--f-in)); }
.app:not([data-scale="year"]) .mo.on { transition: transform var(--z) var(--ease), opacity var(--f-in) linear var(--f-wait); }
.wk { top: 0; height: 100%; width: 0; }
.wk .wt { position: absolute; left: -1px; bottom: 0; width: 2px; height: 7px; background: var(--ink-3); }
.wk.b .wt { height: 100%; background: var(--hair-2); }
.wk .wl { position: absolute; bottom: 0; width: 28px; margin-left: -14px; text-align: center; font-size: 13px; font-weight: 700; line-height: var(--h3); color: var(--ink-2); opacity: 0; transition: opacity var(--f-out) linear; }
.app:not([data-scale="year"]) .wk.on .wl { opacity: 1; transition: opacity var(--f-in) linear var(--f-wait); }
/* узкая клетка (судьи 10.11, m2): число недели стоит на засечке начала недели, засечка под ним гаснет на «Модуле» */
.wk .wt { transition: opacity var(--f-out) linear; }
.app:not([data-scale="year"]) .wk.on.lt .wt { opacity: 0; }
.tflag { top: 0; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--mark); color: var(--on-mark); font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; z-index: 5; transition: transform var(--z) var(--ease), opacity var(--f-out) linear; }
.tflag.off { opacity: 0; }
/* подробности «Модуля» проявляются к концу перехода и гаснут первыми на обратном пути */
.det { opacity: 0; pointer-events: none; transition: opacity var(--f-out) linear; }
.app:not([data-scale="year"]) .det { opacity: 1; pointer-events: auto; }
.app.enter .det { animation: kd-in var(--f-in) var(--f-wait) both; }
.app.enter2 .det { animation: kd-in2 var(--f-in) var(--f-wait) both; }
@keyframes kd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kd-in2 { from { opacity: 0; } to { opacity: 1; } }
/* заголовок «Модуля» 24 px (28 на компьютере): главный объект экрана крупнее имени в строке чтения (20 px) */
.ttl { position: absolute; top: 0; height: var(--h1); display: flex; align-items: center; font-size: 24px; font-weight: 700; white-space: pre; z-index: 3; }
.ses { position: absolute; top: 0; height: var(--h1); display: flex; align-items: center; font-size: 15px; color: var(--ink-2); white-space: nowrap; z-index: 3; }

/* тело ленты: дорожки строками, затенённое прошедшее, знаки, линия «сегодня» */
.bdc { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bd { position: absolute; inset: 0; transition: transform var(--sh-in) var(--ease); }
/* вход с «Года» сразу в точку: дорожки сдвигаются под ось вместе с подъёмом листа, а не раньше него (иначе под ними на миг открылось бы пустое поле) */
.app[data-dir="in"] .bd { transition-delay: calc(160ms * var(--slow)); }
.lanes { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ln { position: relative; flex: 2 1 0px; min-height: 44px; border-top: 2px solid var(--hair); }
.ln:first-child { border-top: 0; }
/* название дорожки на плашке цвета карточки: линии «сегодня», границы модулей и сетка под названием прерываются, а не идут сквозь текст */
/* метка дорожки 13 px жирным (14 на компьютере, замечание 5): короткие имена «Производств.», «Стартапы», «ВКР», «Учебный офис» это подписи строк ленты (data-aux) */
.tn { left: 4px; top: 3px; display: inline-flex; align-items: center; height: 20px; font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; z-index: 2; pointer-events: none; }
.tn .nm { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 6px 0 4px; border-radius: 6px; background: var(--card); }
.tn .tk { width: 8px; height: 8px; flex-basis: 8px; border-radius: 2px; }
/* низкое окно (320×568): метка ниже на 2 px и ближе к верху дорожки, высота отдаётся рядам знаков */
@media (max-height: 600px) { .tn { top: 1px; height: 18px; line-height: 18px; } }
/* «· сроков нет» на «Модуле» это отдельная плашка: её гашение (opacity) гасит и подложку */
.tn .tz { height: 100%; padding: 0 7px 0 4px; margin-left: -4px; border-radius: 0 6px 6px 0; background: var(--card); font-size: 15px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.past { width: 100%; height: 100%; background: var(--past); }
.lbls, .zones { position: absolute; inset: 0; }
/* слой зон нажатия выше линии «сегодня» и знаков и тогда, когда проявление подробностей (анимация opacity) делает из него отдельный слой */
.zones { z-index: 6; }
.lbls { z-index: 5; }
.grid { position: absolute; top: 0; bottom: 0; pointer-events: none !important; background-image: repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 100%); }
.mb { height: 100%; width: 2px; margin-left: -1px; background: var(--hair-2); }
.tdy { height: 100%; width: 3px; margin-left: -1.5px; background: var(--today-line); z-index: 1; }
/* полоса окна не ловит касаний (F1): касание по знаку с окном уходит в зону недели .hz, как у знака без окна */
.win { width: 100px; height: 8px; margin-top: -4px; background: var(--tc, var(--ink-3)); transform-origin: 0 50%; z-index: 2; pointer-events: none; }
/* знак точки: залитый кружок цветом дорожки, веха чернильным ромбом крупнее (как на мини-ленте); на «Годе» знак сжат через scale,
   обводка --ring это целое число px не меньше 2 / масштаб (браузер округляет обводку вниз до целого), на экране «Года» не тоньше 2 px */
.pt { width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); transform-origin: 50% 50%; border-radius: 50%; background: var(--tc, var(--ink-3)); border: 0 solid var(--tc, var(--ink-3)); z-index: 3; pointer-events: none; }
.pt.ms { width: var(--ms); height: var(--ms); margin: calc(var(--ms) / -2) 0 0 calc(var(--ms) / -2); border-radius: 2px; background: var(--ink); border-color: var(--ink); }
.pt.cond, .pt.passed { background: var(--card); border-width: var(--ring); }
.pt.late { background: var(--card); border-color: var(--bad); border-width: var(--ring); }
.pt.today, .pt.now, .pt.next, .pt.done { background: var(--mark); border-color: var(--ink); border-width: var(--ring); }
.win.late { background: var(--bad); }
.win.today, .win.now, .win.next, .win.done { background: var(--ink); }
/* сделанная точка на «Модуле»: галочка внутри знака, чтобы «готово» отличалось от «следующего» не только словом в строке чтения */
.pt.done::after { content: ""; position: absolute; left: 50%; top: 46%; width: 30%; height: 55%; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.pt.ms.done::after { top: 50%; transform: translate(-60%, -55%); }
/* отмеченная веха на «Годе» залита лаймом целиком (S7): в сжатом знаке обводка чернилами занимала почти весь ромб, и «готово» не отличалось от пустого ромба */
.app[data-scale="year"] .pt.ms.done { border-color: var(--mark); }
.pt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cur { width: 32px; height: 32px; margin: -16px 0 0 -16px; transform-origin: 50% 50%; border: 2.5px solid var(--ink); border-radius: 50%; z-index: 4; pointer-events: none; }
.cur { transition: transform var(--z) var(--ease), opacity var(--f-in) linear; }
.cur.hop { opacity: 0; transition: none; }
.cur.off { opacity: 0; }
.lbl { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 6px; border-radius: 8px; background: var(--card); border: 2px solid var(--hair-2); font-size: 15px; font-weight: 700; white-space: nowrap; line-height: 22px; z-index: 5; pointer-events: none !important; }
.lbl .d { font-weight: 400; color: var(--ink-2); }
.lbl .d2 { display: none; font-weight: 400; color: var(--bad); }
.lbl.short .d { display: none; }
.lbl.late.short .d2 { display: inline; }
.lbl.late.short.bare .d2 { display: none; }
.lbl.next { background: var(--mark); color: var(--on-mark); border-color: var(--mark); }
.lbl.next .d { color: var(--on-mark); }
.lbl.late { border-color: var(--bad); }
.lbl.late .d { color: var(--bad); }
.lbl.done { border-color: var(--ink); }
/* подпись следующей вехи на «Годе» (одна, в пределах девяти объектов): имя и срок читаются без нажатия; гаснет на «Модуле» */
/* лайм у таблетки только у «следующего», «сегодня» и «идёт» (F9), у остальных вех бумага с обводкой и слово «веха:» */
.ylb { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 7px; border-radius: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-size: 15px; font-weight: 700; line-height: 22px; white-space: nowrap; z-index: 5; pointer-events: none !important; opacity: 0; transition: opacity var(--f-out) linear; }
.ylb .d { font-weight: 400; }
.ylb.lime { background: var(--mark); color: var(--on-mark); border-color: var(--mark); }
.ylb::before { content: ""; position: absolute; left: var(--lx, 12px); width: 2px; margin-left: -1px; height: var(--lh, 0px); background: var(--ink); }
.ylb.up::before { top: 100%; }
.ylb.dn::before { bottom: 100%; }
.ylb.late { background: var(--card); border-color: var(--bad); color: var(--ink); }
.ylb.late .d { color: var(--bad); font-weight: 700; }
.app[data-scale="year"] .ylb.on { opacity: 1; transition: opacity var(--f-in) linear calc(var(--z-out) - var(--f-in)); }
.hz { position: absolute; z-index: 6; cursor: pointer; }
/* поля соседних модулей на «Модуле»: сжатые знаки под вуалью, номер модуля и стрелка, зона 44 px во всю высоту ленты */
.fld { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fw); z-index: 7; display: flex; align-items: flex-start; justify-content: center; gap: 4px; height: auto; padding-top: 0; font-size: 15px; font-weight: 700; line-height: var(--h1); background: var(--veil); cursor: pointer; }
.fld.l { border-right: 2px solid var(--hair-2); }
.fld.r { border-left: 2px solid var(--hair-2); transition: transform var(--z) var(--ease), opacity var(--f-out) linear; }
.fld[hidden] { display: none; }
/* зона нажатия поля не меньше 48 px (T13, D4, S3): невидимое продолжение на 6 px внутрь ленты за рамкой поля 2 px (наружу его срезал бы край ленты), ширина поля и раскладка оси прежние */
.fld::before { content: ""; position: absolute; top: 0; bottom: 0; }
.fld.l::before { left: 0; right: -8px; }
.fld.r::before { left: -8px; right: 0; }
.fld i { align-self: flex-start; margin-top: calc(var(--h1) / 2 - 5px); width: 8px; height: 8px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); }
.fld.r i { transform: rotate(-135deg); }
.fld:focus-visible { outline-offset: -4px; }

/* ---------- строка чтения: «следующее» по умолчанию, выбранная точка при ведении пальцем или нажатии ---------- */
.info { flex: 0 0 auto; min-width: 0; }
.rd { min-width: 0; }
/* телефон (Р3): две строки высотой 80 px (72 при высоте окна до 600), имя 20 px и строка срока с меткой «Следующее», «Открыть» справа на обе строки; высота постоянная, лента от неё не зависит */
.rd-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "t go" "d go"; column-gap: 10px; row-gap: 2px; align-content: center; align-items: start; height: var(--rd-h); padding: 6px 10px 6px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); overflow: hidden; }
.rd-k { grid-area: k; justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rd-d .rd-k { display: inline; white-space: nowrap; }
.rd-d .rd-k .tk { vertical-align: 0; margin-right: 6px; }
.rd-d .rd-k .gk { vertical-align: -1px; margin-right: 6px; }
.rd-d .rd-k::after { content: "\00a0·"; font-weight: 400; }
.rd-k.late { color: var(--bad); }
/* счётчик или подсказка: на телефоне отдельной строкой под строкой чтения, только на «Годе» (на «Модуле» там мини-лента) */
.rd-m { position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: var(--nav-h); display: flex; align-items: center; padding: 0 4px; font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; pointer-events: none; }
.app:not([data-scale="year"]) .rd-m { display: none; }
.rd-t { grid-area: t; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: break-word; }
.rd-t .full { display: none; }
.rd-d { grid-area: d; font-size: 15px; line-height: 1.25; color: var(--ink); min-width: 0; }
.rd-d .late { color: var(--bad); font-weight: 700; }
.rd-d em, .rd-d .rv { white-space: nowrap; }
.rd-d .ds, .rd.c2 .rd-d .dl, .rd.c1 .rd-d .rv, .rd.nom .rd-m { display: none; }
.rd.c3 .rd-t { font-size: 17px; }
/* c4: слово метки уходит, знак перед ним остаётся (у «Следующего» лайм в обводке, у выбранной точки квадратик дорожки) */
.rd.c4 .rd-d .rd-k .kt, .rd.c4 .rd-d .rd-k::after { display: none; }
.rd.c5 .rd-t { font-size: 15px; letter-spacing: 0; }
.rd.c2 .rd-d .ds { display: inline; }
/* ступень c6 (D2): без даты (она на оси и в листе), состояние одной строкой */
.rd.c6 .rd-d .ds, .rd.c6 .rd-d .dl, .rd.c6 .rd-d .dsep { display: none; }
.rd.c6 .rd-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-d .on { background: var(--mark); color: var(--on-mark); padding: 0 5px; border-radius: 5px; font-weight: 700; }
.rd-go { grid-area: go; align-self: center; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border-radius: var(--rb); background: var(--ink); color: var(--paper); border: 2px solid var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; }
.rd-b.none .rd-go { display: none; }
.rd-b:focus-visible { outline-offset: -3px; border-radius: var(--r); }
.sd { display: none; }
@media (max-height: 600px) { .rd-b { padding-top: 4px; padding-bottom: 4px; } }
/* узкий телефон: имя 17 px */
@media (max-width: 340px) { .rd-t { font-size: 17px; } .rd-go { padding: 0 10px; } .rd-b { padding-left: 12px; padding-right: 8px; } }

/* ---------- «Точка»: лента гаснет, остаётся знак открытой точки; лист поверх ---------- */
.app[data-scale="point"] .lbl, .app[data-scale="point"] .grid, .app[data-scale="point"] .ylb { opacity: 0 !important; animation: none !important; }
.app[data-scale="point"] .ax, .app[data-scale="point"] .tn, .app[data-scale="point"] .info, .app[data-scale="point"] .win, .app[data-scale="point"] .pt:not(.open), .app[data-scale="point"] .cur { opacity: var(--dim); }
/* поля соседей на «Точке» скрыты и при входе с «Года» и из списка: проявление подробностей (класс enter) их не зажигает (D5) */
.app[data-scale="point"] .fld { opacity: 0; pointer-events: none; animation: none !important; }
.app[data-scale="point"] .ln.cut .tn { opacity: 0; }
.pt.open { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--ink); }
/* лист доходит до нижнего края экрана (Р11): закрывает ряд мини-ленты и панель вкладок; поле индикатора «домой» внутри нижнего ряда */
.sheet { position: absolute; left: 0; right: 0; bottom: calc(-8px - var(--nav-h) - var(--tabs-h)); top: 34%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .14); z-index: 20; transform: translateY(115%); transition: transform var(--sh-out) var(--ease); }
.sheet.open { transform: none; transition: transform var(--sh-in) var(--ease); }
.sheet.late-open { transition-delay: calc(100ms * var(--slow)); }
@media (max-width: 1023px) { .app[data-scale="point"] .nav > * { visibility: hidden; } }
/* верхняя полоса листа (Р5): кнопка возврата слева туда, откуда лист открыт, ручка по центру; за полосу лист смахивается вниз */
/* при прокрутке тела под полосой встаёт черта (D8): текст уходит под край, а не под кнопку возврата */
.sh-top { position: relative; display: flex; align-items: center; min-height: 56px; padding: 6px 8px 0; cursor: grab; touch-action: none; border-bottom: 2px solid transparent; }
.sheet.scrolled .sh-top { border-bottom-color: var(--hair); }
.sh-top .grip { position: absolute; left: 50%; top: 6px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--hair-2); pointer-events: none; }
.sh-back { display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h); min-width: 48px; padding: 0 14px 0 12px; border-radius: var(--rb); border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; touch-action: manipulation; }
.sh-back i { width: 9px; height: 9px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); margin-left: 3px; }
.sh-back:active { transform: translateY(1px); filter: brightness(.92); }
/* касание по ленте над листом сворачивает его (N6) */
.scrim { display: none; position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 19; background: transparent; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 1023px) { .app[data-scale="point"] .scrim { display: block; } }
.sh-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; position: relative; mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.sh-body:focus { outline: none; }
.sh-head .k { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.sh-head h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.sh-due { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: baseline; margin-top: 12px; padding: 12px 0; border-top: 2px solid var(--hair); border-bottom: 2px solid var(--hair); }
.sh-due .big { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.sh-due .big small { font-size: 17px; letter-spacing: 0; margin-left: 4px; }
.sh-due .big.late { color: var(--bad); }
.sh-due .big.now, .sh-due .big.done { font-size: 24px; background: var(--mark); color: var(--on-mark); padding: 4px 10px; border-radius: 8px; }
.sh-due .big.cond { font-size: 24px; color: var(--ink); }
.sh-due .w1 { font-size: 17px; font-weight: 700; line-height: 1.25; }
.sh-due .w1 em.late { color: var(--bad); }
.sh-due .wc { grid-column: 1 / -1; font-size: 15px; font-weight: 700; line-height: 1.3; }
.sh-due .w2 { grid-column: 1 / -1; font-size: 15px; color: var(--ink-2); line-height: 1.3; }
/* «Было» и «Следующее»: после «Принимает» и «Куда сдать», 17 px с именем жирным */
.nbs { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 2px solid var(--hair); font-size: 17px; color: var(--ink); line-height: 1.3; }
.nbs i { font-style: normal; color: var(--ink-2); }
.nbs b { font-weight: 700; }
.nbs em { color: var(--ink-2); }
.nbs em.late { color: var(--bad); }
.sh-props { display: grid; gap: 8px; padding: 12px 0; border-bottom: 2px solid var(--hair); }
.sh-props div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; font-size: 17px; line-height: 1.3; align-items: baseline; }
.sh-props dt { color: var(--ink-2); font-size: 15px; }
.sh-props dd { font-weight: 700; }
.sh-sec { padding: 12px 0; border-bottom: 2px solid var(--hair); }
.sh-sec:last-child { border-bottom: 0; }
.sh-sec h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--ink-2); font-weight: 700; margin-bottom: 6px; }
.sh-sec h3 small { font-size: 15px; font-weight: 400; }
.sh-sec ol, .sh-sec ul { padding-left: 22px; font-size: 17px; line-height: 1.45; }
.sh-sec li + li { margin-top: 4px; }
.sh-sec p { font-size: 17px; line-height: 1.45; }
.sh-sec p + p { margin-top: 6px; }
.sh-sec .nt { font-size: 17px; color: var(--ink-2); line-height: 1.4; }
.tpl { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.tpl summary { cursor: pointer; font-weight: 700; color: var(--ink); height: var(--btn-h); display: inline-flex; align-items: center; padding: 0 18px; border: 2px solid var(--ink); border-radius: var(--rb); list-style: none; background: var(--card); }
.tpl summary::-webkit-details-marker { display: none; }
.tpl summary::after { content: "показать"; font-weight: 400; color: var(--ink-2); margin-left: 8px; font-size: 15px; }
.tpl[open] summary::after { content: "скрыть"; }
.tpl p { font-size: 17px; line-height: 1.4; margin-top: 8px; }
.checks { list-style: none; padding-left: 0 !important; }
/* свой флажок (Р10): пустой квадрат 28 px с обводкой 2 px, отмеченный залит цветом текста с галочкой; выполненный пункт цветом --ink-2 без зачёркивания */
.chk { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 48px; padding: 6px 4px 6px 0; border-radius: 8px; cursor: pointer; }
.chk input { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin: -2px 0 0; border: 2px solid var(--ink); border-radius: 6px; background: var(--card); display: grid; place-items: center; cursor: pointer; }
.chk input::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid var(--card); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
.chk input:checked { background: var(--ink); }
.chk input:checked::after { opacity: 1; }
.chk input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.chk input:checked + span { color: var(--ink-2); }
.nostore { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--bad); font-weight: 700; }
/* «Сделано» залита и стоит по центру нижнего ряда (Р8); «Снять отметку» обведена, «готово» лаймом остаётся в шапке */
/* «Снять отметку» может встать в две строки (D3): тогда центру хватает 90-120 px, и слова «Раньше» и «Позже» входят от 360 px */
.btn-done { height: var(--btn-h); min-width: 0; padding: 0 10px; border-radius: var(--rb); border: 2px solid var(--ink); font-weight: 700; font-size: 15px; line-height: 1.1; background: var(--ink); color: var(--paper); white-space: normal; overflow: hidden; touch-action: manipulation; }
.btn-done.on { background: var(--card); color: var(--ink); }
/* пример к сроку (замечание 7): «Требует доработки» → «Готово к сдаче», две одинаковые карточки --card с рамкой 1 px по периметру; смысл несёт
   только фишка в верхней строке: обведённая с пустым кружком у черновика, залитая чернилами с галочкой у готового. Так же в «Примерах»
   разделов (.ex-lab, судьи 10.11, M4): лайм на сайте значит «сегодня», «следующее» и «отмечено», готовую версию он не отмечает. Полос слева нет */
.sh-sw .ex-t { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.sh-sw .sw { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
>>>>

.sh-sw .sw + .sw { margin-top: 8px; }
.sh-sw .sw > p { margin: 0; }
.fk { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--card); color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; }
.fk i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }
.fk.ok { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fk.ok i { width: 5px; height: 10px; margin: -3px 3px 0 2px; border-radius: 0; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sh-sw .ex-why { margin-top: 12px; }
.sh-sw .ex-why b { display: block; font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }
.sh-sw .ex-src { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.ex-all { display: inline-flex; align-items: center; gap: 10px; height: var(--btn-h); margin-top: 12px; padding: 0 16px 0 18px; border: 2px solid var(--ink); border-radius: var(--rb); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; touch-action: manipulation; }
.ex-all i { width: 8px; height: 8px; border: solid var(--ink); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); margin-right: 2px; }
.ex-all:active { transform: translateY(1px); filter: brightness(.92); }
.ex-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ex-seg button { min-height: 44px; padding: 0 14px; border: 2px solid var(--hair-2); border-radius: var(--rb); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; touch-action: manipulation; }
.ex-seg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* снимок к примеру: миниатюра 96×72 (верх документа) с подписью, целиком по нажатию; у картинки заданы width и height, место держится до загрузки */
.ex-fig { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; margin: 2px 0 0; }
.ex-th { display: block; width: 96px; height: 72px; padding: 0; border: 1px solid var(--hair-2); border-radius: 8px; overflow: hidden; background: var(--paper-2); cursor: zoom-in; }
.ex-th img { display: block; width: 96px; height: 72px; object-fit: cover; object-position: 50% 0; }
.ex-ft { min-width: 0; }
.ex-ft figcaption { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.ex-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
.ex-fig.open { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ex-fig.open .ex-th { width: 100%; height: auto; cursor: zoom-out; }
.ex-fig.open .ex-th img { width: 100%; height: auto; object-fit: contain; }
/* медиа: миниатюра 96 px, подпись 15 px, показ только по нажатию, автозапуска нет */
.sh-media { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 8px; }
.sh-media .thumb { position: relative; width: 96px; height: 60px; border-radius: 8px; overflow: hidden; border: 2px solid var(--hair-2); background: var(--paper-2); display: grid; place-items: center; }
.sh-media .thumb img, .sh-media .thumb .ph { width: 96px; height: 60px; object-fit: cover; display: block; }
.sh-media .thumb .play { position: absolute; left: 3px; bottom: 3px; font-size: 15px; font-weight: 700; line-height: 1.2; background: var(--mark); color: var(--on-mark); padding: 1px 5px; border-radius: 5px; }
.sh-media figcaption { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.sh-media.open { grid-template-columns: 1fr; }
.sh-media.open img.full, .sh-media.open video { width: 100%; height: auto; border-radius: 8px; display: block; background: var(--paper-2); }
/* нижний ряд листа один (Р8): «‹ Раньше | Сделано | Позже ›», 48 px, зазор 8 px; если слова не входят, по бокам стрелки 48×48 (класс ic) */
.sh-nav { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 8px 8px calc(8px + var(--safe-b)); border-top: 2px solid var(--hair); background: var(--card); }
.nb { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); min-width: 48px; padding: 0 12px; border-radius: var(--rb); font-size: 15px; font-weight: 700; line-height: 1.12; border: 2px solid var(--ink); background: var(--card); color: var(--ink); touch-action: manipulation; white-space: nowrap; }
.nb b { min-width: 0; }
.sh-nav.ic .nb { width: 48px; padding: 0; justify-content: center; }
.sh-nav.ic .nb b { display: none; }
.sh-nav.ic .nb i { margin: 0; }
.nbs .nbl { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
/* плашка подтверждения над нижним рядом (Р9): текст и «Отменить», 4 секунды; появляется проявлением и сдвигом, ряд кнопок не двигается */
.sh-toast { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 4px 4px 4px 14px; border-radius: var(--rb); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; line-height: 1.25; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(8px); transition: opacity calc(160ms * var(--slow)) linear, transform calc(160ms * var(--slow)) var(--ease); z-index: 2; }
.sh-toast.on { opacity: 1; transform: none; }
.sh-toast .t { min-width: 0; }
.sh-toast .undo { flex: none; height: var(--btn-h); padding: 0 14px; border-radius: 10px; border: 2px solid var(--paper); color: var(--paper); font-weight: 700; touch-action: manipulation; }
.sh-toast .undo:active { background: var(--ink-2); }
.nb i { flex: none; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); margin-left: 3px; }
.nb.nxt { text-align: right; }
.nb.nxt i { transform: rotate(-135deg); margin: 0 3px 0 0; }
.nb.none { border-color: var(--hair-2); color: var(--ink-2); font-weight: 400; }
.nb.none i { border-color: var(--ink-2); }

/* ---------- список как замена карты ---------- */
.list { position: fixed; inset: 0; z-index: 30; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: max(8px, var(--safe-t)) var(--gutter) calc(24px + var(--safe-b)); }
.l-in { max-width: 760px; margin: 0 auto; }
/* шапка списка и меню прилипает к самому верху окна: строки не просвечивают над ней при прокрутке (список теперь открывается у текущего модуля) */
.l-top { position: sticky; top: calc(-1 * max(8px, var(--safe-t))); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--paper); padding: calc(8px + max(8px, var(--safe-t))) 0 8px; margin: calc(-1 * max(8px, var(--safe-t))) 0 8px; border-bottom: 2px solid var(--hair); z-index: 1; }
.list h2 { font-size: 20px; }
.list h2:focus { outline: none; }
.l-lead { font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.list h3 { font-size: 17px; margin: 20px 0 6px; }
.list ul { list-style: none; }
/* строка списка ведёт в карточку: знак перехода справа (F10) */
.list li a, .l-late .lr { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) 14px; gap: 8px; min-height: 48px; align-items: start; padding: 8px 0; border-bottom: 2px solid var(--hair); font-size: 15px; line-height: 1.3; }
.list li a::after, .l-late .lr::after { content: ""; align-self: center; width: 8px; height: 8px; border: solid var(--ink-2); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
/* предупреждение (замечание 4): мягкий фон --bad-soft, рамка 1 px, смысл несёт заголовок со знаком «!» перед словом, без полосы и красной рамки */
.l-late { margin-top: 12px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--bad-soft); }
.l-late h3 { display: flex; align-items: center; gap: 8px; color: var(--bad); margin: 12px 0 4px; }
.l-late h3::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bad); color: var(--card); font-size: 15px; font-weight: 700; line-height: 1; }
.l-late .lr:last-child { border-bottom: 0; }
.l-late .lr:active { background: var(--paper-2); }
.list .d { color: var(--ink-2); font-size: 15px; }
.list .d.late, .list em.late { color: var(--bad); font-weight: 700; }
.list em.today, .list em.now, .list em.done { background: var(--mark); color: var(--on-mark); padding: 0 5px; border-radius: 5px; }
.list .s { font-size: 15px; color: var(--ink-2); display: block; }
.list .cls, .menu .cls, .btn-clear { height: var(--btn-h); padding: 0 18px; border-radius: var(--rb); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; border: 2px solid var(--ink); }
.list .cls, .menu .cls { background: var(--ink); color: var(--paper); }
.btn-clear { border-color: var(--bad); color: var(--bad); background: var(--card); }
.l-foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--ink-2); }

/* ---------- меню ---------- */
.menu { position: fixed; inset: 0; z-index: 30; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding: max(8px, var(--safe-t)) var(--gutter) calc(24px + var(--safe-b)); }
.mn-in { max-width: 560px; margin: 0 auto; }
.menu h2 { font-size: 20px; }
.menu h2:focus { outline: none; }
.menu h3 { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 16px 0 4px; }
.mn-list { list-style: none; }
.mn-list li a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 0; border-bottom: 2px solid var(--hair); }
.mn-list li a b { font-size: 17px; }
.mn-list li a span { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
/* знаки на ленте словами (F8): те же формы, что на ленте */
/* легенда и подсказка плотнее, разделы в две колонки (S5): на 320×568 «Вопросы» входят в первый экран меню, порядок блоков F8 прежний */
.menu .mn-h1 { margin-top: 12px; }
.mn-signs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 4px 0 0; }
.mn-signs li { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 15px; line-height: 1.2; }
.mn-list.mn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.mn-signs .gl { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); }
.mn-signs .gl.ms { border-radius: 2px; background: var(--ink); transform: rotate(45deg) scale(.85); }
.mn-signs .gl.win { width: 24px; height: 8px; border-radius: 0; }
.mn-signs .gl.cond { background: var(--card); border: 3px solid var(--ink-3); }
.mn-signs .gl.late { background: var(--card); border: 3px solid var(--bad); }
.mn-signs .gl.lime { background: var(--mark); border: 2px solid var(--ink); }
.mn-hint { margin-top: 6px; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
/* тема в один ряд на всех окнах (T16): выбранная обводкой 3 px и галочкой, не заливкой */
.mn-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btn-th { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: var(--btn-h); padding: 0 6px; border-radius: var(--rb); border: 2px solid var(--hair-2); font-weight: 700; font-size: 15px; line-height: 1.1; color: var(--ink); background: var(--card); text-align: center; }
.btn-th.on { border: 3px solid var(--ink); }
.btn-th.on::before { content: ""; flex: none; width: 6px; height: 11px; margin: -3px 2px 0 0; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mn-foot { margin-top: 24px; font-size: 15px; color: var(--ink-2); line-height: 1.4; }

/* ---------- касания: наведение только там, где есть мышь (T14), отклик :active у строк и флажков, без двойного касания для увеличения (T15) ---------- */
.rd-b, .chk, .btn-done, .cls, .btn-th, .btn-clear, .list li a, .mn-list li a, .tpl summary { touch-action: manipulation; }
.list li a:active, .mn-list li a:active, .btn-clear:not(:disabled):active, .tpl summary:active, .chk:active, .mini a:active, .fld:active { background: var(--paper-2); }
.btn-clear:disabled { border-color: var(--hair-2); color: var(--ink-2); cursor: default; }
@media (hover: hover) {
  .btn.lst:hover { background: var(--paper-2); }
  .mh:hover b, .fld:hover b, .mn-list li a:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .tpl summary:hover, .btn-th:hover, .nb:not(.none):not(.mid):hover { background: var(--paper-2); }
}

/* ---------- компьютер: лента во всю ширину, под ней строка чтения и сводка, точка панелью справа ---------- */
@media (min-width: 1024px) {
  :root { --bar-h: 64px; --nav-h: 44px; --btn-h: 44px; --h1: 30px; --h2: 20px; --h3: 22px; --fw: 56px; }
  .app { grid-template-rows: var(--bar-h) var(--nav-h) minmax(0, 1fr); grid-template-areas: "bar" "nav" "canvas"; max-width: 1180px; margin: 0 auto; padding: 8px 16px; }
  .st .chip .s { display: none; }
  .st .chip .l { display: inline; }
  .st .where { display: flex; gap: 0; align-items: baseline; flex-wrap: wrap; }
  .st .w2::before { content: "·"; padding: 0 6px; }
  .nav { justify-content: space-between; }
  .mini { flex: 0 1 620px; order: -1; }
  .mini a { padding: 5px 0 0 12px; }
  .mini a .nm { display: inline; }
  .mini a .nn { display: none; }
  .mini .md { bottom: 5px; }
  .mini .mt { height: 18px; }
  .canvas { overflow: hidden; }
  .tabs { display: none; }
  /* строка чтения и сводка: одна карточка с ровной рамкой 1 px по периметру, как на телефоне; «Следующее» это подпись со знаком, без полосы слева */
  .info { display: grid; grid-template-columns: minmax(0, 1fr) 440px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); overflow: hidden; }
  .mh { font-size: 17px; padding-left: 12px; }
  .tn { left: 8px; font-size: 14px; height: 22px; line-height: 22px; }
  .ttl { font-size: 28px; }
  .rd-k::after { content: none; }
  .rd-b, .rd.isnext .rd-b { --rd-h: 140px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k go" "t go" "d go"; grid-template-rows: auto auto 1fr; align-items: center; align-content: stretch; column-gap: 12px; padding: 12px 20px 12px 24px; row-gap: 4px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .rd-t { font-size: 24px; }
  .rd-t .full { display: inline; }
  .rd-t .brief { display: none; }
  .rd-d { font-size: 17px; align-self: start; }
  .rd-go { align-self: center; padding: 0 24px; }
  .rd-m { display: none; }
  .sd { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 140px; padding: 12px 18px; border-left: 1px solid var(--hair); min-width: 0; }
  .sd b { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
  .sd span { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
  .sd .late { color: var(--bad); font-weight: 700; }
  /* легенда знаков словами (только на компьютере): веха, окно сдачи, если нужно, просрочено, лайм */
  .sd .lg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 15px; line-height: 1.3; color: var(--ink-2); }
  .sd .lg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .sd .gl { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); }
  .sd .gl.ms { border-radius: 1px; background: var(--ink); transform: rotate(45deg) scale(.85); }
  .sd .gl.win { width: 22px; height: 7px; border-radius: 0; background: var(--ink-3); }
  .sd .gl.cond { background: var(--card); border: 3px solid var(--ink-3); }
  .sd .gl.late { background: var(--card); border: 3px solid var(--bad); }
  .sd .gl.lime { background: var(--mark); border: 2px solid var(--ink); }
  .sheet { left: auto; right: 0; top: 0 !important; bottom: 0; width: 400px; border-radius: var(--r); grid-template-rows: auto minmax(0, 1fr) auto; transform: translateX(115%); box-shadow: -8px 0 32px rgba(0, 0, 0, .14); }
  .sh-top { min-height: 0; padding: 12px 12px 0 16px; cursor: default; touch-action: auto; }
  .sh-top .grip { display: none; }
  .sh-body { padding: 12px 20px 8px; }
  /* названия дорожек на «Точке» приглушены все: дорожку открытой точки называет первая строка листа, а кнопка возврата в листе (Р5, N9) не выводит содержимое за девять объектов */
  .app[data-scale="point"] .pt:not(.open), .app[data-scale="point"] .win { opacity: 1; }
}

/* ---------- движение выключено: только проявление 120 мс ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv, .mw, .bd, .mh, .mo, .tflag, .fld.r, .ax, .info { transition: none !important; }
  .det, .wk .wl, .app:not([data-scale="year"]) .wk.on .wl, .mo span, .ylb, .app[data-scale="year"] .ylb.on { transition: opacity 120ms linear !important; }
  .app.enter .det, .app.enter2 .det { animation-duration: 120ms; animation-delay: 0ms; }
  .sheet { transition: opacity 120ms linear; transform: none; opacity: 0; }
  .sheet.open { opacity: 1; transition: opacity 120ms linear; }
  /* плашка «Отмечено» только проявляется, без сдвига (m3) */
  .sh-toast, .sh-toast.on { transition: opacity 120ms linear; transform: none; }
}