/* ==========================================================
   DESIGN TOKENS
   ========================================================== */
:root {
  /* Chrome palette — subtly archival, warm off-white */
  --bg:              #f4f0e8;
  --surface:         #faf8f3;
  --surface-raised:  #ffffff;
  --text:            #2a2118;
  --text-muted:      #7a6a5a;
  --text-faint:      #b0a090;
  --accent:          #8b6f5e;
  --accent-light:    rgba(139, 111, 94, 0.12);
  --accent-line:     rgba(139, 111, 94, 0.25);
  --accent-border:   rgba(139, 111, 94, 0.45);

  /* Intervention palette */
  --protect-bg:      rgba(72, 130, 96, 0.10);
  --protect-border:  rgba(72, 130, 96, 0.55);
  --accel-bg:        rgba(180, 65, 35, 0.07);
  --accel-border:    rgba(180, 65, 35, 0.45);

  /* Typography scale */
  --font-ui:         'Space Mono', 'Courier New', monospace;
  --font-poem-0:     'Cormorant Garamond', Georgia, serif;
  --font-poem-1:     'IM Fell English', Georgia, serif;
  --font-poem-2:     'Lato', 'Helvetica Neue', sans-serif;
  --font-poem-3:     'Special Elite', 'Courier New', cursive;
  --font-poem-4:     'Space Mono', 'Courier New', monospace;
  --font-poem-5:     'UnifrakturMaguntia', fantasy;
  --font-poem-6:     'VT323', 'Courier New', monospace;

  /* Poem display size */
  --poem-size:       1.55rem;

  /* Transitions */
  --t-fast:  0.25s ease;
  --t-mid:   0.5s ease;
  --t-slow:  1.2s ease;
}

/* ==========================================================
   RESET & BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-poem-0);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background var(--t-slow), color var(--t-slow);
}

/* ==========================================================
   HEADER
   ========================================================== */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16.5px 42px;
  border-bottom: 1px solid var(--accent-line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: background var(--t-slow), border-color var(--t-slow);
}

#header-title {
  font-family: var(--font-ui);
  font-size: 0.975rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

#header-title .title-em  { color: var(--accent); }
#header-title .title-sep { color: var(--text-faint); }

#phase-indicator {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

#phase-indicator.pi-entropy   { color: #9a4020; border-color: rgba(154, 64, 32, 0.4); }
#phase-indicator.pi-finishing { color: #705030; border-color: rgba(112, 80, 48, 0.35); }
#phase-indicator.pi-terminal  { color: var(--text-faint); border-color: var(--accent-line); }

/* ==========================================================
   MAIN LAYOUT
   ========================================================== */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ==========================================================
   COMPOSITION PHASE
   ========================================================== */
#composition-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 36px 44px 40px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  opacity: 1;
  transition: opacity 0.55s ease;
}

#composition-phase.fading { opacity: 0; pointer-events: none; }
#composition-phase.gone   { display: none; }

/* Editor */
.editor-label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.editor-label-opt {
  font-size: 0.55rem;
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0.05em;
}

#poem-editor {
  width: 100%;
  min-height: 200px;
  max-height: 42vh;
  background: var(--surface-raised);
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  padding: 28px 32px;
  font-family: var(--font-poem-0);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

#poem-editor::placeholder { color: var(--text-faint); }

#poem-editor:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(139, 111, 94, 0.08);
}

#poem-title-input {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  padding: 12px 32px;
  font-family: var(--font-poem-0);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

#poem-title-input::placeholder { color: var(--text-faint); }

#poem-title-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(139, 111, 94, 0.08);
}

/* Config grid */
#config-panel {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}

.config-section { display: flex; flex-direction: column; gap: 14px; }

.config-section-title {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-line);
}

/* Module toggles */
.module-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}

.module-toggle input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  margin-top: 3px;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.module-toggle input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.module-toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.module-toggle-text { display: flex; flex-direction: column; gap: 2px; }

