/* Подруга — «Садовый журнал». Тетрадь садовода: недели как грядки,
   разговоры как листья, пометы от руки. Палитра и композиция — из mockups/sad.html.
   Правила помечены разделами; таски 05 и 06 берут отсюда готовые компоненты. */

/* ─── Палитра и основа ──────────────────────────────────────────────── */
:root{
  --beige:#F4EBDC; --page:#FAF4E8; --bed:#EDE3CF; --mousse:#D9C3A5;
  --gold:#C9A961; --sage:#8FA58A; --sage-deep:#4A6544; --sage-soft:#DCE3D3;
  --praline:#7A5A40; --cocoa:#4A3728;
  /* Шалфей-глубокий — цвет мелкого текста (подписи разделов, шапки таблиц,
     плашки «сохранено»). Прежний #55704F давал на бумаге 4.25:1 и на
     --sage-soft 4.18:1 — ниже нормы; этот даёт 5.01 и 4.94. */
  /* пять состояний настроения — единственные цвета вне бежевого мира */
  /* Терракота глубже эталонной (#C4826A) — на один шаг к --anx-ink.
     В клетке ленты настроения 5 px «тревожное» и «растерянное» отличались
     только цветом и почти не отличались им: ΔE 10,0 при пороге 15
     (validate_palette.js навыка dataviz), для дальтонизма — 7,8.
     Этот шаг разводит пару до 19,6 / 17,9, а заодно поднимает терракоту
     на бумаге с 2,4:1 до 4,4:1. */
  --calm:#8FA58A; --joy:#D4A857; --sad:#9A94B0; --anx:#A85F42; --lost:#B5A99A;
  /* Тревога словом: мелкому тексту и 4,4:1 мало (норма 4,5:1).
     Заливки и точки остаются на --anx, текст и значки берут --anx-ink:
     5.4:1 на странице, 4.7:1 в клетке месяца. */
  --anx-ink:#95523A;
  --ease:cubic-bezier(.16,1,.3,1);
  --text:'Alegreya Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
/* `hidden` сильнее любой раскладки: без этого `display:flex` компонента
   оставляет на экране пустую плашку — призрак спрятанного блока. */
[hidden]{display:none!important}
html{background:var(--beige)}
body{margin:0;background:var(--beige);color:var(--cocoa);font:17px/1.5 var(--text);
  -webkit-font-smoothing:antialiased;caret-color:var(--sage-deep);position:relative;overflow-x:hidden}
body.lock{overflow:hidden}
::selection{background:var(--sage-soft);color:var(--cocoa)}
*{scrollbar-width:thin;scrollbar-color:var(--mousse) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--mousse);border-radius:8px;border:3px solid var(--beige)}
::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.005em}
a{color:var(--sage-deep);text-decoration-color:var(--gold);text-underline-offset:.25em}
.hand{font-family:var(--hand);font-weight:600}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* точка настроения — лист, а не кружок */
.dot{display:inline-block;width:10px;height:10px;border-radius:0 10px 0 10px;background:var(--lost);
  margin-right:6px;flex:none;vertical-align:-1px;transform:rotate(-8deg)}
.dot.calm{background:var(--calm)}.dot.joy{background:var(--joy)}
.dot.sad{background:var(--sad)}.dot.anx{background:var(--anx)}.dot.lost{background:var(--lost)}
/* Настроение не записано — лепесток пустой, одним контуром: шестого цвета
   у настроения нет, а залитый лепесток любого цвета читался бы состоянием.
   Пралине на бумаге даёт 5,7:1 — контур виден и в клетке месяца 12 px. */
.dot.none{background:transparent;box-shadow:0 0 0 1.5px var(--praline) inset}

/* ─── Оболочка: шапка, знак, разделы ────────────────────────────────── */
.book{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:30px 28px 110px}
.top{display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--gold)}
.brand{font-family:var(--hand);font-weight:600;font-size:40px;line-height:1;color:var(--sage-deep);
  display:flex;align-items:center;gap:8px}
.brand svg{width:34px;height:34px;flex:none}
.nav{display:flex;gap:4px;margin-right:auto;flex-wrap:wrap}
.navlink{display:inline-flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
  padding:6px 10px 2px;font-size:17px;color:var(--praline);border-radius:10px 10px 0 0;
  transition:color .2s,background .25s}
.navlink .ni{display:none}
.navlink::after{content:'';display:block;width:100%;height:2px;border-radius:2px;
  background:transparent;transition:background .25s}
.navlink:hover{color:var(--cocoa)}
.navlink[aria-current="page"]{color:var(--sage-deep)}
.navlink[aria-current="page"]::after{background:var(--gold)}
.leave{font-size:15px;color:var(--praline);padding:5px 10px;border-radius:999px}
.leave:hover{background:var(--bed);color:var(--cocoa)}

.shead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 12px}
.shead h2{font-size:26px}
.shead .hint{font-family:var(--hand);font-size:21px;color:var(--sage-deep);font-weight:500}

/* лист бумаги — общая подложка для содержимого разделов */
.sheet{position:relative;background:var(--page);border-radius:18px;padding:20px 22px 24px;
  box-shadow:0 14px 34px -24px rgba(74,55,40,.5),0 0 0 1px rgba(201,169,97,.35)}
.sheet::after{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--gold)}

/* ─── Панель управления календарём ──────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.views{display:flex;gap:2px;border:1px solid var(--gold);border-radius:999px;padding:3px}
.view{padding:6px 16px;border-radius:999px;font-weight:500;font-size:15px;color:var(--praline);
  transition:background .25s,color .2s}
.view:hover{color:var(--cocoa)}
.view[aria-pressed="true"]{background:var(--sage-soft);color:var(--sage-deep)}
.rangenav{display:flex;align-items:center;gap:4px;margin-left:auto}
.arrow{width:34px;height:34px;display:grid;place-items:center;color:var(--praline);border-radius:50%;
  transition:background .2s}
.arrow:hover{background:var(--bed)}
#range{min-width:210px;text-align:center;font-family:var(--hand);font-weight:600;font-size:26px;
  color:var(--cocoa);line-height:1}
.today{color:var(--sage-deep);font-size:15px;padding:5px 10px;border-radius:999px;
  text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.25em}
.today:hover{background:var(--sage-soft)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;margin-top:18px;align-items:start}
.cal{min-height:420px}

/* ─── Месяц: грядки ─────────────────────────────────────────────────── */
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mwd{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage-deep);text-align:center;padding:2px 0 6px}
.mday{position:relative;min-height:96px;border-radius:14px;background:var(--bed);padding:8px 10px;
  display:flex;flex-direction:column;gap:3px;
  transition:background .25s,box-shadow .25s,transform .3s var(--ease)}
.mday:hover{background:#F0E5D0;transform:translateY(-1px)}
.mday.out{opacity:.45}
.mday.sel{background:var(--page);
  box-shadow:0 0 0 1.5px var(--sage) inset,0 8px 20px -14px rgba(74,55,40,.5)}
.mnum{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;line-height:1}
.mday.today .mnum{color:var(--sage-deep)}
.mtoday{font-family:var(--hand);font-size:17px;line-height:1;color:var(--sage-deep);margin-top:-2px}
.dots{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto}
.dots .dot{margin:0;width:12px;height:12px}
.dots .dot:nth-child(even){transform:rotate(12deg)}
.msum{font-size:13px;line-height:1.3;color:var(--praline)}
.msum b{display:block;font-weight:400}
.alert-mark{position:absolute;right:9px;top:8px;font-size:11px;font-weight:700;color:var(--anx-ink);
  letter-spacing:.03em}

/* ─── Неделя и день: часы по вертикали ──────────────────────────────── */
/* Час сетки в пикселях. То же число — `ROWH` в format.js: из него там
   считается наименьший рост блока. За совпадением следит тест. */
.wk{--rowh:34px;--rows:16;
  /* Ночная подложка: тот же мусс, только вуалью. 30% — подложка видна сразу,
     а подпись часа (пралине) держит 4.75:1 на бумаге и 4.60:1 на самом
     тёмном пикселе разводов под ней; норма 4.5:1. */
  --night:color-mix(in srgb,var(--mousse) 30%,transparent)}
.wk-head{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:0 6px;margin-bottom:6px}
.wk.day .wk-head{grid-template-columns:52px 1fr}
.wk-day{border-radius:12px;padding:6px;text-align:center;display:flex;flex-direction:column;
  align-items:center;transition:background .2s}
.wk-day:hover{background:var(--bed)}
.wk-day.sel{background:var(--sage-soft)}
.wd{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep)}
.wk.day .wd{text-transform:none;letter-spacing:0;font-family:var(--hand);font-weight:600;
  font-size:24px;color:var(--cocoa)}
.wn{font-weight:700;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.wk-day.today .wn{color:var(--sage-deep)}
.wc{font-size:12px;color:var(--praline)}
.wk.day .wk-day{align-items:flex-start;padding-left:12px;background:none;gap:2px}
.wk.day .wk-day:hover{background:var(--bed)}
.wopen{display:none;font-size:13px;color:var(--sage-deep)}
/* Сетка ровно во столько часов, сколько их сегодня показано: `--rows` ставит
   календарь по `gridBounds`. Час остаётся ростом в `--rowh` — сетка просто
   становится выше, когда ночной разговор её раздвинул. */
.wk-body{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:0 6px;
  height:calc(var(--rowh)*var(--rows))}
.wk.day .wk-body{grid-template-columns:52px 1fr}
.wk-hours{display:flex;flex-direction:column}
.wk-h{position:relative;height:var(--rowh);font-size:12px;color:var(--praline);text-align:right;
  padding-right:8px;transform:translateY(-8px);font-variant-numeric:tabular-nums}
/* Подпись часа сдвинута вверх на 8px, чтобы число село на черту, — поэтому
   ночную подложку рисует ::before со встречным сдвигом: фон самой ячейки уехал
   бы вместе с ней и разошёлся с полосой в столбцах дней. */
.wk-h.night::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:8px;
  height:var(--rowh);background:var(--night)}
