/* ============================================================
   theme.css — Releasing Lions Reading Room
   Shared design system. Include after config.js, before page CSS.
   
   Design philosophy: "Structured Warmth"
   — Warm parchment base (not sky blue)
   — Deep navy structure (not scattered blue)
   — Gold reserved for accent only (not decoration)
   — White cards with subtle shadow (not gold borders)
   — Tabler outline icons in navigation
   — Fixed sidebar on desktop, hamburger on mobile
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.10.0/tabler-icons.min.css');

/* ── DESIGN TOKENS ───────────────────────────────────────────────────────── */
:root {
  /* Page backgrounds */
  --bg:          #f8f7f4;   /* warm parchment — the main page canvas */
  --bg-alt:      #f2f0eb;   /* slightly deeper, for nested sections */
  --bg-dark:     #ede9e1;   /* hover states on page bg */

  /* Card surfaces */
  --card:        #ffffff;   /* primary card background */
  --card-alt:    #fafaf8;   /* secondary card, subtle differentiation */

  /* Navy — structural color */
  --navy:        #1a1f3a;   /* sidebar, menu bar, primary buttons */
  --navy-mid:    #252b4a;   /* nav item hover bg */
  --navy-light:  #3a4268;   /* less prominent navy elements */
  --navy-xlt:    #e8eaf2;   /* navy tint for tag backgrounds */

  /* Gold — accent ONLY */
  --gold:        #c89848;   /* primary accent: active nav, recommendation star */
  --gold-light:  #e8c56a;   /* hover states */
  --gold-pale:   #fdf6e8;   /* gold-tinted backgrounds */
  --gold-dim:    #a07028;   /* darker gold for text on light bg */
  --gold-deep:   #6a4810;   /* gold text on gold-pale bg */

  /* Text */
  --ink:         #1a1f3a;   /* primary text — same as navy */
  --ink-2:       #3a4268;   /* secondary text */
  --ink-3:       #5a6a8a;   /* muted text, labels */
  --ink-4:       #8a90a8;   /* placeholder, meta text */

  /* Semantic */
  --green:       #2d5a3d;   /* read/success */
  --green-bg:    #eaf5ed;   /* success background */
  --red:         #a83232;   /* error/delete */
  --red-bg:      #fdf0f0;   /* error background */

  /* Borders */
  --border:      rgba(26,31,58,.1);    /* default hairline */
  --border-mid:  rgba(26,31,58,.18);   /* emphasized divider */
  --border-gold: rgba(200,152,72,.3);  /* gold accent border */

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(26,31,58,.06), 0 1px 2px rgba(26,31,58,.04);
  --shadow-md:   0 4px 12px rgba(26,31,58,.08), 0 2px 4px rgba(26,31,58,.05);
  --shadow-lg:   0 12px 32px rgba(26,31,58,.12), 0 4px 8px rgba(26,31,58,.06);

  /* Layout */
  --sidebar-w:   240px;
  --topbar-h:    0px;
  --content-max: 1100px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;

  /* Transitions */
  --transition:  .15s ease;
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */
body.dark-mode {
  --bg:          #0f1120;
  --bg-alt:      #141728;
  --bg-dark:     #1a1f38;
  --card:        #1c2038;
  --card-alt:    #1e2440;
  --navy:        #2d3560;
  --navy-mid:    #353d6e;
  --navy-light:  #4858a0;
  --navy-xlt:    rgba(36,53,168,.25);
  --ink:         #e8eaf8;
  --ink-2:       #b8c0d8;
  --ink-3:       #8890b0;
  --ink-4:       #5868a0;
  --border:      rgba(255,255,255,.08);
  --border-mid:  rgba(255,255,255,.14);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.5);
}

/* ── RESET & BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  /* Layout: sidebar on left, content on right, on desktop */
  display: flex;
  flex-direction: column;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.menu-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy);
  border-bottom: 1px solid rgba(200,152,72,.25);
  display: flex;
  align-items: center;
  padding: 0 1.2rem 0 1rem;
  gap: .8rem;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.menu-bar-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.menu-bar-logo img {
  height: 28px;
  width: auto;
  mix-blend-mode: screen;
  opacity: .92;
}
.menu-bar-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  letter-spacing: .02em;
  white-space: nowrap;
}