.module-toggle-name {
  font-family: var(--font-poem-0);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.module-toggle-desc {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Destination radio */
.dest-group { display: flex; flex-direction: column; gap: 10px; }

.dest-option { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }

.dest-option input[type="radio"] {
  appearance: none;
  width: 14px; height: 14px;
  min-width: 14px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  margin-top: 3px;
  position: relative;
  transition: border-color var(--t-fast);
}

.dest-option input[type="radio"]:checked { border-color: var(--accent); }

.dest-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 50%;
}

.dest-option-text { display: flex; flex-direction: column; gap: 2px; }

.dest-option-name {
  font-family: var(--font-poem-0);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
}

.dest-option-desc {
  font-family: var(--font-ui);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Duration slider */
.slider-field { display: flex; flex-direction: column; gap: 8px; }

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.slider-value {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--accent);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--accent-line);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(139, 111, 94, 0.15);
}

/* Distribution toggle pair */
.toggle-pair { display: flex; gap: 6px; }

.toggle-pair-option { position: relative; }

.toggle-pair-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-pair-option label {
  display: block;
  padding: 5px 13px;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}

.toggle-pair-option input[type="radio"]:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.toggle-pair-option label:hover { border-color: var(--accent-border); color: var(--text); }

/* Release button */
#release-area {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
}

#release-btn {
  padding: 12px 36px;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

#release-btn:hover:not(:disabled) {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 111, 94, 0.25);
}

#release-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
#release-btn:disabled { opacity: 0.38; cursor: not-allowed; }

#release-note {
  font-family: var(--font-poem-0);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ==========================================================
   ENTROPY PHASE
   ========================================================== */
#entropy-phase {
  display: none;
  flex-direction: column;
  flex: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#entropy-phase.ep-visible    { display: flex; }
#entropy-phase.ep-faded-in   { opacity: 1; }

/* Poem canvas */
#poem-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 60px 32px;
}

#poem-inner {
  max-width: 720px;
  width: 100%;
}

/* Poem title in entropy phase */
#poem-title-display {
  max-width: 720px;
  width: 100%;
  font-family: var(--font-poem-0);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.4em;
  opacity: 0.7;
}

/* Title word spans inherit the container's size, not --poem-size */
#poem-title-display .word {
  font-size: inherit;
}

/* Stanza */
.stanza {
  margin-bottom: 2.4em;
  padding: 14px 18px;
  border-left: 2px solid transparent;
  border-radius: 1px;
  position: relative;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}

.stanza:last-child { margin-bottom: 0; }

.stanza         { cursor: default; }
.ctrl-armed .stanza { cursor: crosshair; }

.ctrl-armed .stanza:hover { background: var(--accent-light); }



/* Catastrophe flash */
@keyframes cat-flash {
  0%   { background: rgba(190, 55, 20, 0); }
  15%  { background: rgba(190, 55, 20, 0.12); }
  100% { background: rgba(190, 55, 20, 0); }
}

.stanza.cat-event { animation: cat-flash 2s ease-out forwards; }

/* Structural split flash — subtler than catastrophe; signals a new line/stanza */
@keyframes split-flash {
  0%   { background: rgba(110, 90, 60, 0); }
  12%  { background: rgba(110, 90, 60, 0.10); }
  100% { background: rgba(110, 90, 60, 0); }
}

.poem-line.split-flash,
.stanza.split-flash { animation: split-flash 2s ease-out forwards; }

/* Poem line.
   hanging-indent via padding-left + negative text-indent:
   - First run of text aligns at the left edge normally
   - Any overflow continuation wraps to the indent level (2.5em in)
   This matches the typographic convention for long run-on poetry lines. */
.poem-line {
  line-height: 1.95;
  white-space: pre-wrap;
  padding-left: 2.5em;
  text-indent: -2.5em;
}

/* Drop cap: decorative first letter added by entropy engine at low entropy.
   Uses ::first-letter on the line block element so it inherits the word’s
   current font-family (including entropy-driven font-stage changes) naturally.
   The float creates the classic block drop cap without breaking the word flow. */
.poem-line.has-drop-cap::first-letter {
  float: left;
  font-size: 4.2em;
  line-height: 0.72;
  margin-right: 0.06em;
  margin-top:  0.04em;
  padding-bottom: 0.04em;
  font-weight: 400;
  color: var(--text);
  transition:
    font-family 0.9s ease,
    color        1.4s ease;
}

/* Word — the core visual unit */
.word {
  display: inline;
  font-family: var(--font-poem-0);
  font-size: var(--poem-size);
  font-weight: 300;
  color: var(--text);
  transition:
    font-family     0.9s ease,
    font-size       0.6s ease,
    letter-spacing  0.7s ease,
    color           1.4s ease,
    opacity         1.8s ease;
}

