.fs-notes-result-block[hidden],
.fs-notes-analysis[hidden] {
  display: none !important;
}

.fs-notes-query-form {
  display: flex;
  align-items: end;
  gap: var(--fs-space-3);
}

.fs-notes-query-fields {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--fs-space-3);
}

.fs-notes-query-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fs-space-2);
}

.fs-notes-folder-filter {
  margin-top: var(--fs-space-3);
}

.fs-notes-folder-filter .hierarchy-selection-control {
  max-width: 100%;
}

/*
 * Прозові записи потребують виразнішої межі, ніж табличні рядки. Дні утворюють
 * окремі групи, а кожна нотатка всередині має власну нейтральну card-boundary.
 */
#notesList {
  display: grid;
  gap: var(--fs-space-5);
  padding: var(--fs-space-4);
  background: var(--fs-color-surface-subtle);
}

.fs-notes-day-group,
.fs-notes-day-group__records {
  display: grid;
}

.fs-notes-day-group {
  gap: var(--fs-space-2);
}

.fs-notes-day-group__records {
  gap: var(--fs-space-2);
}

.fs-notes-day-group .fs-datalist__divider {
  padding: 0 2px var(--fs-space-2);
  background: transparent;
  border-bottom-color: var(--fs-color-border-subtle);
}

/*
 * Запис нотатки.
 *
 * Записи стоять добами під спільною смугою `fs-datalist__divider`: місяць нотаток — це не двадцять
 * рядків, а двадцять абзаців, і волосяної лінії між ними мало, щоб побачити, де закінчився день.
 * Смугу малює Stoneware, а не ця feature: два списки не мають права розділяти свої групи двома
 * різними смугами.
 *
 * Нотатка — це текст, а не набір полів, тому запис читається зверху вниз, а не по колонках. У
 * табличному вигляді сам текст діставав близько третини ширини рядка, а решту тримали чотири
 * короткі значення, майже завжди коротші за свою колонку: партнер, тема, автор і дата стояли
 * посеред порожнього треку, а абзац поруч ліз у вузьку смугу. Тому колонок тут немає взагалі —
 * ні на desktop, ні на телефоні, і заголовкової смуги колонок теж немає: підписувати нічого.
 *
 * Порядок сталий: спершу те, чим нотатку знаходять (партнер, тема, автор, час) одним тихим
 * рядком, далі заголовок, далі сам текст на повну ширину. Це та сама композиція на обох екранах,
 * тому mobile тут не є стисненим desktop.
 */
.fs-note-record {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: var(--fs-space-3);
  padding: var(--fs-space-4);
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-card);
}

.fs-note-record:last-child {
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/* Нотатка не є посиланням або вибірним рядком: наведення не змінює її поверхню. */
@media (hover: hover) {
  .fs-notes-content .fs-note-record:hover {
    background: var(--fs-color-surface);
  }
}

/*
 * Рядок реквізитів відділений від нотатки волосяною лінією. Без неї заголовок починався одразу
 * під назвою партнера й читався як її продовження — око не бачило, де закінчується адреса запису
 * й починається сам запис.
 */
.fs-note-record__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
  padding-bottom: var(--fs-space-2);
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * Партнер називає себе гліфом. Назва підприємства в лапках, номер точки й прізвище автора — це
 * три однакові на вигляд рядки тексту, і без знака першим доводилось здогадуватись, котрий із
 * них є клієнтом.
 */
.fs-note-record__partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--fs-color-text);
  font-size: var(--fs-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.fs-note-record__glyph {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--fs-color-text-muted);
  mask-image: var(--fs-note-glyph, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 14px 14px;
  -webkit-mask-image: var(--fs-note-glyph, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
}

.fs-note-record__glyph--partner {
  --fs-note-glyph: url("/stoneware/icons/task/partner.svg");
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  background: var(--fs-color-text-secondary);
  mask-size: 16px 16px;
  -webkit-mask-size: 16px 16px;
}

.fs-note-record__glyph--author {
  --fs-note-glyph: url("/stoneware/icons/task/user.svg");
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  mask-size: 12px 12px;
  -webkit-mask-size: 12px 12px;
}

/* У списку запис показує тільки час — день називає смуга над ним, тому й знак тут годинник, а не календар. */
.fs-note-record__glyph--time {
  --fs-note-glyph: url("/stoneware/icons/task/clock.svg");
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  mask-size: 12px 12px;
  -webkit-mask-size: 12px 12px;
}

/* Автор і час — це слід запису, а не його зміст, тому вони йдуть найтихішими й праворуч. */
.fs-note-record__trace {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-space-1) var(--fs-space-3);
  margin-left: auto;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
}

.fs-note-record__author,
.fs-note-record__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.fs-note-record__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fs-note-record__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
}

/*
 * Заголовок стоїть на крок вище за текст нотатки. Однаковий розмір і майже однакова вага робили
 * з них один абзац: перший рядок нотатки читався як продовження заголовка.
 */
