/* Rod Riggs — GENERATED by tools/build-roddriggs.mjs.
   Colour comes from data/site.json `palette`; the grid half is tools/lib/fishmag-grid.css,
   shared with admin.fishmag.uk so the two cannot drift. Nothing here is hand-edited. */

:root {
  --hd-ink: #1d2b31;
  --hd-ground: #f6f2e8;
  --hd-deep: #20404c;
  --hd-accent: #c2763a;
  --hd-rule: #cbbb98;
  --hd-display: "Fraunces", Georgia, "Times New Roman", serif;
  --hd-body: "Inter", -apple-system, system-ui, sans-serif;
}

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

/* The engine's blocks.css sets body{padding:2rem} — right for a demo gallery, wrong for a site. */
body { margin: 0; padding: 0; background: var(--hd-ground); color: var(--hd-ink);
  font-family: var(--hd-body); line-height: 1.6; }

/* ── THE CATALOGUE, AS AN ADMIN TOOL ────────────────────────────────────────────────────────────
   Utility, not brand. A system font at a size you can read all day, rows on a real grid separated
   by one faint line, numbers in tabular figures so columns line up, and nothing decorative that
   costs vertical space. Shared by roddriggs.com and admin.fishmag.uk. */

:root {
  --ad-ink:   #1a1d21;
  --ad-mut:   #5c636b;
  --ad-line:  #e2e5e9;   /* the faint gridline — deliberately quiet */
  --ad-line2: #cdd3da;
  --ad-tint:  #f4f6f8;
  --ad-ground:#ffffff;
  --ad-link:  #1d4ed8;
  --ad-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ad-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body { background: var(--ad-ground); color: var(--ad-ink); font-family: var(--ad-ui);
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

.ad-band { padding-block: 1rem; border-bottom: 1px solid var(--ad-line); }
.ad-band-tint { background: var(--ad-tint); }
.ad-wrap { width: min(1600px, 100% - 2rem); margin-inline: auto;
  display: flex; flex-direction: column; gap: .6rem; }

.ad-h { font-family: var(--ad-ui); font-size: 1.25rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.ad-lead { margin: 0; max-width: 90ch; color: var(--ad-mut); }

/* the counts strip */
.qx-container.ad-stats { display: grid; gap: 1px; background: var(--ad-line);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); border: 1px solid var(--ad-line); }
.qx-container.ad-stat { display: flex; flex-direction: column; gap: 0; padding: .5rem .7rem; background: var(--ad-ground); }
.ad-stat-v { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-stat-k { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-mut); }

.ad-note { margin: 0; padding: .5rem .65rem; border-left: 3px solid var(--ad-line2);
  background: var(--ad-tint); color: var(--ad-mut); max-width: 100ch; }

/* filters — one row per facet, chips that combine */
.qx-container.ad-facet { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.ad-facet-label { flex: 0 0 6.5rem; font-size: .72rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ad-mut); }
.qx-link.ad-chip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .12rem .45rem;
  border: 1px solid var(--ad-line2); border-radius: 3px; background: var(--ad-ground);
  color: var(--ad-ink); text-decoration: none; font-size: .8rem; }
/* "Any" is an action — it clears that row — so it should not look like one more value to pick. */
.qx-link.ad-chip-all { font-weight: 650; border-style: dashed; color: var(--ad-link); }
.qx-link.ad-chip-all.ad-chip-on { background: var(--ad-ground); border-style: solid;
  border-color: var(--ad-ink); color: var(--ad-ink); }
.ad-chip-n { color: var(--ad-mut); font-variant-numeric: tabular-nums; font-size: .72rem; }
@media (hover: hover) { .qx-link.ad-chip:hover { border-color: var(--ad-link); color: var(--ad-link); } }
.qx-link.ad-clear { align-self: flex-start; color: var(--ad-link); font-size: .8rem; }

.ad-count { margin: 0; color: var(--ad-mut); font-variant-numeric: tabular-nums; }

/* THE TABLE. One grid, six columns, a single faint line between rows — no card, no shadow, no gap. */
.qx-container.ad-rows { display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--ad-line); border-radius: 3px; overflow: hidden; }
.ad-row { display: grid; align-items: baseline;
  /* every minmax needs a min(…,100%) escape or the row cannot shrink below its own minimum
     and the page scrolls sideways on a phone — check-responsive catches exactly this. */
  grid-template-columns: minmax(min(16rem, 100%), 3fr) minmax(min(8rem, 100%), 1.2fr)
                         minmax(min(7rem, 100%), 1.1fr) minmax(min(6rem, 100%), 1fr)
                         minmax(min(7rem, 100%), 1fr) 4rem 4rem 4rem;
  gap: .75rem; padding: .45rem .7rem; border-bottom: 1px solid var(--ad-line); }
