/* =================================================================
   The Observatory Ledger - agent incident ledger
   Loaded after styles.css on incident pages only. Uses the site's
   tokens; adds the wide ledger column, tables that scroll inside
   their own frame, status chips and evidence-tier marks.
   ================================================================= */

.ledger {
  max-width: 72rem;
  margin: 3rem auto 5rem;
}

.ledger .article-header h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.1;
  margin: 0.3rem 0 0.6rem;
}

.ledger > p,
.ledger > ul,
.ledger .intent,
.ledger .stats-note,
.ledger .table-note {
  max-width: 46rem;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.table-scroll table,
.article .table-scroll table {
  margin: 0;
  border: 0;
  border-radius: 0;
  min-width: 34rem;
}

.article .table-scroll table.ledger-table {
  min-width: 46rem;
}

.ledger-table td {
  font-size: 0.9rem;
}

.ledger-table td a {
  color: var(--blue-deep);
  text-decoration-color: rgba(31, 95, 148, 0.45);
}

.label,
.by {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.by {
  font-family: var(--sans);
}

.unknown {
  color: var(--muted);
  font-style: italic;
}

.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.status-proposed { color: var(--gold); border-color: var(--gold-bright); }
.status-source-checked { color: var(--blue-deep); border-color: var(--blue); }
.status-validated { color: var(--green); border-color: var(--green); }
.status-locked { color: var(--paper-2); background: var(--deep); border-color: var(--deep); }

.tier {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0 0.3rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.tier-E1 { color: var(--green); }
.tier-E2 { color: var(--blue-deep); }
.tier-E3 { color: var(--gold); }
.tier-E4 { color: var(--red); }

.ref {
  font-family: var(--sans);
  font-size: 0.68em;
  line-height: 0;
  white-space: nowrap;
}

.ref a {
  color: var(--blue);
  text-decoration: none;
}

.ref a:hover,
.ref a:focus-visible {
  text-decoration: underline;
}

/* Key-fact tables read as label + value, not as data rows */
.article table.facts tbody td:first-child {
  font-family: var(--sans);
  font-size: 0.8rem;
  white-space: normal;
  color: var(--muted);
  width: 11.5rem;
}

.ledger-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 0.8rem;
}

.ledger-stats > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-bright);
  border-radius: var(--radius);
  background: var(--panel);
}

.ledger-stats strong {
  display: block;
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--deep);
  line-height: 1.2;
}

.ledger-stats span {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.stats-note,
.table-note,
.lede-note,
.attribution,
.ledger-context {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--muted);
}

.ledger-context {
  margin: 0 0 0.9rem;
}

.ledger-context a {
  display: inline-block;
  padding: 3px 0;
  color: var(--blue-deep);
  font-weight: 600;
}

.intent blockquote {
  margin: 1rem 0 0.4rem;
}

.sources ol {
  padding-left: 0;
  list-style: none;
}

.sources li {
  margin-bottom: 0.9rem;
  overflow-wrap: anywhere;
}

.src-id {
  font-family: var(--mono);
  color: var(--deep);
}

.src-kind,
.src-supports,
.src-checked,
.note {
  color: var(--muted);
}

/* Long citation URLs and ids must wrap on narrow screens */
.detail-block p,
.stats-note,
.article-header .section-kicker {
  overflow-wrap: anywhere;
}

.sources li:target {
  background: rgba(181, 138, 66, 0.12);
  outline: 1px solid var(--gold-bright);
  outline-offset: 4px;
}

@media (max-width: 620px) {
  .ledger {
    margin-top: 2rem;
  }

  .article table.facts tbody td:first-child {
    width: auto;
  }

  .ledger-stats strong {
    font-size: 1.25rem;
  }
}

/* Wide multi-column ledger tables read as stacked cards below ~640px:
   one card per row, each value beside the column name it came from
   (data-label, set in build.py). The 2-column "facts" tables (Key
   facts, Dynamics, Scale, label key) already fit a narrow column and
   keep their table markup and their own table-scroll frame. */
