/* ===== Department of Anomalous Systems — Terminal Theme ===== */
:root{
  --bg:#000;
  --fg:#00ff99;       /* terminal green */
  --fg-dim:#00cc88;
  --muted:#009966;
  --line:#00ff99;

  /* status colors */
  --status-net:#39ff14;   /* bright phosphor green */
  --status-enc:#00e5ff;   /* cyan */
}

/* Reserve scrollbar space to prevent flicker across OS/browsers */
html{
  overflow-y:scroll;                /* always show scrollbar track */
  scrollbar-gutter:stable both-edges; /* reserve width when possible */
}

*{box-sizing:border-box}

/* scrolling & base */
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100%; height:auto; overflow-y:auto;
}

/* Layout helpers */
.container{
  max-width:900px; margin:40px auto; padding:0 16px; line-height:1.6;
  position:relative; z-index:2;
  min-height:calc(100vh - 160px);   /* keeps page tall to avoid jumps */
}
.narrow{max-width:800px}
.hr{border-bottom:1px solid var(--line); margin:12px 0 18px}
a{color:var(--fg-dim); text-decoration:none}
a:hover{text-shadow:0 0 6px var(--fg)}
.back{display:inline-block; margin:8px 0 16px}
.dept-title {
  text-align:center;
  font-weight:700;
  letter-spacing:.08em;
  font-size:1.1rem;
  margin-top:.5rem;
}

.portal-title {
  text-align:center;
  color:var(--muted);
  margin-bottom:.5rem;
}
.hr::after {
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, rgba(0,255,153,0.2) 0%, rgba(0,255,153,0.8) 50%, rgba(0,255,153,0.2) 100%);
  animation:scanline 3s infinite linear;
}
@keyframes scanline {
  0%{opacity:.8}
  50%{opacity:.4}
  100%{opacity:.8}
}
.dim a {
  text-shadow:0 0 6px var(--fg);
}


/* Case index */
.case-index{ margin-top:22px }
.case-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.case-card{
  border:1px solid var(--line); padding:10px; background:#000; position:relative;
}
.case-card h3{ margin:.2em 0 .4em 0; font-size:1.05rem; color:var(--fg) }
.case-meta{ font-size:.9em; color:var(--muted) }
.tag{ display:inline-block; border:1px solid var(--line); padding:1px 6px; margin-right:6px; font-size:.85em }
.redacted-tag{ background:var(--fg); color:#000 }
.tag.terminated { color:#ff4444; border-color:#ff4444; box-shadow:0 0 6px #ff4444; }
.tag.reconstructed, .tag.restricted { color:#ffb300; border-color:#ffb300; box-shadow:0 0 6px #ffb300; }


/* Header / footer */
.header,.footer{border-color:var(--line); color:var(--muted)}
.header{
  border-bottom:1px solid var(--line); padding-bottom:.5em; margin-bottom:1em; font-weight:700;
  box-shadow:0 0 20px rgba(0,255,153,.05); transition:box-shadow .8s ease-in-out
}
.header:hover{ box-shadow:0 0 30px rgba(0,255,153,.15) }
.footer{ border-top:1px solid var(--line); margin-top:24px; padding-top:12px; font-size:.9em }
.logo {
  height: 320px;
  width: auto;
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 8px rgba(0,255,153,0.6));
}

.logo {
  opacity:0;
  animation:boot 2.5s ease-in-out forwards;
}
@keyframes boot {
  0%{opacity:0; filter:blur(4px);}
  60%{opacity:.7;}
  100%{opacity:1; filter:none;}
}



/* Cursor + typewriter */
.cursor::after{ content:"_"; animation:blink 1s steps(1,end) infinite }
@keyframes blink{ 50%{opacity:0} }
.typewriter{ white-space:pre-wrap }
#term{ min-height:260px } /* keeps terminal area steady */

/* Redaction bars */
.redacted{ background:var(--fg); color:var(--fg); padding:0 .35em }
.redacted[data-reveal="hover"]:hover{ color:var(--bg); text-shadow:none }

/* Badges */
.badge{ display:inline-block; border:1px solid var(--line); padding:2px 6px; margin-right:8px }

/* CRT effects */
.crt{ position:relative; isolation:isolate; filter:contrast(1.03) saturate(1.05) }
.crt::before{ /* scanlines */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:999;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,153,0.05) 0px,
    rgba(0,255,153,0.05) 2px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:overlay;
}
.crt::after{ /* subtle glow/flicker */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:998;
  background:radial-gradient(ellipse at center, rgba(0,255,153,0.08) 0%, rgba(0,0,0,0) 60%);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,100%{opacity:.35}
  48%{opacity:.25}
  50%{opacity:.42}
  52%{opacity:.28}
}

/* Optional global signal-noise overlay */
.signal-noise{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,153,.06) 0 2px, rgba(0,0,0,0) 3px 4px),
    repeating-linear-gradient(90deg, rgba(0,255,153,.02) 0 1px, rgba(0,0,0,0) 2px 3px);
  animation:noiseShift 9s infinite linear;
}
@keyframes noiseShift{
  0%{transform:translate3d(0,0,0); opacity:.03}
  47%{transform:translate3d(0,-10px,0); opacity:.045}
  50%{transform:translate3d(0,3px,0); opacity:.06}
  100%{transform:translate3d(0,0,0); opacity:.035}
}

