/* ─────────── filter banner ─────────── */
/* Any filtered list announces itself with this rather than a result count. One
 * component, used for search results and for the note-scoped resource view. */
.filter-banner {
  display: flex;
  /* The label and the value are different sizes and different families, so they
   * are aligned on their shared baseline. Centring would align their boxes and
   * leave the text visibly off. */
  align-items: baseline;
  gap: 0.4375rem;
  margin: 0 var(--pad) 0.25rem;
  padding: 0.5625rem 0.6875rem;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 0.5625rem;
  font-size: 0.78125rem;
  overflow: hidden;
  white-space: nowrap;
}
.filter-banner .filter-label {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.59375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.filter-banner .filter-term { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
/* A text glyph, so it sits on the same baseline as the label and the value. */
.filter-banner .filter-clear {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
}

/* ─────────── note rows ─────────── */
.row-list { padding: 0 var(--pad); }
.row {
  width: 100%;
  padding: 0.6875rem 0 0.75rem;
  border-radius: 0.5rem;
  transition: background .12s ease;
}
/* the note's own title link takes the row's colour; a notebook segment beside
 * it keeps its own, so an unresolved row cannot recolour a resolved segment */
.row-title a:not(.notebook), .edge-item .edge-name a:not(.notebook) { color: inherit; text-decoration: none; }
.row-title a:focus-visible, .edge-item .edge-name a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-top { display: flex; align-items: baseline; gap: 0.75rem; }

/* Type carries provenance: sans says you named it, sans dimmed says the app
 * inferred it from the body's first line, mono says it is machine-generated.
 * The moment a note gets a title its row shifts from mono to sans. */
.row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--text);
  /* wraps rather than truncating: with the path inline, an ellipsis would hide
   * the note's own name, which is the part you are looking for */
  overflow-wrap: break-word;
}

/* Each segment and the title itself are atomic boxes, so a line can only break
 * at the separators between them — `a / b / Long Note Title` keeps the title
 * whole and moves it down instead of splitting it. A segment too wide for the
 * line on its own still wraps inside itself, which is what break-word above is
 * for. */
.row-title > a, .row-title > .title-text,
.edge-item .edge-name > a, .edge-item .edge-name > .title-text,
.screen-title > a, .screen-title > .title-text { display: inline-block; }
/* a title nothing holds yet */
.row-title.is-wanted { color: var(--unresolved); }

.row-time { flex: 0 0 auto; font-family: var(--mono); font-size: 0.71875rem; color: var(--faint); }
/* not a title: a version's event name, and the like */
.row-title.is-machine { font-family: var(--mono); font-size: 0.90625rem; font-weight: 400; letter-spacing: 0; }
.row-preview {
  margin-top: 0.1875rem;
  font-size: 0.84375rem;
  line-height: 1.45;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* timestamps and the like: machine-generated, so mono */
.row-preview.is-machine { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); letter-spacing: .02em; }
/* a line above the title that is not part of it — a version's number */
.row-path { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); letter-spacing: .02em; margin-bottom: 0.1875rem; }

/* ─────────── notebook path ─────────── */
/* Each segment stands for a note of its own. Dashed means it does not exist yet
 * and following it writes it. */
/* A segment reads like the note title beside it: same colour, no underline. What
 * marks one out is the absence of that — an unresolved segment goes dashed and
 * salmon to say the note is not there yet. */
.notebook {
  color: var(--text);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.notebook:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notebook-separator { color: var(--text); }

/* ─────────── empty state ─────────── */
.empty { padding: 0.5rem var(--pad) 0; }
/* a result that is simply absent: a statement, not a heading */
.empty-line { padding: 0.625rem var(--pad) 0; font-size: 0.875rem; color: var(--muted); }
.empty h2 { margin: 0 0 0.375rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.empty p { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.mono-value { font-family: var(--mono); color: var(--text); font-size: .94em; }

.button-primary {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0.6875rem;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 0.96875rem;
  font-weight: 600;
  padding: 0.875rem 1rem;
  text-align: left;
  text-decoration: none;
}
.button-primary:active { filter: brightness(.92); }
.button-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─────────── pagination ─────────── */
/* At the bottom of the list, not in the bar. Labels follow the sort, so a
 * recency list says Newer/Older. Absent when everything fits on one page. */
.pager {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 1.375rem var(--pad) 0.5rem;
  border-top: 1px solid var(--line);
  margin-top: 0.875rem;
}
/* inline-flex so the caret centres against the label rather than sitting on its
 * baseline the way a text arrow did */
.pager-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5625rem;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.5625rem 0.75rem;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
.pager-button .icon { font-size: 0.875rem; }
/* the label is desktop only; on a phone the icon carries it */
.pager-label { display: none; }
.pager-button.disabled { opacity: .3; cursor: default; pointer-events: none; }
.pager-button:active:not(.disabled) { background: var(--raised); }
.pager-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pager-position { flex: 1 1 auto; text-align: center; font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); letter-spacing: .04em; }