/* nikki.css — 日記 Nikki: дневник + идеи (волна 8, заход J1).
   Компоновка экранов #/nikki и #/ideas; цвета берутся из токенов (--sage-*,
   --accent-rgb), под body[data-wing="nikki"] они уже переопределены в индиго
   (theme-nikki.css) — здесь ни одного hex. Страница дня переиспользует готовый
   «бумажный лист» Блокнота (.rd-journal-page/.nb-editor-wrapper, notebook.css)
   напрямую — см. комментарий в начале render/nikki.js. */

.d-nikki {
  /* было 1080px (build #64) — заметно ýже ЛЮБОГО другого экрана приложения
     (Читалка/Дашборд/Термины и т.д. — 1240-1400px, см. CLAUDE.md), из-за
     постоянной 300px-колонки сайдбара поле ввода Блокнота оставалось
     ~700px. Приведено к тому же 1280px, что у большинства экранов —
     жалоба пользователя «поле для текста слишком маленькое», 2026-07-11. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 28px 80px;
}

/* ─── шапка: дата + навигация по дням ───
   Переключатель «Дневник|Идеи» отсюда убран (build #70) — теперь эту роль
   играют верхние вкладки «Главная»→«Дневник»/«Reader»→«Идеи» (app.js
   applyWingChrome), второй такой же контрол под шапкой был бы дублем.
   Раньше .nk-date-nav прижимался вправо (margin-left:auto) балансируя
   сегмент слева — единственный оставшийся блок центрируем целиком. */
.nk-chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.nk-date-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nk-nav-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--ink-fg-3);
  font-size: 15px;
  transition: background .12s, color .12s;
}
.nk-nav-btn:hover { background: var(--ink-2); color: var(--ink-fg); }
.nk-date-title {
  font-family: var(--serif);
  font-size: var(--t-18);
  font-weight: 500;
  color: var(--ink-fg);
  min-width: 220px;
  text-align: center;
}
.nk-today-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--accent-rgb));
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 999px;
  padding: 5px 12px;
  transition: background .12s, border-color .12s;
}
.nk-today-btn:hover { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .7); }

/* ─── настроение дня: строка чипов под шапкой (заход J2) ─── */
.nk-mood-row { margin-bottom: 22px; }
.nk-mood-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nk-mood-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-fg-4);
  flex: 0 0 auto;
}
.nk-mood-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* .nk-chip — общий toggle-pill (настроение дня И фильтры типа/статуса в
   Идеях, заход J3) — одна кнопка-переключатель на все подобные случаи */
.nk-chip {
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  color: var(--ink-fg-2);
  transition: border-color .12s, color .12s, background .12s;
}
.nk-chip:hover { border-color: var(--ink-fg-3); color: var(--ink-fg); }
.nk-chip.is-active {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .6);
  color: rgb(var(--accent-rgb));
}
.nk-icon-btn {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-4);
  color: var(--ink-fg-3);
  font-size: 13px;
  transition: background .12s, color .12s;
}
.nk-icon-btn:hover { background: var(--ink-3); color: var(--ink-fg); }

/* инлайн-менеджер (переиспользует .mf-lang-manager из forms.css — тот же
   приём, что и book-mood-manager в material-form.js: паперная карточка
   как «плавающая» панель поверх тёмного фона) */
.nk-inline-mgr { margin-top: 10px; }

/* ─── основная сетка: страница + сайдбар ─── */
.nk-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.nk-main { min-width: 0; }
.nk-side { display: flex; flex-direction: column; gap: 18px; }

/* ─── общая карточка сайдбара (календарь / «в этот день» / недавние) ─── */
.nk-panel {
  background: var(--ink-2);
  border: 1px solid var(--ink-line-soft);
  border-radius: var(--r-8);
  padding: 14px;
}
.nk-panel h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-fg-3);
  margin: 0 0 10px;
}
.nk-panel-list { display: flex; flex-direction: column; gap: 2px; }
.nk-panel-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  gap: 2px;
  padding: 7px 8px;
  border-radius: var(--r-6);
  transition: background .12s;
}
.nk-panel-item:hover { background: var(--ink-3); }
.nk-panel-item .d {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: rgb(var(--accent-rgb));
}
.nk-panel-item .t {
  font-family: var(--serif);
  font-size: var(--t-13);
  line-height: 1.4;
  color: var(--ink-fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nk-more-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-fg-3);
}
.nk-more-btn:hover { color: rgb(var(--accent-rgb)); }