@media (max-width: 640px) {
  .table-scroll:has(table.ledger-table) {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .article .table-scroll table.ledger-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .table-scroll table.ledger-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table-scroll table.ledger-table tbody,
  .table-scroll table.ledger-table tr {
    display: block;
    width: 100%;
  }

  .table-scroll table.ledger-table tr {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
  }

  .table-scroll table.ledger-table tr:last-child {
    margin-bottom: 0;
  }

  .table-scroll table.ledger-table td {
    display: block;
    position: relative;
    padding: 0.3rem 0 0.3rem 8.5rem;
    overflow-wrap: anywhere;
  }

  /* the site's own article-table rule nowraps the first column, sized
     for short IDs; the per-lab table's first column is a lab name */
  .article .table-scroll table.ledger-table td:first-child {
    white-space: normal;
  }

  .table-scroll table.ledger-table td + td {
    border-top: 1px solid var(--line);
  }

  .table-scroll table.ledger-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 8rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
    overflow-wrap: break-word;
  }

  /* Source-reference marks and the footer control row get a real
     24x24 CSS px tap area at touch widths (WCAG 2.2 target size). */
  .ref a,
  table.facts td a[href^="#"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 4px;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 3px;
  }
}

@media print {
  .table-scroll {
    overflow: visible;
    border: 0;
  }
}

