/* ============================================================
   version-tags.css — palette and filter states for the
   four-tag version filter (Live / Current / Release / Future).

   Companion to javascripts/version-filter.js, which toggles the
   classes styled below. This file is purely visual; the JS owns
   the state and the DOM, this file makes the state legible.

   Do NOT duplicate rules from extra.css. extra.css owns the
   sidebar nested-tree treatment and the `.md-tag[href*=...]`
   phase chips Material renders at the top of tagged pages.
   This file owns everything new the version filter introduces.
   ============================================================ */

/* ------------------------------------------------------------
   1. Lane palette — CSS variables
   ------------------------------------------------------------ */

:root {
  --lane-live: #0fb5a5;     /* teal   — Shipped + gameplay-verified */
  --lane-current: #3ea14c;  /* green  — Shipped (code believed working) */
  --lane-release: #4f5fbf;  /* indigo — Planned for 1.0 */
  --lane-future: #8b5cf6;   /* violet — Post-launch, aspirational */

  /* Translucent tints for soft-fill backgrounds (10–15% alpha). */
  --lane-live-tint: rgba(15, 181, 165, 0.13);
  --lane-current-tint: rgba(62, 161, 76, 0.13);
  --lane-release-tint: rgba(79, 95, 191, 0.13);
  --lane-future-tint: rgba(139, 92, 246, 0.13);
}

/* Slate (dark mode): lift saturation & lighten so the lane reads
   against the dark canvas instead of fading into it. */
[data-md-color-scheme="slate"] {
  --lane-live: #2dd4bf;
  --lane-current: #6ec77a;
  --lane-release: #818cf6;
  --lane-future: #a78bfa;

  --lane-live-tint: rgba(45, 212, 191, 0.18);
  --lane-current-tint: rgba(110, 199, 122, 0.18);
  --lane-release-tint: rgba(129, 140, 246, 0.18);
  --lane-future-tint: rgba(167, 139, 250, 0.18);
}

/* ------------------------------------------------------------
   2. Topbar segmented control
   ------------------------------------------------------------ */

.version-mode-control {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 1rem;
  padding: 0.15rem;
  background-color: var(--md-default-fg-color--lightest);
  margin: 0 0.5rem;
  font-size: 0.68rem;
  line-height: 1;
  /* Sit on the topbar row, between title and search. */
  flex: 0 0 auto;
}

[data-md-color-scheme="slate"] .version-mode-control {
  background-color: var(--md-default-fg-color--lighter);
}

.version-mode-control__chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: var(--md-primary-bg-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: inherit;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
  /* Hairline gap between chips inside the segmented rail. */
  margin: 0 1px;
}

.version-mode-control__chip:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* Inactive chips: outline-only, lane color on the border. */
.version-mode-control__chip[data-version-mode="live"]:not([data-active="true"]) {
  border-color: var(--lane-live);
  color: var(--lane-live);
}
.version-mode-control__chip[data-version-mode="current"]:not([data-active="true"]) {
  border-color: var(--lane-current);
  color: var(--lane-current);
}
.version-mode-control__chip[data-version-mode="release"]:not([data-active="true"]) {
  border-color: var(--lane-release);
  color: var(--lane-release);
}
.version-mode-control__chip[data-version-mode="future"]:not([data-active="true"]) {
  border-color: var(--lane-future);
  color: var(--lane-future);
}