.wk-col{position:relative;display:flex;flex-direction:column;border-radius:12px;background:var(--bed)}
.wk-col.sel{background:var(--page);box-shadow:0 0 0 1.5px var(--sage) inset}
.wk-line{height:var(--rowh);border-top:1px dashed rgba(143,165,138,.45);flex:none}
.wk-line:first-child{border-top:0}
/* Часы до 7:00 и после 23:00. Полоса по краям сетки скруглена по столбцу —
   иначе у колонки срезался бы её собственный угол. */
.wk-line.night{background:var(--night)}
.wk-line.night:first-child{border-radius:12px 12px 0 0}
.wk-line.night:last-child{border-radius:0 0 12px 12px}
/* Блок разговора. Рост блока задан геометрией (`BLK_MIN` в format.js
   переведён в проценты сетки), а не подпёрт здесь `min-height`: иначе
   пиксели CSS и проценты JS расходятся, и у двухминутного разговора имя
   уезжало под нижний край. Каждая строка обрывается многоточием, а не
   на полбуквы; целиком всё — в подсказке и на странице дня. */
.blk{position:absolute;left:3px;right:3px;padding:3px 7px 5px;border-radius:13px;
  display:flex;flex-direction:column;background:var(--page);
  box-shadow:0 0 0 1px var(--sage),0 6px 14px -10px rgba(74,55,40,.5);
  transition:transform .25s var(--ease);z-index:1;overflow:hidden}
.blk.calm{background:color-mix(in srgb,var(--calm) 22%,var(--page))}
.blk.joy{background:color-mix(in srgb,var(--joy) 22%,var(--page))}
.blk.sad{background:color-mix(in srgb,var(--sad) 22%,var(--page))}
/* Терракота гуще прочих: на 22% пралине давало 4.33:1, на 16% — 4.68:1. */
.blk.anx{background:color-mix(in srgb,var(--anx) 16%,var(--page))}
.blk.lost{background:color-mix(in srgb,var(--lost) 22%,var(--page))}
/* Настроение не записано — блок без подкраски: своего цвета у пустой пометы
   нет, и брать чужой («растерянное») ей неоткуда. */
.blk.none{background:var(--page)}
.blk:hover{transform:translateY(-1px) scale(1.02);z-index:2}
.blk .bt,.blk .bw,.blk .bd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .bt{font-size:13px;line-height:15px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.blk .bw{font-size:12.5px;line-height:15px;color:var(--praline)}
.blk .bd{font-size:11.5px;line-height:14px;color:var(--praline);
  font-variant-numeric:tabular-nums}
/* В виде «День» колонка одна и широкая: время и имя встают в строку,
   помета с длиной и репликами — под ними. */
.wk.day .blk{left:14px;right:auto;min-width:min(440px,72%);min-height:46px;
  padding:5px 12px 6px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 10px;align-items:baseline}
.wk.day .blk .bt{font-size:15px;line-height:19px}
.wk.day .blk .bw{font-size:15px;line-height:19px}
.wk.day .blk .bm{grid-column:1/-1}
.blk .bm{font-size:13px;line-height:1.3;color:var(--praline);display:flex;
  align-items:center;flex-wrap:wrap}

/* Пустая неделя и пустой день — листья таска 07 в полную силу; текста поверх
   листьев нет, надпись лежит на светлой плашке (92% бумаги):
   какао 9.32:1, шалфей 5.38:1. */
.wk-empty{display:grid;place-items:center;min-height:190px;margin:4px 0 0;padding:16px;
  border-radius:16px;overflow:hidden;background:url(../img/leaves.webp) center/cover}
.wk-empty p{margin:0;padding:11px 22px 13px;border-radius:18px;text-align:center;
  color:var(--praline);font-style:italic;
  background:color-mix(in srgb,var(--page) 92%,transparent);
  box-shadow:0 3px 14px -6px rgba(74,55,40,.7)}
.wk-empty .hand{display:block;font-style:normal;font-size:26px;color:var(--sage-deep);
  margin-top:2px}

/* ─── Страница дня ──────────────────────────────────────────────────── */
.panel{position:relative;background:var(--page);border-radius:18px;padding:20px 22px 24px;
  min-height:420px;box-shadow:0 14px 34px -24px rgba(74,55,40,.5),0 0 0 1px rgba(201,169,97,.35)}
.panel::after{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:var(--gold)}
.phead{position:relative;padding-right:32px}
.phead h2{font-family:var(--hand);font-weight:600;font-size:34px;line-height:1;color:var(--cocoa);
  letter-spacing:0}
.pclose{position:absolute;right:-6px;top:-2px;width:32px;height:32px;display:none;place-items:center;
  color:var(--praline);border-radius:50%}
.pclose:hover{background:var(--bed)}
.pback{display:inline-flex;align-items:center;gap:4px;color:var(--sage-deep);font-size:14px;
  margin:0 0 8px -4px;padding:3px 8px 3px 4px;border-radius:999px}
.pback:hover{background:var(--sage-soft)}
.lead{margin:10px 0 0;font-size:17px;line-height:1.5}
.note{margin:8px 0 0;font-family:var(--hand);font-weight:500;font-size:22px;line-height:1.1;
  color:var(--sage-deep);transform:rotate(-1.2deg);transform-origin:left}
.pmeta{margin:6px 0 0;color:var(--praline);font-size:15px}
.pmeta b{font-weight:500;color:var(--anx-ink)}
.moods{margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--sage);
  display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;gap:10px;align-items:baseline}
.mrow dt{width:76px;flex:none;font-weight:700;font-size:15px}
.mrow dd{margin:0;display:flex;gap:4px 10px;flex-wrap:wrap;font-size:14px;color:var(--praline)}
.mrow dd .mchip:first-child{color:var(--cocoa)}
.mrow .quiet{color:var(--praline);font-style:italic}
.mchip{display:inline-flex;align-items:center}
.morning{margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--sage)}
.morning h3{font-size:15px;font-weight:700;color:var(--sage-deep)}
.morning pre{margin:8px 0 0;font:inherit;font-size:15px;line-height:1.45;white-space:pre-wrap;
  color:var(--praline);background:var(--bed);border-radius:12px;padding:10px 12px}
.morning .quiet{margin:6px 0 0;color:var(--praline);font-style:italic;font-size:15px}
.clist{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--sage);
  display:flex;flex-direction:column;gap:6px}
.citem{width:100%;display:grid;grid-template-columns:auto 1fr;gap:0 12px;padding:10px 12px;
  border-radius:12px;background:var(--bed);transition:background .2s,transform .25s var(--ease)}
.citem:hover{background:var(--sage-soft);transform:translateX(2px)}
.ctime{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;grid-row:1/3;align-self:center}
.cwho{font-weight:500}
.cmood{font-size:14px;color:var(--praline);display:inline-flex;align-items:center}
.cmeta{grid-column:2;font-size:13px;color:var(--praline)}
.empty{margin:14px 0 0;color:var(--praline);font-style:italic}
.empty .hand{display:block;font-style:normal;font-size:24px;color:var(--sage-deep);margin-top:2px}

/* ─── Стенограмма ───────────────────────────────────────────────────── */
.turns{list-style:none;margin:12px 0 0;padding:12px 4px 0 0;border-top:1px dashed var(--sage);
  display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.turn{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:8px 12px 9px;
  border-radius:14px 14px 14px 4px;background:var(--bed);max-width:92%;font-size:15.5px}
.turn.alisa{background:var(--sage-soft);border-radius:14px 14px 4px 14px;margin-left:auto}
.turn p{margin:0;grid-column:1/3;line-height:1.45}
.tsb{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--sage-deep)}
.tsb svg{width:15px;height:15px;flex:none}
.turn.babushka .tsb,.turn.dedushka .tsb,.turn.unknown .tsb{color:var(--praline)}
.ttime{font-size:12px;color:var(--praline);font-variant-numeric:tabular-nums}
.more{display:block;width:100%;margin:10px 0 0;text-align:center;color:var(--sage-deep);font-size:15px;
  padding:7px;border-radius:12px;background:var(--bed);transition:background .2s}
.more:hover{background:var(--sage-soft)}
.remember{grid-column:1/3;justify-self:end;display:inline-flex;align-items:center;gap:4px;
  font-size:13px;color:var(--sage-deep);padding:2px 8px;margin:2px -6px -2px 0;border-radius:999px;
  opacity:0;transition:opacity .2s}
.turn:hover .remember,.remember:focus-visible{opacity:1}
.remember:hover{background:var(--page)}

/* факты, вынутые из этого разговора */
.facts{margin:16px 0 0;padding:12px 0 0;border-top:1px dashed var(--sage)}
.facts h3{font-size:15px;color:var(--sage-deep)}
.flist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.fitem{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 12px;border-radius:12px;
  background:var(--bed);font-size:15px}
.fwho{font-size:13px;color:var(--praline)}
.fdrop{grid-row:1/3;align-self:center;color:var(--praline);padding:4px;border-radius:50%}
.fdrop:hover{background:var(--page);color:var(--anx-ink)}

/* ─── «Запомнить»: всплывающая карточка ─────────────────────────────── */
.keep{position:absolute;z-index:15;width:min(320px,86vw);background:var(--page);border-radius:16px;
  padding:14px 16px 16px;box-shadow:0 20px 40px -22px rgba(74,55,40,.75),0 0 0 1px var(--gold);
  animation:keep-in .35s var(--ease)}
/* Анимация идёт по своим свойствам translate/scale: transform держит
   позиционирование карточки на телефоне, и трогать его нельзя. */
