/* Конспекты — библиотека всех записанных пар. Две оси над одним корпусом: по предметам
   (полки) и по датам (лента). Экран ничего не хранит: каждая строка ведёт в саму пару.
   Префикс lib- (library), потому что nt- уже занят страницей пары в note.css. */

.lib {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Top bar ---------- */
.lib-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.lib-top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.lib-top__right { margin-left: auto; }

/* Шапка — общая .container (1200px), как на всех экранах с навигацией в
   ней: иначе при прямом переходе между вкладками (js/nav.js) сама
   навигация каждый раз прыгает по ширине — 24.09, жалоба на «сайт
   съезжает». Контент — своей шириной ниже, как и был (полки по два в ряд
   шире, чем колонка домашки). */
.lib-main { max-width: calc(1040px + 2 * var(--gutter)); padding-top: var(--s-6); }

/* ---------- Heading ---------- */
.lib-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.lib-head__cheat { justify-self: start; }
.lib-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-14);
}
.lib-head__code {
  padding: 4px 7px 3px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.6875rem;
}
.lib-head__title {
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: -0.03em;
}
.lib-head__sub {
  max-width: 58ch;
  color: var(--text-2);
  font-size: var(--fs-18);
}
/* The one place the screen admits how much text is really written. */
.lib-head__honest {
  margin-top: calc(-1 * var(--s-2));
}

/* ---------- Закреплённое ---------- */
/* Отдельная секция над переключателем «по предметам/по датам», а не сортировка
   внутри уже открытого списка: смысл закрепления — увидеть эти конспекты сразу
   на входе во вкладку, а не после того, как выбрал ось и долистал (Влад, 27.09). */
.lib-pinned { margin-bottom: var(--s-6); }
.lib-pinned__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.lib-pinned__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lib-pinned__title svg { width: 15px; height: 15px; color: var(--accent-ink); }

/* ---------- Поиск и раскладка ---------- */
/* Одна строка на десктопе, две на телефоне: поиск шире переключателя, потому
   что им пользуются чаще — ось выбирают раз и забывают. */
.lib-tools {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (min-width: 620px) {
  .lib-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.lib-search { position: relative; display: block; }
.lib-search__icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--text-3);
  pointer-events: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.lib-search__icon svg { width: 18px; height: 18px; }
.lib-search__input { padding-left: 46px; }
.lib-search:focus-within .lib-search__icon { color: var(--accent-text); }
/* Крестик очистки в WebKit рисуется системным цветом и в тёмной теме почти не
   виден; свой не заводим — выделение и Backspace работают везде одинаково. */
.lib-search__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }

/* Сам контрол — общий .seg из base.css. Не .nt-tabs из конспекта: там это
   переключатель панелей, который на широком экране вообще исчезает, а тут ось
   остаётся на всех ширинах. */

/* Строка ответа поиска. Место под неё держится всегда, иначе список подпрыгивает
   на первой набранной букве. */
.lib-found {
  min-height: 1.25em;
  margin-bottom: var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-14);
}

.lib-empty {
  max-width: 62ch;
  padding: var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text-2);
  line-height: 1.6;
}