/* Micro “glitch” wobble */
.glitch{ display:inline-block; animation:glitch 3.5s infinite }
@keyframes glitch{
  0%{transform:translate(0,0)}
  48%{transform:translateX(.2px)}
  50%{transform:translateX(-.4px)}
  52%{transform:translateX(.15px)}
  100%{transform:translate(0,0)}
}

/* Status badges (bright) */
.header small{ color:var(--muted) }
.status{
  display:inline-flex; align-items:center; gap:.35em;
  font-weight:600; letter-spacing:.02em;
}
.status .dot{
  width:.6em; height:.6em; border-radius:50%;
  animation:blink-soft 1.05s infinite steps(1,end);
}
.status .label{ text-shadow:0 0 6px currentColor }

/* Only the dot blinks; text stays solid */
@keyframes blink-soft{ 50%{opacity:.35; box-shadow:0 0 3px currentColor} }

/* Variants */
.status.online .dot{ background:var(--status-net); box-shadow:0 0 10px var(--status-net) }
.status.online .label{ color:var(--status-net) }
.status.enc .dot{ background:var(--status-enc); box-shadow:0 0 10px var(--status-enc) }
.status.enc .label{ color:var(--status-enc) }
/* Tag variants (for index cards) to match badge colors */
.tag.declassified { color:#39ff14; border-color:#39ff14; box-shadow:0 0 6px #39ff14; }
.tag.reconstructed { color:#00e5ff; border-color:#00e5ff; box-shadow:0 0 6px #00e5ff; }
.tag.restricted { color:#ffb300; border-color:#ffb300; box-shadow:0 0 6px #ffb300; }
.tag.terminated { color:#ff4444; border-color:#ff4444; box-shadow:0 0 6px #ff4444; }
.tag.review { color:#b388ff; border-color:#b388ff; box-shadow:0 0 6px #b388ff; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .cursor::after, .glitch, .crt::after, .signal-noise, .status .dot{
    animation:none !important;
  }
}
/* --- Selection highlight: readable and on-brand --- */
::selection{ background:#033826; color:#b6ffe5 }
::-moz-selection{ background:#033826; color:#b6ffe5 }

/* --- Optional: hide visible scrollbars but keep scrolling --- */
/* add class="no-scrollbar" on <body> to enable; remove if you want bars back */
.no-scrollbar{
  -ms-overflow-style:none;              /* IE/Edge old */
  scrollbar-width:none;                 /* Firefox */
}
.no-scrollbar::-webkit-scrollbar{ width:0; height:0 } /* Chrome/Safari */

/* --- Case header banner variant (no network/encryption) --- */
.case-banner{ border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:1rem; color:var(--muted) }
.case-banner .title{ font-size:1.75rem; color:var(--fg); font-weight:800; letter-spacing:.02em }
.case-banner .rule{ border-bottom:1px solid var(--line); margin:.6rem 0 1rem }

/* --- Ensure the Case Index always has room; prevents layout jumps --- */
#list{ scroll-margin-top:90px }  /* nice anchor position below header */
/* Default: hide the Case Index grid */
.case-index { display:none; }

/* Mobile / tablet: show it */
@media (max-width: 820px) {
  .case-index { display:block; }
}

/* MOBILE: hide the terminal & shortcuts; show a toggle button */
.mobile-console-toggle { display: none; }

@media (max-width: 820px) {
  .terminal-wrap { display: none; }            /* hides #term, prompt, shortcuts */
  .mobile-console-toggle {
    display: inline-block;
    margin: 12px 0 8px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    background: #000;
    color: var(--fg);
    cursor: pointer;
    font: inherit;
  }
  /* when user opens the console */
  .console-open .terminal-wrap { display: block; }
}
/* ----- Desktop-first console placement ----- */
.terminal-wrap { margin-bottom: 16px; }

/* Hide the Case Index on desktop (already in your file, kept here for clarity) */
.case-index { display: none; }

/* ----- Mobile rules ----- */
@media (max-width: 820px) {
  /* Always hide the terminal, prompt, and shortcuts on mobile */
  .terminal-wrap { display: none !important; }

  /* Show the Case Index grid only on mobile */
  .case-index { display: block !important; }

  /* Keep "Return to Archives" or other back links visible */
  .back { display: inline-block !important; }
}
@media (max-width: 820px) {
  /* hide the case-page console on mobile */
  #dasConsole { display: none !important; }
  /* keep the back link visible (already covered by .back above) */
}

/* ===== FINAL SCOPING (put at END of style.css) ===== */

/* HOME (index) */
.page-home .terminal-wrap { display:block !important; }   /* desktop default */
.page-home .case-index    { display:none  !important; }   /* desktop default */

@media (max-width: 820px){
  .page-home .terminal-wrap { display:none  !important; } /* mobile: hide console */
  .page-home .case-index    { display:block !important; } /* mobile: show grid   */
}

/* ===== Front index: hide terminal/prompt on mobile ===== */
@media (max-width: 820px){
  .page-home #term,
  .page-home .prompt {
    display: none !important;
  }
  /* optional: add a small mobile CTA above the grid */
  .page-home .mobile-cta { display:block !important; }
}
.page-home .mobile-cta { display:none; margin:.75rem 0; color:var(--muted); }


/* CASE PAGES */
.page-case .case-console { display:block !important; }    /* desktop default */
@media (max-width: 820px){
  .page-case .case-console { display:none !important; }   /* mobile: no console  */
}

/* Keep the back link visible everywhere */
.page-case .back { display:inline-block !important; }
/* ===== Case page visibility rules (win all conflicts) ===== */
.page-case .back { display: none !important; }             /* hide on desktop */
@media (max-width: 820px){
  .page-case .back { display: inline-block !important; }   /* show on mobile */
}

/* Console placement on case pages */
.page-case .case-console { display: block !important; }    /* desktop: at top */
@media (max-width: 820px){
  .page-case .case-console { display: none !important; }   /* mobile: no console */
}

/* --- Badges: visual variants --- */
.badge { display:inline-block; border:1px solid var(--line); padding:2px 6px; margin-right:8px }
.badge.restricted    { color:#ffb300; border-color:#ffb300; box-shadow:0 0 6px #ffb300; }
.badge.declassified  { color:#39ff14; border-color:#39ff14; box-shadow:0 0 6px #39ff14; }
.badge.terminated    { color:#ff4444; border-color:#ff4444; box-shadow:0 0 6px #ff4444; }
.badge.reconstructed { color:#00e5ff; border-color:#00e5ff; box-shadow:0 0 6px #00e5ff; }

/* --- Case banner + meta --- */
.case-banner { border-bottom:1px solid var(--line); padding-bottom:.75rem; margin-bottom:1.25rem; color:var(--muted) }
.case-banner .title { font-size:1.75rem; color:var(--fg); font-weight:800; letter-spacing:.02em; margin:0 }
.case-banner .rule { border-bottom:1px solid var(--line); margin:.6rem 0 1rem }
.case-banner .meta { line-height:1.55 }
.case-banner .division { color:var(--fg-dim) }

/* --- Sections --- */
.case-body h2 { margin-top:1.25rem; letter-spacing:.02em; text-transform:uppercase }
.case-body h3 { margin-top:.85rem; letter-spacing:.01em }

/* --- Back link: show on mobile; optional on desktop (choose one) --- */
/* Option A: show always */
.page-case .back { display:inline-block !important; }
/* Option B (if you prefer hidden on desktop, uncomment below) */
/*
.page-case .back { display:none !important; }
@media (max-width: 820px) {
  .page-case .back { display:inline-block !important; }
}
*/

/* --- Console block (moved from inline to CSS) --- */
.console-wrap{margin-top:0;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.console-toggle{
  display:inline-block;margin:0 0 8px;padding:4px 8px;border:1px solid var(--line);
  cursor:pointer;user-select:none
}
.console-panel{display:none}
.console-open .console-panel{display:block}
.console-output{min-height:90px;max-height:220px;overflow:auto;padding:6px;background:#00140e}
.console-row{display:flex;gap:.5em;align-items:center;margin-top:6px}
.console-row .caret{color:var(--fg)}
.console-input{
  flex:1; background:#000; color:var(--fg); border:1px solid var(--line);
  font:inherit; padding:6px 8px; outline:none
}

/* --- Case pages: show console on desktop, hide on mobile --- */
.page-case .case-console { display:block !important; }
@media (max-width: 820px){
  .page-case .case-console { display:none !important; }
}

