/* Wizard Catalog — Table Manager 3.x "Backglass" theme
   Static styling only: everything data-driven is set inline by catalog.js. */

:root {
  --ink: #e6ebf5;
  --ink-dim: #8d97ad;
  --ink-mute: #677187;
  --page: #080b14;
  --panel: #0d1220;
  --panel-2: #0b0f1c;
  --cyan: #4de3ff;
  --cyan-hi: #9df0ff;
  --green: #5cf2a5;
  --amber: #fdbc4b;
  --pink: #ff055d;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-hi); }

input, button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.msym {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---- header nav ---------------------------------------------------- */
/* Base colour lives here, never inline, so these rules actually win. */

.nav-a { color: var(--ink-dim); text-decoration: none; transition: color 140ms ease, background 140ms ease; }
.nav-a:hover { color: var(--ink); background: rgba(77, 227, 255, 0.08); }
/* active page — set by the page, not by hover */
.nav-a[aria-current="page"] { color: var(--cyan); background: rgba(77, 227, 255, 0.08); }
.nav-a[aria-current="page"]:hover { color: var(--cyan-hi); }

/* ---- interactive bits ---------------------------------------------- */

.btn-primary {
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--page);
  transition: background 140ms ease, color 140ms ease;
}
.btn-primary:hover { background: var(--cyan-hi); color: var(--page); }

.icon-link { transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
/* over cover art */
.icon-link--art { border: 1px solid rgba(77, 227, 255, 0.35); background: rgba(8, 11, 20, 0.82); color: var(--cyan); }
.icon-link--art:hover { border-color: var(--cyan); background: rgba(77, 227, 255, 0.18); color: var(--cyan-hi); }
/* in the list rows */
.icon-link--muted { border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--ink-dim); }
.icon-link--muted:hover { border-color: var(--cyan); color: var(--cyan); }
/* drawer + lightbox chrome */
.icon-link--drawer { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(8, 11, 20, 0.8); color: var(--ink); }
.icon-link--overlay { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(8, 11, 20, 0.7); color: var(--ink); }
.icon-link--drawer:hover,
.icon-link--overlay:hover { border-color: var(--cyan); color: var(--cyan); }

.ghost-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--ink-dim);
  transition: border-color 140ms ease, color 140ms ease;
}
.ghost-btn--thin { border-color: rgba(255, 255, 255, 0.12); }
.ghost-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* Controls whose base border/background/colour is data-driven (set inline from
   renderVals): the hover has to out-specify the inline style. */
.dyn-hover { transition: border-color 140ms ease, color 140ms ease; }
.dyn-hover:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.fopt:hover { border-color: rgba(77, 227, 255, 0.4) !important; }

.card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  border-color: rgba(77, 227, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(77, 227, 255, 0.25), 0 12px 40px rgba(77, 227, 255, 0.12);
}

.row:hover { background: rgba(77, 227, 255, 0.06); }

.sortitem { background: transparent; }
.sortitem:hover { background: rgba(77, 227, 255, 0.1); }

.tile { transition: opacity 140ms ease; }
.tile:hover { opacity: 0.85; }

.footer-col a { color: #b6bfd1; }
.footer-col a:hover { color: var(--cyan); }

/* ---- scrollbars ---------------------------------------------------- */
/* Global: every scroller on the page, including the drawer and filter lists. */

* { scrollbar-width: thin; scrollbar-color: rgba(77, 227, 255, 0.38) #0a0e1a; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0e1a; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05); }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  background-color: rgba(77, 227, 255, 0.34);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(77, 227, 255, 0.62); }
::-webkit-scrollbar-thumb:active { background-color: var(--cyan); }
::-webkit-scrollbar-corner { background: transparent; }

/* the sticky list header scrolls in sync with the body — never show its bar */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { height: 0; width: 0; }

/* ---- motion -------------------------------------------------------- */

@keyframes shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes drawerin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* mobile detail sheet */
@keyframes sheetin { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- phones: matches the marketing page breakpoint -------------------- */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  header > div { padding: 0 14px !important; height: 54px !important; gap: 8px !important; }
  header img { height: 24px !important; }
  main { padding: 20px 18px 64px !important; }
  footer > div { padding-left: 18px !important; padding-right: 18px !important; gap: 24px 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- no-JS fallback ------------------------------------------------ */

.nojs {
  max-width: 640px;
  margin: 120px auto;
  padding: 0 22px;
  text-align: center;
  color: var(--ink-dim);
}
.nojs h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--ink);
}