@keyframes keep-in{from{opacity:0;translate:0 6px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
.keep h3{font-family:var(--hand);font-weight:600;font-size:26px;line-height:1;color:var(--cocoa)}
.keep textarea{display:block;width:100%;margin:10px 0 0;min-height:78px;resize:vertical;
  background:var(--beige);color:var(--cocoa);border:0;border-radius:12px;padding:9px 12px;
  font-size:15.5px;line-height:1.45;box-shadow:0 0 0 1px var(--mousse) inset}
.keep textarea:focus-visible{box-shadow:0 0 0 1px var(--sage) inset}
.keep .row{margin:12px 0 0;display:flex;align-items:center;gap:10px}
.keep .row .act{margin-left:auto}

/* ─── Кнопки ────────────────────────────────────────────────────────── */
.act{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;
  font-size:15px;color:var(--sage-deep);box-shadow:0 0 0 1px var(--sage) inset;
  transition:background .2s,color .2s}
.act:hover{background:var(--sage-soft)}
.act:disabled{opacity:.5;cursor:default;background:none}
.act.quiet{color:var(--praline);box-shadow:none}
.act.quiet:hover{background:var(--bed);color:var(--cocoa)}

/* Главная кнопка: пилюля, за курсором идёт тёплый свет, у краёв разгорается сильнее.
   Тело — мусс и страница, свет — золото через медовый в прозрачное. */
.glow{--x:50%;--edge:12%;--out:0;--in:0;position:relative;z-index:0;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:9999px;background:none;color:var(--cocoa);box-shadow:none}
.glow:hover{background:none;color:var(--cocoa)}
.act.glow{padding:7px 22px;font-size:15px;font-weight:500}
.remember.glow{padding:4px 14px;font-size:13px;margin:2px -2px -2px 0}
.glow::before{content:'';position:absolute;inset:-7px;border-radius:9999px;z-index:-2;
  pointer-events:none;
  background:radial-gradient(ellipse 44% 85% at var(--edge) 50%,
    rgba(250,240,214,.95) 0%,rgba(201,169,97,.9) 26%,rgba(201,169,97,.42) 50%,
    rgba(201,169,97,.13) 68%,rgba(201,169,97,0) 82%);
  filter:blur(8px);opacity:var(--out);transition:opacity .32s var(--ease)}
.gfx{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:linear-gradient(100deg,var(--mousse) 0%,#EDE0C7 46%,var(--page) 100%);
  box-shadow:0 0 0 1px rgba(201,169,97,.6) inset,0 1px 0 rgba(255,255,255,.6) inset}
.gfx::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(100px 100px at var(--x) 50%,
    #FFFDF4 3%,rgba(242,226,180,.95) 24%,rgba(201,169,97,.5) 45%,rgba(201,169,97,0) 76%);
  opacity:var(--in);transition:opacity .2s ease-out}
@media (hover:none),(pointer:coarse){.glow::before,.gfx::after{display:none}}
@media (prefers-reduced-motion:reduce){.glow::before,.gfx::after{display:none;transition:none}}

/* ─── Закладки тетради (таски 05 и 06) ──────────────────────────────── */
.tabs{display:flex;flex-direction:column;gap:6px;padding-top:14px;grid-column:2;grid-row:1}
.tab{font-family:var(--hand);font-weight:600;font-size:23px;line-height:1;color:var(--praline);
  padding:10px 14px 10px 18px;border-radius:0 14px 14px 0;background:var(--bed);
  box-shadow:0 0 0 1px rgba(201,169,97,.35);margin-left:-1px;
  transition:background .25s,transform .3s var(--ease),color .2s}
.tab:hover{transform:translateX(3px);color:var(--cocoa)}
.tab[aria-selected="true"]{background:var(--sage-soft);color:var(--sage-deep);transform:translateX(4px)}

/* ─── Тост ──────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;
  background:var(--sage-deep);color:var(--page);padding:10px 18px;border-radius:999px;font-size:15px;
  max-width:min(90vw,540px);box-shadow:0 12px 30px -12px rgba(74,55,40,.6);
  transition:transform .5s var(--ease),opacity .3s;z-index:30;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.bad{background:var(--anx-ink)}

/* ─── Заготовки разделов, которые наполнят таски 05 и 06 ────────────── */
.soon{color:var(--praline);font-style:italic}

/* ─── Телефон ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .book{padding:16px 14px 96px}
  .top{gap:10px;padding-bottom:10px}
  .brand{font-size:32px;margin-right:auto}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;gap:0;
    background:var(--page);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 26px -20px rgba(74,55,40,.8),0 -1px 0 var(--gold)}
  .navlink{flex:1;min-width:0;font-size:11px;padding:4px 2px 3px;gap:1px;border-radius:10px;
    text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex}
  .navlink .ni{display:block;width:22px;height:22px}
  .navlink::after{display:none}
  .navlink[aria-current="page"]{background:var(--sage-soft)}
  .toolbar{gap:8px;margin-top:14px}
  .views{margin-right:auto}
  .view{padding:5px 10px;font-size:14px}
  .rangenav{order:3;width:100%;justify-content:space-between;margin-left:0}
  #range{flex:1;font-size:23px;min-width:0}
  .layout{grid-template-columns:1fr;gap:16px}
  .cal{min-height:0}
  .mgrid{gap:4px}
  .mday{min-height:58px;padding:6px;border-radius:10px}
  .mnum{font-size:15px}
  .msum,.mtoday{display:none}
  /* В узкой клетке слово не помещается — остаётся терракотовый лист, текст читает голос. */
  .alert-mark{width:9px;height:9px;top:6px;right:6px;background:var(--anx);
    border-radius:0 9px 0 9px;overflow:hidden;text-indent:-999px}
  .dots .dot{width:10px;height:10px}
  .wk-head,.wk-body{gap:0 4px}
  /* В виде «День» заголовок — дверь к сводке и списку разговоров: на телефоне
     панель не помещается рядом, и открыть её больше нечем. */
  .wk.day .wk-day{background:var(--sage-soft);border-radius:12px}
  .wopen{display:block}
  .panel{position:fixed;inset:0;z-index:25;border-radius:0;overflow:auto;transform:translateY(100%);
    transition:transform .55s var(--ease);padding:16px 16px 32px}
  .panel.open{transform:none}
  .pclose{display:grid}
  .turns{max-height:none;overflow:visible}
  .turn{max-width:100%}
  .remember{opacity:1}
  .keep{position:fixed;left:50%;bottom:16px;top:auto;transform:translateX(-50%);width:min(360px,92vw)}
  /* Пять закладок в одну строку телефона не встают: «Правила» вылезали
     за край бумаги. Кладём их в две строки, каждая тянется по своей. */
  .tabs{flex-direction:row;flex-wrap:wrap;padding:0 0 10px;gap:6px}
  .tab{flex:1 1 auto;text-align:center;padding:8px 10px;border-radius:12px;margin:0;
    font-size:21px}
  .tab[aria-selected="true"],.tab:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   Таск 05: шесть картинок, шапка с инструментами, ящик, Память,
   Напоминания, Колонка, Здоровье, Поиск.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Шесть картинок ────────────────────────────────────────────────────
   Все числа контраста считаны по худшему пикселю каждой картинки:
   композит в sRGB, как его делает браузер.
   · praline — фон всего сайта: экран входа (45%) и подстилка внутренних
     страниц (.pagebed, те же 45%). Под читаемой колонкой её гасит вуаль
     .book (88% бежевого): какао 9.09:1, пралине 5.05:1, шалфей 5.25:1,
     тревога 4.79:1. Она же — кружок знака в шапке (55%, знак 3.38:1).
   · leaves — пустая неделя и пустой день (.wk-empty): листья в полную силу,
     текста поверх них нет — одна короткая надпись на светлой плашке (92%):
     какао 9.32:1, пралине 5.18:1, шалфей 5.38:1.
   · grass — метёлки слева в шапке раздела, заголовок в свободном поле
     справа; хвост затухания уходит под текст на 6%: какао 9.00:1,
     пралине 5.12:1 (вместе с бумагой 16%). Подпись .shead .hint садится
     как раз в хвост — там шалфей 4.61:1, на чистой бумаге 5.01:1.
   · paper — подложка листов, панелей и ящика, 16%: какао 9.25:1,
     пралине 4.82:1, шалфей 5.01:1, тревога 4.87:1.
   · gold-line — разделитель между блоками, повтор по горизонтали, текста нет.
   · blanket — пустые состояния разделов; мелкого текста поверх нет, только
     короткая надпись на светлой плашке (92%): какао 9.21:1. */

/* Молочные разводы с золотыми искрами — тот же фон, что на экране входа,
   и той же мягкости (45%). */
.pagebed{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(../img/praline.webp) center/cover no-repeat;opacity:.45}

/* Страница-разворот лежит на подстилке: вуаль гасит разводы ровно настолько,
   чтобы самый мелкий текст остался читаемым. */
.book{background:color-mix(in srgb,var(--beige) 88%,transparent);border-radius:28px;
  box-shadow:0 34px 80px -60px rgba(74,55,40,.85)}

/* Бумага ручного отлива — общая фактура листов, панелей и ящика. */
.sheet,.panel,.drawer,.shead{
  background-image:linear-gradient(color-mix(in srgb,var(--page) 84%,transparent),
                                   color-mix(in srgb,var(--page) 84%,transparent)),
    url(../img/paper.webp);
  background-size:auto,cover;background-position:center;background-repeat:no-repeat}

/* Шапка раздела: метёлки слева, заголовок по свободному полю справа. */
.shead{position:relative;overflow:hidden;background-color:var(--page);border-radius:18px;
  padding:16px 22px 16px 190px;min-height:96px;align-items:center;
  box-shadow:0 0 0 1px rgba(201,169,97,.3)}
.shead::before{content:'';position:absolute;left:0;top:0;bottom:0;width:236px;
  background:url(../img/grass.webp) left center/auto 130% no-repeat;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 0 112px,rgba(0,0,0,.5) 162px,
    rgba(0,0,0,.067) 190px,transparent 236px);
  mask-image:linear-gradient(90deg,#000 0 112px,rgba(0,0,0,.5) 162px,
    rgba(0,0,0,.067) 190px,transparent 236px)}
.shead h2,.shead .hint{position:relative}

/* Золотая ветка — черта между блоками. */
.rule{height:26px;margin:24px 0 20px;opacity:.9;
  background:url(../img/gold-line.webp) center/auto 300% repeat-x}

/* Пустое состояние: вязаный плед и одна короткая надпись на плашке. */
.nothing{position:relative;display:grid;place-items:center;min-height:156px;margin:14px 0 0;
  border-radius:16px;overflow:hidden;background:url(../img/blanket.webp) center/cover}
.nothing p{margin:0;padding:9px 20px;border-radius:999px;font-size:16px;color:var(--cocoa);
  background:color-mix(in srgb,var(--page) 92%,transparent);
  box-shadow:0 3px 14px -6px rgba(74,55,40,.7)}

/* Знак в шапке — на кружке пралине с золотой обводкой. */
.brand svg{background-color:var(--page);border-radius:50%;padding:5px;
  background-image:linear-gradient(color-mix(in srgb,var(--page) 45%,transparent),
                                   color-mix(in srgb,var(--page) 45%,transparent)),
    url(../img/praline.webp);
  background-size:auto,cover;background-position:center;
  box-shadow:0 0 0 1px var(--gold),0 3px 10px -6px rgba(74,55,40,.8)}

/* ─── Инструменты шапки: поиск, колонка, здоровье ───────────────────── */
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.findbox{position:relative;display:flex;align-items:center}
.findbox input{width:15rem;max-width:40vw;padding:7px 38px 7px 14px;border:0;border-radius:999px;
  background:var(--page);color:var(--cocoa);font-size:15px;
  box-shadow:0 0 0 1px var(--mousse) inset;transition:box-shadow .2s}
/* Полной силы: пралине с прозрачностью .85 давало 4.12:1, без неё — 5.70. */
.findbox input::placeholder,.remfoot input::placeholder,
.tother input::placeholder{color:var(--praline);opacity:1}
.findbox input:focus-visible{box-shadow:0 0 0 1px var(--sage) inset;outline-offset:3px}
.findbox input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}
.findgo{position:absolute;right:3px;width:30px;height:30px;display:grid;place-items:center;
  color:var(--praline);border-radius:50%;transition:background .2s,color .2s}
.findgo:hover{background:var(--bed);color:var(--cocoa)}
.tool{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  font-size:15px;color:var(--praline);background:var(--page);
  box-shadow:0 0 0 1px var(--mousse) inset;transition:background .2s,color .2s}
.tool .ti{display:inline-flex}
.tool:hover{background:var(--sage-soft);color:var(--sage-deep)}
.tool[aria-expanded="true"]{background:var(--sage-soft);color:var(--sage-deep);
  box-shadow:0 0 0 1px var(--sage) inset}
.dotbtn{padding:6px 10px}
.dotbtn .dot{margin:0;width:13px;height:13px}
.leave{background:var(--page);box-shadow:0 0 0 1px var(--mousse) inset;padding:6px 13px}

/* ─── Ящик: колонка, здоровье, поиск ────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:28;background:rgba(74,55,40,.34);
  backdrop-filter:blur(2px);animation:scrim-in .35s var(--ease)}
@keyframes scrim-in{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:29;width:min(30rem,100%);
  background-color:var(--page);overflow-y:auto;overscroll-behavior:contain;
  padding:22px 24px 40px;translate:100% 0;visibility:hidden;
  box-shadow:-24px 0 60px -40px rgba(74,55,40,.9),-1px 0 0 rgba(201,169,97,.5);
  transition:translate .5s var(--ease),visibility .5s}
.drawer.open{translate:0 0;visibility:visible}
.dhead{position:relative;padding-right:38px;padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--gold)}
.dhead h2{font-family:var(--hand);font-weight:600;font-size:34px;line-height:1;color:var(--cocoa)}
.dhint{margin:2px 0 0;font-size:14.5px;color:var(--praline)}
.drawer .pclose{display:grid;right:-6px;top:-4px}
.dbody{padding-top:4px}
.block{margin:18px 0 0}
.block h3{font-size:16px;color:var(--sage-deep);margin-bottom:8px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.quiet{color:var(--praline);font-style:italic;margin:10px 0 0}

/* ─── Поля ввода: одно правило на все разделы ───────────────────────── */
.mdtext,.addfact textarea,.say textarea,.rfield input,
.remfoot input,.tother input,.lfield{display:block;width:100%;
  background:var(--beige);color:var(--cocoa);border:0;border-radius:12px;padding:10px 13px;
  font-size:16px;line-height:1.45;box-shadow:0 0 0 1px var(--mousse) inset;
  transition:box-shadow .2s}
.mdtext:focus-visible,.addfact textarea:focus-visible,.say textarea:focus-visible,
.rfield input:focus-visible,.remfoot input:focus-visible,.tother input:focus-visible,
.lfield:focus-visible{box-shadow:0 0 0 1px var(--sage) inset}
.addfact textarea,.say textarea,.lfield{resize:vertical;min-height:60px}

/* ─── Память: тетрадь с закладками ──────────────────────────────────── */
/* Закладки лежат в разметке до панели (порядок обхода), а на экране стоят
   справа от неё — место каждому назначено явно, а не порядком в разметке. */
.memory{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:0;align-items:start}
.docwrap{min-width:0;grid-column:1;grid-row:1}
.docbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.docbar a.act{text-decoration:none}
.dstate{margin-left:auto;font-size:14.5px;color:var(--praline)}
.dstate.wait{color:var(--anx-ink);font-weight:700}
.dstate.ok{color:var(--sage-deep);font-weight:700}
.saveerr{margin:0 0 10px;padding:9px 13px;border-radius:12px;background:var(--bed);
  color:var(--anx-ink);font-size:15px}
.draftbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  padding:9px 13px;border-radius:12px;background:var(--sage-soft);font-size:15px;
  color:var(--sage-deep)}
