/* styles/chrome.css — styling for shared site chrome (lib/site-chrome.js).
   Uses existing page CSS variables with fallbacks so it adapts to whatever palette
   (light or dark) the page is on. Load AFTER the page's own styles. */

/* Plan/account chip */
.nh-chip {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 10px; padding: 4px 11px; border-radius: 999px;
  font: 700 11px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .5px;
  text-decoration: none; white-space: nowrap; min-width: 48px;
  border: 1px solid var(--gold, #c8911f); color: var(--gold, #c8911f);
  background: rgba(0, 0, 0, .18); transition: opacity .25s, background .2s;
}
.nh-chip:hover { background: rgba(0, 0, 0, .30); text-decoration: none; }
.nh-chip[data-state="paid"]  { background: var(--gold, #c8911f); color: #1a1208; border-color: var(--gold, #c8911f); }
.nh-chip[data-state="trial"] { border-color: #3fae6b; color: #3fae6b; }
.nh-chip[data-state="free"]  { opacity: .95; }
.nh-chip[data-state="anon"]  { opacity: .9; }
.nh-chip[data-state="pending"] { opacity: 0; }

/* Chrome-injected language bar (only on pages lacking their own) */
.nh-langbar {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 7px 12px; background: var(--hud, #0d0a14);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nh-langbar button {
  background: none; border: 1px solid transparent; cursor: pointer;
  color: rgba(255, 255, 255, .5); font: 600 12px 'DM Sans', sans-serif;
  padding: 4px 9px; border-radius: 4px; transition: color .2s, border-color .2s;
}
.nh-langbar button:hover { color: rgba(255, 255, 255, .85); }
.nh-langbar button.active { color: var(--gold, #c8911f); border-color: var(--gold, #c8911f); }

/* Chrome-injected footer (only on pages lacking their own) */
footer[data-nh-footer] {
  margin-top: 40px; padding: 26px 20px; text-align: center;
  background: var(--hud, #0d0a14); color: rgba(255, 255, 255, .6);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
footer[data-nh-footer] .nh-foot-links {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px;
}
footer[data-nh-footer] .nh-foot-links a {
  color: var(--gold, #c8911f); text-decoration: none; font-size: 13px; font-weight: 600;
}
footer[data-nh-footer] .nh-foot-links a:hover { text-decoration: underline; }
footer[data-nh-footer] .nh-foot-tag { font-size: 12px; color: rgba(255, 255, 255, .4); }

/* Mobile: shapes the hamburger doesn't collapse (prefectures .hud-right, rpg bare <nav> .nav-links)
   would wrap the 9 injected nav links into a very tall header / overflow horizontally.
   Keep them on one horizontally-scrollable row so the header stays short and nothing overflows. */
@media (max-width: 680px) {
  header.hud .hud-right,
  nav:not(.nav) > .nav-links {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    scrollbar-width: none;
  }
  header.hud .hud-right > *,
  nav:not(.nav) > .nav-links > * { flex: 0 0 auto; }
  header.hud .hud-right::-webkit-scrollbar,
  nav:not(.nav) > .nav-links::-webkit-scrollbar { height: 0; width: 0; }
}