/* ===================================================================
 * explore_v7.css — DOSSIER variant
 * ===================================================================
 * Aged manila folder. Typewriter body. Classification banners, redaction
 * bars, ink-stamps, paper-clip shadow. The cosmology as a CIA/FBI file.
 *
 * All textures are pure CSS — no images. Aged paper is layered
 * repeating-linear-gradients (fibers) + radial-gradients (foxing stains).
 * =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Special+Elite&display=swap');
/* NB: Google Fonts. The brief forbids "third-party CDN frameworks" —
 * fonts are not frameworks. They degrade gracefully to system mono. */

/* ─────────────── reset within the dossier surface ─────────────── */
.v7 *, .v7 *::before, .v7 *::after { box-sizing: border-box; }

/* The whole page surface is the manila folder. */
.v7 {
    --paper:   #e8dcc0;
    --paper-2: #ddd0b0;
    --paper-3: #c9b78f;
    --ink:     #1a1410;
    --ink-2:   #3b332a;
    --rust:    #8a2c1f;
    --rust-2:  #b13325;
    --blue:    #1b3a6b;
    --blue-2:  #2e548f;

    background: var(--paper);
    color: var(--ink);
    font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
    font-size: 15px;
    line-height: 1.55;

    /* Layered paper texture: fibers (diagonal hatching), grime, foxing. */
    background-image:
        /* foxing spots */
        radial-gradient(circle at 12% 18%, rgba(110, 70, 30, 0.10) 0px, transparent 22px),
        radial-gradient(circle at 82% 33%, rgba(120, 60, 30, 0.08) 0px, transparent 30px),
        radial-gradient(circle at 38% 78%, rgba(95, 60, 25, 0.07) 0px, transparent 40px),
        radial-gradient(circle at 70% 88%, rgba(140, 80, 35, 0.09) 0px, transparent 26px),
        /* paper fibers, two cross-hatched layers */
        repeating-linear-gradient( 33deg, rgba(60, 40, 20, 0.04) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(-67deg, rgba(60, 40, 20, 0.03) 0 1px, transparent 1px 7px),
        /* coarse manila base wash */
        linear-gradient(180deg, #ecdfc4 0%, #e2d3b0 100%);
}

/* The /main container in base.html caps at 760px. Override for this
 * variant so the folder reads full-bleed on tablet+. */
body:has(.v7) main { max-width: 920px; }

/* ============================================================
 * 0 — Folder shell
 * ============================================================ */
.v7-folder {
    position: relative;
    padding: 28px 22px 80px;
    /* The folder edge — a dark crease on the left, lighter on right. */
    border-left: 3px solid #6b5a38;
    box-shadow:
        inset 14px 0 22px -10px rgba(80, 55, 20, 0.35),
        inset -2px 0  10px -6px rgba(80, 55, 20, 0.25);
}

/* Paper-clip shadow up top-left. A flat CSS-only shape. */
.v7-clip {
    position: absolute;
    top: -10px;
    left: 38px;
    width: 32px;
    height: 70px;
    border: 3px solid #6e6e72;
    border-radius: 18px 18px 4px 4px;
    background: transparent;
    box-shadow:
        2px 3px 4px rgba(0, 0, 0, 0.25),
        inset -1px -1px 0 rgba(255, 255, 255, 0.3);
    transform: rotate(-4deg);
    z-index: 6;
    pointer-events: none;
}
.v7-clip::after {
    /* the inner loop */
    content: "";
    position: absolute;
    top: 8px; left: 6px; right: 6px; bottom: 18px;
    border: 2px solid #888;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

/* Tape strip — a yellowed translucent rectangle at top-right. */
.v7-tape {
    position: absolute;
    top: -6px;
    right: 32px;
    width: 90px;
    height: 26px;
    background: rgba(255, 245, 180, 0.55);
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
    border-right: 1px dashed rgba(0, 0, 0, 0.15);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
    transform: rotate(3deg);
    z-index: 6;
    pointer-events: none;
}

/* ============================================================
 * 1 — Classification banner
 * ============================================================ */
.v7-banner {
    position: relative;
    margin: 0 -22px 22px;
    padding: 10px 22px;
    background: var(--rust-2);
    color: #fff8ec;
    font-family: "Special Elite", "Courier Prime", monospace;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    border-top: 3px double #fff8ec;
    border-bottom: 3px double #fff8ec;
    transform: rotate(-1.5deg) translateY(-4px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.v7-banner-sub {
    display: block;
    font-size: 12px;
    letter-spacing: 6px;
    margin-top: 2px;
    opacity: 0.92;
}

/* A second, smaller diagonal stamp overlay for atmosphere. */
.v7-diag {
    position: absolute;
    top: 95px;
    right: -8px;
    transform: rotate(18deg);
    border: 3px solid var(--rust-2);
    color: var(--rust-2);
    padding: 4px 14px;
    font-family: "Special Elite", monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    opacity: 0.78;
    z-index: 5;
    pointer-events: none;
}

/* ============================================================
 * 2 — Header block: file identifier
 * ============================================================ */
.v7-header {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    background: rgba(255, 250, 220, 0.55);
}
.v7-h1 {
    font-family: "Special Elite", "Courier Prime", monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 4px;
}
.v7-meta {
    font-size: 11.5px;
    color: var(--ink-2);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.v7-meta span { white-space: nowrap; }
.v7-meta b { color: var(--ink); font-weight: 700; }

/* The intro abstract — typewriter prose. */
.v7-abstract {
    margin: 14px 4px 24px;
    font-size: 14px;
    line-height: 1.6;
}
.v7-abstract::before {
    content: "ABSTRACT — ";
    font-weight: 700;
    letter-spacing: 1px;
}

/* ============================================================
 * 3 — Folder tabs
 * ============================================================ */
.v7-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 2;
}
.v7-tab {
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper-3);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-bottom: 0;
    border-right: 0;
    padding: 9px 14px 11px;
    font-family: "Special Elite", "Courier Prime", monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    top: 2px;
    transition: transform 0.08s, background 0.12s;
}
.v7-tab:last-child { border-right: 2px solid var(--ink); }
.v7-tab:hover { background: #d4c08c; }
.v7-tab:focus { outline: 2px solid var(--rust); outline-offset: -4px; }
.v7-tab[aria-selected="true"] {
    background: var(--paper);
    top: 0;
    box-shadow: 0 -3px 0 var(--rust) inset;
    z-index: 3;
}

/* ============================================================
 * 4 — Subfile panels
 * ============================================================ */
.v7-panel {
    display: none;
    margin-top: -2px;
    padding: 22px 16px 30px;
    border: 2px solid var(--ink);
    background: rgba(255, 248, 220, 0.35);
    position: relative;
    min-height: 200px;
}
.v7-panel[aria-hidden="false"] { display: block; }

.v7-panel-head {
    font-family: "Special Elite", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--ink-2);
    padding-bottom: 6px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.v7-panel-head b { color: var(--ink); font-weight: 700; letter-spacing: 4px; }

/* ============================================================
 * 5 — Personnel records
 * ============================================================ */
.v7-records {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .v7-records { grid-template-columns: repeat(2, 1fr); }
}

.v7-record {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 12px;
    padding: 10px;
    border: 1.5px solid var(--ink);
    background: #f1e6cc;
    text-decoration: none;
    color: var(--ink);
    position: relative;
    transition: transform 0.08s;
}
.v7-record:hover { background: #fff3cf; transform: translate(-1px, -1px); }
.v7-record:focus { outline: 2px solid var(--rust); outline-offset: 2px; }

/* B&W ID photo using the existing initial monogram. */
.v7-id-photo {
    width: 86px;
    height: 110px;
    background:
        linear-gradient(180deg, #5a544c 0%, #2c2a26 100%);
    border: 1.5px solid var(--ink);
    color: #c8c4ba;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Special Elite", monospace;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    filter: contrast(0.85) saturate(0);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.v7-id-photo::after {
    /* CRT/photocopy scanlines for the desaturated grainy look */
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,
        rgba(255,255,255,0.04) 0 1px,
        transparent 1px 2px);
    pointer-events: none;
}
.v7-id-num {
    position: absolute;
    bottom: 2px;
    left: 0; right: 0;
    text-align: center;
    font-size: 8.5px;
    letter-spacing: 1px;
    color: #b9b3a4;
    z-index: 2;
}

.v7-record-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.v7-record-name {
    font-family: "Special Elite", monospace;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.2;
    word-break: break-word;
}
.v7-record-aka {
    font-size: 11px;
    color: var(--ink-2);
    font-style: italic;
}
.v7-record-bio {
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 4px;
    color: var(--ink-2);
}

/* Classification stripe under name. */
.v7-class {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border: 1px solid currentColor;
    align-self: flex-start;
    margin-top: 2px;
}
.v7-class--U { color: #2a5e1e; background: #d2e3c4; }
.v7-class--S { color: #6a4e00; background: #f1dc9c; }
.v7-class--TS { color: #fff8ec; background: var(--rust-2); border-color: #fff8ec; }

/* Inline ▆ redaction. */
.v7-redact {
    display: inline-block;
    background: var(--ink);
    color: transparent !important;
    user-select: none;
    padding: 0 4px;
    line-height: 1.1;
    letter-spacing: 1px;
}

/* ============================================================
 * 6 — Site records (places)
 * ============================================================ */
.v7-sites {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 600px) {
    .v7-sites { grid-template-columns: repeat(2, 1fr); }
}

.v7-site {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 10px;
    border: 1.5px solid var(--ink);
    background: #f1e6cc;
    color: var(--ink);
    text-decoration: none;
    position: relative;
}
.v7-site:hover { background: #fff3cf; }

.v7-site-img {
    width: 110px;
    height: 110px;
    border: 1.5px solid var(--ink);
    background: #2c2a26;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.05) brightness(0.95);
}
.v7-site-img--blank {
    background:
        repeating-linear-gradient(45deg,
            #2c2a26 0 8px,
            #1a1812 8px 16px);
}
.v7-site-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v7-site-name {
    font-family: "Special Elite", monospace;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}
.v7-site-row {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--ink-2);
    text-transform: uppercase;
    display: flex;
    gap: 8px;
}
.v7-site-row b { color: var(--ink); font-weight: 700; min-width: 56px; }
.v7-site-blurb {
    font-size: 12px;
    margin-top: 4px;
    color: var(--ink-2);
    line-height: 1.45;
}

/* ============================================================
 * 7 — Cases (themes)
 * ============================================================ */
.v7-cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.v7-case {
    border: 1.5px solid var(--ink);
    padding: 12px 14px;
    background: rgba(255, 250, 220, 0.45);
    position: relative;
}
.v7-case-no {
    font-family: "Special Elite", monospace;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 4px;
}
.v7-case-title {
    font-family: "Special Elite", monospace;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.v7-case-links {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.v7-case-links li {
    padding: 4px 0 4px 14px;
    position: relative;
    border-bottom: 1px dashed var(--ink-2);
    font-size: 13px;
}
.v7-case-links li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--rust-2);
}
.v7-case-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.v7-case-links a:hover { background: #fff3cf; }
.v7-case-kind {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-right: 6px;
    padding: 1px 5px;
    border: 1px solid var(--ink-2);
    color: var(--ink-2);
    text-transform: uppercase;
}

/* ============================================================
 * 8 — Timeline panel
 * ============================================================ */
.v7-timeline {
    border-left: 2px solid var(--ink);
    margin-left: 4px;
    padding-left: 0;
}
.v7-tl-row {
    position: relative;
    padding: 10px 0 12px 22px;
    border-bottom: 1px dashed var(--ink-2);
}
.v7-tl-row::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 16px;
    width: 12px; height: 12px;
    background: var(--rust-2);
    border: 2px solid var(--ink);
    border-radius: 50%;
}
.v7-tl-label {
    font-family: "Special Elite", monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.v7-tl-blurb { font-size: 12.5px; color: var(--ink-2); }

/* ============================================================
 * 9 — Operations (overview)
 * ============================================================ */
.v7-ops {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 600px) {
    .v7-ops { grid-template-columns: repeat(2, 1fr); }
}
.v7-op {
    border: 1.5px solid var(--ink);
    padding: 12px;
    background: rgba(255, 250, 220, 0.5);
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v7-op:hover { background: #fff3cf; }
.v7-op-code {
    font-family: "Special Elite", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rust-2);
}
.v7-op-name {
    font-family: "Special Elite", monospace;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.2;
}
.v7-op-blurb { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ============================================================
 * 10 — Decorative stamps
 * ============================================================ */
.v7-stamp {
    position: absolute;
    font-family: "Special Elite", monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 3px solid currentColor;
    padding: 5px 12px;
    background: rgba(255, 250, 220, 0.15);
    pointer-events: none;
    opacity: 0.78;
    text-align: center;
    z-index: 4;
}
.v7-stamp small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    margin-top: 2px;
    font-weight: 400;
}
.v7-stamp--approved {
    color: var(--blue);
    font-size: 16px;
    top: 230px;
    right: 36px;
    transform: rotate(-12deg);
}
.v7-stamp--reviewed {
    color: var(--rust);
    font-size: 14px;
    bottom: 320px;
    left: 18px;
    transform: rotate(7deg);
}
.v7-stamp--confidential {
    color: #2d5a1e;
    font-size: 13px;
    bottom: 120px;
    right: 28px;
    transform: rotate(-5deg);
}

/* ============================================================
 * 11 — Footer (control number)
 * ============================================================ */
.v7-foot {
    margin-top: 36px;
    padding-top: 14px;
    border-top: 2px solid var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-2);
}
.v7-foot b { color: var(--ink); }

/* ============================================================
 * 12 — Mobile fine-tune
 * ============================================================ */
@media (max-width: 599px) {
    .v7-folder { padding: 18px 12px 60px; }
    .v7-banner { font-size: 16px; letter-spacing: 2px; padding: 8px 14px; }
    .v7-banner-sub { font-size: 10px; letter-spacing: 3px; }
    .v7-h1 { font-size: 18px; }
    .v7-tab { padding: 8px 10px; font-size: 11px; letter-spacing: 1px; }
    .v7-clip { left: 14px; }
    .v7-tape { right: 10px; width: 70px; }
    .v7-stamp { display: none; } /* declutter on phones */
    .v7-record { grid-template-columns: 70px 1fr; }
    .v7-id-photo { width: 70px; height: 90px; font-size: 22px; }
    .v7-site { grid-template-columns: 92px 1fr; }
    .v7-site-img { width: 92px; height: 92px; }
    .v7-diag { top: 70px; font-size: 11px; padding: 3px 8px; }
}