/* Предупреждение над полем «Правил»: тем же кирпичиком, что черновик, — но
   на бумаге, а не в шалфее, чтобы не путать «есть что вернуть» с «осторожно».
   Какао на подстилке 8.86:1, терракота-чернила 4.67:1. */
.warnbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:10px 14px;border-radius:12px;background:var(--bed);font-size:15px;
  line-height:1.45;color:var(--cocoa);max-width:70ch}
.warnbar b{font-weight:700;color:var(--anx-ink)}
/* Алиса говорит не тем, что в поле: беда, а не примечание. */
.warnbar.loud{background:color-mix(in srgb,var(--anx) 14%,var(--page))}
/* Вопрос «точно вернуть?» стоит на месте предупреждения — там, куда человек
   только что смотрел, и без окна поверх страницы. */
.warnbar.ask{background:var(--sage-soft);color:var(--sage-deep);font-weight:500}
/* Поле и предпросмотр — соседи, а не близнецы по высоте: `stretch` тянул
   поле под длинную биографию (пять с лишним тысяч пикселей), и «Сохранить»
   оставалась на другом конце страницы. Каждый прокручивается внутри себя,
   и кнопка всегда в шаге от того места, где правишь. */
.edit{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.mdtext{min-height:22rem;height:min(60vh,40rem);resize:vertical;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:14.5px;line-height:1.6;tab-size:2}
.mdview{display:none;max-width:70ch;max-height:min(60vh,40rem);overflow-y:auto;padding-right:6px;
  font-size:16.5px;line-height:1.55;overflow-wrap:break-word}
.mdview h3{font-size:21px;color:var(--sage-deep);margin:0 0 6px}
.mdview h4{font-size:18px;margin:18px 0 4px}
.mdview h5,.mdview h6{font-size:16.5px;margin:14px 0 3px;color:var(--praline)}
.mdview p{margin:0 0 9px}
.mdview ul{margin:0 0 9px;padding-left:20px}
.mdview li{margin:2px 0}
.mdview hr{border:0;border-top:1px dashed var(--sage);margin:16px 0}
.mdview strong{font-weight:700}
.mdview table{border-collapse:collapse;width:100%;margin:0 0 10px;font-size:15px}
.mdview th,.mdview td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--bed);
  vertical-align:top}
.mdview thead th{color:var(--sage-deep);border-bottom:1px solid var(--gold)}
.dmeta{margin:10px 0 0;font-size:14px;color:var(--praline)}

/* ─── Факты ─────────────────────────────────────────────────────────── */
.factsblock h3{font-size:20px}
.fhint{margin:4px 0 10px;color:var(--praline);font-size:15px}
.kinds{border-collapse:collapse;width:100%;max-width:62rem;font-size:15px;margin-bottom:18px}
.kinds th,.kinds td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bed);
  vertical-align:top;line-height:1.45}
.kinds thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sage-deep);border-bottom:1px solid var(--gold)}
.kinds tbody th{width:11rem;color:var(--cocoa);font-weight:700}
.kinds td{color:var(--praline)}
.addfact{max-width:46rem}
.addfact .factfoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.addfact .factfoot .act{margin-left:auto}
.flist.big{gap:8px}
.flist.big .fitem{grid-template-columns:1fr auto;padding:11px 14px;font-size:16px;
  background:var(--bed)}
.ftext{grid-column:1}
.fsrc{display:inline-flex;align-items:center;gap:4px}
.fsrc svg{width:14px;height:14px;flex:none}

/* Срок годности факта. «Действует до» — необязательный выбор в форме; тот же
   календарик, что у напоминаний, только раскрывается по нажатию: у большинства
   фактов срока нет, и место под месяц им зря не занимается. */
