/* Report pages: the read side of the desk (live, blogs, search, company,
   status, manifest, operations, provenance, disclosure, 404). Loaded after
   style.css so the page-specific rules win without touching the shared sheet. */

/* ───────────────────────────────────────────────────────────────────
   The reports are the desk too.

   A report used to be a column of panels: every block was a white card
   with a border, a radius and a shadow, so the page read as a stack of
   boxes rather than as one column of text — and the boxes were wider
   than the column the feed reads in, so the text moved sideways the
   moment the reader crossed from the feed to the manifest.

   The reading column has no boxes in it. A block is a heading, a
   paragraph, a hairline and a row of quiet counts; what separates one
   block from the next is a rule, not a frame. The vocabulary below is
   the same one the pipeline pages use (.log, .log-row, .side-figure),
   so a report and a journal read as the same product. */

/* The quiet line under a hero: the facts about the page, not shouts.
   The eyebrow used to sit here; it went, because the page's title
   already says what the page is. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: var(--text-2xs);
}
/* The facts of a hero are separate items, so they are separated with
   room rather than with a middot: a mark between them would float in
   the middle of the gap, and a wrapped line would strand it at its
   end. */


/* A hero whose way out is a link, not a button: the action bar a post
   ends with, lifted under the lede. */
.hero .log-actions { margin-top: var(--s-4); }

/* A section of a report: a rule, a plain heading, then the block. The
   heading is a word, not a label — a report is read, not scanned. */
.report-section {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.report-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}
.report-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.report-head a {
  color: var(--muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.report-head a:hover { color: var(--accent); }
.report-head > span {
  color: var(--muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

/* A paragraph of a report: one measure the eye can cross. */
.report-note {
  margin: 0 0 var(--s-3);
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.report-note a { color: var(--text); }
.report-note b { color: var(--text); font-weight: var(--font-weight-semibold); }
.report-note code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}
.report-note--last { margin-bottom: 0; }

/* Figures, in the reading column: the same pair the side column prints,
   two to a line, so a report's numbers do not become a column of
   thirty separate lines. */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-5);
  margin: 0 0 var(--s-3);
}
.figure-grid .side-figure {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 560px) {
  .figure-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A pair of facts: a label on the left, the value on the right, a
   hairline between. The report's own version of a key–value table. */
.fact-list { margin: 0 0 var(--s-3); }
.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.fact-row:last-child { border-bottom: 0; }
.fact-row > b {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.fact-row > span {
  min-width: 0;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
.fact-row code { color: var(--muted-strong); }

/* A list of obligations, exclusions or sources: flat rows, no bullets,
   no card. */
.report-list {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
}
.report-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.report-list li:last-child { border-bottom: 0; }
.report-list b { color: var(--text); font-weight: var(--font-weight-semibold); }
.report-list a { color: var(--text); }
.report-list code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}

/* A ledger inside a report: hairline rows, no frame, no furniture. The
   type is one step down from the body's: a table of counts is read by
   the eye, not read word by word. */
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-2xs);
}
.report-table th {
  padding: 0 8px 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-3xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-align: left;
  white-space: nowrap;
}
.report-table td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.report-table td b { color: var(--text); font-weight: var(--font-weight-semibold); }
.report-table td code {
  color: var(--muted-strong);
  /* The shared sheet breaks code anywhere, so a run_id became a stack of
     eight-character stubs and the column grew to the height of the
     table. A ledger's identifier is one token: it breaks only if the
     column truly cannot hold it. */
  word-break: normal;
  overflow-wrap: break-word;
}
.report-table td.keep { white-space: nowrap; }
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-table .num { white-space: nowrap; }

/* A ledger wider than the reading column scrolls inside it. The desk
   never moves — only the numbers inside the frame — and the reader
   keeps every column instead of a table squeezed to a word per cell.

   The edges carry a shadow that only appears when there is more to
   see: the covers are pinned to the box, the shadows to the content,
   so at rest the table is clean and mid-scroll the edge says so. */
.report-scroll {
  overflow-x: auto;
  margin: 0 0 var(--s-3);
  background:
    linear-gradient(to right, var(--desk), transparent) left center,
    linear-gradient(to left, var(--desk), transparent) right center,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.report-scroll > .report-table { min-width: 100%; }

/* The edge shadow has to read on both fields. On paper it is a shadow,
   on the black desk it is a light — a black shadow on black is nothing,
   and a table that scrolls with no sign that it scrolls is a table the
   reader stops believing in. */
:root { --scroll-shadow: rgba(16, 24, 40, 0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scroll-shadow: rgba(231, 233, 234, 0.18); }
}
:root[data-theme="dark"] { --scroll-shadow: rgba(231, 233, 234, 0.18); }

/* Below the width where eleven columns read as eleven columns, the
   ledger becomes a list of pairs. Still flat: the rule between the
   rows is the same hairline, not a card around each one. */
@media (max-width: 760px) {
  .report-table,
  .report-table tbody,
  .report-table tr,
  .report-table td { display: block; width: 100%; }
  .report-table thead { display: none; }
  .report-table tr {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .report-table tbody tr:last-child { border-bottom: 0; }
  .report-table td {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: var(--s-2);
    padding: 2px 0;
    border: 0;
  }
  .report-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }
  .report-table td:first-child {
    display: block;
    margin-bottom: var(--s-1);
    color: var(--text);
  }
  .report-table td:first-child::before { display: none; }
}

/* A status inside a ledger: the colour carries the meaning, the pill
   does not — a report has no buttons in it. */
.report-ok { color: var(--ok); }
.report-warn { color: var(--warn); }
.report-danger { color: var(--danger); }
.report-strong { color: var(--text); font-weight: var(--font-weight-semibold); }

/* The one drawing on the operations page: a week of burn. The track is
   a flat ground and the fill is the bar — nothing is framed around it. */
.report-bars { margin: 0 0 var(--s-3); }
.report-bars .bar-row { border-bottom: 1px solid var(--line); }
.report-bars .bar-row:last-child { border-bottom: 0; }
.report-bars .bar-track {
  height: 8px;
  border: 0;
  background: var(--surface-2);
}

/* The row of page links at the foot of a report: the same shape the
   foot of a post has, so the reader can move on without a button. */
.report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}
.report-links a { color: var(--muted); }
.report-links a:hover { color: var(--accent); }