/* ============================================
   Component: The books so far, the Formula and revenue by channel
   View: dashboards/operating_profit/show.html.erb, dashboards/operating_profit/records.html.erb
   Partials: parts/_figure.html.erb, parts/_table.html.erb, parts/_filter.html.erb, parts/_chart.html.erb,
             dashboards/operating_profit/_revenue_by_channel.html.erb
   Stimulus: none (the chart part's own, chart_controller.js)
   ============================================ */
/* Operating profit reads answer first (#470, D-105), in four sections, each under its question: the
   answer, the two figures the Summary card shows; then the books so far as a statement (#310, D-71,
   DESIGN-01), beneath the period's filter; then the Formula, the plan's net revenue, COGS, OPEX and
   operating profit, as a statement of its own (#58, D-81), in a block of its own class (.plan-formula);
   then revenue by channel (#422, EXEC-02), its table, line and taps, then its monthly bars
   (.revenue-by-channel). A revenue month's records page gives its lines' page line and links
   (.books-records-pages). */

/* The answer: its question, then its figures, each on a card's surface, one to a row on a phone and two
   or three on a wide screen, as Shipping profit's are; each figure lays itself out by its own width.
   With no profit and loss for the year, its empty words sit beside the plan's figure. */
.operating-profit-answer,
.operating-profit-section {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.operating-profit-answer > h3,
.operating-profit-section > h3 { margin: 0; }

.operating-profit-answer-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-sm);
}

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

.operating-profit-answer-empty {
  align-self: center;
  color: var(--color-muted);
}

/* The statement: the table, then the table's own line directly under it, then directly after the line
   what operating profit leaves out, behind a tap, then the gross margin with its own frame, one beneath
   another, each starting at the statement's left. So each frame sits under what it dates. The table's
   box fits its table, so no empty box stretches beside a narrow table on a wide screen, and is never
   wider than the page: a wider table scrolls sideways in its own box, never the page. */
.books-statement {
  display: grid;
  gap: var(--spacing-md);
}

.books-statement > .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. */
.books-statement-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.books-statement-frame > * + *::before {
  content: "· ";
}

.books-statement-frame time { color: var(--color-text); }

/* The Formula (#58): the line saying no scenario is saved, when none is, then the table, then the
   table's own line directly under it and its taps after the line, laid out as the books' statement
   is: the table's box fits its table and is never wider than the page, and a wider table scrolls
   sideways in its own box. */
.plan-formula,
.revenue-by-channel {
  display: grid;
  gap: var(--spacing-md);
}

.plan-formula > .table-scroll,
.revenue-by-channel > .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.plan-formula-none,
.revenue-by-channel-none { color: var(--color-muted); }

/* The Formula's line: each column's source and date and why a figure is missing, its parts apart, as
   the books' statement's line is; and revenue by channel's, its source and its date. */
.plan-formula-frame,
.revenue-by-channel-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.plan-formula-frame > * + *::before,
.revenue-by-channel-frame > * + *::before {
  content: "· ";
}

.plan-formula-frame time,
.revenue-by-channel-frame time { color: var(--color-text); }

/* What sits behind a tap, directly after its line: what operating profit leaves out, under the books
   so far and under the Formula, each Formula column's other methods, and revenue by channel's direct
   other way, what it leaves out and, after its 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. */
.books-statement-tap,
.plan-formula-tap,
.revenue-by-channel-tap {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.books-statement-tap > summary,
.plan-formula-tap > summary,
.revenue-by-channel-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 */
.books-statement-tap > summary::-webkit-details-marker,
.plan-formula-tap > summary::-webkit-details-marker,
.revenue-by-channel-tap > summary::-webkit-details-marker { display: none; }

.books-statement-tap > summary::before,
.plan-formula-tap > summary::before,
.revenue-by-channel-tap > summary::before { content: "▸"; }

.books-statement-tap[open] > summary::before,
.plan-formula-tap[open] > summary::before,
.revenue-by-channel-tap[open] > summary::before { content: "▾"; }

.plan-formula-alternative-list,
.revenue-by-channel-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. */
.revenue-by-channel-alternative {
  display: grid;
  gap: var(--spacing-xs);
}

.revenue-by-channel-alternative-value { color: var(--color-text); }

/* A revenue month's records page: its 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, as Shipping profit's do. */
.books-records-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

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

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