.due{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.duewhen{margin:0;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.1;
  color:var(--sage-deep)}
.duecal,.fcal{margin-top:10px;width:min(19rem,100%);padding:10px 12px 12px;
  border-radius:14px;background:var(--page);
  box-shadow:0 0 0 1px rgba(201,169,97,.55),0 12px 28px -24px rgba(74,55,40,.6)}
/* До какого числа факт живёт — рукой на полях, как подпись под напоминанием. */
.fdue{font-family:var(--hand);font-weight:600;font-size:19px;color:var(--sage-deep);
  white-space:nowrap}
/* Заголовок отложенной части списка. Та же строчка, что «Уже прозвучало»
   у напоминаний: мысль одна — это не пропало, это отжило. */
.fgone,.rdone{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sage-deep);font-weight:500;margin:20px 0 8px}
.fitem.gone{background:transparent;box-shadow:0 0 0 1px var(--mousse) inset}
.fitem.gone .ftext{color:var(--praline)}
/* Место каждой части строки названо явно: текст и подпись слева, корзина
   справа, дорога обратно — под ними во всю ширину. На автораскладку это
   не оставишь: кнопка с заданными строками встаёт первой и уводит текст
   под себя, а на телефоне подпись съедала половину строки. */
.factsblock .fitem{grid-template-columns:minmax(0,1fr) auto}
.factsblock .ftext{grid-column:1;grid-row:1}
.factsblock .fwho{grid-column:1;grid-row:2}
.factsblock .fdrop{grid-column:2;grid-row:1/3}
.fback{grid-column:1/3;grid-row:3;display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fcal{grid-column:1/3;grid-row:4}

/* ─── Напоминания ───────────────────────────────────────────────────── */
/* Форма — одна карточка-ведомость: месяц слева, колонка получасов справа
   со своей прокруткой, внизу во всю ширину строка «что сказать ·
   Поставить». Двумя отдельными блоками (сетка времени, потом календарь) она
   занимала два экрана; здесь оба выбора видно разом, и расписание попадает
   в первый экран вместе с формой.

   Системного поля со стрелочками тут нет нарочно: в готовых значениях не в чем
   ошибиться. Клавиатура остаётся у обоих выборов, а «другое время» — рядом. */
/* Заливка карточки сплошная, бумажной картинки под ней нет: на этой бумаге
   держатся все числа формы — какао 10.26:1, шалфей-глубокий 5.92:1,
   пралине 5.70:1, бумага на заливке шалфея 5.92:1. */
.remcard{max-width:46rem;border-radius:16px;background:var(--page);
  box-shadow:0 0 0 1px rgba(201,169,97,.55),0 12px 28px -24px rgba(74,55,40,.6)}
.remgrid{display:grid;grid-template-columns:minmax(0,1fr) 6.6rem}
.remcal{min-width:0;padding:10px 12px 12px}
/* Колонка времени берёт рост у соседнего календаря, а не подпирает свой:
   поэтому она растянута внутри клетки и прокручивается внутри себя. */
.remcol{position:relative;min-height:11rem;border-left:1px solid rgba(201,169,97,.45)}
.tcol{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px 8px 10px}
.tgrid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-auto-rows:min-content;gap:2px;
  scroll-padding:8px 0}
.tslot{padding:4px 6px;border-radius:9px;text-align:center;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--cocoa);transition:background .2s,color .2s}
.tslot:focus-visible{outline-offset:-2px}
.tslot:hover{background:var(--sage-soft);color:var(--sage-deep)}
.tslot[aria-selected="true"]{background:var(--sage-deep);color:var(--page);font-weight:700}
/* Второй путь к тому же значению: набрать время, которого в колонке нет. */
.tother{display:block;margin-top:8px;font-size:12.5px;color:var(--sage-deep);text-align:center}
.tother input{margin-top:2px;text-align:center;padding:5px 4px;font-size:15px;
  font-variant-numeric:tabular-nums}

/* Календарик выбора дня: тот же месяц, что в календаре разговоров, собранный
   из monthGrid — второго правила раскладки месяца в проекте нет. Недели —
   настоящие строки (role=row), поэтому месяц читается диктором как таблица. */
.dcnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.dcname{font-family:var(--hand);font-weight:600;font-size:23px;color:var(--cocoa)}
.dcgrid{display:flex;flex-direction:column;gap:2px}
.dcrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dcwd{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sage-deep);text-align:center;padding-bottom:2px}
.dcday{height:30px;display:grid;place-items:center;border-radius:9px;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--cocoa);transition:background .2s,color .2s}
.dcday:focus-visible{outline-offset:-2px}
.dcday:hover:not(:disabled){background:var(--sage-soft);color:var(--sage-deep)}
.dcday.out{opacity:.55}
/* Своё имя, а не общее `.today`: тем классом назван «Сегодня» на панели
   календаря, и его подчёркивание золотом протекало в клетку числа. */
.dcday.dctoday{box-shadow:0 0 0 1.5px var(--gold) inset;font-weight:700}
/* Прошедший день не выбрать. Видно это по тому, что под ним нет плашки,
   а не по бледности: цифру всё равно надо читать (пралине на бумаге 5.70:1). */
.dcday:disabled{color:var(--praline);cursor:default}
.dcday.sel{background:var(--sage-deep);color:var(--page);font-weight:700}
.dcday.sel:hover{background:var(--sage-deep);color:var(--page)}

/* Подвал карточки: что сказать и «Поставить» — одной строкой. */
.remfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px 11px;
  border-top:1px solid rgba(201,169,97,.45)}
.remfoot input{flex:1 1 15rem;min-width:0}
.remcard .act.glow{flex:none}

/* Как часто — под карточкой, тем же переключателем, что «Месяц / Неделя / День».
   Рядом — что получится, словами: подпись меняется от любого из трёх выборов. */
.remmodes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:46rem;
  margin-top:12px}
.remwhen{margin:0;font-family:var(--hand);font-weight:600;font-size:23px;line-height:1.1;
  color:var(--sage-deep)}
/* На узком экране панель календаря расталкивает свои переключатели
   (`.views{margin-right:auto}`) — здесь подпись обязана стоять сразу за ними. */
.remmodes .views{margin-right:0}
.remmodes+.rule{margin:14px 0 12px}

/* «Каждый день» прячет календарь: дата ежедневному не нужна. Колонка времени
   тогда разворачивается в сетку во всю ширину — узкая полоса вдоль пустого
   места читалась бы как сломанная вёрстка. */
.remcard.every .remgrid{grid-template-columns:minmax(0,1fr)}
.remcard.every .remcol{border-left:0;min-height:0}
.remcard.every .tcol{position:static;padding:10px 12px 12px}
.remcard.every .tgrid{max-height:11rem;gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(4.3rem,1fr))}
.remcard.every .tother{max-width:7rem;margin-left:auto;margin-right:auto}

.rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Читается «время · текст · переключатели»: место каждой части названо явно.
   На автораскладку это не оставишь — она уводила текст в третий столбец
   к правому краю, а подпись роняла на третью строку. */
.ritem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;
  padding:12px 14px;border-radius:14px;background:var(--bed);align-items:center;
  transition:opacity .25s}
.ritem.off{opacity:.62}
/* Разовое, чей день прошёл: не выброшено, а отложено в конец списка.
   Заголовок этой части общий с «Срок вышел» у фактов — он выше, в блоке фактов. */
.ritem.done{background:transparent;box-shadow:0 0 0 1px var(--mousse) inset}
.ritem.done .rtime{color:var(--praline)}
.rtime{grid-column:1;grid-row:1/3;font-weight:700;font-size:21px;
  font-variant-numeric:tabular-nums;align-self:center;color:var(--cocoa)}
.rtext{grid-column:2;grid-row:1;font-size:16.5px}
.rnote{grid-column:2;grid-row:2;font-size:13.5px;color:var(--praline)}
.racts{grid-column:3;grid-row:1/3;align-self:center;display:flex;align-items:center;gap:6px}
.sw{width:46px;height:26px;border-radius:999px;background:var(--mousse);position:relative;
  flex:none;transition:background .25s}
.sw[aria-checked="true"]{background:var(--sage)}
.sw .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--page);box-shadow:0 1px 4px -1px rgba(74,55,40,.7);
  transition:translate .3s var(--ease)}
.sw[aria-checked="true"] .knob{translate:20px 0}

/* ─── Колонка ───────────────────────────────────────────────────────── */
.sstate{margin:0 0 4px;padding:9px 13px;border-radius:12px;font-size:15px;line-height:1.4}
.sstate.ok{background:var(--sage-soft);color:var(--sage-deep)}
.sstate.wait{background:var(--bed);color:var(--anx-ink)}
.say h3{margin-bottom:8px}
.recnote{margin:8px 0 0;font-size:14.5px;color:var(--sage-deep)}
.recnote.bad{color:var(--anx-ink)}
label.act{cursor:pointer}
#recbtn.recording{color:var(--anx-ink);box-shadow:0 0 0 1px var(--anx) inset}
#recbtn.recording svg{animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.vgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-bottom:4px}
.vbtn{display:grid;place-items:center;padding:8px 0;border-radius:10px;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--praline);background:var(--bed);
  transition:background .2s,color .2s}
.vbtn:hover{background:var(--sage-soft);color:var(--sage-deep)}
.vhint{margin:10px 0 0;font-size:14px;color:var(--praline);line-height:1.4}
.vlast{margin:3px 0 0;font-size:15px;color:var(--cocoa)}
.callhint{margin:0;font-size:15px;line-height:1.5;color:var(--praline)}
.callhint svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.callhint b{color:var(--cocoa)}
.llist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.litem{padding:10px 13px;border-radius:12px;background:var(--bed)}
.ltext{display:block;font-size:15.5px;line-height:1.45}
.lmeta{display:block;margin-top:3px;font-size:13px;color:var(--praline);
  font-variant-numeric:tabular-nums}
/* Очередь и прочитанное — два списка под своими заголовками. Ждущее письмо
   обведено золотом и объяснено словом: разницу между «ещё можно поправить»
   и «уже сказано вслух» человек должен увидеть раньше, чем нажмёт кнопку. */
