/* =============================================================================
CONTAINMENT FILES — the intel reader and the archive (intelReader.js).
The same language as the front end (frontend.css): dark glass,
hairline edges, ember for the forward action, Oswald for names, Plex Mono
for labels, Plex Sans for prose. What sits on the glass is the document
itself, as paper: typed orders, a handwritten log, a posted notice, a
teleprinter strip, fan-fold printout, a letter, a programme directive —
with stamps, redaction bars and the file number on its tab.
Type is sized from --mu (frontend.css), so the paper reads at 1280x720
and on a landscape phone without a fixed px ladder. Reduced Motion drops the
entrance and the reels; nothing here flashes.
The HUD toast is in hud-layout.css (geometry) and hud-theme.css (look).
============================================================================= */
#intel-reader,
#intel-screen {
--paper: #e9e3d3;
--paper-2: #ddd4bf;
--ink: #1d1f22;
--ink-hand: #1c2b55;
--ink-red: #a3261c;
--ink-blue: #27407a;
--hand: "Bradley Hand", "Segoe Print", "Noteworthy", "Ink Free", "Comic Sans MS", cursive;
--rd: calc(16 * var(--mu, 1px));
}
/* ------------------------------------------------------------------ reader */
#intel-reader { z-index: 96; padding: 0; justify-content: center; align-items: center;
background:
radial-gradient(90% 70% at 50% 45%, rgba(18, 16, 13, .72), rgba(3, 4, 6, .94) 72%),
rgba(3, 4, 6, .6);
}
#intel-reader .ir-shell {
position: relative;
box-sizing: border-box;
width: min(1180px, 100vw);
height: 100%;
max-height: 100dvh;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
padding:
max(calc(18 * var(--mu)), env(safe-area-inset-top, 0px))
max(calc(20 * var(--mu)), env(safe-area-inset-right, 0px))
max(calc(14 * var(--mu)), env(safe-area-inset-bottom, 0px))
max(calc(20 * var(--mu)), env(safe-area-inset-left, 0px));
gap: calc(12 * var(--mu));
}
#intel-reader .ir-head { display: flex; flex-direction: column; gap: calc(4 * var(--mu)); min-width: 0; }
#intel-reader .ir-kicker {
font: 600 calc(11.5 * var(--mu)) / 1.2 var(--font-mono);
letter-spacing: .3em; text-transform: uppercase; color: var(--ember, #f08a4c);
}
#intel-reader .ir-title {
margin: 0; outline: none;
font: 700 calc(38 * var(--mu)) / 1.02 var(--font-display);
letter-spacing: .02em; text-transform: uppercase; color: var(--ink-0, #f6f0e4);
text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .7);
}
#intel-reader .ir-meta {
font: 500 calc(13 * var(--mu)) / 1.4 var(--font-ui);
color: var(--ink-1, #c9c1b1);
}
#intel-reader .ir-head::after {
content: ""; display: block; width: calc(120 * var(--mu)); height: 1px; margin-top: calc(8 * var(--mu));
background: linear-gradient(90deg, var(--ember, #f08a4c), transparent);
}
#intel-reader .ir-stage {
position: relative; min-height: 0;
overflow: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: rgba(240, 138, 76, .5) transparent;
padding: calc(10 * var(--mu)) calc(6 * var(--mu)) calc(26 * var(--mu));
}
#intel-reader .ir-foot {
display: flex; align-items: center; justify-content: flex-end; gap: calc(10 * var(--mu));
}
#intel-reader .ir-count {
margin-right: auto;
font: 600 calc(11 * var(--mu)) / 1 var(--font-mono); letter-spacing: .24em; color: var(--ink-2, #8f897c);
}
#intel-reader .ir-foot .pbtn { min-height: 44px; min-width: calc(128 * var(--mu)); width: auto; max-width: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .7em; }
#intel-reader .ir-foot .pbtn[hidden] { display: none; }
#intel-reader .ir-foot kbd {
font: 600 calc(10.5 * var(--mu)) / 1 var(--font-mono); letter-spacing: .08em;
padding: .3em .5em; border: 1px solid currentColor; border-radius: 3px; opacity: .8;
}
/* wide screens: the title block stands to the left of the paper, a dossier
laid open on a desk */
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
#intel-reader .ir-shell {
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
column-gap: calc(40 * var(--mu));
}
#intel-reader .ir-head { grid-column: 1; grid-row: 1; align-self: center; padding-bottom: 12vh; }
#intel-reader .ir-stage { grid-column: 2; grid-row: 1 / span 2; padding-top: 6vh; }
#intel-reader .ir-foot { grid-column: 1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
#intel-reader .ir-count { width: 100%; margin: 0 0 calc(4 * var(--mu)); }
}
/* entrance: the paper slides up out of the dark, the title follows */
#intel-reader.enter .ir-desk, #intel-reader.enter .ir-tape { animation: irPaperIn .62s var(--ease-premium, cubic-bezier(.2, .8, .2, 1)) both; }
#intel-reader.enter .ir-head { animation: irHeadIn .5s .08s var(--ease-premium, cubic-bezier(.2, .8, .2, 1)) both; }
@keyframes irPaperIn { from { opacity: 0; transform: translateY(26px) rotate(.8deg); } to { opacity: 1; transform: none; } }
@keyframes irHeadIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
html.reduce-motion #intel-reader.enter .ir-desk, html.reduce-motion #intel-reader.enter .ir-tape,
html.reduce-motion #intel-reader.enter .ir-head { animation: irFade .2s linear both; }
@media (prefers-reduced-motion: reduce) {
#intel-reader.enter .ir-desk, #intel-reader.enter .ir-tape, #intel-reader.enter .ir-head { animation: irFade .2s linear both; }
}
@keyframes irFade { from { opacity: 0; } to { opacity: 1; } }
/* ------------------------------------------------------------------- paper */
#intel-reader .ir-desk { display: flex; justify-content: center; }
#intel-reader .ir-paper {
position: relative; box-sizing: border-box;
width: min(700px, 100%);
padding: calc(52 * var(--mu)) calc(56 * var(--mu)) calc(58 * var(--mu));
color: var(--ink);
font: 500 var(--rd) / 1.6 var(--font-mono);
background:
radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(110, 82, 40, .18)),
linear-gradient(176deg, rgba(255, 252, 240, .5), transparent 32%),
repeating-linear-gradient(90deg, rgba(120, 100, 60, .025) 0 2px, transparent 2px 5px),
var(--paper);
box-shadow: 0 34px 80px rgba(0, 0, 0, .62), 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(80, 60, 30, .08);
transform: rotate(-.5deg);
}
#intel-reader .ir-paper::before {
/* a fold across the middle, pressed flat again */
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; pointer-events: none;
background: linear-gradient(180deg, rgba(90, 70, 40, .14), rgba(255, 255, 255, .3));
}
#intel-reader .ir-fileno {
position: absolute; top: calc(-18 * var(--mu)); right: calc(28 * var(--mu));
padding: calc(5 * var(--mu)) calc(12 * var(--mu)) calc(7 * var(--mu));
font: 600 calc(11 * var(--mu)) / 1 var(--font-mono); letter-spacing: .2em;
color: #2a2116; background: #c7aa6f; border-radius: 4px 4px 0 0;
box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
}
#intel-reader .ir-body > * + * { margin-top: .9em; }
#intel-reader .ir-body p { margin-bottom: 0; }
#intel-reader .ir-body > :first-child { margin-top: 0; }
#intel-reader .redact {
--n: 6;
display: inline-block; width: calc(var(--n, 6) * .6em); height: 1.02em; margin: 0 .08em;
vertical-align: -.17em; background: #121212; border-radius: 1px;
box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
#intel-reader .struck { text-decoration-thickness: 2px; text-decoration-color: currentColor; opacity: .75; }
/* blocks */
#intel-reader .b-letterhead { font-weight: 700; letter-spacing: .14em; text-align: center; border-bottom: 2px solid currentColor; padding-bottom: .5em; }
#intel-reader .b-ref, #intel-reader .b-formhead, #intel-reader .b-printhead { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; font-weight: 600; letter-spacing: .06em; }
#intel-reader .b-formhead { font-weight: 700; border-bottom: 1.5px solid currentColor; padding-bottom: .35em; }
#intel-reader .b-kv { display: grid; grid-template-columns: max-content 1fr; gap: .2em 1.2em; margin: 0; }
#intel-reader .b-kv dt { font-weight: 700; letter-spacing: .1em; }
#intel-reader .b-kv dt::after { content: ":"; }
#intel-reader .b-kv dd { margin: 0; }
#intel-reader .b-rule { border: 0; border-top: 1.5px solid rgba(29, 31, 34, .7); margin: 1.1em 0; }
#intel-reader .b-list { margin: 0; padding-left: 1.8em; }
#intel-reader .b-list li + li { margin-top: .55em; }
#intel-reader .b-list li::marker { font-weight: 700; }
#intel-reader .b-sign { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2.1em; }
#intel-reader .b-sign .hand { font: 400 2em/1 var(--hand); color: var(--ink-hand); transform: rotate(-4deg); margin: 0 0 .1em .4em; min-height: 1em; }
#intel-reader .b-sign .name { font-weight: 700; }
#intel-reader .b-sign .role { opacity: .8; }
#intel-reader .b-countersign { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin-top: 1.4em; }
#intel-reader .b-countersign .hand { font: 400 2.2em/1 var(--hand); color: #141414; transform: rotate(-6deg) skewX(-6deg); letter-spacing: .02em; }
#intel-reader .b-countersign .name { font-weight: 700; letter-spacing: .06em; border-top: 1px solid currentColor; padding-top: .3em; }
#intel-reader .b-margin {
font: 400 1.18em/1.4 var(--hand); color: #3a3c40;
transform: rotate(-1.6deg); transform-origin: left top;
margin-top: 1.6em; padding: .4em .2em .4em 1em; border-left: 2px solid rgba(58, 60, 64, .35);
}
#intel-reader .b-table { width: 100%; border-collapse: collapse; font-size: .92em; }
#intel-reader .b-table th { text-align: left; font-weight: 700; letter-spacing: .08em; border-bottom: 1.5px solid currentColor; padding: .3em .5em .3em 0; }
#intel-reader .b-table td { padding: .32em .5em .32em 0; vertical-align: top; }
/* handwritten: the night-watch log, on ruled paper in your own hand */
#intel-reader .ir-paper.form-hand, #intel-reader .ir-paper.form-letter {
--line: calc(var(--rd) * 2.5);
font: 400 calc(var(--rd) * 1.28) / var(--line) var(--hand);
color: var(--ink-hand);
background:
radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(110, 82, 40, .16)),
linear-gradient(90deg, transparent calc(46 * var(--mu)), rgba(190, 60, 60, .35) calc(46 * var(--mu)) calc(47.5 * var(--mu)), transparent calc(47.5 * var(--mu))),
#ece6d6;
padding-left: calc(68 * var(--mu));
transform: rotate(.6deg);
}
/* the rules sit under each line of writing: same unit for every block */
#intel-reader .form-hand .ir-body, #intel-reader .form-letter .ir-body {
background: repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), rgba(60, 90, 150, .24) calc(var(--line) - 1px) var(--line));
margin-right: calc(-20 * var(--mu));
padding-right: calc(20 * var(--mu));
}
#intel-reader .form-hand .ir-body > *, #intel-reader .form-letter .ir-body > * { line-height: var(--line); margin-top: 0; }
#intel-reader .form-hand .ir-body td, #intel-reader .form-hand .ir-body th { line-height: var(--line); padding-top: 0; padding-bottom: 0; }
#intel-reader .b-formline { font-size: .9em; }
#intel-reader .form-hand .b-formhead { font: 700 calc(var(--rd) * .86) / var(--line) var(--font-mono); color: var(--ink); letter-spacing: .08em; border-bottom: 0; padding: 0; }
#intel-reader .b-log { border-collapse: collapse; width: 100%; }
#intel-reader .b-log th { font-weight: 400; text-align: left; vertical-align: top; width: 3.6em; padding-right: .6em; white-space: nowrap; }
#intel-reader .b-log td { vertical-align: top; }
#intel-reader .b-log tr:nth-child(odd) td { transform: rotate(-.25deg); }
#intel-reader .b-log tr.cut th { color: var(--ink-hand); }
#intel-reader .b-trail { color: var(--ink-hand); height: var(--line, 2.4em); opacity: .9; }
/* the stroke runs on from 04:2, on the same line, off the edge of the entry */
#intel-reader .form-hand .ir-body > .b-trail { margin: calc(var(--line) * -.78) 0 0 2.6em; }
#intel-reader .b-trail svg { width: 100%; height: 100%; display: block; }
/* the posted notice */
#intel-reader .ir-paper.form-notice { padding-top: 0; background: var(--paper); }
#intel-reader .b-banner {
margin: 0 calc(-56 * var(--mu)) 1.2em; padding: .7em 1em;
background: #8c2018; color: #f3ead6; text-align: center;
font: 700 calc(var(--rd) * 1.25) / 1 var(--font-display); letter-spacing: .24em;
}
#intel-reader .b-title { text-align: center; }
#intel-reader .b-title .t { display: block; font: 700 calc(var(--rd) * 2.3) / 1 var(--font-display); letter-spacing: .08em; }
#intel-reader .b-title .s { display: block; margin-top: .45em; font-size: .82em; letter-spacing: .06em; opacity: .85; }
#intel-reader .b-h { font-weight: 700; letter-spacing: .06em; }
#intel-reader .form-notice .b-list { list-style: square; }
#intel-reader .b-box { border: 2px solid currentColor; padding: .7em .9em; font-weight: 700; }
#intel-reader .b-initials { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1em; font-size: .9em; }
#intel-reader .b-initials .lbl { width: 100%; }
#intel-reader .b-initials .ini { font: 400 1.45em/1 var(--hand); color: var(--ink-hand); min-width: 2.6em; border-bottom: 1px solid rgba(29, 31, 34, .5); text-align: center; }
#intel-reader .b-initials .ini.blank { min-width: 3.4em; }
#intel-reader .b-foot { font-size: .86em; font-style: italic; opacity: .8; text-align: right; }
/* the teleprinter strip */
#intel-reader .ir-paper.form-teleprinter {
width: min(500px, 100%);
padding: calc(34 * var(--mu)) calc(30 * var(--mu)) calc(40 * var(--mu)) calc(44 * var(--mu));
font: 600 calc(var(--rd) * .92) / 1.85 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #262a33;
background:
radial-gradient(circle at calc(16 * var(--mu)) 50%, rgba(10, 10, 10, .55) 0 calc(3.2 * var(--mu)), transparent calc(3.6 * var(--mu))) 0 0 / 100% calc(22 * var(--mu)) repeat-y,
linear-gradient(90deg, transparent calc(30 * var(--mu)), rgba(160, 40, 40, .28) calc(30 * var(--mu)) calc(31 * var(--mu)), transparent calc(31 * var(--mu))),
#efe8d2;
transform: rotate(-1.2deg);
}
#intel-reader .b-strip .tl:nth-child(3n) { opacity: .78; }
#intel-reader .b-strip .tl:nth-child(5n+2) { text-shadow: .5px 0 0 rgba(38, 42, 51, .5); }
#intel-reader .b-strip .tl:nth-last-child(-n+2) { opacity: .55; letter-spacing: .14em; }
/* fan-fold access-control printout */
#intel-reader .ir-paper.form-printout {
width: min(760px, 100%);
padding: calc(40 * var(--mu)) calc(58 * var(--mu)) calc(44 * var(--mu));
font: 600 calc(var(--rd) * .86) / 1.9 var(--font-mono); color: #23272b;
background:
radial-gradient(circle, rgba(20, 20, 20, .5) 0 calc(4 * var(--mu)), transparent calc(4.4 * var(--mu))) left calc(14 * var(--mu)) top 0 / calc(14 * var(--mu)) calc(24 * var(--mu)) repeat-y,
radial-gradient(circle, rgba(20, 20, 20, .5) 0 calc(4 * var(--mu)), transparent calc(4.4 * var(--mu))) right calc(14 * var(--mu)) top 0 / calc(14 * var(--mu)) calc(24 * var(--mu)) repeat-y,
repeating-linear-gradient(180deg, rgba(120, 175, 130, .2) 0 3.8em, transparent 3.8em 7.6em),
#ebe8dc;
background-position: calc(10 * var(--mu)) 0, calc(100% - 10 * var(--mu)) 0, 0 calc(40 * var(--mu)), 0 0;
transform: rotate(.35deg);
}
#intel-reader .form-printout .b-table td, #intel-reader .form-printout .b-table th { padding-right: 1.1em; white-space: nowrap; }
#intel-reader .form-printout .b-table tr:nth-last-child(-n+4) td { color: #7a1c14; }
#intel-reader .form-printout .ir-body { overflow-x: auto; }
#intel-reader .b-printfoot { letter-spacing: .1em; text-align: center; opacity: .8; }
/* the letter home */
#intel-reader .ir-paper.form-letter { width: min(620px, 100%); transform: rotate(-.9deg); }
#intel-reader .b-salute { font-size: 1.1em; }
#intel-reader .b-close { text-align: right; margin-top: .3em; }
/* the electrician's fault slip, taped up */
#intel-reader .ir-paper.form-memo { background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(110, 82, 40, .26)), #e3d9bd; transform: rotate(.8deg); }
#intel-reader .form-memo::after, #intel-reader .form-memo .ir-body::before {
content: ""; position: absolute; top: calc(-10 * var(--mu)); width: calc(110 * var(--mu)); height: calc(30 * var(--mu));
background: rgba(222, 205, 140, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); pointer-events: none;
}
#intel-reader .form-memo::after { left: calc(40 * var(--mu)); transform: rotate(-4deg); }
#intel-reader .form-memo .ir-body::before { right: calc(170 * var(--mu)); transform: rotate(5deg); }
#intel-reader .form-memo .ir-body { position: static; }
/* the programme directive */
#intel-reader .ir-paper.form-directive { background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(60, 50, 30, .12)), #f1eee6; transform: rotate(-.3deg); }
#intel-reader .b-classbar {
margin: 0 calc(-56 * var(--mu)); padding: .45em 1em; text-align: center;
font: 700 calc(var(--rd) * .9) / 1 var(--font-mono); letter-spacing: .28em;
color: #fff3ea; background: #9c1f16;
}
#intel-reader .form-directive .b-classbar:first-child { margin-top: calc(-26 * var(--mu)); }
#intel-reader .form-directive .b-classbar:last-child { margin-bottom: calc(-30 * var(--mu)); margin-top: 1.6em; }
/* rubber stamps: inked, rotated, a little broken */
#intel-reader .ir-stamp {
--r: 0deg;
position: absolute; z-index: 2; pointer-events: none;
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
padding: .2em .55em .25em;
border: calc(3 * var(--mu)) double currentColor; border-radius: 4px;
font: 700 calc(var(--rd) * 1.15) / 1.05 var(--font-display); letter-spacing: .14em; text-align: center; text-transform: uppercase;
opacity: .78; mix-blend-mode: multiply;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
#intel-reader .ir-stamp.ink-red { color: var(--ink-red); }
#intel-reader .ir-stamp.ink-blue { color: var(--ink-blue); }
/* -------------------------------------------------------------------- tape */
#intel-reader .ir-tape {
box-sizing: border-box; width: min(900px, 100%); margin: 0 auto;
padding: calc(26 * var(--mu)) calc(28 * var(--mu)) calc(22 * var(--mu));
background: var(--brackets, none), linear-gradient(180deg, rgba(22, 26, 31, .92), rgba(11, 13, 16, .96));
border: 1px solid var(--hair, rgba(240, 232, 214, .11)); border-radius: 10px;
box-shadow: var(--lift, 0 30px 90px rgba(0, 0, 0, .55)), inset 0 1px 0 rgba(255, 248, 232, .07);
}
#intel-reader .tape-top { display: flex; gap: calc(26 * var(--mu)); align-items: center; }
#intel-reader .tape-cassette { flex: 0 0 auto; width: min(300px, 38%); }
#intel-reader .tape-cassette svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
#intel-reader .cass-label { font: italic 400 22px var(--hand); fill: #22252a; }
#intel-reader .cass-sub { font: 600 10px var(--font-mono); letter-spacing: .14em; fill: #4a4c50; }
#intel-reader .tape-info { display: flex; flex-direction: column; gap: calc(6 * var(--mu)); min-width: 0; }
#intel-reader .tape-speaker { font: 700 calc(26 * var(--mu)) / 1.05 var(--font-display); letter-spacing: .05em; color: var(--ink-0, #f6f0e4); text-transform: uppercase; }
#intel-reader .tape-src { font: 500 calc(13 * var(--mu)) / 1.4 var(--font-ui); color: var(--ink-1, #c9c1b1); }
#intel-reader .tape-clock { font: 600 calc(14 * var(--mu)) / 1 var(--font-mono); letter-spacing: .12em; color: var(--ink-2, #8f897c); }
#intel-reader .tape-clock b { color: var(--ink-0, #f6f0e4); font-weight: 600; }
#intel-reader .tape-status {
display: inline-flex; align-items: center; gap: .6em; align-self: flex-start;
font: 600 calc(11 * var(--mu)) / 1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ember, #f08a4c);
}
#intel-reader .tape-status::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: #3a1410; box-shadow: inset 0 0 0 1px rgba(255, 90, 60, .4); }
#intel-reader .ir-tape[data-state="playing"] .tape-status::before { background: #ff3b24; box-shadow: 0 0 10px rgba(255, 59, 36, .8); }
#intel-reader .ir-tape[data-state="queued"] .tape-status { color: var(--ink-2, #8f897c); }
#intel-reader .tape-wave {
display: block; width: 100%; height: calc(64 * var(--mu)); margin: calc(20 * var(--mu)) 0 calc(14 * var(--mu));
border-top: 1px solid var(--hair, rgba(240, 232, 214, .11)); border-bottom: 1px solid var(--hair, rgba(240, 232, 214, .11));
}
#intel-reader .tape-lines {
list-style: none; margin: 0; padding: 0; max-height: 38vh; overflow: auto;
font: 500 calc(18 * var(--mu)) / 1.5 var(--font-ui); color: var(--ink-0, #f6f0e4);
}
#intel-reader .tape-lines li { padding: .32em 0 .32em 1em; border-left: 2px solid transparent; transition: opacity .35s, border-color .35s, color .35s; }
#intel-reader .tape-lines li.ahead { opacity: .3; }
#intel-reader .tape-lines li.past { opacity: .62; }
#intel-reader .tape-lines li.now { opacity: 1; border-left-color: var(--ember, #f08a4c); color: #fff8ea; }
html.reduce-motion #intel-reader .tape-lines li { transition: none; }
/* ------------------------------------------------- co-op: a compact panel */
/* The world keeps running in co-op, so the reader becomes a panel at the
side and leaves the centre of the screen — and the player's view — free. */
#intel-reader.compact { background: none; pointer-events: none; justify-content: center; align-items: flex-end; }
#intel-reader.compact .ir-shell {
pointer-events: auto;
width: min(460px, 42vw); height: min(76vh, 680px);
margin-right: max(calc(18 * var(--mu)), env(safe-area-inset-right, 0px));
grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
padding: calc(14 * var(--mu)) calc(14 * var(--mu)) calc(12 * var(--mu));
background: var(--brackets, none), linear-gradient(180deg, rgba(14, 16, 20, .9), rgba(8, 9, 12, .94));
border: 1px solid var(--hair, rgba(240, 232, 214, .11)); border-radius: 10px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
#intel-reader.compact .ir-head, #intel-reader.compact .ir-stage, #intel-reader.compact .ir-foot { grid-column: 1; grid-row: auto; padding-bottom: 0; }
#intel-reader.compact .ir-stage { padding-top: calc(14 * var(--mu)); }
#intel-reader.compact .ir-title { font-size: calc(24 * var(--mu)); }
#intel-reader.compact .ir-meta { font-size: calc(11.5 * var(--mu)); }
#intel-reader.compact .ir-count { width: auto; margin: 0 auto 0 0; }
#intel-reader.compact { --rd: calc(13 * var(--mu, 1px)); }
#intel-reader.compact .ir-paper { padding: calc(30 * var(--mu)) calc(26 * var(--mu)) calc(30 * var(--mu)); }
#intel-reader.compact .ir-paper.form-hand, #intel-reader.compact .ir-paper.form-letter { padding-left: calc(48 * var(--mu)); }
#intel-reader.compact .b-banner, #intel-reader.compact .b-classbar { margin-left: calc(-26 * var(--mu)); margin-right: calc(-26 * var(--mu)); }
#intel-reader.compact .tape-top { flex-direction: column; align-items: flex-start; gap: calc(10 * var(--mu)); }
#intel-reader.compact .tape-cassette { width: min(220px, 70%); }
#intel-reader.compact .ir-tape { padding: calc(16 * var(--mu)); }
html.is-touch #intel-reader.compact { align-items: flex-start; }
/* the panel says INTEL RECOVERED itself; the HUD toast waits until it closes */
html.intel-compact #hud #intel-toast { visibility: hidden; }
html.is-touch #intel-reader.compact .ir-shell { margin: 0 0 0 max(10px, env(safe-area-inset-left, 0px)); width: min(400px, 46vw); height: min(84vh, 560px); }
/* --------------------------------------------- short screens and phones */
@media (max-height: 520px) {
#intel-reader .ir-shell { gap: 6px; padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
#intel-reader .ir-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 0; }
#intel-reader .ir-head::after { display: none; }
#intel-reader .ir-title { font-size: 22px; }
#intel-reader .ir-kicker { font-size: 10px; letter-spacing: .22em; order: 2; }
#intel-reader .ir-meta { display: none; }
#intel-reader .ir-stage { padding-top: 22px; padding-bottom: 12px; }
#intel-reader .ir-foot .pbtn { min-width: 0; padding-inline: 18px; }
#intel-reader { --rd: 13.5px; }
#intel-reader .ir-paper { padding: 26px 24px 30px; }
#intel-reader .ir-paper.form-hand, #intel-reader .ir-paper.form-letter { padding-left: 40px; background-position: 0 0, -18px 0, 0 0; }
#intel-reader .b-banner, #intel-reader .b-classbar { margin-left: -24px; margin-right: -24px; }
#intel-reader .form-directive .b-classbar:first-child { margin-top: -10px; }
#intel-reader .tape-cassette { width: min(190px, 30%); }
#intel-reader .tape-speaker { font-size: 18px; }
#intel-reader .tape-wave { height: 40px; margin: 10px 0 8px; }
#intel-reader .tape-lines { font-size: 14px; max-height: none; }
#intel-reader .ir-tape { padding: 14px 16px; }
#intel-reader.compact .ir-shell { height: 92vh; }
}
@media (max-width: 560px) {
#intel-reader { --rd: 13px; }
#intel-reader .ir-paper { padding: 30px 20px 34px; }
#intel-reader .ir-paper.form-hand, #intel-reader .ir-paper.form-letter { padding-left: 34px; background-position: 0 0, -26px 0, 0 0; }
#intel-reader .b-banner, #intel-reader .b-classbar { margin-left: -20px; margin-right: -20px; }
#intel-reader .tape-top { flex-direction: column; align-items: flex-start; }
#intel-reader .tape-cassette { width: 70%; }
#intel-reader .b-kv { grid-template-columns: 1fr; }
}
/* The archive is a frame screen now: its rows and detail pane are in
frontend.css. */
/* The Field Report line for Containment Files (afterActionDossier.js), in the
dossier palette with the archive ember. */
#after-action-dossier .dossier-intel { color: var(--ember-hot, #ffae78); font-weight: 600; }