/* Note history page */

.note-header {
  padding-block: clamp(28px, 5vw, 48px);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.note-header__title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.note-header__title h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.note-header__meta { margin: 10px 0 0; color: var(--ink-2); }

/* Serial numbers set like they're printed on a note. */
.serial { font-family: var(--font-mono); letter-spacing: 0.08em; font-weight: 700; }

.note-chip {
  display: inline-grid;
  place-items: center;
  min-width: 3.4em;
  padding: 0.35em 0.6em;
  border-radius: var(--radius-small);
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.note-chip--5 { background: var(--note-5); }
.note-chip--10 { background: var(--note-10); }
.note-chip--20 { background: var(--note-20); }
.note-chip--50 { background: var(--note-50); }
.note-chip--100 { background: var(--note-100); }
@media (prefers-color-scheme: dark) {
  .note-chip { color: #16181b; }
}

.stats-strip__grid:has(.stat--wide) { grid-template-columns: 1fr 1fr 2fr; }
.stat__value--small { font-size: clamp(1.05rem, 2vw, 1.3rem); padding-top: 0.2em; }

.note-body { padding-top: 40px; max-width: 820px; }
.note-body__zone { margin-top: -0.25em; font-size: 0.875rem; }

/* A vertical line of stops, newest at the top. */
.timeline { list-style: none; margin: 24px 0 0; padding: 0; }
.timeline__stop { position: relative; padding: 0 0 20px 32px; }
.timeline__stop::before {
  content: "";
  position: absolute;
  left: 7px; top: 18px; bottom: -4px;
  width: 2px;
  background: var(--line);
}
.timeline__stop:last-child::before { display: none; }
.timeline__marker {
  position: absolute;
  left: 0; top: 10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--red);
}
.timeline__stop--first .timeline__marker { background: var(--red); }

.timeline__card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.timeline__place { font-weight: 700; font-size: 1.05rem; }
.timeline__approx { margin-left: 2px; text-decoration: none; cursor: help; color: var(--ink-3); }
.timeline__badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.timeline__meta { margin: 4px 0 0; color: var(--ink-2); font-size: 0.9rem; }
.timeline__comments { margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--paper-3); color: var(--ink); overflow-wrap: anywhere; }
.timeline__leg { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-2); }
.timeline__edit { margin: 10px 0 0; }
.timeline__private { margin: 10px 0 0; font-size: 0.85rem; }
.timeline__flag { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-3); }
.timeline__flag summary { cursor: pointer; }
.timeline__flagged { margin: 10px 0 0; font-size: 0.85rem; }
.timeline__private label { color: var(--ink-3); }
.timeline__private-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.timeline__private-row input[type="text"] { flex: 1 1 12em; width: auto; min-width: 0; padding: 0.4em 0.6em; }
.timeline__leg::before { content: "↑ "; color: var(--red); font-weight: 700; }

@media (max-width: 640px) {
  .stats-strip__grid:has(.stat--wide) { grid-template-columns: 1fr 1fr; }
  .stat--wide { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* Add a note */

.field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.field-row > .field { flex: 1 1 120px; }
.field-row > .field--grow { flex: 2 1 180px; }
.field__hint--row { margin-top: -6px; }
select {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
input[type="date"], input[type="time"] {
  width: 100%;
  padding: 0.55em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
}

.callout { padding: 14px 16px; border-radius: var(--radius-small); background: var(--paper-2); font-size: 0.95rem; }
.add-note .alert p { margin: 0 0 0.4em; }
.add-note .alert p:last-child { margin: 0; }
.add-note { grid-template-areas: "intro" "form" "tips"; }
.add-note .form-page__intro { grid-area: intro; }
.add-note__form { grid-area: form; }
.add-note__tips-box { grid-area: tips; }
.add-note__tips-title { font-size: 1.05rem; }
.add-note__tips { padding-left: 1.2em; color: var(--ink-2); font-size: 0.925rem; }
.add-note__tips li { margin-bottom: 6px; }
@media (min-width: 861px) {
  .add-note {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    grid-template-areas: "intro form" "tips form";
    grid-template-rows: auto 1fr;
  }
}

/* High/low details on a note, and the option on the add-note form */
.high-low { padding-top: 0; }
.high-low__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.high-low__cards .card + .card { margin-top: 0; }
.high-low__cards p { margin: 0 0 8px; }
.high-low__action { margin-top: 12px; font-size: 0.9rem; }
.add-note__high-low { margin: 4px 0 16px; font-size: 0.925rem; }
.add-note__high-low summary { cursor: pointer; color: var(--ink-2); }
.add-note__high-low[open] summary { margin-bottom: 8px; }