/**
 * Stimuli Overlay — Primary Source Document Display
 *
 * Cinematic document reveal: spotlight from above, slam-down entrance,
 * floating dust particles, period-accurate document textures by type.
 *
 * Z-index: var(--z-stimuli-doc) = 80 — above scene (z:60), atmospheric (z:10),
 *               but below pause-modal (z:110) and inventory (z:400).
 *
 * Document types styled by class:
 *   .doc-type--arbeiter-zeitung
 *   .doc-type--pinkerton-report
 *   .doc-type--harper-weekly
 *   .doc-type--court-transcript
 *   .doc-type--default  (fallback)
 */

/* ── Google Font: UnifrakturMaguntia (Fraktur for Arbeiter-Zeitung) ─────── */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

/* ── Overlay backdrop ────────────────────────────────────────────────────── */
.stimuli-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-stimuli-doc);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;

  /* Dark blurred game background */
  background: rgba(4, 4, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* Spotlight: radial gradient from top-center */
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(200, 170, 100, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(4, 4, 8, 0.0) 0%, rgba(4, 4, 8, 0.82) 100%);
}

/* ── Dust particles ──────────────────────────────────────────────────────── */
.stimuli-overlay::before,
.stimuli-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Particle container — injected by JS as .stimuli-dust */
.stimuli-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.stimuli-dust-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 170, 100, 0.35);
  animation: dustDrift var(--drift-duration, 8s) linear var(--drift-delay, 0s) infinite;
  opacity: 0;
}

@keyframes dustDrift {
  0%   { transform: translateY(0) translateX(0);   opacity: 0; }
  10%  { opacity: 0.6; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-120vh) translateX(var(--drift-x, 20px)); opacity: 0; }
}

/* ── Document card — entrance animation ─────────────────────────────────── */
.stimuli-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem 2.25rem;
  border-radius: 2px;

  /* Slam-down entrance: scale from 115% → 100%, heavy snap, 250ms */
  animation: slamDown 250ms cubic-bezier(0.175, 0.885, 0.32, 1.1) both;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 140, 80, 0.4) transparent;
}

.stimuli-content::-webkit-scrollbar { width: 5px; }
.stimuli-content::-webkit-scrollbar-track { background: transparent; }
.stimuli-content::-webkit-scrollbar-thumb { background: rgba(180, 140, 80, 0.4); border-radius: 3px; }

