/* ═══════════════════════════════════════════════
   DAG LIBRARY — Material Design 3 Design System
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

/* ── Tokens ─────────────────────────────────── */
:root {
  --md-primary:        #1A73E8;
  --md-primary-dark:   #1557B0;
  --md-primary-light:  #E8F0FE;
  --md-secondary:      #5F6368;
  --md-surface:        #FFFFFF;
  --md-surface-var:    #F1F3F4;
  --md-background:     #F8F9FA;
  --md-on-surface:     #202124;
  --md-on-surface-var: #5F6368;
  --md-outline:        #DADCE0;
  --md-error:          #D93025;
  --md-error-light:    #FCE8E6;
  --md-success:        #137333;
  --md-success-light:  #E6F4EA;
  --md-warning:        #F29900;
  --md-warning-light:  #FEF7E0;

  /* Elevation shadows */
  --shadow-1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);

  /* Shape */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 50px;

  /* Transition */
  --ease: cubic-bezier(.2,0,0,1);
  --duration: 200ms;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Roboto', sans-serif;
  background: var(--md-background);
  color: var(--md-on-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Ripple ──────────────────────────────────── */
.ripple { position: relative; overflow: hidden; cursor: pointer; }
.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  border-radius: inherit;
  pointer-events: none;
}
.ripple:hover::after  { opacity: .06; }
.ripple:active::after { opacity: .12; }

/* ── Top App Bar ─────────────────────────────── */
.top-bar {
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-1);
}
.top-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-bar-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--md-on-surface);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-bar-subtitle {
  font-size: .75rem;
  color: var(--md-on-surface-var);
  font-weight: 400;
  margin-top: 1px;
}

/* ── Breadcrumb ──────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .875rem;
  color: var(--md-on-surface-var);
}
.breadcrumb a {
  color: var(--md-on-surface-var);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.breadcrumb a:hover { background: var(--md-surface-var); color: var(--md-on-surface); text-decoration: none; }
.breadcrumb .sep { color: var(--md-outline); font-size: 1.1rem; }
.breadcrumb .current { color: var(--md-on-surface); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Icon Button ─────────────────────────────── */
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-on-surface-var);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  flex-shrink: 0;
}
.icon-btn:hover  { background: var(--md-surface-var); }
.icon-btn:active { background: var(--md-outline); }
.icon-btn.active { color: var(--md-primary); }
.icon-btn .material-icons-round { font-size: 20px; }

/* ── Filled Button ───────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .0107em;
  cursor: pointer;
  transition: box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.btn .material-icons-round { font-size: 18px; }

.btn-filled {
  background: var(--md-primary);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-filled:hover  { box-shadow: var(--shadow-2); background: #1669D3; text-decoration: none; color: #fff; }
.btn-filled:active { box-shadow: none; background: #1557B0; }

.btn-tonal {
  background: var(--md-primary-light);
  color: var(--md-primary-dark);
}
.btn-tonal:hover  { background: #D2E3FC; text-decoration: none; color: var(--md-primary-dark); }

.btn-outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
}
.btn-outlined:hover { background: var(--md-primary-light); text-decoration: none; }

.btn-text {
  background: transparent;
  color: var(--md-primary);
  padding: 0 12px;
}
.btn-text:hover { background: var(--md-primary-light); text-decoration: none; }

.btn-danger {
  background: transparent;
  color: var(--md-error);
  border: 1px solid #FECDD3;
}
.btn-danger:hover { background: var(--md-error-light); }

.btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }

/* ── Chip ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--md-on-surface-var);
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.chip:hover { background: var(--md-surface-var); box-shadow: var(--shadow-1); }
.chip.selected {
  background: var(--md-primary-light);
  border-color: var(--md-primary);
  color: var(--md-primary-dark);
}
.chip .material-icons-round { font-size: 16px; }

/* ── Search Field ────────────────────────────── */
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--md-surface-var);
  border-radius: var(--radius-full);
  padding: 0 16px 0 12px;
  height: 40px;
  border: 1px solid transparent;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.search-field:focus-within {
  background: var(--md-surface);
  border-color: var(--md-primary);
  box-shadow: var(--shadow-1);
}
.search-field .material-icons-round { color: var(--md-on-surface-var); font-size: 20px; flex-shrink: 0; }
.search-field input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: .9375rem;
  color: var(--md-on-surface);
  outline: none;
  min-width: 0;
}
.search-field input::placeholder { color: var(--md-on-surface-var); }

