/*
 * MU/TH/UR 6000 — shared Weyland-Yutani theme.
 * Loaded by every page alongside the Tailwind runtime (see js/muthur-theme.js,
 * which mirrors these colours into Tailwind's palette).
 */

:root {
  color-scheme: dark;

  --wy-void:    #07070a;
  --wy-hull:    #0d0e12;
  --wy-panel:   #12141a;
  --wy-line:    #26282f;
  --wy-amber:   #e8b62c;
  --wy-bright:  #ffd75e;
  --wy-deep:    #a8801a;
  --wy-nominal: #4ade80;
}

html {
  /* Keep long mono labels from forcing a sideways scroll on narrow phones. */
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* ── CRT overlay ──────────────────────────────────────────────────────
   Faint scanlines plus a vignette, drawn over the whole document.        */

.crt::before,
.crt::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.crt::before {
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
}

.crt::after {
  z-index: 49;
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 45%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* The scanlines are 1px on a 3px pitch — on a high-DPI phone that lands
   somewhere between shimmer and moiré, so widen the pitch there. */
@media (max-width: 640px) {
  .crt::before {
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 4px
    );
  }
}

/* ── HUD corner brackets ──────────────────────────────────────────────
   The clipped corners on the banner's status panels.                     */

.brackets { position: relative; }

.brackets::before,
.brackets::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--wy-deep);
  border-style: solid;
  pointer-events: none;
}

.brackets::before { top: -1px;    left: -1px;  border-width: 1px 0 0 1px; }
.brackets::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ── Rules & dividers ─────────────────────────────────────────────── */

.hairline {
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--wy-deep) 12%,
    var(--wy-deep) 88%,
    transparent
  );
}

/* ── Table of contents (disclaimer) ───────────────────────────────── */

.toc-link {
  border-left: 1px solid var(--wy-line);
}

.toc-link:hover {
  border-left-color: var(--wy-amber);
  color: var(--wy-bright);
}

.toc-link[aria-current='true'] {
  border-left-color: var(--wy-amber);
  color: var(--wy-bright);
  background: linear-gradient(90deg, rgba(232, 182, 44, 0.09), transparent);
}

/* On phones the index is a <details> drawer so it does not push the document
   a full screen down; from lg up it is an always-open panel above the content. */
@media (min-width: 1024px) {
  .toc-drawer > summary { display: none; }

  .toc-drawer > .toc-body {
    display: block !important;
    height: auto !important;
  }
}

.toc-drawer > summary { cursor: pointer; list-style: none; }
.toc-drawer > summary::-webkit-details-marker { display: none; }

.toc-drawer[open] > summary .toc-chevron { transform: rotate(180deg); }

/* ── Motion & print ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .crt::before,
  .crt::after,
  .no-print { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ── Top navigation strip ─────────────────────────────────────────────
   A painted-metal amber bar, the way hazard signage reads on the hull.   */

.nav-strip {
  background: linear-gradient(
    180deg,
    var(--wy-bright) 0%,
    var(--wy-amber) 55%,
    var(--wy-deep) 100%
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  color: #07070a;
}

.nav-strip a {
  color: rgba(7, 7, 10, 0.68);
  transition: color 150ms ease;
}

.nav-strip a:hover,
.nav-strip a:focus-visible {
  color: #07070a;
}

.nav-strip .strip-dot {
  background: rgba(7, 7, 10, 0.75);
}

/* Dark chip on the amber strip — the one call to action that has to pop. */
.nav-strip a.strip-cta {
  background: var(--wy-void);
  color: var(--wy-bright);
  border: 1px solid rgba(0, 0, 0, 0.45);
}

.nav-strip a.strip-cta:hover,
.nav-strip a.strip-cta:focus-visible {
  background: #171922;
  color: var(--wy-bright);
}