/* ============================================================
   MURKOFF OPTICAL RETRIEVAL TERMINAL // CRT-TERMINAL.CSS
   Central stylesheet for all terminal pages.
   Cold War / Murkoff CRT aesthetic with full accessibility.
   ============================================================ */

:root {
  --crt-bg: #030703;
  --phosphor-main: #33ff33;
  --phosphor-dim: #117711;
  --phosphor-alert: #ff3333;
  --phosphor-amber: #ffb000;
  --bezel-color: #161916;
  --bezel-dark: #0d0f0d;
  --steel: #1a1d1a;
  --steel-light: #2a2e2a;
  --text-glow: 0 0 6px rgba(51, 255, 51, 0.75);
  --text-glow-soft: 0 0 4px rgba(51, 255, 51, 0.4);
  --alert-glow: 0 0 6px rgba(255, 51, 51, 0.75);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #080a08;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(51, 255, 51, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
  color: var(--phosphor-main);
  font-family: 'Courier New', Courier, monospace;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  line-height: 1.4;
}

/* ============================================================
   PHYSICAL CRT ENCLOSURE / BEZEL
   ============================================================ */

.terminal-frame {
  background: radial-gradient(circle, var(--steel-light) 0%, #111311 100%);
  border: 4px solid var(--bezel-dark);
  border-radius: 28px;
  padding: 24px;
  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
  max-width: 960px;
  width: 100%;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Screen Frame & Glass Surface */
.crt-screen {
  background-color: var(--crt-bg);
  border: 18px solid #141714;
  border-radius: 18px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(51, 255, 51, 0.15);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: filter 0.01s linear;
}

.crt-screen.filter-off {
  background-color: #031003;
  box-shadow: none !important;
}

.crt-screen.filter-off::before,
.crt-screen.filter-off::after,
.crt-screen.filter-off .burn-in {
  display: none !important;
}

.crt-screen.filter-off * {
  text-shadow: none !important;
}

.crt-screen.filter-off .glow-text,
.crt-screen.filter-off .murkoff-text,
.crt-screen.filter-off .reagent-annotation,
.crt-screen.filter-off .classified-warning,
.crt-screen.filter-off .attachment-header,
.crt-screen.filter-off .attachment-caption,
.crt-screen.filter-off .microfiche-img {
  filter: none !important;
}

/* Scanlines Overlay */
.crt-screen::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.45) 50%
  );
  background-size: 100% 4px;
  z-index: 100;
  pointer-events: none;
}

/* Glass Reflection Vignette */
.crt-screen::after {
  content: " ";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 101;
}

/* Phosphor Burn-In Ghost (static Murkoff logo watermark) */
.crt-screen .burn-in {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(51, 255, 51, 0.02) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(51, 255, 51, 0.008) 2px, rgba(51, 255, 51, 0.008) 3px);
  pointer-events: none;
  z-index: 99;
  opacity: 0.5;
}

/* ============================================================
   TEXT GLOW & JITTER
   ============================================================ */

.glow-text {
  text-shadow: var(--text-glow);
}

/* Subtle 60Hz vertical jitter */
@keyframes crt-jitter {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(0.5px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(-0.5px); }
  100% { transform: translateY(0); }
}

.crt-screen.jitter {
  animation: crt-jitter 0.12s infinite;
}

/* Subliminal dim flash for accessibility */
.subliminal-flash {
  filter: brightness(0.18) contrast(0.9) saturate(0.6) !important;
}

/* ============================================================
   HEADER / FOOTER BARS
   ============================================================ */

.header-bar {
  border-bottom: 2px dashed var(--phosphor-dim);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: bold;
  flex-wrap: wrap;
  gap: 4px;
}

.header-bar .status {
  color: var(--phosphor-dim);
}

.footer-bar {
  border-top: 2px dashed var(--phosphor-dim);
  padding-top: 8px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--phosphor-dim);
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   VIEWPORT / SCROLL AREA
   ============================================================ */

.viewport {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 12px;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-dim) transparent;
}

.viewport::-webkit-scrollbar {
  width: 6px;
}
.viewport::-webkit-scrollbar-track {
  background: transparent;
}
.viewport::-webkit-scrollbar-thumb {
  background: var(--phosphor-dim);
  border-radius: 3px;
}

/* ============================================================
   LOG ENTRIES & DUAL-LAYER TEXT
   ============================================================ */

.directory-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.intro-copy {
  min-width: 0;
}

.intro-art {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6px 4px 0;
}