@keyframes slamDown {
  from {
    opacity: 0;
    transform: scale(1.15) translateY(-25px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stimuli-content {
    animation: none;
  }
}

/* ── Shared document typography ─────────────────────────────────────────── */
.stimuli-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.stimuli-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.stimuli-source {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
  opacity: 0.75;
}

.stimuli-text {
  font-size: 0.95rem;
  line-height: 1.85;
  max-width: 620px;
  user-select: text;
}

.stimuli-text p { margin-bottom: 0.75rem; }

/* ── Dismiss / continue button ───────────────────────────────────────────── */
#stimuli-dismiss {
  margin-top: 1.5rem;
  width: 100%;
}

/* ── "← Back to story" soft-close button ────────────────────────────────── */
/* Subdued secondary action — does NOT archive the document */
.stimuli-back-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(184, 168, 136, 0.3);
  color: rgba(184, 168, 136, 0.65);
  font-family: var(--font-family-ui, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.stimuli-back-btn:hover {
  color: rgba(232, 220, 196, 0.85);
  border-color: rgba(184, 168, 136, 0.55);
  background: rgba(184, 168, 136, 0.06);
}

.stimuli-back-btn:focus {
  outline: 2px solid rgba(184, 168, 136, 0.5);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT TYPE TEXTURES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Arbeiter-Zeitung — aged parchment, Fraktur heading, torn edges ───── */
.stimuli-content.doc-type--arbeiter-zeitung {
  background-color: #c8a87a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  color: #2a1a08;
  border: none;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(100, 60, 10, 0.18);

  /* Torn-edge SVG border via clip-path approximation */
  clip-path: polygon(
    0% 1.5%, 2% 0%, 4% 1.2%, 6% 0.3%, 8% 1.8%, 10% 0.5%,
    12% 1.4%, 14% 0%, 16% 1.6%, 18% 0.2%, 20% 1.3%, 22% 0%,
    24% 1.7%, 26% 0.4%, 28% 1.5%, 30% 0.1%, 32% 1.8%, 34% 0.3%,
    36% 1.4%, 38% 0%, 40% 1.6%, 42% 0.2%, 44% 1.3%, 46% 0%,
    48% 1.7%, 50% 0.4%, 52% 1.5%, 54% 0.1%, 56% 1.8%, 58% 0.3%,
    60% 1.4%, 62% 0%, 64% 1.6%, 66% 0.2%, 68% 1.3%, 70% 0%,
    72% 1.7%, 74% 0.4%, 76% 1.5%, 78% 0.1%, 80% 1.8%, 82% 0.3%,
    84% 1.4%, 86% 0%, 88% 1.6%, 90% 0.2%, 92% 1.3%, 94% 0%,
    96% 1.7%, 98% 0.4%, 100% 1.5%,
    100% 98.5%, 98% 100%, 96% 98.8%, 94% 100%, 92% 98.7%, 90% 100%,
    88% 98.4%, 86% 100%, 84% 98.6%, 82% 100%, 80% 98.2%, 78% 100%,
    76% 98.5%, 74% 100%, 72% 98.8%, 70% 100%, 68% 98.7%, 66% 100%,
    64% 98.4%, 62% 100%, 60% 98.6%, 58% 100%, 56% 98.2%, 54% 100%,
    52% 98.5%, 50% 100%, 48% 98.8%, 46% 100%, 44% 98.7%, 42% 100%,
    40% 98.4%, 38% 100%, 36% 98.6%, 34% 100%, 32% 98.2%, 30% 100%,
    28% 98.5%, 26% 100%, 24% 98.8%, 22% 100%, 20% 98.7%, 18% 100%,
    16% 98.4%, 14% 100%, 12% 98.6%, 10% 100%, 8% 98.2%, 6% 100%,
    4% 98.5%, 2% 100%, 0% 98.5%
  );
}

.stimuli-content.doc-type--arbeiter-zeitung .stimuli-title {
  font-family: 'UnifrakturMaguntia', 'Times New Roman', serif;
  font-size: 1.6rem;
  color: #1a0e04;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}

/* Ink-bleed on body text */
.stimuli-content.doc-type--arbeiter-zeitung .stimuli-text {
  font-family: 'Times New Roman', Georgia, serif;
  color: #1e1008;
  text-shadow: 0 0 2px rgba(30, 16, 8, 0.4);
  filter: blur(0.3px);
}

.stimuli-content.doc-type--arbeiter-zeitung .stimuli-source {
  font-family: 'Times New Roman', serif;
  color: #3a2010;
}

/* ── 2. Pinkerton Report — cream cardstock, typewriter, CONFIDENTIAL stamp ─ */
.stimuli-content.doc-type--pinkerton-report {
  background-color: #f5f0e4;
  color: #1a1a1a;
  border: 1px solid #c8b898;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.65),
    inset 0 0 30px rgba(180, 160, 120, 0.1);
  position: relative;
  overflow: hidden;
}

/* CONFIDENTIAL diagonal watermark */
.stimuli-content.doc-type--pinkerton-report::before {
  content: 'CONFIDENTIAL';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-family: 'Courier New', monospace;
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(180, 20, 20, 0.15);
  letter-spacing: 0.15em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
}

.stimuli-content.doc-type--pinkerton-report .stimuli-title,
.stimuli-content.doc-type--pinkerton-report .stimuli-text,
.stimuli-content.doc-type--pinkerton-report .stimuli-source,
.stimuli-content.doc-type--pinkerton-report .stimuli-meta,
.stimuli-content.doc-type--pinkerton-report .stimuli-pause-question {
  position: relative;
  z-index: 1;
}

.stimuli-content.doc-type--pinkerton-report .stimuli-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1a1a1a;
}

.stimuli-content.doc-type--pinkerton-report .stimuli-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88rem;
  line-height: 1.9;
  color: #1a1a1a;
}

.stimuli-content.doc-type--pinkerton-report .stimuli-source {
  color: #444;
}

/* ── 3. Harper's Weekly — heavy cream, engraving layout, high contrast ───── */
.stimuli-content.doc-type--harper-weekly {
  background-color: #f0e8d0;
  color: #0a0a0a;
  border: 3px double #8a7a5a;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.65),
    inset 0 0 20px rgba(140, 120, 80, 0.08);
}

.stimuli-content.doc-type--harper-weekly .stimuli-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}

.stimuli-content.doc-type--harper-weekly .stimuli-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.92rem;
  color: #0a0a0a;
  column-count: 2;
  column-gap: 1.5rem;
  column-rule: 1px solid rgba(10, 10, 10, 0.2);
}

/* Engraving illustration placeholder */
.stimuli-content.doc-type--harper-weekly .stimuli-illustration-placeholder {
  width: 100%;
  height: 120px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(10, 10, 10, 0.06) 0px,
      rgba(10, 10, 10, 0.06) 1px,
      transparent 1px,
      transparent 6px
    ),
    #e8dcc0;
  border: 1px solid #8a7a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.8rem;
  color: rgba(10, 10, 10, 0.5);
}

@media (max-width: 600px) {
  .stimuli-content.doc-type--harper-weekly .stimuli-text {
    column-count: 1;
  }
}

/* ── 4. Court Transcript — blue-lined ledger, serif, signature line ──────── */
.stimuli-content.doc-type--court-transcript {
  background-color: #f4f7fc;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(100, 140, 200, 0.25) 27px,
    rgba(100, 140, 200, 0.25) 28px
  );
  color: #0d1a2e;
  border-left: 4px solid rgba(100, 140, 200, 0.5);
  border-top: 1px solid #c0cce0;
  border-right: 1px solid #c0cce0;
  border-bottom: 1px solid #c0cce0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

