/*
  Dossier components — the pieces that exist because the source document has them.
  Layout and proportions follow the rendered cover, not the text export.

    .cover / .cover-band       the cover panel: country band, logo+title, facility band
    .figlet                    the ASCII wordmark band
    .panel-head                the small mark + name header that opens a content panel
    .statblock                 SCALE / CALIBER / FOUNDING / STATUS / ADVANCEMENT
    .clearance-matrix          the PUB..AES access grid
    .chip.clr-*                the clearance tag, used site-wide
    .filecard                  the personnel file panel (FILE CODE / DEPARTMENT / ROLE)
    .decode                    "Decrypting File... | Checking parameters... | Loading Data..."
    .entry                     the repeated PROJECT NAME / VERSE TITLE / RULE TITLE block
    .todo                      a placeholder the document has not filled in yet
*/

/* ============================ cover ============================ */

.cover { padding: clamp(18px, 3.4vw, 40px) clamp(16px, 3vw, 36px); }

/* The two 6-across bands. Equal columns, centered, no wrap until small screens.
   The country band runs full phosphor; the facility band sits one step back, so
   the eye reads country -> facility as a hierarchy rather than a repeat. */
.cover-band {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
  font-family: var(--mono-family);
}

.cover-band.countries { font-size: clamp(11px, 1.5vw, 17px); letter-spacing: 0.04em; }
.cover-band.countries a,
.cover-band.countries span { color: var(--accent); border: 0; display: block; padding: 4px 2px; }
.cover-band.countries a:hover { color: var(--accent-hi); text-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }

.cover-band.facilities { font-size: clamp(9px, 1.05vw, 12px); line-height: 1.45; }
.cover-band.facilities a,
.cover-band.facilities span {
  color: var(--accent-dim);
  border: 0;
  display: block;
  padding: 4px 2px;
}
.cover-band.facilities a:hover { color: var(--accent); }
.cover-band.facilities .city { display: block; }
.cover-band.facilities .disc { display: block; }

/* The middle: mark on the left, identity on the right. */
.cover-main {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  padding: clamp(16px, 3.5vw, 42px) 0;
}

.cover-mark { display: grid; place-items: center; color: #fff; }
.cover-mark svg { width: min(100%, 280px); height: auto; }

.cover-id { text-align: center; min-width: 0; }
.cover-id h1 {
  font-family: var(--mono-family);
  font-weight: 400;
  font-size: clamp(24px, 4.4vw, 52px);
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.cover-id .tagline {
  font-family: var(--mono-family);
  font-style: italic;
  font-size: clamp(12px, 1.75vw, 21px);
  color: var(--ink);
  margin: 0 0 clamp(18px, 3.4vw, 46px);
}
.cover-id .doc-kind {
  font-family: var(--mono-family);
  font-size: clamp(10px, 1.15vw, 13px);
  color: var(--ink2);
  line-height: 1.6;
  margin: 0;
}

/* The cover's inner rules stop short of the panel border, as the document draws them. */
.cover .hair { margin: 0; border-top-color: var(--hair); }

/* ============================ figlet band ============================ */

.figlet-band {
  padding: clamp(14px, 2.6vw, 30px) clamp(10px, 2vw, 24px);
  container-type: inline-size;
}

/*
  The ASCII wordmark. It must never wrap and never trigger a horizontal page
  scrollbar, so it scales with its container instead of reflowing — the one place
  the site borrows wonder's fixed-surface trick (brief §0: "CSS transform: scale()
  to fit, never reflow"). Below the point where scaling makes it illegible the
  banner is dropped entirely and the plain heading behind it shows (responsive.css).

  Sizing is exact rather than guessed: build.py measures the rendered banner and
  emits its column count as --cols, so the font size is the width of the container
  divided by the number of characters that must fit across it. 0.63 is an advance
  ratio safely above every common monospace face (Consolas 0.55, DejaVu Sans
  Mono 0.602), so the art fits on Windows, macOS and Linux alike.

  line-height is 1.18, not 1.0: FIGlet art is designed on a terminal cell, and the
  taller ascenders of the Linux fallback faces collide at anything tighter.
*/
.figlet {
  --cols: 80;
  font-family: var(--mono-family);
  color: var(--accent);
  font-size: min(20px, calc(100cqi / (var(--cols) * 0.63)));
  line-height: 1.18;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  white-space: pre;
  overflow: hidden;
  user-select: none;
}
.figlet-caption {
  text-align: center;
  font-family: var(--mono-family);
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--accent);
  margin: clamp(10px, 2vw, 22px) 0 0;
  letter-spacing: 0.04em;
}
.figlet-fallback { display: none; }

/* ============================ panel head ============================ */

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.panel-head .mark { width: 22px; height: 22px; flex: 0 0 22px; }
.panel-head h2,
.panel-head .name {
  font-family: var(--mono-family);
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 0;
}
.panel-head .head-flag { margin-left: auto; }

/* ============================ two-column dossier body ============================ */

.dossier-split {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 46px);
  align-items: start;
}
.dossier-split .prose { min-width: 0; }
.dossier-split .prose p { color: var(--ink2); margin: 0 0 1.1em; }
.dossier-split .prose p:last-child { margin-bottom: 0; }

