/* Dead End props: shared styles. Screen = a terminal on a dark desk; print = one page per .sheet.
   Technique and print rules follow the Canticle vault's _meta/Printable_Props_Guide.md.

   HAND AND TYPE REGISTRY (one look per in-fiction writer or machine; reuse, never restyle)
   .term           VT323, phosphor green      Any shipboard or personal terminal / datapad output
   .chrome         Share Tech Mono            Terminal furniture: status bars, sheet counters
   .six-hand       Permanent Marker, caps     Six writing by hand: block capitals, marker pressure
   .form           Share Tech Mono on stock   Corporate hardcopy; --accent is the issuing body's colour
   .kumari-hand    Reenie Beanie, ballpoint   Kumari Profeta writing by hand: fast, hard, pressed in
   .lavey-hand     Covered By Your Grace      Rock Lavey writing by hand: a clinician's quick clean notes; .hard = the same hand pressing hard

   The pages are generated by _meta/tooling/props/build_props.py from each handout note.
*/
:root { --phos: #a8ffbf; --phos-dim: #4fae6c; --phos-deep: #0f3a22; --tube: #020a06; --amber: #ffcf7a; --paper: #eeeee4; --ink: #1b1f1c; }
* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0%, #10161a 0%, #05070a 60%, #020304 100%); color: #c9d4cf;
  font-family: 'Share Tech Mono', ui-monospace, Menlo, monospace; }
.ribbon { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto; padding: 1rem 16px 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ribbon a { color: var(--phos-dim); text-decoration: none; }
.ribbon a:hover { color: var(--phos); }
.ribbon .plate { color: rgba(255,207,122,0.75); }
.ribbon button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--phos); background: rgba(168,255,191,0.06);
  border: 1px solid rgba(168,255,191,0.4); padding: 0.35em 0.8em; cursor: pointer; }
.ribbon button:hover { background: rgba(168,255,191,0.16); }
.ribbon button:focus-visible, .ribbon a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.credits { max-width: 880px; margin: 0.4rem auto 3rem; padding: 0 16px; font-size: 0.75rem; color: rgba(201,212,207,0.5); line-height: 1.5; }

/* The sheet: one physical page. Letter-proportioned on screen, the page box in print. */
.sheet { position: relative; width: min(880px, calc(100vw - 32px)); aspect-ratio: 8.5 / 11; margin: 1.2rem auto 2.2rem; overflow: hidden;
  container-type: inline-size; }

/* Terminal: a tube behind glass. Curved corners, bloom, scanlines, a slow roll bar. */
.term { background: radial-gradient(ellipse at 50% 45%, #06180e 0%, var(--tube) 62%, #010402 100%); color: var(--phos);
  border-radius: 2.2cqw; box-shadow: 0 0 0 0.9cqw #0b0e10, 0 0 0 1.1cqw #1c2226, 0 2cqw 6cqw rgba(0,0,0,0.8), inset 0 0 9cqw rgba(0,0,0,0.9);
  font-family: 'VT323', ui-monospace, monospace; text-transform: uppercase; }
.term::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.28) 3px, rgba(0,0,0,0) 4px); }
.term::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; top: -20%; pointer-events: none; z-index: 4;
  background: linear-gradient(to bottom, rgba(168,255,191,0), rgba(168,255,191,0.055), rgba(168,255,191,0)); animation: roll 7s linear infinite; }
@keyframes roll { to { top: 110%; } }
.term .chrome { position: absolute; left: 3.2cqw; right: 3.2cqw; display: flex; justify-content: space-between; align-items: center; gap: 1cqw;
  font-family: 'Share Tech Mono', monospace; font-size: 1.45cqw; letter-spacing: 0.14em; color: var(--phos-dim); z-index: 2; }