/* ── Card ─────────────────────────────────────── */
.card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--md-outline);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.card-elevated {
  border: none;
  box-shadow: var(--shadow-1);
}
.card-elevated:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.card-filled { background: var(--md-surface-var); border: none; }
.card-success { background: var(--md-success-light); border-color: #A8D5B5; }
.card-warning { background: var(--md-warning-light); border-color: #F6D76B; }
.card-error   { background: var(--md-error-light);   border-color: #F2B8B5; }

/* ── Progress Bar ─────────────────────────────── */
.progress-track {
  height: 4px;
  background: var(--md-primary-light);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--md-primary);
  border-radius: 2px;
  transition: width .5s var(--ease);
}

/* ── Linear Progress (indeterminate) ─────────── */
.progress-linear {
  height: 4px;
  background: var(--md-primary-light);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress-linear::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 40%;
  height: 100%;
  background: var(--md-primary);
  border-radius: 2px;
  animation: progress-slide 1.5s infinite ease-in-out;
}
@keyframes progress-slide {
  0%   { left: -50%; }
  100% { left: 110%; }
}

/* ── Stage Item (for download progress) ──────── */
.stage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: .875rem;
  color: var(--md-on-surface-var);
  background: var(--md-surface-var);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.stage-item.active  { background: var(--md-primary-light); color: var(--md-primary-dark); font-weight: 500; }
.stage-item.done    { background: var(--md-success-light); color: var(--md-success); }
.stage-item.error   { background: var(--md-error-light);   color: var(--md-error); }
.stage-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stage-icon .material-icons-round { font-size: 18px; }
.stage-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--md-primary-light);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Drop Zone ───────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--md-outline);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.drop-zone:hover, .drop-zone.drag {
  border-color: var(--md-primary);
  background: var(--md-primary-light);
}
.drop-zone-icon { color: var(--md-on-surface-var); font-size: 40px; margin-bottom: 8px; display: block; }
.drop-zone-icon .material-icons-round { font-size: 40px; }

