/* Rockwall Sports Cards
   Brand: orange #e07a2d + charcoal #3c3c3e, geometric sans (Poppins), white stock.
   Dense reference list. Density is still the point -- every rule here has to survive 10,000 rows. */

:root {
  color-scheme: light dark;

  /* The logo's own inks, sampled from the store logo file. Never shift between themes. */
  --brand-orange: #e07320;
  --brand-charcoal: #363736;

  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-alt: #f1ece6;
  --text: #26262a;
  --muted: #5d5d63;
  --faint: #8a8a90;
  --line: #e4e0da;
  --line-strong: #cbc5bc;

  /* Brand orange is only 3.2:1 on white, so text uses a darkened cousin and
     --accent-graphic keeps the true ink for rules, bars and fills. */
  --accent: #af5a19;
  --accent-graphic: var(--brand-orange);
  --accent-soft: #fbf1e7;

  --bar-bg: var(--brand-charcoal);
  --bar-text: #ffffff;
  --bar-muted: #b9b6b2;
  --bar-faint: #aeaba8;
  --bar-line: #55555a;
  --on-accent: #201305;

  --radius: 4px;

  --font-display: "Poppins", "Century Gothic", "Futura", Helvetica, Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141417;
    --surface: #1c1c20;
    --surface-alt: #26262b;
    --text: #eceae7;
    --muted: #a8a5a1;
    --faint: #82807d;
    --line: #2e2e34;
    --line-strong: #464650;

    --accent: var(--brand-orange);
    --accent-soft: #2a1a0c;

    --bar-bg: #202024;
    --bar-text: #ffffff;
    --bar-muted: #a8a5a1;
    --bar-faint: #8d8a87;
    --bar-line: #35353b;
    --on-accent: #201305;
  }
}

:root[data-theme="dark"] {
  --bg: #141417;
  --surface: #1c1c20;
  --surface-alt: #26262b;
  --text: #eceae7;
  --muted: #a8a5a1;
  --faint: #82807d;
  --line: #2e2e34;
  --line-strong: #464650;

  --accent: var(--brand-orange);
  --accent-soft: #2a1a0c;

  --bar-bg: #202024;
  --bar-text: #ffffff;
  --bar-muted: #a8a5a1;
  --bar-faint: #8d8a87;
  --bar-line: #35353b;
  --on-accent: #201305;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* Opt-out of the reading column, for pages whose content is a wide table rather than
   prose. The brand bar, masthead and footer keep the normal width, so the page still
   reads as the same site. */
.wrap.is-wide { max-width: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent-graphic);
  color: var(--on-accent);
  font-weight: 600;
}

.skip-link:focus { left: 0; }

/* ---------- Brand bar ---------- */

.site-bar {
  background: var(--bar-bg);
  border-bottom: 3px solid var(--accent-graphic);
}

.site-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-block: 14px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--bar-text);
  text-decoration: none;
}

.site-brand-lockup { display: block; height: 52px; width: auto; }

.site-brand-mark { display: block; height: 42px; width: auto; flex: 0 0 auto; }

