/* --------------------------------------------------------------------------- Filter bar --- */
/*
 * A plain GET form. No client state: the page a reader is looking at is the page they can paste,
 * which is the whole point of an artifact meant to be cited.
 */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
  margin: var(--s4) 0;
  padding: var(--s3) 0;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.filters select,
.filters input[type="checkbox"] {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  background: var(--card);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r);
  padding: 6px 8px;
}

.filters input[type="checkbox"] { padding: 0; }

/* The permalink rendered AS TEXT, so a screenshot carries its own citation. */
.as-of__perma { color: var(--fg-3); }

/* ------------------------------------------------------------------- Narrow transpose --- */
/*
 * P6: narrow carries the SAME data as wide. No truncated feature set, no "see full table on
 * desktop". The row transposes into stacked label/value pairs and every field survives.
 *
 * The labels come from the header row via `data-k` on each cell, so there is one markup and the
 * two layouts cannot drift apart. A horizontally scrolling table on a phone hides the comparison,
 * which on this site is the entire content.
 */
@media (max-width: 720px) {
  .rows thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /*
   * ── THE LABEL GUTTER ────────────────────────────────────────────────────────────────────────
   *
   * One width for every label on the page, declared once here. Each transposed cell is its own
   * formatting context, so without a fixed gutter every value starts at a different x — the value
   * beside "AMM MID" indented three characters and the one beside "CHAINLINK TRV" indented
   * thirteen. A column of values that does not line up is not a column, and lining them up is the
   * entire reason the wide table is a table.
   */
  .rows { --k-col: 118px; }

  .rows tr {
    display: block;
    border-top: var(--hair) solid var(--rule);
    padding-block: var(--s2);
  }

  .rows td,
  .rows th {
    display: block;
    /*
     * `height: var(--row-h)` from 40-primitives.css has to be released here, and it is a HEIGHT
     * rather than a min-height, so it does not simply lose to taller content. Left on, every field
     * of every row was a 48px band on a phone and one ticker ran to 336px of mostly empty space.
     */
    height: auto;
    border: 0;
    padding-inline: 0;
    text-align: left;
  }

  /*
   * ── THE LABEL COMES FROM `data-k`, AND EVERY CELL MUST CARRY ONE ────────────────────────────
   *
   * The label/value pair is applied only to cells that HAVE the attribute. It used to be applied to
   * every `td` unconditionally, with `content: attr(data-k)` reading an attribute no view in the
   * app actually set — so under 720px every table on the site rendered as a column of bare values
   * with an empty label column beside them, and nothing anywhere threw. That is the whole of the
   * "narrow is broken" bug.
   *
   * Scoped to `[data-k]` now, so the two headerless key/value tables on /status (whose row header
   * IS the label) and the empty-state row on /stalls lay out as plain blocks instead of growing a
   * phantom column.
   *
   * FLEX RATHER THAN GRID, and the reason is bare text. Several cells render a value with no
   * wrapping element at all — a venue name, a swap count, "Watched it land". In a grid each of
   * those becomes an anonymous item that auto-places into the LABEL column of the next row, which
   * puts the value under its own label instead of beside it. A flex line takes them in order.
   */
  .rows td[data-k],
  .rows th[data-k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s3);
    padding-block: 5px;
  }

  .rows td[data-k]::before,
  .rows th[data-k]::before {
    content: attr(data-k);
    flex: 0 0 var(--k-col);
    font: 500 10px/1.2 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
  }

  /*
   * The second line of a cell — a company name under a ticker, the dollar reading under a bps chip,
   * the two sides of a book under its depth. It takes a line of its own and indents to the value
   * column, so it reads as a note on the value above rather than as another value.
   */
  .rows [data-k] .rows__sub {
    flex-basis: 100%;
    margin-left: calc(var(--k-col) + var(--s3));
    margin-top: 2px;
  }

  /*
   * ── STALL HISTORY IS THE ONE TABLE THE TRANSPOSE GETS WRONG ─────────────────────────────────
   *
   * The label/value transpose above is right for a table of a few rows: the dashboard's four, the
   * one-row venue table. Stall history is many rows of six fields, and at one stacked pair per
   * field it rendered as an unbroken column of label/value lines — every window six lines tall,
   * with nothing marking where one window ended and the next began, and no way to compare two
   * durations without scrolling between them. Twenty-five windows made 150 lines.
   *
   * A WINDOW IS ONE BLOCK. Duration leads at reading size because it is what the row is about, the
   * start and the session sit beside it as its dateline, and the three measurements wrap
   * underneath as small labelled pairs. Four lines instead of twelve, and the rule between rows
   * does the separating.
   *
   * Built on `order` rather than on markup, so the wide table keeps the column order its header
   * promises and the narrow one is purely a restatement of the same cells.
   */
  .rows--stalls tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--s4);
    padding-block: var(--s3);
  }

  .rows--stalls tbody td[data-k] {
    width: auto;
    flex: 0 0 auto;
    gap: 0 var(--s1);
    padding-block: 0;
  }

  .rows--stalls tbody td[data-k]::before {
    flex: 0 0 auto;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--fg-4);
  }

  /* The dateline: duration first and largest, then when and which session. No labels — "8h 54m"
     and "overnight" say what they are, and a label on each would be three quarters of the line. */
  .rows--stalls tbody td[data-k="Duration"] {
    order: -3;
    flex-basis: 100%;
    font-size: 19px;
    font-weight: 500;
    color: var(--fg);
  }
  .rows--stalls tbody td[data-k="Start"] { order: -2; color: var(--fg-4); }
  .rows--stalls tbody td[data-k="Session"] { order: -1; color: var(--fg-4); }

  .rows--stalls tbody td[data-k="Duration"]::before,
  .rows--stalls tbody td[data-k="Start"]::before,
  .rows--stalls tbody td[data-k="Session"]::before { content: none; }

  /* The dateline gets its own line; the three measurements wrap onto the next. */
  .rows--stalls tbody td[data-k="Swaps"] { flex-basis: 100%; }
  .rows--stalls tbody td[data-k="Swaps"],
  .rows--stalls tbody td[data-k="Peak"],
  .rows--stalls tbody td[data-k="Oracle move"] { display: inline-flex; }
  .rows--stalls tbody td[data-k="Swaps"] { flex-basis: auto; }

  /* Qualified for the same reason as the right-alignment it overrides. See 40-primitives.css. */
  .rows th.rows__num,
  .rows td.rows__num { text-align: left; }

  .filters { flex-direction: column; align-items: stretch; }

  /*
   * ── THE SORT CONTROL SURVIVES THE TRANSPOSE ────────────────────────────────────────────────
   *
   * The instrument table sorts from its own header cells, and the rule above clips the whole
   * header row away on a narrow screen. Left at that, sorting would be a desktop-only feature on
   * the one page the whole site is about — and P6 says narrow carries the same data as wide.
   *
   * So the header row comes back, as a wrapped strip of the sortable columns only. Same markup,
   * one source of truth, and no second control to keep in step with the first. The columns that do
   * not sort stay hidden: their labels are already printed beside their values by the transpose,
   * and repeating them here would be a row of words that do nothing when clicked.
   *
   * Declared AFTER the clip above, at the same specificity, which is what lets it win. Keep the
   * two blocks in this order.
   */
  .rows--instrument thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    display: block;
    border-bottom: var(--hair) solid var(--rule);
  }

  .rows--instrument thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    border: 0;
    padding-block: var(--s2);
  }

  .rows--instrument thead th { display: none; }

  .rows--instrument thead th.rows__sortable {
    display: block;
    min-height: 0;
    padding: 0;
  }

  /*
   * ── ON A PHONE THESE ARE BUTTONS, SO THEY HAVE TO LOOK LIKE BUTTONS ───────────────────────────
   *
   * The transpose turns the header row into the table's only control, and it was drawn as four
   * bare words inside a TRANSPARENT border: nothing said they could be tapped, and the only one
   * with an outline was the one already active — the exact inverse of what an affordance is for.
   *
   * A visible hairline on all four is what makes them read as a set of options. 40px min-height
   * is the tap target the bare words never had (--row-h is 48px on this canvas for the same
   * reason), and 11px lifts the label off the 10px floor it shares with axis ticks, which matters
   * more here than in the wide table because here it is the thing you are aiming at.
   */
  .rows--instrument thead .th-sort {
    width: auto;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
    border: var(--hair) solid var(--rule);
  }

  .rows--instrument thead .th-sort__arrow { font-size: 12px; }

  /* Colour is never the only signal: the active chip is the accent AND the only filled-weight
     label in the row, so the current sort survives a greyscale screenshot. */
  .rows--instrument thead .th-sort--on { border-color: var(--accent); font-weight: 600; }
}