/* RankBits theme tokens — drives light/dark across the whole site.
   The custom Tailwind colors (ink/surface/card/line) are wired to these CSS
   variables (see each template's tailwind.config), so opacity utilities like
   bg-card/40 adapt automatically. Tailwind's built-in slate text utilities are
   fixed, so we remap the few we use under html.light. */
:root{
  --c-ink:11 16 32;  --c-surface:15 20 38;  --c-card:20 27 49;  --c-line:35 48 82; --c-brand2:34 211 238;
  --glass-bg:rgba(20,27,49,.7); --glass-border:rgba(35,48,82,.8);
  --body-grad1:rgba(99,102,241,.18); --body-grad2:rgba(8,145,178,.12); --body-base:#0b1020;
  --scroll-thumb:#233052; --scheme:dark;
}
html.light{
  --c-ink:246 248 252;  --c-surface:255 255 255;  --c-card:255 255 255;  --c-line:226 232 240; --c-brand2:8 145 178;
  --glass-bg:rgba(255,255,255,.78); --glass-border:rgba(226,232,240,.9);
  --body-grad1:rgba(99,102,241,.10); --body-grad2:rgba(8,145,178,.10); --body-base:#eef2f8;
  --scroll-thumb:#cbd5e1; --scheme:light;
}

body{
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--body-grad1), transparent),
    radial-gradient(900px 500px at 0% 0%, var(--body-grad2), transparent),
    var(--body-base);
}
.glass{ background:var(--glass-bg); backdrop-filter:blur(12px); border:1px solid var(--glass-border); }
.grad-text{ background:linear-gradient(90deg,#6366f1,#0891b2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-feature-menu{display:none}
details[open] > .nav-feature-menu{display:block}
.nav-feature-trigger::-webkit-details-marker{display:none}
.nav-feature-trigger{white-space:nowrap}
details[open] > .nav-feature-trigger .nav-feature-caret{transform:rotate(180deg)}
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:6px }
input,select,textarea{ color-scheme:var(--scheme); }

/* Light-mode remaps for Tailwind's fixed slate utilities actually used in markup */
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300{ color:#1e293b !important; }
html.light .text-slate-400{ color:#475569 !important; }
html.light .text-slate-500{ color:#64748b !important; }
html.light .text-slate-600{ color:#94a3b8 !important; }
html.light .placeholder-slate-500::placeholder,
html.light .placeholder-slate-600::placeholder{ color:#94a3b8 !important; }
html.light .skeleton{ background:#e7ecf5; }

/* Light-theme: darken badge/status colors for readability */
html.light .text-good{ color:#16a34a !important; }
html.light .text-warn{ color:#d97706 !important; }
html.light .text-bad{ color:#dc2626 !important; }

/* Theme toggle icon visibility */
#themeToggle .i-moon{ display:none; }
#themeToggle .i-sun{ display:inline-block; }
html.light #themeToggle .i-moon{ display:inline-block; }
html.light #themeToggle .i-sun{ display:none; }

/* Site-wide custom tooltips. Add data-tip="..." to any focusable/inline element. */
[data-tip]{
  position:relative;
  cursor:help;
}
body:not(.answer-modal-open) [data-tip]:hover,
body:not(.answer-modal-open) [data-tip]:focus-visible{
  z-index:2147483647;
}
body:not(.answer-modal-open) .glass:has([data-tip]:hover),
body:not(.answer-modal-open) .glass:has([data-tip]:focus-visible){
  position:relative;
  z-index:2147483646;
}
[data-tip]::before,
[data-tip]::after{
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index:2147483647;
}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translate(-50%, 4px);
  width:max-content;
  max-width:min(320px, calc(100vw - 32px));
  white-space:normal;
  padding:9px 11px;
  border:1px solid rgb(var(--c-line) / .9);
  border-radius:8px;
  background:rgb(var(--c-surface) / .98);
  color:#cbd5e1;
  box-shadow:0 14px 40px rgba(0,0,0,.34);
  font-size:11px;
  line-height:1.45;
  font-weight:500;
  text-align:left;
  text-transform:none;
  letter-spacing:0;
}
[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translate(-50%, 4px) rotate(45deg);
  width:9px;
  height:9px;
  background:rgb(var(--c-surface) / .98);
  border-right:1px solid rgb(var(--c-line) / .9);
  border-bottom:1px solid rgb(var(--c-line) / .9);
}
[data-tip]:hover::before,
[data-tip]:hover::after,
[data-tip]:focus-visible::before,
[data-tip]:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before{
  transform:translate(-50%, 0) rotate(45deg);
}
[data-tip][data-tip-pos="bottom"]::after{
  top:calc(100% + 9px);
  bottom:auto;
  transform:translate(-50%, -4px);
}
[data-tip][data-tip-pos="bottom"]::before{
  top:calc(100% + 4px);
  bottom:auto;
  transform:translate(-50%, -4px) rotate(225deg);
}
[data-tip][data-tip-pos="bottom"]:hover::after,
[data-tip][data-tip-pos="bottom"]:focus-visible::after{
  transform:translate(-50%, 0);
}
[data-tip][data-tip-pos="bottom"]:hover::before,
[data-tip][data-tip-pos="bottom"]:focus-visible::before{
  transform:translate(-50%, 0) rotate(225deg);
}
.tip-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgb(var(--c-line));
  color:rgb(var(--c-brand2));
  background:rgb(var(--c-card) / .72);
  font-size:10px;
  font-weight:800;
  line-height:1;
  vertical-align:middle;
}
.trend-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid rgb(var(--c-line) / .7);
  padding:2px 7px;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}
.trend-good{ color:#34d399; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.26); }
.trend-bad{ color:#f87171; background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.26); }
.trend-slate{ color:#94a3b8; background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.26); }
html.light [data-tip]::after{ color:#334155; box-shadow:0 14px 34px rgba(15,23,42,.16); }
html.light .trend-good{ color:#16a34a; background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.24); }
html.light .trend-bad{ color:#dc2626; background:rgba(220,38,38,.09); border-color:rgba(220,38,38,.22); }
html.light .trend-slate{ color:#64748b; background:rgba(100,116,139,.10); border-color:rgba(100,116,139,.22); }

html.tip-js [data-tip]::before,
html.tip-js [data-tip]::after{ display:none; }
.site-tip{
  position:fixed;
  left:0;
  top:0;
  width:max-content;
  max-width:min(320px, calc(100vw - 32px));
  padding:9px 11px;
  border:1px solid rgb(var(--c-line) / .9);
  border-radius:8px;
  background:rgb(var(--c-surface) / .98);
  color:#cbd5e1;
  box-shadow:0 14px 40px rgba(0,0,0,.34);
  font-size:11px;
  line-height:1.45;
  font-weight:500;
  text-align:left;
  text-transform:none;
  letter-spacing:0;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index:2147483647;
}
.site-tip.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.site-tip[data-pos="bottom"]{ transform:translateY(-4px); }
.site-tip.show[data-pos="bottom"]{ transform:translateY(0); }
.site-tip::before{
  content:"";
  position:absolute;
  left:var(--tip-arrow-x, 50%);
  width:9px;
  height:9px;
  background:rgb(var(--c-surface) / .98);
  transform:translateX(-50%) rotate(45deg);
}
.site-tip[data-pos="top"]::before{
  bottom:-5px;
  border-right:1px solid rgb(var(--c-line) / .9);
  border-bottom:1px solid rgb(var(--c-line) / .9);
}
.site-tip[data-pos="bottom"]::before{
  top:-5px;
  border-left:1px solid rgb(var(--c-line) / .9);
  border-top:1px solid rgb(var(--c-line) / .9);
}
html.light .site-tip{ color:#334155; box-shadow:0 14px 34px rgba(15,23,42,.16); }

/* RankBits navbar logo: swap dark/light lockup based on active theme.
   Default (dark) shows logo.png; html.light shows the recolored logo-light.png. */
.nav-logo-light { display: none; }
html.light .nav-logo-dark { display: none; }
html.light .nav-logo-light { display: inline-block; }