/* ledger.css :: the companies table. 562 rows in the DOM, browser does the rest. */

.ledger-head { padding-bottom: 16px; }
.ledger-title {
  font-size: clamp(20px, min(3.4vw, 5.2vh), 44px); font-weight: 800;
  letter-spacing: -0.02em; font-variation-settings: 'wdth' 116; margin-top: 6px;
}
.ledger-honesty { margin-top: 10px; }

.lg-rail { display: grid; gap: 8px; margin-bottom: 16px; }
.lg-rail .rail-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg-rail .rail-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lg-rail .rail-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lg-rail .rail-spacer { flex: 1; }
.lg-q {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-chip);
  padding: 8px 12px; width: min(430px, 100%);
}
.lg-q:focus { border-color: var(--cyan-text); }
.rng {
  font-family: var(--font-mono); font-size: 12px; width: 64px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-chip);
  padding: 5px 8px;
}
.rng:focus { border-color: var(--cyan-text); }

.picker { position: relative; }
.picker summary { list-style: none; }
.picker summary::-webkit-details-marker { display: none; }

/* The MORE FILTERS fold: layer, region, maturity, founded and the toggles live
   here, expanding in place rather than as a popover so a full set of chips has
   room to breathe. The badge counts the active filters hiding inside. */
.lg-adv > summary { list-style: none; display: inline-flex; }
.lg-adv > summary::-webkit-details-marker { display: none; }
.lg-adv > summary .pk-caret { font-size: 9px; margin-left: 2px; transition: transform 160ms ease; }
.lg-adv[open] > summary .pk-caret { transform: rotate(180deg); }
.lg-adv > .rail-row { margin-top: 10px; }
.lg-adv .pk-n {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--cyan); color: #12130F; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
#lg-mat-note { margin-top: 6px; max-width: 110ch; }
.picker .pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(18, 19, 15, .16);
  padding: 10px 12px; min-width: 230px; max-height: 320px; overflow: auto;
}
.picker .pop label {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.picker .pop input { accent-color: var(--cyan-text); }

/* ------------------------------------------------------------- table */
#lg-scroll { position: relative; border-top: 1px solid var(--rule); }
#lg-table { min-width: 900px; }
/* The header can only stick to a box that scrolls vertically. The table is wider
   than the page at every desktop width, so it has to keep its own horizontal
   scroll — which makes #lg-scroll the scroll container whether we like it or
   not. Give it the height left under the site chrome and it scrolls in both
   directions, with the column headers pinned to its top edge for as long as
   there are rows beneath them. Below the mobile breakpoint the header is hidden
   and the rows are cards, so the box goes back to growing with the page. */
/* positioned at every width, so the jump buttons anchor to it */
.lg-pane { position: relative; }
@media (min-width: 681px) {
  /* The pane sits in normal flow — deliberately not sticky. The old sticky pane
     kept riding down the page after the reader scrolled past it, which is
     exactly how the table ended up painted over the chapter block. In flow, the
     wheel scrolls the table while the pointer is over it, chains to the page at
     either end (no overscroll containment), and the page carries the table away
     like any other block. */
  #lg-scroll {
    overflow: auto;
    /* dvh, so the pane does not resize under the row you are reading every time
       a phone's address bar slides away. The floor keeps it usable on a phone
       held sideways, where there is very little height to divide up. */
    max-height: max(260px, calc(100vh - var(--stick-top, 56px) - 16px));
    max-height: max(260px, calc(100dvh - var(--stick-top, 56px) - 16px));
  }
  /* The buried-columns hint that was promised and never shipped: a right-edge
     fade saying there is more table to the right, gone once you get there. */
  .lg-pane::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64px;
    pointer-events: none; border-radius: 0 var(--r-card) var(--r-card) 0;
    background: linear-gradient(to right, transparent,
      color-mix(in oklab, var(--paper) 88%, transparent) 55%, var(--paper));
    opacity: 1; transition: opacity 200ms;
  }
  .lg-pane.x-end::after { opacity: 0; }
  /* The company column holds while the rest of the table pans, so a row never
     loses its name. Solid backgrounds, because the other columns slide beneath. */
  #lg-table td.c-name, #lg-table thead th.c-name {
    position: sticky; left: 0; background: var(--paper); z-index: 3;
    box-shadow: inset -1px 0 var(--rule);
  }
  #lg-table thead th.c-name { z-index: 7; box-shadow: inset -1px 0 var(--rule), inset 0 -1px var(--rule); }
  #lg-table tbody tr:hover td.c-name { background: color-mix(in oklab, var(--cyan) 5%, var(--paper)); }
}
#lg-stats { margin-top: 10px; }
#lg-stats .num { font-weight: 700; color: var(--ink); }
#lg-table thead th {
  /* --th-top is the height of site chrome currently overlapping the pane's
     top edge, measured in ledger.js on every scroll: the headers hold just
     below the chrome instead of sticking out of sight beneath it. */
  position: sticky; top: var(--th-top, 0px); background: var(--paper); z-index: 5;
  /* the cell's own border scrolls away with the table; this rule does not */
  box-shadow: inset 0 -1px var(--rule);
}
#lg-table th button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
}
#lg-table th button:hover { color: var(--ink); }
#lg-table th .dir { font-size: 9px; }
#lg-table th[aria-sort="ascending"] button, #lg-table th[aria-sort="descending"] button { color: var(--cyan-text); }
#lg-table tbody tr.row { cursor: pointer; }
#lg-table tbody tr.row { content-visibility: auto; contain-intrinsic-size: auto 60px; }
body.compact #lg-table tbody tr.row { contain-intrinsic-size: auto 44px; }
body.compact #lg-table td { padding: 5px 10px; font-size: 13px; }
#lg-table td.c-name { font-weight: 700; }
#lg-table td .layer-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#lg-table td .layer-tag .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
#lg-table td.num-cell { font-family: var(--font-mono); font-size: 13px; text-align: right; white-space: nowrap; }
#lg-table td.c-signal, #lg-table td.c-sub { max-width: 320px; }
#lg-table td .clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
#lg-table tr.exited td.c-name span.nm { text-decoration: line-through; text-decoration-color: var(--muted); }
#lg-table tr[aria-expanded="true"] > td { background: color-mix(in oklab, var(--cyan) 7%, transparent); }