.ad-rows > :last-child .ad-row, .ad-rows > .ad-row:last-child { border-bottom: 0; }
.ad-head-row { background: var(--ad-tint); border-bottom: 1px solid var(--ad-line2); position: sticky; top: 0; z-index: 1; }
.ad-th { font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-mut); }
.ad-td { min-width: 0; color: var(--ad-ink); overflow-wrap: anywhere; }
.qx-container.ad-td-name { display: flex; flex-direction: column; gap: 0; }
.ad-name { font-weight: 550; }
.ad-sub { font-size: .74rem; color: var(--ad-mut); font-family: var(--ad-mono); }
.ad-num { text-align: right; font-variant-numeric: tabular-nums; }
/* A spec value can be long ("14' - (4.20m)") and multi-valued ("Yellow Wings +77 more"), so it
   wraps rather than pushing the row sideways. */
.ad-spec { font-size: .82rem; color: var(--ad-ink2); overflow-wrap: anywhere; }
/* The caveat note sits below the facets it qualifies, set apart so it reads as a warning about the
   data rather than more instructions. */
.ad-note-spec { border-left: 2px solid var(--ad-line2); padding-left: .6rem; }
.qx-link.ad-row-link { text-decoration: none; color: inherit; }
@media (hover: hover) { .qx-link.ad-row-link:hover { background: var(--ad-tint); } }

/* the detail screen */
.qx-link.ad-back { color: var(--ad-link); font-size: .82rem; text-decoration: none; }
.qx-container.ad-detail, .qx-container.ad-detail-in { display: flex; flex-direction: column; gap: .5rem; }
.qx-container.ad-fields { display: grid; gap: 1px; background: var(--ad-line);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  border: 1px solid var(--ad-line); max-width: 70rem; }
.qx-container.ad-field { display: flex; flex-direction: column; gap: 0; padding: .45rem .65rem; background: var(--ad-ground); }
.ad-field-k { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-mut); }
.ad-field-v { overflow-wrap: anywhere; }
.ad-mono { font-family: var(--ad-mono); font-size: .82rem; }

/* A phone is not the point of an admin table, but it must not be unusable: drop the three number
   columns and let the name and category carry it. */
@media (max-width: 720px) {
  .ad-row { grid-template-columns: 1fr 6rem; gap: .4rem; }
  /* Eight columns now (Colour and Length joined). On a phone only the product and the price
     survive, so every other cell is hidden rather than crushed. */
  .ad-row > :nth-child(n+3) { display: none; }
  .ad-row > :nth-child(5) { display: block; text-align: right; }
  .ad-facet-label { flex-basis: 100%; }
}

/* A flag column reads better centred than right-aligned: it is a state, not a quantity. */
.ad-td.ad-flag { text-align: center; font-variant-numeric: normal; }

