/* screens-home.css — слой экрана поверх brand.css (DESIGN-3.md). Только var(), только transform/opacity в движении.
   Экраны «дома»: Сегодня, Чат, Дискуссии, Вход, Календарь, пузыри и комментарии. Владелец — P1. */

/* ---------- 0. Помощники экрана ---------- */
/* Лид карточки-входа (W5-RULES): 44×44, скругление 14, фон --us-soft. .lead-sm — для строк-заголовков. */
.lead { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--us-soft); color: var(--text); flex: none; }
.lead-sm { width: 32px; height: 32px; border-radius: 10px; }
.lead-ok { background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); }
.ic-ok { color: var(--ok); }
.ic-white { color: #fff; }
/* маленькая квадратная кнопка-иконка (✕ у папки, ✎ у решения): вид 32, цель 44 невидимой зоной */
.icon-btn-sm { width: 32px; height: 32px; border-radius: 10px; position: relative; color: var(--muted); }
.icon-btn-sm::after { content: ''; position: absolute; inset: -6px; }
/* шеврон спойлера: вправо — свёрнут, вниз — раскрыт */
.rt-chev { display: inline-flex; }
.rt-chev svg { transform: rotate(90deg); transition: transform var(--t-base) var(--ease-out); }
details:not([open]) > summary .rt-chev svg, .rt-chev.closed svg { transform: none; }
.empty .orb .ic { color: #fff; }
.empty .orb svg { display: block; }
.empty .btn { margin-top: 4px; }

/* ---------- 1. «Сегодня»: герой ---------- */
.today-hero { padding: 10px 14px 10px 16px; display: flex; flex-direction: column; gap: 1px; }
/* дата и рукописное приветствие — одной строкой; длинной дате приветствие уступает место переносом */
.today-hero .th-top { display: flex; align-items: baseline; column-gap: 10px; min-width: 0; }
/* наклонный рукописный шрифт выходит за свою коробку — запас справа, иначе «Deni» режется по «i» */
.today-hero .th-greet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 6px 2px 0; }
.today-hero .th-date { font-size: 22px; line-height: 1.15; }
.today-hero .th-greet { font-family: var(--font-accent); font-weight: 600; font-size: 19px; line-height: 1.1; color: rgba(255,255,255,.9); }
/* присутствие партнёра — тихая нижняя строка под тонкой линией */
.today-hero .th-presence { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.74); min-height: 17px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.13); }
.today-hero .th-presence b { color: #fff; font-weight: 600; }
.today-hero .th-sep { opacity: .6; }
.today-hero .th-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); flex: none; }
.today-hero .th-dot.on { background: var(--ok); color: var(--ok); }
.today-hero .th-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
/* серия и уровень — две плотные строчки «число · подпись» */
.today-hero .th-stats { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.today-hero .th-stat, .today-hero .th-ring { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 19px; color: #fff; padding: 0; text-align: left; }
.today-hero .th-num { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1; min-width: 14px; }
.today-hero .th-lbl, .today-hero .th-ring small { font-size: 12px; color: rgba(255,255,255,.74); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-hero .th-level { min-width: 0; }
.today-hero .th-ring .ring-wrap { width: 16px; height: 16px; flex: none; display: inline-flex; }
.today-hero .th-ring .ring { width: 16px; height: 16px; }
.today-hero .th-ring .ring .track { stroke: rgba(255,255,255,.22); }
.today-hero .th-hard { flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 11px 4px 9px;
  border-radius: var(--r-md); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; text-align: left;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-base); }
.today-hero .th-hard:active { transform: scale(.97); background: rgba(255,255,255,.24); }
.today-hero .th-hard > span { display: flex; flex-direction: column; min-width: 0; }
.today-hero .th-hard b { font-size: 14px; line-height: 1.15; white-space: nowrap; }
.today-hero .th-hard small { font-size: 10.5px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; }
/* шапка «Сегодня»: быстрый ввод — аврора, шестерёнка — тихая */
.header .round-btn { color: var(--text); }
.header .round-btn.send { color: #fff; }

/* ---------- 2. «Сегодня»: карточки ---------- */
.daily-card { border-radius: var(--r-lg); }
.daily-q.display { font-size: 23px; line-height: 1.22; }
.daily-kicker .ic, .tip-kicker .ic { vertical-align: -2px; }
.daily-streak { color: var(--gold); }
.tip-card { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 15px;
  border-left: 3px solid var(--her); border-top-left-radius: 12px; border-bottom-left-radius: 12px;
  transition: transform var(--t-fast) var(--ease-out); color: var(--text); }
.tip-card:active { transform: scale(.985); }
.tip-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tip-title { font-size: 22px; line-height: 1.1; }
.tip-text { font-size: 14.5px; line-height: 1.45; }
.film-entry.entry { padding: 12px 14px; gap: 12px; transition: transform var(--t-fast) var(--ease-out); }
.film-entry.entry:active { transform: scale(.985); }
.film-entry.entry .film-entry-arrow { display: inline-flex; color: var(--muted); }
.disc-fold .q-count { margin-left: 2px; }
.rt-spoiler summary .lead-sm { color: var(--text); }
.tools-row .quiz-card[data-goto="#/fund"] .qc-ic { color: var(--gold); background: var(--gold-soft); }

/* ---------- 2а. «Сегодня»: собранный экран (аудит 12.10.2026) ---------- */
/* слоты, которые сами решают, показываться ли (пульс, вечер, подсказка недели): пустой слот
   в колонке с gap давал двойной зазор между соседними карточками */
.page > [data-ping-slot]:empty, .page > [data-digest-slot]:empty, .page > [data-tip-slot]:empty,
.page > [data-day-slot]:empty, .page > [data-vocab-block]:empty { display: none; }
.focus-card .ttl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0; }
.fc-toggle .ic { transition: transform var(--t-base) var(--ease-out); }
.fc-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
/* чекбокс шага — линией, как .rt-check, а не квадратиком-эмодзи ◽ */
.fc-box { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; border: 1.5px solid color-mix(in oklab, var(--muted) 55%, transparent);
  display: inline-flex; align-items: center; justify-content: center; }
.fc-box.on { background: var(--ok); border-color: var(--ok); color: #fff; }
/* чужая рутина: на месте галочки — кружок с инициалом владельца (screens-life.css грузится позже — отсюда .rt-row) */
.rt-row .rt-check.rt-owner { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px;
  border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--uc);
  background: color-mix(in oklab, var(--uc) 12%, transparent); border: 1.5px dashed color-mix(in oklab, var(--uc) 45%, transparent); }
.rt-row .rt-cam .ic { display: block; }
/* «требует внимания» — не зелёным «всё хорошо», а фиалкой «мы»; смешано с текстом ради контраста мелкого шрифта */
.q-row .q-attn { font-size: 11px; color: color-mix(in oklab, var(--violet) 70%, var(--text)); display: inline-flex; align-items: center; gap: 4px; }
[data-questions] .q-row .q-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* заголовок раздела-ссылка: тот же вид, что у соседних .section-title (раньше инлайн font:inherit делал его крупным и чёрным) */
.sec-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.today-vocab { padding: 12px 14px; }
.today-vocab .tv-top { display: flex; align-items: center; gap: 10px; }
.today-vocab .tv-status { flex: 1; min-width: 0; }
.today-vocab .vocab-status .ic { vertical-align: -2px; }
/* «Новые слова готовы!» — радостная новость, а не ошибка: фиалка вместо --danger */
.today-vocab .vocab-status.todo { color: color-mix(in oklab, var(--violet) 70%, var(--text)); }
.today-vocab .tv-hint { margin-top: 6px; }
.today-vocab .tv-today { margin-top: 6px; }
.today-vocab .tv-today summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.today-vocab .tv-today summary::-webkit-details-marker { display: none; }
.today-vocab .tv-links { display: flex; gap: 8px; margin-top: 10px; }
.today-vocab .tv-links .btn { flex: 1; min-width: 0; }

/* ---------- 3. Чат ---------- */
.chat-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head .avatar { flex: none; width: 38px; height: 38px; font-size: 16px; }
.presence .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.presence.on .dot { color: var(--ok); }               /* .pulse-dot рисует кольцо currentColor */
.topics-row { background: transparent; border-bottom: 1px solid var(--hairline); }
/* в чате линия — под всей полосой, а не только под чипами: иначе обрывалась перед «⏰» и «папкой» */
.chat-top { border-bottom: 1px solid var(--hairline); }
.chat-top .topics-row { border-bottom: 0; }
/* «была в сети 21:37»: .presence — флекс, и многоточие на голом тексте в нём не работало —
   подпись резалась посреди слова («сегодн»). Текст в своём узле сжимается с многоточием. */
.presence .pr-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* В шапке чата подпись переносится на вторую строку, а не режется: «last seen yesterday at 00:51»
   у Мии не помещалось в 138 px и читалось «last seen yesterday a…» (и о том же просил Денис:
   время последнего захода должно читаться). Две строки по 14 px вместе с именем укладываются
   в высоту шапки; точка — у первой строки. */
.chat-head .presence { align-items: flex-start; }
.chat-head .presence .dot { margin-top: 4px; }
.chat-head .presence .pr-txt { white-space: normal; line-height: 1.2; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.topics-row .chip { min-height: 34px; }
.chat-top .round-btn { width: 38px; height: 38px; position: relative; color: var(--text); }
.chat-top .round-btn::after { content: ''; position: absolute; inset: -3px; }   /* цель 44 */
.composer .round-btn { color: var(--text); }
.composer .round-btn.send, .composer .round-btn.q-toggle.on { color: #fff; }
.composer .q-toggle.on { background: var(--her-fill); box-shadow: var(--glow-her); }
.composer .round-btn .ic { display: block; }
.day-sep { font-size: 11px; letter-spacing: .04em; border: 1px solid var(--hairline); box-shadow: var(--shadow-inset); }
/* СВОЙ ПУЗЫРЬ. Градиент brand.css уходил в фиалку, и белый текст на её конце давал 4.4:1
   (замер 11.09.2026). Держим конец градиента ближе к индиго — на всём пузыре ≥ 4.5. Плашка
   времени — на тёмной подложке и без opacity: полупрозрачный белый на индиго тоже проваливался. */
.msg.own .bubble { background: linear-gradient(150deg, var(--him-fill) 0%, color-mix(in oklab, var(--him-fill) 78%, var(--violet-fill)) 100%); }
.msg.own .msg-meta { background: rgba(16, 12, 36, .34); color: #fff; opacity: 1; }
.msg.own .msg-meta time, .msg.own .msg-meta .act, .msg.own .msg-meta .ticks { color: #fff; }
.msg.own .msg-meta .ticks.on { color: #fff; }
.msg.own .bubble .secondary, .msg.own .bubble .pending { color: rgba(255,255,255,.96); }
.msg.own .lang-tag { color: #fff; border-color: rgba(255,255,255,.5); }
.msg.other .msg-meta { background: color-mix(in oklab, var(--surface-2) 88%, transparent); }
.msg-meta .act .ic, .play-btn .ic { display: block; }
/* строка под плашку времени, когда последний блок пузыря — пояснение в рамке (msgnode.js) */
.bubble .meta-gap-line { height: 17px; }
.msg.acts-open .meta-gap-line { display: none; }
.msg-meta .act { min-width: 30px; }
.msg.acts-open .msg-acts .act { min-width: 30px; min-height: 30px; }
.msg.acts-open .act.act-more { color: var(--violet); }
.msg.acts-open .act.act-more .ic { transform: rotate(90deg); }
.reply-bar .rb-ic { display: inline-flex; color: var(--violet); }
.reply-bar .rb-cancel { display: inline-flex; align-items: center; justify-content: center; }
.msg-file .mf-ic, .msg-file .mf-dl { display: inline-flex; }
.react-bar button[data-more] { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
/* шторка «Отправить позже» */
.sched-preset { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; padding: 8px 12px; }
.sched-preset .lead-sm { color: var(--text); }
.sched-preset:disabled { opacity: .45; }
.sched-preview { font-family: var(--font-display); font-size: 18px; line-height: 1.3; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border-left: 3px solid var(--violet); }
.sched-row { border-top: 1px solid var(--hairline); padding: 10px 0; }
.sched-row-when { display: inline-flex; align-items: center; gap: 4px; }
.sched-cancel { display: inline-flex; align-items: center; justify-content: center; }
.nav-folder-head .ic { color: var(--muted); }
.nav-topic .ic { color: var(--muted); flex: none; }
/* «показать всё» под объяснением смысла: шеврон вниз, как «Читать дальше» в дневнике (.j-more),
   раскрыто — вверх («свернуть»). Раньше были глифы ▾/▴ — свой рисунок и размер у каждого раскрытия. */
.explain-more { display: inline-flex; align-items: center; gap: 2px; }
.explain-more .ic { flex: none; transform: rotate(90deg); transition: transform var(--t-base) var(--ease-out); }
.explain-more[aria-expanded="true"] .ic { transform: rotate(-90deg); }

/* ---------- 4. Дискуссии ---------- */
.seg-mini button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
/* счётчик-справка (число решённых): без красной заливки — красный только у того, что ждёт.
   Цифра цветом подписи кнопки (приглушённая у неактивной, основная у выбранной) в тонком контуре
   без заливки: контраст цифры равен контрасту подписи. Серая заливка под var(--muted) роняла его
   ниже 4.5:1 (замер: 4.3 на дорожке переключателя, 3.6 на фиолетовой выбранной кнопке тёмной темы). */
.chip-badge.chip-badge-muted { background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 45%, transparent); }
.disc-entry { display: flex; align-items: center; gap: 12px; padding: 12px 14px; transition: transform var(--t-fast) var(--ease-out); }
.disc-entry:active { transform: scale(.985); }
.disc-entry .disc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
/* длинная тема (бывает абзац на 6–8 строк) не раздувает карточку: три строки, целиком — внутри ветки */
.disc-entry .disc-q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.3; }
.disc-entry .disc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.decision-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }
.disc-card.has-decision { border-color: color-mix(in oklab, var(--ok) 35%, var(--border)); }
.disc-resolved { opacity: .8; }
.disc-resolution { display: flex; align-items: flex-start; gap: 5px; font-size: 12.5px; margin-top: 4px; }
.disc-resolution .ic { flex: none; margin-top: 2px; }
.chip.chip-add { color: var(--muted); gap: 2px; }
.chip .ic { flex: none; }
.disc-topbar { gap: 6px; padding: 6px 8px 4px; }
.disc-topbar .disc-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.disc-topbar .round-btn { width: 38px; height: 38px; position: relative; color: var(--text); }
.disc-topbar .round-btn::after { content: ''; position: absolute; inset: -3px; }
.disc-decision { border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--ok) 35%, var(--border)); background: color-mix(in oklab, var(--ok) 8%, var(--surface)); }
.disc-decision-tools { display: inline-flex; gap: 2px; }
.fab { display: flex; align-items: center; justify-content: center; }
.fab .ic { display: block; }

/* ---------- 5. Вход ---------- */
/* Экран входа — единственный, где аврора занимает весь фон (DESIGN-3 §4). Пятна мягче, чем
   на герой-карточке: под ними бумага и текст цвета --text, а не белый на сливе. */
.login-hero { background: var(--bg); }
.login-hero::before, .login-hero::after { opacity: .55; }
.login-hero::after { opacity: .3; }
.login-hero h1.display { font-size: 42px; line-height: 1.05; color: var(--text); }
.login-hero .logo { box-shadow: var(--glow-us), var(--shadow-inset); }
.login-hero .tagline { color: var(--muted); }
.person-card { border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow), var(--shadow-inset);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base); }
.person-card.him { border-color: color-mix(in oklab, var(--him) 35%, var(--border)); box-shadow: var(--glow-him), var(--shadow-inset); }
.person-card.her { border-color: color-mix(in oklab, var(--her) 35%, var(--border)); box-shadow: var(--glow-her), var(--shadow-inset); }
.person-card .arrow { display: inline-flex; color: var(--muted); }
.person-card .lang .nw { white-space: nowrap; }
.person-card.him .name { color: var(--him); }
.person-card.her .name { color: var(--her); }
.setup-person { border-radius: var(--r-lg); box-shadow: var(--shadow), var(--shadow-inset); }
.setup-person.him { border-color: color-mix(in oklab, var(--him) 40%, var(--border)); }
.setup-person.her { border-color: color-mix(in oklab, var(--her) 40%, var(--border)); }
.setup-person .dot { width: 10px; height: 10px; border-radius: 50%; }
.setup-person.him .dot { background: var(--him); }
.setup-person.her .dot { background: var(--her); }
.pin-avatar { width: 72px; height: 72px; font-size: 28px; }
.pin-avatar.him { box-shadow: var(--glow-him); }
.pin-avatar.her { box-shadow: var(--glow-her); }
.login-hero .cards .btn-primary { min-height: 48px; }

/* ---------- 6. Календарь ---------- */
.cal-nav { gap: 6px; }
.cal-month.display { font-size: 20px; font-weight: 600; text-transform: capitalize; }
.cal-nav .icon-btn { color: var(--text); }
.cal-grid { gap: 5px; }
.cal-day { border-radius: 12px; min-height: 46px; box-shadow: var(--shadow-inset); transition: transform var(--t-fast) var(--ease-out); }
.cal-day:active { transform: scale(.94); }
.cal-day .n { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.cal-day.today { border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--us) border-box; }
.cal-day.today .n { color: var(--violet); font-weight: 800; }
.cal-day.perfect { background: color-mix(in oklab, var(--ok) 12%, var(--surface)); border-color: color-mix(in oklab, var(--ok) 35%, var(--border)); }
/* кружки-пироги календаря: класс .ring занят SVG-кольцом brand.css (64 px, поворот) — переименованы */
.cal-pie { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-pie.big { width: 15px; height: 15px; }
.cal-pie.hollow { width: 8px; height: 8px; background: none; border: 1.5px dashed var(--muted); opacity: .5; }
.cal-ev { color: var(--her); }

/* ---------- 7. Комментарии ---------- */
.c-icons .c-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0;
  color: var(--muted); opacity: .7; position: relative; border-radius: 10px; }
.c-icons .c-ic::after { content: ''; position: absolute; inset: -6px; }     /* цель 44 при виде 32 */
.c-icons .c-ic-del { color: var(--danger); }
.c-icons .mini-bell { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.c-quote-active { display: flex; align-items: center; gap: 6px; }
.c-quote-active .ic { flex: none; }
.c-unreply { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 10px; position: relative; color: var(--muted); }
.c-unreply::after { content: ''; position: absolute; inset: -6px; }
.j-c-input { display: flex; gap: 8px; align-items: center; }
.j-c-input .input { flex: 1; min-width: 0; }
.c-send { width: 44px; height: 44px; }

/* ---------- 8. Пульс ---------- */
.ping-title { display: inline-flex; align-items: center; gap: 8px; }
.ping-title .lead-sm { color: var(--her); }
.ping-btn { display: inline-flex; align-items: center; justify-content: center; }
.ping-btn-custom { color: var(--text); }
.ping-btn .ic { display: block; }

@media (prefers-reduced-motion: reduce) {
  .rt-chev svg, .fc-toggle .ic, .explain-more .ic, .tip-card, .film-entry.entry, .disc-entry, .cal-day, .today-hero .th-hard, .person-card { transition: none; }
}

/* Фото в пузыре до загрузки (msgnode.js ставит .loading): без размера пузырь сжимался до 28 px,
   а плашка времени с «⋯» вылезала за край экрана. Место 4:3 держим, пока снимок не пришёл. */
.msg-img.loading { width: 220px; height: 165px; max-width: 100%; }

/* Рутина на будущий день (today.js routineRow): отметить ещё нельзя — сервер ответит future_day.
   Пунктирный кружок на месте галочки: строка не «сломана», но и нажимать нечего. */
.rt-row .rt-check.rt-future { border-style: dashed; background: none; box-shadow: none; }