/* ============================================================
   PURSUE Hebrew Mirror — styles
   Retro-terminal aesthetic: cyan on near-black, mono-first, square.
   Matches the visual language of the original war.gov/UFO page.
   ============================================================ */

:root {
  --bg: #000005;
  --bg-elev-1: #07090d;
  --bg-elev-2: #0c1218;
  --bg-elev-3: #121922;
  --border: #1e2a36;
  --border-strong: #2a3a4a;
  --text: #e8f1f4;
  --text-muted: #9fb4c2;
  --text-dim: #5d7488;
  --accent: #7dfbff;          /* electric cyan */
  --accent-strong: #b8feff;
  --accent-dim: rgba(125,251,255,0.18);
  --accent-faint: rgba(125,251,255,0.06);
  --danger: #ff6464;
  --link: var(--accent);
  --radius: 0;                /* square corners, terminal style */
  --shadow-glow: 0 0 24px rgba(125,251,255,0.15);
  --font-mono: "JetBrains Mono", "Fira Code", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Heebo", "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --container-max: 1280px;
}

* { box-sizing: border-box; }

/* Make the HTML `hidden` attribute win over component display rules.
   Without this, a `display: flex` on .gallery / .gallery-empty overrides
   the user-agent default of `[hidden] { display: none; }`. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);   /* mono-first, terminal feel */
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Hebrew body paragraphs deserve a softer face — use Heebo for them */
.he-body, .he-body p { font-family: var(--font-sans); line-height: 1.75; }

