/* ==========================================================================
   Reliever website v4/v5 · product mocks
   Dashboard (.rdash, Hm9 / S13), Budget Builder (.rbud, S4), and in v5 the
   chart of accounts (.rcoa, V11) and contractor lifecycle (.rvlc, V12).
   Loads after /styles.css. Everything is scoped under .rdash / .rbud /
   .rcoa / .rvlc / .rm-*
   so no page stylesheet can collide with it (motion.css owns `.chapter`,
   the pages own `.dash`, `.viz*`, `.tab*`, `.cl-row`).
   Both mocks size to their container (container queries), so the same
   partial reads at 1080px on the Home seam, in a 340px tab panel, and on a
   390px phone. No device bezels. Paper on field, 1px hairlines, radius
   14/22, tabular numerals, 8px rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared: staggered assembly (independent of css/motion.css)
   motion.js adds .is-in to [data-reveal] and writes each child's delay
   inline. These rules make the children rise without needing motion.css.
   Row hover paints a ::before, never the row itself, so the inline
   transition-delay from the stagger can never slow a hover down.
   -------------------------------------------------------------------------- */
.js .rm-stagger[data-reveal] {
  opacity: 1;
  transform: none;
}
.js .rm-stagger[data-reveal] > * {
  opacity: 0;
  transform: translateY(10px);
}
.js .rm-stagger[data-reveal].is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .rm-stagger[data-reveal] > *,
  .js .rm-stagger[data-reveal].is-in > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   1. DASHBOARD  .rdash
   ========================================================================== */
.rdash {
  --rd-hover: #f3f3f2;
  --rd-chip: #efefef;
  --rd-pad: 16px;
  container: rdash / inline-size;
  position: relative;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.rdash--full {
  box-shadow: var(--float);
}
.rdash p {
  margin: 0;
}
.rdash svg {
  display: block;
  flex: none;
}

/* --- app chrome: top bar ------------------------------------------------ */
.rdash__top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 var(--rd-pad);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
/* the [R] mark, drawn in CSS so the chrome costs no request */
.rdash__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.rdash__mark::before,
.rdash__mark::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border: 1.75px solid var(--ink);
}
.rdash__mark::before {
  left: 0;
  border-right: 0;
}
.rdash__mark::after {
  right: 0;
  border-left: 0;
}
.rdash__sep {
  width: 1px;
  height: 20px;
  background: var(--hairline);
  flex: none;
}
.rdash__org {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.rdash__org-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rdash__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  background: var(--ink);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rdash__org svg {
  width: 14px;
  height: 14px;
  color: var(--faint);
}
.rdash__season {
  display: none;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.rdash__spacer {
  flex: 1;
}
.rdash__search {
  display: none;
  align-items: center;
  gap: 8px;
  width: 210px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--field);
  font-size: 12px;
  color: var(--muted);
}
.rdash__search svg {
  width: 14px;
  height: 14px;
}
.rdash__bell {
  position: relative;
  display: inline-flex;
  color: var(--muted);
}
.rdash__bell svg {
  width: 18px;
  height: 18px;
}
.rdash__bell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--pill);
  background: var(--crit);
  box-shadow: 0 0 0 2px var(--paper);
}
.rdash__me {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--pill);
  background: var(--purple);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- shell: rail + main --------------------------------------------------- */