.murkoff-logo {
  width: min(100%, 180px);
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.92;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid rgba(51, 255, 51, 0.12);
  box-shadow: inset 0 0 14px rgba(51, 255, 51, 0.08);
}

.murkoff-logo.microfiche-img {
  filter: none;
  mix-blend-mode: normal;
  border: none;
  background: transparent;
  cursor: default;
}

.murkoff-logo.microfiche-img:hover {
  border-color: transparent;
}

.log-entry {
  margin-bottom: 14px;
  padding: 8px;
  border-left: 2px solid transparent;
  transition: border-color 0.2s;
}

.log-entry:hover {
  border-left-color: var(--phosphor-dim);
}

/* Murkoff Official Layer (clinical green) */
.murkoff-text {
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
}

/* Rogue Reagent Override Layer (red annotations) */
.reagent-annotation {
  color: var(--phosphor-alert);
  text-shadow: var(--alert-glow);
  font-style: italic;
  display: block;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--phosphor-alert);
  background: rgba(255, 51, 51, 0.04);
}

/* Strikethrough redacted text */
.redacted {
  color: var(--phosphor-alert);
  text-decoration: line-through;
  text-decoration-color: var(--phosphor-alert);
}

/* Classified warning block */
.classified-warning {
  border: 1px solid var(--phosphor-alert);
  color: var(--phosphor-alert);
  text-shadow: var(--alert-glow);
  padding: 8px;
  margin: 10px 0;
  background: rgba(255, 51, 51, 0.05);
  font-weight: bold;
  animation: warning-pulse 2s infinite;
}

@keyframes warning-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================================
   NAVIGATION / DIRECTORY LINKS
   ============================================================ */

.directory-list {
  list-style: none;
  margin: 10px 0;
}

.directory-list li {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid var(--phosphor-dim);
  background: rgba(51, 255, 51, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.directory-list li:hover {
  border-color: var(--phosphor-main);
  background: rgba(51, 255, 51, 0.05);
}

.directory-list a {
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
  text-decoration: none;
  font-weight: bold;
}

.directory-list a:hover {
  text-decoration: underline;
  text-shadow: var(--text-glow);
}

/* Encrypted / locked items */
.encrypted-item {
  color: var(--phosphor-dim);
  cursor: not-allowed;
  user-select: none;
}

.encrypted-item .progress-bar {
  display: inline-block;
  width: 80px;
  height: 8px;
  border: 1px solid var(--phosphor-dim);
  background: transparent;
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
}

.encrypted-item .progress-bar .fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--phosphor-dim);
}

.encrypted-item .status-text {
  font-size: 0.75rem;
  color: var(--phosphor-dim);
  margin-left: 6px;
}

/* ============================================================
   MICROFICHE / DITHERED IMAGE STYLING
   ============================================================ */

.attachment-box {
  border: 1px solid var(--phosphor-main);
  background-color: rgba(51, 255, 51, 0.03);
  padding: 10px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.attachment-header {
  width: 100%;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 4px;
  margin-bottom: 8px;
  color: var(--phosphor-dim);
}

.microfiche-img {
  image-rendering: pixelated;
  border: 1px solid var(--phosphor-dim);
  max-width: 100%;
  background: #000;
  cursor: zoom-in;
  transition: border-color 0.2s;
}

.microfiche-img:hover {
  border-color: var(--phosphor-main);
}

.attachment-caption {
  width: 100%;
  font-size: 0.7rem;
  color: var(--phosphor-dim);
  margin-top: 6px;
  text-align: center;
}

.attachment-caption .inspect-hint {
  color: var(--phosphor-main);
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* ============================================================
   LIGHTBOX MODAL (CLEAN UNFILTERED VIEW)
   ============================================================ */

.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.92);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-modal img {
  max-width: 90vw;
  max-height: 80vh;
  border: 2px solid var(--phosphor-main);
  /* NO CRT EFFECTS OR DITHERING IN LIGHTBOX */
  filter: none !important;
  image-rendering: auto;
  box-shadow: 0 0 30px rgba(51, 255, 51, 0.2);
}

.lightbox-modal .lightbox-caption {
  color: var(--phosphor-main);
  font-size: 0.8rem;
  margin-top: 12px;
  text-align: center;
  text-shadow: var(--text-glow-soft);
}

.lightbox-modal .close-btn {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--phosphor-main);
  color: var(--phosphor-main);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 8px 20px;
  cursor: pointer;
  text-shadow: var(--text-glow-soft);
  transition: all 0.1s;
}

.lightbox-modal .close-btn:hover {
  background: var(--phosphor-main);
  color: #000;
  text-shadow: none;
}

