/* The flow river (crates/tally-web/src/river): the drawing (an SVG Sankey at two sizes and
   its table), the week strip, the segment controls, the "Colour by" switch and the
   legend.

   Colour is one of three (crates/tally-web/src/river/colour.rs), all pastels:

   - Source (the default): each first touch its own hue, carried through every stage.
     Ten hues, hand-tuned in OKLCH; the first six (periwinkle, peach, mint, rose, butter,
     lilac) are the ones a river uses and stay apart for the common colour-vision
     deficiencies too, helped by their different lightness. Each has an ink: a deep shade
     of the same hue for labels and band edges on white, a lighter one on near-black.
     Other sources are a soft neutral.
   - Experience: the temperature, a diverging ramp from soft blue (friction) through a
     pale lilac pearl (the site's usual, never grey) to apricot (delight), the hue turning
     through pink so the middle keeps its colour. Step k of ±4 sits (|k| ÷ 4)^0.7 of the
     way from the middle to its end, so small departures already show. No signal is grey.
   - Outcome: bought coral, goal mint, left lavender.

   Light mode is true pastels on white, a little translucent, with darker edges of the
   same hue; Coolify dark brightens them a step so they glow softly on near-black. Revenue
   glows in Tally's revenue coral, around a band, over any colouring, never as its fill. */

.rv {
  /* First touches. */
  --rv-s0: #a2abf0; /* periwinkle */
  --rv-s0-ink: #4b4ea7;
  --rv-s1: #fcb997; /* peach */
  --rv-s1-ink: #a25325;
  --rv-s2: #a0eecd; /* mint */
  --rv-s2-ink: #227357;
  --rv-s3: #ed9cb2; /* rose */
  --rv-s3-ink: #9c3d5d;
  --rv-s4: #f7ea9b; /* butter */
  --rv-s4-ink: #776a15;
  --rv-s5: #eecafa; /* lilac */
  --rv-s5-ink: #7b428c;
  --rv-s6: #7fc2eb; /* sky */
  --rv-s6-ink: #106891;
  --rv-s7: #c8e2aa; /* sage */
  --rv-s7-ink: #526e2a;
  --rv-s8: #f5c488; /* apricot */
  --rv-s8-ink: #92600b;
  --rv-s9: #95e1e1; /* aqua */
  --rv-s9-ink: #017273;
  --rv-sx: #d8dbe2; /* other sources */
  --rv-sx-ink: #5e636f;
  /* Outcomes. */
  --rv-o-bought: #f4918e;
  --rv-o-bought-ink: #af3c40;
  --rv-o-goal: #8ee6c2;
  --rv-o-goal-ink: #1a6d52;
  --rv-o-left: #d6cfef;
  --rv-o-left-ink: #675891;
  /* Experience. */
  --rv-t-m4: #69a1e8;
  --rv-t-m3: #88a5ec;
  --rv-t-m2: #a4abed;
  --rv-t-m1: #bfb3eb;
  --rv-t-0: #dfc5e7;
  --rv-t-p1: #f3b2ca;
  --rv-t-p2: #fca9aa;
  --rv-t-p3: #fda589;
  --rv-t-p4: #f8a568;
  --rv-t-none: #c8cbce;
  /* What a band fades toward as it reaches a node, and how much of its colour it keeps. */
  --rv-tint: #f7f5fc;
  --rv-keep: 68%;
  --rv-node: #394151;
  --rv-band-alpha: .86;
  --rv-edge-alpha: .5;
  --rv-lift: rgba(27, 34, 48, .22);
  --rv-label-halo: #ffffff;
}