/* ---------- Top banner ---------- */
.top-banner {
  background: #050a10;
  border-block-end: 1px solid var(--border);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  text-align: center;
}
.top-banner a { color: var(--accent); }
.top-banner strong { color: var(--accent); font-weight: 500; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,5,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.brand-logo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 700; letter-spacing: 0.16em; font-size: 0.95rem; font-family: var(--font-mono); }
.brand-sub { color: var(--text-dim); font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 120ms ease;
}
.site-nav a:hover { color: var(--accent); text-decoration: none; }
.nav-original { color: var(--accent) !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(125,251,255,0.10), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(125,251,255,0.05), transparent 50%),
    linear-gradient(180deg, #000005, #000003);
  z-index: 0;
}
.hero-bg::after {
  /* scanline / grid texture */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(125,251,255,0.05) 95%),
    linear-gradient(90deg, transparent 95%, rgba(125,251,255,0.05) 95%);
  background-size: 32px 32px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-inner { position: relative; z-index: 1; padding: 56px 24px; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: 0.8;
}
.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  color: var(--text);
  text-shadow: 0 0 32px rgba(125,251,255,0.25);
}
.hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--text);
  font-weight: 400;
  margin: 0 auto 16px;
  max-width: 720px;
  line-height: 1.5;
}
.hero-desc {
  font-family: var(--font-sans);
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 26px;
  font-size: 0.95rem;
  line-height: 1.65;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-coords {
  margin-top: 32px;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  text-decoration: none;
  position: relative;
}
.btn::before { content: ">"; opacity: 0.8; margin-inline-end: 2px; }
.btn:hover { text-decoration: none; }
.btn-primary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dim);
  color: var(--accent-strong);
  box-shadow: 0 0 16px var(--accent-dim);
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn-ghost::before { content: ""; margin: 0; }
.btn-sm { padding: 7px 12px; font-size: 0.74rem; }
.btn-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.65;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Sections ---------- */
.section {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
}
.section-head {
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.section-title {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---------- Quote block (Trump) ---------- */
.quote-block {
  background:
    radial-gradient(circle at 80% 50%, rgba(125,251,255,0.04), transparent 60%),
    #02050a;
  padding: 88px 0;
  border-bottom: 1px solid var(--border);
}
.presidential-quote {
  margin: 0;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.presidential-quote p {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.65;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 24px;
}
.quote-attribution {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Directive ---------- */
.directive { background: #02050a; }
.directive-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}
.directive-text p {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.8;
}
.directive-text p + p { margin-top: 16px; }
/* Agencies in the directive section — chips rather than one row each, so
   the full list (11 values) fits in less space than the four hardcoded
   rows it replaces. */
.directive-agencies-label {
  margin: 28px 0 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.directive-agencies {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agency-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 11px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.agency-chip:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
}
.agency-chip-count {
  font-size: 0.72rem;
  color: var(--accent);
}
.agency-chip-more {
  color: var(--text-dim);
  border-style: dashed;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.directive-facts {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.directive-facts li {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.fact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.fact-value { color: var(--text); font-weight: 400; font-size: 0.92rem; font-family: var(--font-sans); }

.directive-aside { display: flex; flex-direction: column; gap: 10px; }
.aside-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 18px 20px;
}
.aside-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.aside-value { font-size: 1.05rem; font-weight: 500; margin: 0; color: var(--text); font-family: var(--font-mono); }

/* ---------- Release / file browser ---------- */
.release { background: #000308; }

.placeholder-banner {
  background: rgba(125,251,255,0.05);
  border: 1px solid var(--accent);
  border-inline-start-width: 3px;
  padding: 16px 20px;
  margin: 0 0 24px;
  font-family: var(--font-mono);
}
.placeholder-banner strong {
  display: block;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}
.placeholder-banner p {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.placeholder-banner a { color: var(--accent); }

.hegseth-quote {
  margin: 0 0 40px;
  padding: 24px 28px;
  border-inline-start: 2px solid var(--accent);
  background: var(--bg-elev-1);
  font-family: var(--font-mono);
}
.hegseth-quote .quote-label {
  display: block;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hegseth-quote p {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.75;
}

/* One column per release, so the block always reads as two rows:
   documents on top, video underneath. auto-fit keeps that true as
   releases are added — it was hardcoded to 4 and Release 05 wrapped. */
.release-downloads {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 16px;
}
.release-download-col {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 6px;
  min-width: 0;
}
/* The release number lives once per column, so neither button has to
   repeat "מהדורה NN" — that is what made five columns impossible. */
.release-download-no {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  padding-inline-start: 2px;
}
.release-download-col:hover .release-download-no { color: var(--accent); }
.release-downloads .btn {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}
/* .btn::before is the terminal-prompt chevron. In a column-flex button it
   claims a whole line of its own, so move it inline onto the label. */
.release-downloads .btn::before { display: none; }
.release-downloads .btn-label {
  font-size: 0.78rem;
  white-space: nowrap;
}
.release-downloads .btn-label::before {
  content: ">";
  opacity: 0.8;
  margin-inline-end: 6px;
}
/* Filenames are long and of wildly different lengths across releases;
   clip rather than let one of them set the column width. */
.release-downloads .btn-meta {
  font-size: 0.62rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}

/* Mobile: ten buttons is a wall, so fold them behind one control. */
.release-downloads-toggle { display: none; }

/* Five-plus columns stop being readable around here; wrap to a 2-up grid. */
@media (max-width: 1100px) {
  .release-downloads .btn-meta { font-size: 0.58rem; }
}
@media (max-width: 900px) {
  .release-downloads {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .release-downloads .btn-meta { font-size: 0.64rem; }
}
@media (max-width: 768px) {
  .filters-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: start;
  }
  .filters-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
  }
  /* An active filter must never be invisible just because the row is
     closed — otherwise a short result list looks like a bug. */
  .filters-toggle-count {
    background: var(--accent);
    color: var(--bg);
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 500;
  }
  .filters-toggle-chevron {
    margin-inline-start: auto;
    transition: transform 140ms ease;
  }
  .filters-toggle[aria-expanded="true"] .filters-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Scoped inside the breakpoint, so a JS failure cannot strand the
     filters on desktop. */
  .filters.is-collapsed { display: none; }

  /* The glossary and the aside were four tall stacked cards each — roughly
     720px of chrome before the archive. One line per entry says the same
     thing: the label is short and the value is short, so they fit together. */
  .directive-agencies-label { margin-top: 20px; }
  .agency-chip { font-size: 0.8rem; padding: 6px 10px; }
  .directive-facts {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 20px;
  }
  .directive-facts li,
  .aside-card {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
  }
  .fact-label,
  .aside-label {
    margin: 0;
    flex: 0 0 auto;
    min-width: 4.5em;
  }
  .fact-value,
  .aside-value {
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .aside-value { font-size: 0.92rem; }
  .directive-aside { gap: 6px; }
  .directive-text p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 10px; }
  .release-downloads-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: start;
  }
  .release-downloads-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
  }
  .release-downloads-toggle-meta {
    font-size: 0.68rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
  }
  .release-downloads-toggle-chevron {
    margin-inline-start: auto;
    transition: transform 140ms ease;
  }
  .release-downloads-toggle[aria-expanded="true"] .release-downloads-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Collapsed only inside this breakpoint — desktop never hides the grid,
     so the toggle failing to initialise can't strand the buttons. */
  .release-downloads.is-collapsed { display: none; }
  .release-downloads { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 14px; }
  .release-download-col { grid-template-rows: auto auto auto; }
  .release-downloads .btn-meta { font-size: 0.66rem; }
}
.release-count-bar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 28px;
}
.file-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.file-count #file-count-num {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
}

/* Release tabs — mirrors the ALL / RELEASE 01–04 tab bar on the source site.
   Styled as prominent, clearly-clickable pills with a bold active state. */
/* Published-but-not-yet-mirrored release notice */
.pending-release {
  margin: 0 0 20px;
}
.pending-release-item {
  background: rgba(125,251,255,0.04);
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--accent);
  padding: 16px 20px;
}
.pending-release-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
}
.pending-release-badge {
  background: var(--accent);
  color: var(--bg);
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.pending-release-count {
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.pending-release-body {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}
.pending-release-foot {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.7;
}
.pending-release-foot a { color: var(--accent); }

.pending-release-bundles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--border);
}
.pending-release-bundles-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pending-release-bundle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-1);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.pending-release-bundle:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
  text-decoration: none;
}
.pending-release-bundle .mono {
  font-size: 0.68rem;
  color: var(--text-dim);
  word-break: break-all;
}

.release-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.release-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.release-tab:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-faint);
}
.release-tab.is-active {
  color: #00121a;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 20px var(--accent-dim), 0 2px 8px rgba(0,0,0,0.4);
}
.release-tab-count {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 1.7em;
  text-align: center;
}
.release-tab.is-active .release-tab-count {
  color: var(--accent-strong);
  background: rgba(0,10,15,0.45);
  border-color: rgba(0,10,15,0.35);
}
.release-tab:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
/* Mobile: stack tabs one per row (full width), label + count at the edges. */
@media (max-width: 640px) {
  .pending-release-head { font-size: 0.82rem; }
  .pending-release-bundles { flex-direction: column; align-items: stretch; }
  .pending-release-bundle { width: 100%; }
  .release-tabs {
    flex-direction: column;
    gap: 6px;
  }
  .release-tab {
    width: 100%;
    justify-content: space-between;
  }
  /* Six stacked tabs are taller than a phone screen, so the strip folds
     behind one control that always shows the active release. */
  .release-tabs-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-elev-1);
    border: 1px solid var(--accent);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: start;
  }
  .release-tabs-toggle-current { color: var(--accent-strong); font-weight: 700; }
  .release-tabs-toggle-count {
    background: var(--accent);
    color: var(--bg);
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
  }
  .release-tabs-toggle-chevron {
    margin-inline-start: auto;
    transition: transform 140ms ease;
  }
  .release-tabs-toggle[aria-expanded="true"] .release-tabs-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Scoped to this breakpoint, so a JS failure can't strand the tabs. */
  .release-tabs.is-collapsed { display: none; }
}
/* min-width rather than a bare display:none, for the same source-order
   reason as .filters-toggle below. */