.lhead{margin:16px 0 7px;font-size:14px;font-weight:700;color:var(--sage-deep)}
.lhead:first-child{margin-top:0}
.lnone{margin:0;font-size:14.5px;color:var(--praline)}
.litem.wait{background:var(--page);box-shadow:0 0 0 1px var(--gold) inset}
.lwait{display:block;margin-bottom:4px;font-size:13px;font-weight:700;color:var(--praline)}
.lrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.lrow .act{padding-left:11px;padding-right:13px}

/* ─── Здоровье ──────────────────────────────────────────────────────── */
.hlist{margin:0;display:flex;flex-direction:column;gap:2px}
.hrow{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:10px;padding:8px 0;
  border-bottom:1px solid var(--bed)}
.hrow:last-child{border-bottom:0}
.hrow dt{font-weight:700;font-size:15px}
.hrow dd{margin:0;font-size:15px;color:var(--praline);line-height:1.4}
.hrow.bad dd{color:var(--anx-ink)}
.hrow .dot{vertical-align:0}
.nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nitem{display:grid;gap:2px;padding:10px 13px;border-radius:12px;background:var(--bed)}
/* Тревогу выделяет терракотовая обводка, а не тёмная заливка: на прежней
   (16% тревоги над --bed) подпись давала 4.09:1, а время 4.31:1. */
.nitem.alert{background:color-mix(in srgb,var(--anx) 14%,var(--page));
  box-shadow:0 0 0 1px var(--anx) inset}
.nkind{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sage-deep)}
.nitem.alert .nkind{color:var(--anx-ink)}
.ntext{font-size:15.5px;line-height:1.45}
.nat{font-size:13px;color:var(--praline);font-variant-numeric:tabular-nums}

/* ─── Поиск ─────────────────────────────────────────────────────────── */
.slist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sitem{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 13px;
  border-radius:12px;background:var(--bed);text-decoration:none;color:inherit;
  transition:background .2s,transform .25s var(--ease)}
.sitem:hover{background:var(--sage-soft);transform:translateX(2px)}
.swho{font-weight:700;font-size:14px}
.sat{font-size:13px;color:var(--praline)}
.stext{grid-column:1/3;font-size:15.5px;line-height:1.45}

/* ─── Широкий экран: предпросмотр тетради рядом с полем ─────────────── */
@media (min-width:1024px){
  .edit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .mdview{display:block}
}

/* ─── Телефон ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Подстилка уходит вниз, под конец страницы: там нет ни строчки текста,
     и листья видны в полную силу, ничего не портя. */
  .book{border-radius:0;margin-bottom:132px;padding-bottom:34px;box-shadow:none}
  .shead{padding:12px 16px 12px 120px;min-height:78px;border-radius:14px}
  .shead::before{width:152px;
    -webkit-mask-image:linear-gradient(90deg,#000 0 68px,rgba(0,0,0,.5) 100px,
      rgba(0,0,0,.067) 120px,transparent 152px);
    mask-image:linear-gradient(90deg,#000 0 68px,rgba(0,0,0,.5) 100px,
      rgba(0,0,0,.067) 120px,transparent 152px)}
  .shead h2{font-size:23px}
  .shead .hint{font-size:19px}
  .tools{width:100%;gap:6px}
  .findbox{flex:1}
  .findbox input{width:100%;max-width:none}
  .tool span:not(.ti){display:none}
  .tool{padding:6px 10px}
  .drawer{width:100%;padding:18px 16px 40px;
    translate:0 100%;transition:translate .5s var(--ease),visibility .5s}
  .drawer.open{translate:0 0}
  .memory{grid-template-columns:1fr}
  /* Одна колонка: закладки сверху, тетрадь под ними — тем же порядком,
     каким они лежат в разметке; `order` для этого больше не нужен. */
  .tabs{grid-column:1;grid-row:1}
  .docwrap{grid-column:1;grid-row:2}
  .mdtext{min-height:16rem;height:auto}
  .kinds tbody th{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .kinds td{display:block;padding-top:0}
  .kinds thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ritem{grid-template-columns:auto minmax(0,1fr);gap:2px 12px}
  .racts{grid-row:3;grid-column:1/3;justify-content:flex-end;margin-top:4px}
  .rule{height:20px;margin:18px 0 14px}
  .remmodes+.rule{margin:12px 0 10px}
}

/* Телефон: карточка складывается в одну колонку — календарь сверху, время под
   ним, своя прокрутка у времени остаётся. Двум колонкам тут уже не разойтись:
   на 375 узкая полоса времени съела бы половину месяца. */
@media (max-width:640px){
  .remgrid{grid-template-columns:minmax(0,1fr)}
  .remcol{border-left:0;border-top:1px solid rgba(201,169,97,.45);min-height:0}
  .tcol{position:static;padding:10px 12px 12px}
  .tgrid{max-height:10.5rem;gap:4px;grid-template-columns:repeat(auto-fill,minmax(4.3rem,1fr))}
  .tother{max-width:7rem;margin-left:auto;margin-right:auto}
  .remwhen{font-size:21px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Таск 06: Динамика (период, сравнение, пять графиков, повторы, тревоги),
   агент-аналитик и Справка.

   Цвета — только из палитры проекта. Мера рисуется шалфеем-глубоким
   (--sage-deep, 5,01:1 на бумаге), настроение — пятью состояниями,
   тревога — терракотой, золото остаётся линиями и акцентами.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Строка фильтра ────────────────────────────────────────────────── */
.dbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dbar a.act{text-decoration:none}
.dcsv{margin-left:auto}
.own{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.own .rfield input{width:11rem}
.dspan{margin:0 0 16px;font-family:var(--hand);font-weight:600;font-size:23px;line-height:1.15;
  color:var(--sage-deep)}
.dblock h3{font-size:20px;margin-bottom:4px}
.dhintline{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--praline);max-width:64ch}

/* ─── Сравнение с прошлым периодом ──────────────────────────────────────
   Не карточки, а ведомость: строка на меру, число, прошлое число и слова.
   Стрелка — нарисованная, из набора core.js. */
.cmp{margin:0}
.cmprow{display:grid;grid-template-columns:11rem 5.5rem 7rem minmax(0,1fr);gap:4px 16px;
  align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--bed)}
.cmprow:last-child{border-bottom:0}
.cmprow dt{font-weight:700;font-size:16px}
.cmprow dd{margin:0}
.cnow{font-size:24px;font-weight:700;line-height:1;color:var(--cocoa)}
.cwas{font-size:14px;color:var(--praline);font-variant-numeric:tabular-nums}
.cword{display:flex;align-items:center;gap:6px;font-size:15.5px;color:var(--praline)}
.carr{display:inline-flex;flex:none;color:var(--sage-deep)}
.carr.same{color:var(--mousse)}
.cmprow.bad .carr,.cmprow.bad .cword{color:var(--anx-ink)}

/* ─── «Рано судить» ─────────────────────────────────────────────────────
   Плашка вместо кривых. Живёт на пледе — том же, что у пустых состояний. */
.early{margin:6px 0 4px;padding:20px 22px;border-radius:16px;
  background:color-mix(in srgb,var(--sage-soft) 70%,var(--page));
  box-shadow:0 0 0 1px rgba(143,165,138,.55)}
.ehead{margin:0;font-family:var(--hand);font-weight:600;font-size:27px;line-height:1.1;
  color:var(--sage-deep)}
.ewhy{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--praline);max-width:60ch}

/* ─── Графики ───────────────────────────────────────────────────────── */
.charts{display:grid;grid-template-columns:1fr;gap:22px}
.chart{margin:0;min-width:0}
.chart figcaption{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.chart figcaption b{font-size:16px;font-weight:700;color:var(--cocoa)}
.chart figcaption span{font-size:13.5px;color:var(--praline)}
.chart svg{display:block;width:100%;overflow:visible}
/* Сетка и ось — тонкие сплошные, на шаг от бумаги: они держат числа, а не спорят с ними. */
.gl{stroke:color-mix(in srgb,var(--mousse) 70%,transparent);stroke-width:1}
.base{stroke:var(--mousse);stroke-width:1}
.ax{font:11px var(--text);fill:var(--praline)}
.ax.dx{font-size:10.5px}
/* Подпись последнего значения стоит поверх линии — обводим её цветом бумаги,
   иначе кривая перечёркивает число ровно там, где на него смотрят. */
.ax.end{font-weight:700;fill:var(--cocoa);font-size:12px;
  paint-order:stroke fill;stroke:var(--page);stroke-width:3.5px;stroke-linejoin:round}
.bar{fill:var(--sage-deep)}
.line{fill:none;stroke:var(--sage-deep);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.area{fill:var(--sage);opacity:.16}
/* Кольцо цвета бумаги вокруг точки: она остаётся видной там, где пересекает линию. */
.dot-mark{fill:var(--sage-deep);stroke:var(--page);stroke-width:2}
/* Одинокий день между двумя молчаливыми: отрезка из одной точки не видно. */
.dot-lone{fill:var(--sage-deep)}
.hit{fill:transparent;transition:fill .15s}
.hit:hover{fill:color-mix(in srgb,var(--sage) 14%,transparent)}

/* лента настроения: клетка на день, строка на человека.
   Девяносто клеток по 5 px в 375 не помещаются — лента едет внутри своей
   рамки, а страница остаётся без горизонтальной прокрутки. Обе строки
   в одной рамке: разъехавшись, они перестали бы стоять день под днём. */
.rbwrap{overflow-x:auto;overscroll-behavior-x:contain}
.ribbon{display:flex;flex-direction:column;gap:6px;min-width:min-content}
/* Второй столбец не уже своей ленты: с `minmax(0,…)` строка соглашалась сжаться
   до имени, клетки вылезали за неё, и прижатое имя обрезалось краем рамки. */
.rbrow{display:grid;grid-template-columns:5.5rem minmax(min-content,1fr);gap:10px;
  align-items:center}
/* Имя держится у левого края: уехав, оно оставило бы полосу без хозяина. */
.rbname{position:sticky;left:0;z-index:1;font-size:14px;font-weight:700;color:var(--cocoa);
  background:var(--page)}
.rbline{display:flex;gap:2px}
.rbc{flex:1;min-width:5px;height:24px;border-radius:0 6px 0 6px;background:var(--bed)}
.rbc.calm{background:var(--calm)}.rbc.joy{background:var(--joy)}
.rbc.sad{background:var(--sad)}.rbc.anx{background:var(--anx)}
.rbc.lost{background:var(--lost)}
.rbc.none{background:var(--bed);box-shadow:0 0 0 1px var(--mousse) inset}
.rblegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;
  color:var(--praline)}
.lg{display:inline-flex;align-items:center;gap:5px}
.lg .rbc{flex:none;width:12px;height:12px;min-width:0;border-radius:0 4px 0 4px}

/* доля тревожных дней: мера против предела, а не кривая.
   Дорожка — светлый шаг той же терракоты, что и заливка: у одной меры
   один цвет в двух силах, а не терракота на бежевом пледе из другого места. */
.meter{height:18px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--anx) 14%,var(--page));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--anx) 35%,var(--page)) inset}
/* Ширина ставится один раз при отрисовке и не едет: ни подкраски ради,
   ни анимации. Ноль тревожных дней — пустая дорожка, а не полоска в пиксель:
   терракота на экране обязана значить настоящую тревогу. */
