/* Ledger-only styles. Shares the palette and type scale from styles.css. */

.ledger-head {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5rem) 5vw 0;
}

.back {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  margin-bottom: 2rem;
}

.ledger-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 400;
  margin: 0 0 0.75rem;
}

.sub { color: var(--dim); margin: 0 0 2rem; }

.tally {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--dim);
  margin: 0;
}
.tally strong { color: var(--fg); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tally .of { flex: none; }

.bar {
  flex: 1 1 8rem;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  min-width: 6rem;
}
.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  /* Sub-pixel fills would read as zero; keep a visible sliver once non-empty. */
  min-width: 2px;
  transition: width 600ms ease;
}

/* The four numbers must add to 525,600 in public. Inventory held back but
   shown nowhere is how a public ledger quietly stops being one. */
.tally-breakdown {
  font-size: 0.8rem;
  color: var(--dim);
  margin: 0.75rem 0 0;
  font-variant-numeric: tabular-nums;
}
.tally-breakdown a { color: var(--accent); }

.hint-block { color: var(--dim); font-size: 0.85rem; margin: 0 0 1.25rem; }

/* ------------------------------------------------------------- the calendar */

.calendar { display: flex; flex-direction: column; gap: 3px; }

.cal-month { display: flex; align-items: center; gap: 6px; }

.cal-label {
  flex: none;
  width: 2.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.cal-days { display: flex; gap: 3px; flex: 1; }

.cal-day {
  flex: 1 1 0;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  background: var(--line);
  transition: transform 120ms ease, outline-color 120ms ease;
  outline: 1px solid transparent;
}
.cal-day:hover { transform: scale(1.35); z-index: 1; }
.cal-day[aria-pressed="true"] { outline-color: var(--fg); transform: scale(1.35); z-index: 1; }
.cal-day.void { cursor: default; opacity: 0.25; }
.cal-day.void:hover { transform: none; }

/* Density ramp. Level 0 is "sold nothing" — deliberately distinct from the
   Feb 29 void, which is a different kind of empty. */
.sw-0, .cal-day.d0 { background: var(--line); }
.sw-1, .cal-day.d1 { background: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.sw-2, .cal-day.d2 { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sw-3, .cal-day.d3 { background: color-mix(in srgb, var(--accent) 78%, var(--line)); }
.sw-4, .cal-day.d4 { background: var(--accent); }

.legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--dim);
  margin: 1.25rem 0 0;
}
.sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.legend span:first-child { margin-right: 4px; }
.legend span:last-child { margin-left: 4px; }

/* ------------------------------------------------------------- the listings */

.day-list, .recent { list-style: none; padding: 0; margin: 0; }

.day-list li, .recent li {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.day-list li:last-child, .recent li:last-child { border-bottom: 1px solid var(--line); }

.entry-time {
  flex: none;
  width: 4.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.recent .entry-time { width: 7rem; }

.entry-body { flex: 1; min-width: 0; }

.entry-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}
.entry-by { font-style: italic; color: var(--dim); font-size: 0.85rem; }

.entry-link {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 120ms ease;
  flex: none;
}
li:hover .entry-link, .entry-link:focus-visible { opacity: 1; }

/* In the recent feed the link text IS the minute's address — that's the column
   telling you which minute you're looking at, so it can't be hover-only. In the
   day list the time already sits in the left column, so the link there stays a
   quiet affordance. */
.recent .entry-link { opacity: 1; color: var(--dim); }
.recent .entry-link:hover { color: var(--accent); }

.empty-note { color: var(--dim); font-style: italic; }

@media (max-width: 34rem) {
  .cal-label { width: 1.8rem; font-size: 0.55rem; }
  .cal-days { gap: 2px; }
  .calendar { gap: 2px; }
  .entry-link { opacity: 1; } /* no hover on touch */
  .day-list li, .recent li { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .entry-body { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-day, .bar-fill { transition: none; }
  .cal-day:hover, .cal-day[aria-pressed="true"] { transform: none; }
}


/*
 * Founding badge. Ledger only — a tier marker beside someone's memorial on the
 * clock is a different register from the rest of the site, and an unexplained
 * glyph teaches a stranger nothing. Here it reads as information.
 */
.founding {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.4em;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.62em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.15em;
  color: #0e0e10;
  cursor: help;
}
.founding-1 { background: #d4a24c; }  /* first hundred  */
.founding-2 { background: #a9adb5; }  /* second         */
.founding-3 { background: #b1794c; }  /* third          */
.founding-4 { background: #6f8f7a; }  /* fourth         */
.founding-5 { background: #6c7a92; }  /* fifth          */