@media (min-width: 641px) {
  .release-tabs-toggle { display: none; }
}

/* Mobile: the filter row is 464px of controls before any document is
   visible, so it folds behind one button — same pattern as the release
   download bundles.
   Stated as min-width rather than a bare `display: none`, so it cannot be
   overridden by source order — this rule sits after the max-width:768 block
   that reveals the button, and as a bare rule it silently won, hiding the
   toggle while the panel stayed collapsed. */
@media (min-width: 769px) {
  .filters-toggle { display: none; }
}

/* Filters */
.filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr)) minmax(200px, 1.5fr) auto;
  gap: 10px;
  margin-bottom: 28px;
  align-items: end;
}
.filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.filter-select,
.filter-input {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  min-width: 0;
  width: 100%;
}
.filter-input::placeholder { color: var(--text-dim); }
.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev-2);
  box-shadow: 0 0 0 1px var(--accent-dim);
}
.filter-disabled { opacity: 0.45; }
.filter-disabled .filter-select { cursor: not-allowed; }
.filter-search { position: relative; }
.filter-search::before {
  content: ">";
  position: absolute;
  inset-block-end: 9px;
  inset-inline-start: 12px;
  color: var(--accent);
  font-family: var(--font-mono);
  pointer-events: none;
}
.filter-search .filter-input { padding-inline-start: 28px; }

