/* Dense Ledger system (UI-022). Shared by every screen; per-screen files build on these.
   Colours come from the theme tokens in css/pocket.css (--bg, --surface*, --border*, --accent*, --text*).
   Design: docs/design/dense-ledger.md · Board: design/dense-ledger.html (direction A, Ledger grid). */
:root {
  --lg-fs: 14px;          /* body */
  --lg-fs-s: 13px;        /* secondary */
  --lg-fs-xs: 12.5px;     /* captions, tile labels */
  --lg-row: 36px;         /* desktop list row */
  --lg-row-phone: 48px;   /* phone list row */
  --lg-pad: 14px 16px;    /* tile padding */
  --lg-ctl: 32px;         /* control height */
  --lg-line: var(--border);
  --lg-max: 1280px;       /* content width */
}

/* Ledger grid: tiles touch; the 1px gap shows the grid line between them. */
.lg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px;
  background: var(--lg-line); border: 1px solid var(--lg-line); }
.lg-tile { background: var(--surface); padding: var(--lg-pad); display: flex; flex-direction: column;
  gap: 8px; min-width: 0; overflow: hidden; }
.lg-tile-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lg-tile-h > b, .lg-label { font: 600 var(--lg-fs-xs)/1.3 var(--font-sans); color: var(--text-mid); letter-spacing: .01em; }
.lg-tile-h a, .lg-link { color: var(--accent-hi); font: 600 var(--lg-fs-s) var(--font-sans); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
.lg-scroll { overflow-y: auto; min-height: 0; flex: 1; }

/* One-line list rows */
.lg-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; align-items: center;
  height: var(--lg-row); border-top: 1px solid var(--lg-line); font-size: 12.5px; }
.lg-row:first-child { border-top: 0; }
.lg-row .lg-sub { color: var(--text-dim); font-size: var(--lg-fs-xs); margin-left: 6px; }
.lg-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.lg-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Logos: merchant = circle, bank = rounded square; initials fallback sits under an <img> that removes itself on error */
.lg-mlogo, .lg-blogo { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
  color: #fff; font: 700 8px var(--font-sans); }
.lg-mlogo { width: 20px; height: 20px; border-radius: 50%; }
.lg-blogo { width: 16px; height: 16px; border-radius: 3px; font-size: 7px; }
.lg-mlogo img, .lg-blogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }

/* Controls: square, flat */
.lg-btn { height: var(--lg-ctl); padding: 0 10px; border: 1px solid var(--border-hi); background: transparent; color: var(--text);
  font: 600 12px var(--font-sans); border-radius: 0; cursor: pointer; white-space: nowrap; }
.lg-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.lg-seg { display: inline-flex; border: 1px solid var(--border-hi); }
.lg-seg > * { height: calc(var(--lg-ctl) - 2px); padding: 0 10px; border: 0; background: transparent; color: var(--text-dim);
  font: 600 12px var(--font-sans); cursor: pointer; border-radius: 0; }
.lg-seg > [aria-pressed="true"], .lg-seg > .is-on { background: var(--surface-3); color: var(--text); }
.lg-toggle { width: 34px; height: 20px; border: 1px solid var(--border-hi); background: var(--surface-3); position: relative; border-radius: 0; cursor: pointer; padding: 0; }
.lg-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-dim); transition: left .15s; }
.lg-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.lg-toggle[aria-checked="true"]::after { left: 16px; background: #fff; }
.lg-badge { font: 700 10px var(--font-sans); padding: 1px 6px; border-radius: 999px; vertical-align: 1px; margin-left: 6px; }
.lg-btn:focus-visible, .lg-seg > *:focus-visible, .lg-toggle:focus-visible, .lg-link:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; }

/* Grouped settings rows */
.lg-group > h3 { font: 600 var(--lg-fs-s) var(--font-sans); color: var(--text-dim); margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.lg-box { background: var(--surface); }
.lg-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 44px;
  padding: 8px 14px; border-top: 1px solid var(--lg-line); }
.lg-srow:first-child { border-top: 0; }
.lg-srow b { display: block; font: 600 var(--lg-fs) var(--font-sans); }
.lg-srow small { color: var(--text-dim); font-size: var(--lg-fs-s); }

@media (prefers-reduced-motion: reduce) { .lg-toggle::after { transition: none; } }

/* Phone list rows are 48px (handoff). Home fitLists uses the same number. */
@media (max-width: 768px) { .lg-row { height: var(--lg-row-phone); } }