.rdash__shell {
  display: flex;
  align-items: stretch;
}
.rdash__rail {
  display: none;
  flex: none;
  width: 184px;
  padding: 16px 12px;
  border-right: 1px solid var(--hairline);
  background: var(--paper);
}
.rdash__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rdash__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  transition:
    background-color 120ms ease,
    color 120ms ease;
}
.rdash__nav-item svg {
  width: 16px;
  height: 16px;
}
.rdash__nav-item:hover {
  color: var(--ink);
  background: var(--rd-hover);
}
.rdash__nav-item.is-active {
  color: var(--ink);
  font-weight: 600;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.rdash__nav-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.rdash__main {
  flex: 1;
  min-width: 0;
  padding: var(--rd-pad);
  background: var(--field);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- greeting ------------------------------------------------------------- */
.rdash__hello {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rdash__greet {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.rdash__date {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* --- shared bits ---------------------------------------------------------- */
.rdash__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.rdash__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.rdash__meta {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
.rdash__panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 14px 16px 6px;
  min-width: 0;
}
.rdash__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.rdash__link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.rdash__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: var(--ink);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

/* filled status chips (Waiting on you) */
.rdash__chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: var(--rd-chip);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.rdash__chip--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.rdash__chip--crit {
  background: var(--crit-soft);
  color: var(--crit);
}
/* outlined category chips (transactions) */
.rdash__cat {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.rdash__cat--warn {
  border-color: transparent;
  background: var(--warn-soft);
  color: var(--warn);
}

/* hover highlight shared by every row (painted on ::before) */
.rdash__txrow,
.rdash__item,
.rdash__tile {
  position: relative;
}
.rdash__txrow::before,
.rdash__item::before {
  content: "";
  position: absolute;
  inset: 1px -8px;
  border-radius: var(--radius-s);
  background: transparent;
  transition: background-color 120ms ease;
  pointer-events: none;
}
.rdash__txrow:hover::before,
.rdash__item:hover::before {
  background: var(--rd-hover);
}
.rdash__txrow > *,
.rdash__item > * {
  position: relative;
}

/* --- (a) linked accounts -------------------------------------------------- */
.rdash__accounts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rdash__acc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.rdash__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.rdash__total-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* list mode (default: phones, compact variant) */
.rdash__tiles {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 0 14px;
}
.rdash__tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name bal"
    "meta bal";
  align-items: center;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.rdash__tile:last-child {
  border-bottom: 0;
}
.rdash__tile::before {
  content: "";
  position: absolute;
  inset: 1px -8px;
  border-radius: var(--radius-s);
  background: transparent;
  transition: background-color 120ms ease;
  pointer-events: none;
}
.rdash__tile:hover::before {
  background: var(--rd-hover);
}
.rdash__tile > * {
  position: relative;
}
.rdash__tile-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
}
.rdash__tile-name i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--line-strong);
}
.rdash__tile--main .rdash__tile-name i {
  background: var(--ink);
}
.rdash__tile-meta {
  grid-area: meta;
  font-size: 11px;
  color: var(--muted);
}
.rdash__tile-bal {
  grid-area: bal;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}
.rdash__spark {
  display: none;
}

/* --- (b) recent transactions --------------------------------------------- */
.rdash__tx {
  container: rdtx / inline-size;
}
.rdash__cols {
  display: none;
}
.rdash__txrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "who amt"
    "who cat";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.rdash__txrow:last-child {
  border-bottom: 0;
}
.rdash__txdate {
  grid-area: date;
  display: none;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.rdash__who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rdash__ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--pill);
  background: var(--field);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rdash__ava svg {
  width: 14px;
  height: 14px;
}
.rdash__who-text {
  min-width: 0;
}
.rdash__payee {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rdash__who .rdash__meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rdash__txrow .rdash__cat {
  grid-area: cat;
  justify-self: end;
}
.rdash__amt {
  grid-area: amt;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.rdash__amt--in {
  color: var(--good);
}

/* --- (c) waiting on you --------------------------------------------------- */
.rdash__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.rdash__item:last-child {
  border-bottom: 0;
}
.rdash__item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  background: var(--field);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.rdash__item-ico svg {
  width: 14px;
  height: 14px;
}
.rdash__item-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.rdash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* --- compact variant: accounts + waiting on you --------------------------- */
.rdash--compact .rdash__top {
  height: 46px;
  gap: 10px;
}
.rdash--compact .rdash__main {
  gap: 14px;
}
.rdash--compact .rdash__panel {
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Dashboard: recompose by the mock's own width
   -------------------------------------------------------------------------- */
@container rdash (min-width: 520px) {
  .rdash__main {
    --rd-pad: 20px;
    padding: 20px;
  }
  .rdash__top {
    padding: 0 20px;
  }
  .rdash__season {
    display: inline-flex;
  }
}

/* compact, side by side once there is room */
@container rdash (min-width: 600px) {
  .rdash--compact .rdash__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* full: tile grid */
@container rdash (min-width: 560px) {
  .rdash--full .rdash__tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .rdash--full .rdash__tile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "bal"
      "meta";
    align-content: start;
    row-gap: 4px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-m);
    transition: border-color 120ms ease;
  }
  .rdash--full .rdash__tile::before {
    display: none;
  }
  .rdash--full .rdash__tile:hover {
    border-color: var(--line-strong);
  }
  .rdash--full .rdash__tile-bal {
    text-align: left;
    font-size: 17px;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .rdash--full .rdash__tile--main {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name spark"
      "bal spark"
      "meta spark";
    column-gap: 12px;
  }
  .rdash--full .rdash__tile--main .rdash__tile-bal {
    font-size: 22px;
  }
  .rdash--full .rdash__spark {
    grid-area: spark;
    display: block;
    align-self: end;
    width: clamp(72px, 16cqi, 132px);
    height: 40px;
    color: var(--ink);
  }
  .rdash--full .rdash__tile--more {
    background: var(--field);
    border-style: dashed;
    border-color: var(--line-strong);
  }
}

@container rdash (min-width: 720px) {
  .rdash__search {
    display: inline-flex;
  }
}

/* full: rail + two panels */
@container rdash (min-width: 880px) {
  .rdash--full .rdash__rail {
    display: block;
  }
  .rdash--full .rdash__main {
    padding: 24px;
    gap: 20px;
  }
  .rdash--full .rdash__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
  .rdash__greet {
    font-size: 19px;
  }
}

/* transactions: table columns once the panel itself is wide enough */
@container rdtx (min-width: 460px) {
  .rdash__cols {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 104px 88px;
    column-gap: 12px;
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--hairline);
  }
  .rdash__cols span:nth-child(3),
  .rdash__cols span:nth-child(4) {
    text-align: right;
  }
  .rdash__cols span:nth-child(3) {
    text-align: left;
  }
  .rdash__txrow {
    grid-template-columns: 50px minmax(0, 1fr) 104px 88px;
    grid-template-areas: "date who cat amt";
  }
  .rdash__txdate {
    display: block;
  }
  .rdash__txrow .rdash__cat {
    justify-self: start;
  }
  .rdash__meta-date {
    display: none;
  }
}

/* ==========================================================================
   2. BUDGET BUILDER  .rbud
   ========================================================================== */
.rbud {
  --rb-track: #ececec;
  --rb-reg: var(--purple);
  container: rbud / inline-size;
  position: relative;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.rbud--full {
  box-shadow: var(--float);
}
.rbud p {
  margin: 0;
}
.rbud ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rbud svg {
  display: block;
  flex: none;
}
/* the mock is always paper, even inside an ink section */
.rbud :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- header: title + the double approval --------------------------------- */
.rbud__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.rbud__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rbud__title-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: #ffffff;
}
.rbud__title-ico svg {
  width: 15px;
  height: 15px;
}
.rbud__kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.rbud__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.rbud__approvals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rbud__appr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 7px;
  border-radius: var(--pill);
  background: var(--good-soft);
  color: var(--good);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rbud__appr svg {
  width: 13px;
  height: 13px;
}

/* --- body: areas ---------------------------------------------------------- */
.rbud__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "rev"
    "tie"
    "exp"
    "oth";
}
.rbud__rev {
  grid-area: rev;
}
.rbud__tie {
  grid-area: tie;
}
.rbud__group--exp {
  grid-area: exp;
}
.rbud__group--oth {
  grid-area: oth;
}
.rbud__rev,
.rbud__group {
  padding: 16px;
}
.rbud__group + .rbud__group {
  padding-top: 4px;
}

.rbud__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* projected registration revenue */
.rbud__rev-num {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.rbud__calc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.rbud__calc b {
  color: var(--ink);
  font-weight: 600;
}

/* the tie: roster slider -> fee per player */
.rbud__tie {
  padding: 18px 16px 20px;
  background: var(--field);
  border-block: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rbud__roster {
  display: block;
  cursor: pointer;
}
.rbud__roster-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rbud__roster-val {
  font-size: 13px;
  color: var(--muted);
}
.rbud__roster-val b {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.rbud__range {
  --p: 41.667%;
  display: block;
  width: 100%;
  height: 36px;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.rbud__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--pill);
  background: linear-gradient(
    to right,
    var(--ink) 0,
    var(--ink) var(--p),
    #dcdcdc var(--p),
    #dcdcdc 100%
  );
}
.rbud__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: var(--pill);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.14);
  transition: transform 140ms var(--ease);
}
.rbud__range::-moz-range-track {
  height: 6px;
  border-radius: var(--pill);
  background: #dcdcdc;
}
.rbud__range::-moz-range-progress {
  height: 6px;
  border-radius: var(--pill);
  background: var(--ink);
}
.rbud__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--pill);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.14);
}
.rbud__range:hover::-webkit-slider-thumb,
.rbud__range:active::-webkit-slider-thumb {
  transform: scale(1.08);
}
.rbud__range:focus {
  outline: none;
}
.rbud__range:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--radius-s);
}
.rbud__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--faint);
}