tr.detail > td { padding: 0; border-bottom: 1px solid var(--ink); background: var(--paper-2); }
/* One column, always. Nothing about a company should sit off to the right where
   the table's own horizontal scroll can hide it. */
.detail-inner { padding: 24px; max-width: 78ch; }
.detail-inner .d-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-inner .d-logo { width: 44px; height: 44px; flex: none; font-size: 16px; border-radius: 10px; }
.detail-inner .d-head .spoken-bar { margin: 0 0 0 auto; }
.detail-inner .d-site { margin-top: 12px; font-size: 13px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-inner .d-site a, .detail-inner .d-people a.li {
  display: inline; color: var(--cyan-text);
}
.detail-inner .d-quote { display: inline-flex; align-items: baseline; gap: 7px; }
.detail-inner .d-quote .tick { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.detail-inner .d-block { margin-top: 20px; }
.detail-inner .d-block h3 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.detail-inner .d-people { font-size: 13.5px; line-height: 1.8; }
.detail-inner ul.d-metrics { margin: 0; padding-left: 18px; }
.detail-inner ul.d-metrics li { font-size: 13.5px; line-height: 1.5; padding: 2px 0; }
.detail-inner .d-src div { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.detail-inner .d-src svg { flex: none; color: var(--muted); align-self: center; }
.detail-inner h3 { font-size: 20px; font-weight: 800; font-variation-settings: 'wdth' 112; }
.detail-inner .about { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.55; margin-top: 10px; max-width: 62ch; }
.detail-inner dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  font-size: 13.5px; margin-top: 14px;
}
.detail-inner dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.detail-inner dd { overflow-wrap: anywhere; }
.detail-inner .d-partners li { list-style: none; padding: 3px 0; font-size: 13.5px; }
.detail-inner .d-partners .pk { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-right: 6px; }
.detail-inner .d-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.detail-inner .d-src { font-size: 12.5px; }
.detail-inner .d-src a { color: var(--cyan-text); }

.lg-empty { padding: 48px 16px; text-align: center; color: var(--ink-2); }
.lg-empty .btn { margin-top: 14px; }

.sheet-toggle { display: none; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 680px) {
  #lg-table { min-width: 0; width: 100%; }
  /* The rows are cards here, not a grid of cells, so the header keeps only the
     two labels a card actually shows — and they are still the sort buttons.
     Nothing overflows sideways at this width, so #lg-scroll can stop being a
     scroll container and let the header stick to the page under the chrome. */
  #lg-scroll { overflow: visible; }
  #lg-table thead {
    display: block; position: sticky; top: var(--stick-top, 56px); z-index: 6;
    background: var(--paper);
  }
  #lg-table thead tr {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--rule);
  }
  #lg-table thead th { display: none; position: static; box-shadow: none; padding: 0; border: 0; }
  #lg-table thead th.c-name { display: block; grid-column: 1; }
  #lg-table thead th.c-funding { display: block; grid-column: 2; text-align: right; }
  #lg-table tbody tr.row {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    padding: 12px 4px; border-bottom: 1px solid var(--rule);
    contain-intrinsic-size: auto 86px;
  }
  #lg-table tbody tr.row td { display: none; border: 0; padding: 0; }
  #lg-table tbody tr.row td.c-name { display: block; grid-column: 1; font-size: 15px; white-space: normal; }
  #lg-table tbody tr.row td.c-cat { display: block; grid-column: 1; }
  #lg-table tbody tr.row td.c-region { display: block; grid-column: 1; color: var(--muted); font-size: 12.5px; }
  #lg-table tbody tr.row td.c-funding { display: block; grid-column: 2; grid-row: 1; text-align: right; }
  tr.detail > td { display: block; }
  .detail-inner { padding: 16px; }
  .sheet-toggle {
    display: inline-flex; position: fixed; bottom: 14px; right: 14px; z-index: 130;
    box-shadow: 0 10px 30px rgba(18, 19, 15, .25);
  }
  .lg-rail {
    display: none;
  }
  body.sheet-open .lg-rail {
    display: grid; position: fixed; inset: auto 0 0 0; z-index: 120;
    background: var(--paper); border-top: 1px solid var(--rule);
    border-radius: 16px 16px 0 0; padding: 16px;
    max-height: 72vh; overflow: auto;
    box-shadow: 0 -18px 48px rgba(18, 19, 15, .25);
  }
}

