/* UI refinement follows unslop by Damir Sokolovsky (@heydamir), CC BY 4.0.
   https://github.com/heydamir/unslop */
/* Range Console skin for the live app.
   The Vue bundle declares its own --h-* palette on each component root, so the
   override has to sit on the same elements with one extra specificity step
   (html[data-aim-local] ...) instead of relying on inheritance from :root. */

html[data-aim-local] {
  --local-accent: var(--rc-signal);
  --local-accent-ink: var(--rc-on-signal);
  --local-font: var(--rc-font-body);
}

html[data-aim-local] :is(.guest-shell, .hall-root, .hall-portal, .al-guide, .al-rv, .al-studio-shell),
html[data-aim-local] :is(.guest-shell.hall-light, .hall-root.hall-light, .hall-portal.hall-light, .al-guide.hall-light, .al-rv.hall-light, .al-studio-shell.hall-light) {
  --al-studio-go: var(--rc-signal);
  --h-bg: var(--rc-paper);
  --h-panel: var(--rc-paper-raise);
  --h-surface: var(--rc-paper-sunk);
  --h-surface-soft: color-mix(in srgb, var(--rc-paper-sunk) 70%, transparent);
  --h-topnav: var(--rc-paper);
  --h-topnav-active: var(--rc-paper-raise);
  --h-border: var(--rc-rule);
  --h-rule: var(--rc-rule-strong);
  --h-row-active: var(--rc-paper-sunk);
  --h-row-hover: color-mix(in srgb, var(--rc-paper-sunk) 72%, transparent);
  --h-text: var(--rc-ink);
  --h-text-soft: var(--rc-ink-soft);
  --h-text-muted: var(--rc-slate);
  --h-text-author: var(--rc-slate);
  --h-accent: var(--rc-signal);
  --h-accent-mid: var(--rc-signal);
  --h-accent-deep: var(--rc-signal-text);
  --h-danger: var(--rc-signal-text);
  --h-on-danger: var(--rc-paper-raise);
  --h-tone-warm: var(--rc-signal);
  --h-tone-cool: var(--rc-ice);
  --h-tone-deep: var(--rc-ink);
  --h-tone-bg: 10%;
  --h-gold: #b0812a;
  --h-silver: #6f7d89;
  --h-bronze: #9a6239;
  --h-on-medal: var(--rc-paper-raise);
  --h-chrome: var(--rc-paper);
  --h-chrome-line: var(--rc-rule);
  --h-chrome-2: var(--rc-paper);
  --h-font: var(--rc-font-body);
  --h-radius: var(--rc-r);
  --sp-ink: var(--rc-paper);
  --sp-panel: var(--rc-paper-raise);
  --sp-raised: var(--rc-paper-sunk);
  --sp-line: var(--rc-rule);
  --sp-text: var(--rc-ink);
  --sp-muted: var(--rc-slate);
  --sp-signal: var(--rc-signal);
  --sp-ice: var(--rc-ice);
  --sp-radius: var(--rc-r);
  --sp-body: var(--rc-font-body);
  --sp-display: var(--rc-font-condensed);
  --wk-red: var(--rc-signal-text);
  --wk-cyan: var(--rc-ice);
  --wk-paper: var(--rc-paper-raise);
  --wk-muted: var(--rc-slate);
  --wk-line: var(--rc-rule);
  --app-font: var(--rc-font-body);
  color-scheme: light;
}

/* The 3D stage, live HUD and pause screens keep the night palette: a paper
   plane behind the viewmodel would wash out the scene. */
html[data-aim-local].aim-gameplay-active :is(.hall-root, .hall-portal),
html[data-aim-local].aim-trainer-open :is(.hall-root, .hall-portal),
html[data-aim-local] body.al-training-active :is(.hall-root, .hall-portal),
html[data-aim-local] :is(.hall-root, .hall-portal).is-night,
html[data-aim-local] :is(.hall-root.hall-light, .hall-portal.hall-light).is-night {
  --h-bg: var(--rc-night);
  --h-panel: var(--rc-night-2);
  --h-surface: var(--rc-night-2);
  --h-topnav: var(--rc-night);
  --h-topnav-active: var(--rc-night-2);
  --h-border: var(--rc-night-rule);
  --h-rule: color-mix(in srgb, var(--rc-night-text) 34%, transparent);
  --h-row-active: var(--rc-night-2);
  --h-row-hover: color-mix(in srgb, var(--rc-night-2) 72%, transparent);
  --h-text: var(--rc-night-text);
  --h-text-soft: #c6ccd2;
  --h-text-muted: #93a0ab;
  --h-text-author: #93a0ab;
  --h-on-danger: var(--rc-night);
  --h-on-medal: var(--rc-night);
  --h-chrome: var(--rc-night);
  --h-chrome-line: var(--rc-night-rule);
  color-scheme: dark;
}

