@layer ui {
/* Заметки (ritm#382): экран «Заметки» и блок «Заметки дня» на «Дне».
   Строка заметки — запись дня: текст, под ним файлы и одна строка признаков
   (время, как записана, задача). Меню «⋯» — то же, что у мыслей (thoughts.css):
   поверх правого края, а не колонкой. */

/* --- шапка и поиск ----------------------------------------------------------- */

.notes-head .tday-space-pick,
.notes-head .tday-space {
  flex: none;
}

/* Поле поиска стоит всегда: на «Заметки» приходят в том числе искать. */
.notes-find {
  margin-bottom: var(--space-1);
}

.notes-more {
  margin: 0;
  text-align: center;
}

/* --- строка ------------------------------------------------------------------ */

.memo {
  /* Строка текста заметки: по её середине стоит «⋯» (ritm#295). */
  --memo-line: calc(var(--text-md) * 1.4);
  position: relative;
  /* Сеткой в одну колонку, а не флексом: «⋯» стоит в первой строке сетки и
     ходит вместе с текстом при любых полях строки — и у первой под шапкой,
     и у найденной с подложкой, и когда строка складывается при удалении. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

.card-head + .memo {
  border-top: 0;
  padding-top: 0;
}

/* Середина «⋯» — на середине первой строки текста, как у мыслей: рамкой
   ему служит первая строка сетки, а не края заметки, поэтому поля заметки в
   счёт не входят. Кнопка в 44 px выступает над меню на 8 px, значит, верх
   меню — на 14 px выше середины строки текста (ritm#295). Раньше верх
   ставили числом под строку телефона и под поля каждого вида заметки — на
   десктопе «⋯» стояла на 1,2 px выше, при удалении отставала на 8. */
.memo > .rowmenu {
  position: absolute;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  top: calc(var(--memo-line) / 2 - 14px);
  right: 0;
}

/* Текст — словами владельца, с переносами строк. Длинная заметка в списке —
   шесть строк; касание по тексту открывает правку (ritm#515), а в поле правки
   текст целиком. Справа — место под «⋯». */
.memo-text {
  margin: 0;
  padding-right: 36px;
  font-size: var(--text-md);
  line-height: var(--memo-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

/* Касание правит — указатель над текстом говорит то же. У «Заметок дня»
   строка — ссылка, указатель у неё свой. */
html.has-js article.memo .memo-text {
  cursor: text;
}

/* Правка на месте (поле карточки, fields.js): видна только в режиме правки —
   касание по тексту, «Изменить» в меню или ?edit=N без скрипта. */
.memo-edit {
  display: none;
  padding-right: 36px;
}

.memo.is-editing .memo-edit {
  display: flex;
}

.memo.is-editing .memo-text {
  display: none;
}

.memo .memo-input {
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--text);
  border-bottom-color: var(--accent);
}

.memo-files {
  margin: 2px 0;
}

/* «Приложить файл» в меню строки (ritm#395): поле выбора внутри пункта не
   видно — пункт сам открывает выбор, как скрепка панели захвата. */
.memo-attach input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Одна строка признаков: время, как записана, файлы, задача. Не переносится —
   длинное название задачи обрезается многоточием. */
.memo-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 24px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

.memo-meta .dot {
  color: var(--text-muted);
}

.memo-pin {
  display: inline-flex;
  color: var(--accent);
}

.memo-pin .ic {
  width: 14px;
  height: 14px;
}

.memo-task {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  text-decoration: none;
}

/* Пришли по ссылке — строку видно сразу: подложка, как у найденного. */
.memo.memo-focus {
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-2);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}

/* Шторка мысли, ставшей заметкой: вместо слов «сохранена заметкой» (они уже в
   шапке шторки) — дорога к самой заметке. */
.tsheet-stall-note {
  color: var(--accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

/* Складывание при удалении — как у мысли. */
.memo.is-leaving {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    height var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
  padding-top: 0;
  padding-bottom: 0;
}

/* Без скрипта меню не раскрыть — действия стоят списком под строкой. */
html:not(.has-js) .memo .rowmenu {
  position: static;
  grid-row: auto;
}

html:not(.has-js) .memo .rowmenu-more {
  display: none;
}

html:not(.has-js) .memo .rowmenu-list {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* --- «Заметки дня» на «Дне» ---------------------------------------------- */

/* Компактно: текст в две строки и одна строка признаков. Вся строка — ссылка
   на заметку в «Заметках». */
.memo-compact {
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.memo-compact .memo-meta {
  min-height: 0;
}

.memo-compact .memo-text {
  padding-right: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.card-notes .thoughts-archive {
  margin-top: 0;
}
}