/* Decorative background, only explicitly selected routes in header.php.
   Alpha .50 = 50% transparent. Never apply opacity to content/text. */
.library-backdrop {
  --library-image: url("library-reader-1950s.webp");
  --library-mobile-image: url("library-reader-1950s-mobile.webp");
  --library-base: #f5f0e6;
  --library-wash: rgba(255, 248, 233, .28);
  --library-panel: rgba(255, 248, 233, .50);
  --library-text: rgba(255, 248, 233, .78);
  --muted: #60564b;
  isolation: isolate;
  background: var(--library-base);
}
/* Index uses the same editorial surfaces as the customer workspaces.
   Scope to its wrapper; operational status colours remain meaningful. */
.library-backdrop .system-overview { min-width: 0; }
.library-backdrop .system-overview .overview-intro {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--library-panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.system-overview :is(.overview-intro h2, .customer-workspace-card h2, .customer-workspace-card h3) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.025em;
}
.library-backdrop .system-overview :is(.health-card, .health-chart-frame) {
  background: var(--library-panel);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
}
.system-overview .health-chart svg .grid { stroke: var(--chart-grid); }
.system-overview .system-health .panel-head time {
  background: transparent;
  color: var(--muted);
  padding: 0;
}
.system-overview .overview-stats .stat-card { min-height: 140px; }
.system-overview .overview-stats a.stat-card:hover {
  transform: none;
  border-color: var(--green);
  box-shadow: var(--shadow);
}
.system-overview :is(.customer-workspace-head, .customer-metrics, .module-links) {
  min-width: 0;
  flex-wrap: wrap;
}
.system-overview :is(.customer-workspace-card, .customer-workspace-head > div) { min-width: 0; }
.system-overview :is(h2, h3, p, small, time) { overflow-wrap: anywhere; }
.system-overview .module-links a { color: var(--green); }
@media (max-width: 620px) {
  .library-backdrop .system-overview .overview-intro { padding: 18px; }
  .system-overview .overview-stats .stat-card { min-height: 0; }
  .system-overview .health-card { padding: 14px 8px; }
  .system-overview .health-card small { white-space: normal; overflow: visible; font-size: 10px; }
  .system-overview .customer-workspace-head { align-items: flex-start; gap: 14px; }
}
html[data-theme="dark"] .library-backdrop {
  --library-base: #221e1a;
  --library-wash: rgba(29, 23, 17, .48);
  --library-panel: rgba(48, 39, 33, .50);
  --library-text: rgba(38, 31, 25, .78);
  --muted: #d9cdbd;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .library-backdrop {
    --library-base: #221e1a;
    --library-wash: rgba(29, 23, 17, .48);
    --library-panel: rgba(48, 39, 33, .50);
    --library-text: rgba(38, 31, 25, .78);
    --muted: #d9cdbd;
  }
}
.library-backdrop::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: 0 auto 0 50%;
  width: min(100%, 2400px);
  transform: translateX(-50%);
  /* Brighten only the decorative layer, never the foreground UI. */
  filter: brightness(2) sepia(.18);
  background-image: linear-gradient(var(--library-wash), var(--library-wash)),
    var(--library-image);
  background-position: center, 60% center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.library-backdrop .app-shell,
.library-backdrop .content { background: transparent; }
.library-backdrop-woman {
  --library-image: url("library-woman-1950s.webp");
  --library-mobile-image: url("library-woman-1950s-mobile.webp");
}
.library-backdrop :is(.panel, .stat-card, .customer-summary, .customer-module-card,
  .customer-card, .article-card, .editorial-card, .customer-workspace-card,
  .evaluation-detail, .offer-card, .detail) {
  background: var(--library-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Nested table/card surfaces must not hide the photograph behind an opaque fill. */
.library-backdrop :is(.responsive-table tr, .banner-stat-card, .banner-stat-image) {
  background: transparent;
}
.library-backdrop-woman :is(.analysis-box, .customer-article-html, .manual-source-list) {
  background: var(--library-panel);
}
.library-backdrop-woman .content > :is(.editorial-nav, .filters) {
  background: var(--library-text);
  padding: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.library-backdrop :is(.table-wrap th, .period-tabs, .ranking-list .rank) {
  background: var(--library-panel);
}
.library-backdrop .period-tabs a.active { color: var(--accent-ink); }
.library-backdrop :is(.topbar, .dashboard-footer),
.library-backdrop .content > :is(p, h2, h3, .pagination) {
  background: var(--library-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 16px 20px;
}
.library-backdrop .sidebar {
  background: var(--nav);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.library-backdrop .sidebar :is(nav a, .logout, .nav-section, .brand small,
  .nav-customer summary, .nav-customer summary i) { color: #f5f0e6; }
.library-backdrop .sidebar nav a.active { color: #244e51; }
/* Floating help must remain readable over other text, not become a glass layer. */
.library-backdrop .ui-help-popover { background: var(--card); }
/* A backdrop-filter creates a containing block for fixed descendants.
   Keep the mobile menu viewport-sized rather than confined to its header. */
@media (max-width: 900px) {
  .library-backdrop .sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--nav);
  }
}
@media (max-width: 700px) {
  .library-backdrop::before {
    background-image: linear-gradient(var(--library-wash), var(--library-wash)),
      var(--library-mobile-image);
    background-position: center, 67% center;
  }
  .library-backdrop :is(.topbar, .dashboard-footer),
  .library-backdrop .content > :is(p, h2, h3, .pagination) { padding: 14px; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] .library-backdrop { --library-panel: var(--card); --library-text: var(--card); }
  .library-backdrop .sidebar { background: var(--nav); }
}
@media (forced-colors: active), print {
  .library-backdrop::before { display: none; }
  .library-backdrop :is(.panel, .stat-card, .customer-summary, .customer-module-card,
    .topbar, .dashboard-footer, .sidebar) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}