:where(:root[data-theme="dark"]) .rv {
  --rv-s0: #9ca6f9;
  --rv-s0-ink: #b7bffb;
  --rv-s1: #ffb38c;
  --rv-s1-ink: #fed4bf;
  --rv-s2: #87f0c6;
  --rv-s2-ink: #c1ffe3;
  --rv-s3: #f393ae;
  --rv-s3-ink: #fab4c6;
  --rv-s4: #f7e785;
  --rv-s4-ink: #fbf1af;
  --rv-s5: #efc4fd;
  --rv-s5-ink: #f8e5fe;
  --rv-s6: #7bc8f6;
  --rv-s6-ink: #a8dcfd;
  --rv-s7: #c1e19a;
  --rv-s7-ink: #def5c3;
  --rv-s8: #fbc27b;
  --rv-s8-ink: #ffdfb9;
  --rv-s9: #82e0e1;
  --rv-s9-ink: #b3f2f2;
  --rv-sx: #7d818c;
  --rv-sx-ink: #c3c6cc;
  --rv-o-bought: #f98e8b;
  --rv-o-bought-ink: #feb5b1;
  --rv-o-goal: #81e9c0;
  --rv-o-goal-ink: #b1f6d8;
  --rv-o-left: #a59bd6;
  --rv-o-left-ink: #ccc5e8;
  --rv-t-m4: #6db2fe;
  --rv-t-m3: #87abf9;
  --rv-t-m2: #9da5ec;
  --rv-t-m1: #aea0d9;
  --rv-t-0: #b79ebb;
  --rv-t-p1: #db9db0;
  --rv-t-p2: #ef9e9c;
  --rv-t-p3: #faa485;
  --rv-t-p4: #fdac6c;
  --rv-t-none: #5d6066;
  --rv-tint: #ffffff;
  --rv-keep: 80%;
  --rv-node: #e5e5e5;
  --rv-band-alpha: .8;
  --rv-edge-alpha: .3;
  --rv-lift: rgba(0, 0, 0, .55);
  --rv-label-halo: #141414;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .rv {
    --rv-s0: #9ca6f9;
    --rv-s0-ink: #b7bffb;
    --rv-s1: #ffb38c;
    --rv-s1-ink: #fed4bf;
    --rv-s2: #87f0c6;
    --rv-s2-ink: #c1ffe3;
    --rv-s3: #f393ae;
    --rv-s3-ink: #fab4c6;
    --rv-s4: #f7e785;
    --rv-s4-ink: #fbf1af;
    --rv-s5: #efc4fd;
    --rv-s5-ink: #f8e5fe;
    --rv-s6: #7bc8f6;
    --rv-s6-ink: #a8dcfd;
    --rv-s7: #c1e19a;
    --rv-s7-ink: #def5c3;
    --rv-s8: #fbc27b;
    --rv-s8-ink: #ffdfb9;
    --rv-s9: #82e0e1;
    --rv-s9-ink: #b3f2f2;
    --rv-sx: #7d818c;
    --rv-sx-ink: #c3c6cc;
    --rv-o-bought: #f98e8b;
    --rv-o-bought-ink: #feb5b1;
    --rv-o-goal: #81e9c0;
    --rv-o-goal-ink: #b1f6d8;
    --rv-o-left: #a59bd6;
    --rv-o-left-ink: #ccc5e8;
    --rv-t-m4: #6db2fe;
    --rv-t-m3: #87abf9;
    --rv-t-m2: #9da5ec;
    --rv-t-m1: #aea0d9;
    --rv-t-0: #b79ebb;
    --rv-t-p1: #db9db0;
    --rv-t-p2: #ef9e9c;
    --rv-t-p3: #faa485;
    --rv-t-p4: #fdac6c;
    --rv-t-none: #5d6066;
    --rv-tint: #ffffff;
    --rv-keep: 80%;
    --rv-node: #e5e5e5;
    --rv-band-alpha: .8;
    --rv-edge-alpha: .3;
    --rv-lift: rgba(0, 0, 0, .55);
    --rv-label-halo: #141414;
  }
}

/* A colour, by class, wherever it's drawn: a band's part, a gradient's stops, a node, a
   label, a swatch. */
