/* The Month ledger — increment ML (owner item 13; PLAN-v2 §3.8 "Extra pages").
 *
 * Desktop-first, in the wireframe's own language (MOCKUP.html's desktop
 * window): at 1100px and wider the shell widens — in this file, as
 * entities.css:505 widens it for the board, because app.css is frozen — and
 * the page splits into two panes, the day groups left and the two totals
 * tables right. Below that it is one stacked column: every row wraps, nothing
 * scrolls sideways at 390px.
 *
 * Every colour is a token (tokens.css), so light and dark both hold; 44px
 * targets via --touch on the month links, the day links and the row links. */

/* The header link, a desktop page's like the Fleet board's (views.css:100
 * says why display:none and why the literal 1100px). */
.shell__link--ledger {
  display: none;
}

@media (min-width: 1100px) {
  .shell__link--ledger {
    display: inline-flex;
  }

  .shell:has(> [data-view="ledger"]:not([hidden])) {
    max-width: 72rem;
  }
}

/* ------------------------------------------------------------- the bar */

.ledger__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.ledger__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ledger__month {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.ledger__turn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ledger__turn:hover {
  background: var(--surface-sunken);
}

.ledger__turn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The pack chip: the Exports card's own chip (exports.css .exports__chip),
 * restated here so the ledger never reaches into another page's classes. */
.ledger__pack {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ledger__pack--locked {
  background: var(--surface-sunken);
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------ the panes */

.ledger__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1100px) {
  .ledger__grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  /* Desktop: the totals stay in reach while the days scroll. */
  .ledger__totals {
    position: sticky;
    top: var(--space-4);
  }
}

/* S, step 2: beside the side column's tier (720px to 1099px; views.css) the
 * ledger has the whole row, as on the desk, and one stacked column across a
 * tablet read as a stretched phone — a category at the left edge and its
 * total 900px away. From 900px it is the desk's two panes, the totals a
 * little narrower; under that the two totals tables stand side by side
 * under the days. Only while the pane is up (it is hidden from this page,
 * but not `hidden`): a phone on its side keeps its 42rem column and the
 * stacked page that fits it. */
@media (min-width: 720px) and (max-width: 899.98px) {
  .shell:has(> .pane--left:not([hidden])) .ledger__totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
    align-items: start;
  }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
  .shell:has(> .pane--left:not([hidden])) .ledger__grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .shell:has(> .pane--left:not([hidden])) .ledger__totals {
    position: sticky;
    top: var(--space-4);
  }
}

/* ------------------------------------------------------------- the days */

.ledger__day {
  margin-bottom: var(--space-6);
}

.ledger__day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

/* A real tap target (the page stacks at phone width): --touch tall, the words
 * centred in it, so the heading's baseline row still lines up with its total. */
.ledger__day-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--accent);
  text-decoration: none;
}

.ledger__day-link:hover {
  text-decoration: underline;
}

.ledger__day-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ledger__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ledger__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
}

.ledger__row:first-child {
  border-top: 0;
}

.ledger__time {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.ledger__words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Scope, visible on a personal row (§3.7: whose money). */
.ledger__scope {
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

/* V2A's mark on a packed row, the day card's words. */
.ledger__lock {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ledger__lock[data-open="true"] {
  color: var(--warn-ink);
}

.ledger__amount {
  font-weight: 600;
  white-space: nowrap;
}

.ledger__link {
  min-height: var(--touch);
  white-space: nowrap;
}

/* The phone: the amount keeps its column; the row's link drops under the words, so
 * the row wraps instead of pushing the page sideways at 390px. */
@media (max-width: 599px) {
  .ledger__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ledger__link {
    grid-column: 2 / 4;
    justify-self: end;
  }
}

/* ----------------------------------------------------------- the totals */

.ledger__totals-box {
  margin-bottom: var(--space-6);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ledger__totals-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ledger__table {
  width: 100%;
  border-collapse: collapse;
}

.ledger__cell {
  padding: var(--space-1) 0;
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
  overflow-wrap: anywhere;
}

.ledger__cell.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger__table tfoot .ledger__cell {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  font-weight: 700;
}

.ledger__empty {
  color: var(--ink-faint);
}

/* ------------------------------------------- whose money, and what to check
 *
 * Wave E (E3; the owner, 2026-10-19: "continue with wave E"): above the days,
 * the month's Owed to you and Drawings (ledger-split-spec.js monthSplit), and
 * the To check box — company-card spends filed Business with no payee and no
 * note, and Miscellaneous spends, each row with its Change. Stacked on the
 * phone; side by side on the desk, the check box the wider. */

.ledger__summary {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 1100px) {
  .ledger__summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.ledger__money,
.ledger__check {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ledger__check {
  border-color: var(--emphasis);
}

.ledger__money-list {
  margin: 0;
}

.ledger__money-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.ledger__money-line:first-child {
  border-top: 0;
}

.ledger__money-term {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

.ledger__money-hint {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 400;
}

.ledger__money-amount {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger__check-lede {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.ledger__check-title {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--warn-ink);
  font-size: var(--text-sm);
}

/* A checked spend is drawn as its day row is (ledger.js row), under its own
 * class so the day rows stay one per spend for the books and the focus. */
.ledger__check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}

.ledger__check-row:first-child {
  border-top: 0;
}

@media (max-width: 599px) {
  .ledger__check-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* By paid-from's three columns: the heads as quiet as the title above them. */
.ledger__table--split thead .ledger__cell {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.ledger__table--split .ledger__cell.num {
  padding-left: var(--space-2);
}