/* The type lockup, used until a real logo export is dropped into /assets. */
.site-brand-type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.site-brand-name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.site-brand-sub {
  margin-top: 4px;
  color: var(--bar-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- Store links ---------- */

.store-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.store-links-label {
  margin: 0 2px 0 0;
  color: var(--bar-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.store-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bar-text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.store-link:hover {
  border-color: var(--accent-graphic);
  background: var(--accent-graphic);
  color: var(--on-accent);
}

.store-link-primary {
  border-color: var(--accent-graphic);
  background: var(--accent-graphic);
  color: var(--on-accent);
}

.store-link-primary:hover { filter: brightness(1.08); }

.store-link::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  background: currentColor;
  /* Outbound arrow, drawn so it needs no extra request. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 100%, 82% 30%, 14% 98%, 0 84%, 68% 16%, 0 16%);
  opacity: 0.75;
}

/* ---------- Masthead ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }

.site-masthead { padding-block: 26px 20px; }

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 12px;
  background: var(--accent-graphic);
}

.page-tagline {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 14px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 18px;
}

.site-nav-link {
  padding: 6px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav-link:hover { background: var(--surface-alt); color: var(--text); }
.site-nav-link.is-current { background: var(--brand-charcoal); color: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-nav-link.is-current {
    background: var(--accent-graphic);
    color: var(--on-accent);
  }
}

:root[data-theme="dark"] .site-nav-link.is-current {
  background: var(--accent-graphic);
  color: var(--on-accent);
}

/* ---------- Sticky jump bar ---------- */

.wl-jumps {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-inline: -20px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(8px)) {
  .wl-jumps { backdrop-filter: blur(8px); }
}

.wl-jump {
  padding: 3px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wl-jump:hover { border-color: var(--accent); color: var(--accent); }

.wl-jump.is-active {
  background: var(--accent-graphic);
  border-color: var(--accent-graphic);
  color: var(--on-accent);
}

/* ---------- Tab sections ---------- */

.wl-tab { margin-block: 34px; }

.wl-tab-heading {
  margin: 0 0 16px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--accent-graphic);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Set from the measured jump bar in site.js; the fallback covers the no-JS case. */
  scroll-margin-top: var(--wl-bar-h, 48px);
}

/* ---------- One set ---------- */

.wl-set {
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.wl-set:hover { border-left-color: var(--accent-graphic); }

.wl-set-heading {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Format 1 -- inline run of numbers */
.wl-inline {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Format 2 -- auto-width number columns (--wl-col-min set per block) */
.wl-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wl-col-min, 60px), 1fr));
  gap: 1px 18px;
  margin-top: 4px;
}

/* Format 3 -- number + description */
.wl-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 22px;
  margin-top: 4px;
}

.wl-detail-item {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}

.wl-num {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.wl-desc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Upgrades ---------- */

.wl-upgrades {
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.wl-upgrades-heading {
  margin: 0 0 2px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wl-upgrades-list {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- Tradelist: mode pills ---------- */

.tl-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 18px;
}

.tl-mode {
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

a.tl-mode:hover { border-color: var(--accent); color: var(--accent); }

.tl-mode.is-current {
  background: var(--accent-graphic);
  border-color: var(--accent-graphic);
  color: var(--on-accent);
}

/* ---------- Tradelist: search ---------- */

.tl-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Rendered hidden and unhidden by site.js, so it never shows without the code behind
   it. A class selector outranks the browser's own [hidden] rule, so it has to say this. */
.tl-search-wrap[hidden] { display: none; }

.tl-search-label {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tl-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.tl-search:focus-visible {
  outline: 2px solid var(--accent-graphic);
  outline-offset: 1px;
  border-color: var(--accent-graphic);
}

.tl-search-count {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tradelist: table ---------- */

/* Thousands of rows in one table, so the whole thing has to stay cheap: no shadows,
   no per-cell borders, one hairline rule per row.

   No overflow container here on purpose. overflow-x: auto computes overflow-y to auto
   as well, which makes this div the sticky header's scroll container -- and since the
   div itself never scrolls vertically, the header would scroll away with the page and
   stick to nothing. Wide screens therefore fit the table by letting the two long text
   columns wrap; only the narrow breakpoint, where ten columns cannot fit at any width,
   trades the sticky header for horizontal scrolling. */
.tl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tl-table th,
.tl-table td {
  padding: 4px 9px;
  text-align: left;
  white-space: nowrap;
}

/* The header rides under the sticky jump bar, whose real height site.js measures into
   --wl-bar-h. Mode 0 has no jump bar and never sets it, hence the 0px fallback. */
.tl-table thead tr:first-child th {
  position: sticky;
  top: var(--wl-bar-h, 0px);
  z-index: 5;
  background: var(--bar-bg);
  color: var(--bar-text);
  /* Once the filter row has scrolled under it, this is what keeps the floating header
     from blending into the rows passing behind it. */
  box-shadow: inset 0 -2px 0 var(--accent-graphic);
}

.tl-filter-row th {
  background: var(--bar-bg);
  color: var(--bar-text);
}

/* The long free-text columns wrap so the table fits without a horizontal scrollbar;
   everything else is short enough to stay on one line. */
.tl-table .tl-col-card,
.tl-table .tl-col-player,
.tl-table .tl-col-set {
  white-space: normal;
  min-width: 11ch;
}

/* The whole card as one string, and the widest thing in the table by far. It gets the
   room it needs and the split columns after it stay compact. */
.tl-table .tl-col-card { min-width: 22ch; }

.tl-sortable {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tl-sortable:hover { color: var(--brand-orange); }

.tl-sortable:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: -2px;
}

.tl-sort-icon {
  margin-left: 5px;
  font-size: 9px;
  opacity: 0.5;
}

.tl-sortable[aria-sort="ascending"] .tl-sort-icon,
.tl-sortable[aria-sort="descending"] .tl-sort-icon {
  color: var(--brand-orange);
  opacity: 1;
}

.tl-filter-row th {
  padding: 3px 5px;
  border-bottom: 2px solid var(--accent-graphic);
}

.tl-filter {
  width: 100%;
  min-width: 68px;
  max-width: 190px;
  padding: 2px 4px;
  border: 1px solid var(--bar-line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
}

/* Without JavaScript no row is ever hidden, so "every other row" is correct. Once the
   script runs it takes over the striping (.js-striped) and counts only visible rows --
   with a filter applied, nth-child stripes look randomly assigned. */
.tl-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.tl-table.js-striped tbody tr { background: transparent; }
.tl-table.js-striped tbody tr.tl-alt { background: var(--surface-alt); }
.tl-table tbody tr:hover,
.tl-table.js-striped tbody tr:hover { background: var(--accent-soft); }

.tl-table tbody td { border-bottom: 1px solid var(--line); }

/* Numbers line up column-wise: card numbers and serials. */
.tl-col-card-number,
.tl-col-serial-number {
  font-variant-numeric: tabular-nums;
}

/* The flag columns hold one short token each ("Yes", "RC", "99") and only need to be
   wide enough for their own heading. */
.tl-col-auto,
.tl-col-relic,
.tl-col-rookie,
.tl-col-grade,
.tl-col-serial-number { width: 1%; }

.tl-section { margin-block: 26px; }

.tl-count {
  color: var(--faint);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tl-count::before { content: "("; }
.tl-count::after { content: ")"; }

/* ---------- Notices ---------- */

.wl-notice,
.wl-error,
.wl-empty {
  margin: 20px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent-graphic);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text);
}

.wl-error p, .wl-notice { margin: 0; }

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

.site-footer {
  margin-top: 46px;
  border-top: 3px solid var(--accent-graphic);
  background: var(--bar-bg);
  color: var(--bar-muted);
  font-size: 12px;
}

.site-footer .wrap { padding-block: 26px 30px; }

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bar-line);
}

.site-footer-meta { margin: 18px 0 4px; }
.site-footer-legal { margin: 0; color: var(--bar-faint); }

.site-footer a { color: var(--bar-text); }

/* ---------- Footer promo ---------- */

/* House ad for my other site, between the footer's brand row and the meta line. Built
   from the same --bar-* inks as the rest of the footer so it reads as part of the site
   rather than a bought placement -- and those inks are charcoal in both themes, so the
   knocked-out lockup needs no light-mode variant. */
.site-promo { margin-top: 18px; }

.site-promo-label {
  margin: 0 0 7px;
  color: var(--bar-muted);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-promo-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-promo-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 13px;
  max-width: 100%;
  text-decoration: none;
}

/* A common width for the logo/wordmark column, so the pitches line up as a column of
   their own rather than starting at a different place on every row. Dropped once the
   rows wrap, where there is no second column to line up with. */
.site-promo-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 158px;
}

.site-promo-logo {
  height: 30px;
  width: auto;
}

/* Used when a site has no logo, and as the fallback when its file is missing. Sized to
   sit level with the cap height of the lockup beside it rather than the lockup's full
   box, which includes the mark -- matching the box would make the type shout. */
.site-promo-type {
  color: var(--bar-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-promo-type-accent { color: var(--accent-graphic); }

.site-promo-pitch {
  color: var(--bar-muted);
  font-size: 12px;
}

.site-promo-link:hover .site-promo-pitch { color: var(--bar-text); }

/* Same outbound arrow as .store-link, on the pitch rather than the link, so it stays
   glued to the end of the sentence when the strip wraps. */
.site-promo-pitch::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 100%, 82% 30%, 14% 98%, 0 84%, 68% 16%, 0 16%);
  opacity: 0.75;
}

/* ---------- Focus ---------- */

a:focus-visible {
  outline: 2px solid var(--accent-graphic);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-bar a:focus-visible, .site-footer a:focus-visible { outline-color: #fff; }

/* ---------- Narrow screens ---------- */

/* Below roughly this width the tradelist's columns no longer fit however hard they wrap
   -- measured, not guessed: the table's minimum is about 930px plus the page gutters,
   and the rest is headroom for a fallback font rendering wider than Poppins. From here
   down it scrolls sideways inside its own box instead of pushing the whole page
   sideways. That box then becomes the sticky header's scroll container, so the header
   stops sticking; the right trade at a width where it is only ever a screen or two
   away.

   Re-measure this whenever tradelist_columns changes -- in the browser console:
     t = document.querySelector('.tl-table'); t.style.width = 'min-content';
     t.getBoundingClientRect().width  // then add the 40px gutters, plus headroom */
@media (max-width: 1020px) {
  .tl-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .tl-table thead tr:first-child th { position: static; }
  .tl-table .tl-col-card,
  .tl-table .tl-col-player,
  .tl-table .tl-col-set { white-space: nowrap; }
}

@media (max-width: 760px) {
  .site-bar-inner { justify-content: flex-start; }
  .store-links-label { width: 100%; margin-bottom: -4px; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .wl-jumps { margin-inline: -16px; padding-inline: 16px; }
  .page-title { font-size: 26px; }
  .wl-tab-heading { scroll-margin-top: var(--wl-bar-h, 112px); }
  .wl-detail { grid-template-columns: 1fr; }
  .wl-set { padding-left: 10px; }
  .tl-search { max-width: none; }
  .tl-scroll { margin-inline: -16px; padding-inline: 16px; }
  .site-brand-lockup { height: 40px; }
  .site-brand-mark { height: 34px; }
  .site-brand-name { font-size: 19px; }
  .site-brand-sub { font-size: 9px; letter-spacing: 0.26em; }
  .store-link { font-size: 11px; padding: 6px 12px; }
  .site-promo-list { gap: 14px; }
  .site-promo-brand { min-width: 0; }
  .site-promo-logo { height: 26px; }
  .site-promo-type { font-size: 14px; }
}

/* ---------- Print ---------- */

@media print {
  .wl-jumps, .site-nav, .store-links, .site-footer-legal, .site-promo { display: none; }
  .tl-modes, .tl-search-wrap, .tl-filter-row, .tl-sort-icon { display: none; }
  body { background: #fff; color: #000; font-size: 10px; }
  .site-bar, .site-footer { background: #fff; color: #000; }
  .wl-tab { break-inside: avoid-page; }
  .tl-scroll { overflow: visible; }
  .tl-table { font-size: 9px; }
  .tl-table thead th { position: static; background: #fff; color: #000; }
  .tl-table tbody tr:nth-child(even) { background: #fff; }
}