/* The whole entry row is the toggle target; the chevron button is the
   visible affordance (drunk user test: walkable without reading). */
.entry-row { cursor: pointer; }
.entry-row:hover td { background: var(--surface); }
.entry-row:hover .row-toggle-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

.journal-table th:first-child { inline-size: 3.5rem; }

/* Arriving from a link elsewhere — a tosite in Myynti, a voucher number in
   the tase-erittelyt, the entry just created — the browser scrolls the row
   to the top of the viewport, which is exactly where the sticky header is.
   The row landed underneath it and the page read as "entry not found". So:
   clear the header, and tint the row the link meant, since one row in sixty
   is not findable without it. */
.journal-table tbody {
  scroll-margin-block-start: calc(var(--header-block-size) + var(--space-4));
}
.journal-table tbody:target .entry-row td { background: var(--accent-tint); }

.row-toggle-btn {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.row-toggle-btn svg {
  inline-size: 1.4rem;
  block-size: 1.4rem;
  transition: transform 0.15s ease;
}
.row-toggle-btn[aria-expanded="true"] svg { transform: rotate(90deg); }

.entry-lines-row td { background: var(--surface); }
.entry-lines {
  display: grid;
  grid-template-columns: minmax(12rem, max-content) 8rem 8rem;
  gap: var(--space-1) var(--space-4);
  max-inline-size: 40rem;
  font-size: var(--text-3);
}
.entry-lines-head {
  color: var(--muted);
  font-size: var(--text-1);
  font-weight: 600;
  border-block-end: 1px solid var(--border);
  padding-block-end: var(--space-1);
}
.entry-lines .is-empty { color: var(--border); }
.entry-lines-total {
  font-weight: 600;
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-1);
}

/* The event's story (event_timeline_design.md): dated beats down a quiet
   spine; dateless beats — the awaited piece, an open period, an
   inherited lock — hollow at the end. */
.timeline-title { margin-block-start: var(--space-5); font-size: var(--text-4); }
.timeline {
  list-style: none;
  padding: 0;
  margin-block: var(--space-3);
  display: grid;
  gap: var(--space-2);
  max-inline-size: 40rem;
}
.beat {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.beat-date {
  flex: 0 0 5.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.beat-body { min-inline-size: 0; overflow-wrap: anywhere; }
.beat.is-awaited .beat-date { color: var(--border); }

/* The issue hint: calm prose under the big button, never past a
   readable measure. */
.issue-hint { max-inline-size: 60ch; margin-block-start: var(--space-2); }

/* The voucher page's action row: the undo form sits inline among links. */
.voucher-actions { margin-block: var(--space-4); }
.voucher-actions form { display: inline; }

/* Financial statements (tuloslaskelma, tase) */
.statement { max-inline-size: 40rem; }
.statement td { border-block-end: 0; padding-block: var(--space-1); }
.statement-heading td {
  font-weight: 700;
  padding-block-start: var(--space-4);
  border-block-end: 1px solid var(--border);
}
.statement-subheading td { font-weight: 600; color: var(--muted); padding-block-start: var(--space-2); }
.statement-total td {
  font-weight: 600;
  border-block-start: 1px solid var(--border);
}
.statement-result td {
  font-weight: 700;
  padding-block: var(--space-3);
}
.statement-final td { border-block-start: 2px solid var(--ink); }

/* Manual entry form */
.entry-form { max-inline-size: 48rem; }
.entry-correction { margin-block-end: var(--space-4); }
.entry-correction > summary { cursor: pointer; color: var(--muted); }
.entry-correction select { max-inline-size: 100%; }
.entry-correction label { font-weight: 600; }
.entry-form-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}
.entry-form-description { flex: 1 1 20rem; min-inline-size: 0; }
.entry-form input[type="text"],
.entry-form input[type="date"],
.entry-form select { inline-size: 100%; }
.entry-form label { font-weight: 600; }
.entry-form-lines input.amount { max-inline-size: 8rem; }
.entry-form-lines tfoot td { font-weight: 600; }
.entry-balance-status { color: var(--warn); font-weight: 600; min-block-size: 1.5rem; }
.entry-balance-status.is-balanced { color: var(--ok); }