/* ============================================================
 * Ledger Board Shell — styles (scoped under .ledger-board).
 * Uses Mission Control's CSS custom properties (--paper-muted, --card,
 * --hairline, --ink, --ink-soft, --olive, --burgundy, --ply-deep,
 * --sent-bg, --status-*). Inherits the dark theme automatically.
 * Column width: --lb-col-width (default 225px, matching the
 * cashflow-ledger mockup's .month-col flex:0 0 225px — ~6 columns
 * visible at 1300-1400px, the rest reachable by horizontal scroll).
 * ============================================================ */
.ledger-board {
  /* Colors resolve through MC's theme variables (t_21f06f84) — the ledger
     follows the global theme (no scoped light pin). Board bg = --paper-muted
     (matches the ops strip), columns = --card, lines = --hairline.
     See docs/ledger-token-audit.md. */

  position: relative;
  width: 100%;
  background: var(--paper-muted);
  color: var(--ink);
}

/* Horizontally scrollable snap track — matches the cashflow-ledger
   mockup's .board (display:flex; overflow-x:auto; scroll-snap-type:x
   mandatory; gap:8px; padding; scroll-behavior:smooth). */
.ledger-track {
  display: flex;
  flex-direction: row;   /* month columns NEVER stack vertically */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  gap: 8px;
  padding: 4px 18px 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.ledger-track::-webkit-scrollbar { height: 10px; }
.ledger-track::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 6px; }
.ledger-track::-webkit-scrollbar-track { background: transparent; }

.ledger-col {
  /* 225px fixed per month column (mockup .month-col flex:0 0 225px).
     NOTE: was flex: 0 0 var(--lb-col-width, 100%) — the 100% basis is
     what collapsed the board into one full-width column per view. The
     inner .ledger-month-col (index.html) enforces the same 225px via
     min/max-width so the column can neither shrink nor grow. */
  flex: 0 0 var(--lb-col-width, 225px);
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* never skip a column when paging */
}

/* Paging nav buttons — circular edge buttons, styled per the
   cashflow-ledger mockup's .board-nav: 38px circle, white bg,
   shadow-lift, brand icon, absolute left/right against the relative
   board wrap, translateY(-50%) vertical centering. They are siblings
   of .ledger-track (see ledger-board-shell.js), never children of a
   month column. */
.board-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.board-nav:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.board-nav:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.board-nav svg {
  display: block;
  width: 18px;
  height: 18px;
}
.board-nav.prev { left: 6px; }
.board-nav.next { right: 6px; }
/* Hide the edge paging arrows on narrow viewports — matches Mission
   Control's global mobile breakpoint (index.html: @media (max-width: 767px)
   board -> mobile-list switch). display:none removes the buttons from both
   hit-testing and layout, so they can neither intercept taps nor shift the
   board; on desktop (>767px) they stay visible, vertically centered on the
   left/right edges. */
@media (max-width: 767px) { .board-nav { display: none; } }