/* The workshop hero is a dark art plate laid on the paper shell. It keeps the
   night palette inside so the scrim and the artwork still carry light text. */
html[data-aim-local] :is(.al-wk-feat, .pw-stage) {
  --h-bg: var(--rc-night);
  --h-panel: color-mix(in srgb, var(--rc-night) 82%, transparent);
  --h-surface: color-mix(in srgb, var(--rc-night-2) 84%, transparent);
  --h-surface-soft: color-mix(in srgb, var(--rc-night-2) 60%, transparent);
  --h-border: color-mix(in srgb, var(--rc-paper) 22%, transparent);
  --h-rule: color-mix(in srgb, var(--rc-paper) 34%, transparent);
  --h-row-hover: color-mix(in srgb, var(--rc-night-2) 70%, transparent);
  --h-row-active: var(--rc-night-2);
  --h-text: var(--rc-paper-raise);
  --h-text-soft: var(--rc-paper-raise);
  --h-text-muted: color-mix(in srgb, var(--rc-paper) 70%, var(--rc-night));
  --h-text-author: color-mix(in srgb, var(--rc-paper) 70%, var(--rc-night));
  --h-accent: var(--rc-signal);
  --h-on-accent: var(--rc-on-signal);
  --h-chrome: var(--rc-night);
  --h-chrome-line: color-mix(in srgb, var(--rc-paper) 16%, transparent);
  color: var(--rc-paper-raise);
  color-scheme: dark;
}

/* Local action cluster (language, performance, help, sign in) is injected by
   site-overrides.css with a fixed light-on-dark palette. */
html[data-aim-local] .aim-local-actions {
  border-color: var(--rc-rule);
  background: var(--rc-paper-raise);
  color: var(--rc-ink);
}

html[data-aim-local] .aim-local-actions :is(.aim-performance-button, .aim-locale-toggle, .aim-account-button, .contact-credit > summary) {
  color: var(--rc-ink);
}

html[data-aim-local] .aim-local-actions :is(.aim-performance-button, .aim-locale-toggle, .aim-account-button, .contact-credit > summary):is(:hover, :focus-visible) {
  border-color: var(--rc-rule-strong);
  background: var(--rc-paper-sunk);
  color: var(--rc-ink);
}

html[data-aim-local] .aim-local-actions .aim-performance-glyph {
  border-color: var(--rc-ink);
}

html[data-aim-local] .aim-local-actions .aim-performance-glyph::after {
  background: var(--rc-signal);
  box-shadow: 0 0 0 2px var(--rc-paper-raise);
}

html[data-aim-local] .hall-topnav .hall-sens :is(input, .hall-sens-value, output) {
  color: var(--rc-signal-text);
}

/* Apply the interface radius to native controls and panels with scoped styles. */
html[data-aim-local] :is(.guest-shell, .hall-root, .hall-portal, .al-studio-shell, .al-guide, .al-rv) :is(button, input, select, textarea, article, dialog, [role="dialog"]) {
  border-radius: var(--rc-r) !important;
}

html[data-aim-local] .hall-topnav {
  background: var(--rc-paper);
  box-shadow: inset 0 -1px 0 var(--rc-rule-strong);
}

/* Remaining mint literals from the local i18n and override layers. */
html[data-aim-local] :is(.hall-tab.is-active, .al-wk-chip.al-wk-on, .aim-donate-fourthwall, .contact-credit a, .aim-game-credit a) {
  color: var(--rc-signal-text);
}

html[data-aim-local] .hall-lat-btn-glyph {
  color: var(--rc-on-signal);
  background: var(--rc-signal);
}

html[data-aim-local] .st-save i {
  background: var(--rc-ice);
}

html[data-aim-local] :is(.al-wk-diff, .aim-vt-card-difficulty) {
  color: var(--rc-slate);
}

html[data-aim-local] :is(.al-wk-diff, .aim-vt-card-difficulty) i.is-on {
  background: currentColor;
}

html[data-aim-local] :is(.al-wk-diff, .aim-vt-card-difficulty)[class*="is-l1"] {
  color: var(--rc-ice);
}

html[data-aim-local] :is(.al-wk-diff, .aim-vt-card-difficulty)[class*="is-l2"] {
  color: var(--rc-ink);
}

html[data-aim-local] :is(.al-wk-diff, .aim-vt-card-difficulty)[class*="is-l3"] {
  color: var(--rc-signal-text);
}

/* Match the specificity of the legacy font override on headings and controls. */
html[data-aim-local] :is(.guest-shell, .hall-root, .hall-portal, .al-studio-shell, .al-guide, .al-rv) :is(h1, h2, h3, h4),
html[data-aim-local] :is(.hall-tab, .hall-brand :is(b, span), .al-wk-go, .hall-rail-quick b, .al-wk-hero-word) {
  font-family: var(--rc-font-condensed) !important;
  letter-spacing: 0;
}

