/* Tekiji — issue pages and the archive index. Loaded after tokens.css and
   base.css, which own every colour, the masthead, the chips, the section
   chrome, the button and the footer: this file adds no colour value of its
   own, so the light/dark switch in tokens.css applies to these pages for free.

   Scope: what a published issue needs and no other page does — an article
   measure, data tables, the archive list.

   The block directly below is the issue layout as it shipped, restated so the
   site-wide pass leaves it unchanged. base.css carries the density register
   (a 72rem measure, a 1.6 body, the tighter button); an issue page is a long
   read rather than a dense sheet, so it keeps its own three values. */

.wrap { max-width: 66rem; }

body { line-height: 1.65; }

h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 24ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dateline {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.lede {
  max-width: 58ch;
  margin-top: var(--space-md);
  font-size: var(--text-lede);
  color: var(--muted);
}

/* ---- article shell ---- */

.issue,
.issue-archive {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.issue-head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.issue-head h1 {
  max-width: 30ch;
}

/* The issue's one claim, in the numbers this issue counted. */
.issue-band {
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.issue-head .lede {
  margin-top: var(--space-md);
}

/* Prose measure. Tables set their own width inside .table-scroll. */
.issue p,
.issue-archive p {
  max-width: 72ch;
}

.issue > .wrap > p,
.issue-section > p,
.event > p {
  margin-bottom: var(--space-md);
}

.issue-section + .issue-section {
  margin-top: var(--space-2xl);
}

.issue-section h2 {
  margin-bottom: var(--space-lg);
}

.issue a,
.issue-archive a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.issue a:hover,
.issue-archive a:hover {
  color: var(--accent-hover);
}

.issue a:focus-visible,
.issue-archive a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.issue a.button,
.issue-archive a.button {
  text-decoration: none;
}

/* ---- one disclosure ---- */

.event + .event {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
}

.event h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-meta {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Data labels above each table. Same register as the site's other eyebrows. */
.eyebrow {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* §2.2's framing line on computed quantities, and the per-event notes. */
.caveat,
.event-note,
.event-source {
  font-size: var(--text-sm);
  color: var(--muted);
}

.event-note,
.event-source {
  margin-top: var(--space-sm);
}

.event-source {
  color: var(--faint);
}

/* ---- the digest: one card per disclosure ----

   From issue 001 the figures live on the company's own page and the issue
   carries a card per filing instead of the tables. The card is base.css's
   `.filing-card`, the same component the front page prints; what an issue page
   adds is the stack it sits in, and one override — `.issue a` above paints
   every link in the article accent-and-underlined, which at equal specificity
   would otherwise repaint the card's own heading. */

.digest-grid {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.digest-grid .filing-name a {
  color: var(--ink);
  text-decoration: none;
}

.digest-grid .filing-name a:hover {
  color: var(--accent);
}

/* The article measure (`.issue p`, 72ch) is a rule about reading prose, and
   the card's prose keeps it. Its three fact lines are not prose — a filing's
   identity, its verification count, its source pointer — and wrapping those
   mid-way across a card they could sit on one line of reads as damage. */
.digest-grid .filing-meta,
.digest-grid .filing-verify,
.digest-grid .filing-links {
  max-width: none;
}

/* ---- data tables ---- */

/* The scroller itself is base.css's; an issue page only sets its own rhythm. */
.table-scroll {
  margin: var(--space-xs) 0 var(--space-lg);
}

.issue-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* The comparison table carries seven columns; it sets in the smaller size the
   email uses for the same table. */
.issue-table--compact {
  min-width: 44rem;
  font-size: var(--text-xs);
}

.issue-table th {
  padding: var(--space-xs) var(--space-sm) var(--space-2xs);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--muted);
}

.issue-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink);
}

.issue-table tbody tr:last-child td {
  border-bottom: none;
}

/* Flush with the text margin on both edges — the rules read as the print
   ledger they are, not as a boxed widget. */
.issue-table th:first-child,
.issue-table td:first-child {
  padding-left: 0;
}

.issue-table th:last-child,
.issue-table td:last-child {
  padding-right: 0;
}

.issue-table th.num,
.issue-table td.num {
  text-align: right;
}

.issue-table td.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A `YYYY-MM-DD` date must not break after a hyphen. */
.issue-table .nowrap {
  white-space: nowrap;
}

/* ---- basis notes under the comparison table ---- */

.basis-notes {
  list-style: none;
  max-width: 76ch;
}

.basis-notes li {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--muted);
}

.basis-notes li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--faint);
}

/* ---- closing call to action ---- */

.issue-cta {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  max-width: 58ch;
}

.issue-cta p {
  color: var(--muted);
}

.issue-cta p + p {
  margin-top: var(--space-md);
}

/* The closing CTA is the page's one button and sits alone: it keeps the
   roomier padding it shipped with, not the density register's. */
.issue-cta .button {
  padding: var(--space-sm) var(--space-lg);
}

/* ---- archive index ---- */

.issue-list {
  list-style: none;
  margin-top: var(--space-xl);
}

.issue-list-item {
  border-top: 1px solid var(--hairline);
}

.issue-list-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.issue-list-item a {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
}

.issue-list-item a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.issue-list-number {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.issue-list-title {
  font-family: var(--font-display);
  font-size: var(--text-lede);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.issue-list-item a:hover .issue-list-title {
  color: var(--accent);
}

.issue-list-meta {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--faint);
}

/* ---- responsive ---- */

@media (max-width: 800px) {
  .issue,
  .issue-archive {
    padding: var(--space-lg) 0 var(--space-2xl);
  }

  .issue-head {
    margin-bottom: var(--space-lg);
  }

  .issue-section + .issue-section {
    margin-top: var(--space-xl);
  }

  .event + .event {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
  }

  .event h3 {
    font-size: var(--text-lede);
  }

  .issue-list-item a {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .issue-list-meta {
    grid-column: 1;
  }
}