.fs-note-record__title {
  min-width: 0;
  color: var(--fs-color-text);
  font-size: var(--fs-text-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*
 * Сам текст починається з того самого краю, що й заголовок. Тему вже називає чип у реквізитах,
 * тому кольорова рейка поруч із кожним абзацом лише дублювала її та дробила чисту поверхню картки.
 *
 * Міра рядка: абзац на всю ширину монітора читається гірше за той самий абзац у колонці тексту —
 * око губить початок наступного рядка. Обмеження стоїть на тексті, а не на записі, тому рядок
 * реквізитів і далі користується повною шириною панелі.
 */
.fs-note-record__text {
  max-width: 92ch;
  margin: 0;
  color: var(--fs-color-text);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fs-notes-analysis {
  display: grid;
  gap: var(--fs-space-3);
}

.fs-notes-analysis pre {
  overflow: auto;
  margin: 0;
  padding: var(--fs-space-3);
  color: var(--fs-color-text);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-primary-line);
  border-radius: var(--fs-radius-card);
  font: inherit;
  line-height: 1.55;
  white-space: pre-wrap;
}

/*
 * Форма запису: одна панель, компактні реквізити й широкий текст, рядок дій унизу.
 */
.fs-note-create-form {
  display: grid;
  align-content: start;
  width: 100%;
  min-width: 0;
  gap: var(--fs-space-4);
}

/*
 * Гліф поля приходить класом, а не inline-стилем: підпис тут не `field :: label`, бо потребує `for`.
 *
 * Кожне поле має власний знак. Раніше тема й заголовок ділили один ярлик, а на тексті нотатки
 * стояла літера «T» — тобто знак заголовка стояв на тілі, а сам заголовок знака не мав зовсім.
 * Тепер: партнер — фігура клієнта, тема — ярлик, заголовок — літера, текст — репліка.
 */
.fs-note-partner-field .fs-field__label {
  --fs-field-icon: url("/stoneware/icons/task/partner.svg");
}

.fs-note-topic-field .fs-field__label {
  --fs-field-icon: url("/stoneware/icons/task/tag.svg");
}

.fs-note-title-field .fs-field__label {
  --fs-field-icon: url("/stoneware/icons/task/text.svg");
}

.fs-note-text-field .fs-field__label {
  --fs-field-icon: url("/stoneware/icons/task/comment.svg");
}

/* A note is written, not filled in: the text control opens tall enough to hold
   a few sentences before the writer has to scroll inside it. */
.fs-note-text-field textarea {
  min-height: 220px;
}

/*
 * Диктування.
 *
 * Це спосіб заповнити текст нотатки, а не спосіб її зберегти, тому воно стоїть під самим полем
 * тексту — там, куди дивиться той, хто пише. У рядку дій воно було за два кроки від «Зберегти»,
 * тобто найчастіший промах пальцем на телефоні вів до збереження порожньої нотатки; і саме там
 * його найчастіше не помічали, бо в рядку дій шукають дії над формою, а не над полем.
 *
 * Це одна дія, а не смуга: рядок статусу поруч повторював те, що кнопка вже каже словом і
 * тоном, і забирав ширину під поверхню, якої тут нічого не тримає.
 */
.fs-note-dictation {
  display: flex;
  margin-top: var(--fs-space-1);
}

.fs-note-voice-button {
  flex: 0 0 auto;
  min-height: var(--fs-control-height);
}

/*
 * Запис триває, і це видно без читання: кнопка бере danger-родину й пульсуючий обідець того ж
 * тону. Кільце не є єдиним носієм значення — стан і час запису сказано словом на самій кнопці.
 */
.fs-note-voice-button.is-recording {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
  border-color: var(--fs-color-danger-line);
  animation: fs-note-voice-pulse 1.6s ease-out infinite;
}

.fs-note-voice-button.is-recording .action-button__icon {
  background: var(--fs-color-danger);
}

@keyframes fs-note-voice-pulse {
  from {
    box-shadow: 0 0 0 0 var(--fs-color-danger-line);
  }

  to {
    box-shadow: 0 0 0 8px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-note-voice-button.is-recording {
    animation: none;
    box-shadow: 0 0 0 2px var(--fs-color-danger-line);
  }
}

/*
 * Важливість — прапорець, а не картка: він стоїть відразу під темою, поруч із рішенням того ж
 * роду, і власна поверхня робила з одного прапорця секцію форми. Лишається тільки повний рядок
 * та звичайний кегль тексту: `fs-checkbox-field` за замовчуванням є підписом усередині щільного
 * рядка, а не самостійним вибором у формі.
 */
.fs-note-important-field {
  grid-column: 1 / -1;
  color: var(--fs-color-text);
  font-size: var(--fs-text-md);
  cursor: pointer;
}

.fs-note-important-field input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--fs-color-primary);
}

@media (max-width: 760px) {
  #notesList {
    gap: var(--fs-space-4);
    padding: var(--fs-space-2);
  }

  .fs-notes-query-form {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-notes-query-fields {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .fs-notes-query-actions {
    flex-wrap: wrap;
  }

  /*
   * Запис лишається тією самою композицією, тільки щільнішою: слід запису переходить власним
   * рядком під партнера, бо притиснутий праворуч він на вузькому екрані стикався з темою.
   */
  .fs-note-record {
    padding: var(--fs-space-3);
  }

  .fs-note-record__trace {
    width: 100%;
    margin-left: 0;
  }

  /*
   * Поле тексту не займає екран цілком: за високим полем рядок дій опиняється за межею
   * прокрутки, і «Зберегти» доводиться шукати.
   */
  .fs-note-text-field textarea {
    min-height: 180px;
  }

  /* Диктування на телефоні — головний спосіб заповнити нотатку: кнопка бере весь рядок. */
  .fs-note-voice-button {
    width: 100%;
    min-height: 44px;
  }
}