/* The interference report (area events and clusters) as a printed A4 dossier and a web page of the same pages.
 * Hard brutalist, after anopticon-site/docs/DESIGN.md, inverted for paper (white ground, black ink, so a printed copy spends ink only on
 * the findings), one International Orange accent at a time,
 * Big Shoulders Stencil for the headline, Big Shoulders Display for section heads, IBM Plex Sans for words, Martian Mono for
 * labels and numbers. Scripts: scripts/interference.js. Data: report-data.json["dossier"] (scripts/interference_dossier.py).
 * Everything is scoped to .ds so the older report layouts (report.css) on the same pages are untouched.
 */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../assets/fonts/big-shoulders-display-700.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Stencil Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/big-shoulders-stencil-display-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/martian-mono-400.woff2") format("woff2"); }

html.dossier-mode { background: #FFFFFF; }
html.dossier-mode body { background: #FFFFFF; color: #0A0A0A; margin: 0; }
html.dossier-mode .report-screen { display: none; }

.ds {
  --ground: #FFFFFF; --ink: #0A0A0A; --dim: #5E5A55; --line: #D9D6D0; --orange: #FF4F00;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", Impact, sans-serif;
  --display: "Big Shoulders Display", Impact, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;
  --s: 1; --mx: 16mm;
  display: block; color: var(--ink); font: 400 10pt/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
:where(.ds) :is(h1, h2, h3, p, dl, dd, dt, ul, figure, table) { margin: 0; padding: 0; }
:where(.ds) a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:where(.ds) ul { list-style: none; }

/* ---------- the bar above the pages (never printed) ---------- */
html.dossier-mode .rp-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; padding: 0.7rem max(16px, 3vw);
  background: #FFFFFF; border-bottom: 1px solid #D9D6D0; backdrop-filter: none; font: 400 12px/1.3 "Martian Mono", ui-monospace, monospace; letter-spacing: 0.02em; }
html.dossier-mode .rp-bar__back { color: #0A0A0A; text-decoration: none; }
html.dossier-mode .rp-bar__back:hover { color: #FF4F00; }
html.dossier-mode .rp-bar__grow { flex: 1 1 auto; }
/* the report's own links sit in boxes the size of the PDF button, one row of actions: outlined, then the one solid */
html.dossier-mode .rp-bar__links { display: flex; flex-wrap: wrap; gap: 6px; }
html.dossier-mode .rp-bar .link { display: inline-flex; align-items: center; padding: 0.55rem 0.9rem; border: 1px solid #0A0A0A; color: #0A0A0A; text-decoration: none;
  font: 600 11px/1 "Martian Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
html.dossier-mode .rp-bar .link:hover { border-color: #FF4F00; color: #FF4F00; }
html.dossier-mode .rp-bar .btn { background: #FF4F00; color: #FFFFFF; border: 0; border-radius: 0; padding: 0.55rem 1rem; font: 600 11px/1 "Martian Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transform: none; }
html.dossier-mode .rp-bar .btn:hover { background: #0A0A0A; }
html.dossier-mode .rp-bar .btn { flex: none; white-space: nowrap; }   /* Download PDF stays on the bar line at laptop widths */
html.dossier-mode .rp-bar .btn:disabled { background: #D9D6D0; color: #5E5A55; }

/* ---------- the pages ---------- */
.ds-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 0 64px; zoom: var(--s); }
.ds-page { position: relative; width: 210mm; height: 296mm; flex: none; overflow: hidden; background: var(--ground); border: 1px solid var(--line);
  display: flex; flex-direction: column; }
.ds-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8mm; height: 15mm; padding: 0 var(--mx); border-bottom: 1px solid var(--line);
  font: 400 6.5pt/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ds-head svg { height: 6.2mm; width: auto; color: var(--ink); --logo-knock: #FFFFFF; --logo-signal: #FF4F00; flex: none; }
.ds-head .ds-id { color: var(--dim); max-width: 100mm; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-body { flex: 1 1 auto; min-height: 0; padding: 9mm var(--mx) 0; overflow: hidden; }
.ds-foot { flex: none; display: flex; justify-content: space-between; height: 12mm; align-items: center; padding: 0 var(--mx); border-top: 1px solid var(--line);
  font: 400 6.5pt/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }

/* ---------- page 1: the verdict ---------- */
.ds-page--verdict .ds-body { display: flex; flex-direction: column; padding: 0; }
.v-top { padding: 11mm var(--mx) 0; }
.v-kicker { font: 400 7pt/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.v-head { margin-top: 4mm; font: 800 49pt/0.94 var(--stencil); letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.v-verdict { display: flex; align-items: stretch; margin: 8mm var(--mx) 0; border: 1px solid var(--orange); }
.v-word { flex: none; padding: 3mm 6mm 2mm; background: var(--orange); color: var(--ground); font: 800 40pt/0.9 var(--stencil); letter-spacing: 0.02em; text-transform: uppercase; display: flex; align-items: center; }
.v-basis { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 1.2mm; padding: 3mm 5mm; font: 400 9pt/1.4 var(--sans); color: var(--ink); }
.v-basis b { font: 400 6.5pt/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.v-facts { margin: 8mm var(--mx) 0; border-top: 1px solid var(--line); }
.v-facts > div { display: grid; grid-template-columns: 24mm 1fr; gap: 4mm; align-items: baseline; padding: 2.4mm 0; border-bottom: 1px solid var(--line); }
.v-facts dt { font: 400 6.5pt/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.v-facts dd { font: 500 11pt/1.3 var(--sans); }
.v-facts dd small { font: 400 7.5pt/1.3 var(--mono); color: var(--dim); margin-left: 2mm; }
.v-facts dd a { text-decoration: none; border-bottom: 1px solid var(--dim); }
.v-facts dd a:hover { border-color: var(--orange); color: var(--orange); }
.v-map { flex: 1 1 auto; min-height: 0; margin-top: 8mm; position: relative; border-top: 1px solid var(--line); display: flex; align-items: flex-end; }
.v-map .ds-fig { width: 100%; }
.v-map .ds-map { width: 100%; height: auto; }

/* ---------- maps ---------- */
.ds-map { display: block; background: #FFFFFF; }
.ds-map .sea { fill: #FFFFFF; }
.ds-map .land { fill: #EFEDE9; stroke: #BDB9B2; stroke-width: 0.6; }
.ds-map .pt { fill: var(--ink); opacity: 0.55; }
.ds-map .pt.hot { fill: var(--orange); opacity: 0.9; }
.ds-map .lk { stroke: #5E5A55; stroke-width: 0.6; stroke-dasharray: 2 3; opacity: 0.5; fill: none; }
.ds-map .lbl { font: 400 7px "Martian Mono", monospace; fill: #5E5A55; letter-spacing: 0.04em; }
.ds-map .lbl-dot { fill: #5E5A55; }
.ds-map .scale { stroke: #0A0A0A; stroke-width: 1.4; }
.ds-map .credit { font: 400 5.5px "Martian Mono", monospace; fill: #7A766F; letter-spacing: 0.06em; }
.ds-fig { position: relative; }
.ds-fig .ds-shot { display: block; width: 100%; height: auto; }
.ds-fig .ds-attr { position: absolute; left: 2mm; bottom: 1.2mm; font: 400 5pt/1 var(--mono); color: #7A766F; letter-spacing: 0.05em; }
.ds-fig .ds-scale { position: absolute; right: 3mm; bottom: 2mm; display: block; font: 400 5.5pt/1.2 var(--mono); color: var(--ink); text-align: center; padding-bottom: 1.2mm; border-bottom: 1.4px solid var(--ink); }
.ds-fig .ds-scale i { display: none; }

/* ---------- page 2: the words ---------- */
.w-sec + .w-sec { margin-top: 11mm; }
.w-title { font: 800 17pt/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); padding-bottom: 2.4mm; border-bottom: 2px solid var(--ink); }
.w-list li { display: grid; grid-template-columns: 9mm 1fr; padding: 3.2mm 0; border-bottom: 1px solid var(--line); font: 400 12.5pt/1.38 var(--sans); }
.w-list li > span { font: 400 6.5pt/2.6 var(--mono); color: var(--dim); letter-spacing: 0.06em; }
.w-list b { font-weight: 600; color: var(--orange); }
.w-sec--mono .w-list li { font: 400 8.5pt/1.5 var(--mono); color: var(--dim); padding: 2.4mm 0; }
.w-sec--mono .w-list li > span { display: none; }
.w-sec--mono .w-list li { grid-template-columns: 1fr; }

/* ---------- numbers: tables and figures, a label and a unit ---------- */
.n-title { font: 800 30pt/0.95 var(--stencil); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); margin-bottom: 6mm; }
.n-cols2 { column-count: 2; column-gap: 9mm; margin-bottom: 4mm; }
.n-cols2 .n-blk { break-inside: avoid; margin-bottom: 7mm; }
.n-title--s { font-size: 22pt; margin-top: 4mm; }
.n-blk { margin-bottom: 7mm; }
.n-pair .n-blk { margin-bottom: 0; }
.n-label { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; font: 600 6.5pt/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding-top: 2.2mm; border-top: 2px solid var(--ink); margin-bottom: 1.4mm; }
.n-label i { font-style: normal; font-weight: 400; color: var(--dim); }
.ds table { width: 100%; border-collapse: collapse; font: 400 7pt/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.ds th { text-align: left; font: 400 5.6pt/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding: 1.1mm 2mm 1.1mm 0; border-bottom: 1px solid var(--dim); }
.ds td { padding: 1.35mm 2mm 1.35mm 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ds th.r, .ds td.r { text-align: right; padding-right: 0; }
.ds th.r { padding-right: 0; }
.ds td.r + td, .ds th.r + th { padding-left: 2.6mm; }
.ds .hot { color: var(--orange); }
:where(.ds) p { max-width: none; }
.ds td.nw { white-space: nowrap; overflow-wrap: normal; }
.ds td.mono { font-family: var(--mono); }
.ds td.dim, .ds td .dim { color: var(--dim); }
.ds td.u { color: var(--dim); white-space: nowrap; overflow-wrap: normal; }
.ds table.fixed td:last-child:not(.wide) { overflow-wrap: anywhere; }
.ds td.hot { color: var(--orange); }
.ds tr.is-hot td { color: var(--orange); }
.ds table.big td { font-size: 7.4pt; }
.ds table.ships td, .ds table.ships th { padding-right: 1.4mm; }
.ds table.ships td { padding-top: 1.1mm; padding-bottom: 1.1mm; font-size: 6.6pt; }
.ds table.ships td.sans { font-family: var(--sans); font-size: 7.4pt; }
.ds table.ships td.hot { color: var(--orange); }
.ds td.wide { overflow-wrap: anywhere; }
.n-cont { font: 400 5.6pt/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 1.5mm 0 1.5mm; }
.ds table.fixed { table-layout: fixed; }
.ds td.n-hash { white-space: nowrap; overflow-wrap: normal; font-size: 5.3pt; color: var(--dim); padding-right: 0; }

.n-cols { width: 100%; height: auto; display: block; }
.n-cols .bar { fill: #9E9A93; opacity: 1; }
.n-cols .bar.hot { fill: #FF4F00; opacity: 1; }
.n-cols .ax { stroke: #5E5A55; stroke-width: 0.6; }
.n-cols text { font: 400 5.6px "Martian Mono", monospace; fill: #5E5A55; }
.n-cols text.v { fill: #0A0A0A; }
.n-cols text.g { fill: #7A766F; letter-spacing: 0.06em; }

.ds-verify { font: 400 7.5pt/1.4 var(--mono); color: var(--ink); margin-top: 2.4mm; letter-spacing: 0.02em; }
.ds-verify b { font-weight: 600; color: var(--orange); }

@media (max-width: 640px) { html.dossier-mode .rp-bar { position: static; } html.dossier-mode .rp-bar__grow { display: none; } }
@media print {
  @page { size: A4; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body, html.dossier-mode, html.dossier-mode body { background: #FFFFFF !important; }
  .noprint, html.dossier-mode .rp-bar { display: none !important; }
  .ds-pages { zoom: 1 !important; display: block; padding: 0; gap: 0; }
  .ds-page { border: 0; break-after: page; page-break-after: always; break-inside: avoid; }
  .ds-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- interference.html: the list of every interference report ---------- */
.il { max-width: 1280px; margin: 0 auto; padding: 0 6vw 12vh; color: var(--ink); }
@media (max-width: 640px) { .il { padding: 0 16px 10vh; } }
.il-top { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--line); }
.il-mark svg { display: block; height: 22px; width: auto; color: var(--ink); --logo-knock: #FFFFFF; --logo-signal: #FF4F00; }
.il-label { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.il-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; padding: 7vh 0 28px; border-bottom: 2px solid var(--ink); }
.il-title { font: 800 clamp(44px, 8vw, 104px)/0.9 var(--stencil); text-transform: uppercase; letter-spacing: 0.005em; }
.il-filters { display: flex; gap: 0; }
.il-filters button { font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--ink); margin-left: -1px;
  background: var(--ground); color: var(--ink); cursor: pointer; }
.il-filters button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.il-counts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; }
.il-counts div { display: flex; flex-direction: column-reverse; }
.il-counts dt { font: 400 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.il-counts dd { margin: 0; font: 800 34px/1 var(--display); }
.il-table { width: 100%; border-collapse: collapse; margin-top: 8px; font: 400 13px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.il-table th { text-align: left; font: 400 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding: 14px 16px 10px 0; border-bottom: 1px solid var(--ink); }
.il-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.il-table .r { text-align: right; }
.il-table .nw { white-space: nowrap; }
.il-table a { color: inherit; text-decoration: none; }
.il-table a:hover { color: var(--orange); }
.il-table .hot { color: var(--orange); }
.il-word { white-space: nowrap; display: inline-block; font: 800 22px/1 var(--stencil); text-transform: uppercase; padding: 4px 8px 2px; border: 1px solid var(--ink); }
.il-word--proven { background: var(--orange); border-color: var(--orange); color: #FFFFFF; }
.il-word--writing { color: var(--dim); border-color: var(--line); }
.il-share { display: block; margin-top: 6px; font-size: 11px; color: var(--dim); }
.il-what a { font: 500 16px/1.3 var(--sans); }
.il-sub { display: block; margin-top: 4px; font: 400 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.il-links { white-space: nowrap; text-align: right; }
.il-links a, .il-links button { font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: none; border: 0;
  border-bottom: 1px solid var(--ink); padding: 0 0 2px; margin-left: 14px; cursor: pointer; }
.il-links a:hover, .il-links button:hover { color: var(--orange); border-color: var(--orange); }
.il-note { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 400 14px/1.4 var(--sans); color: var(--dim); }
.il-chip { font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 6px 8px 5px; border: 1px solid var(--ink); }
.il-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; background: var(--orange); vertical-align: middle; }
.il-map { position: relative; margin: 28px 0 8px; border: 1px solid var(--line); }
.il-map-canvas { height: clamp(260px, 46vh, 520px); background: #FFFFFF; }
.il-map .maplibregl-ctrl-attrib { font: 400 9px/1.4 var(--mono); background: rgba(255, 255, 255, 0.8); }
.il-map .maplibregl-ctrl-attrib a { color: var(--dim); }
.il-legend { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.9);
  font: 400 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
/* The same curve as the map's glow (interference-list.js glow()): (1 - age/30 d)^1.5. */
.il-legend i { display: block; width: 120px; height: 8px; background: linear-gradient(90deg, rgba(255, 79, 0, 1) 0%, rgba(255, 79, 0, 0.67) 23%, rgba(255, 79, 0, 0.39) 47%, rgba(255, 79, 0, 0.16) 70%, rgba(255, 79, 0, 0) 100%); border: 1px solid var(--line); }
.il-pop .maplibregl-popup-content { border-radius: 0; padding: 12px 14px; border: 1px solid var(--ink); box-shadow: none; max-width: 260px; }
.il-pop .maplibregl-popup-tip { display: none; }
.il-pop b { display: block; font: 800 16px/1 var(--stencil); text-transform: uppercase; color: var(--orange); }
.il-pop span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink); }
.il-pop small { display: block; margin-top: 6px; font: 400 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.il-age { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
  background: rgba(255, 79, 0, calc(0.15 + 0.85 * var(--g, 0))); box-shadow: 0 0 calc(12px * var(--g, 0)) rgba(255, 79, 0, var(--g, 0)); }
@media (max-width: 640px) {
  .il-head { grid-template-columns: 1fr; }
  .il-map-canvas { height: 300px; }
  .il-legend { top: 10px; bottom: auto; }
}
.il-empty { padding: 48px 0; font: 400 13px/1.4 var(--mono); color: var(--dim); }
@media (max-width: 900px) {
  .il-table thead { display: none; }
  .il-table, .il-table tbody, .il-table tr, .il-table td { display: block; }
  .il-table tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .il-table td { border: 0; padding: 4px 0; }
  .il-table td.r::before { content: "Ships "; color: var(--dim); }
  .il-table .r, .il-links { text-align: left; }
  .il-links a:first-child { margin-left: 0; }
}