/* ── KH Spoiler — cipher block + inline styles, news design system ──
   Sharp corners, gold on dark, no pills/outlines. Loaded only on news
   article pages. Pairs with js/kh_spoiler.js (Task I engine). */

.kh-spoiler {
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 0;
  background: #0d0716;
  margin: 22px 0;
}

/* ── Toggle: full-width top bar button, quiet bordered ── */
.kh-spoiler-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  position: relative;
  z-index: 1;
  font-family: var(--kh-font-inter, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: normal;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 0;
  color: var(--kh-gold, #d4af37);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kh-spoiler-toggle-kicker {
  background: #d4af37;
  border-radius: 0;
  color: #1a1024;
  padding: 2px 8px;
}

.kh-spoiler-toggle-label {
  border-radius: 0;
  color: #c8b8e0;
}

.kh-spoiler-toggle-hint {
  margin-left: auto;
  border-radius: 0;
  color: rgba(224, 216, 236, 0.55);
}

.kh-spoiler-toggle:hover,
.kh-spoiler-toggle:active,
.kh-spoiler-toggle:focus-visible {
  background: #d4af37;
  color: #1a1024;
  outline: none;
}

.kh-spoiler-toggle:hover .kh-spoiler-toggle-kicker,
.kh-spoiler-toggle:hover .kh-spoiler-toggle-label,
.kh-spoiler-toggle:hover .kh-spoiler-toggle-hint,
.kh-spoiler-toggle:active .kh-spoiler-toggle-kicker,
.kh-spoiler-toggle:active .kh-spoiler-toggle-label,
.kh-spoiler-toggle:active .kh-spoiler-toggle-hint,
.kh-spoiler-toggle:focus-visible .kh-spoiler-toggle-kicker,
.kh-spoiler-toggle:focus-visible .kh-spoiler-toggle-label,
.kh-spoiler-toggle:focus-visible .kh-spoiler-toggle-hint {
  background: transparent;
  color: inherit;
}

/* ── Body: hidden until the engine seals it (armed) or it is opened.
   Visibility keeps layout so the canvas always has size; the opaque cipher
   covers the live markup, and decrypted zones erase to it. ── */
.kh-spoiler-body {
  background: #08040e;
  border-radius: 0;
  padding: 14px 16px;
  visibility: hidden;
}

.kh-spoiler--armed .kh-spoiler-body,
.kh-spoiler--open .kh-spoiler-body {
  visibility: visible;
}

/* ── Canvas: WebGL cipher overlay ── */
.kh-spoiler-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  pointer-events: none;
  display: block;
}

.kh-spoiler--open .kh-spoiler-canvas {
  display: none;
}

/* ── Fallback/static (no WebGL2 or reduced motion): faint cipher stripes ── */
.kh-spoiler--fallback:not(.kh-spoiler--open) .kh-spoiler-body,
.kh-spoiler--static:not(.kh-spoiler--open) .kh-spoiler-body {
  border-radius: 0;
  background-color: #08040e;
  background-image: repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.06) 0 8px, transparent 8px 16px);
}

/* ── Inline spoilers ── */
.kh-spoiler-inline {
  background: rgba(212, 175, 55, 0.18);
  border-radius: 0;
  padding: 0 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kh-spoiler-inline:not(.kh-spoiler--open) {
  color: transparent;
}

.kh-spoiler-inline.kh-spoiler--open {
  border-radius: 0;
  color: inherit;
  background: transparent;
}

/* ── Spoiler interior: term chips + item rhythm (open state) ── */
.kh-spoiler-body .kh-spoiler-item {
  border-radius: 0;
  margin: 0 0 12px;
}

.kh-spoiler-body .kh-spoiler-item:last-child {
  margin-bottom: 0;
}

.kh-spoiler-term {
  display: inline-block;
  border-radius: 0;
  background: #d4af37;
  color: #1a1024;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  margin: 0 8px 2px 0;
}

@media (prefers-reduced-motion: reduce) {
  .kh-spoiler-toggle,
  .kh-spoiler-inline {
    transition: none;
  }
}

@media print {
  .kh-spoiler-body {
    visibility: visible !important;
  }

  .kh-spoiler-canvas,
  .kh-spoiler-toggle-hint {
    display: none !important;
  }
}

@media (width <= 600px) {
  .kh-spoiler-body {
    padding: 10px 12px;
  }

  .kh-spoiler-toggle {
    flex-wrap: wrap;
  }
}