/* ============================ stat block ============================ */

/* Set in the sans face, as the document does — it is the one element that breaks
   from monospace, and breaking it here is what makes it read as a data plate
   rather than more terminal output. */
.statblock { font-family: var(--sans-family); font-size: 13px; }
.statblock .statblock-id {
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
  padding: 0 0 7px;
  border-bottom: 1px solid var(--hair);
  letter-spacing: 0.02em;
}
.statblock .row {
  display: grid;
  grid-template-columns: minmax(96px, 46%) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}
/* The clearance legend pairs a fixed-width chip with a long description, so it
   overrides the 46% key column the stat plates want. */
.statblock.legend .row {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}
.statblock .row:last-child { border-bottom: 0; }
.statblock .k { font-weight: 700; color: var(--ink); }
.statblock .v { color: var(--ink2); overflow-wrap: anywhere; }

/* Monospace variant, for stat plates inside terminal-flavoured panels. */
.statblock.mono { font-family: var(--mono-family); font-size: 12px; }
.statblock.mono .k { color: var(--accent); font-weight: 400; letter-spacing: 0.08em; }

/* ============================ chips ============================ */

.chip {
  display: inline-block;
  font-family: var(--mono-family);
  padding: 1px 7px;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}
.chip + .chip { margin-left: 5px; }

.chip.clr-pub { color: var(--clr-pub); }
.chip.clr-wep { color: var(--clr-wep); }
.chip.clr-des { color: var(--clr-des); }
.chip.clr-rsa { color: var(--clr-rsa); }
.chip.clr-rfc { color: var(--clr-rfc); }
.chip.clr-pgp { color: var(--clr-pgp); }
.chip.clr-aes { color: var(--clr-aes); }

/* Status chips reuse the same ramp — the site never invents a second colour language. */
.chip.st-active     { color: var(--accent); }
.chip.st-ongoing    { color: var(--clr-rfc); }
.chip.st-dormant    { color: var(--dim); }
.chip.st-archived   { color: var(--dim); }
.chip.st-classified { color: var(--ember); }

/* ============================ clearance matrix ============================ */

.matrix-wrap { overflow-x: auto; }

