/* Wave 4, the money area: the pay run as one sheet, the weekly report as
   an artefact, the two charts analytics and affiliates earn. Loads after
   hub.css and the wave 2 and 3 files, so a rule here wins at equal weight.
   Tokens come from hub.css :root. */

/* ---------------------------------------------------------------------
   Pay run. The bar sums what is ticked; the sheet walks three stages.
   --------------------------------------------------------------------- */

/* The bar sticks to the bottom of the window on a laptop so the sum is in
   view while she scrolls the rows, and docks above the tab bar on a phone. */
.pay-bar {
  position: sticky;
  bottom: calc(16px + var(--safe-b));
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 10px 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-menu);
}

.pay-bar[hidden] {
  display: none;
}

.pay-bar-sum {
  font-size: var(--fs-body);
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
}

/* The amount in the display face, tabular, so it reads as a till. */
.pay-bar-amount {
  font-family: "Indarung", "Quicksand", sans-serif;
  font-size: 20px;
  font-variant-numeric: tabular-nums lining-nums;
  margin-left: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .pay-bar:not([hidden]) {
    animation: pay-bar-rise var(--dur-base) var(--ease-out);
  }

  @keyframes pay-bar-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
      filter: blur(2px);
    }
  }
}

@media (max-width: 760px) {
  .pay-bar {
    position: fixed;
    left: var(--s4);
    right: var(--s4);
    bottom: calc(50px + var(--safe-b) + 12px);
    margin: 0;
  }

  .pay-bar .btn {
    flex: none;
  }
}

/* The sheet's own opener is hidden: the bar, the header and the rows open
   it. Only the button, never the span, or the dialog inside it would have a
   hidden ancestor and showModal would draw nothing. */
.pay-sheet > span > button[data-action="dialog#open"] {
  display: none;
}

/* The three stages as a quiet strip at the top of the sheet. */
.pay-stages {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
  counter-reset: stage;
}

.pay-stages li {
  display: flex;
  align-items: center;
  gap: 6px;
  counter-increment: stage;
}

.pay-stages li::before {
  content: counter(stage);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px;
}

.pay-stages li.is-current {
  color: var(--ink);
}

.pay-stages li.is-done {
  color: var(--ok-ink);
}

.pay-stages li.is-done::before {
  content: "✓";
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

.pay-stage[hidden] {
  display: none;
}

/* A ticked creator with no account on file: shown, greyed, explained. */
.pay-list li.is-grey {
  color: var(--ink-mute);
}

.pay-list li.is-grey .pay-amount {
  font-weight: 500;
}

.pay-nudge {
  display: inline;
}

.pay-nudge .table-link {
  font-size: inherit;
}

.pay-run-form .switch {
  margin-top: 14px;
}

.pay-done-line {
  font-size: var(--fs-title);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}

.pay-done .form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Weekly report as an artefact: week navigation, the share line, the
   thumbnail, the whisper, the quiet remove.
   --------------------------------------------------------------------- */

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.report-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.report-nav .btn[aria-disabled="true"] {
  pointer-events: none;
}

.report-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.share-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}

.share-line code {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
  color: var(--ink-soft);
}

/* The creative is the video, so the row leads with its first frame. */
.thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex: none;
  background: var(--surface-soft);
}

.thumb-placeholder {
  display: inline-grid;
  place-items: center;
  font-family: "Indarung", "Quicksand", sans-serif;
  font-size: 18px;
  color: var(--ink-soft);
}

.creative-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.creative-cell > span {
  min-width: 0;
}

/* The edit sheet opens from the row's action cell, which right-aligns its
   text; a form reads left to right. Wide, so the field rows keep two
   columns on a laptop. */
.entry-sheet .hub-dialog {
  text-align: left;
}

@media (max-width: 760px) {
  .entry-sheet .field-row {
    grid-template-columns: 1fr;
  }
}

/* Said once, quietly, under the field. */
.whisper {
  display: inline-block;
  min-height: 1.4em;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  transition: opacity var(--dur-base) var(--ease-out);
}

.whisper:empty {
  opacity: 0;
}

.link-danger {
  color: var(--bad-ink);
}

/* ---------------------------------------------------------------------
   Sparklines. One hue for the bars, the accent for the one bar the
   question is about, no axis, a table under the figure for the reader
   who cannot see it. Bars are thin, square at the baseline, rounded at
   the data end, a two pixel gap between neighbours.
   --------------------------------------------------------------------- */

.spark {
  margin: 10px 0 0;
  width: 100%;
  min-width: 0;
}

/* The card's implicit grid column sizes to its content, and an SVG's
   content width is its viewBox; the column has to be told to take the card. */
.stat-card.kpi:has(.spark) {
  grid-template-columns: minmax(0, 1fr);
}

.stat-card.kpi .spark {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.spark svg {
  display: block;
  width: 100%;
  height: 36px;
  overflow: visible;
}

.spark-bar {
  fill: var(--forest);
  fill-opacity: .55;
  transition: fill-opacity var(--dur-fast) var(--ease-out);
}

.spark-bar.is-now,
.spark-bar.is-best {
  fill: var(--lime-deep);
  fill-opacity: 1;
}

.spark-bar.is-empty {
  fill: var(--line);
  fill-opacity: 1;
}

.spark-hit:hover .spark-bar {
  fill-opacity: 1;
}

.spark-hit {
  cursor: default;
}

.spark-note {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 6px 0 0;
}

/* A larger strip for the reports index: the same marks, taller. */
.spark-wide svg {
  height: 56px;
}

/* ---------------------------------------------------------------------
   Ranked bars: who sells, one row per creator, value at the tip.
   --------------------------------------------------------------------- */

.rank-bars {
  display: grid;
  gap: 8px;
}

.rank-row {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr 96px;
  align-items: center;
  gap: 12px;
}

.rank-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-track {
  height: 14px;
}

.rank-bar {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--forest);
}

.rank-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .rank-row {
    grid-template-columns: 72px 1fr 80px;
  }
}

/* ---------------------------------------------------------------------
   The shared report: a document, not a screen. Rendered with no shell.
   --------------------------------------------------------------------- */

.shared-page {
  background: var(--ground);
  margin: 0;
}

.shared-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.shared-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.shared-brand .hub-logo svg {
  height: 22px;
  width: auto;
}

.shared-writeup {
  white-space: pre-wrap;
  line-height: var(--lh-body);
}

@media print {
  .shared-page {
    background: #fff;
  }

  .shared-main {
    max-width: none;
    padding: 0;
  }

  .shared-print-hide,
  .flash-stack {
    display: none !important;
  }

  .card,
  .stat-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  .hub-table th,
  .hub-table td {
    padding: 6px 8px;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}