/* SuccServer theme for Shelfmark (getbooks.succserver.xyz). Injected by the shelfmark-theme nginx proxy after the app's own CSS.
   Shelfmark = React + Tailwind with a small set of CSS variables (--background-color, --card-background ...). We always use the dark look.
   Needs (loaded before this file): succserver-theme-tokens.css. The starfield (succserver-stars.js) provides #succ-space behind everything. */
/* (Shelfmark's content-security policy blocks Google Fonts, so the system font stack is used here.) */

:root, [data-theme="dark"], [data-theme="light"] {
  color-scheme: dark;
  --primary-color: #5cdbe9; --primary-dark: #3cc4d4;
  --text-color: #e2e6fa; --heading-color: #ffffff; --text: #e2e6fa;
  --background-color: #020309; --bg: #020309;
  --card-background: rgba(6, 8, 22, .62); --bg-soft: rgba(6, 8, 22, .62);
  --input-background: rgba(255, 255, 255, .04);
  --border-color: rgba(125, 140, 230, .18); --border-muted: rgba(125, 140, 230, .18);
  --hover-surface: rgba(255,255,255,.05); --hover-action: rgba(255,255,255,.1); --hover-row: rgba(255,255,255,.06);
  --scrollbar-thumb: rgba(125,140,230,.25); --scrollbar-thumb-hover: rgba(92,219,233,.4);
  --loading-overlay: rgba(2,3,9,.7);
}

/* ---------- page: let the starfield show through ---------- */
html, body { background: #020309 !important; color: #e2e6fa; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
#theme-init + * { }
#root, #root main { background: transparent !important; }
#root { position: relative; z-index: 1; }
/* the sticky top bar paints a solid inline background too: make it frosted glass instead */
#root header.sticky { background: rgba(2, 3, 9, .5) !important; -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
#root > div:not(.inset-0) { background: transparent !important; }
/* full-screen layers (Settings etc.) need a solid background or the page underneath shows through */
#root > div.inset-0 { background: #04061a !important; }
button, input, select, textarea { font-family: inherit; }
::selection { background: color-mix(in srgb, #5cdbe9 35%, transparent); }

/* The app's own "Loading configuration…" text is a 1px screen-reader-only element, so a slow start looks like an empty page.
   While that's the only thing in #root, show a spinner and a label. */
#root > div:only-child:not(:has(*)) {
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
  font: 500 12px 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #7a82a6 !important;
}
#root > div:only-child:not(:has(*))::before {
  content: ""; width: 38px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='rgba(92,219,233,.18)' stroke-width='3'/%3E%3Cpath d='M20 4a16 16 0 0 1 16 16' fill='none' stroke='%235cdbe9' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; animation: none !important;
}
@keyframes succSpin { to { transform: rotate(360deg); } }
/* The wheel above is an animated SVG (SMIL) because the app freezes all CSS animations during startup (html.preload). */
#root > div:only-child:not(:has(*))::after {
  content: "This Site is Slow"; display: block; margin-top: -4px; font: 500 10px 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .24em; text-transform: uppercase; color: #4a5276;
}

/* cards / panels */
#root .rounded-lg.border, #root .rounded-xl.border, #root .rounded-2xl.border, #root [class*="bg-[var(--card-background)]"] {
  background: rgba(6, 8, 22, .62) !important; border-color: rgba(125,140,230,.16) !important; border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}

/* sky (blue) and emerald/green buttons and links -> cyan tint, like the site's primary buttons */
#root [class^="bg-sky-"], #root [class*=" bg-sky-"], #root [class^="bg-emerald-"], #root [class*=" bg-emerald-"], #root [class^="bg-green-"], #root [class*=" bg-green-"] {
  background: color-mix(in srgb, #5cdbe9 16%, transparent) !important; border: 1px solid color-mix(in srgb, #5cdbe9 45%, transparent) !important; color: #e2e6fa !important;
  border-radius: 12px !important; transition: border-color .2s, background .2s;
}
#root [class^="bg-sky-"]:hover, #root [class*=" bg-sky-"]:hover, #root [class^="bg-sky-"]:focus-visible, #root [class*=" bg-sky-"]:focus-visible,
#root [class^="bg-emerald-"]:hover, #root [class*=" bg-emerald-"]:hover, #root [class^="bg-green-"]:hover, #root [class*=" bg-green-"]:hover {
  background: color-mix(in srgb, #5cdbe9 26%, transparent) !important; border-color: #5cdbe9 !important;
}
#root [class^="text-sky-"], #root [class*=" text-sky-"], #root [class^="text-emerald-"], #root [class*=" text-emerald-"] { color: #5cdbe9 !important; }
#root [class^="border-sky-"], #root [class*=" border-sky-"] { border-color: color-mix(in srgb, #5cdbe9 45%, transparent) !important; }
#root a { color: inherit; }

/* inputs */
#root input:not([type="checkbox"]):not([type="radio"]), #root select, #root textarea {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(125,140,230,.22) !important; border-radius: 10px !important; color: #e2e6fa !important; outline: none;
}
#root input:focus, #root select:focus, #root textarea:focus { border-color: #5cdbe9 !important; box-shadow: none !important; }
#root input::placeholder, #root textarea::placeholder { color: #4a5276; }

/* generic buttons, menus, dialogs */
#root button { transition: border-color .2s, background .2s, color .2s; }
#root [role="dialog"], #root [role="menu"], #root [role="listbox"] {
  background: rgba(4, 6, 16, .94) !important; border: 1px solid rgba(125,140,230,.18) !important; border-radius: 18px !important; color: #e2e6fa;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -24px rgba(92,219,233,.4);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* book cards lift like the site's tiles */
@media (hover: hover) {
  #root img[class*="object-cover"], #root [class*="aspect-"] > img { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; border-radius: 10px; }
  #root [class*="aspect-"]:hover > img { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(92,219,233,.55); }
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(125,140,230,.3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(125,140,230,.25); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(92,219,233,.4); background-clip: padding-box; }