/* The chip matching what is currently applied. Set by the merge script, so it is only ever right. */
.qx-link.ad-chip.ad-chip-on { background: var(--ad-ink); border-color: var(--ad-ink); color: #fff; }
.qx-link.ad-chip.ad-chip-on .ad-chip-n { color: #c8ced6; }
.ad-js { display: none; }

/* ── THE FILTER PANEL, COLLAPSIBLE ──────────────────────────────────────────────────────────────
   A checkbox and a label; `:has()` reveals the panel. No script, and no hash in the URL — this
   page's state is its querystring and it should stay the only state in the address. */
.ad-toggle { display: none; }                 /* wide screens: no toggle, the panel is just open */
.ad-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ad-toggle-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 38px;
  padding: 0 .8rem; border: 1px solid var(--ad-line2); border-radius: 3px;
  background: var(--ad-ground); color: var(--ad-ink); font-size: .85rem; font-weight: 550;
  cursor: pointer; user-select: none; }
/* The chevron is DRAWN, not a character: ▾ depends on a glyph being present and rendered as a
   thin bar in testing. A border triangle looks the same everywhere and rotates to show state. */
.ad-toggle-btn::after { content: ""; width: 0; height: 0; margin-left: .1rem;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ad-mut); transition: transform .15s ease; }
.ad-toggle:has(.ad-toggle-cb:checked) .ad-toggle-btn::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ad-toggle-btn::after { transition: none; } }
/* A keyboard user must see the focus, and the real input is off-screen. */
.ad-toggle-cb:focus-visible + .ad-toggle-btn { outline: 2px solid var(--ad-link); outline-offset: 2px; }
.ad-toggle-count { color: var(--ad-mut); font-variant-numeric: tabular-nums; }
.qx-container.ad-facets { display: flex; flex-direction: column; gap: .35rem; }

@media (max-width: 900px) {
  .ad-toggle { display: block; }
  .qx-container.ad-facets { display: none; }
  .ad-toggle:has(.ad-toggle-cb:checked) + .qx-container.ad-facets { display: flex; }
  /* The note is long and the phone is short: keep it, shrink it. */
  .ad-note { font-size: .8rem; }
}

/* On a phone the counts strip is the first thing between you and the table, so give it three
   narrow columns instead of two wide ones — same six figures, half the height. */
@media (max-width: 900px) {
  .qx-container.ad-stats { grid-template-columns: repeat(3, 1fr); }
  .ad-stat-v { font-size: 1rem; }
  .ad-stat-k { font-size: .62rem; }
  .qx-container.ad-stat { padding: .4rem .5rem; }
}

/* Sortable headers. The arrow is drawn, and only the sorted column shows one. */
.qx-link.ad-th-sort { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.qx-link.ad-th-sort.ad-num { justify-content: flex-end; }
@media (hover: hover) { .qx-link.ad-th-sort:hover { color: var(--ad-link); } }
.ad-th-sort::after { content: ""; width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.ad-th-sort.ad-sort-asc::after  { border-bottom: 5px solid var(--ad-ink); }
.ad-th-sort.ad-sort-desc::after { border-top: 5px solid var(--ad-ink); }
.ad-td.ad-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-field-v.ad-price { font-variant-numeric: tabular-nums; }

/* ── THE PAGER ──────────────────────────────────────────────────────────────────────────────────
   The three numbers the server renders are for the script, not the reader — it does the one sum
   the engine cannot (C59). Without JavaScript the row still says where you are and First works;
   the stepping controls stay hidden rather than point somewhere wrong. */
.ad-meta { display: none; }
.qx-container.ad-pager { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: .4rem; padding-top: .8rem; }
.qx-link.ad-pg { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .7rem;
  border: 1px solid var(--ad-line2); border-radius: 3px; background: var(--ad-ground);
  color: var(--ad-link); text-decoration: none; font-size: .82rem; }
@media (hover: hover) { .qx-link.ad-pg:hover { border-color: var(--ad-link); } }
.qx-link.ad-pg.ad-pg-off { color: var(--ad-mut); border-color: var(--ad-line); pointer-events: none; opacity: .55; }
.ad-pg-at { margin-inline: .4rem; color: var(--ad-mut); font-variant-numeric: tabular-nums; }
/* The stepping controls need the script's arithmetic; First is a real static link either way. */
.ad-pg-step { display: none; }
.ad-pager-live .ad-pg-step { display: inline-flex; }

/* The four pager controls. First and Last are the coarse jumps, so they sit a shade quieter than
   Prev and Next, which are the ones you actually wear out. */
.qx-link.ad-pg-first, .qx-link.ad-pg-last { color: var(--ad-mut); }
.qx-link.ad-pg-prev, .qx-link.ad-pg-next { font-weight: 550; }
@media (hover: hover) {
  .qx-link.ad-pg-first:hover, .qx-link.ad-pg-last:hover { color: var(--ad-link); }
}
/* The three server-rendered numbers the pager script reads. */
.ad-m-total, .ad-m-page, .ad-m-size { display: none; }