/* ─── вопрос дня (заход J2) ─── */
.nk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nk-panel-head h4 { margin: 0; }
.nk-prompt-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--ink-fg);
  margin: 0 0 10px;
}
.nk-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nk-answer-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--accent-rgb));
  border: 1px solid rgba(var(--accent-rgb), .4);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background .12s, border-color .12s;
}
.nk-answer-btn:hover { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .7); }
.nk-hint { font-family: var(--sans); font-size: 12px; color: var(--ink-fg-4); margin: 0; }

/* ─── цитата дня: эпиграф ПОД страницей (Hobonichi-стиль, заход J2) ───
   Живёт СНАРУЖИ .rd-journal-page (см. комментарий в render/nikki.js) — на
   обычном тёмном фоне приложения, поэтому обычные тёмные токены --ink-*, а
   не --paper-*. Акцентная карточка (тонкая рамка + слева акцентная полоса)
   — чтобы отличаться и от тёмного каркаса вокруг, и от кремовой страницы
   дневника над ней; первая версия ошибочно рисовала «бумажный» тёмный
   текст без бумаги под ним — было невидно (жалоба пользователя, чинили). */
.nk-epigraph {
  margin: 18px 0 0;
  padding: 16px 20px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-left: 3px solid rgb(var(--accent-rgb));
  border-radius: var(--r-8);
}
.nk-epigraph-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-15);
  line-height: 1.6;
  color: var(--ink-fg-2);
}
.nk-epigraph-source {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-fg-3);
  text-align: right;
  transition: color .12s;
}
.nk-epigraph-source:hover { color: rgb(var(--accent-rgb)); }

/* ─── мини-календарь ─── */
.nk-cal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nk-cal-title {
  font-family: var(--sans);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink-fg);
  min-width: 110px;
  text-align: center;
}
.nk-cal-weekdays,
.nk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.nk-cal-weekdays span {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-fg-4);
  text-align: center;
  padding-bottom: 4px;
}
.nk-cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-fg-2);
  border-radius: var(--r-4);
  transition: background .12s, color .12s;
}
.nk-cal-cell.is-empty { visibility: hidden; }
button.nk-cal-cell:hover { background: var(--ink-3); color: var(--ink-fg); }
.nk-cal-cell.is-today { color: rgb(var(--accent-rgb)); font-weight: 700; }
.nk-cal-cell.is-current {
  background: rgb(var(--accent-rgb));
  color: var(--ink-1);
  font-weight: 700;
}
.nk-cal-cell.has-entry::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb));
  transform: translateX(-50%);
}
.nk-cal-cell.is-current.has-entry::after { background: var(--ink-1); }
.nk-cal-cell.is-future { color: var(--ink-fg-4); opacity: .4; cursor: default; }
.nk-cal-empty-hint {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-fg-4);
  text-align: center;
}

/* ═══════════ Экран «Идеи» (заход J3) ═══════════ */

/* ─── тулбар: фильтры + счётчик + «+ идея» ─── */
.nk-idea-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.nk-idea-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.nk-idea-fgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.nk-idea-fclear {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-fg-4);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nk-idea-fclear:hover { color: var(--ink-fg-2); }
.nk-idea-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.nk-idea-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-fg-3);
  white-space: nowrap;
}

/* ─── лента карточек ─── */
.nk-idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.nk-idea-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line-soft);
  border-left: 3px solid var(--ink-fg-4);
  border-radius: var(--r-8);
  padding: 14px 16px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.nk-idea-card:hover { background: var(--ink-3); }