.mfill{height:100%;background:var(--anx);border-radius:999px}
.mnote{margin:9px 0 0;font-size:15px;color:var(--praline)}
.mnote b{font-size:20px;color:var(--anx-ink);margin-right:6px}

/* числа таблицей — двойник графиков: до каждого значения можно добраться без мыши */
.numbers{margin-top:16px}
/* Семь колонок в 375 пикселей не влезают: таблица прокручивается внутри себя,
   а страница остаётся без горизонтальной прокрутки. */
.ntabwrap{overflow-x:auto;margin-top:12px}
.ntab{border-collapse:collapse;width:100%;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.ntab th,.ntab td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--bed)}
.ntab thead th{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sage-deep);border-bottom:1px solid var(--gold);white-space:nowrap}
.ntab tbody th{font-weight:700;color:var(--cocoa)}
.ntab td{color:var(--praline)}

/* ─── Повторы ───────────────────────────────────────────────────────── */
.reps{border-collapse:collapse;width:100%;font-size:15.5px}
.reps th,.reps td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bed);
  vertical-align:top;line-height:1.45}
.reps thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sage-deep);border-bottom:1px solid var(--gold)}
.reps tbody th{color:var(--cocoa);font-weight:700}
.reps td{color:var(--praline)}
.reps .rn{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ─── Тревоги ───────────────────────────────────────────────────────── */
.alist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.aitem{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 13px;
  border-radius:12px;text-decoration:none;color:inherit;
  background:color-mix(in srgb,var(--anx) 14%,var(--page));
  box-shadow:0 0 0 1px var(--anx) inset;
  transition:background .2s,transform .25s var(--ease)}
.aitem:hover{background:color-mix(in srgb,var(--anx) 22%,var(--page));transform:translateX(2px)}
.adate{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--anx-ink)}
.awho{font-size:14px;color:var(--praline)}
.aquote{grid-column:1/3;font-size:15.5px;line-height:1.45}

/* ─── Аналитик ──────────────────────────────────────────────────────── */
.anbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.ancost{font-size:15px;color:var(--sage-deep);font-weight:700}
.anwait{margin:10px 0 0;padding:11px 14px;border-radius:12px;background:var(--sage-soft);
  color:var(--sage-deep);font-size:15.5px}
.anok{margin:10px 0 0;font-size:15.5px;color:var(--sage-deep);font-weight:700}
.anerr{margin:10px 0 0;padding:11px 14px;border-radius:12px;background:var(--bed);
  color:var(--anx-ink);font-size:15.5px;line-height:1.45;max-width:64ch}
.anh{margin:22px 0 8px;font-size:16px;font-weight:700;color:var(--sage-deep)}
.anh.big{font-family:var(--hand);font-weight:600;font-size:30px;line-height:1;
  color:var(--cocoa);margin:20px 0 12px}
.anrep{padding-top:2px}
.ansec{margin:0 0 16px;padding-left:14px;border-left:1px solid var(--gold)}
.ansec h5{margin:0 0 5px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sage-deep)}
.anlead{margin:0;font-size:17px;line-height:1.55;max-width:64ch}
.anitems{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.anitems li{display:flex;flex-direction:column;gap:2px;font-size:15.5px;line-height:1.45}
.anitems b{font-weight:700;color:var(--cocoa)}
.anitems q{color:var(--praline);font-style:italic}
.anitems.plain li{color:var(--cocoa)}
.anmeta{font-size:14px;color:var(--praline)}
.anmoods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  font-size:15px}
.anmoods li{display:flex;gap:6px 16px;flex-wrap:wrap}
.anmoods time{font-weight:700;font-variant-numeric:tabular-nums;min-width:6.5rem}
.anmoods span{color:var(--praline)}
.ankeep{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ankeep li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 13px;
  border-radius:12px;background:var(--bed)}
.ankeep li span{flex:1;min-width:12rem;font-size:15.5px;line-height:1.45}
.anhist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.anold{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:12px;
  background:var(--bed);transition:background .2s,transform .25s var(--ease)}
.anold:hover{background:var(--sage-soft);transform:translateY(-1px)}
.anold[aria-pressed="true"]{background:var(--sage-soft);
  box-shadow:0 0 0 1px var(--sage) inset}
.aospan{font-weight:700;font-size:15.5px;color:var(--cocoa)}
.aomade{font-size:13px;color:var(--praline)}

/* ─── Справка ───────────────────────────────────────────────────────── */
.hparts{margin:0}
.hprow{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:2px 18px;
  padding:14px 2px;border-bottom:1px solid var(--bed)}
.hprow:last-child{border-bottom:0}
.hprow dt{grid-row:1/4;font-weight:700;font-size:17px;color:var(--cocoa)}
.hprow dd{margin:0;grid-column:2}
.hpwhere{font-size:13px;letter-spacing:.03em;color:var(--sage-deep);font-weight:700}
.hpwhat{margin-top:3px;font-size:15.5px;line-height:1.5;max-width:64ch}
.hpvs{margin-top:5px;font-size:15px;line-height:1.5;color:var(--praline);max-width:64ch;
  font-style:italic}