.menu-bar-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 400;
  color: rgba(255,255,255,.5);
  flex: 1;
  /* On desktop: hidden (sidebar shows context) */
}

.menu-bar-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.menu-bar-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  transition: background var(--transition), color var(--transition);
}
.menu-bar-action-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.menu-bar-action-btn i { font-size: 18px; }

/* Hamburger — only visible on mobile */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: none; /* hidden on desktop */
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
  transition: background var(--transition);
}
.hamburger-btn:hover { background: rgba(255,255,255,.1); }
.hamburger-btn i { font-size: 20px; }

/* ── SIDEBAR NAVIGATION ──────────────────────────────────────────────────── */
.side-drawer {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: var(--navy);
  border-right: 1px solid rgba(200,152,72,.15);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* Desktop: always visible, no transition needed */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.side-drawer::-webkit-scrollbar { width: 4px; }
.side-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.drawer-section {
  padding: 1.2rem 1rem .35rem 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.3);
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--transition);
  position: relative;
}
.drawer-link:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  border-left-color: rgba(200,152,72,.4);
}
.drawer-link.nav-active {
  background: rgba(200,152,72,.12);
  color: var(--gold-light);
  border-left-color: var(--gold);
  font-weight: 500;
}
.drawer-link .di {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
/* Use Tabler icons when di contains an i.ti element */
.drawer-link .di i {
  font-size: 17px;
  line-height: 1;
}

.drawer-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: .5rem .8rem;
}

/* ── SIDEBAR BRAND HEADER — replaces the removed top bar's logo, styled to
   match the releasinglions.com landing page ── */
.drawer-brand {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem 1rem 1.3rem;
  border-bottom: 1px solid rgba(200,152,72,.15);
  text-align: center;
  flex-shrink: 0;
}
.drawer-brand-logo { width: 52px; height: auto; margin-bottom: .6rem; filter: drop-shadow(0 0 14px rgba(200,152,72,.4)); }
.drawer-brand-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: .02em; line-height: 1.1; }
.drawer-brand-sub { font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }

/* ── SIDEBAR UTILITY FOOTER — search + dark mode, replaces the removed top
   bar's action buttons ── */
.drawer-utility {
  margin-top: auto;
  border-top: 1px solid rgba(200,152,72,.15);
  padding: .6rem;
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}
.drawer-utility-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
  color: rgba(255,255,255,.6); font-family: 'DM Sans', sans-serif; font-size: 10.5px;
  padding: .5rem .4rem; cursor: pointer; transition: all .15s;
}
.drawer-utility-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.drawer-utility-btn i { font-size: 14px; }

/* ── FLOATING MOBILE MENU BUTTON — replaces the removed top bar's hamburger.
   Hidden on desktop (sidebar is always visible there); shown only within
   the same mobile breakpoint the sidebar itself uses. ── */
.mobile-menu-fab {
  display: none;
  position: fixed; top: 1rem; left: 1rem; z-index: 310;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); border: 1px solid rgba(200,152,72,.35);
  color: #fff; font-size: 1.2rem; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Overlay — only for mobile */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  backdrop-filter: blur(1px);
}

/* ── MAIN CONTENT AREA ───────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--topbar-h);
}

.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  padding: 2rem 2rem 5rem;
}

/* Legacy support — pages using page-wrap directly */
.page-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 0 5rem;
  opacity: 0;
  transition: opacity .4s ease;
}
.page-wrap.visible { opacity: 1; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.page-subtitle {
  font-size: .9rem;
  color: var(--ink-3);
  line-height: 1.65;
  margin-top: .4rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}
.section-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.verse-callout {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--gold-dim);
  line-height: 1.7;
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem;
  transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }

.card-gold-accent {
  border-top: 2px solid var(--gold);
}

/* ── STAT STRIP ─────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 2rem;
}
.stat-cell {
  padding: 1.1rem 1.2rem;
  border-right: 1px solid var(--border);
  position: relative;
}
.stat-cell:last-child { border-right: none; }
.stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}
/* Gold accent on specific stat cells */
.stat-cell.accent .stat-val { color: var(--gold); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary — navy, used for main actions */
.btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-mid); box-shadow: var(--shadow-sm); }