.clearance-matrix {
  width: 100%;
  min-width: 560px;
  font-family: var(--mono-family);
  font-size: 12px;
  border: 1px solid var(--border2);
}
.clearance-matrix caption {
  caption-side: top;
  text-align: left;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 0 10px;
}
.clearance-matrix th,
.clearance-matrix td {
  padding: 6px 9px;
  border: 1px solid var(--border3);
  text-align: center;
}
.clearance-matrix thead th { background: #080808; letter-spacing: 0.1em; }
.clearance-matrix tbody th {
  text-align: left;
  color: var(--ink2);
  font-weight: 400;
  white-space: nowrap;
  background: #080808;
}
.clearance-matrix td.yes { color: var(--accent); }
.clearance-matrix td.no { color: rgba(153, 153, 153, 0.3); }
.clearance-matrix tbody tr:hover th,
.clearance-matrix tbody tr:hover td { background: var(--raised); }

.clearance-matrix thead th[data-tier="PUB"] { color: var(--clr-pub); }
.clearance-matrix thead th[data-tier="WEP"] { color: var(--clr-wep); }
.clearance-matrix thead th[data-tier="DES"] { color: var(--clr-des); }
.clearance-matrix thead th[data-tier="RSA"] { color: var(--clr-rsa); }
.clearance-matrix thead th[data-tier="RFC"] { color: var(--clr-rfc); }
.clearance-matrix thead th[data-tier="PGP"] { color: var(--clr-pgp); }
.clearance-matrix thead th[data-tier="AES"] { color: var(--clr-aes); }

/* ============================ file card ============================ */

.filecard {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
}
.filecard .file-meta { font-family: var(--sans-family); font-size: 12px; }
.filecard .file-meta .row { padding: 7px 0; border-bottom: 1px solid var(--hair); }
.filecard .file-meta .row:last-child { border-bottom: 0; }
.filecard .file-meta .k {
  display: block;
  font-family: var(--mono-family);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.filecard .file-meta .v { display: block; color: var(--ink); font-weight: 600; }
.filecard .file-body { min-width: 0; }

.portrait-frame {
  border: 1px solid var(--border2);
  background: #000;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  color: var(--dim);
  font-family: var(--mono-family);
  font-size: 10px;
  letter-spacing: 0.16em;
  margin: 0 0 14px;
  overflow: hidden;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ decode theater ============================ */

/*
  The document literally reads "Decrypting File... | Checking parameters... |
  Loading Data...", so the site performs it.

  This BREAKS wonder's honest-data law on purpose. The law (hud-v4-design-brief §1)
  is: "every animated element is driven by real state from the status JSON; nothing
  animates on wall-clock alone." That law exists because the wonder HUD is an
  instrument — a spinner that keeps spinning during a hang is lying about a real
  system. Nothing here reports on a real system. The theater IS the content, it runs
  exactly once per page load and then stills permanently. Because it never loops, it
  can never imply activity that is not happening.
*/
.decode {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: var(--mono-family);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
  min-height: 17px;
  user-select: none;
}
.decode .step { opacity: 0.25; transition: opacity 0.18s linear, color 0.18s linear; }
.decode .step.on { opacity: 1; color: var(--accent); }
.decode .step.done { opacity: 0.55; }

/* ============================ entries ============================ */

.entry { padding: 0; }
.entry + .entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border3); }
.entry h3 {
  font-family: var(--mono-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 3px;
}
.entry .entry-sub { color: var(--dim); font-size: 11px; letter-spacing: 0.08em; margin: 0 0 9px; }
.entry .entry-sub .sep { color: var(--border2); padding: 0 5px; }
.entry p { font-size: 12.5px; color: var(--ink2); margin: 0 0 0.75em; }
.entry p:last-child { margin-bottom: 0; }

/* ============================ cards ============================ */

.card-link { display: block; border: 0; color: inherit; height: 100%; }
.card-link .panel { height: 100%; display: flex; flex-direction: column; }
.card-link:hover .panel { background: #060a04; box-shadow: 0 0 0 1px var(--accent-dim) inset; }
.card-link:hover .panel-head .name { color: var(--accent); }
.card-link .card-desc { font-size: 12.5px; color: var(--ink2); margin: 10px 0 12px; flex: 1 1 auto; }
.card-link .card-foot {
  font-family: var(--mono-family);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.08em;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: center;
}

/* ============================ todo ============================ */

/*
  A visible, deliberate hole. The source document is roughly half placeholder
  ("verse description here", "PROJECT NAME. url"), so unwritten content is marked
  rather than faked. In the fiction it reads as redaction; in the build it is a
  checklist — `python3 build.py --todo` counts these.
*/
.todo {
  display: block;
  margin: 12px 0;
  padding: 9px 13px;
  border: 1px dashed rgba(232, 84, 46, 0.45);
  background: rgba(232, 84, 46, 0.06);
  color: rgba(232, 84, 46, 0.9);
  font-family: var(--mono-family);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.todo::before {
  content: "[ REDACTED — PENDING DECLASSIFICATION ] ";
  color: var(--ember);
  letter-spacing: 0.12em;
}
.todo .bars { color: rgba(232, 84, 46, 0.5); letter-spacing: 0; line-height: 1.5; word-break: break-word; }

/* ============================ misc ============================ */

.notice {
  font-size: 11px;
  line-height: 1.75;
  color: var(--dim);
  border-left: 2px solid var(--border2);
  padding-left: 12px;
  margin: 0;
}

.doc { max-width: var(--measure); }
.doc h2 {
  font-family: var(--mono-family);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.9em 0 0.7em;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  font-family: var(--mono-family);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
  margin: 1.6em 0 0.5em;
}
.doc > :last-child { margin-bottom: 0; }

/* ---- masthead ----
   The wordmark band repeated at the top of every interior page, wrapped in a link
   home. Sits one step back from the cover's copy so it reads as chrome rather than
   competing with the page's own title. */
.masthead-link { display: block; border: 0; }
.masthead-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.figlet-band.masthead { padding: clamp(10px, 1.8vw, 20px) clamp(10px, 2vw, 24px); }
.figlet-band.masthead .figlet { color: var(--accent-dim); transition: color 0.16s linear; }
.masthead-link:hover .figlet { color: var(--accent); }
.masthead-link:hover .panel { border-color: var(--accent); }
.figlet-band.masthead .figlet-fallback { color: var(--accent-dim); }

/* ============================ TUI art ============================ */

/*
  Record fingerprint — OpenSSH's drunken-bishop randomart, ported from wonder's
  vitals.html (drawP10). The grid is walked from the record's own written lines,
  so the picture IS the record: same prose, same art; write another section and
  it changes; leave a record unwritten and it stays sparse.

  This obeys the honest-data law rather than breaking it (unlike the decode
  theater). It is DATA-DERIVED in the TUI vocabulary's Gate 1 sense — its form is
  a function of real state, and it has no wall-clock component at all.
*/
.randomart {
  font-family: var(--mono-family);
  font-size: 12px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre;
  overflow: hidden;
  user-select: none;
}
.randomart .ra-edge { color: var(--border2); }

/* Four intensity bands, matching wonder's dim / ink / gold / ember ladder,
   hue-translated to the phosphor ramp. Ember stays ember: it is the "something
   happened here" colour in both palettes, and in a fingerprint it marks the
   cells the walk hit hardest. */
.randomart .b0 { color: transparent; }
.randomart .b1 { color: var(--accent-dim); }
.randomart .b2 { color: var(--accent); }
.randomart .b3 { color: var(--clr-rfc); }
.randomart .b4 { color: var(--ember); }

.randomart-cap {
  font-family: var(--mono-family);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}
.randomart-cap .walks { color: var(--clr-rfc); }

.art-slot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }

/* ---- meters ----
   Full blocks and light shade only. The TUI vocabulary's glyph law (Gate 2)
   rules out eighth-blocks ▁▂▃ because the font silently substitutes them; █ and
   ░ are safe in every monospace face the site targets. */
.panel.titled > .panel-flag { color: var(--accent-dim); letter-spacing: 0; }
.panel.titled > .panel-flag.full { color: var(--accent); }
.panel.titled > .panel-flag.part { color: var(--clr-rfc); }

.card-meter {
  margin-left: auto;
  font-family: var(--mono-family);
  letter-spacing: 0;
  color: var(--accent-dim);
}

/* ============================ instruments ============================ */

/*
  btop-grade character graphics for the monitoring board. Every glyph here is
  inside the TUI vocabulary's Gate 2 glyph law — █ ▄ ░ ● ◐ ○ are all covered by
  Consolas. The eighth-blocks ▁▂▃ a sparkline would normally want are not, and
  are avoided: half-blocks buy two rows of sub-cell resolution safely instead.

  The heat ramp is wonder's, hue-translated: dim -> phosphor -> gold -> ember.
*/
.h0 { color: rgba(56, 118, 29, 0.30); }
.h1 { color: var(--accent-dim); }
.h2 { color: var(--accent); }
.h3 { color: var(--clr-rfc); }
.h4 { color: var(--accent-hi); }
.h_ { color: rgba(56, 118, 29, 0.20); }

.instrument-cap {
  font-family: var(--mono-family);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin: 10px 0 0;
}
.instrument-cap .lit { color: var(--accent-hi); }
.instrument-cap .part { color: var(--clr-rfc); }
.instrument-cap .dark { color: rgba(56, 118, 29, 0.4); }

/* ---- LED strip ---- */
.led-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-family: var(--mono-family);
  font-size: 17px;
  line-height: 1;
}
.led { cursor: default; }
.led.h4 { text-shadow: 0 0 7px rgba(0, 255, 0, 0.55); }

/* ---- coverage grid ---- */
.coverage { font-family: var(--mono-family); font-size: 13px; line-height: 1.35; }
.cov-row { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cov-label {
  flex: 0 0 13ch;
  color: var(--dim);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cov-cells { letter-spacing: 1px; overflow: hidden; }

/* ---- column chart ---- */
.colchart {
  font-family: var(--mono-family);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre;
  overflow-x: auto;
}
.colchart .cc-axis { color: var(--border2); }

/* ---- horizontal bars ---- */
.hbars { font-family: var(--mono-family); font-size: 12px; }
.hbar-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.hbar-label {
  flex: 0 0 11ch;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar-bar { letter-spacing: 0; }
.hbar-val { margin-left: auto; color: var(--dim); }

/* ============================ fetch card ============================ */

/*
  The neofetch identity panel — wonder's fetch-card, hue-translated: half-block
  monogram left (rendered at build time from the traced polygon geometry, so it
  is the same mark as the SVG), identity facts right, and the palette swatch row
  along the bottom. The swatches are parsed out of tokens.css at build time and
  can never drift from the real theme.
*/
.fetch-card {
  display: flex;
  gap: clamp(18px, 3vw, 42px);
  align-items: flex-start;
  flex-wrap: wrap;
}
.fetch-art {
  font-family: var(--mono-family);
  font-size: 13px;
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--accent);
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre;
  user-select: none;
  text-shadow: 0 0 9px rgba(0, 255, 0, 0.35);
}
.fetch-facts { flex: 1 1 260px; min-width: 240px; }

.swatch-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono-family);
  font-size: 14px;
  line-height: 1;
}
.swatch-row .swatch-name {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

/* ============================ commit calendar ============================ */

.cal-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border3); }
.cal {
  font-family: var(--mono-family);
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre;
  overflow-x: auto;
}
.cal .c_ { color: rgba(153, 153, 153, 0.22); }
.instrument-cap .c_ { color: rgba(153, 153, 153, 0.4); }

/* ============================ metric numerals ============================ */

/* study_desk's home-dashboard idiom: a big figure over a dim caption. The one
   place the sans face carries data, exactly as its .metric does. */
.metric-row {
  display: flex;
  gap: clamp(24px, 5vw, 72px);
  flex-wrap: wrap;
}
.metric-v {
  font-family: var(--sans-family);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.metric-l {
  font-family: var(--mono-family);
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.08em;
}

/* ============================ figlet shadow tone ============================ */

/* The two-tone banner: underscore ground-strokes one step down. Each context
   steps down from its own base — phosphor art drops to moss, the dim masthead
   drops to a fainter moss. */
.figlet .fg-sh { color: var(--accent-dim); }
.figlet-band.masthead .figlet .fg-sh { color: rgba(56, 118, 29, 0.55); }

/* ============================ brand emphasis ladder ============================
   Measured from the Addapa File Report Template render. The source uses three
   levels of emphasis above plain green text, and the site was using none of
   them — --panel-fill (#274e13) was defined in tokens.css and never referenced.

     level 3  inverted chip   #00ff00 ground, black text   document terminators
     level 2  fill chip       #274e13 ground, green text   every field label
     level 1  fill band       #274e13 band behind a title, running past the text
     level 0  plain green

   Sampled straight off the rendered PDF: label chip #264e12, ADDAPA LOCATION
   and END OF FILE REPORT both #00ff00 with #000000 text, title band #264e12.
*/

/* --- level 3: the inverted chip --- */
.chip-inv {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-family: var(--mono-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 10px;
  white-space: nowrap;
  border: 0;
}
a.chip-inv:hover { background: var(--accent-hi); color: #000; }

/* The document terminator, centred at the foot of a record. */
.end-marker { text-align: center; margin: 26px 0 0; }

/* --- level 2: the label chip --- */
/* Field labels sit ON a fill, they are not merely coloured. The template runs
   this on every label in the field stack, trailing period included. */
.statblock.mono .k,
.filecard .file-meta .k {
  background: var(--panel-fill);
  color: var(--accent);
  padding: 1px 7px 1px 6px;
  display: inline-block;
  width: fit-content;
}
.statblock.mono .row { align-items: baseline; }

/* --- level 1: the title band --- */
/* Large italic monospace, underlined, sitting on a fill band that runs past the
   text on both sides — the "Project Report Template" masthead treatment. */
.title-band {
  position: relative;
  background: var(--panel-fill);
  margin: 0 0 12px;
  padding: 5px 0;
  text-align: center;
  overflow: hidden;
}
.title-band h1,
.title-band .name {
  display: inline-block;
  font-family: var(--mono-family);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.9vw, 34px);
  letter-spacing: 0.02em;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 0 18px 2px;
  margin: 0;
  background: #000;
}
.title-band .band-tag { display: block; margin-top: 8px; }

.panel-head .head-sub { color: var(--dim); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }