/* ── Warm Ink Library View ── */
/* Layered on top of layout.css — overrides and augments the library/welcome screen */

/* Library header enhancements */
.library-wordmark {
  font-family: var(--font-body);
  font-size: var(--font-2xl, 1.5rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.library-subtitle {
  font-family: var(--font-ui);
  font-size: var(--font-sm, 0.85rem);
  color: var(--muted);
}

/* Action button style — overrides .welcome-btn where the new class is applied */
.lib-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-ui);
  font-size: var(--font-sm, 0.85rem);
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary, var(--text));
  cursor: pointer;
  transition: all var(--duration-fast, 0.1s);
  user-select: none;
}
.lib-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 10%, transparent));
}
.lib-action-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.lib-action-btn.primary:hover {
  filter: brightness(1.08);
}
.lib-action-btn svg { width: 14px; height: 14px; }

/* Quick stats bar */
.library-stats-bar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.6rem 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.lib-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.lib-stat-value {
  font-family: var(--font-ui);
  font-size: var(--font-md, 1rem);
  font-weight: 700;
  color: var(--text);
}
.lib-stat-label {
  font-family: var(--font-ui);
  font-size: var(--font-xs, 0.7rem);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card enhancements — complement existing .ms-card styles in layout.css */

/* Genre-based spine color overrides (use data-genre attr on .ms-card) */
.ms-card[data-genre="fantasy"] .ms-card-spine   { background: linear-gradient(to right, #7c6fa0, #a090c8); }
.ms-card[data-genre="romance"] .ms-card-spine   { background: linear-gradient(to right, #b85c7a, #d48a9c); }
.ms-card[data-genre="thriller"] .ms-card-spine  { background: linear-gradient(to right, #3a3a4a, #6a6a8a); }
.ms-card[data-genre="sci-fi"] .ms-card-spine    { background: linear-gradient(to right, #2e6ca0, #4a9ac8); }
.ms-card[data-genre="literary"] .ms-card-spine  { background: linear-gradient(to right, #5a6e4a, #8a9e6a); }

/* Progress bar — rendered under the card body */
.ms-card-progress {
  height: 2px;
  background: var(--surface-3, var(--border));
  border-radius: 1px;
  overflow: hidden;
  margin: 0 1rem 0.6rem;
}
.ms-card-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width var(--duration-normal, 0.2s);
}

/* Card genre label — shown if .ms-card-genre element is present */
.ms-card-genre {
  font-family: var(--font-ui);
  font-size: var(--font-xs, 0.7rem);
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Card excerpt text — shown if .ms-card-excerpt element is present */
.ms-card-excerpt {
  font-family: var(--font-body);
  font-size: var(--font-sm, 0.85rem);
  color: var(--text-secondary, var(--muted));
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.25rem;
}

/* New manuscript dashed card */
.ms-card-new {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg, var(--radius));
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all var(--duration-fast, 0.1s);
  color: var(--muted);
}
.ms-card-new:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 8%, transparent));
}
.ms-card-new-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2, var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast, 0.1s);
}
.ms-card-new:hover .ms-card-new-icon {
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent));
}
.ms-card-new-label {
  font-family: var(--font-ui);
  font-size: var(--font-sm, 0.85rem);
  font-weight: 500;
}

/* Responsive — stack stats bar on small screens */
@media (max-width: 480px) {
  .library-stats-bar {
    gap: 1rem;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
  }
}