.term .chrome.top { top: 2.6cqw; padding-bottom: 1cqw; border-bottom: 0.18cqw solid var(--phos-deep); }
.term .chrome.bottom { bottom: 2.4cqw; padding-top: 1cqw; border-top: 0.18cqw solid var(--phos-deep); }
.term .chrome b { font-weight: 400; color: var(--tube); background: var(--phos-dim); padding: 0.1em 0.6em; }
.term .chrome .amber { color: var(--amber); }
.tiles { display: flex; gap: 0.5cqw; }
.tiles i { width: 1.7cqw; height: 1.7cqw; border: 0.16cqw solid var(--phos-dim); display: block; }
.tiles i:nth-child(1) { background: var(--phos-dim); }
.tiles i:nth-child(2) { background: linear-gradient(135deg, var(--phos-dim) 50%, transparent 50%); }
.tiles i:nth-child(3) { background: radial-gradient(circle, var(--amber) 34%, transparent 38%); border-color: var(--amber); }
.tiles i:nth-child(4) { background: repeating-linear-gradient(90deg, var(--phos-dim) 0 0.3cqw, transparent 0.3cqw 0.6cqw); }
pre.msg { position: absolute; top: 8cqw; left: 6cqw; right: 3cqw; margin: 0; z-index: 2;
  font: inherit; font-size: 2.42cqw; line-height: 1.07; white-space: pre; letter-spacing: 0.02em;
  text-shadow: 0 0 0.35cqw rgba(168,255,191,0.75), 0 0 1.4cqw rgba(80,255,140,0.35); }