/* Gold — recommendation/faith actions only */
.btn-gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-dim); }

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-mid);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-xlt); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); }

/* Danger */
.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(168,50,50,.2);
}
.btn-danger:hover { background: var(--red); color: #fff; }

/* Small variant */
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

/* ── FORM ELEMENTS ───────────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.field-input,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="search"],
select,
textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.field-input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,31,58,.08);
}
textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

/* Search input with icon */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap .search-icon {
  position: absolute;
  left: .75rem;
  color: var(--ink-4);
  font-size: 15px;
  pointer-events: none;
}
.search-wrap input {
  padding-left: 2.2rem;
}
.search-wrap .search-clear {
  position: absolute;
  right: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-4);
  font-size: 14px;
  padding: .2rem .4rem;
  border-radius: var(--radius-sm);
}
.search-wrap .search-clear:hover { color: var(--ink); }

/* Checkbox */
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
  border-radius: 3px;
}

/* ── BOOK TILES ──────────────────────────────────────────────────────────── */
.book-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2/3;
  box-shadow: var(--shadow-sm);
}
.book-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-mid);
}

/* ── BOOK TABLE ──────────────────────────────────────────────────────────── */
.book-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.book-table thead th {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border-mid);
  text-align: left;
  background: var(--bg-alt);
  font-weight: 500;
  white-space: nowrap;
}
.book-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.book-table thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.book-table tbody tr {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  transition: background var(--transition);
}
.book-table tbody tr:hover { background: var(--bg); }
.book-table tbody tr:last-child { border-bottom: none; }
.book-table tbody td {
  padding: .65rem .8rem;
  color: var(--ink);
  vertical-align: middle;
}

/* ── SECTION HEADERS ─────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}
.section-header .section-title { margin: 0; }
.section-header .section-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── BADGES & TAGS ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-gold { background: var(--gold-pale); color: var(--gold-deep); }
.badge-navy { background: var(--navy-xlt); color: var(--navy); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-neutral { background: var(--bg-alt); color: var(--ink-3); }

/* ── TOAST NOTIFICATIONS ─────────────────────────────────────────────────── */
.rl-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  padding: .75rem 1.2rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  max-width: 320px;
}
.rl-toast.show { opacity: 1; }
.rl-toast.error { border-left-color: var(--red); }

/* ── MODAL OVERLAYS ──────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15,17,32,.6);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink-3);
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.modal-close:hover { color: var(--ink); background: var(--bg-alt); }
.modal-body {
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  flex: 1;
}
.modal-footer {
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
}

/* ── VIEW TABS ───────────────────────────────────────────────────────────── */
.view-tabs {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.view-tab {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .65rem .8rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.view-tab:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-md);
}
.view-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.vt-icon { font-size: 1.1rem; line-height: 1; }
.vt-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-3);
}
.view-tab.active .vt-label { color: rgba(255,255,255,.85); }

/* ── READING GOAL BAR ────────────────────────────────────────────────────── */
.goal-bar-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.goal-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6rem;
}
.goal-bar-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.goal-bar-count {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.goal-bar-track {
  height: 6px;
  background: var(--bg-dark);
  border-radius: 3px;
  overflow: hidden;
}
.goal-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 3px;
  transition: width .5s ease;
}
.goal-bar-fill.complete { background: linear-gradient(90deg, var(--green), #1a7a4a); }

/* ── QUOTE CARD ──────────────────────────────────────────────────────────── */
.quote-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
  transition: box-shadow var(--transition);
}
.quote-card:hover { box-shadow: var(--shadow-md); }
.quote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: .8rem;
}

/* ── SCROLLBAR STYLING ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }

  .side-drawer {
    left: calc(-1 * 240px);
    width: 240px;
    transition: left .28s cubic-bezier(.4,0,.2,1);
    z-index: 300;
  }
  .side-drawer.open { left: 0; }
  .drawer-overlay.open { display: block; }

  .hamburger-btn { display: flex; }
  .mobile-menu-fab { display: flex; }
  .menu-bar-logo-text { display: none; }

  .main-content { margin-left: 0; padding: 1.2rem 1rem 4rem; }
}

@media (max-width: 600px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .view-tabs { grid-template-columns: repeat(3, 1fr); }
  .toolbar { gap: .4rem; }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.text-gold { color: var(--gold); }
.text-muted { color: var(--ink-3); }
.text-sm { font-size: .82rem; }
.font-mono { font-family: 'DM Mono', monospace; }
.font-serif { font-family: 'Playfair Display', serif; }


/* ── ENHANCEMENT 1: Page transition animation ────────────────────────────── */
/* Smooth fade-in when pages load — prevents jarring flash of content */
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-wrap.visible,
.page-content.visible,
#main-wrap.visible {
  animation: pageIn .3s ease both;
}

