/* ───────────────────────────────────────────────────────────────
   PARANOID AND READY — the dealer card

   Its own file because it appears on two design systems: the articles and
   guides, which run base.css plus category.css, and the scenario decks,
   which run scenario.css and nothing else. The sales dialog was its own file
   for the same reason, until the Action Plan got a page and the dialog went.

   Depends on --void, --bone and --signal, which both systems define.

   The two colours are declared as --ink and --paper rather than as fixed
   values, so a parent can swap the pair and the border, the type, the
   drawn mark and the hover all follow from one rule. Setting `color` on
   the element directly outranks the hover and leaves the type invisible
   against its own fill, which is exactly how this broke the first time.
   ─────────────────────────────────────────────────────────────── */
.dealer {
  --ink: var(--void);
  --paper: var(--bone);
  display: block;
  color: var(--ink);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}

/* Articles and guides are void where the page itself shows. Scenario decks
   alternate, so scenario.css sets the pair from .card--invert instead. */
.dealer--dark { --ink: var(--bone); --paper: var(--void); }

/* Except on an article that runs on paper, where the generator still passes
   dark — it is describing the site's usual ground, not this page's — and a
   bone card on a bone page is a card nobody can see. The ground overrules
   the flag, the same way an opened accordion does below. */
.paper .dealer--dark { --ink: var(--void); --paper: var(--bone); }

/* An opened accordion body is bone, not void, and it is the one place on an
   article where the ground flips without the generator knowing. Taking the
   pair from the ground beats passing a flag down: a card moved into or out
   of a section is then correct without anyone remembering to change it.
   Two classes, so it outranks .dealer--dark rather than tying with it. */
.gsec-body .dealer { --ink: var(--void); --paper: var(--bone); }

.dealer:hover, .dealer:focus-visible { background: var(--ink); color: var(--paper); }

.dealer-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--signal);
}
.dealer-title {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.5px;
}
.dealer-note { display: block; font-size: 12px; line-height: 1.55; opacity: 0.72; }
.dealer-go {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 4px;
  white-space: nowrap;
}

/* The mark inherits the card's ink, so it inverts on hover with everything
   else. Only the datum line holds its own colour. */
.dealer-mark { display: block; width: 100%; height: auto; color: inherit; }
.dealer-mark .stack { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.dealer-mark .datum {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Block: a narrow column, one product slot wide ── */
.dealer--block { max-width: 360px; padding: clamp(18px, 2.4vw, 26px); }
.dealer--block .dealer-mark { max-width: 150px; margin: 18px 0 20px; }
.dealer--block .dealer-title { display: block; font-size: clamp(21px, 2.4vw, 27px); }
.dealer--block .dealer-note { margin-top: 12px; }
.dealer--block .dealer-note + .dealer-note { margin-top: 8px; }
.dealer--block .dealer-go { margin-top: 20px; }

/* ── Wide: a recommendation under a section heading ── */
.dealer--wide {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.6vw, 30px);
}
.dealer--wide .dealer-mark { width: 92px; }
.dealer--wide .dealer-title { display: block; margin-top: 6px; font-size: clamp(20px, 2.5vw, 30px); }
.dealer--wide .dealer-note { margin-top: 8px; max-width: 56ch; }

/* ── Slim: one row between a heading and its cards ── */
.dealer--slim {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  padding: 12px clamp(14px, 2vw, 20px);
}
.dealer--slim .dealer-mark { width: 46px; }
.dealer--slim .dealer-title { font-size: clamp(15px, 1.7vw, 19px); }

@media (max-width: 720px) {
  .dealer--wide, .dealer--slim { grid-template-columns: 1fr; gap: 14px; }
  .dealer--wide .dealer-mark, .dealer--slim .dealer-mark { width: 80px; }
}

/* Type floor on a phone, matching the rest of the site: 10px is a size
   picked against a desktop column and it does not survive a 360px screen. */
@media (max-width: 860px) {
  .dealer-eyebrow { font-size: 11px; }
}