/* ==========================================================================
   ALL RECEIPTS — the v3 design (site design v3 A7.4, gta-org
   openspec/changes/design-v3-records). records-v3.css at design pin d40fdfc,
   verbatim below this header. The row itself is .rrow from rows.css — the
   same component the home page renders, so the two lists cannot drift.
   Everything here is the apparatus AROUND the list: the masthead, the
   filters, the counter. Loaded only by records/index.html, after tokens/base/
   tracker-shell/rows.
   ========================================================================== */

.recs { padding-block: clamp(28px, 4vw, 52px) clamp(40px, 6vw, 76px); }
.recs__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* --- masthead ------------------------------------------------------------ */
.recs__head { padding-bottom: 4px; }   /* the rule under the h1 was cut 2026-09-11 */
.recs__head h1 {
  font: 700 clamp(1.8rem, 1.3rem + 2vw, 3rem)/1.05 var(--display);
  letter-spacing: -.045em;
}
/* (the standfirst under the h1 was cut 2026-09-11) */

/* --- filters — ink-ruled, not chrome ------------------------------------- */
.recs__tools {
  display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px);
  flex-wrap: wrap;
  padding-block: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span {
  font: 700 .64rem/1 var(--display);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.field--grow { flex: 1 1 17rem; }

.recs__q, .recs__sel {
  height: 46px;
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  color: var(--ink);
  font: 500 .95rem/1 var(--body);
  padding: 0 13px;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.recs__q::placeholder { color: var(--ink-3); }
.recs__q:focus-visible, .recs__sel:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.recs__sel {
  padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* desk is three options, so it's a segmented control, not a menu */
.seg { display: flex; }
.seg button {
  height: 46px; padding: 0 16px;
  border: 2px solid var(--ink); border-right-width: 0;
  background: var(--paper-hi); color: var(--ink);
  font: 700 .7rem/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.seg button:last-child { border-right-width: 2px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button[data-desk="Money"][aria-pressed="true"] { background: var(--gold-deep); border-color: var(--gold-deep); }
.seg button[data-desk="Power"][aria-pressed="true"] { background: var(--red);       border-color: var(--red); }
.seg button:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

.recs__clear {
  height: 46px; padding: 0 4px;
  border: 0; background: none; color: var(--ink-2);
  font: 700 .68rem/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.recs__clear[hidden] { display: none; }

/* --- count ---------------------------------------------------------------- */
.recs__count {
  padding-block: 16px;
  font: 500 .8rem/1.4 var(--mono);
  letter-spacing: .04em; color: var(--ink-2);
}
.recs__count b { color: var(--ink); font-weight: 700; }

/* --- the list ------------------------------------------------------------- */
.recs__list { border-top: 2px solid var(--ink); }
/* the year rule was cut 2026-09-11 — the dates already carry the chronology */
.recs__empty {
  padding: 46px 0; text-align: center;
  font: 400 1.05rem/1.5 var(--editorial); color: var(--ink-2);
}
.recs__empty b { display: block; margin-bottom: 6px; font-family: var(--display); color: var(--ink); }

@media (max-width: 620px) {
  .recs__tools { gap: 14px; }
  .field--grow { flex-basis: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 0 8px; }
}