/* ============================================================================
   Records page (leaf-2.1). Scoped to this page only: reuses design tokens
   from app.css (C2) but defines its own structural classes (.tbl, .res,
   .rec, .chip) rather than editing app.css/layout.css, which this leaf does
   not own. Breakpoint matches C8: phone is <=680px.
   ========================================================================= */

.records-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.records-head__text { max-width: 58ch; }
.records-head h1 {
  font-size: var(--fs-h1);
  margin: 6px 0 4px;
  line-height: 1.2;
}
.records-lede {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-body);
}
.records-head__actions { display: flex; gap: var(--sp-3); flex: none; }

/* ---- Filter panel --------------------------------------------------------
   web-interaction.md 1.2: anything with a known value set is pick-or-type.
   Brand (~46) and Steel (~40) are typed into a native <datalist> combo
   instead of rendered as chips; Result and Failure mode stay small chip
   sets (bounded, cheap to scan). Each group carries its own label so the
   four kinds of filter read as four things, not one 90-chip wall. */
.filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.filter-group + .filter-group {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-parch);
}
.filter-group__label {
  flex: none;
  min-width: 88px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.filter-group--pick {
  align-items: flex-end;
  gap: var(--sp-4) var(--sp-3);
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.filter-field label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.filter-input-wrap {
  position: relative;
  display: flex;
}
.filter-input-wrap .input {
  width: 100%;
  padding-right: 34px;
}
.filter-input-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.filter-input-clear:hover { color: var(--ink-strong, var(--ink)); background: var(--paper-faint); }
.filter-apply { flex: none; min-height: 44px; }  /* 2026-09-09: 36px failed the 44px tap floor (check_phone.py); scoped here, not on .btn--sm, which 26 admin controls share */
.filters-clear-all {
  align-self: flex-start;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--ink-muted);
  text-decoration: underline;
}
.filters-clear-all:hover { color: var(--ink-strong, var(--ink)); }

@media (max-width: 680px) {
  .filter-group { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .filter-group__label { min-width: 0; }
  .filter-group--pick { flex-direction: column; align-items: stretch; }
  .filter-apply { width: 100%; }
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-card);
  background: var(--paper-white);
  color: var(--ink-body);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .05em;
  padding: 6px 12px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 120ms var(--ease-out, ease-out), box-shadow 120ms var(--ease-out, ease-out);
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-chip, none); text-decoration: none; }
.chip.is-on {
  border-color: var(--lore-navy, var(--ink-strong));
  background: var(--lore-navy, var(--ink-strong));
  color: var(--parchment, #f0e7d5);
}

/* ---- Desktop table (>680px) --------------------------------------------- */
.records-table { overflow: hidden; }
.records-table__scroll {
  overflow-x: auto;   /* web-interaction.md 2.1: tables scroll, never clip */
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.tbl th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-strong, var(--ink));
  background: var(--paper-faint);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-parch);
  white-space: nowrap;
}
/* Sortable header buttons (shared helper, static/app.js initSortableTables):
   the th holds a full-bleed <button> so the whole header cell is the
   44px-tall click/keyboard target, per web-interaction.md 2.2. */
.tbl th[data-sort-type] { padding: 0; }
.tbl th.r .th-sort { justify-content: flex-end; text-align: right; }
.tbl .not-recorded { color: var(--ink-faint, var(--ink-muted)); font-style: italic; }
.tbl td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-parch);
  color: var(--ink-body);
  vertical-align: middle;
}
.tbl tr:nth-child(even) td { background: var(--paper-faint); }
.tbl .r { text-align: right; }
.tbl th.r { text-align: right; }
.tbl .steel { font-weight: 700; color: var(--ink-strong, var(--ink)); }
.tbl .muted { color: var(--ink-muted); }
.tbl .strong { font-weight: 700; color: var(--ink-strong, var(--ink)); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.res {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.res--p { background: var(--surface-success); border-color: var(--border-success); color: var(--success); }
.res--f { background: var(--surface-danger); border-color: var(--border-danger); color: var(--danger); }

.method {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--border-parch);
  background: var(--paper-faint);
}

.records-total {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}

/* ---- Phone stacked rows (<=680px), hidden on desktop -------------------- */
.records-list {
  display: none;
}
.rec {
  background: var(--paper-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}
.rec + .rec { margin-top: var(--sp-3); }
.rec__steel { font-weight: 700; color: var(--ink-strong, var(--ink)); font-size: var(--fs-small); }
.rec__brand { font-size: var(--fs-meta); color: var(--ink-muted); }
.rec__ang {
  grid-row: 1 / 3;
  font-size: 24px;
  font-weight: 700;
  color: var(--lore-navy, var(--ink-strong));
  line-height: 1;
  text-align: right;
}
.rec__ang small {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 3px;
}
.rec__meta {
  grid-column: 1 / 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-parch);
}
.records-empty {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  padding: var(--sp-4) 0;
}

@media (max-width: 680px) {
  .records-table { display: none; }
  .records-list { display: block; }
  .records-head { flex-direction: column; align-items: stretch; }
  .records-head__actions { flex-direction: column; }
  .records-head__actions .btn { width: 100%; }
}