html[data-aim-local] .am-root :is(.am-map, .am-card, .am-scene-card, .am-panel) {
  border-radius: var(--rc-r) !important;
  clip-path: none !important;
}
html[data-aim-local] .am-root :is(.am-btn-red, .am-btn-dark, .am-bar-pc, .am-tabs button) {
  border-radius: var(--rc-r-small) !important;
  clip-path: none !important;
}

/* Studio and guide kept their own blue accent tokens in the bundle. */
html[data-aim-local] :is(.guest-shell, .hall-root, .hall-portal, .al-studio-shell, .al-guide, .al-rv) {
  --al-tn-signal: var(--rc-signal-text);
  --al-studio-accent: var(--rc-signal-text);
  --al-studio-go: var(--rc-signal);
  --am-cyan: var(--rc-ice);
  --pw-cyan: var(--rc-ice);
  --pw-tone: var(--rc-signal);
  --cyan: var(--rc-ice);
  --blue: var(--rc-ice);
  --rov-up: var(--rc-ice);
}

/* Gaming hierarchy: display headings, clear UI labels and real scene content. */
html[data-aim-local] :is(.hall-root, .hall-portal, .al-guide, .al-rv, .al-studio-shell) :is(h1, h2, h3, h4) {
  font-weight: 700 !important;
}
html[data-aim-local] :is(.hall-root, .hall-portal, .al-guide, .al-rv, .al-studio-shell) :is(button, [role="button"]) {
  font-weight: 600 !important;
}
html[data-aim-local] :is(.hall-root, .hall-portal, .al-guide, .al-rv, .al-studio-shell) :is(b, strong) {
  font-weight: 600;
}
/* The native mobile form uses its own shell and the same interface hierarchy. */
html[data-aim-local] .am-root {
  --am-sans: var(--rc-font-body);
  --am-hud: var(--rc-font-body);
  --am-num: var(--rc-font-mono);
  font-variant-numeric: tabular-nums;
}
html[data-aim-local] .am-root :is(h1, h2, h3, .am-sec-title,
  .am-studio-title, .am-mo-title, .am-ps-title, .am-qs-title,
  .am-ss-title, .am-me-out-title, .amp-title, .amp-ep-title) {
  font-weight: 700 !important;
  font-family: var(--rc-font-display) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[data-aim-local] .am-root :is(button, b, strong, .am-tag,
  .am-chip, .amp-tag, .am-row-title, .am-scene-name) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[data-aim-local] .am-root .am-tab {
  min-block-size: 44px;
  font-size: var(--rc-fs-12);
  line-height: 1.3;
}
html[data-aim-local] .am-root .am-icon {
  inline-size: var(--am-icon, 22px);
  block-size: var(--am-icon, 22px);
  stroke-width: 1.8;
}
html[data-aim-local] .am-root :is(.am-scene-author, .am-scene-time,
  .am-scene-rank) { font-size: 12px; line-height: 1.4; }

html[data-aim-local] :is(.hall-root, .hall-portal, .al-guide, .al-rv, .al-studio-shell) :is(h3, h4) { font-weight: 600 !important; }
html[data-aim-local] :is(.aim-account-panel, .aim-ranking-panel, .contact-credit-popover) { border-radius: var(--rc-r-panel) !important; }
html[data-aim-local] .aim-account-panel :is(h2, h3) { font-family: var(--rc-font-display); font-weight: 700; }

html[data-aim-local] .am-root :is(input, select, textarea) { font-size: 16px; }


html[data-aim-local] .hall-bottombar {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  block-size: auto;
  min-block-size: 56px;
  padding-block: 12px;
}
html[data-aim-local] .hall-bottombar::after {
  content: none;
}
html[data-aim-local] .valox-community-notice {
  margin: 0;
  color: var(--rc-ink-soft);
  font: 400 12px/1.6 var(--sp-body, system-ui, sans-serif);
  overflow-wrap: anywhere;
}
html[data-aim-local] .hall-bottombar > .valox-community-notice {
  grid-column: 2;
  justify-self: end;
  text-align: end;
}
@media (max-width: 800px) {
  html[data-aim-local] .hall-bottombar { grid-template-columns: minmax(0, 1fr); }
  html[data-aim-local] .hall-bottombar > .valox-community-notice { grid-column: 1; }
}
html[data-aim-local] .am-main > .valox-community-footer {
  margin-block-start: 24px;
  padding: 20px 16px;
  border-block-start: 1px solid var(--rc-rule);
}
html[data-aim-local] .am-main .valox-community-notice {
  font-size: 13px;
}