.rvc-s0 { --rv-c: var(--rv-s0); --rv-ci: var(--rv-s0-ink); --rv-swatch: var(--rv-s0); }
.rvc-s1 { --rv-c: var(--rv-s1); --rv-ci: var(--rv-s1-ink); --rv-swatch: var(--rv-s1); }
.rvc-s2 { --rv-c: var(--rv-s2); --rv-ci: var(--rv-s2-ink); --rv-swatch: var(--rv-s2); }
.rvc-s3 { --rv-c: var(--rv-s3); --rv-ci: var(--rv-s3-ink); --rv-swatch: var(--rv-s3); }
.rvc-s4 { --rv-c: var(--rv-s4); --rv-ci: var(--rv-s4-ink); --rv-swatch: var(--rv-s4); }
.rvc-s5 { --rv-c: var(--rv-s5); --rv-ci: var(--rv-s5-ink); --rv-swatch: var(--rv-s5); }
.rvc-s6 { --rv-c: var(--rv-s6); --rv-ci: var(--rv-s6-ink); --rv-swatch: var(--rv-s6); }
.rvc-s7 { --rv-c: var(--rv-s7); --rv-ci: var(--rv-s7-ink); --rv-swatch: var(--rv-s7); }
.rvc-s8 { --rv-c: var(--rv-s8); --rv-ci: var(--rv-s8-ink); --rv-swatch: var(--rv-s8); }
.rvc-s9 { --rv-c: var(--rv-s9); --rv-ci: var(--rv-s9-ink); --rv-swatch: var(--rv-s9); }
.rvc-sx { --rv-c: var(--rv-sx); --rv-ci: var(--rv-sx-ink); --rv-swatch: var(--rv-sx); }
.rvc-bought { --rv-c: var(--rv-o-bought); --rv-ci: var(--rv-o-bought-ink); --rv-swatch: var(--rv-o-bought); }
.rvc-goal { --rv-c: var(--rv-o-goal); --rv-ci: var(--rv-o-goal-ink); --rv-swatch: var(--rv-o-goal); }
.rvc-left { --rv-c: var(--rv-o-left); --rv-ci: var(--rv-o-left-ink); --rv-swatch: var(--rv-o-left); }

/* ------------------------------------------------------------------- the head */

.rv-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin: 22px 0 14px;
}

.rv-title {
  min-width: 0;
}

.rv-crumb {
  margin-bottom: 4px;
  font-size: 13px;
}

.rv-title h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Experimental: a small square-cornered tag, not a pill. */
.rv-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--rv-t-p3);
  border-radius: 4px;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--rv-t-p4) 12%, transparent);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rv-lede {
  margin-top: 6px;
  max-width: 72ch;
  color: var(--muted);
  font-size: 15px;
}

.rv-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.rv-summary-n {
  color: var(--ink);
  font-size: 17px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.rv-summary-of {
  color: var(--muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ controls */

.rv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.rv-controls .menu {
  margin-left: 0;
}

.rv-controls .menu-value {
  min-width: 0;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-controls .menu-list {
  left: 0;
  right: auto;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  transform-origin: top left;
}

.rv-controls-sep {
  width: 1px;
  height: 26px;
  margin: 0 4px;
  background: var(--line);
}

.rv-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  user-select: none;
  transition: border-color .15s ease, background-color .2s ease;
}

.rv-switch:hover {
  border-color: var(--faint);
}

.rv-switch-track {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: 5px;
  background: var(--line);
  transition: background-color .25s ease;
}

.rv-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 13, 18, .25);
  transition: transform .3s var(--ease-out);
}

.rv-switch[aria-checked="true"] {
  border-color: var(--revenue-line);
  background: var(--revenue-bar);
}

.rv-switch[aria-checked="true"] .rv-switch-track {
  background: var(--revenue);
}

.rv-switch[aria-checked="true"] .rv-switch-thumb {
  transform: translateX(14px);
}

.rv-clear {
  padding: 0 6px;
  font-size: 13.5px;
}

/* "Colour by": a segmented control of links with its caption inside, as the menus have,
   the chosen one raised as a card. */
.rv-colour {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.rv-colour-caption {
  padding: 0 6px 0 9px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.rv-colour-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 9px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 540;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.rv-colour-option:hover {
  color: var(--ink);
}

.rv-colour-option[aria-current="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(11, 13, 18, .08);
}

.rv-colour-dots {
  display: inline-flex;
  padding-left: 3px;
}

.rv-colour-dot {
  width: 9px;
  height: 9px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--rv-swatch);
  box-shadow: 0 0 0 1.5px var(--surface-2);
  transition: transform .25s var(--ease-out);
}

.rv-colour-option[aria-current="true"] .rv-colour-dot {
  box-shadow: 0 0 0 1.5px var(--surface);
}

.rv-colour-option:hover .rv-colour-dot:nth-child(1) {
  transform: translateX(-1px);
}

.rv-colour-option:hover .rv-colour-dot:nth-child(3) {
  transform: translateX(1px);
}

.rv-mode-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  max-width: none;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--brand-tint);
  color: var(--ink-2);
}