/* The company logo travels with the name, in the table and in the detail. The
   cell stays a table-cell so its border lines up with the rest of the row; the
   flex layout happens one level in.

   Two columns: the mark, then everything else. A long name wraps inside its own
   column beside the mark rather than pushing itself onto a line below and
   stranding the mark above it, and the spoken-with label sits under the name
   hugging its own text. Flex could not do the last part, because an item forced
   onto a new line by its basis is also stretched by it. */
#lg-table td.c-name { min-width: 218px; }
#lg-table td.c-name .nm-wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 5px 9px;
  /* it is a button now; keep the span's geometry */
  width: 100%; text-align: left;
}
#lg-table td.c-name .nm { grid-column: 2; }
#lg-table td.c-name .spoken-tag { grid-column: 2; justify-self: start; }
.row-logo { grid-column: 1; width: 26px; height: 26px; font-size: 10px; border-radius: 7px; }
/* Once the row is open the detail panel carries the same label a few pixels
   below, so the row's copy comes off rather than saying it twice. */
#lg-table tr.row[aria-expanded="true"] .spoken-tag { display: none; }

/* ------------------------------------------------------------- scroll nav */
/* Anchored inside the pane, not fixed to the window: the buttons ride the
   table's own corner and physically cannot float over the chapters below. */
.scroll-nav {
  position: absolute; right: 14px; bottom: 14px; z-index: 8;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
/* Inverted, like .btn.primary: a paper-coloured pill on the page's own dark
   surface reads at a glance in either theme, where a --paper-2 pill was a dark
   shape on a dark page in the dark one, its drop shadow doing nothing. */
.scroll-nav button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  cursor: pointer;
}
.scroll-nav button:hover { background: var(--cyan); border-color: var(--cyan-text); color: #12130F; }
.scroll-nav button:active { transform: translateY(1px); }
.scroll-nav svg { display: block; flex: none; }
@media (max-width: 680px) {
  /* On a phone the pane is the full table height (overflow: visible), so an
     absolute anchor would park these thousands of pixels down at the table's
     foot — they go back to fixed, riding the viewport where they are usable.
     The filters button owns the right-hand corner, so these sit on the left. */
  .scroll-nav {
    position: fixed; right: auto; left: 14px; bottom: 14px; z-index: 125;
    flex-direction: row;
  }
  .scroll-nav button { padding: 8px 11px; }
}
@media print { .scroll-nav { display: none; } }

/* An opened row scrolls to the top of the page, clear of the sticky chrome, so
   the company in focus is the first thing under it — and clear of the sticky
   column headers too. */
#lg-table tr.row { scroll-margin-top: calc(var(--stick-top, 96px) + 44px); }
@media (min-width: 681px) { #lg-table tr.row { scroll-margin-top: 44px; } }

.sheet-toggle { transition: opacity 160ms ease, visibility 160ms; }
/* The mobile filters button steps aside while the chapter block is on screen,
   so it never covers the links at the foot of the page. */
body.at-chapters .sheet-toggle { opacity: 0; visibility: hidden; pointer-events: none; }

/* ------------------------------------------------ passenger-autonomy grid */
/* Twelve companies is a grid, not a conveyor belt: five to a row, every card
   readable at once — logo, name, and its one-line claim stacked. */
.pa-strip { margin: 4px 0 22px; }
.pa-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pa-title {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; font-family: var(--font-mono); color: var(--ink-2);
}
.pa-more { font-size: var(--fs-xs); font-family: var(--font-mono); white-space: nowrap; }
.pa-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; margin-top: 10px;
}
.pa-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 12px; text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-card);
  transition: border-color 120ms, background 120ms;
}
.pa-card:hover { border-color: var(--cyan-text); }
.pa-logo { width: 34px; height: 34px; font-size: 13px; border-radius: 9px; flex: none; }
.pa-name { font-weight: 700; font-size: var(--fs-sm); }
.pa-tag { font-size: var(--fs-micro); color: var(--muted); line-height: 1.3; }
@media (max-width: 980px) { .pa-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .pa-row { grid-template-columns: repeat(2, 1fr); } }