#filter-reset { align-self: end; }

/* File list cards (terminal table style) */
.file-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 32px;
  min-height: 200px;
  border-block-start: 1px solid var(--border);
}
.file-list-loading {
  text-align: center;
  color: var(--text-dim);
  padding: 60px 20px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.file-list-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-elev-1);
  border: 1px dashed var(--border-strong);
  margin-bottom: 32px;
}
.file-list-empty p {
  color: var(--text-muted);
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.file-card {
  background: transparent;
  border-block-end: 1px solid var(--border);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  /* Let the grid item shrink below its content's min-content width so a long
     unbreakable filename (e.g. the CIA R03 docs) can't stretch the page. */
  min-width: 0;
}
.file-card:hover {
  background: var(--accent-faint);
  border-color: var(--accent);
}
.file-card:focus-within {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.file-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.file-card-link { color: inherit; text-decoration: none; }
.file-card-link:hover { color: var(--accent); text-decoration: none; }
.file-card:focus-within { outline: 1px solid var(--accent); outline-offset: -1px; }
.file-card-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.01em;
  word-break: break-word;
  line-height: 1.35;
}
.file-card-title.code-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  word-break: break-all;
  font-weight: 400;
  text-transform: uppercase;
}
.file-card-type-badge {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 2px;
}