.watch{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.watch li{display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-radius:14px;
  background:var(--bed)}
.watch b{font-size:16px;color:var(--cocoa)}
.watch span{font-size:15.5px;line-height:1.5;color:var(--praline);max-width:66ch}

/* ─── Две колонки графиков; тот же порог знает analytics.js ─────────── */
@media (min-width:760px){
  .charts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart.wide{grid-column:1/-1}
}

/* ─── Телефон ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .dbar{gap:8px}
  .dcsv{margin-left:0}
  .dspan{font-size:20px;margin-bottom:12px}
  /* Ведомость складывается в две строки: мера и число, под ними слова. */
  .cmprow{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0}
  .cmprow dt{grid-column:1;grid-row:1}
  .cnow{grid-column:2;grid-row:1;font-size:21px}
  .cwas{grid-column:2;grid-row:2;justify-self:end}
  .cword{grid-column:1;grid-row:2}
  .ehead{font-size:23px}
  .rbrow{grid-template-columns:4.4rem minmax(min-content,1fr);gap:8px}
  .rbc{height:20px}
  /* Таблицы складываются в строки: три колонки в 375 пикселей не помещаются. */
  .reps tbody th{display:block;padding-bottom:2px;border-bottom:0}
  .reps td{display:block;padding-top:0;padding-bottom:4px;border-bottom:0}
  .reps tbody tr{display:block;border-bottom:1px solid var(--bed)}
  .reps thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ntab{font-size:13.5px}
  .ntab th,.ntab td{padding:5px 6px}
  .hprow{grid-template-columns:minmax(0,1fr);gap:2px}
  .hprow dt{grid-row:auto}
  .hprow dd{grid-column:1}
  .anhist{flex-direction:column}
  .anold{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   Телефон как приложение: домашний экран iPhone, жидкое стекло у меню,
   тап-цели под палец.

   Правила лежат последними нарочно: они уточняют телефонные блоки выше,
   а не спорят с ними. Всё, что здесь, включается только на узком экране —
   десктоп остаётся прежним.
   ═══════════════════════════════════════════════════════════════════════ */

/* Высота нижнего меню одним числом: от неё считается и просвет под
   страницей, и отступ прокрутки. Второго такого числа в файле нет. */
/* --navh — полная высота плашки со стеклом, --navgap — её отрыв от края. */
:root{--navh:62px;--navgap:10px}

@media (max-width:900px){

  /* ─── Безопасные поля iPhone ──────────────────────────────────────────
     С домашнего экрана приложение занимает весь экран, включая «чёлку»
     и полосу-домой. Поля берутся из env(): в браузере они равны нулю,
     и вёрстка не меняется. Работают только при viewport-fit=cover —
     он проставлен в шаблонах. */
  .book{
    padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
            34px calc(14px + env(safe-area-inset-left));
    margin-bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom) + 24px)}

  /* ─── Шапка: не больше строки на брата ───────────────────────────────
     Раньше до первой полезной строки уходило 271 px из 852 — треть экрана.
     Знак, поиск и шапка раздела ужаты, картинка метёлок осталась. */
  .top{gap:8px;padding-bottom:8px}
  .brand{font-size:27px}
  .brand svg{width:29px;height:29px}
  .shead{padding:10px 14px 10px 98px;min-height:64px;border-radius:14px;margin:12px 0 10px}
  .shead::before{width:122px;
    -webkit-mask-image:linear-gradient(90deg,#000 0 54px,rgba(0,0,0,.5) 80px,
      rgba(0,0,0,.067) 98px,transparent 122px);
    mask-image:linear-gradient(90deg,#000 0 54px,rgba(0,0,0,.5) 80px,
      rgba(0,0,0,.067) 98px,transparent 122px)}
  .shead h2{font-size:21px}
  .shead .hint{font-size:17.5px;line-height:1.2}

  /* ─── Тап-цели: 44 px, как просит Apple ──────────────────────────────
     Кнопка ниже 44 px пальцем нажимается мимо. Правило одно на все
     разделы: поштучно такое не держится. */
  .view,.today,.act,.leave,.tool{min-height:44px}
  .view,.today,.act,.leave{display:inline-flex;align-items:center;justify-content:center}
  .tool{padding:0 14px}
  .leave{padding:0 15px}
  .tab{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .arrow,.pclose,.fdrop{width:44px;height:44px;display:grid;place-items:center}
  .fdrop{padding:0;border-radius:50%}
  .findbox input{min-height:44px;padding-right:48px}
  .findgo{width:42px;height:42px;right:2px}
  /* Календарик и колонка времени: 44 px растянули бы карточку на треть
     экрана, поэтому здесь предел разумного — 40 и 42. */
  .dcday{height:40px}
  .tslot{min-height:42px;display:grid;place-items:center}
  /* Своё время и переключатель «вслух»: сами они должны остаться мелкими
     (иначе поедет карточка), поэтому палец ловит невидимое поле вокруг. */
  .tother input{min-height:44px}
  .vbtn{min-height:44px;padding:0}
  .sw::after{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;
    transform:translateY(-50%)}

  /* ─── Нижнее меню: жидкое стекло ─────────────────────────────────────
     Плашка отрывается от края и плывёт над содержимым: сквозь неё видно
     страницу, размытую и чуть насыщенней. Три слоя дают стекло —
     размытие фона, золотая кромка волосок и белый блик по верхней грани.
     Блик рисует ::before, а не тень: тень внутри скруглённой плашки
     срезается углами, а градиент повторяет их. */
  .nav{
    left:calc(var(--navgap) + env(safe-area-inset-left));
    right:calc(var(--navgap) + env(safe-area-inset-right));
    bottom:calc(6px + env(safe-area-inset-bottom));
    padding:5px 5px;gap:2px;border-radius:24px;
    background:color-mix(in srgb,var(--page) 58%,transparent);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    box-shadow:
      0 0 0 .5px rgba(201,169,97,.6),
      0 1px 2px rgba(74,55,40,.10),
      0 12px 30px -14px rgba(74,55,40,.55),
      0 26px 60px -40px rgba(74,55,40,.7);
    isolation:isolate}
  .nav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(255,255,255,.72) 0,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 62%,
      rgba(255,255,255,.22) 100%);
    -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}

  /* Закладка раздела — своя стекляшка внутри стекла: чуть плотнее фона,
     с той же светлой гранью сверху. */
  .navlink{position:relative;z-index:1;min-height:52px;justify-content:center;
    font-size:11.5px;padding:6px 2px;gap:3px;border-radius:19px;
    transition:background .25s,color .2s,box-shadow .25s}
  .navlink .ni{width:24px;height:24px}
  .navlink[aria-current="page"]{
    background:color-mix(in srgb,var(--sage-soft) 78%,transparent);
    color:var(--sage-deep);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
               0 1px 2px rgba(74,55,40,.14),
               0 0 0 .5px rgba(143,165,138,.5)}
  /* Палец нажал — стекляшка проседает. Мгновенный отклик вместо hover,
     которого на телефоне нет. */
  .navlink:active{transform:scale(.94)}

  /* Стекла нет — Safari до 15.4, Firefox без включённого флага.
     Тогда плашка просто плотная: полупрозрачная была бы кашей. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .nav{background:color-mix(in srgb,var(--page) 97%,transparent)}
  }

  /* Край прокрутки: содержимое не обрывается под плашкой, а уходит в
     размытие. Слой размывает то, что под ним, а маска гасит размытие
     кверху — получается мягкая кромка, как в iOS. */
  /* Слой лежит в `.book`, а не на `body`: `.book` — своя система слоёв
     (z-index:1), и меню внутри неё считает высоту от неё же. С `body`
     размытие оказывалось поверх меню и съедало подписи разделов. */
  .book::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:19;pointer-events:none;
    height:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom) + 26px);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    background:linear-gradient(to top,
      color-mix(in srgb,var(--beige) 80%,transparent) 0,
      color-mix(in srgb,var(--beige) 26%,transparent) 46%,transparent 100%);
    -webkit-mask-image:linear-gradient(to top,#000 0,#000 40%,rgba(0,0,0,.42) 74%,transparent 100%);
    mask-image:linear-gradient(to top,#000 0,#000 40%,rgba(0,0,0,.42) 74%,transparent 100%)}

  /* Всплывающая подсказка встаёт над плашкой, а не за ней. */
  .toast{bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom) + 12px)}

  /* Прокрутка останавливается над стеклом, а не под ним: якорь и
     `scroll-into-view` больше не прячут строку за меню. */
  html{scroll-padding-bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom))}

  /* Всплывашка сохранения и страница дня встают над меню, не на нём. */
  .keep{bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom))}
  .panel{padding-bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom) + 24px)}
  .drawer{padding-bottom:calc(var(--navh) + var(--navgap)*2 + env(safe-area-inset-bottom) + 24px)}
}

/* Меньше движения — стекло остаётся, отклик кнопки убираем. */
@media (prefers-reduced-motion:reduce){
  .navlink:active{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   Досье: что бабушка рассказала сама.

   Читается как тетрадь, а не как таблица: слева её слова, под ними мелким
   дата и тема, справа три действия. Непривязанные к книге группы стоят
   первыми и помечены — это работа для Ильи, и прятать её вниз незачем.
   ═══════════════════════════════════════════════════════════════════════ */

.dossier{margin-top:4px}
.shead2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.shead2 h3{font-size:20px}
.shead2 .hint{font-family:var(--hand);font-size:19px;color:var(--sage-deep)}
.shead2 .act{margin-left:auto}

.dgroup{margin:16px 0 0}
.dgroup h4{font-size:16px;color:var(--sage-deep);margin:0 0 6px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* Не опознан — терракота словом, а не только цветом: на бумаге
   --anx-ink даёт 5.4:1, а цвет один слепой не различит. */
.dwarn{font-size:13px;font-weight:400;color:var(--anx-ink)}

.dcard{position:relative;background:var(--bed);border-radius:14px;
  padding:11px 14px;margin-bottom:6px}
.dgroup.dunknown .dcard{box-shadow:0 0 0 1px rgba(168,95,66,.35) inset}
/* Убранное не стираем — его видно бледным, и его можно вернуть. */
.dcard.ddropped{opacity:.5}
.dtext{margin:0;font-size:15.5px;line-height:1.45;color:var(--cocoa)}
.dmeta2{margin:3px 0 0;font-size:13px;color:var(--praline);
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.dquiet{color:var(--anx-ink);font-weight:700}

.dacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px}
.dacts .act{font-size:14px;padding:3px 10px}
.dacts .fdrop{margin-left:auto}

/* Выбор человека из книги: поле и найденные, каждый полным именем —
   девять Николаев отличаются только отчеством. */
.dpick{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(201,169,97,.5)}
.dfound{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.dfound .act{font-size:14px;padding:4px 11px;background:var(--page)}

@media (max-width:900px){
  .dacts{gap:4px}
  .dacts .act{min-height:44px}
  .dcard{padding:10px 12px}
}

/* Переходы по разделу «Память». Раздел вырос до трёх разных вещей, и
   последняя оказалась на 2034-м пикселе — два с половиной экрана вниз.
   Ссылки прилипают к верху: пролистал вниз — дорога назад не потерялась. */
.jump{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;
  margin:0 0 14px;padding:8px 0;
  background:linear-gradient(var(--beige) 78%,transparent)}
.jump button{font-size:15px;color:var(--sage-deep);
  padding:7px 14px;border-radius:999px;background:var(--page);
  box-shadow:0 0 0 1px var(--mousse) inset;transition:background .2s}
.jump button:hover{background:var(--sage-soft)}
html{scroll-behavior:smooth}
/* Якорь не должен упираться в прилипшую строку переходов. */
#j-docs,#j-facts,#j-told{scroll-margin-top:58px}
@media (max-width:900px){
  .jump{padding:6px 0;margin-bottom:10px}
  .jump button{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
  #j-docs,#j-facts,#j-told{scroll-margin-top:66px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Правка записи досье и пометка «уже в тетради». */
.dedit{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(201,169,97,.5)}
.dedit textarea{min-height:4.5rem}
.dinbook{font-size:13px;color:var(--sage-deep);align-self:center}
/* Её собственные рассказы — первая группа, и это видно. */
.dgroup:first-of-type h4{font-size:17px}

/* Подпись «что сюда писать». Одна строка под заголовком каждого блока:
   мест в «Памяти» стало четыре, и без подписей владелец в них путался. */
.vchto{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--praline);
  max-width:62ch}
.vchto b{color:var(--sage-deep);font-weight:700}

/* Куда уйдёт запись — сказано прямо в окошке «Запомнить». */
.keephint{margin:0 0 8px;font-size:13.5px;line-height:1.4;color:var(--praline)}
/* «Было» — не ошибка, а полка. Заголовок спокойный, пояснение мелким. */
.fgone span{font-weight:400;font-size:13.5px;color:var(--praline)}

/* Метка конца списка вместо кнопки «Показать ещё». Теперь это не кнопка,
   а подпись: доскроллил до неё — следующие реплики приходят сами.
   Оформление спокойное, без рамки: нажимать тут нечего. */
.more{background:none;cursor:default;color:var(--praline);font-style:italic;
  animation:pulse 1.6s ease-in-out infinite}
.more span{font-style:normal;font-size:13.5px;opacity:.75}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.more{animation:none}}