/* Integra — records table. Loads after app.css on dashboard.html but must
   stand alone, so the hover wash falls back locally. Hairlines only — no
   boxes, no shadows. Compact: 13px rows, var(--s2) var(--s3) cell padding. */

.integra-table {
  /* tokens.css defines --row-hover per theme; the fallback keeps this sheet
     standalone if it is ever loaded without the token layer. */
  --tbl-hover: var(--row-hover, #F3F3F6);
}

/* ---- Controls row: platform chips + Export CSV ---- */

.itbl-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin: 0 0 var(--s4);
}

.itbl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.itbl-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.itbl-chip:hover { color: var(--ink); border-color: var(--graphite); }

.itbl-chip[aria-pressed="true"] {
  color: var(--blurple-text);
  border-color: var(--blurple-text);
}

/* Ghost button, compact — sits at the right edge of the chips row. */
.itbl-export {
  margin-left: auto;
  padding: 8px 14px;
  font-size: 13px;
}

/* On a phone the six chips wrap onto two rows and `margin-left: auto` keeps
   pushing, so the button lands on a third row of its own, hard right, with
   ~300px of empty space beside it — the only right-aligned element on a page
   that left-aligns everything. Left margin, directly under the chips. */
@media (max-width: 640px) {
  .itbl-export { margin-left: 0; }
}

/* ---- Table ---- */

/* The table only goes in a scroll container where it cannot fit the content
   column — because a scroll container is the containing block for any
   `position: sticky` descendant. While this div was `overflow-x: auto` the
   sticky thead below resolved `top: 0` against the div, and since the div is
   exactly as tall as the table (scrollHeight === clientHeight) it never
   scrolled internally, so the header never moved: measured at scrollY 1200 the
   th sat at -937px, leaving 234 rows of bare figures with no column names.
   Measured min-content width of the table is 1029px. The content column is
   viewport − 2 × clamp(16px, 4vw, 48px) — 0.92 × viewport up to --page-max —
   so the table fits unaided from about 1120px; 1180px leaves ~56px of slack for
   longer captions and fallback-font metrics. Above that the wrapper is not a
   scroll container at all and the header sticks to the viewport (#app-header is
   position: static, so top: 0 is the right offset). Below it the wrapper takes
   a real height and scrolls in BOTH axes, so the header sticks to the top of
   that pane instead — verified at 622px: th top − wrapper top = 0 after
   scrolling 1500px inside it, and the page itself never scrolls sideways. */
.itbl-scroll { overflow: visible; }

@media (max-width: 1180px) {
  .itbl-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 180px);
    overscroll-behavior: contain;
  }
}

.itbl-table {
  width: 100%;
  min-width: 680px;
  /* separate, not collapse: collapsed borders detach from position:sticky headers */
  border-collapse: separate;
  border-spacing: 0;
}

.itbl-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--graphite);
  white-space: nowrap;
}

/* Sortable headers are real buttons; they inherit the label styling above. */
.itbl-sort {
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.itbl-sort:hover { color: var(--ink); }

/* Active sort arrow (↑/↓ text chars). 1ch slot reserved — no layout shift. */
.itbl-arrow {
  display: inline-block;
  min-width: 1ch;
  margin-left: var(--s1);
}

.itbl-table td {
  font-size: 13px;
  line-height: 1.5;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

/* Cell padding belongs BETWEEN columns, never outside the first and last: with
   it there the table sat 12px inside the content column on both edges, so the
   DATE header stepped in from the ALL chip above it and the LINK column stopped
   short of Export CSV. Zeroed, the table shares the exact left and right edges
   of the chips, the section label and every hairline on the page. */
.itbl-table th:first-child,
.itbl-table td:first-child { padding-left: 0; }

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

/* Same quiet hover wash as the feed and account rows. */
.itbl-table tbody tr:hover td { background: var(--tbl-hover); }
.itbl-table tbody tr.itbl-empty:hover td { background: transparent; }

.itbl-date { white-space: nowrap; }

.itbl-platform { white-space: nowrap; }

.itbl-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: var(--s2);
  color: var(--ink);
}
.itbl-glyph svg { display: block; width: 16px; height: 16px; }

.itbl-account { font-size: 13px; white-space: nowrap; }

/* One line, ellipsis, capped around 48 characters. */
.itbl-caption {
  max-width: 48ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Numeric columns: right-aligned mono (cells carry .data from base.css). */
th.itbl-num, td.itbl-num { text-align: right; }
td.itbl-num { white-space: nowrap; }

th.itbl-link, td.itbl-link { text-align: right; }
td.itbl-link a { white-space: nowrap; }

.itbl-empty td {
  color: var(--graphite);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: var(--s4) var(--s3);
}

/* ---- Footer line ---- */

.itbl-foot {
  font-size: 12px;
  color: var(--graphite);
  margin: var(--s3) 0 0;
  max-width: none;
}