.file-card-blurb {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  /* Cap to 3 lines with ellipsis on overflow */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.file-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.file-card-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.4;
}
.file-card-meta-item .meta-icon {
  font-size: 0.95rem;
  line-height: 1;
  filter: grayscale(0.15);
}
.file-card-meta-item .meta-label {
  color: var(--text-dim);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.file-card-meta-item .meta-value {
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.file-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 2px;
}
.file-card-filename {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}
.file-card-download {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 7px 14px;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms ease;
}
.file-card-download-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}
.file-card:hover .file-card-download-disabled {
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.file-card:hover .file-card-download {
  border-color: var(--accent);
  color: var(--accent);
}
.file-card-download:hover {
  background: var(--accent);
  color: #000 !important;
  border-color: var(--accent);
  text-decoration: none;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.pagination button,
.pagination .page-ellipsis {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  min-width: 36px;
  transition: all 120ms ease;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination button[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-faint);
}
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination .page-ellipsis { cursor: default; border-color: transparent; }

/* ---------- Learn ---------- */
.learn { background: #02050a; }
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.learn-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 24px;
  transition: border-color 120ms ease;
}
.learn-card:hover { border-color: var(--accent); }
.learn-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.learn-card p {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #000003;
  color: var(--text-muted);
  padding: 56px 0 24px;
  font-family: var(--font-mono);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 36px;
}
.footer-brand {
  color: var(--accent);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.footer-disclaimer {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
}
.footer-col h4 {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; font-size: 0.85rem; }
.footer-glossary li { display: flex; gap: 8px; font-size: 0.82rem; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .directive-grid { grid-template-columns: 1fr; gap: 24px; }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .filter-search { grid-column: 1 / -1; }
  .file-card { padding: 16px 14px; }
  .file-card-title { font-size: 0.98rem; }
  /* Hide metadata text labels — keep icon + value only on narrow screens */
  .file-card-meta-item .meta-label { display: none; }
  .file-card-meta { gap: 6px 14px; }
  .file-card-meta-item { font-size: 0.74rem; }
  .file-card-meta-item .meta-value { font-size: 0.78rem; }
  .file-card-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .file-card-download {
    padding: 5px 10px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
  .file-card-filename {
    font-size: 0.62rem;
    opacity: 0.5;
    flex-basis: 100%;
    order: 99;
  }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .nav-original { display: none; }
  .header-inner { height: 56px; }
  .brand-sub { display: none; }
  .section { padding: 60px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero { min-height: 480px; }
  .hero-inner { padding: 48px 16px; }
  .filters { grid-template-columns: 1fr; }
  .file-count { margin-inline-start: 0; justify-content: center; }
  .container { padding: 0 16px; }
  /* Tighten card padding on very small screens */
  .file-card { padding: 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* Subtle scrollbar in terminal style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ============================================================
   File Detail Page (file.html)
   ============================================================ */

.file-page { padding: 24px 0 80px; }

.file-loading,
.file-error {
  padding: 60px 24px;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.file-error {
  color: var(--accent-strong);
  border: 1px solid rgba(125,251,255,0.3);
  background: rgba(125,251,255,0.04);
  margin: 24px 0;
}

.file-crumb {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.file-crumb a {
  color: var(--text-muted);
}
.file-crumb a:hover { color: var(--accent); text-decoration: none; }

/* ---------- Header ---------- */

.file-head {
  margin: 0 0 32px;
  padding-block-end: 20px;
  border-block-end: 1px solid var(--border);
}
.file-eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.file-title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0;
}
.file-title[dir="ltr"] {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  word-break: break-all;
  letter-spacing: 0.02em;
}
.file-filename {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  word-break: break-all;
  direction: ltr;
  text-align: right;
}

/* ---------- Top grid (gallery + meta) ---------- */

.file-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 24px;
  margin: 0 0 36px;
  align-items: start;
}

/* ---------- Media Player (video / audio) ---------- */

.media-player {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  background: #000;
  border: 1px solid var(--border);
}
.media-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.media-source a {
  color: var(--accent);
  text-decoration: none;
}
.media-source a:hover {
  text-decoration: underline;
}

/* ---------- Gallery ---------- */

.gallery {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-stage {
  position: relative;
  background: #000;
  border: 1px solid var(--border);
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery-image-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
}
.gallery-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
}

.gallery-arrow {
  position: absolute;
  inset-block: 0;
  width: 56px;
  background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
  border: 0;
  color: var(--accent);
  font-size: 2.4rem;
  font-family: var(--font-mono);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 120ms ease, color 120ms ease;
  padding: 0;
}
.gallery-arrow span { display: block; }
.gallery-arrow:hover {
  background: linear-gradient(to right, rgba(125,251,255,0.18), rgba(0,0,0,0));
  color: var(--accent-strong);
}
/* RTL semantics: "prev" sits on the right (reading start), "next" on the left.
   The gradient direction flips per side so the dark fade always points outward. */
.gallery-arrow-prev { inset-inline-end: 0; }
.gallery-arrow-next {
  inset-inline-start: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.gallery-arrow-next:hover {
  background: linear-gradient(to left, rgba(125,251,255,0.18), rgba(0,0,0,0));
}

.gallery-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  padding: 0 4px;
}
.gallery-kind {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}

.gallery-fallback-note {
  margin: 4px 0 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  font-style: italic;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scroll-snap-type: x mandatory;
}
.gallery-thumb {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  background: #000;
  border: 1px solid var(--border);
  padding: 0;
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color 120ms ease, transform 120ms ease;
  overflow: hidden;
}
.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  opacity: 0.75;
  transition: opacity 120ms ease;
}
.gallery-thumb:hover { border-color: var(--accent); }
.gallery-thumb:hover img { opacity: 1; }
.gallery-thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(125,251,255,0.25);
}
.gallery-thumb.is-active img { opacity: 1; }
.gallery-thumb-page {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 4px;
  font-size: 0.62rem;
  color: var(--accent);
  background: rgba(0,0,0,0.7);
  padding: 1px 5px;
  letter-spacing: 0.04em;
}

.gallery-empty {
  background: var(--bg-elev-1);
  border: 1px dashed var(--border);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery-empty-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gallery-empty p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }

/* ---------- Meta sidebar ---------- */

.file-meta {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 22px 22px 18px;
  position: sticky;
  inset-block-start: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.file-meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.file-meta-list > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block-end: 10px;
  border-block-end: 1px dashed var(--border);
}
.file-meta-list > div:last-child { border-block-end: 0; padding-block-end: 0; }
.file-meta-list dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.file-meta-list dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--text);
}
.file-meta-list dd::before { content: "["; color: var(--accent); }
.file-meta-list dd::after  { content: "]"; color: var(--accent); }

.file-download {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ---------- Text blocks (narrative / summary / OCR) ---------- */

.text-block {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  padding: 24px 26px;
  margin: 0 0 20px;
}
.text-block-head {
  margin: 0 0 14px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--border);
}
.text-block-label {
  margin: 0 0 4px;
  font-size: 0.74rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.text-block-byline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.text-block-body {
  font-family: var(--font-sans);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.85;
}
.text-block-body p { margin: 0 0 14px; }
.text-block-body p:last-child { margin: 0; }

/* Narrative — slightly emphasised */
.text-block-narrative {
  border-color: rgba(125,251,255,0.35);
  background: linear-gradient(180deg, rgba(125,251,255,0.04), var(--bg-elev-1) 60%);
}
.text-block-narrative .text-block-label { color: var(--accent-strong); }

/* English-source bundle — collapsible <details> that wraps the 3000-char
   excerpt and the full OCR scroll-pane. Default closed; visually subtle. */
.text-block-collapsible {
  background: var(--bg-elev-1);
  border: 1px dashed var(--border);
  padding: 0;
  margin: 0 0 20px;
}
.text-block-collapsible-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
}
.text-block-collapsible-head::-webkit-details-marker { display: none; }
.text-block-collapsible-head:hover { color: var(--accent); }
.text-block-collapsible-toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
  flex-shrink: 0;
}
.text-block-collapsible[open] .text-block-collapsible-toggle::before { content: "−"; }
.text-block-collapsible:not([open]) .text-block-collapsible-toggle::before { content: "+"; }
.text-block-collapsible-toggle::before { line-height: 1; }
.text-block-collapsible-head .text-block-label { margin: 0; flex-shrink: 0; }
.text-block-collapsible-head .text-block-byline { margin: 0; flex: 1; min-width: 200px; }
.text-block-collapsible-body {
  padding: 0 22px 22px;
  border-block-start: 1px solid var(--border);
}
.text-original-subheader {
  margin: 18px 0 8px;
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  direction: ltr;
  text-align: left;
}
.text-block-collapsible-body .text-block-body {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.text-block-collapsible-body .text-block-byline {
  margin-block-end: 8px;
}

/* English original (collapsible inside summary block) */
.text-original {
  margin: 14px 0 0;
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.text-original > summary {
  cursor: pointer;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
}
.text-original > summary::before { content: "▸ "; color: var(--accent); }
.text-original[open] > summary::before { content: "▾ "; }
.text-original > summary:hover { color: var(--accent); }
.text-original-body {
  margin-block-start: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* OCR full — scrollable raw text */
.ocr-scroll {
  max-height: 360px;
  overflow: auto;
  background: #02050a;
  border: 1px solid var(--border-strong);
  padding: 14px 16px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ---------- Footer actions ---------- */

.file-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-block-start: 32px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .file-top-grid { grid-template-columns: 1fr; gap: 18px; }
  .file-meta { position: static; }
  .file-title { font-size: 1.4rem; }
  .gallery-stage { min-height: 240px; }
  .gallery-image-wrap img { max-height: 55vh; }
  .gallery-arrow { width: 44px; font-size: 2rem; }
}

@media (max-width: 600px) {
  .file-page { padding: 16px 0 60px; }
  .text-block { padding: 18px 16px; }
  .file-meta { padding: 16px; }
  .gallery { padding: 8px; }
  .gallery-thumb { flex-basis: 64px; width: 64px; height: 64px; }
  .gallery-arrow { width: 36px; font-size: 1.7rem; }
  .ocr-scroll { max-height: 280px; font-size: 0.74rem; }
  .file-footer-actions { flex-direction: column; align-items: stretch; }
  .file-footer-actions .btn { text-align: center; justify-content: center; }
}