.rbud__fee {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.rbud__fee .rbud__label {
  color: var(--ink);
}
.rbud__fee .rbud__label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--rb-reg);
}
.rbud__fee-num {
  display: block;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
}
.rbud__fee-num.is-tick {
  animation: rbTick 200ms var(--ease) 1;
}
@keyframes rbTick {
  from {
    opacity: 0.55;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rbud__formula {
  font-size: 11.5px;
  color: var(--muted);
}

/* balance: expenses against everything that funds them */
.rbud__balance {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rbud__brow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}
.rbud__brow b {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.rbud__track {
  grid-column: 1 / -1;
  position: relative;
  height: 10px;
  border-radius: 3px;
  background: var(--rb-track);
  overflow: hidden;
}
/* each segment spans the whole track, then moves and scales into place, so
   the bar re-tweens on transform only */
.rbud__seg {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: translateX(calc(var(--x, 0) * 100%)) scaleX(var(--w, 0));
  transition: transform 240ms var(--ease);
  background: var(--ink);
}

/* expense + other revenue lines */
.rbud__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.rbud__group-head b {
  font-size: 14px;
  font-weight: 700;
}
.rbud__line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 70px;
  align-items: center;
  column-gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
}
.rbud__line:last-child {
  border-bottom: 0;
}
.rbud__line::before {
  content: "";
  position: absolute;
  inset: 1px -8px;
  border-radius: var(--radius-s);
  background: transparent;
  transition: background-color 120ms ease;
  pointer-events: none;
}
.rbud__line:hover::before {
  background: #f3f3f2;
}
.rbud__line > * {
  position: relative;
}
.rbud__line-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.rbud__line-meta {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.rbud__bar {
  position: relative;
  height: 6px;
  border-radius: var(--pill);
  background: var(--rb-track);
  overflow: hidden;
}
.rbud__bar i {
  position: absolute;
  inset: 0;
  border-radius: var(--pill);
  background: var(--c, var(--ink));
  transform-origin: left center;
  transform: scaleX(var(--w, 0));
  transition: transform 240ms var(--ease);
}
.rbud__amt {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* one palette, used by both the line bars and the balance segments, so the
   lists double as the legend for the two stacked bars */
.rbud [data-c="1"] {
  --c: #111111;
  background: #111111;
}
.rbud [data-c="2"] {
  --c: #3d3d3d;
  background: #3d3d3d;
}
.rbud [data-c="3"] {
  --c: #636363;
  background: #636363;
}
.rbud [data-c="4"] {
  --c: #878787;
  background: #878787;
}
.rbud [data-c="5"] {
  --c: #a8a8a8;
  background: #a8a8a8;
}
.rbud [data-c="6"] {
  --c: #c6c6c6;
  background: #c6c6c6;
}
.rbud [data-c="spon"] {
  --c: #4f4f4f;
  background: #4f4f4f;
}
.rbud [data-c="fund"] {
  --c: #9c9c9c;
  background: #9c9c9c;
}
.rbud [data-c="reg"] {
  --c: var(--rb-reg);
  background: var(--rb-reg);
}

/* compact: one summary list instead of line items */
.rbud__sum {
  display: flex;
  flex-direction: column;
}
.rbud__sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.rbud__sum-row:last-child {
  border-bottom: 0;
}
.rbud__sum-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.rbud__sum-row span i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.rbud__sum-row b {
  font-weight: 600;
}

.rbud--compact .rbud__rev-num {
  font-size: 26px;
}
.rbud--compact .rbud__fee-num {
  font-size: 40px;
}
.rbud--compact .rbud__tie {
  gap: 14px;
}
.rbud--compact .rbud__body {
  grid-template-areas:
    "rev"
    "tie";
}

/* --------------------------------------------------------------------------
   Budget: recompose by the mock's own width
   -------------------------------------------------------------------------- */
@container rbud (min-width: 480px) {
  .rbud__top {
    padding: 16px 20px;
  }
  .rbud__rev,
  .rbud__group {
    padding: 18px 20px;
  }
  .rbud__tie {
    padding: 20px;
  }
  .rbud__line {
    grid-template-columns: minmax(0, 1fr) 96px 76px;
    column-gap: 16px;
  }
  .rbud__rev-num {
    font-size: 34px;
  }
}

@container rbud (min-width: 720px) {
  .rbud--full .rbud__body {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
    grid-template-areas:
      "rev tie"
      "exp tie"
      "oth tie";
    grid-template-rows: auto auto 1fr;
  }
  .rbud--full .rbud__tie {
    border-block: 0;
    border-left: 1px solid var(--hairline);
    padding: 22px 24px;
    gap: 18px;
  }
  .rbud--full .rbud__rev,
  .rbud--full .rbud__group {
    padding-inline: 24px;
  }
  .rbud--full .rbud__rev {
    padding-top: 22px;
  }
  .rbud--full .rbud__fee-num {
    font-size: 52px;
  }
  .rbud--full .rbud__top {
    padding: 16px 24px;
  }
}

/* stacked two-line text inside dashboard rows */
.rdash__payee,
.rdash__who-text .rdash__meta,
.rdash__item-title,
.rdash__item .rdash__meta {
  display: block;
}
.rdash__item .rdash__meta {
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Pass 2 fixes (from the 1440 / 390 captures)
   -------------------------------------------------------------------------- */
/* the sparkline only exists in tile mode; `.rdash svg` would otherwise win */
.rdash .rdash__spark {
  display: none;
}
@container rdash (min-width: 560px) {
  .rdash--full .rdash__spark {
    display: block;
  }
}

/* tx meta: the payment method shows once the table has room */
.rdash__meta-x {
  display: none;
}
@container rdtx (min-width: 460px) {
  .rdash__meta-x {
    display: inline;
  }
}

/* phone: the full variant keeps its first four transactions and the three
   most urgent waiting items, so the hero seam stays one thumb-scroll long */
.rdash--full .rdash__txrow:nth-child(n + 5),
.rdash--full .rdash__item:nth-child(n + 4) {
  display: none;
}
.rdash--full .rdash__txrow:nth-child(4),
.rdash--full .rdash__item:nth-child(3) {
  border-bottom: 0;
}
.rdash__org svg {
  display: none;
}
@container rdash (min-width: 520px) {
  .rdash--full .rdash__txrow:nth-child(n + 5) {
    display: grid;
  }
  .rdash--full .rdash__item:nth-child(n + 4) {
    display: grid;
  }
  .rdash--full .rdash__txrow:nth-child(4),
  .rdash--full .rdash__item:nth-child(3) {
    border-bottom: 1px solid var(--hairline);
  }
  .rdash__org svg {
    display: block;
  }
}

/* compact: one line per account */
.rdash--compact .rdash__tile-meta {
  display: none;
}
.rdash--compact .rdash__tile {
  grid-template-areas: "name bal";
  padding: 9px 0;
}

/* budget: registration carries the one accent mark */
.rbud__label--reg::before,
.rbud__fee .rbud__label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--rb-reg);
}
.rbud__basis {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* sign-off: the last step of the tie panel, pinned to its foot when wide */
.rbud__signoff {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.rbud__sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rbud__sign-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
@container rbud (min-width: 720px) {
  .rbud--full .rbud__signoff {
    margin-top: auto;
  }
}

/* compact balance: two slim bars */
.rbud--compact .rbud__balance {
  margin-top: 10px;
}
.rbud--compact .rbud__track {
  height: 8px;
}

/* ==========================================================================
   3. CHART OF ACCOUNTS  .rcoa  (v5, V11)
   A sports chart of accounts: codes, a Revenue and an Expenses group with
   subtle totals, this month against the season, and a net line. Sized by
   its own width: under 340px the "Sep" column drops and only the season
   shows. Rows rise in a stagger once (section 5); account rows highlight
   on hover and focus with a ::before, so the entrance never slows the
   highlight.
   ========================================================================== */
.rcoa {
  --rc-hover: #f3f3f2;
  container: rcoa / inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 16px 16px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  color: var(--ink);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.rcoa p,
.rcoa ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcoa__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-bottom: 14px;
}
.rcoa__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rcoa__season {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* one grid for the column heads and every row */
.rcoa__cols,
.rcoa__list > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "code name s";
  align-items: center;
  column-gap: 8px;
}
.rcoa__code {
  grid-area: code;
}
.rcoa__name {
  grid-area: name;
  min-width: 0;
}
.rcoa__m {
  grid-area: m;
  display: none;
}
.rcoa__s {
  grid-area: s;
}
.rcoa__m,
.rcoa__s {
  text-align: right;
  white-space: nowrap;
}
.rcoa__cols {
  padding: 0 8px 7px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.rcoa__cols-acct {
  grid-column: code-start / name-end;
}

.rcoa__list {
  padding-top: 6px;
}
/* the list is the reveal trigger; its rows move, it does not */
.js .rcoa__list[data-reveal] {
  opacity: 1;
  transform: none;
}
.rcoa__list > li {
  position: relative;
  padding: 7px 8px;
}
.rcoa__code {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--faint);
}

/* group heads: a field band, the label in caps, the totals a shade back */
.rcoa__group {
  border-radius: 6px;
  background: var(--field);
}
.rcoa__group:not(:first-child) {
  margin-top: 8px;
}
.rcoa__group .rcoa__name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.rcoa__group .rcoa__m,
.rcoa__group .rcoa__s {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* account rows */
.rcoa__row {
  cursor: default;
  outline-offset: -2px;
}
.rcoa__row + .rcoa__row {
  border-top: 1px solid var(--hairline);
}
.rcoa__row .rcoa__name {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rcoa__row .rcoa__m {
  color: var(--muted);
}
.rcoa__row .rcoa__s {
  font-weight: 600;
}
.rcoa__row > * {
  position: relative;
}
.rcoa__row::before,
.rcoa__row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.rcoa__row::before {
  inset: 0;
  border-radius: 6px;
  background: var(--rc-hover);
}
.rcoa__row::after {
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--purple);
}
.rcoa__row:hover::before,
.rcoa__row:hover::after,
.rcoa__row:focus-visible::before,
.rcoa__row:focus-visible::after {
  opacity: 1;
}
.rcoa__row:focus-visible {
  border-radius: 6px;
}
.rcoa__row:hover .rcoa__code,
.rcoa__row:focus-visible .rcoa__code,
.rcoa__row:hover .rcoa__m,
.rcoa__row:focus-visible .rcoa__m {
  color: var(--ink);
}

/* net: an accounting rule above it, both figures in ink */
.rcoa__list > .rcoa__net {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--ink);
  border-radius: 0;
}
.rcoa__net .rcoa__name {
  font-weight: 700;
}
.rcoa__net .rcoa__m,
.rcoa__net .rcoa__s {
  font-weight: 700;
  color: var(--ink);
}

.rcoa__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}
.rcoa__foot b {
  font-weight: 600;
  color: var(--ink);
}
.rcoa__foot > span:last-child {
  text-wrap: balance;
}
.rcoa__ok {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--pill);
  background: var(--good-soft);
  color: var(--good);
}
.rcoa__ok svg {
  width: 11px;
  height: 11px;
}

/* 340px and up: the month column joins the season */
@container rcoa (min-width: 340px) {
  .rcoa__cols,
  .rcoa__list > li {
    grid-template-columns: 36px minmax(0, 1fr) 62px 70px;
    grid-template-areas: "code name m s";
  }
  .rcoa__m {
    display: block;
  }
}
@container rcoa (min-width: 420px) {
  .rcoa {
    padding: 18px 18px 16px;
    font-size: 13px;
  }
  .rcoa__title {
    font-size: 14.5px;
  }
  .rcoa__cols,
  .rcoa__list > li {
    grid-template-columns: 40px minmax(0, 1fr) 70px 78px;
    column-gap: 10px;
  }
  .rcoa__list > li {
    padding-block: 8px;
  }
}

/* ==========================================================================
   4. CONTRACTOR LIFECYCLE  .rvlc  (v5, V12)
   One vendor on a four step progress line: Contract uploaded, W-9 signed,
   Payments logged, 1099 issued. The line draws once to the third step and
   the done steps tick in sequence as it reaches them; the fourth waits,
   ringed in purple. Hover or focus a step and the callout below shows its
   detail, its notch sliding under that step. CSS only (:has), so it works
   on any page without a script: hover wins over focus, and with neither
   the callout shows the step that is up next.
   ========================================================================== */
.rvlc {
  --node: 24px;
  container: rvlc / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  color: var(--ink);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.rvlc p,
.rvlc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rvlc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.rvlc__ava {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--pill);
  background: var(--field);
  border: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rvlc__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.rvlc__name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rvlc__meta {
  font-size: 11.5px;
  color: var(--muted);
}
.rvlc__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--pill);
  background: var(--field);
  border: 1px solid var(--hairline);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* the body centres itself when a page stretches the card taller */
.rvlc__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 20px;
  margin-block: auto;
}

/* --- the track: rail, fill, four steps -------------------------------- */
.rvlc__track {
  position: relative;
}
/* the rail runs node 1 to node 4 (three columns); the pending leg is dashed */
.rvlc__rail {
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: calc(var(--node) / 2);
  width: 75%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 4px,
    transparent 4px 8px
  );
}
/* node 1 to node 3: two of the rail's three legs */
.rvlc__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(200% / 3);
  height: 100%;
  background: var(--ink);
  transform-origin: 0 50%;
}
.rvlc__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rvlc__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 6px;
  cursor: default;
}
.rvlc__node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: var(--pill);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  color: #ffffff;
  transition: box-shadow 160ms ease-out;
}
.rvlc__node svg {
  width: 13px;
  height: 13px;
}
.rvlc__step.is-done .rvlc__node {
  background: var(--ink);
  border-color: var(--ink);
}
.rvlc__step.is-next .rvlc__node {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(112, 48, 176, 0.14);
}
.rvlc__step.is-next .rvlc__node::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: var(--purple);
}
.rvlc__label {
  min-height: 2.5em; /* two lines, so the dates share one baseline */
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}
.rvlc__date {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  transition: color 120ms ease-out;
}
.rvlc__step.is-next .rvlc__date {
  color: var(--purple);
  font-weight: 600;
}
/* hover or focus: a ring round the node, the date in ink */
.rvlc__step:hover .rvlc__node,
.rvlc__step:focus .rvlc__node {
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.1);
}
.rvlc__step.is-next:hover .rvlc__node,
.rvlc__step.is-next:focus .rvlc__node {
  box-shadow: 0 0 0 6px rgba(112, 48, 176, 0.2);
}
.rvlc__step.is-done:hover .rvlc__date,
.rvlc__step.is-done:focus .rvlc__date {
  color: var(--ink);
}
.rvlc__step:focus {
  outline: none;
}
.rvlc__step:focus-visible .rvlc__node,
.rvlc__step.is-next:focus-visible .rvlc__node {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--ink);
}
.rvlc__step:focus-visible .rvlc__label {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* --- the callout: four details stacked in one cell, one visible -------- */
.rvlc__callout {
  position: relative;
  display: grid;
  padding: 11px 13px 12px;
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.rvlc__detail {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  visibility: hidden;
}
.rvlc__detail-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.rvlc__detail b {
  font-size: 12.5px;
  font-weight: 700;
}
.rvlc__detail-meta {
  font-size: 11.5px;
  color: var(--muted);
}
.rvlc__tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--pill);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.rvlc__tag--done {
  background: var(--good-soft);
  color: var(--good);
}
.rvlc__tag--next {
  background: rgba(112, 48, 176, 0.1);
  color: var(--purple);
}
/* the notch is one column wide and slides whole columns (--k = 0 to 3) */
.rvlc__notch {
  --k: 3;
  position: absolute;
  top: -6px;
  left: 0;
  width: 25%;
  height: 10px;
  pointer-events: none;
  transform: translateX(calc(var(--k) * 100%));
  transition: transform 240ms var(--ease);
}
.rvlc__notch::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--node) / 2 - 6px);
  width: 10px;
  height: 10px;
  background: var(--field);
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  transform: rotate(45deg);
}

