/* ─────────── unresolved links ─────────── */
/* Dashed and unresolved means the note behind this does not exist yet and
 * following it writes one. One rule for every place that can say so — notebook
 * segments, calendar grain links, wanted titles, unresolved edges — so they
 * cannot drift apart. Sits after each of their base rules to outrank them. */
.notebook.is-missing,
.grain-link.is-missing,
.row-title.is-wanted a:not(.notebook),
.edge-item .edge-name.is-missing a:not(.notebook) {
  color: var(--unresolved);
  border-bottom: 1px dashed rgba(201, 138, 122, .5);
}
.grain-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The same column geometry as the grid below it, gap included: without the gap
 * the seven 1fr columns come out wider here than there, and every weekday sits
 * a pixel left of the numbers it heads. */
.weekday-row { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 0.125rem; padding: 0 var(--pad) 0.375rem; }
.weekday-row .week-column { width: 1.875rem; margin-right: var(--week-gutter); }
.weekday-row span { text-align: center; font-family: var(--mono); font-size: 0.59375rem; letter-spacing: .08em; color: var(--faint); }
.calendar-grid { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 0.125rem; padding: 0 var(--pad); }
/* Every cell in the grid has the same shape: a label with a row of marks under
 * it, empty when there is nothing to mark. Sharing the structure is what keeps
 * the week column, the padded days and the real days on one line — a cell
 * missing its marks row would centre its label lower than the rest. */
.calendar-grid > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the label sits near the top so the pips below it have room to stack */
  justify-content: flex-start;
  gap: 0.3125rem;
  padding: 0.375rem 0 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
}
.day { aspect-ratio: 1; cursor: pointer; border-radius: 0.5625rem; }
.week-cell { width: 1.875rem; margin-right: var(--week-gutter); cursor: pointer; }
.day:active { background: rgba(255, 255, 255, .05); }
.day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.day.is-outside-month { pointer-events: none; color: var(--faint); opacity: .5; }
.day.is-selected { background: var(--raised); }
/* Today is gold; the selected day is the one with a background. */
.day.today { color: var(--accent); }
/* One row per kind, reserved whether or not a day has anything, so every cell
 * keeps the same height. */
.marks { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 1rem; }
/* Not `gap`: the two relationships in this row want different spacing. Pips are
 * separate things and sit apart; the count belongs to the pip beside it and sits
 * close to it. */
.mark-row { display: flex; align-items: center; height: 0.375rem; }
.mark { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.mark + .mark { margin-left: 0.25rem; }
.mark-count { font-family: var(--mono); font-size: 0.5625rem; line-height: 1; color: var(--muted); margin-left: 0.125rem; }
.mark.mark-note { background: var(--muted); }
.mark.mark-event { background: var(--accent); }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem 1rem;
  padding: 1rem var(--pad) 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--faint);
  letter-spacing: .02em;
}
.legend span { display: flex; align-items: center; gap: 0.375rem; }
.day-panel { padding: 1.375rem var(--pad) 0; }
.day-panel .day-head .grain-link { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; }
.day-panel .day-sub { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 1rem 0 0; }
.day-panel .day-empty { font-size: 0.84375rem; color: var(--muted); padding: 0.75rem 0 0; line-height: 1.5; }