/* ---------- Shelves ---------- */
.lib-shelves {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 760px) {
  .lib-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lib-shelf {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* transform здесь НЕ анимируется: им владеет motion.tilt. */
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
/* transform у полки принадлежит motion.tilt — два хозяина одного свойства
   дерутся, и карточка дёргается. CSS здесь трогает только цвет и тень. */
.lib-shelf:hover {
  border-color: var(--spot-border);
  box-shadow: var(--shadow-sm);
}
.lib-shelf:has(.lib-shelf__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Same plaque as the note cards on the dashboard: one visual language for a subject code. */
.lib-shelf__code {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.6875rem;
}
.lib-shelf__body { min-width: 0; display: grid; gap: var(--s-1); }
.lib-shelf__name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Whole card is the link target; the name carries it so the accessible name stays the subject. */
.lib-shelf__link { color: inherit; }
.lib-shelf__link:hover { text-decoration: none; }
.lib-shelf__link:focus-visible { outline: none; }
.lib-shelf__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.lib-shelf__meta { color: var(--text-2); font-size: var(--fs-12); }
.lib-shelf__last { color: var(--text-3); font-size: var(--fs-12); }
.lib-shelf__go {
  color: var(--text-3);
  transition: transform var(--dur-state) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.lib-shelf__go svg { width: 18px; height: 18px; }
.lib-shelf:hover .lib-shelf__go { transform: translateX(4px); color: var(--accent-text); }

.lib-note__go { transition: transform var(--dur-state) var(--ease-out); }
.lib-note:hover .lib-note__go { transform: translateX(4px); color: var(--accent-text); }

/* Подсветка под курсором — штатный .spot из base.css (design-system §4.3),
   а не собственный световой пробег: приём в продукте должен быть один. */

/* ---------- Notes of one subject ---------- */
/* Ширина та же, что у полок и у строки поиска над ними: раньше здесь стояло
   max-width: 920px от экрана предмета, и в режиме «по датам» карточки обрывались
   раньше поисковой строки над ними. */
.lib-notes { display: grid; gap: var(--s-3); }

.lib-note {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-state) var(--ease-out);
}
.lib-note:hover {
  border-color: var(--spot-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.lib-note:active { transform: translateY(0); }
.lib-note:has(.lib-note__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-note.is-pinned { border-color: var(--spot-border); }

/* Закрепление и стрелка-переход — один кластер действий с краю карточки, а не
   два элемента, спорящих за один и тот же угол (раньше пин лежал абсолютным
   позиционированием прямо поверх стрелки — Влад, 27.09). Кнопка не описывает
   конспект (как «есть задание»/«полный текст»), а действие над ним, поэтому
   отдельно от .lib-note__tags. Видна всегда у закреплённых, у остальных —
   только при наведении/фокусе, чтобы не превращать список в частокол
   одинаковых иконок.
   Слой над накладкой-ссылкой (.lib-note__link::after, inset: 0): накладка
   позиционирована, кластер без позиции рисовался бы ПОД ней, и клик по пину
   открывал конспект вместо закрепления (ROADMAP-26.09 §11.3). */
.lib-note__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-1); }
.lib-note__pin {
  display: grid;
  place-items: center;
  /* 36px, а не 30: цель под палец и под курсор без прицеливания. */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-3);
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.lib-note__pin svg { width: 18px; height: 18px; }
.lib-note:hover .lib-note__pin,
.lib-note__pin:focus-visible { opacity: 1; }
.lib-note__pin:hover { background: var(--surface-2); color: var(--text); }
.lib-note__pin[aria-pressed="true"] { opacity: 1; color: var(--accent-ink); }
/* Закреплено — головка залита, не закреплено — контур: состояние видно по
   форме, а не только по цвету. */
.lib-note__pin[aria-pressed="true"] .icon-pin__head,
.lib-pinned__title .icon-pin__head { fill: currentColor; }

.lib-note__body { min-width: 0; display: grid; gap: var(--s-1); }
.lib-note__meta { color: var(--text-2); font-size: var(--fs-12); }
.lib-note__meta > span { white-space: nowrap; }
.lib-note__topic {
  /* balance из base.css в узкой карточке ставит заголовок столбиком. */
  text-wrap: pretty;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.lib-note__link { color: inherit; }
.lib-note__link:hover { text-decoration: none; }
.lib-note__link:focus-visible { outline: none; }
.lib-note__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* Бейджи собраны в одну ячейку: иначе при одном бейдже вместо двух стрелка
   уезжает в его колонку и ряды перестают выстраиваться. */
.lib-note__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}
.lib-note__go { color: var(--text-3); }
.lib-note__go svg { width: 18px; height: 18px; }

@media (max-width: 519px) {
  .lib-shelf__go,
  .lib-note__go { display: none; }
  /* Наведения на тачскрине не бывает — закреплённая/пустая кнопка должна быть
     видна сразу, а не только тем, кто умеет водить курсором. */
  .lib-note__pin { opacity: 1; }
  /* Стрелка на телефоне скрыта (выше), в кластере остаётся один пин — он
     возвращается в угол карточки абсолютным позиционированием, как и был
     до переноса в общий флекс-кластер с десктопной стрелкой (см. .lib-note__actions
     выше): на десктопе они делят угол и им нужен общий флекс-ряд, на телефоне
     делить не с кем. */
  .lib-note__actions { position: absolute; top: var(--s-2); right: var(--s-2); }
  /* Бейджи справа сжимали заголовок до ~130px — тема пары вставала столбиком
     в пять строк. На телефоне они уходят под заголовок, заголовку вся ширина. */
  .lib-note { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .lib-note__tags { justify-content: flex-start; }
  .lib-note__tags:not(:has(*)) { display: none; }
}

/* ---------- Редизайн 2: списки одной плоскостью, как «Настройки» ----------
   Полки и ленты — не стопка карточек с рамками, а одна белая плоскость,
   строки через тонкую линию. Предмет — точка его цвета. */
.lib-top { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.lib-top__inner { min-height: calc(52px + env(safe-area-inset-top, 0px)); }
.lib-main { padding-top: var(--s-7); }
.lib-head { margin-bottom: var(--s-7); }
.lib-head__title { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.045em; }
.lib-head__sub { font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; }
.lib-pinned__title { text-transform: none; letter-spacing: -0.01em; font-size: var(--fs-16); font-weight: 600; color: var(--text); }

.lib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subj, var(--text-3)); flex: none; }

.lib-shelves,
.lib-notes {
  gap: 0;
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
@media (min-width: 760px) { .lib-shelves { grid-template-columns: 1fr; } }

.lib-shelf,
.lib-note {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s-4) var(--s-5);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.lib-note { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.lib-shelf:hover,
.lib-note:hover { border-color: transparent; box-shadow: none; transform: none; background: var(--surface-2); }
.lib-note.is-pinned { border-color: transparent; }
.lib-shelf + .lib-shelf::before,
.lib-note + .lib-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--s-5) + 8px + var(--s-4));
  right: 0;
  height: 1px;
  background: var(--border);
}
.lib-shelf:has(.lib-shelf__link:focus-visible),
.lib-note:has(.lib-note__link:focus-visible) { outline-offset: -2px; }

.lib-shelf__name,
.lib-note__topic { font-weight: 500; letter-spacing: -0.015em; }
.lib-shelf__meta,
.lib-shelf__last,
.lib-note__meta { color: var(--text-3); font-size: var(--fs-14); }
.lib-shelf:hover .lib-shelf__go,
.lib-note:hover .lib-note__go { transform: none; color: var(--text-3); }
.lib-note .badge--ok { background: transparent; color: var(--text-3); padding-inline: 0; }

.lib-empty { border: 0; background: var(--surface); border-radius: 18px; }

@media (max-width: 519px) {
  .lib-note { grid-template-columns: auto minmax(0, 1fr); }
  .lib-note__tags { grid-column: 2; }
}

/* ================= Редизайн 3: конспекты 1:1 с прототипом 4 (ROADMAP §16.1) =================
   Шапка: заголовок и лид слева, переключатель раскладки справа. Ниже поиск
   (до 400px) и чипы предметов. Лента по датам — одна карточка с группами
   «Эта неделя / Прошлая неделя / Раньше». */
.lib-main { max-width: var(--container); }
.lib-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.lib-head__text { display: grid; gap: 12px; }
.lib-head__sub { max-width: 46ch; color: var(--text-2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; letter-spacing: -0.01em; }
.lib-head__honest { margin-top: 0; }
.lib-tools { gap: 12px; margin-bottom: 20px; }
/* Поиск до 400px, чипы строкой под ним: предметов у колледжа шесть-семь и
   названия длинные — справа от поиска они ломались в две строки. */
.lib-tools { grid-template-columns: minmax(0, 1fr); }
.lib-search { width: 100%; max-width: 400px; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-chips[hidden] { display: none; }
.lib-shelves, .lib-notes, .lib-empty { border-radius: var(--r-xl); }
.lib-shelf, .lib-note { padding: 18px 24px; gap: 16px; }
.lib-shelf:hover, .lib-note:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.lib-shelf + .lib-shelf::before,
.lib-note + .lib-note::before { left: 48px; }
.lib-notes > .list-group:first-child { padding-top: 20px; }
.lib-note .badge--hw { background: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--tang-text); }
.lib-note .badge--hw::before { display: none; }
@media (max-width: 599px) {
  /* Чипы — одна лента с прокруткой вбок, а не четыре строки над списком. */
  .lib-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .lib-chips::-webkit-scrollbar { display: none; }
  .lib-chips .chip-f { flex: none; }
  /* Сортировка — три кнопки: лента обрезала третью на полслове («По алфави»), переносим на вторую строку. */
  .lib-chips[data-sorts] { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* Пин стоит в правом верхнем углу строки — заголовку оставляем под него место. */
  .lib-note { padding: 16px 52px 16px 20px; }
  .lib-note + .lib-note::before { left: 44px; }
}

/* Pin (from Vlad's fork): quiet until hovered or on, then the accent. */
.lib-note__pin {
  /* Above the card's stretched link (.lib-note__link::after): unpositioned, the click opened the note instead of pinning. */
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.lib-note__pin svg { width: 16px; height: 16px; }
.lib-note:hover .lib-note__pin, .lib-note__pin:focus-visible, .lib-note__pin[aria-pressed="true"] { opacity: 1; }
.lib-note__pin:hover { background: var(--surface-2); }
.lib-note__pin[aria-pressed="true"] { color: var(--accent-text); }
@media (hover: none) { .lib-note__pin { opacity: 1; } }
/* The pin takes a column of its own on a wide row and the top right corner on a phone (the padding above is for it). */
@media (min-width: 600px) { .lib-note { grid-template-columns: auto minmax(0, 1fr) auto auto auto; } }
.lib-note { position: relative; }
@media (max-width: 599px) { .lib-note__pin { position: absolute; top: 12px; right: 12px; } }

/* ---------- Дата и поиск по тексту (Max 20.10) ----------
   Плитка даты впереди строки — как у домашки: число и месяц крупно, день недели и время в мете. Цвет предмета —
   точкой перед его именем. Найденное по тексту — строка под метой: где слово и кусок вокруг, слово отмечено. */
.lib-date {
  display: grid;
  place-items: center;
  align-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  line-height: 1.05;
}
.lib-date b { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lib-date small { color: var(--text-2); font-size: 0.6875rem; font-weight: 500; }
.lib-date.is-none small { color: var(--text-3); text-align: center; line-height: 1.2; }
.lib-note.is-pinned .lib-date { background: var(--accent-soft); }
.lib-note__subj { display: inline-flex; align-items: center; gap: 6px; }
.lib-note__subj .lib-dot { width: 7px; height: 7px; }
.lib-note + .lib-note::before { left: calc(24px + 48px + 16px); }
.lib-note__hit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: 1.45;
}
.lib-note__hit b { color: var(--text); font-weight: 600; }
.lib-note__hit mark { padding: 0 2px; border-radius: 3px; background: var(--accent-soft); color: inherit; }  /* not lime: lime marks a term */
@media (max-width: 599px) {
  .lib-date { width: 42px; height: 42px; border-radius: 12px; }
  .lib-date b { font-size: 1rem; }
  .lib-note + .lib-note::before { left: calc(16px + 42px + 12px); }
}

/* Critique 20.10: the tags column took each row's own width, so «задание» jumped left and right from row to row. */
@media (min-width: 900px) {
  .lib-note__tags { min-width: 210px; justify-content: flex-end; }
}
@media (max-width: 599px) {
  .lib-note { align-items: start; }
  .lib-note + .lib-note::before { left: calc(20px + 42px + 16px); }
}