/* default: the step that is up next */
.rvlc__detail:nth-of-type(4) {
  visibility: visible;
}
/* focus, while nothing is hovered */
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:focus) .rvlc__detail {
  visibility: hidden;
}
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(1):focus) .rvlc__detail:nth-of-type(1),
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(2):focus) .rvlc__detail:nth-of-type(2),
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(3):focus) .rvlc__detail:nth-of-type(3),
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(4):focus) .rvlc__detail:nth-of-type(4) {
  visibility: visible;
}
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(1):focus) .rvlc__notch {
  --k: 0;
}
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(2):focus) .rvlc__notch {
  --k: 1;
}
.rvlc:not(:has(.rvlc__step:hover)):has(.rvlc__step:nth-child(3):focus) .rvlc__notch {
  --k: 2;
}
/* hover wins */
.rvlc:has(.rvlc__step:hover) .rvlc__detail {
  visibility: hidden;
}
.rvlc:has(.rvlc__step:nth-child(1):hover) .rvlc__detail:nth-of-type(1),
.rvlc:has(.rvlc__step:nth-child(2):hover) .rvlc__detail:nth-of-type(2),
.rvlc:has(.rvlc__step:nth-child(3):hover) .rvlc__detail:nth-of-type(3),
.rvlc:has(.rvlc__step:nth-child(4):hover) .rvlc__detail:nth-of-type(4) {
  visibility: visible;
}
.rvlc:has(.rvlc__step:nth-child(1):hover) .rvlc__notch {
  --k: 0;
}
.rvlc:has(.rvlc__step:nth-child(2):hover) .rvlc__notch {
  --k: 1;
}
.rvlc:has(.rvlc__step:nth-child(3):hover) .rvlc__notch {
  --k: 2;
}
.rvlc:has(.rvlc__step:nth-child(4):hover) .rvlc__notch {
  --k: 3;
}