/* ------------------------------------------------------------- the week strip */

.rv-weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  padding: 0;
  list-style: none;
}

.rv-weeks li {
  flex: 1 1 0;
  min-width: 58px;
}

.rv-weeks .rv-weeks-all {
  flex: 0 0 auto;
}

.rv-week {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  height: 52px;
  padding: 7px 9px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 540;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.rv-week:hover {
  border-color: var(--faint);
  color: var(--ink);
}

.rv-week-bar {
  display: block;
  flex: 1;
  min-height: 0;
}

.rv-week-bar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rv-week-bar rect {
  fill: var(--visitors-bar);
  transition: fill .2s ease;
}

.rv-week[data-partial] .rv-week-label::after {
  content: " ·";
  color: var(--faint);
}

.rv-week-all {
  justify-content: center;
  padding: 0 14px;
}

.rv-week[aria-current="true"] {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.rv-week[aria-current="true"] .rv-week-bar rect {
  fill: var(--visitors);
}

/* The hover card, for a band of the drawing. Placed with transforms. */
.rv-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  /* The revenue view's .rv-tip (revenue-view.css, loaded first) is a one-line grid. */
  display: block;
  min-width: 0;
  white-space: normal;
  width: max-content;
  max-width: min(330px, calc(100% - 16px));
  padding: 11px 13px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
}

.rv-tip[hidden] {
  display: none;
}

.rv-tip-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 640;
}

.rv-tip-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 6px 0 7px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rv-tip-temp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-weight: 600;
}

.rv-tip-sigs {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--line-2);
  padding: 6px 0 0;
  list-style: none;
}

.rv-tip-sigs li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
}

.rv-tip-sigs li[data-unread] {
  color: var(--faint);
}

.rv-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rv-t-none);
  transform: translateY(1px);
}