pre.msg .hd { color: #eafff0; }
.cursor { display: inline-block; width: 0.62em; height: 0.92em; background: var(--phos); vertical-align: -0.12em; margin-left: 0.4em;
  box-shadow: 0 0 1cqw rgba(168,255,191,0.8); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term::after, .cursor { animation: none; } }

/* Printout mode: the same file on thermal stock. Block type, no margins to speak of. */
body.paper .term { background: linear-gradient(180deg, #f3f3ea, var(--paper)); color: var(--ink); border-radius: 0;
  box-shadow: 0 1.2cqw 4cqw rgba(0,0,0,0.7); }
body.paper .term::before { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 5px, rgba(20,40,30,0.035) 6px); }
body.paper .term::after { display: none; }
body.paper pre.msg { text-shadow: none; top: 6.4cqw; left: 2.4cqw; font-size: 2.5cqw; }
body.paper pre.msg .hd { color: var(--ink); }
body.paper .term .chrome { color: #5c635f; left: 2.4cqw; right: 2.4cqw; }
body.paper .term .chrome.top, body.paper .term .chrome.bottom { border-color: #b9bcb2; }
body.paper .term .chrome b { background: #2a2f2c; color: var(--paper); }
body.paper .term .chrome .amber { color: #7a5a1c; }
body.paper .tiles i { border-color: #5c635f; }
body.paper .tiles i:nth-child(1) { background: #5c635f; }
body.paper .tiles i:nth-child(2) { background: linear-gradient(135deg, #5c635f 50%, transparent 50%); }
body.paper .tiles i:nth-child(3) { background: radial-gradient(circle, #7a5a1c 34%, transparent 38%); border-color: #7a5a1c; }
body.paper .tiles i:nth-child(4) { background: repeating-linear-gradient(90deg, #5c635f 0 0.3cqw, transparent 0.3cqw 0.6cqw); }
body.paper .cursor { display: none; }

/* The envelope: a physical thing, so it looks the same in both modes. */
.desk { background: radial-gradient(ellipse at 40% 30%, #1a2024 0%, #0a0d10 70%); border-radius: 0.6cqw; display: grid; place-items: center; }
.envelope { position: relative; width: 84%; aspect-ratio: 22 / 11; transform: rotate(-1.4deg);
  background: linear-gradient(160deg, #d9d6c7 0%, #c9c5b3 55%, #bdb8a4 100%); box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.75), inset 0 0 6cqw rgba(60,50,30,0.22);
  border-radius: 0.5cqw; overflow: hidden; }
.envelope::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to bottom, transparent 49.7%, rgba(60,50,30,0.14) 50%, transparent 50.3%),
  radial-gradient(ellipse at 78% 82%, rgba(70,55,30,0.16), transparent 42%), radial-gradient(ellipse at 12% 18%, rgba(70,55,30,0.12), transparent 36%); }
.six-hand { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-56%) rotate(-3.2deg); text-align: center;
  font-family: 'Permanent Marker', 'Arial Black', sans-serif; font-size: 12.6cqw; letter-spacing: 0.02em; line-height: 1; color: #141516;
  text-shadow: 0.06cqw 0.08cqw 0 rgba(20,21,22,0.5); }
.frank { position: absolute; top: 6%; right: 4%; padding: 0.7cqw 1.1cqw; border: 0.22cqw solid rgba(40,60,50,0.7); color: rgba(40,60,50,0.8);
  font-family: 'Share Tech Mono', monospace; font-size: 1.5cqw; letter-spacing: 0.16em; text-align: center; line-height: 1.35; transform: rotate(1.5deg); }
.frank strong { display: block; font-weight: 400; font-size: 2.6cqw; letter-spacing: 0.08em; }
.bars { position: absolute; bottom: 7%; left: 5%; width: 26%; height: 3.4cqw; opacity: 0.7;
  background: repeating-linear-gradient(90deg, #26302b 0 0.22cqw, transparent 0.22cqw 0.5cqw, #26302b 0.5cqw 0.6cqw, transparent 0.6cqw 1.15cqw, #26302b 1.15cqw 1.6cqw, transparent 1.6cqw 1.9cqw); }

/* Corporate hardcopy: pale stock, one accent per issuing body, filing furniture in the margins.
   The text is the note's own block in one <pre>; letterhead and fine print are only styled. */
.form { --accent: #3d4a52; --stock: #e4e4d8; --type: #1d2326; color: var(--type);
  background: radial-gradient(ellipse at 22% 12%, rgba(255,255,255,0.5), transparent 46%), radial-gradient(ellipse at 84% 92%, rgba(90,80,50,0.16), transparent 50%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 3px, rgba(40,50,45,0.022) 4px), var(--stock);
  box-shadow: 0 1.2cqw 4cqw rgba(0,0,0,0.7); }
.form .bar { position: absolute; top: 0; bottom: 0; left: 0; width: 5.2cqw; background: var(--accent); }
.form .bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 6.1cqw; width: 0.35cqw; background: var(--accent); opacity: 0.55; }
.form .holes { position: absolute; left: 9.6cqw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 18cqw 0; }
.form .holes i { display: block; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #0a0d10; box-shadow: inset 0 0.25cqw 0.5cqw rgba(0,0,0,0.9), 0 0 0 0.16cqw rgba(0,0,0,0.12); }
.form .reg { position: absolute; width: 3cqw; height: 3cqw; opacity: 0.55;
  background: linear-gradient(var(--type), var(--type)) 50% 0 / 0.14cqw 100% no-repeat, linear-gradient(var(--type), var(--type)) 0 50% / 100% 0.14cqw no-repeat,
    radial-gradient(circle, transparent 0.72cqw, var(--type) 0.74cqw, var(--type) 0.88cqw, transparent 0.9cqw); }
.form .reg.tl { top: 2.6cqw; left: 15cqw; } .form .reg.tr { top: 2.6cqw; right: 3cqw; }
.form .reg.bl { bottom: 2.6cqw; left: 15cqw; } .form .reg.br { bottom: 2.6cqw; right: 3cqw; }
pre.doc { position: absolute; top: 8.4cqw; left: 20cqw; right: 6cqw; margin: 0; font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: min(2.16cqw, calc(108cqw / var(--lines, 40) / 1.2)); line-height: 1.2; white-space: pre-wrap; letter-spacing: 0.01em; }
pre.doc .lh { color: var(--accent); letter-spacing: 0.06em; }
pre.doc .lh1 { font-size: 1.32em; line-height: 1.25; letter-spacing: 0.02em; color: var(--type); text-shadow: 0.05cqw 0 0 var(--type); }
pre.doc .rule { color: var(--accent); letter-spacing: 0; }
pre.doc .sec { color: var(--stock); background: var(--accent); padding: 0.08em 0.5em 0.04em; margin-left: -0.5em; letter-spacing: 0.08em; }
pre.doc .key { color: var(--accent); }
pre.doc .fine { font-size: 0.86em; color: rgba(29,35,38,0.72); }
.form .stamp { position: absolute; bottom: 9.2cqw; right: 5.5cqw; transform: rotate(-11deg); padding: 0.5cqw 1.6cqw 0.3cqw; border: 0.5cqw double rgba(150,30,30,0.72);
  font-family: 'Share Tech Mono', monospace; font-size: 3.6cqw; letter-spacing: 0.2em; color: rgba(150,30,30,0.72); mix-blend-mode: multiply;
  -webkit-mask-image: repeating-linear-gradient(115deg, #000 0 0.9cqw, rgba(0,0,0,0.55) 0.9cqw 1.05cqw, #000 1.05cqw 2.3cqw, rgba(0,0,0,0.75) 2.3cqw 2.6cqw);
  mask-image: repeating-linear-gradient(115deg, #000 0 0.9cqw, rgba(0,0,0,0.55) 0.9cqw 1.05cqw, #000 1.05cqw 2.3cqw, rgba(0,0,0,0.75) 2.3cqw 2.6cqw); }
.form .tally { position: absolute; bottom: 3.4cqw; left: 20cqw; right: 8cqw; display: flex; justify-content: space-between; align-items: flex-end;
  font-family: 'Share Tech Mono', monospace; font-size: 1.3cqw; letter-spacing: 0.16em; color: rgba(29,35,38,0.6); }
.form .barcode { display: block; width: 26cqw; height: 3.6cqw; opacity: 0.8;
  background: repeating-linear-gradient(90deg, var(--type) 0 0.22cqw, transparent 0.22cqw 0.5cqw, var(--type) 0.5cqw 0.6cqw, transparent 0.6cqw 1.15cqw, var(--type) 1.15cqw 1.6cqw, transparent 1.6cqw 1.9cqw, var(--type) 1.9cqw 2cqw, transparent 2cqw 2.7cqw); }

/* Handwritten scrap: real paper on the dark desk, folded in nine, carried a long time. */
.scrap { position: relative; width: 80%; padding: 6.5cqw 5cqw 6cqw 6cqw; transform: rotate(-1.3deg);
  background: linear-gradient(170deg, #e9e3cf 0%, #ddd5bd 60%, #d2c9ae 100%);
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.75), inset 0 0 7cqw rgba(80,60,25,0.2);
  clip-path: polygon(0.4% 0.8%, 31% 0, 64% 0.5%, 99.4% 0, 100% 34%, 99.3% 67%, 100% 99.4%, 66% 100%, 33% 99.2%, 0 100%, 0.7% 66%, 0 33%); }
.scrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to right, transparent 33%, rgba(70,55,25,0.2) 33.2%, rgba(255,255,255,0.3) 33.5%, transparent 33.9%, transparent 66.2%, rgba(70,55,25,0.2) 66.4%, rgba(255,255,255,0.3) 66.7%, transparent 67.1%),
  linear-gradient(to bottom, transparent 33%, rgba(70,55,25,0.22) 33.15%, rgba(255,255,255,0.3) 33.4%, transparent 33.7%, transparent 66.3%, rgba(70,55,25,0.22) 66.45%, rgba(255,255,255,0.3) 66.7%, transparent 67%),
  radial-gradient(ellipse at 84% 12%, rgba(90,65,25,0.18), transparent 38%), radial-gradient(ellipse at 10% 88%, rgba(90,65,25,0.2), transparent 40%); }
pre.hand { position: relative; margin: 0; white-space: pre-wrap; }
.kumari-hand { font-family: 'Reenie Beanie', 'Bradley Hand', cursive; font-size: 3.2cqw; line-height: 1.16; letter-spacing: 0.01em; color: #14203a;
  transform: rotate(-0.7deg); text-shadow: 0 0.09cqw 0 rgba(255,255,255,0.55), 0.03cqw 0 0 #14203a, 0 -0.04cqw 0.05cqw rgba(10,14,30,0.35); }

.lavey-hand { font-family: 'Covered By Your Grace', 'Bradley Hand', cursive; font-size: 2.95cqw; line-height: 3.7cqw; letter-spacing: 0.01em; color: #1a1d22; text-shadow: 0 0.08cqw 0 rgba(255,255,255,0.5), 0 -0.03cqw 0.05cqw rgba(10,12,16,0.3); }
.lavey-hand .hard { color: #08090c; text-shadow: 0.05cqw 0 0 #08090c, -0.03cqw 0.03cqw 0 #08090c, 0 0.12cqw 0 rgba(255,255,255,0.6), 0 -0.06cqw 0.08cqw rgba(0,0,0,0.5); }
.scrap.chart { background: repeating-linear-gradient(to bottom, transparent 0, transparent 3.56cqw, rgba(60,110,120,0.3) 3.56cqw, rgba(60,110,120,0.3) 3.7cqw),
  linear-gradient(to right, transparent 9.2cqw, rgba(170,60,60,0.35) 9.2cqw, rgba(170,60,60,0.35) 9.4cqw, transparent 9.4cqw),
  linear-gradient(170deg, #eceadd 0%, #e2dfcf 60%, #d6d2bf 100%); background-position: 0 2.3cqw, 0 0, 0 0; padding-left: 11.5cqw; width: 88%; }

/* The shelf (index.html). */
.shelf-page h1 { max-width: 760px; margin: 3rem auto 0.4rem; padding: 0 16px; font-family: 'VT323', monospace; font-weight: 400; font-size: 2.4rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--phos); text-shadow: 0 0 12px rgba(80,255,140,0.35); }
.shelf-page .lede { max-width: 760px; margin: 0 auto; padding: 0 16px; color: rgba(201,212,207,0.65); font-size: 0.9rem; line-height: 1.6; }
.shelf-group { max-width: 760px; margin: 2.2rem auto 0; padding: 0 16px 0.4rem; font-family: 'Share Tech Mono', monospace; font-weight: 400; font-size: 0.85rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
.shelf-group::after { content: ""; display: block; margin-top: 0.5rem; border-bottom: 1px solid rgba(255,207,122,0.35); }
.shelf { max-width: 760px; margin: 0.9rem auto 1.6rem; padding: 0 16px; list-style: none; }
.shelf li { margin-bottom: 1rem; }
.shelf a { display: block; padding: 1rem 1.2rem; background: rgba(168,255,191,0.05); border: 1px solid rgba(168,255,191,0.3); text-decoration: none; }
.shelf a:hover, .shelf a:focus-visible { background: rgba(168,255,191,0.12); outline: none; border-color: var(--amber); }
.shelf .t { display: block; font-family: 'VT323', monospace; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phos); }
.shelf .s { display: block; color: rgba(201,212,207,0.65); font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.5; }

/* Print: paper-agnostic. In print media 100vh is the page box, so a sheet fills Letter or A4. */
@page { size: auto; margin: 0; }
@media print {
  body { background: none; }
  .ribbon, .credits { display: none; }
  .sheet { width: 100vw; height: 99.2vh; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .sheet:last-of-type { page-break-after: auto; break-after: auto; }
  .term::after, .cursor { animation: none; }
  .term::after { display: none; }
  .desk { border-radius: 0; }
  .form { box-shadow: none; }
  .scrapdesk { background: none; }
  .scrap { box-shadow: none; outline: 1px dashed rgba(0,0,0,0.25); }
}