/* Active chip: solid-filled in lane color, white text. */
.version-mode-control__chip[data-active="true"] {
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.version-mode-control__chip[data-version-mode="live"][data-active="true"] {
  background-color: var(--lane-live);
  border-color: var(--lane-live);
}
.version-mode-control__chip[data-version-mode="current"][data-active="true"] {
  background-color: var(--lane-current);
  border-color: var(--lane-current);
}
.version-mode-control__chip[data-version-mode="release"][data-active="true"] {
  background-color: var(--lane-release);
  border-color: var(--lane-release);
}
.version-mode-control__chip[data-version-mode="future"][data-active="true"] {
  background-color: var(--lane-future);
  border-color: var(--lane-future);
}

/* Hover (inactive only): soft tint + lift. */
.version-mode-control__chip:not([data-active="true"]):hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.version-mode-control__chip[data-version-mode="live"]:not([data-active="true"]):hover {
  background-color: var(--lane-live-tint);
}
.version-mode-control__chip[data-version-mode="current"]:not([data-active="true"]):hover {
  background-color: var(--lane-current-tint);
}
.version-mode-control__chip[data-version-mode="release"]:not([data-active="true"]):hover {
  background-color: var(--lane-release-tint);
}
.version-mode-control__chip[data-version-mode="future"]:not([data-active="true"]):hover {
  background-color: var(--lane-future-tint);
}

/* ------------------------------------------------------------
   2.1 Mobile collapse — segmented control becomes a popover pill
   ------------------------------------------------------------ */

.version-mode-control__pill {
  /* The collapsed pill chrome; hidden on wide viewports. */
  display: none;
}
.version-mode-control__popover {
  /* The popover dropdown; hidden until the pill expands. */
  display: none;
}

@media (max-width: 720px) {
  .version-mode-control {
    position: relative;
    padding: 0;
    background-color: transparent;
  }

  /* Hide all four chips except the active one. */
  .version-mode-control__chip:not([data-active="true"]) {
    display: none;
  }

  /* Active chip becomes the pill; chevron is a ::after glyph. */
  .version-mode-control__chip[data-active="true"]::after {
    content: " \25BE"; /* ▾ */
    margin-left: 0.4rem;
    font-size: 0.8em;
  }

  /* When the wrapper is in "open" state the popover is revealed.
     JS toggles `data-open="true"` on the wrapper. */
  .version-mode-control[data-open="true"] .version-mode-control__popover {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 16rem;
    background-color: var(--md-default-bg-color);
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 0.4rem;
    z-index: 5;
  }

  /* Inside the popover, show every chip stacked, with definition text. */
  .version-mode-control[data-open="true"] .version-mode-control__chip {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin: 0.1rem 0;
  }
  .version-mode-control[data-open="true"] .version-mode-control__chip::after {
    content: "";
  }
}

/* ------------------------------------------------------------
   3. Body section filtering — hide/fade
   ------------------------------------------------------------ */

.section-hidden {
  display: none;
}

/* Power-user override: show all sections regardless of filter. */
body.version-show-all .section-hidden {
  display: block;
}

.section-fade-out {
  opacity: 0;
  transition: opacity 120ms ease;
}
.section-fade-in {
  opacity: 1;
  transition: opacity 120ms ease;
}

/* ------------------------------------------------------------
   4. Lane treatment on tagged section headings
   ------------------------------------------------------------ */

/* Lane border on every tagged heading — a quiet visual hint that
   reads even with JS disabled. */
[data-version~="live"] {
  border-left: 2px solid var(--lane-live);
  padding-left: 0.5em;
}
[data-version~="current"] {
  border-left: 2px solid var(--lane-current);
  padding-left: 0.5em;
}
[data-version~="release"] {
  border-left: 2px solid var(--lane-release);
  padding-left: 0.5em;
}
[data-version~="future"] {
  border-left: 2px solid var(--lane-future);
  padding-left: 0.5em;
}

/* Multi-value headings (e.g. data-version="current release"):
   the first matching rule wins; the JS-injected chip handles the
   "and also release" disambiguation. */

/* Lane chip prefix — only visible in "show all" mode so readers
   can tell at a glance which lane each section belongs to. */
body.version-show-all [data-version]::before {
  content: attr(data-version);
  display: inline-block;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 0.75em;
  margin-right: 0.6em;
  vertical-align: middle;
  color: #ffffff;
  background-color: var(--md-default-fg-color--light);
}
body.version-show-all [data-version~="live"]::before {
  background-color: var(--lane-live);
}
body.version-show-all [data-version~="current"]::before {
  background-color: var(--lane-current);
}
body.version-show-all [data-version~="release"]::before {
  background-color: var(--lane-release);
}
body.version-show-all [data-version~="future"]::before {
  background-color: var(--lane-future);
}

/* ------------------------------------------------------------
   5. Nav dimming — out-of-mode pages
   ------------------------------------------------------------ */

.md-nav__link.nav-out-of-mode {
  opacity: 0.45;
  font-style: italic;
  transition: opacity 0.15s ease;
}
[data-md-color-scheme="slate"] .md-nav__link.nav-out-of-mode {
  /* Dark backgrounds need slightly more presence to remain legible. */
  opacity: 0.55;
}

/* Small lane-colored dot prefix on dimmed nav links — JS sets a
   `data-lane="X"` attribute on each `.nav-out-of-mode` link to pick
   the dot color. */
.md-nav__link.nav-out-of-mode::before {
  content: "\25CF"; /* ● */
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.65em;
  vertical-align: middle;
  color: var(--md-default-fg-color--light);
}
.md-nav__link.nav-out-of-mode[data-lane="live"]::before    { color: var(--lane-live); }
.md-nav__link.nav-out-of-mode[data-lane="current"]::before { color: var(--lane-current); }
.md-nav__link.nav-out-of-mode[data-lane="release"]::before { color: var(--lane-release); }
.md-nav__link.nav-out-of-mode[data-lane="future"]::before  { color: var(--lane-future); }

/* Power-user toggle: hide out-of-mode pages entirely. */
body.version-hide-out-of-mode .md-nav__link.nav-out-of-mode {
  display: none;
}

/* ------------------------------------------------------------
   6. Right-side TOC dimming → hide
   ------------------------------------------------------------ */

.md-sidebar--secondary .md-nav__link.toc-out-of-mode {
  display: none;
}

/* ------------------------------------------------------------
   7. Empty-state callout (injected by JS when filter hides 100%)
   ------------------------------------------------------------ */

.version-empty-state {
  margin: 2rem auto;
  max-width: 36rem;
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  background-color: var(--md-default-fg-color--lightest);
  text-align: center;
}

/* Lane-colored border + soft background tint by current mode. */
body.version-mode-live .version-empty-state {
  border-color: var(--lane-live);
  background-color: var(--lane-live-tint);
}
body.version-mode-current .version-empty-state {
  border-color: var(--lane-current);
  background-color: var(--lane-current-tint);
}
body.version-mode-release .version-empty-state {
  border-color: var(--lane-release);
  background-color: var(--lane-release-tint);
}
body.version-mode-future .version-empty-state {
  border-color: var(--lane-future);
  background-color: var(--lane-future-tint);
}

.version-empty-state h2 {
  margin-top: 0;
  font-size: 1.2rem;
  font-weight: 700;
}
.version-empty-state h2 .lane-name {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.version-mode-live    .version-empty-state h2 .lane-name { color: var(--lane-live); }
body.version-mode-current .version-empty-state h2 .lane-name { color: var(--lane-current); }
body.version-mode-release .version-empty-state h2 .lane-name { color: var(--lane-release); }
body.version-mode-future  .version-empty-state h2 .lane-name { color: var(--lane-future); }

.version-empty-state p {
  margin: 0.5rem 0 1rem;
  color: var(--md-default-fg-color);
}

.version-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
/* Buttons inherit Material's .md-button styling — we don't restyle. */

/* ------------------------------------------------------------
   8. Sticky context banner
   ------------------------------------------------------------ */

.version-context-banner {
  position: sticky;
  top: 4rem; /* clears Material's header (~3rem) with breathing room */
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem 0;
  border-radius: 0.25rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  background-color: var(--md-default-fg-color--lightest);
  font-size: 0.8rem;
  min-height: 3rem;
  box-sizing: border-box;
}

body.version-mode-live .version-context-banner {
  border-color: var(--lane-live);
  background-color: var(--lane-live-tint);
}
body.version-mode-current .version-context-banner {
  border-color: var(--lane-current);
  background-color: var(--lane-current-tint);
}
body.version-mode-release .version-context-banner {
  border-color: var(--lane-release);
  background-color: var(--lane-release-tint);
}
body.version-mode-future .version-context-banner {
  border-color: var(--lane-future);
  background-color: var(--lane-future-tint);
}

.version-context-banner button {
  margin-left: auto;
}

@media (max-width: 720px) {
  .version-context-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .version-context-banner button {
    margin-left: 0;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   9. "Save as default" pill (after ?mode= override)
   ------------------------------------------------------------ */

@keyframes version-save-pill-fade {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

.version-save-default-pill {
  position: fixed;
  top: 3.5rem;
  right: 1rem;
  z-index: 6;
  padding: 0.4rem 0.85rem;
  border-radius: 1rem;
  background-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  animation: version-save-pill-fade 6s ease forwards;
}

.version-save-default-pill:focus-visible {
  outline: 2px solid var(--md-default-bg-color);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   10. Print — show everything, prefix lane tags
   ------------------------------------------------------------ */

@media print {
  .section-hidden {
    display: block !important;
  }
  .nav-out-of-mode {
    opacity: 1 !important;
    font-style: normal !important;
  }
  .version-mode-control,
  .version-context-banner,
  .version-empty-state__actions,
  .version-save-default-pill {
    display: none !important;
  }
  [data-version]::before {
    content: "[" attr(data-version) "] ";
    font-weight: bold;
    text-transform: uppercase;
  }
}

/* ------------------------------------------------------------
   11. Reduced motion — keep functional toggles, skip transitions
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .section-fade-out,
  .section-fade-in {
    transition: none !important;
  }
  .version-mode-control__chip {
    transition: none !important;
  }
  .version-mode-control__chip:hover {
    transform: none !important;
  }
  .version-save-default-pill {
    animation: none !important;
    /* Stay visible; JS removes the node after the timeout instead. */
    opacity: 1;
  }
  .version-empty-state * {
    transition: none !important;
    animation: none !important;
  }
}