/* Typographic degradation stages (7 total, 0–6) */
.word[data-f="0"] { font-family: 'Cormorant Garamond', Georgia, serif;        font-weight: 300; }
.word[data-f="1"] { font-family: 'IM Fell English', Georgia, serif;             }
.word[data-f="2"] { font-family: 'Lato', 'Helvetica Neue', sans-serif;          font-size: calc(var(--poem-size) * 0.88); font-weight: 300; }
.word[data-f="3"] { font-family: 'Special Elite', cursive;                      font-size: calc(var(--poem-size) * 0.90); }
.word[data-f="4"] { font-family: 'Space Mono', monospace;                       font-size: calc(var(--poem-size) * 0.82); }
.word[data-f="5"] { font-family: 'UnifrakturMaguntia', fantasy;                 font-size: calc(var(--poem-size) * 0.97); }
.word[data-f="6"] { font-family: 'VT323', monospace;                            font-size: calc(var(--poem-size) * 1.10); }

/* Entropy visual tiers */
.word[data-e="0"] { opacity: 1.00; color: var(--text); }
.word[data-e="1"] { opacity: 0.95; color: #383030; }
.word[data-e="2"] { opacity: 0.85; color: #534040; }
.word[data-e="3"] { opacity: 0.72; color: #705040; }
.word[data-e="4"] { opacity: 0.57; color: #8a5838; }

/* Tier 5: destination-specific terminal word appearance (ash and silence) */
body.dest-ash     .word[data-e="5"] { opacity: 0.30; color: #c0b0a0; letter-spacing: 0.18em; }
body.dest-silence .word[data-e="5"] { opacity: 0; }

/* ==========================================================
   NOISE DESTINATION — VARIANT STYLES
   A random variant is chosen at publish time and applied as
   a body class (e.g. body.noise-crt-amber). Each variant
   represents a different type of encoding breakdown.
   ========================================================== */

/* ---- Variant 1: CRT Green (classic) ---- */
body.dest-noise.noise-crt-green .word[data-e="5"] {
  color: #00dd55;
  font-family: 'VT323', monospace;
  font-size: calc(var(--poem-size) * 1.1);
  text-shadow: 0 0 10px rgba(0, 200, 60, 0.65);
  opacity: 1;
}
body.dest-noise.noise-crt-green.phase-terminal               { background: #080e09; color: #00dd55; }
body.dest-noise.noise-crt-green.phase-terminal #header        { background: #0a1a0c; border-color: rgba(0,200,60,0.18); }
body.dest-noise.noise-crt-green.phase-terminal #entropy-controls { background: #0a1a0c; border-color: rgba(0,200,60,0.18); }
body.dest-noise.noise-crt-green.phase-terminal #progress-fill { background: #00cc44; }

/* ---- Variant 2: CRT Amber ---- */
body.dest-noise.noise-crt-amber .word[data-e="5"] {
  color: #e89800;
  font-family: 'VT323', monospace;
  font-size: calc(var(--poem-size) * 1.1);
  text-shadow: 0 0 12px rgba(220, 140, 0, 0.70), 0 0 24px rgba(200, 110, 0, 0.30);
  opacity: 1;
}
body.dest-noise.noise-crt-amber.phase-terminal               { background: #0d0800; color: #e89600; }
body.dest-noise.noise-crt-amber.phase-terminal #header        { background: #180f00; border-color: rgba(200,130,0,0.20); }
body.dest-noise.noise-crt-amber.phase-terminal #entropy-controls { background: #180f00; border-color: rgba(200,130,0,0.20); }
body.dest-noise.noise-crt-amber.phase-terminal #progress-fill { background: #c88000; }

/* ---- Variant 3: Blue-White Phosphor ---- */
body.dest-noise.noise-phosphor-blue .word[data-e="5"] {
  color: #c0d4ff;
  font-family: 'Space Mono', monospace;
  font-size: calc(var(--poem-size) * 1.0);
  text-shadow: 0 0 8px rgba(130, 170, 255, 0.55), 0 0 20px rgba(80, 120, 255, 0.25);
  opacity: 1;
}
body.dest-noise.noise-phosphor-blue.phase-terminal               { background: #040412; color: #c0d4ff; }
body.dest-noise.noise-phosphor-blue.phase-terminal #header        { background: #060620; border-color: rgba(100,140,255,0.18); }
body.dest-noise.noise-phosphor-blue.phase-terminal #entropy-controls { background: #060620; border-color: rgba(100,140,255,0.18); }
body.dest-noise.noise-phosphor-blue.phase-terminal #progress-fill { background: #5070d0; }

/* ---- Variant 4: Teletype ---- */
/* Electromechanical teleprinter: warm brass tone, no phosphor glow */
body.dest-noise.noise-teletype .word[data-e="5"] {
  color: #c8a848;
  font-family: 'Space Mono', monospace;
  font-size: calc(var(--poem-size) * 0.95);
  letter-spacing: 0.04em;
  text-shadow: none;
  opacity: 1;
}
body.dest-noise.noise-teletype.phase-terminal               { background: #100e08; color: #c0a040; }
body.dest-noise.noise-teletype.phase-terminal #header        { background: #181408; border-color: rgba(180,150,50,0.22); }
body.dest-noise.noise-teletype.phase-terminal #entropy-controls { background: #181408; border-color: rgba(180,150,50,0.22); }
body.dest-noise.noise-teletype.phase-terminal #progress-fill { background: #a08830; }

/* ---- Variant 5: Carbon Copy ---- */
/* Carbon paper / spirit duplicator: cool purple-blue, double-impression shadow */
body.dest-noise.noise-carbon .word[data-e="5"] {
  color: #8898d8;
  font-family: 'Space Mono', monospace;
  font-size: calc(var(--poem-size) * 0.95);
  text-shadow: 0.8px 0.8px 2px rgba(80,100,200,0.55), -0.4px -0.4px 1px rgba(80,100,200,0.25);
  opacity: 1;
}
body.dest-noise.noise-carbon.phase-terminal               { background: #080810; color: #8898d8; }
body.dest-noise.noise-carbon.phase-terminal #header        { background: #0c0c1c; border-color: rgba(80,100,200,0.20); }
body.dest-noise.noise-carbon.phase-terminal #entropy-controls { background: #0c0c1c; border-color: rgba(80,100,200,0.20); }
body.dest-noise.noise-carbon.phase-terminal #progress-fill { background: #5060b0; }

body.dest-ash.phase-terminal .word {
  color: #c8bfb4;
  transition: color 3s ease, opacity 3s ease;
}

/* ==========================================================
   ENTROPY CONTROLS PANEL
   ========================================================== */
#entropy-controls {
  padding: 13px 28px;
  border-top: 1px solid var(--accent-line);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 54px;
  transition: background var(--t-slow), border-color var(--t-slow);
}

#region-display {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 130px;
}

.ctrl-divider {
  width: 1px;
  height: 22px;
  background: var(--accent-line);
  flex-shrink: 0;
}

.ctrl-group { display: flex; gap: 7px; align-items: center; }

.ctrl-btn {
  position: relative;
  overflow: hidden;
  padding: 5px 14px;
  border: 1px solid var(--accent-line);
  background: transparent;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}

.ctrl-btn:hover:not(:disabled) { border-color: var(--accent-border); color: var(--text); }
.ctrl-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* Per-action hover tints */
.ctrl-btn.btn-protect:hover:not(:disabled) { background: rgba(72,130,96,0.08); border-color: var(--protect-border); color: #447a5a; }
.ctrl-btn.btn-accel:hover:not(:disabled)   { background: rgba(180,65,35,0.07); border-color: var(--accel-border);   color: #b04020; }

/* Armed state: button glows when waiting for a stanza click */
.ctrl-btn.btn-armed {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: var(--accent);
}


/* Cooldown progress bar (inside button, bottom edge) */
.cd-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s linear;
  pointer-events: none;
}

.btn-protect .cd-bar { background: var(--protect-border); }
.btn-accel .cd-bar   { background: var(--accel-border); }

/* Status area */
#entropy-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-item {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.status-item .sv { color: var(--accent); }

/* Progress bar */
#progress-bar {
  height: 3px;
  background: var(--accent-line);
  position: relative;
  overflow: hidden;
}

#progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 1.5s linear, background 3s ease;
}

#progress-fill.pf-mid      { background: #c07030; }
#progress-fill.pf-high     { background: #b03818; }
#progress-fill.pf-terminal { background: #888; }