.nk-idea-card.k-blog { border-left-color: var(--rel-violet); }
.nk-idea-card.k-book { border-left-color: var(--rel-teal); }
.nk-idea-card.k-thought { border-left-color: var(--ink-fg-3); }
.nk-idea-card-head { display: flex; align-items: baseline; gap: 8px; }
.nk-idea-kind { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.nk-idea-title {
  font-family: var(--serif);
  font-size: var(--t-15);
  font-weight: 600;
  color: var(--ink-fg);
  line-height: 1.3;
}
.nk-idea-preview {
  font-family: var(--serif);
  font-size: var(--t-13);
  line-height: 1.5;
  color: var(--ink-fg-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nk-idea-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-line-soft);
}
.nk-idea-status-group { display: flex; gap: 3px; }
.nk-idea-status-dot {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-4);
  font-size: 11px;
  color: var(--ink-fg-4);
  opacity: .5;
  transition: opacity .12s, background .12s, color .12s;
}
.nk-idea-status-dot:hover { opacity: .85; background: var(--ink-1); }
.nk-idea-status-dot.is-active { opacity: 1; }
/* сплошная заливка --rel-* — тот же приём, что .nk-cal-cell.is-current
   (rgb(var(--accent-rgb)) + var(--ink-1)), а не полупрозрачный тон: у
   --rel-* нет rgb-триплетов для rgba()/color-mix(), только готовый цвет */
.nk-idea-status-dot.is-active.s-spark { background: var(--rel-amber); color: var(--ink-1); }
.nk-idea-status-dot.is-active.s-work  { background: var(--rel-blue);  color: var(--ink-1); }
.nk-idea-status-dot.is-active.s-used  { background: var(--rel-sage);  color: var(--ink-1); }
.nk-idea-src {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
button.nk-idea-src:hover { color: rgb(var(--accent-rgb)); }
.nk-idea-src.is-dead { font-style: italic; opacity: .6; }

/* прилёт к карточке идеи по ?focus= (переход из поиска/бейджа источника) —
   кольцо-вспышка вместо фона (у карточки уже есть свой фон+рамка) */
.nk-idea-card.nk-idea-flash { animation: nkIdeaFlash 1.6s ease; }
@keyframes nkIdeaFlash {
  0%, 100% { box-shadow: none; }
  12%      { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35); }
}

/* поле формы идеи с ошибкой валидации (пустой заголовок И текст) —
   input.is-invalid вместо инлайн-hex (CLAUDE.md §2: только токены) */
.mf-form input.is-invalid { border-color: var(--rel-red); }

/* ═══════════ Импорт старых записей (заход J4) ═══════════
   Модалка — переиспользует .mf-modal/.mf-form/.mf-section/.mf-field (forms.css),
   здесь только то, чего там ещё нет. */
.nk-import-file-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nk-import-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.nk-import-chunk {
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-6);
  padding: 10px 12px;
  background: var(--paper-2);
}
.nk-import-chunk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.nk-import-chunk-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--paper-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* НЕ .mf-cat-act — та стилизована только внутри .mf-lang-manager/.mf-person-check
   (проверено через forms.css перед использованием — урок build #56: правка
   невидимого/непроверенного CSS ничего не гарантирует) */
.nk-import-chunk-remove {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--paper-fg-3);
  font-size: 13px;
  transition: color .12s, border-color .12s;
  border: 1px solid transparent;
}
.nk-import-chunk-remove:hover { color: var(--paper-fg); border-color: var(--paper-line); }
.nk-import-date {
  font: 400 13px var(--sans);
  color: var(--paper-fg);
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-4);
  padding: 5px 8px;
}
.nk-import-date.is-invalid { border-color: var(--rel-red); }
.nk-import-preview {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--paper-fg-3);
  margin: 6px 0 0;
}

/* мобильная адаптация — структурный коллапс (сайдбар под страницу, календарь
   во всю ширину). Тонкая телефонная подстройка (≤640/≤420: лента идей, тулбар
   фильтров, тап-цели) — в styles/mobile.css (заход J5), по образцу остальных
   секций 物語 там же; здесь только структура ≤980 (проект держит этот брейк-
   пойнт для «планшета» — см. CLAUDE.md §10). Держать этот блок последним в файле. */
@media (max-width: 980px) {
  .d-nikki { padding: 20px 16px 60px; }
  .nk-grid { grid-template-columns: 1fr; }
  .nk-side { order: -1; }
  .nk-date-nav { margin-left: 0; width: 100%; justify-content: center; }
  .nk-chrome { flex-direction: column; align-items: stretch; }
}