/* The Signal Substrate - the terminal under the door.
   Styled to the Archive universe by blending three looks: the recovered field
   manual (serif + gold + aged paper), the sealed dossier (a stamp, redaction,
   ink-and-bone), and the substrate printout (warm phosphor). The machine speaks
   in phosphor; the record's own voice surfaces through it in serif bone and gold.
   Same-origin, CSP-clean, no inline anything. Every functional class is kept. */

#substrate {
  --ink: #0d0a07;
  --phos: #8fd0a0;     /* the machine's own text */
  --bone: #e7ddc6;     /* the record's voice */
  --gold: #c8a24e;     /* accents, the sigil, the seal */
  --dim: #6d7860;
  --red: #b5462f;      /* the dossier: the stamp, the trace */
  --line: #2a241a;
  --glow: 0 0 6px rgba(143, 208, 160, 0.26);

  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(125% 90% at 50% 0%, #17110b 0%, #0d0a07 58%, #070502 100%);
  color: var(--phos);
  font: 15px/1.55 "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;
  flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 5vw 16px;
  overflow: hidden;
}
#substrate.awake { display: flex; }

/* aged phosphor: fine scanlines over a paper vignette */
#substrate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.20) 2px 3px),
    radial-gradient(120% 100% at 50% 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  opacity: 0.6;
  mix-blend-mode: multiply;
}
/* dossier frame: a faint gold rule inset from the edge */
#substrate::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 1px solid rgba(200, 162, 78, 0.15);
}

/* the bar becomes a dossier header */
.sub-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.sub-bar b { color: var(--gold); font-weight: 600; }
.sub-bar b::before { content: "\2726\00a0\00a0"; }          /* the sigil */
/* the seal, struck a little crooked, low and red like an ink stamp */
.sub-bar::after {
  content: "SEALED \00b7 PRIVATE RECORD";
  position: absolute;
  right: 82px;
  top: -1px;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  transform: rotate(-3.5deg);
  opacity: 0.5;
  pointer-events: none;
}
.sub-close {
  background: none;
  border: 1px solid rgba(231, 221, 198, 0.32);
  color: var(--bone);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 11px;
  cursor: pointer;
  text-transform: uppercase;
}
.sub-close:hover { background: rgba(231, 221, 198, 0.08); }

.sub-log {
  flex: 1 1 auto;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: var(--glow);
  scrollbar-width: thin;
  scrollbar-color: #2a3a28 transparent;
}
.sub-log::-webkit-scrollbar { width: 8px; }
.sub-log::-webkit-scrollbar-thumb { background: #2a3a28; }

.sub-line { margin: 0; padding: 1px 0; }
.sub-line.echo { color: var(--gold); opacity: 0.92; }        /* the visitor's own line */

/* the record's voice: serif ink, in bone, surfacing through the phosphor */
.sub-line.op {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--bone);
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: 0.01em;
  text-shadow: none;
}
.sub-line.dim { color: var(--dim); }
.sub-line.warn {
  color: var(--red);
  text-shadow: 0 0 6px rgba(181, 70, 47, 0.4);
}
/* redaction, dossier style: the line struck to a solid bar of ink */
.sub-line.withdrawn {
  color: #241f17;
  background: #241f17;
  letter-spacing: 0.04em;
}

.sub-prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  margin-top: 9px;
  padding-top: 11px;
  text-shadow: var(--glow);
}
.sub-prompt .caret { color: var(--gold); }
.sub-input {
  flex: 1 1 auto;
  background: none;
  border: none;
  outline: none;
  color: var(--bone);
  font: inherit;
  text-shadow: var(--glow);
  caret-color: var(--gold);
}
.sub-input::placeholder { color: #3a4436; }

/* 05 Trace - the line warms to danger, the frame reddens */
#substrate.trace1 { color: #a7cf8f; }
#substrate.trace2 { color: #d0b56a; }
#substrate.trace2 .sub-prompt .caret { color: var(--red); }
#substrate.trace3 { color: var(--red); }
#substrate.trace3 .sub-input { color: var(--red); }
#substrate.trace3::after { border-color: rgba(181, 70, 47, 0.42); }

/* the operator: named in the record's own hand */
#substrate.op-live .sub-bar b::after {
  content: " \00b7 the operator is writing";
  color: var(--bone);
  text-transform: none;
  letter-spacing: 0.03em;
  font-family: Georgia, serif;
  font-weight: normal;
}

/* 01 the tap grid - warmed to bone keys with gold command shortcuts */
.sub-keys { display: none; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); }
#substrate.has-keys .sub-keys { display: block; }
#substrate.has-keys .sub-prompt[hidden] + .sub-keys { display: none; }
.sub-krow { display: flex; gap: 5px; margin-bottom: 5px; justify-content: center; }
.sub-krow.sub-kcmd { margin-bottom: 9px; }
.sub-key {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 0;
  background: #140f09;
  color: var(--bone);
  border: 1px solid #3a3320;
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  text-shadow: var(--glow);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sub-key:active { background: #241b0f; color: #fff8ec; }
.sub-key.cmd { font-size: 11px; letter-spacing: 0.08em; color: var(--gold); padding: 9px 2px; }
.sub-key.wide { flex: 2 2 0; }
#substrate.trace3 .sub-key { border-color: #4a2a1c; color: var(--red); }

.sub-cursor { animation: sub-blink 1s steps(1) infinite; }
@keyframes sub-blink { 50% { opacity: 0; } }

/* the door's sigil is the touch way in: trace it to wake (kept from before) */
.sigil-trace { display: inline-block; padding: 12px; touch-action: none; cursor: crosshair; }

@media (max-width: 620px) {
  #substrate { font-size: 14px; padding-left: 5vw; padding-right: 5vw; }
  .sub-key { padding: 11px 0; font-size: 14px; }
  .sub-bar::after { display: none; }   /* the stamp needs room; drop it on phones */
}
@media (prefers-reduced-motion: reduce) {
  .sub-cursor { animation: none; }
}