/* ── Category Color Map ──────────────────────── */
.cat-anointing        { --cat-bg:#FEF7E0; --cat-on:#7D4A00; }
.cat-call-of-god      { --cat-bg:#EDE7F6; --cat-on:#4527A0; }
.cat-church-growth    { --cat-bg:#E8F5E9; --cat-on:#1B5E20; }
.cat-demonology       { --cat-bg:#FCE4EC; --cat-on:#880E4F; }
.cat-evangelism       { --cat-bg:#FBE9E7; --cat-on:#BF360C; }
.cat-finances         { --cat-bg:#E0F2F1; --cat-on:#004D40; }
.cat-leadership       { --cat-bg:#E3F2FD; --cat-on:#0D47A1; }
.cat-loyalty          { --cat-bg:#EDE7F6; --cat-on:#311B92; }
.cat-marriage         { --cat-bg:#FCE4EC; --cat-on:#880E4F; }
.cat-pastoral-ministry{ --cat-bg:#E0F7FA; --cat-on:#006064; }
.cat-prayer           { --cat-bg:#E1F5FE; --cat-on:#01579B; }
.cat-the-arts         { --cat-bg:#F3E5F5; --cat-on:#4A148C; }
.cat-the-secrets      { --cat-bg:#FFF3E0; --cat-on:#E65100; }
.cat-war              { --cat-bg:#FFEBEE; --cat-on:#B71C1C; }
.cat-work-of-god      { --cat-bg:#F1F8E9; --cat-on:#33691E; }
.cat-strong-christian { --cat-bg:#E0F7FA; --cat-on:#006064; }
.cat-general          { --cat-bg:#F5F5F5; --cat-on:#424242; }

.category-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 500;
  background: var(--cat-bg);
  color: var(--cat-on);
  letter-spacing: .01em;
}

/* ── Book Card ───────────────────────────────── */
.book-card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--md-outline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.book-card:hover {
  box-shadow: var(--shadow-3);
  border-color: #BDBDBD;
  transform: translateY(-3px);
}
.book-card:active { transform: translateY(0); box-shadow: var(--shadow-1); }

/* Cover: fixed 2:3 book-shaped aspect ratio */
.book-cover {
  position: relative;
  width: 100%;
  padding-top: 148%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cat-bg, #E3F2FD);
}
.book-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s, transform .3s var(--ease);
  z-index: 2;
}
.book-cover img.loaded { opacity: 1; }
.book-card:hover .book-cover img { transform: scale(1.04); }

/* Fallback cover — always visible underneath, hidden by image when loaded */
.book-cover-fb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  gap: 6px;
  background: var(--cat-bg, #E3F2FD);
  z-index: 1;
}
.book-cover-fb .fb-title {
  font-size: .73rem;
  font-weight: 700;
  color: var(--cat-on, #0D47A1);
  text-align: center;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-cover-fb .fb-author {
  font-size: .62rem;
  color: var(--cat-on, #0D47A1);
  opacity: .65;
  text-align: center;
  margin-top: auto;
}
.book-cover-fb .fb-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: var(--cat-on, #0D47A1);
  opacity: .12;
}

/* Downloaded badge */
.cover-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 3px 8px 3px 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 500;
  color: #fff;
  pointer-events: none;
}
.cover-badge .material-icons-round { font-size: 12px; }

/* Progress overlay at bottom of cover */
.cover-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.3);
}
.cover-progress-fill {
  height: 100%;
  background: var(--md-primary);
  transition: width .4s var(--ease);
}

.book-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;          /* stretch to fill remaining card height */
  min-height: 0;
}
.book-card-title {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--md-on-surface);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  color: var(--md-on-surface-var);
  margin-bottom: 4px;
}
.book-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: .8125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
  text-decoration: none;
  margin-top: auto;
}
.book-card-action .material-icons-round { font-size: 15px; }
.book-card-action.read { background: var(--md-primary); color: #fff; }
.book-card-action.read:hover { background: var(--md-primary-dark); text-decoration: none; }
.book-card-action.get  { background: var(--md-surface-var); color: var(--md-on-surface); }
.book-card-action.get:hover  { background: var(--md-outline); text-decoration: none; }

/* ── Stats Bar ───────────────────────────────── */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  color: var(--md-on-surface-var);
}
.stats-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--md-outline);
}

/* ── Divider ─────────────────────────────────── */
.divider { height: 1px; background: var(--md-outline); margin: 0; }

/* ── Empty State ─────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--md-on-surface-var);
}
.empty-state .material-icons-round { font-size: 64px; opacity: .3; margin-bottom: 16px; }
.empty-state h3 { font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; color: var(--md-on-surface); }
.empty-state p  { font-size: .875rem; max-width: 300px; }

/* ── Form Fields ─────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--md-on-surface-var);
  letter-spacing: .03em;
}
.field input, .field select {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-md);
  font-family: 'Roboto', sans-serif;
  font-size: .9375rem;
  color: var(--md-on-surface);
  background: var(--md-surface);
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.field input:focus, .field select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary-light);
}
.field .field-hint { font-size: .75rem; color: var(--md-on-surface-var); }

/* ── Banner ──────────────────────────────────── */
.banner {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.banner .material-icons-round { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.banner-warning { background: var(--md-warning-light); color: #7D4A00; }
.banner-success { background: var(--md-success-light); color: var(--md-success); }
.banner-error   { background: var(--md-error-light);   color: var(--md-error); }
.banner-info    { background: var(--md-primary-light);  color: var(--md-primary-dark); }

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-outline); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #BDBDBD; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 599px) {
  .top-bar-inner { height: auto; min-height: 56px; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .top-bar-title { font-size: 1rem; }
  .btn { height: 36px; padding: 0 16px; font-size: .8125rem; }
  .search-field { width: 100% !important; }
}

@media (min-width: 600px) {
  .top-bar-inner { height: 64px; flex-wrap: nowrap; }
}

/* ── Utility ─────────────────────────────────── */
.step-desc { font-size: .875rem; color: var(--md-on-surface-var); line-height: 1.55; }
.text-muted { color: var(--md-on-surface-var); }