/* 125x — Ledger layout (v3, matched to Louis's chosen mock): LIGHT theme.
   Pale grey page, white rows, black ink, one muted green accent. Titles in
   bold sans, full and unwrapped; channel · age · views on their own mono
   line — everything readable, nothing truncated. Mono for data/chrome. */
body.layout-ledger {
  --ledger-line: #d5dad6;
  --bg: #edf0ee;
  --surface: #ffffff;
  --surface-2: #f4f6f4;
  --border: #d5dad6;
  --text: #101312;
  --text-2: #4c554f;
  --text-3: #8a948d;
  --accent: #1d9e75;
  --accent-soft: rgba(29, 158, 117, 0.12);
  --radius: 3px;
  background: #edf0ee;
}

/* top bar + segmented tabs */
body.layout-ledger #topbar { background: rgba(255, 255, 255, 0.94); }
body.layout-ledger .brand { letter-spacing: -0.01em; }
body.layout-ledger .ghost-btn { color: var(--text); }
body.layout-ledger .tabs { gap: 0; padding: 12px 16px 0; border-bottom: none; background: #edf0ee; }
body.layout-ledger .tab {
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  margin: 0 0 0 -1px; padding: 10px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600;
}
body.layout-ledger .tab:first-child { margin-left: 0; border-radius: 3px 0 0 3px; }
body.layout-ledger .tab:last-child { border-radius: 0 3px 3px 0; }
body.layout-ledger .tab.active { background: #101312; color: #fff; border-color: #101312; }

/* search */
body.layout-ledger #channel-search {
  background: #fff; color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* modes + topics as a text index with square markers, not pills */
body.layout-ledger #mode-chips { gap: 4px 18px; flex-wrap: wrap; overflow-x: visible; padding: 14px 20px 2px; }
body.layout-ledger .mode-chip, body.layout-ledger .topic-chip {
  background: transparent; border: none; border-radius: 0; color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600; padding: 4px 0;
}
body.layout-ledger .mode-chip::before, body.layout-ledger .topic-chip::before { content: "□ "; color: var(--text-3); }
body.layout-ledger .mode-chip.active, body.layout-ledger .topic-chip.active { background: transparent; color: var(--text); }
body.layout-ledger .mode-chip.active::before, body.layout-ledger .topic-chip.active::before { content: "■ "; color: var(--accent); }

/* the ledger rows: full-width thumbnail on top, all text underneath */
body.layout-ledger .grid { display: flex; flex-direction: column; gap: 14px; max-width: 720px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 14px 16px 28px; }
body.layout-ledger .card {
  display: block; padding: 0 0 12px; overflow: hidden;
  background: #fff; border: 1px solid var(--ledger-line); border-radius: 3px;
  animation: none; min-width: 0;
}
body.layout-ledger .thumb-wrap { border-radius: 0; }
body.layout-ledger .card:hover .thumb-wrap { box-shadow: 0 10px 24px rgba(16, 19, 18, 0.18); }
body.layout-ledger .card-meta { padding: 10px 12px 0; }
body.layout-ledger .card-title {
  display: block; -webkit-line-clamp: none; -webkit-box-orient: initial;
  font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text);
  white-space: normal; overflow: visible; height: auto; max-height: none;
}
body.layout-ledger .card-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 5px;
  white-space: normal;
}
body.layout-ledger .secrets-pill { display: none; }
/* pop / suggested / deep-cut badges STAY visible in the ledger: a pick that
   isn't a straight subscription upload must be labeled as one. */

/* sort header (injected by ledger.js) — only visible in the ledger theme */
#ledger-head { display: none; }
body.layout-ledger #ledger-head {
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto; padding: 14px 20px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text-3);
  border-bottom: 1px solid var(--ledger-line);
}
#ledger-head .lh-label { letter-spacing: 0.12em; }
#ledger-head button {
  background: none; border: none; color: var(--text-2);
  font: inherit; cursor: pointer; padding: 2px 0; letter-spacing: 0.06em;
}
#ledger-head button:hover { color: var(--text); }
#ledger-head button.active { color: var(--text); font-weight: 700; }
#ledger-head button.active::after { content: " ▾"; color: var(--accent); }

/* summary dock chips as white pills, like the mock's status pill */
body.layout-ledger .dock-chip {
  background: #fff; border-color: var(--border); color: var(--text);
  box-shadow: 0 2px 10px rgba(16, 19, 18, 0.08);
}
body.layout-ledger .dock-state { color: var(--text-2); }
body.layout-ledger .dock-chip.ready { background: #e9f6f1; border-color: var(--accent); }
body.layout-ledger .dock-chip.ready .dock-state { color: var(--text); }

/* misc chrome follows the light vars */
body.layout-ledger .bottom-loader { background: rgba(255, 255, 255, 0.94); color: var(--text-2); border-color: var(--border); }
body.layout-ledger .ready-banner { background: #fff; border-color: var(--border); color: var(--text); }