/* library.css — full reading-log table ("Library v3" design).
   Loads after styles.css; tokens are inherited from there. CSP-safe: no inline
   styles/handlers live in the HTML/JS — everything visual is a class here. */

/* Let the fixed background canvas show through the page. */
body { background: transparent; }
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ─── CATEGORY COLOUR TOKENS ──────────────────────────────────────────────────
   --tc = dark cover bg | --tb = badge/label colour on light bg. Categories drive
   sections, the type tabs, and cover colours. */
.cat-scifi        { --tc:#0e0c30; --tb:#5560d8; }
.cat-fantasy      { --tc:#231042; --tb:#7a52c8; }
.cat-fiction      { --tc:#0d3d25; --tb:#1a5c3a; }
.cat-nonfiction   { --tc:#091820; --tb:#2878b0; }
.cat-untranslated { --tc:#2e1c04; --tb:#b07820; }

/* Page header styles are shared in styles.css (.page-header / .page-heading …). */

/* ─── TYPE FILTER BAR + VIEW SWITCHER ─────────────────────────────────────── */
.type-bar {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 48px; border-bottom: 1px solid var(--border);
  background: transparent; position: relative;
  overflow-x: auto; scrollbar-width: none;
}
.type-bar::-webkit-scrollbar { display: none; }
.type-tab {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 46px; padding: 0 18px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); border: none; border-bottom: 2px solid transparent;
  font-family: var(--font-mono); background: none; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.type-tab:hover:not(.active) { color: var(--text-muted); }
.type-tab.active { color: var(--bg); background: var(--tc, var(--accent)); }
.type-tab.active.all-tab { background: var(--accent); }
.type-dot { width: 7px; height: 7px; background: var(--tc, var(--accent)); flex-shrink: 0; transition: background .15s; }
.type-tab.active .type-dot { background: rgba(232,242,237,.5); }


/* ─── TAG BAR (secondary) ─────────────────────────────────────────────────── */
.tag-bar { padding: 9px 48px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: transparent; }
.tag-bar.hidden { display: none; }
.tag-bar-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-right: 4px; white-space: nowrap; }
.tag-bar .tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; padding: 2px 8px; border: 1px solid var(--border-solid); color: var(--text-dim); cursor: pointer; background: none; transition: all .15s; }
.tag-bar .tag:hover { border-color: var(--accent); color: var(--accent); }
.tag-bar .tag.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ─── TABLE ───────────────────────────────────────────────────────────────── */
.log-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }

.log-table thead th {
  padding: 9px 14px; text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim); border-bottom: 1px solid var(--border-solid);
  background: rgba(213,230,219,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10; white-space: nowrap; user-select: none;
}
.log-table thead th.sortable { cursor: pointer; }
.log-table thead th.sortable:hover { color: var(--accent); }
.log-table thead th.sorted { color: var(--accent); }
.sort-arr { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .55; }

/* Column widths (replace per-th inline styles) */
.col-num    { width: 36px; text-align: right; }
.col-cover  { width: 44px; }
.col-format { width: 90px; }
.col-year   { width: 52px; }
.col-tags   { min-width: 110px; }
.col-grade  { width: 88px; }
.col-status { width: 80px; }
.col-link   { width: 32px; }

.log-row { border-bottom: 1px solid var(--border); cursor: pointer; background: rgba(232,242,237,.92); transition: background .12s; }
.log-row:hover { background: rgba(239,247,242,.97); }
.log-row.expanded { background: rgba(239,247,242,.88); }
.log-row td { padding: 11px 14px; vertical-align: middle; }

.td-num { color: var(--text-dim); font-size: 11px; width: 36px; text-align: right; padding-right: 6px !important; }
.td-cover { width: 44px; }
.cover-block { position: relative; width: 28px; height: 42px; background: var(--accent-dark); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background .25s; }
.cover-init { font-family: var(--font-head); font-weight: 700; font-size: 9px; color: rgba(232,242,237,.45); letter-spacing: .02em; }
/* Open Library cover, overlaid on the initials; if it 404s, js/library.js removes it. */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-book { min-width: 180px; }
.book-title { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: -.02em; line-height: 1.2; }
.vol-suffix { font-size: 10px; color: var(--text-dim); font-weight: 400; }
.book-author { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.book-collection { font-size: 10px; color: var(--text-dim); margin-top: 3px; font-style: italic; }
.book-collection::first-letter { font-style: normal; }
.td-type { width: 90px; }
.type-badge { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border: 1px solid var(--border-solid); color: var(--text-dim); transition: all .25s; }
.td-year { color: var(--text-dim); font-size: 11px; width: 52px; white-space: nowrap; }
.td-tags { min-width: 110px; }
.tags-wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.row-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; padding: 1px 6px; border: 1px solid var(--accent); color: var(--accent); }
.td-grade { width: 88px; white-space: nowrap; }
.grade-score { display: flex; align-items: baseline; gap: 2px; font-size: 14px; font-weight: 500; line-height: 1; }
.grade-denom { font-size: 10px; color: var(--text-dim); }
.grade-none { color: var(--text-dim); font-size: 12px; }
.grade-dots { display: flex; gap: 3px; margin-top: 5px; }
.gdot { width: 6px; height: 6px; background: var(--border-solid); }
.gdot.on { background: var(--accent); }
.td-status { width: 80px; white-space: nowrap; }
.status-pill { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; padding: 2px 7px; border: 1px solid var(--border-solid); color: var(--text-dim); white-space: nowrap; }
.status-pill.read { border-color: var(--accent); color: var(--accent); }
.status-pill.reading { border-color: var(--accent-hover); color: var(--accent-hover); background: var(--accent-fill); }
.status-pill.dnf { border-color: var(--border-solid); color: var(--text-dim); opacity: .8; }
.td-link { width: 32px; text-align: center; }
.row-link { font-size: 13px; color: var(--text-dim); transition: color .15s; display: inline-block; }
.row-link:hover { color: var(--accent); }
.row-link-empty { color: var(--border-solid); font-size: 11px; }

/* Audio indicator */
.audio-dot { display: inline-block; width: 5px; height: 5px; background: var(--accent-hover); margin-left: 6px; vertical-align: middle; flex-shrink: 0; }

/* Expand row */
.expand-row { display: none; }
.expand-row.open { display: table-row; }
.expand-row td { padding: 0; border-bottom: 1px solid var(--border-solid); background: rgba(239,247,242,.92); }
.expand-inner { padding: 14px 48px 18px 96px; font-size: 13px; color: var(--text-muted); line-height: 1.85; border-left: 2px solid var(--accent-dark); margin: 0 14px 12px 50px; text-wrap: pretty; }
.expand-empty { color: var(--text-dim); font-style: italic; }
.expand-foot { display: flex; align-items: center; flex-wrap: wrap; margin-top: 10px; gap: 8px 20px; }
.expand-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; transition: gap .15s; }
.expand-link:hover { gap: 10px; }
.source-link { color: var(--accent-hover); }
.expand-date { font-size: 10px; color: var(--text-dim); margin-left: 16px; text-transform: uppercase; letter-spacing: .08em; }

/* Section headers (Sections view) */
/* Stripes view (the only view): coloured left edge + coloured type badge per category. */
.s2 .cover-block { background: var(--accent-dark); }
.s2 .log-row .td-num { box-shadow: inset 4px 0 0 var(--tc, var(--accent)); }
.s2 .type-badge { border-color: var(--tb, var(--accent)); color: var(--tb, var(--accent)); }

/* Empty state */
.empty-state { padding: 60px 48px; text-align: center; font-size: 12px; color: var(--text-dim); letter-spacing: .08em; display: none; background: transparent; }
.empty-state.visible { display: block; }

/* ─── ACCESSIBILITY ───────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Visible keyboard focus on interactive controls. */
.log-row:focus-visible,
.type-tab:focus-visible,
.tag-bar .tag:focus-visible,
.sub-tab:focus-visible,
.log-table thead th.sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.log-row:focus { outline: none; }   /* mouse clicks shouldn't ring */

/* Year column carries no data until years are added to the JSON — hide it
   by default and reveal only when js/library.js finds at least one year. */
.col-year, .td-year { display: none; }
.log-wrap.show-year .col-year, .log-wrap.show-year .td-year { display: table-cell; }

/* Honour reduced-motion: drop the row hover/transition churn (the canvas is
   already painted as a single static frame by js/library.js). */
@media (prefers-reduced-motion: reduce) {
  .log-row, .type-tab, .tag, .sub-tab, .cover-block,
  .type-badge, .row-link, .expand-link { transition: none !important; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .type-bar { padding: 0 20px; }
  .type-tab { padding: 0 12px; font-size: 10px; }
  .tag-bar { padding: 9px 20px; }
  .log-table thead th, .log-row td { padding: 9px 10px; }
  .td-year, .td-status, .col-year, .col-status { display: none; }
  .expand-inner { padding: 12px 16px 14px 14px; margin: 0 10px 10px; }
}