/* —— список заметок ——
   Экран появился уже после смены оформления, поэтому здесь сразу
   токены: ни одного зашитого цвета, радиуса или длительности. */

.notes-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-7);
}

/* Поле поиска повторяет .input из style.css: утопленная плоскость,
   волосяная рамка. На фокусе рамка утолщается, а padding убавляется
   ровно на прирост — строка не прыгает. */
.notes-search {
  width: 100%;
  box-sizing: border-box;
  border: var(--bw-hair) solid var(--c-ink-3);
  background: var(--bg-sunken);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-body);
  outline: none;
  transition:
    border-color var(--t-fast) var(--e-out),
    background var(--t-fast) var(--e-out);
}
.notes-search::placeholder { color: var(--c-ink-2); }

.notes-search:focus {
  border: var(--bw-bold) solid var(--accent);
  padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px);
  background: var(--bg-raised);
}

.notes-row-preview mark,
.notes-row-title mark {
  background: color-mix(in srgb, var(--c-petrol) 28%, transparent);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Строка заметки — тот же объект, что .card-row в папке: приподнятая
   плоскость с волосяной рамкой и офсетной тенью без размытия. */
.notes-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  width: 100%;
  text-align: left;
  border: var(--bw-hair) solid var(--line);
  background: var(--bg-raised);
  color: inherit;
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.notes-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.notes-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.notes-row-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-hero);
  color: var(--ink);
}

.notes-row-preview {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notes-row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

.notes-row-title {
  flex: 1 1 auto;
  min-width: 0;
}

.notes-row-meta {
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}

/* —— memory-бейдж —— */
.note-memory-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-1);
  border: var(--bw-hair) solid var(--c-ink-3);
  background: var(--bg-sunken);
  color: var(--c-ink-2);
  font-size: var(--fs-micro);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}
.note-memory-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ash);
}
.note-memory-badge--none .note-memory-dot { background: var(--c-ash); }
.note-memory-badge--new .note-memory-dot { background: var(--c-teak); }
.note-memory-badge--learning .note-memory-dot { background: var(--c-petrol); }
.note-memory-badge--rooted .note-memory-dot { background: var(--c-moss); }
.note-memory-badge--fading .note-memory-dot { background: var(--c-ochre); }
.note-memory-badge--fading {
  border-color: var(--c-ochre);
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c-ochre) 14%, transparent);
}

.notes-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-3);
  color: var(--ink-faint);
}

.notes-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.notes-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.notes-graph-page { gap: var(--sp-3); }

.notes-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-small);
}

.notes-graph-stage {
  box-sizing: border-box;
  width: 100%;
  height: min(70vh, 520px);
  min-height: 420px;
  max-height: 520px;
  overflow: hidden;
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  contain: layout size;
}

.notes-graph-canvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  touch-action: none;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--c-ash) 18%, transparent), transparent 42%),
    var(--c-paper);
}

.notes-graph-edge {
  stroke: var(--c-ink-3);
  stroke-width: 1.5;
}
.notes-graph-edge--wiki { stroke: var(--c-petrol); }
.notes-graph-edge--folder {
  stroke: var(--c-ash);
  stroke-dasharray: 4 3;
}

.notes-graph-node--note circle {
  fill: var(--c-ink);
  stroke: var(--c-paper);
  stroke-width: 2;
}
.notes-graph-node--folder rect {
  fill: var(--c-ash);
  stroke: var(--c-ink);
  stroke-width: 1.5;
}
.notes-graph-node text {
  fill: var(--c-ink);
  font-family: var(--font-text);
  font-size: 11px;
}
.notes-graph-node:hover circle { fill: var(--c-petrol); }
.notes-graph-node:hover rect { fill: var(--c-petrol); }