/* A band's visitors by first touch or outcome; the part pointed at stands out. */
.rv-tip-parts {
  margin: 0 0 8px;
  padding: 7px 0 8px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.rv-tip-parts-title {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rv-tip-part-list {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.rv-tip-part-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: baseline;
  margin: 0 -5px;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink-2);
}

.rv-tip-part-list li[data-on] {
  background: color-mix(in oklab, var(--rv-swatch, var(--surface-2)) 22%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.rv-tip-part-list li[data-on] .rv-tip-dot {
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--rv-swatch);
}

.rv-tip-part-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rv-tip-part-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ drawing */

.rv-flat {
  padding: 18px 20px 20px;
}

.rv-flat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.rv-flat-body {
  position: relative;
}

.rv-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rv-drawing {
  position: relative;
  margin: 0 -6px;
}

.rv-svg-box svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rv-svg-box .rv-svg-narrow {
  display: none;
}

@media (max-width: 720px) {
  .rv-svg-box .rv-svg-wide {
    display: none;
  }

  .rv-svg-box .rv-svg-narrow {
    display: block;
  }
}

/* A link is a group of parts: one band (experience) or one per source or outcome, each
   with a hairline edge of its own ink. */
.rv-band {
  transition: opacity .25s ease;
  cursor: default;
}

.rv-part {
  fill-opacity: var(--rv-band-alpha);
  stroke: color-mix(in oklab, var(--rv-c) 45%, var(--rv-ci));
  stroke-width: .6px;
  stroke-opacity: var(--rv-edge-alpha);
  vector-effect: non-scaling-stroke;
  transition: fill-opacity .2s ease, stroke-opacity .2s ease, opacity .25s ease;
}

.rv-part.rv-solid {
  fill: var(--rv-c);
}

/* Each gradient runs from its colour into a blend of it with the nodes' tint. */
.rv-stop {
  stop-color: var(--rv-c);
}

.rv-stop-mid {
  stop-color: color-mix(in oklab, var(--rv-c) 92%, var(--rv-tint));
}

.rv-stop-end {
  stop-color: color-mix(in oklab, var(--rv-c) var(--rv-keep), var(--rv-tint));
}

/* Pointing at a band lifts it (the script also draws it last) and dims the rest. */
.rv-bands:hover .rv-band {
  opacity: .36;
}

.rv-bands .rv-band:hover,
.rv-bands .rv-band[data-active] {
  opacity: 1;
}

.rv-band[data-active] .rv-part {
  fill-opacity: 1;
  stroke-opacity: .7;
}

.rv-band[data-active] {
  filter: drop-shadow(0 3px 7px var(--rv-lift));
}

.rv-band.rvg-1 {
  filter: url(#rv-glow-1);
}

.rv-band.rvg-2 {
  filter: url(#rv-glow-2);
}

.rv-band.rvg-3 {
  filter: url(#rv-glow-3);
}

.rv-band.rvg-1[data-active] {
  filter: url(#rv-glow-1) drop-shadow(0 3px 7px var(--rv-lift));
}

.rv-band.rvg-2[data-active] {
  filter: url(#rv-glow-2) drop-shadow(0 3px 7px var(--rv-lift));
}

.rv-band.rvg-3[data-active] {
  filter: url(#rv-glow-3) drop-shadow(0 3px 7px var(--rv-lift));
}

/* Following one source (or outcome): the rest steps back. */
.rv-svg[data-following] .rv-band {
  opacity: 1;
}

.rv-svg[data-following] .rv-part {
  opacity: .1;
}

.rv-svg[data-following] .rv-part[data-on] {
  opacity: 1;
  fill-opacity: 1;
}

.rv-svg[data-following] .rv-node-tinted:not([data-on]),
.rv-svg[data-following] .rv-label-tinted:not([data-on]) {
  opacity: .35;
}

/* The glow's light: revenue coral, from the band's shape. */
.rv-glow-flood {
  flood-color: var(--revenue);
  flood-opacity: .5;
}

.rvt-m4 { fill: var(--rv-t-m4); --rv-swatch: var(--rv-t-m4); }
.rvt-m3 { fill: var(--rv-t-m3); --rv-swatch: var(--rv-t-m3); }
.rvt-m2 { fill: var(--rv-t-m2); --rv-swatch: var(--rv-t-m2); }
.rvt-m1 { fill: var(--rv-t-m1); --rv-swatch: var(--rv-t-m1); }
.rvt-0 { fill: var(--rv-t-0); --rv-swatch: var(--rv-t-0); }
.rvt-p1 { fill: var(--rv-t-p1); --rv-swatch: var(--rv-t-p1); }
.rvt-p2 { fill: var(--rv-t-p2); --rv-swatch: var(--rv-t-p2); }
.rvt-p3 { fill: var(--rv-t-p3); --rv-swatch: var(--rv-t-p3); }
.rvt-p4 { fill: var(--rv-t-p4); --rv-swatch: var(--rv-t-p4); }
.rvt-none { fill: var(--rv-t-none); --rv-swatch: var(--rv-t-none); }

/* Nodes: rounded at both ends, plain ink, or in their colour (a step deeper than the
   bands on white, the pastel itself on near-black). */
.rv-node {
  fill: var(--rv-node);
  transition: opacity .25s ease;
}

.rv-node-tinted {
  fill: color-mix(in oklab, var(--rv-c) 55%, var(--rv-ci));
}

:where(:root[data-theme="dark"]) .rv-node-tinted {
  fill: var(--rv-c);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .rv-node-tinted {
    fill: var(--rv-c);
  }
}

.rv-node[data-follow],
.rv-label[data-follow] {
  cursor: pointer;
}

.rv-stage-name {
  fill: var(--muted);
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rv-svg-narrow .rv-stage-name {
  font-size: 10px;
  letter-spacing: .03em;
}

/* Labels sit in a soft halo of the panel's colour (one filter for them all), so they
   read over the brightest bands without a hard outline. */
.rv-labels {
  filter: url(#rv-halo);
}

.rv-halo-flood {
  flood-color: var(--rv-label-halo);
  flood-opacity: .86;
}

.rv-label {
  fill: var(--ink-2);
  font-weight: 560;
}

.rv-label-n {
  fill: var(--muted);
  font-weight: 450;
}

/* A coloured node's name in its ink. */
.rv-label-tinted {
  fill: var(--rv-ci);
  font-weight: 620;
  transition: opacity .25s ease;
}

/* The flows draw in from the left, stage after stage, as the nodes grow; once, and not
   with reduced motion. Nothing is clipped once they're in (the glow spills over). */
@media (prefers-reduced-motion: no-preference) {
  .rv-stage-bands {
    animation: rv-draw .9s var(--ease-out) backwards;
  }

  .rv-stage-bands-1 {
    animation-delay: .3s;
  }

  .rv-stage-bands-2 {
    animation-delay: .6s;
  }

  .rv-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: rv-grow .7s var(--ease-out) backwards;
  }

  .rv-node-1 {
    animation-delay: .25s;
  }

  .rv-node-2 {
    animation-delay: .55s;
  }

  .rv-node-3 {
    animation-delay: .85s;
  }

  .rv-labels {
    animation: rv-fade .6s ease .45s backwards;
  }
}

@keyframes rv-draw {
  from {
    clip-path: inset(-40px 100% -40px -40px);
  }
  to {
    clip-path: inset(-40px -40px -40px -40px);
  }
}

@keyframes rv-grow {
  from {
    opacity: 0;
    transform: scaleY(.15);
  }
}

@keyframes rv-fade {
  from {
    opacity: 0;
  }
}

.rv-empty {
  padding: 48px 12px;
  color: var(--muted);
  text-align: center;
}

.rv-swap[aria-busy="true"] .rv-flat-body,
.rv-swap[aria-busy="true"] .rv-summary {
  opacity: .55;
  transition: opacity .2s ease;
}

/* The table: every flow of the slice, grouped by stage. */

.rv-table-wrap {
  margin-top: 14px;
  border-top: 1px solid var(--line-2);
}

.rv-table-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px 6px;
  list-style: none;
  cursor: pointer;
}

.rv-table-summary::-webkit-details-marker {
  display: none;
}

.rv-table-title {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 620;
}

.rv-table-count {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rv-table-summary .chevron {
  margin-left: auto;
}

.rv-table-wrap[open] .chevron {
  transform: rotate(180deg);
}

.rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.rv-table th,
.rv-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  vertical-align: top;
}

.rv-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.rv-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rv-group th {
  padding-top: 18px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
}

.rv-share {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.rv-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--rv-swatch);
  /* The palest pastels still show their edge on white. */
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, .08);
  vertical-align: -1px;
}

/* A flow's first cell keeps its swatch and name together. */
@media (min-width: 721px) {
  .rv-table td:first-child {
    white-space: nowrap;
  }
}

.rv-temp-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A row's colours: its parts as a small stacked bar. */
.rv-mix-box {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -1px;
}

.rv-mix {
  display: block;
  width: 26px;
  height: 10px;
  overflow: hidden;
  border-radius: 3px;
}

.rv-mix rect {
  fill: var(--rv-c);
}

.rv-sig {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.rv-sig li {
  white-space: nowrap;
}

.rv-sig-name {
  color: var(--muted);
}

.rv-sig-score {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rv-sig .rv-sig-unread {
  flex-basis: 100%;
  color: var(--faint);
  white-space: normal;
}

/* ------------------------------------------------------------------ legend */

.rv-legend {
  margin-top: 16px;
  padding: 0;
}

.rv-legend-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
}

.rv-legend-summary::-webkit-details-marker {
  display: none;
}

.rv-legend[open] .chevron {
  transform: rotate(180deg);
}

.rv-legend-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 620;
}

.rv-legend-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: 13.5px;
}

.rv-legend-part h3 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 640;
}

.rv-legend-part p + p {
  margin-top: 6px;
}

.rv-legend-colour,
.rv-legend-experience {
  grid-column: 1 / -1;
}

.rv-legend-experience {
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

/* The colours of the current colouring, each named. */
.rv-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
}

.rv-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.rv-key .rv-swatch {
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rv-swatch), var(--ink) 14%);
}

.rv-key-name {
  color: var(--ink);
  font-weight: 600;
}

.rv-key-hue {
  color: var(--muted);
  font-size: 12.5px;
}

.rv-legend-quiet {
  color: var(--muted);
}

.rv-ramp {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  height: 12px;
  max-width: 420px;
  overflow: hidden;
  border-radius: 3px;
}

.rv-ramp-step {
  background: var(--rv-swatch);
}

.rv-ramp-ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 420px;
  margin: 5px 0 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.rv-ramp-ends span:last-child {
  text-align: right;
}

.rv-legend-none {
  margin-bottom: 8px;
  color: var(--muted);
}

.rv-legend-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
}

.rv-legend-signals li {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.rv-legend-signals li[data-available] {
  border-left-color: var(--rv-t-p3);
}

.rv-legend-name {
  color: var(--ink);
  font-weight: 620;
}

.rv-legend-rule {
  color: var(--ink-2);
}

.rv-legend-site {
  color: var(--muted);
  font-size: 12.5px;
}

.rv-legend-not {
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  color: var(--muted);
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1100px) {
  .rv-legend-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rv-legend-colour {
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  .rv-title h2 {
    font-size: 25px;
  }

  .rv-summary {
    align-items: flex-start;
    text-align: left;
  }

  .rv-controls-sep {
    display: none;
  }

  .rv-controls .menu {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .rv-controls .menu-button {
    width: 100%;
    justify-content: space-between;
  }

  .rv-controls .menu-caption {
    flex: none;
  }

  .rv-controls .menu-value {
    flex: 1;
    text-align: left;
  }

  .rv-controls .menu-list {
    min-width: 0;
    width: max(100%, 200px);
  }

  .rv-switch {
    flex: 1 1 100%;
  }

  .rv-colour {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .rv-colour-caption {
    padding: 0 6px 0 8px;
    font-size: 13px;
  }

  .rv-colour-option {
    flex: 1;
    justify-content: center;
    padding: 0 6px;
    font-size: 13.5px;
  }

  /* No room for the dots beside the names on a phone. */
  .rv-colour-dots {
    display: none;
  }

  .rv-weeks li {
    flex: 1 1 calc(33.333% - 4px);
    min-width: 0;
  }

  .rv-weeks .rv-weeks-all {
    flex: 1 1 calc(33.333% - 4px);
  }

  .rv-week {
    height: 46px;
    padding: 6px 7px 5px;
    font-size: 12px;
  }

  .rv-flat {
    padding: 14px 12px 16px;
  }

  .rv-drawing {
    margin: 0;
  }

  .rv-legend-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .rv-legend-signals {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The table becomes one card per flow. */
  .rv-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .rv-table,
  .rv-table tbody,
  .rv-table tr,
  .rv-table td,
  .rv-table th {
    display: block;
    width: 100%;
  }

  .rv-table tr:not(.rv-group) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
  }

  .rv-table td {
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .rv-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .rv-table .num {
    text-align: left;
  }

  .rv-table td:nth-child(5),
  .rv-table td:nth-child(6) {
    grid-column: 1 / -1;
  }

  .rv-share {
    display: inline;
    margin-left: 6px;
  }

  .rv-group th {
    padding: 16px 0 4px;
    border-bottom: 1px solid var(--line);
  }
}