/* ============================================================
   COMMAND PROMPT AREA
   ============================================================ */

.prompt-line {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--phosphor-dim);
  padding-top: 8px;
  font-size: 0.9rem;
}

.prompt-symbol {
  margin-right: 8px;
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
}

.input-sim {
  flex-grow: 1;
  color: var(--phosphor-main);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  text-shadow: var(--text-glow-soft);
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: var(--phosphor-main);
  animation: cursor-blink 0.8s infinite;
  vertical-align: middle;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   PHYSICAL BEZEL BUTTONS / HARDWARE PANEL
   ============================================================ */

.hardware-panel {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111311;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #222622;
  flex-wrap: wrap;
  gap: 10px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.bezel-btn {
  background: linear-gradient(180deg, #3a3f3a 0%, #1c201c 100%);
  color: #a0b0a0;
  border: 2px solid #090a09;
  border-radius: 4px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow:
    0 3px 0 #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.05s ease;
}

.bezel-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 #000,
    inset 0 1px 0 rgba(0, 0, 0, 0.5);
  color: var(--phosphor-main);
}

.bezel-btn:focus-visible {
  outline: 2px solid var(--phosphor-main);
  outline-offset: 2px;
}

.status-light {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #667766;
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #115511;
  box-shadow: inset 0 1px 2px #000;
}

.led.active {
  background-color: var(--phosphor-main);
  box-shadow: 0 0 8px var(--phosphor-main);
}

/* ============================================================
   TERMINAL ERROR POPUP (ACCESS DENIED)
   ============================================================ */

.terminal-popup {
  display: none;
  position: fixed;
  z-index: 900;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0a0f0a;
  border: 2px solid var(--phosphor-alert);
  color: var(--phosphor-alert);
  text-shadow: var(--alert-glow);
  padding: 20px 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
  box-shadow: 0 0 40px rgba(255, 51, 51, 0.3);
  z-index: 1100;
}

.terminal-popup.active {
  display: block;
  animation: popup-in 0.15s ease-out;
}

@keyframes popup-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.terminal-popup .popup-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--phosphor-alert);
  padding-bottom: 6px;
}

.terminal-popup .popup-close {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--phosphor-alert);
  color: var(--phosphor-alert);
  font-family: inherit;
  font-size: 0.8rem;
  padding: 6px 16px;
  cursor: pointer;
}

.terminal-popup .popup-close:hover {
  background: var(--phosphor-alert);
  color: #000;
}

/* ============================================================
   CONTENT PAGE SPECIFIC STYLES
   ============================================================ */

/* Section headers */
.section-header {
  border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 4px;
  margin: 16px 0 10px 0;
  font-weight: bold;
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
  font-size: 1rem;
}

/* Data tables (dossiers) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.85rem;
}

.data-table th {
  border: 1px solid var(--phosphor-dim);
  padding: 6px 8px;
  text-align: left;
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
  background: rgba(51, 255, 51, 0.05);
}

.data-table td {
  border: 1px solid var(--phosphor-dim);
  padding: 6px 8px;
  color: var(--phosphor-main);
}

.data-table tr:hover td {
  background: rgba(51, 255, 51, 0.03);
}

/* Theory / analysis blocks */
.theory-block {
  border: 1px solid var(--phosphor-dim);
  padding: 12px;
  margin: 12px 0;
  background: rgba(51, 255, 51, 0.02);
}

.theory-block .theory-title {
  font-weight: bold;
  color: var(--phosphor-main);
  text-shadow: var(--text-glow-soft);
  margin-bottom: 6px;
}

/* Coordinates / data readouts */
.coords {
  color: var(--phosphor-amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.5);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .crt-screen.jitter {
    animation: none;
  }
  .cursor {
    animation: none;
  }
  .attachment-caption .inspect-hint {
    animation: none;
  }
  .classified-warning {
    animation: none;
  }
}

/* Focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--phosphor-main);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
  body {
    padding: 10px;
  }
  .terminal-frame {
    padding: 12px;
    border-radius: 20px;
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }
  .crt-screen {
    border-width: 10px;
    padding: 12px;
  }
  .directory-intro {
    grid-template-columns: 1fr;
  }
  .intro-art {
    justify-content: flex-start;
    padding: 0 0 6px;
  }
  .murkoff-logo {
    width: min(100%, 140px);
  }
  .header-bar {
    font-size: 0.7rem;
  }
  .hardware-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .button-group {
    justify-content: center;
  }
  .status-light {
    justify-content: center;
  }
}