/* D1: open notebook list, with a quiet margin for context. */
.notebook-ledger { max-width: none; margin: 43px 0 60px; }
.notebook-ledger .article-header { max-width: 750px; margin-bottom: 28px; padding: 0; }
.notebook-ledger .article-header h1 { font-size: 3.15rem; font-weight: 500; letter-spacing: -.045em; }
.notebook-ledger .article-header .subtitle { font-size: 1.1rem; line-height: 1.55; max-width: 640px; }
.notebook-columns { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 55px; align-items: start; }
.incident-browser { min-width: 0; }
.search-tools { padding-bottom: 17px; }
.search-tools label { display: block; font: 600 .73rem var(--sans); margin-bottom: 8px; }
.search-tools input { width: 100%; appearance: none; border: 1px solid #879484; border-radius: 3px; background: var(--paper-2); color: var(--ink); padding: 13px 15px; font: .94rem var(--sans); min-height: 48px; }
.search-tools input::placeholder { color: #6c7269; opacity: 1; font-size: .81rem; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filter-group { border: 1px solid var(--line); border-radius: 4px; padding: 0; background: var(--paper-2); }
.filter-group summary { padding: 7px 11px; min-height: 38px; cursor: pointer; font: .74rem/1.65 var(--sans); }
.filter-group summary::marker { color: var(--green); font-size: .8em; }
.filter-group[open] { flex-basis: 100%; }
.filter-group[open] summary { font-weight: 650; }
.filter-options { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 11px 12px; }
.filter-options button { border: 1px solid #aab29f; border-radius: 20px; background: var(--paper); color: var(--deep); padding: 7px 12px; font: .75rem/1.45 var(--sans); min-height: 36px; cursor: pointer; max-width: 100%; text-align: left; }
.filter-options button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.filter-options button[aria-pressed="true"]::before { content: '✓ '; }
.results-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 11px; border-bottom: 1px solid var(--deep); }
.article .results-line p { margin: 0; font: .72rem var(--mono); color: var(--muted); }
[data-clear] { border: 0; background: none; color: var(--green); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; font: .76rem var(--sans); cursor: pointer; min-height: 36px; }
.notebook-entry { padding: 24px 0 25px; border-bottom: 1px solid var(--line); }
.entry-index { display: flex; align-items: center; gap: 12px; font: .69rem var(--mono); color: var(--muted); }
.entry-index .chip { font-size: .61rem; letter-spacing: .03em; padding: 1px 7px; }
.notebook-entry h2 { margin: 11px 0 5px; padding: 0; font-size: 1.55rem; font-weight: 500; line-height: 1.23; letter-spacing: -.02em; }
.notebook-entry h2 a { text-decoration: none; }
.notebook-entry h2 a:hover { text-decoration: underline; }
.article .notebook-entry .label { font-size: .7rem; line-height: 1.5; margin: 0 0 14px; color: var(--muted); }
.entry-facts { display: flex; flex-wrap: wrap; gap: 14px 27px; margin: 13px 0; font-family: var(--sans); }
.entry-facts dt { font-size: .64rem; color: var(--muted); }
.entry-facts dd { font-size: .8rem; color: var(--deep); margin: 3px 0 0; }
.article .entry-reach { font: .85rem/1.55 var(--sans); margin: 13px 0 12px; color: #525c51; }
.entry-reach strong { font-weight: 600; color: var(--deep); }
.article .entry-link { display: flex; align-items: center; justify-content: space-between; font: .73rem var(--sans); color: var(--muted); margin: 0; }
.entry-link a { min-height: 30px; display: inline-flex; gap: 12px; align-items: center; color: var(--green); }
.notebook-margin { border-top: 1px solid var(--deep); padding-top: 14px; }
.article .notebook-margin h2 { font: 600 .78rem var(--sans); margin: 0 0 16px; }
.article .notebook-margin p { font: .77rem/1.6 var(--sans); color: var(--muted); margin-bottom: 18px; }
.article .notebook-margin .credit-note { font-size: .7rem; border-top: 1px solid var(--line); padding-top: 20px; }
.no-results { background: #ecefe5; padding: 24px; border-bottom: 1px solid var(--line); }
.no-results h2 { margin: 0; }
.notebook-appendix { margin-top: 44px; border-top: 1px solid var(--line); }
.notebook-appendix > details { padding: 0; border-bottom: 1px solid var(--line); }
.notebook-appendix > details > summary { font: .87rem/1.5 var(--sans); color: var(--deep); padding: 17px 2px; cursor: pointer; }
.notebook-appendix > details > :not(summary) { margin-inline: 0; }
.incident { max-width: 760px; margin-top: 35px; }
.article .ledger-context { font: .79rem/1.5 var(--sans); color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.incident .article-header h1 { font-size: 2.65rem; line-height: 1.12; }
.incident .article-header .section-kicker { font-size: .69rem; letter-spacing: .04em; text-transform: none; }
.incident .status-note { font: .8rem/1.55 var(--sans); padding: 0; border: 0; background: none; }
.entry-jumps { display: flex; flex-wrap: wrap; gap: 8px 20px; border-block: 1px solid var(--line); padding: 10px 0; font: .76rem var(--sans); }
.entry-jumps a { min-height: 32px; display: flex; align-items: center; }
.article .sources li { font-size: .95rem; }
@media (max-width: 760px) {
  .notebook-ledger { margin-top: 29px; }
  .notebook-ledger .article-header { margin-bottom: 23px; }
  .notebook-ledger .article-header h1 { font-size: 2.22rem; line-height: 1.08; margin-bottom: 12px; }
  .notebook-ledger .article-header .subtitle { font-size: .96rem; line-height: 1.52; margin-bottom: 0; }
  .notebook-columns { grid-template-columns: 1fr; gap: 32px; }
  .filters { gap: 6px; }
  .filter-group summary { padding: 7px 9px; font-size: .7rem; }
  .notebook-entry h2 { font-size: 1.43rem; }
  .notebook-entry { padding-top: 22px; }
  .article .entry-reach { font-size: .83rem; }
  .entry-facts { gap: 12px 22px; }
  .notebook-margin { max-width: none; }
  .incident { margin-top: 23px; }
  .incident .article-header h1 { font-size: 1.94rem; line-height: 1.1; }
  .incident .article-header { padding-bottom: 7px; }
  .article .ledger-context { font-size: .74rem; line-height: 1.5; margin-bottom: 20px; padding-bottom: 13px; }
  .incident .status-note { font-size: .76rem; }
  .entry-jumps { gap: 3px 20px; }
  .article .table-scroll table { min-width: 0; }
  .article table.facts tbody td:first-child { width: 31%; font-size: .73rem; padding-inline: 10px; }
  .article table.facts tbody td { font-size: .82rem; padding: 10px; }
  .article table.facts thead th { font-size: .7rem; padding: 10px; }
  .ref a { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
}