/* ============================================
   Component: Dealer program
   View: dashboards/dealer_program/show.html.erb, dashboards/dealer_program/records.html.erb
   Partials: parts/_figure.html.erb, parts/_table.html.erb, parts/_chart.html.erb
   Stimulus: none (the chart part's own, chart_controller.js)
   ============================================ */
/* The Dealer program (#423, EXEC-14) reads answer first (D-105), each section under its question: the answer, dealer
   revenue over this year's closed months; then its first section, dealer revenue beside direct, its table, line and
   taps, then its monthly bars (.dealer-program-revenue), laid out as Operating profit's answer and revenue by
   channel are (books.css). A figure's records page gives the figure, then its terms or a page of lines with its line
   and links (.dealer-program-records). */

/* The answer and each section: the question, then what answers it, one beneath another. */
.dealer-program-answer,
.dealer-program-section {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.dealer-program-answer > h3,
.dealer-program-section > h3 { margin: 0; }

/* The answer's figure, on a card's surface, the width of a row on a phone and a column of two or three on a wide
   screen; it lays itself out by its own width. */
.dealer-program-answer-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-sm);
}

.dealer-program-answer-figures > .figure-container {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.dealer-program-answer-empty,
.dealer-program-revenue-none { color: var(--color-muted); }

/* The first section: the table, then its line directly under it, its taps after the line, then the bars and the tap
   after them, one beneath another, each starting at the section's left. The table's box fits its table and is
   never wider than the page: a wider table scrolls sideways in its own box, never the page. */
.dealer-program-revenue {
  display: grid;
  gap: var(--spacing-md);
}

.dealer-program-revenue > .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

/* The table's line: its source and its date, its parts apart, as the figure part's frame is. */
.dealer-program-revenue-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.dealer-program-revenue-frame > * + *::before {
  content: "· ";
}

.dealer-program-revenue-frame time { color: var(--color-text); }

/* What sits behind a tap: direct's other way, what dealer revenue and direct leave out, and, after the bars, why
   January to April read differently. A <details> opens with no JavaScript and no hover, its summary at least the
   tap target's height, as the figure part's other ways are. */
.dealer-program-revenue-tap {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.dealer-program-revenue-tap > summary {
  display: flex;
  align-items: center;
  gap: 0 var(--spacing-sm);
  min-height: var(--tap-target);
  color: var(--color-link);
  cursor: pointer;
  list-style: none;
}

/* A flex summary loses its marker, so it draws its own: closed, then open */
.dealer-program-revenue-tap > summary::-webkit-details-marker { display: none; }

.dealer-program-revenue-tap > summary::before { content: "▸"; }

.dealer-program-revenue-tap[open] > summary::before { content: "▾"; }

.dealer-program-revenue-alternative-list {
  display: grid;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-md);
}

/* Direct's other way: Shopify's own figure, then its evidence beneath it. */
.dealer-program-revenue-alternative {
  display: grid;
  gap: var(--spacing-xs);
}

.dealer-program-revenue-alternative-value { color: var(--color-text); }

/* A figure's records page: the figure, then its rule and its terms, or its page of lines with its line, one beneath
   another, each starting at the page's left. A wider table scrolls sideways in its own box, never the page. */
.dealer-program-records,
.dealer-program-terms {
  display: grid;
  gap: var(--spacing-md);
}

.dealer-program-records > .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.dealer-program-rule { margin: 0; }

/* The page's line, "Records 1 to 100 of 250", then its links to the pages before and after it, each as large as a
   tap; they wrap under the line on a phone. */
.dealer-program-records-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.dealer-program-records-line { color: var(--color-muted); }

.dealer-program-records-previous,
.dealer-program-records-next {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}