.stimuli-content.doc-type--court-transcript .stimuli-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0d1a2e;
}

.stimuli-content.doc-type--court-transcript .stimuli-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.92rem;
  color: #0d1a2e;
  line-height: 1.95; /* aligns with 28px ledger lines */
}

/* Handwritten-style signature line */
.stimuli-content.doc-type--court-transcript .stimuli-signature {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid #0d1a2e;
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 1.1rem;
  color: #1a2a4a;
  opacity: 0.75;
}

/* ── 5. Default fallback ─────────────────────────────────────────────────── */
.stimuli-content.doc-type--default {
  background: linear-gradient(160deg, #1e2430 0%, #161c26 100%);
  border: 1px solid rgba(184, 112, 64, 0.3);
  color: var(--color-text-primary, #d4c8a8);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

/* ── Pause question — shared across all types ────────────────────────────── */
.stimuli-pause-question {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.stimuli-content.doc-type--default .stimuli-pause-question,
.stimuli-content:not([class*="doc-type--"]) .stimuli-pause-question {
  border-top-color: rgba(184, 112, 64, 0.3);
}

.stimuli-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .stimuli-content {
    padding: 1.25rem 1rem;
    max-height: 92vh;
  }

  .stimuli-content.doc-type--arbeiter-zeitung .stimuli-title {
    font-size: 1.25rem;
  }

  .stimuli-content.doc-type--pinkerton-report::before {
    font-size: 2.2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANNOTATION LAYER — Charcoal Underline + Sticky Notes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Annotation toolbar (note icon button) ───────────────────────────────── */
.doc-annotation-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.5rem;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  user-select: none;
}

.doc-annotation-toolbar-label {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

.doc-annotation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: inherit;
}

.doc-annotation-btn:hover,
.doc-annotation-btn:focus {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.35);
  outline: 2px solid rgba(42, 26, 10, 0.4);
  outline-offset: 1px;
}

.doc-annotation-btn.active {
  background: rgba(42, 26, 10, 0.12);
  border-color: rgba(42, 26, 10, 0.5);
}

/* ── Charcoal underline spans ────────────────────────────────────────────── */
.doc-charcoal-underline {
  /* Base style — jitter applied via --jitter CSS custom property set by JS */
  border-bottom: 2px solid #2a1a0a;
  position: relative;
  display: inline;
  /* Slight vertical offset for hand-drawn feel */
  padding-bottom: calc(1px + var(--jitter, 0px));
  /* Rough charcoal texture via box-shadow */
  box-shadow: 0 calc(2px + var(--jitter, 0px)) 0 rgba(42, 26, 10, 0.25);
  cursor: default;
}

/* ── Sticky note ─────────────────────────────────────────────────────────── */
.doc-sticky-note {
  position: absolute;
  z-index: 30;
  width: 160px;
  min-height: 80px;
  background: #f5f0e0;
  color: #1a1208;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 22px 10px 10px 12px; /* top padding for paperclip */
  box-shadow:
    2px 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 0 12px rgba(180, 160, 100, 0.08);
  cursor: move;
  user-select: none;

  /* Ragged right edge via clip-path */
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 12%, 98% 14%, 100% 17%, 97% 20%, 100% 23%,
    98% 26%, 100% 29%, 97% 32%, 100% 35%, 98% 38%,
    100% 41%, 97% 44%, 100% 47%, 98% 50%, 100% 53%,
    97% 56%, 100% 59%, 98% 62%, 100% 65%, 97% 68%,
    100% 71%, 98% 74%, 100% 77%, 97% 80%, 100% 83%,
    98% 86%, 100% 89%, 97% 92%, 100% 95%, 98% 98%,
    100% 100%, 0% 100%
  );

  /* Slight rotation for authenticity */
  transform: rotate(var(--note-rotation, -1.5deg));
  transition: box-shadow 0.15s ease;
}

.doc-sticky-note:hover {
  box-shadow:
    3px 5px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(180, 160, 100, 0.08);
}

/* Brass paperclip SVG in top-left corner */
.doc-sticky-note-clip {
  position: absolute;
  top: -6px;
  left: 10px;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

/* Editable textarea inside note */
.doc-sticky-note-text {
  width: 100%;
  min-height: 52px;
  background: transparent;
  border: none;
  resize: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
  cursor: text;
  user-select: text;
  padding: 0;
}

/* Close button */
.doc-sticky-note-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  min-width: unset;
  min-height: unset;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.7rem;
  color: rgba(42, 26, 10, 0.45);
  cursor: pointer;
  line-height: 1;
  border-radius: 2px;
  transition: color 0.1s ease;
}

.doc-sticky-note-close:hover,
.doc-sticky-note-close:focus {
  color: rgba(42, 26, 10, 0.9);
  outline: 1px solid rgba(42, 26, 10, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .doc-sticky-note {
    transition: none;
  }
  .doc-annotation-btn {
    transition: none;
  }
}