/* =============================================================================
   KYPO6 — ARCHIVE / LEGACY ROUTE STYLES
   -----------------------------------------------------------------------------
   Section 1 mirrors the inline <style> block of index.html verbatim so archive
   pages sit on exactly the same paper. If you change the homepage styles, mirror
   the change here (or move both to this file).
   Section 2 is archive-specific: the "recovered terminal" panel, scanlines,
   provenance chips, and path display. Everything respects prefers-reduced-motion.
   ============================================================================ */

/* ---------- 1. BASE (mirror of index.html) -------------------------------- */
body {
    background-color: #ede8dc;
    background-image:
        radial-gradient(#d3cbbe 0.75px, transparent 0.75px),
        linear-gradient(to right, rgba(0,0,0,0.015) 1px, transparent 1px);
    background-size: 14px 14px, 4px 100%;
    color: #1a1816;
    text-rendering: optimizeLegibility;
}

.newspaper-sheet {
    background-color: #f7f4ed;
    box-shadow: 0 4px 20px -2px rgba(40, 30, 20, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
    position: relative;
}

.newspaper-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
}

.ink-bleed {
    text-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0.4), -0.1px -0.1px 0px rgba(0,0,0,0.2);
}

.halftone {
    filter: contrast(160%) brightness(95%) grayscale(100%);
    mix-blend-mode: multiply;
}

.halftone-box {
    position: relative;
    background-color: #2b2b2b;
    overflow: hidden;
}

.halftone-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #000 1.5px, transparent 1.6px);
    background-size: 4px 4px;
    opacity: 0.18;
    pointer-events: none;
}

.rule-double { border-top: 3px double #1a1816; }

.rule-thick-thin {
    border-top: 4px solid #1a1816;
    border-bottom: 1px solid #1a1816;
    height: 7px;
}

.rule-dotted { border-top: 1px dashed #7a7469; }

.ticker-wrap { overflow: hidden; white-space: nowrap; }

.ticker-move {
    display: inline-block;
    animation: ticker 38s linear infinite;
}
.ticker-move:hover { animation-play-state: paused; }

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.microfiche {
    filter: sepia(0.35) hue-rotate(185deg) contrast(1.2) brightness(0.9);
    background-color: #0b1e22 !important;
    color: #bbf0ea !important;
}

.column-divider { border-right: 1px solid #d4cdc1; }

.archive-stamp {
    transform: rotate(-7deg);
    display: inline-block;
    border: 2px dashed #a81c1c;
    color: #a81c1c;
    font-family: 'Courier Prime', monospace;
    padding: 2px 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    user-select: none;
}

/* ---------- 2. ARCHIVE EXTENSIONS ----------------------------------------- */

/* Recovered broadcast terminal: the black "MUNICIPAL DECREE" bar, grown up. */
.terminal {
    position: relative;
    background-color: #11100f;
    color: #e9e4d6;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(243, 202, 62, 0.15), 0 2px 0 #11100f;
}
.terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.035) 0px,
        rgba(255,255,255,0.035) 1px,
        transparent 1px,
        transparent 3px
    );
}
.terminal::after {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}
.terminal-flicker { animation: terminalFlicker 7s steps(1, end) infinite; }
@keyframes terminalFlicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.86; }
    94% { opacity: 1; }
    97% { opacity: 0.93; }
}

.terminal-line { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0 1rem; }
@media (max-width: 480px) { .terminal-line { grid-template-columns: 1fr; gap: 0; } }
.terminal-key { color: #a9a39a; }
.terminal-val { color: #f5f2eb; font-weight: 700; }
.terminal-val--alert { color: #f3ca3e; }
.terminal-val--red { color: #ff6b5e; }
.terminal-val--ok { color: #8fd9a8; }

.cursor-blink::after {
    content: "▍";
    margin-left: 2px;
    animation: cursorBlink 1.1s steps(1, end) infinite;
}
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Requested path display — must survive absurd slugs on mobile */
.path-display {
    font-family: 'Courier Prime', monospace;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.35;
}

/* Provenance chips */
.chip {
    display: inline-block;
    font-family: 'Courier Prime', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid currentColor;
    line-height: 1.2;
}
.chip--verified { color: #1f5f3a; background: rgba(31, 95, 58, 0.08); }
.chip--likely   { color: #8a5a00; background: rgba(243, 202, 62, 0.18); }
.chip--compat   { color: #4a4641; background: rgba(0,0,0,0.04); }
.chip--unrecovered { color: #a81c1c; background: rgba(168, 28, 28, 0.06); }
.chip--canonical { color: #11100f; background: rgba(243, 202, 62, 0.25); }

/* Stamp variants */
.archive-stamp--ink { border-color: #11100f; color: #11100f; }
.archive-stamp--ok { border-color: #1f5f3a; color: #1f5f3a; }

/* Recovered still: static noise */
.static-noise {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: auto, 160px 160px;
}

/* Clapboard for production files */
.clapboard-stripes {
    background: repeating-linear-gradient(135deg, #11100f 0 14px, #f7f4ed 14px 28px);
}

/* Skeleton shown before the module script renders */
.archive-skeleton { opacity: 0.75; }

/* Focus visibility for keyboard users (buttons/links inside dark terminal) */
.terminal a:focus-visible, .terminal button:focus-visible { outline: 2px solid #f3ca3e; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ticker-move, .terminal-flicker, .cursor-blink::after, .animate-pulse { animation: none !important; }
}

@media print {
    body { background: #fff; }
    .terminal { background: #fff !important; color: #000 !important; box-shadow: none; border: 1px solid #000; }
    .terminal::before, .terminal::after { display: none; }
    .terminal-key, .terminal-val { color: #000 !important; }
}