/* ── ENHANCEMENT 2: Focus styles for accessibility ───────────────────────── */
/* Visible focus rings for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── ENHANCEMENT 3: Improved dark mode coverage ──────────────────────────── */
body.dark-mode .card { background: #1c2038; border-color: rgba(255,255,255,.08); }
body.dark-mode .toolbar { background: #1c2038; border-color: rgba(255,255,255,.08); }
body.dark-mode .stat-strip { background: #1c2038; border-color: rgba(255,255,255,.08); }
body.dark-mode .stat-cell { background: #1c2038; border-color: rgba(255,255,255,.06); }
body.dark-mode .stat-val { color: #e8eaf8; }
body.dark-mode .stat-lbl { color: #5868a0; }
body.dark-mode .book-tile { background: #1c2038; border-color: rgba(255,255,255,.08); }
body.dark-mode .book-table tbody tr { background: #1c2038; }
body.dark-mode .book-table tbody tr:hover { background: #252b4a; }
body.dark-mode .book-table thead th { background: #141728; color: #5868a0; }
body.dark-mode .view-tab { background: #1c2038; border-color: rgba(255,255,255,.08); }
body.dark-mode .view-tab.active { background: #2d3560; }
body.dark-mode .goal-bar-wrap { background: #1c2038; }
body.dark-mode .goal-bar-track { background: rgba(255,255,255,.06); }
body.dark-mode .modal-box { background: #1c2038; border-color: rgba(255,255,255,.12); }
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea { background: #141728; color: #e8eaf8; border-color: rgba(255,255,255,.12); }
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus { border-color: var(--gold); }
body.dark-mode .section-title { color: #e8eaf8; }
body.dark-mode .page-title { color: #e8eaf8; }
body.dark-mode .badge-navy { background: rgba(36,53,168,.4); color: #a0b0f8; }
body.dark-mode .badge-gold { background: rgba(200,152,72,.15); color: var(--gold-light); }

/* ── ENHANCEMENT 4: Loading state skeleton screens ───────────────────────── */
/* Shows animated placeholder while data loads, better than a blank white space */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-alt) 25%,
    var(--bg-dark) 37%,
    var(--bg-alt) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}
body.dark-mode .skeleton {
  background: linear-gradient(90deg,
    #1c2038 25%, #252b4a 37%, #1c2038 63%
  );
  background-size: 400% 100%;
}

/* ── ENHANCEMENT 5: Mobile bottom nav bar ────────────────────────────────── */
/* On mobile, show a bottom tab bar for the most common actions */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--navy);
  border-top: 1px solid rgba(200,152,72,.2);
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: rgba(255,255,255,.55);
  font-size: 9px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .04em;
  transition: color var(--transition);
  padding: 6px 0 2px;
}
.mobile-nav-item i { font-size: 20px; line-height: 1; }
.mobile-nav-item.active { color: var(--gold); }
.mobile-nav-item:hover { color: rgba(255,255,255,.85); }
@media (max-width: 900px) {
  .mobile-bottom-nav { display: block; }
  .page-wrap,
  .page-content,
  #main-wrap,
  .main-wrap { padding-bottom: 70px !important; }
}

/* ── BOOK COVER PLACEHOLDER ──────────────────────────────────────────────── */
/* When a book has no cover image, show a warm parchment placeholder          */
/* instead of the previous dark navy/brown which felt heavy and overwhelming  */
.cover-placeholder,
.book-tile-cover-placeholder,
.card-row-cover-placeholder,
.panel-cover-placeholder {
  background: linear-gradient(135deg, var(--bg-alt), var(--bg-dark)) !important;
  color: var(--border-gold) !important;
}