/* Reports: the period and the data on the page head, a row of figures per report, charts and lists in zones. Every
   class starts with rp-; the Overview's list of latest syncs borrows rp-cells and the quiet and red numbers. */

@keyframes rp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- The head: the period and the data as small switches on the dark surface ---------- */
.rp-seg { flex-wrap: nowrap; padding: 3px; border-radius: var(--r-m); background: var(--stage-fill); box-shadow: inset 0 0 0 1px var(--stage-rim); }
.rp-seg a { padding: 5px 12px; color: var(--stage-muted); }
.rp-seg a:hover { color: var(--stage-ink); }
.rp-seg a.on { background: var(--stage-ink); color: var(--stage-bg); box-shadow: none; }
.rp-seg a:focus-visible { box-shadow: 0 0 0 2px var(--stage-flow); outline: none; }

/* ---------- Figures: the lead figure wider than the rest ---------- */
.rp-figs.n5 .figs-in { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.rp-figs.n4 .figs-in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.rp-figs .fig { animation: rp-rise .45s var(--ease) both; }
.rp-figs .fig:nth-child(2) { animation-delay: .04s; }
.rp-figs .fig:nth-child(3) { animation-delay: .08s; }
.rp-figs .fig:nth-child(n+4) { animation-delay: .12s; }
.rp-figs .fig-label { flex-wrap: wrap; }
.rp-figs .fig-label .pill { margin-left: 2px; }
.rp-figs .fig-sub .trend { margin-right: 4px; font-size: var(--fs-2xs); }
.rp-figs .fig-ring circle.on.warn { stroke: var(--warn); }

/* ---------- Lists: numbers that say nothing stay quiet, a failure is red ---------- */
.rl-num b.rp-bad, .rp-bad { color: var(--bad); }
.rl-num b.rp-zero { color: var(--ink-4); font-weight: 500; }
.rp-zero { font-size: var(--fs-s); color: var(--ink-4); }
.rp-chev { color: var(--ink-4); }
.rp-chev svg { width: 16px; height: 16px; }
.rl-row:hover .rp-chev { color: var(--brand-text); }
.rp-rate { display: grid; grid-template-columns: minmax(40px, 1fr) auto; align-items: center; gap: 10px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rp-dir { min-width: 0; overflow: hidden; }

/* Sync health: one row per integration and direction, and with advanced reporting per record type too. */
.rp-health {
  --rl-cols: minmax(0, 1fr) 210px 64px 80px 80px 80px 64px 150px 16px;
  --rl-cols-md: minmax(0, 1fr) 180px 80px 64px 16px;
}
.rp-health.rp-split {
  --rl-cols: minmax(0, 1fr) 200px 190px 64px 80px 80px 80px 64px 150px 16px;
  --rl-cols-md: minmax(0, 1fr) 160px 160px 72px 60px 16px;
}
.rp-systems { --rl-cols: minmax(0, 1fr) 170px 150px 170px; }
.rp-overdue { --rl-cols: minmax(0, 1fr) 150px 170px 160px; }

/* The line under a list that says what a higher plan adds, and the lock over a report a plan does not include. */
.strip.rp-upsell { border-top: 1px solid var(--line); border-bottom: 0; }

/* ---------- Charts ---------- */
.rp-donut-row { display: flex; align-items: center; gap: 28px; }
.rp-donut { flex: none; width: 170px; }
.rp-donut-legend { flex: 1; min-width: 0; }
.rp-donut-legend .chart-legend { margin-top: 0; }

/* Beside the rail on a laptop the widest numbers give the names their room back. */
@container page (min-width: 1181px) and (max-width: 1440px) {
  .rp-health { --rl-cols: minmax(0, 1fr) 210px 80px 64px 150px 16px; }
  .rp-health.rp-split { --rl-cols: minmax(0, 1fr) 180px 180px 80px 64px 150px 16px; }
  .rp-health .rp-wide { display: none; }
}

@container page (min-width: 641px) and (max-width: 1180px) {
  .rp-figs .fig.rp-lead { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  .rp-figs .fig:not(.rp-lead):nth-child(even) { padding-left: 0; padding-right: 22px; }
  .rp-figs .fig:not(.rp-lead):nth-child(odd) { padding-left: 22px; padding-right: 0; }
  .rp-figs.n4 .fig:last-child { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  .rp-figs.n5 .fig:last-child { grid-column: auto; }
}

@container page (max-width: 1180px) {
  .rp-figs.n5 .figs-in, .rp-figs.n4 .figs-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container page (max-width: 640px) {
  .rp-figs.n5 .figs-in, .rp-figs.n4 .figs-in { grid-template-columns: minmax(0, 1fr); }
  .rp-donut-row { flex-direction: column; align-items: stretch; }
  .rp-donut { align-self: center; }

  /* A row of figures folds into its name on top and labelled cells under it; .rl-stack is named to outrank its rules. */
  .rp-cells .rl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
  .rp-cells.rl-stack .rl-row > :is(.rl-name, .rl-type) { grid-column: 1 / -1; grid-row: 1; }
  .rp-cells.rl-stack .rl-row:has(> .rp-chev) > :is(.rl-name, .rl-type) { grid-column: 1 / 3; }
  .rp-cells .rl-row > .rp-chev { grid-column: 3; grid-row: 1; justify-self: end; }
  .rp-cells .rl-row > [data-label] { grid-column: auto; grid-row: auto; justify-self: start; text-align: left; }
  .rp-cells .rl-row > [data-label]::before {
    content: attr(data-label); display: block; flex-basis: 100%; margin-bottom: 2px;
    font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
  }
  .rp-cells .rl-row > .rp-rate[data-label] { grid-template-columns: minmax(40px, 1fr) auto; justify-self: stretch; }
  .rp-cells .rl-row > .rp-rate[data-label]::before { grid-column: 1 / -1; }
  .rp-cells .rl-row > .rp-dir[data-label] { grid-column: 1 / -1; display: block; white-space: normal; }
  .rp-cells .rl-row > .rp-dir[data-label] svg { vertical-align: -3px; }
}