@container rvlc (min-width: 400px) {
  .rvlc {
    --node: 26px;
    padding: 18px;
  }
  .rvlc__label {
    font-size: 12.5px;
  }
  .rvlc__date {
    font-size: 11.5px;
  }
  .rvlc__node svg {
    width: 14px;
    height: 14px;
  }
  .rvlc__callout {
    padding: 12px 14px 13px;
  }
}

/* ==========================================================================
   5. v5 motion for .rcoa and .rvlc (reduced motion shows the final state)
   Keyframes keyed on the trigger's .is-in (the chart's list, the
   lifecycle's track): the chart's rows rise in a stagger; the line draws
   and the done steps tick. Keyframes rather than transitions, so a hover
   is never held up by an entrance delay, and so the entrance also plays
   when a tab panel goes from display: none to shown (a transition cannot
   start from display: none). Inside a [hidden] tab panel (Home keeps
   hidden panels laid out with visibility: hidden at 901px and up, so the
   observer can fire while the panel is still hidden) both mocks hold their
   start state and play when the panel is shown: once per showing, ending
   static.
   ========================================================================== */
@keyframes rvlcDraw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
@keyframes rmRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rvlcFill {
  from {
    background-color: var(--paper);
    border-color: var(--line-strong);
  }
  to {
    background-color: var(--ink);
    border-color: var(--ink);
  }
}
@keyframes rvlcTick {
  from {
    stroke-dashoffset: 14;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rvlcWait {
  from {
    border-color: var(--line-strong);
  }
  to {
    border-color: var(--purple);
  }
}
@keyframes rvlcDot {
  from {
    transform: scale(0);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* chart of accounts: ten rows, 40ms apart */
  .js .rcoa__list[data-reveal] > li {
    opacity: 0;
  }
  .js .rcoa__list[data-reveal].is-in > li {
    opacity: 1;
    animation: rmRise 460ms var(--ease) both;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(2) {
    animation-delay: 40ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(3) {
    animation-delay: 80ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(4) {
    animation-delay: 120ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(5) {
    animation-delay: 160ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(6) {
    animation-delay: 200ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(7) {
    animation-delay: 240ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(8) {
    animation-delay: 280ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(9) {
    animation-delay: 320ms;
  }
  .js .rcoa__list[data-reveal].is-in > li:nth-child(10) {
    animation-delay: 360ms;
  }

  /* lifecycle: the track itself stays put; its parts move */
  .js .rvlc__track[data-reveal] {
    opacity: 1;
    transform: none;
  }
  .js .rvlc__track[data-reveal] .rvlc__fill {
    transform: scaleX(0);
  }
  .js .rvlc__track[data-reveal] .rvlc__step {
    opacity: 0;
  }
  .js .rvlc__track[data-reveal] .is-done .rvlc__node {
    background-color: var(--paper);
    border-color: var(--line-strong);
  }
  .js .rvlc__track[data-reveal] .is-done .rvlc__node path {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
  }
  .js .rvlc__track[data-reveal] .is-next .rvlc__node {
    border-color: var(--line-strong);
  }
  .js .rvlc__track[data-reveal] .is-next .rvlc__node::after {
    transform: scale(0);
  }

  /* the steps rise left to right, then the line draws from node 1 to 3
     (250 to 1250ms) and each done node fills as the line reaches it */
  .js .rvlc__track[data-reveal].is-in .rvlc__step {
    animation: rmRise 460ms var(--ease) both;
  }
  .js .rvlc__track[data-reveal].is-in .rvlc__step:nth-child(2) {
    animation-delay: 70ms;
  }
  .js .rvlc__track[data-reveal].is-in .rvlc__step:nth-child(3) {
    animation-delay: 140ms;
  }
  .js .rvlc__track[data-reveal].is-in .rvlc__step:nth-child(4) {
    animation-delay: 210ms;
  }
  .js .rvlc__track[data-reveal].is-in .rvlc__fill {
    animation: rvlcDraw 1000ms cubic-bezier(0.65, 0, 0.35, 1) 250ms both;
  }
  .js .rvlc__track[data-reveal].is-in .is-done .rvlc__node {
    animation: rvlcFill 200ms ease-out 250ms both;
  }
  .js .rvlc__track[data-reveal].is-in .is-done .rvlc__node path {
    animation: rvlcTick 320ms var(--ease) 330ms both;
  }
  .js .rvlc__track[data-reveal].is-in .is-done:nth-child(2) .rvlc__node {
    animation-delay: 750ms;
  }
  .js .rvlc__track[data-reveal].is-in .is-done:nth-child(2) .rvlc__node path {
    animation-delay: 830ms;
  }
  .js .rvlc__track[data-reveal].is-in .is-done:nth-child(3) .rvlc__node {
    animation-delay: 1250ms;
  }
  .js .rvlc__track[data-reveal].is-in .is-done:nth-child(3) .rvlc__node path {
    animation-delay: 1330ms;
  }
  .js .rvlc__track[data-reveal].is-in .is-next .rvlc__node {
    animation: rvlcWait 260ms ease-out 1450ms both;
  }
  .js .rvlc__track[data-reveal].is-in .is-next .rvlc__node::after {
    animation: rvlcDot 360ms var(--ease) 1500ms both;
  }

  /* inside a hidden tab panel: hold the start state until it is shown */
  .js [hidden] .rvlc__track[data-reveal].is-in .rvlc__step,
  .js [hidden] .rvlc__track[data-reveal].is-in .rvlc__fill,
  .js [hidden] .rvlc__track[data-reveal].is-in .rvlc__node,
  .js [hidden] .rvlc__track[data-reveal].is-in .rvlc__node path,
  .js [hidden] .rvlc__track[data-reveal].is-in .rvlc__node::after {
    animation: none;
  }
  .js [hidden] .rcoa__list[data-reveal].is-in > li {
    animation: none;
    opacity: 0;
  }
}