/* Weekly Review — phase flow + the guess loop.
 *
 * Design system is index.html's :root tokens (navy #0D2A5E, off-white #F5F3EE,
 * Outfit for text, JetBrains Mono + tabular-nums for every number). Nothing here
 * invents a colour: the semantic four are --green / --red / --amber / --navy.
 *
 * One visual rule drives most of this file: HIS mark has to be louder than the
 * machine's. Automatic YoY formatting is a 3px hint stripe on the card edge; a
 * manual mark fills the card. If those two ever read with the same weight, the
 * page stops being his judgment and goes back to being a dashboard.
 */

.rv-page { padding-bottom: 80px; }
.rv-root { display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------------------- chrome --- */

.rv-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.rv-title { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.rv-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.rv-top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.rv-week {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 4px;
}
.rv-week button {
  border: none; background: transparent; cursor: pointer; padding: 6px 9px;
  border-radius: 7px; color: var(--navy); font-size: 15px; line-height: 1;
}
.rv-week button:hover { background: var(--off-white); }
.rv-week button:disabled { opacity: 0.3; cursor: default; }
.rv-week-label {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600;
  color: var(--navy); padding: 0 4px; font-variant-numeric: tabular-nums;
}
.rv-week-label small { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); }

/* Streak: the only score on the page about behaviour instead of performance, so
 * it sits in the chrome and not inside a phase. */
.rv-streak {
  display: flex; align-items: center; gap: 7px;
  background: var(--navy); color: #fff; border-radius: 10px; padding: 8px 13px;
}
.rv-streak-n {
  font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.rv-streak-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.75; line-height: 1.3; }

.rv-save {
  font-size: 11.5px; color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: 5px; min-width: 96px;
}
.rv-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
.rv-save.rv-save-err { color: var(--red); }
.rv-save.rv-save-err i { background: var(--red); }
.rv-save.rv-save-off i { background: var(--amber); }

/* ------------------------------------------------------------ phase rail --- */

.rv-rail {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 3px var(--shadow);
}
.rv-rail-item {
  flex: 1 0 auto; min-width: 108px; text-align: left; cursor: pointer;
  border: 1px solid transparent; background: transparent; border-radius: 9px;
  padding: 9px 11px; transition: background var(--duration-fast), border-color var(--duration-fast);
}
.rv-rail-item:hover { background: var(--off-white); }
.rv-rail-item.rv-on { background: var(--navy); border-color: var(--navy); }
.rv-rail-n {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.08em;
}
.rv-rail-item.rv-on .rv-rail-n { color: rgba(255,255,255,0.65); }
.rv-rail-t { font-size: 12.5px; font-weight: 600; color: var(--navy); margin-top: 2px; white-space: nowrap; }
.rv-rail-item.rv-on .rv-rail-t { color: #fff; }
.rv-rail-c {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; margin-top: 3px;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.rv-rail-item.rv-on .rv-rail-c { color: rgba(255,255,255,0.7); }
.rv-rail-item.rv-done .rv-rail-c { color: var(--green); font-weight: 700; }
.rv-rail-item.rv-on.rv-done .rv-rail-c { color: #7fd4a4; }

/* ------------------------------------------------------------- phase body -- */

.rv-phase { display: flex; flex-direction: column; gap: 16px; }
.rv-phase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rv-phase-title { font-size: 19px; font-weight: 700; color: var(--navy); }
.rv-phase-why { font-size: 13px; color: var(--text-muted); max-width: 68ch; margin-top: 3px; line-height: 1.5; }
.rv-nav { display: flex; gap: 8px; }
.rv-btn {
  border: 1px solid var(--border); background: #fff; color: var(--navy);
  border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.rv-btn:hover { background: var(--off-white); }
.rv-btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.rv-btn-primary:hover { background: var(--navy-light); }
.rv-btn:disabled { opacity: 0.4; cursor: default; }

.rv-empty {
  background: #fff; border: 1px dashed var(--border); border-radius: 12px;
  padding: 34px 24px; text-align: center; color: var(--text-muted); font-size: 13.5px; line-height: 1.6;
}

/* --------------------------------------------------------------- P0 tiles -- */

.rv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .rv-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rv-tiles { grid-template-columns: 1fr; } }

.rv-tile {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 17px; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px var(--shadow);
}
/* Top accent stripe, per the design system. */
.rv-tile::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--navy);
}
.rv-tile.rv-t-good::before { background: var(--green); }
.rv-tile.rv-t-bad::before  { background: var(--red); }
.rv-tile.rv-t-eh::before   { background: var(--amber); }
.rv-tile-l {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.rv-tile-v {
  font-family: 'JetBrains Mono', monospace; font-size: 27px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 7px;
}
.rv-tile-s {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.rv-tile-d { font-weight: 700; }
.rv-pos { color: var(--green); }
.rv-neg { color: var(--red); }
.rv-flat { color: var(--text-muted); }

.rv-headline { display: flex; flex-direction: column; gap: 8px; }
.rv-headline label { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.rv-headline textarea {
  width: 100%; min-height: 74px; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: #fff;
  font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--text);
}
.rv-headline textarea:focus { outline: none; border-color: var(--navy); }
.rv-hint { font-size: 11.5px; color: var(--text-muted); }

/* --------------------------------------------------- the guess loop cards -- */

.rv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }

.rv-card {
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  padding: 16px 17px 14px; position: relative;
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform var(--duration-normal) var(--ease-out-quint),
              box-shadow var(--duration-normal), border-color var(--duration-fast);
}
.rv-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); }

/* The machine's read: a hint stripe on the left edge, deliberately quiet. */
.rv-card::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent;
}
.rv-card.rv-auto-good::before { background: rgba(46, 125, 82, 0.5); }
.rv-card.rv-auto-bad::before  { background: rgba(178, 59, 59, 0.5); }
.rv-card.rv-auto-eh::before   { background: rgba(199, 125, 27, 0.5); }

/* His mark: fills the card. Always wins the read. */
.rv-card.rv-mark-good { background: rgba(46, 125, 82, 0.09);  border-color: rgba(46, 125, 82, 0.45); }
.rv-card.rv-mark-bad  { background: rgba(178, 59, 59, 0.09);  border-color: rgba(178, 59, 59, 0.45); }
.rv-card.rv-mark-eh   { background: rgba(199, 125, 27, 0.10); border-color: rgba(199, 125, 27, 0.45); }

.rv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rv-card-name { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.rv-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Pre-reveal: the ask. */
.rv-guess { margin-top: 14px; }
.rv-guess-q { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.rv-dirs { display: flex; gap: 6px; }
.rv-dir {
  flex: 1; border: 1px solid var(--border); background: var(--warm-white);
  border-radius: 9px; padding: 9px 4px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--navy);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.rv-dir:hover { transform: translateY(-1px); background: #fff; }
.rv-dir.rv-sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.rv-dir-up.rv-sel   { background: var(--green); border-color: var(--green); }
.rv-dir-down.rv-sel { background: var(--red);   border-color: var(--red); }
.rv-dir-flat.rv-sel { background: var(--amber); border-color: var(--amber); }

.rv-mags { display: flex; gap: 6px; margin-top: 7px; }
.rv-mag {
  flex: 1; border: 1px solid var(--border); background: var(--warm-white);
  border-radius: 8px; padding: 7px 4px; cursor: pointer; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: var(--navy);
}
.rv-mag:hover { background: #fff; }
.rv-mag.rv-sel { background: var(--navy); border-color: var(--navy); color: #fff; }

.rv-guess-go { display: flex; gap: 7px; margin-top: 10px; align-items: center; }
.rv-reveal {
  flex: 1; border: none; background: var(--navy); color: #fff; border-radius: 9px;
  padding: 10px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.01em;
}
.rv-reveal:hover { background: var(--navy-light); }
.rv-reveal:disabled { background: #c9c6bf; cursor: default; }
.rv-skip {
  border: none; background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 11px; cursor: pointer; text-decoration: underline;
  padding: 6px 4px;
}

/* Post-reveal: the delta is the headline, the number is support. */
.rv-revealed { margin-top: 13px; animation: rv-flip var(--duration-reveal) var(--ease-out-expo); }
@keyframes rv-flip {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.rv-delta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.rv-delta-verdict {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 6px;
}
.rv-hit  { background: rgba(46, 125, 82, 0.14); color: var(--green); }
.rv-miss { background: rgba(178, 59, 59, 0.14); color: var(--red); }
.rv-nocall { background: rgba(90, 90, 90, 0.1); color: var(--text-muted); }
.rv-delta-txt { font-size: 12px; color: var(--text-muted); }
.rv-delta-txt b { font-family: 'JetBrains Mono', monospace; color: var(--navy); font-variant-numeric: tabular-nums; }

.rv-nums { display: flex; align-items: baseline; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.rv-num-big {
  font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1;
}
.rv-num-py {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.rv-num-pct { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Mark row: appears only after the reveal — marking before looking is guessing
 * twice, and the whole point of the order is guess → see → judge. */
.rv-marks { display: flex; gap: 6px; margin-top: 13px; }
.rv-m {
  flex: 1; border: 1px solid var(--border); background: var(--warm-white);
  border-radius: 8px; padding: 8px 4px; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.rv-m:hover { background: #fff; color: var(--navy); }
.rv-m-good.rv-on { background: var(--green); border-color: var(--green); color: #fff; }
.rv-m-bad.rv-on  { background: var(--red);   border-color: var(--red);   color: #fff; }
.rv-m-eh.rv-on   { background: var(--amber); border-color: var(--amber); color: #fff; }

.rv-note { margin-top: 9px; }
.rv-note textarea {
  width: 100%; min-height: 38px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--warm-white);
  font-family: inherit; font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.rv-note textarea:focus { outline: none; border-color: var(--navy); background: #fff; }
.rv-note-prev {
  font-size: 11.5px; color: var(--text-muted); background: var(--off-white);
  border-left: 2px solid var(--navy); border-radius: 0 6px 6px 0;
  padding: 7px 9px; margin-top: 9px; line-height: 1.45;
}
.rv-note-prev b { color: var(--navy); }

/* ------------------------------------------------------------- P2 picking -- */

.rv-f2 {
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  padding: 16px 18px; box-shadow: 0 1px 3px var(--shadow);
}
.rv-f2 + .rv-f2 { margin-top: 14px; }
.rv-f2-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.rv-f2-div { font-size: 17px; font-weight: 700; color: var(--navy); margin-right: 8px; }
.rv-f2-q { font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* Chips carry a name and a school and nothing else. Any number here would rank
 * the list for him and there would be nothing left to guess. */
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rv-chip {
  border: 1px solid var(--border); background: var(--warm-white); border-radius: 10px;
  padding: 9px 13px; cursor: pointer; font-family: inherit; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--navy);
  transition: transform var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.rv-chip:hover { transform: translateY(-1px); background: #fff; }
.rv-chip.rv-sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.rv-chip-sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.rv-chip.rv-sel .rv-chip-sub { color: rgba(255,255,255,0.7); }

.rv-f2 .rv-guess-go { margin-top: 14px; max-width: 340px; }

.rv-f2-rows { display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.rv-f2-row {
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px;
  background: var(--warm-white);
}
.rv-f2-row.rv-mark-good { background: rgba(46, 125, 82, 0.09);  border-color: rgba(46, 125, 82, 0.45); }
.rv-f2-row.rv-mark-bad  { background: rgba(178, 59, 59, 0.09);  border-color: rgba(178, 59, 59, 0.45); }
.rv-f2-row.rv-mark-eh   { background: rgba(199, 125, 27, 0.10); border-color: rgba(199, 125, 27, 0.45); }
.rv-f2-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-f2-name { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.rv-f2 .rv-delta { margin-top: 12px; border-bottom: none; padding-bottom: 0; }

/* -------------------------------------------------------- P3 quadrant ------ */

.rv-q-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin-top: 15px; align-items: start; }
@media (max-width: 900px) { .rv-q-wrap { grid-template-columns: 1fr; } }

.rv-quad {
  position: relative; aspect-ratio: 1; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--warm-white);
}
.rv-quad-cell {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; font-size: 10.5px; line-height: 1.35; color: var(--text-muted);
  padding: 8px; border: 0.5px solid var(--border);
}
.rv-quad-cell b { color: var(--navy); font-size: 11px; }
.rv-q-tl { background: rgba(46, 125, 82, 0.05); }
.rv-q-tr { background: rgba(46, 125, 82, 0.10); }
.rv-q-bl { background: rgba(178, 59, 59, 0.10); }
.rv-q-br { background: rgba(199, 125, 27, 0.07); }

.rv-quad-dot {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 42, 94, 0.3); background: var(--navy);
  animation: rv-dot-in var(--duration-reveal) var(--ease-out-expo);
}
@keyframes rv-dot-in { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
.rv-quad-dot.rv-q-push     { background: var(--green); }
.rv-quad-dot.rv-q-push-vol { background: #2f7d9e; }
.rv-quad-dot.rv-q-wrong    { background: var(--amber); }
.rv-quad-dot.rv-q-broken   { background: var(--red); }

.rv-quad-ax {
  position: absolute; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); pointer-events: none;
}
.rv-quad-ax-x { bottom: 5px; left: 50%; transform: translateX(-50%); }
.rv-quad-ax-y { left: 5px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; }

.rv-read { padding: 2px 0; }
.rv-read-t { font-size: 17px; font-weight: 700; color: var(--navy); }
.rv-read-push     .rv-read-t, .rv-read-t.rv-read-push     { color: var(--green); }
.rv-read-broken   .rv-read-t { color: var(--red); }
.rv-read-wrong    .rv-read-t { color: var(--amber); }
.rv-read-push-vol .rv-read-t { color: #2f7d9e; }
.rv-read-d { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 5px; max-width: 62ch; }

.rv-read-split { display: flex; flex-direction: column; gap: 5px; margin-top: 13px; }
.rv-read-split > div {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  padding: 7px 11px; background: var(--off-white); border-radius: 8px;
}
.rv-read-split > div > span { color: var(--text-muted); font-weight: 600; }
.rv-read-split > div > b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.rv-read-split .rv-hint { display: block; background: none; padding: 2px 0; }

.rv-warn {
  margin-top: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  background: rgba(199, 125, 27, 0.10); border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0; color: var(--text);
}

.rv-f3-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; background: var(--warm-white);
  border: 1px solid var(--border); border-radius: 10px;
}
.rv-f3-row .rv-f2-name { flex: 1; min-width: 160px; }
.rv-read-tag {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 8px; border-radius: 6px; background: rgba(90,90,90,0.1); color: var(--text-muted);
}
.rv-read-tag.rv-read-push     { background: rgba(46, 125, 82, 0.14);  color: var(--green); }
.rv-read-tag.rv-read-push-vol { background: rgba(47, 125, 158, 0.14); color: #2f7d9e; }
.rv-read-tag.rv-read-wrong    { background: rgba(199, 125, 27, 0.16); color: var(--amber); }
.rv-read-tag.rv-read-broken   { background: rgba(178, 59, 59, 0.14);  color: var(--red); }

/* --------------------------------------------------------- P4 channels ----- */

.rv-ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }
@media (max-width: 780px) { .rv-ch-grid { grid-template-columns: 1fr; } }

.rv-ch {
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px;
  background: var(--warm-white); position: relative;
}
/* The winner is the answer to the phase's question, so it gets the loud treatment
 * — everything else on the card is supporting evidence. */
.rv-ch-win { background: rgba(46, 125, 82, 0.08); border-color: rgba(46, 125, 82, 0.5); }
.rv-ch-empty { opacity: 0.55; }
.rv-ch-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-ch-name { font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; }
.rv-ch-enr {
  font-family: 'JetBrains Mono', monospace; font-size: 27px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; margin: 9px 0 11px;
}
.rv-ch-enr span {
  display: block; font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-top: 2px;
}
.rv-ch-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; padding: 4px 0; border-top: 1px solid var(--border);
}
.rv-ch-line > span { color: var(--text-muted); font-weight: 600; }
.rv-ch-line > b {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  color: var(--navy); font-size: 12px;
}
.rv-ch-line i { font-style: normal; font-size: 10.5px; font-weight: 600; }

/* ---------------------------------------------------------- P5 verdicts ---- */

.rv-sug { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rv-sug-why { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.rv-read-tag.rv-v-sacrifice { background: rgba(178, 59, 59, 0.14);  color: var(--red); }
.rv-read-tag.rv-v-focus     { background: rgba(47, 125, 158, 0.14); color: #2f7d9e; }
.rv-read-tag.rv-v-push      { background: rgba(46, 125, 82, 0.14);  color: var(--green); }

.rv-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 780px) { .rv-verdicts { grid-template-columns: 1fr; } }

.rv-vb {
  text-align: left; border: 1px solid var(--border); background: var(--warm-white);
  border-radius: 11px; padding: 12px 14px; cursor: pointer; font-family: inherit;
  transition: transform var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.rv-vb:hover { transform: translateY(-1px); background: #fff; }
/* The suggestion gets a dashed outline, never a fill: it has to be visibly NOT a
 * decision yet. A pre-filled solid button reads as already chosen, which is how a
 * verdict nobody made ends up in a report card. */
.rv-vb.rv-sug-on { border-style: dashed; border-color: var(--navy); }
.rv-vb-t { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.rv-vb-d { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.rv-vb.rv-on { border-style: solid; }
.rv-vb-sacrifice.rv-on { background: var(--red);   border-color: var(--red); }
.rv-vb-focus.rv-on     { background: #2f7d9e;      border-color: #2f7d9e; }
.rv-vb-push.rv-on      { background: var(--green); border-color: var(--green); }
.rv-vb.rv-on .rv-vb-t { color: #fff; }
.rv-vb.rv-on .rv-vb-d { color: rgba(255,255,255,0.8); }

.rv-gate {
  margin-top: 13px; padding: 14px 16px; border-radius: 11px;
  background: rgba(199, 125, 27, 0.08); border: 1px solid rgba(199, 125, 27, 0.4);
}
.rv-gate-ok { background: rgba(46, 125, 82, 0.07); border-color: rgba(46, 125, 82, 0.4); }
.rv-gate-h { font-size: 13.5px; font-weight: 700; color: var(--amber); }
.rv-gate-ok .rv-gate-h { color: var(--green); }
.rv-gate-s { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-top: 5px; }
.rv-gate-list { margin: 10px 0 12px; padding-left: 20px; }
.rv-gate-list li { font-size: 12.5px; color: var(--text); line-height: 1.55; margin-bottom: 4px; }
.rv-gate .rv-warn { margin: 0 0 12px; }

/* ------------------------------------------------------ P6/P7 number grid -- */

.rv-n6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 900px) { .rv-n6 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .rv-n6 { grid-template-columns: 1fr !important; } }

.rv-n6-cell {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
  background: var(--warm-white);
}
.rv-n6-cell > span {
  display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}
.rv-n6-cell > b {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 5px;
}
.rv-n6-cell > i {
  display: block; font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 3px;
}

/* Sparkline: 8 completed weeks. The last bar is coloured by direction so the
 * trend reads without a legend. */
.rv-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; min-width: 96px; }
.rv-spark i {
  flex: 1; background: var(--border); border-radius: 2px 2px 0 0; min-width: 4px;
  transition: height var(--duration-normal) var(--ease-out-quint);
}
.rv-spark i.rv-pos { background: var(--green); }
.rv-spark i.rv-neg { background: var(--red); }
.rv-spark i.rv-flat { background: var(--navy); }

/* The arithmetic, stated. A pace number with a hidden denominator is how a review
 * turns into an argument nobody can settle. */
.rv-math {
  margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
  padding: 8px 11px; background: var(--off-white); border-radius: 8px;
  border-left: 2px solid var(--border);
}

/* ------------------------------------------------------ one-screen layout --- */
/* No phases, no rail, no reveal. Every number is visible and one click marks a
 * division. The whole review has to be finishable in five minutes or it does not get
 * done at all — which was the verdict on the phased version. */

.rv-sec {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 3px var(--shadow);
}
.rv-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rv-sec-count {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.rv-d {
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px;
  margin-top: 11px; background: var(--warm-white);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.rv-d.rv-mark-good { background: rgba(46, 125, 82, 0.08);  border-color: rgba(46, 125, 82, 0.45); }
.rv-d.rv-mark-bad  { background: rgba(178, 59, 59, 0.08);  border-color: rgba(178, 59, 59, 0.45); }
.rv-d.rv-mark-eh   { background: rgba(199, 125, 27, 0.09); border-color: rgba(199, 125, 27, 0.45); }

.rv-d-main { display: grid; grid-template-columns: minmax(150px,1.1fr) minmax(280px,2fr) auto auto; gap: 14px; align-items: center; }
@media (max-width: 1080px) { .rv-d-main { grid-template-columns: 1fr; gap: 10px; } }

.rv-d-name {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; color: var(--navy); text-align: left;
}
.rv-d-car { color: var(--text-muted); font-size: 12px; }
.rv-d-sub { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }

.rv-d-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rv-d-n { display: flex; flex-direction: column; }
.rv-d-n > span {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
}
.rv-d-n > b {
  font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.rv-d-n > b.rv-d-py { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.rv-d-n > i {
  font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  font-weight: 700; font-variant-numeric: tabular-nums; min-height: 13px;
}
.rv-d-marks { margin: 0; }
.rv-d-marks .rv-m { flex: 0 0 auto; padding: 7px 12px; }
.rv-d-warn { margin-top: 10px; }
.rv-d-note { margin-top: 9px; }
.rv-d-note textarea { min-height: 34px; }

.rv-d-open { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.rv-d-progs { display: flex; flex-direction: column; gap: 5px; }
.rv-p {
  display: grid; grid-template-columns: minmax(140px,2fr) auto auto auto auto;
  gap: 10px; align-items: center; padding: 7px 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px;
}
@media (max-width: 720px) { .rv-p { grid-template-columns: 1fr auto; } }
.rv-p.rv-mark-good { background: rgba(46, 125, 82, 0.09); border-color: rgba(46, 125, 82, 0.4); }
.rv-p.rv-mark-bad  { background: rgba(178, 59, 59, 0.09); border-color: rgba(178, 59, 59, 0.4); }
.rv-p-name { font-weight: 600; color: var(--navy); line-height: 1.3; }
.rv-p-num {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
}
.rv-p-num b { color: var(--navy); }
.rv-p-num i { font-style: normal; font-weight: 700; }
.rv-p-marks { display: flex; gap: 4px; }
.rv-p-marks .rv-m { flex: 0 0 auto; padding: 4px 9px; font-size: 12px; }

/* ---------------------------------------------------------- call timeline --- */
/* Two stacked panels on ONE x-scale. Never a second y-axis: leads run ~10x
 * enrollments and aligning two scales on one plot invents a correlation. Marks are
 * thin, the grid is recessive, and only the peak / trough / selected week carry a
 * number — a value on every point is noise. */

.rv-tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rv-tl-legend { display: flex; gap: 13px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.rv-tl-legend span { display: flex; align-items: center; gap: 5px; }
.rv-tl-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.rv-tl-k1 { background: var(--navy); }
.rv-tl-k2 { background: repeating-linear-gradient(90deg, #9a9a9a 0 4px, transparent 4px 7px); height: 2px !important; }
.rv-tl-k3 { background: var(--navy); width: 9px !important; height: 9px !important; border-radius: 50% !important; }
.rv-tl-k4 { background: var(--red);  width: 9px !important; height: 9px !important; border-radius: 50% !important; }

.rv-tl-svg { width: 100%; height: auto; display: block; margin-top: 14px; overflow: visible; }
.rv-tl-grid { stroke: var(--border); stroke-width: 1; }
.rv-tl-ax   { fill: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.rv-tl-panel{ fill: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.09em; }
/* 2px lines per the mark spec. */
.rv-tl-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rv-tl-line2{ stroke: var(--navy); opacity: 0.75; }
/* Prior year is a REFERENCE, not a second series identity: neutral + dashed. */
.rv-tl-py   { fill: none; stroke: #9a9a9a; stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.85; }
.rv-tl-pt   { fill: var(--navy); stroke: var(--warm-white); stroke-width: 2; }
.rv-tl-pt-on{ fill: var(--navy); stroke: #fff; stroke-width: 2.5; }
.rv-tl-val  { fill: var(--text); font-size: 10.5px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

.rv-tl-rail { stroke: var(--border); stroke-width: 2; }
/* "You are here." Behind the marks, not on top of them. */
.rv-tl-now { fill: rgba(13, 42, 94, 0.05); }
/* ≥8px hit-friendly markers with a 2px surface ring so overlaps stay readable. */
.rv-tl-call { fill: var(--navy); stroke: var(--off-white); stroke-width: 2; cursor: pointer; }
.rv-tl-call-x { fill: var(--red); }
.rv-tl-call-on { stroke: #fff; stroke-width: 3; }
.rv-tl-call:hover { stroke: var(--navy); }
/* Hit target far bigger than the mark: the whole week column. */
.rv-tl-hit { fill: transparent; cursor: pointer; }
.rv-tl-hit:hover { fill: rgba(13, 42, 94, 0.045); }

/* Hover card. Small on purpose: it has to be readable in a glance, so it carries four
 * numbers and at most three one-line items. It replaced an always-open 700px panel under
 * the chart — "you are just trying to put as much information as possible in a section". */
.rv-tl-wrap { position: relative; }
.rv-tip {
  position: absolute; z-index: 30; width: 300px; max-width: 78vw;
  background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 13px; box-shadow: 0 8px 26px rgba(13, 42, 94, 0.16);
  pointer-events: none;
}
.rv-tip[hidden] { display: none; }
.rv-tip-h { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.rv-tip-nums { display: flex; gap: 12px; margin-top: 8px; }
.rv-tip-nums > span { display: flex; flex-direction: column; min-width: 0; }
.rv-tip-nums i {
  font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.rv-tip-nums b {
  font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.25;
}
.rv-tip-nums u {
  text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  font-weight: 700; font-variant-numeric: tabular-nums; min-height: 12px;
}
.rv-tip-call {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.rv-tip-none { border-top: 1px solid var(--border); }
.rv-tip-i {
  font-size: 11.5px; line-height: 1.45; color: var(--text);
  padding: 6px 0 6px 8px; border-left: 2px solid var(--border); margin-top: 6px;
}
.rv-tip-i b { color: var(--navy); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.rv-tip-more { font-size: 10.5px; color: var(--text-muted); margin-top: 7px; }
.rv-tip-rep { color: var(--red); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }

/* What the resolver concluded. A compact strip, not a section — it exists so 343
 * automatic resolutions are not invisible, and the counts are the finding. */
.rv-res { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rv-res-i {
  flex: 1 1 140px; display: flex; flex-direction: column;
  background: var(--off-white); border-radius: 9px; padding: 9px 11px;
  font-size: 11.5px; color: var(--text-muted);
}
.rv-res-i b {
  font-family: 'JetBrains Mono', monospace; font-size: 18px; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.rv-res-i i { font-style: normal; font-size: 10px; margin-top: 2px; opacity: 0.85; }
.rv-res-rep { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.rv-res-rep-i {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text);
  background: rgba(178, 59, 59, 0.06); border-left: 2px solid var(--red);
  border-radius: 0 7px 7px 0; padding: 7px 10px;
}
.rv-res-rep-i b { color: var(--navy); font-weight: 600; }

/* ------------------------------------------- commitment ledger + excuses --- */

.rv-ledger { border-left: 3px solid var(--navy); }
.rv-led-call {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 13px 0 8px;
}
.rv-led {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--warm-white); margin-bottom: 8px;
}
/* The quote is the point — it is what he reads back in the meeting — so it gets the
 * size and the serif-ish weight, and the metadata sits under it. */
.rv-led-q { font-size: 14px; line-height: 1.5; color: var(--text); }
.rv-led-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.rv-led-meta b { color: var(--navy); }
.rv-led-btns { display: flex; gap: 6px; margin-top: 10px; }
.rv-led-btns .rv-m { flex: 0 1 auto; padding: 7px 12px; }
.rv-led-old { margin-top: 12px; }
.rv-led-old summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--navy);
  padding: 7px 0;
}

/* What the agency said. Deliberately quiet and BELOW his own numbers: it is context
 * for a judgment he has already made, not the headline. */
.rv-agency {
  margin-top: 12px; padding: 11px 13px; border-radius: 9px;
  background: var(--off-white); border-left: 2px solid var(--navy);
}
.rv-agency-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 7px;
}
.rv-agency-i + .rv-agency-i { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.rv-agency-q { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.rv-agency-x { border-left: 2px solid var(--amber); padding-left: 9px; margin-left: -11px; }

/* ------------------------------------------------------- track record bar -- */

.rv-track {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 17px; box-shadow: 0 1px 3px var(--shadow);
}
.rv-track-h { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.rv-track-s { font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; }
.rv-track-rows { display: flex; flex-direction: column; gap: 7px; }
.rv-track-row {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  padding: 8px 10px; background: var(--off-white); border-radius: 8px;
}
.rv-track-row .rv-tr-name { font-weight: 600; color: var(--navy); flex: 1; }
.rv-track-row .rv-tr-num {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--text-muted);
}

/* ------------------------------------------------------------ P1 side rail -- */

.rv-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .rv-split { grid-template-columns: 1fr; } }

.rv-side {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 16px; box-shadow: 0 1px 3px var(--shadow);
}
.rv-side-h { font-size: 13px; font-weight: 700; color: var(--navy); }
.rv-side-s { font-size: 11.5px; color: var(--text-muted); margin: 3px 0 12px; line-height: 1.45; }
.rv-side-row {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.rv-side-row:last-child { border-bottom: none; }
.rv-side-row .rv-sr-name { flex: 1; color: var(--navy); font-weight: 600; line-height: 1.35; }
.rv-side-row .rv-sr-sub { display: block; font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.rv-side-row .rv-sr-v {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--green);
  font-variant-numeric: tabular-nums; font-size: 13px;
}

/* ------------------------------------------- shared number states (report card) --

   `Peores y mejores` — the ranked worst/best-10 lists with their own mark dots — lived
   here and was removed 2026-08-14 on his call. Marking happens in the BY PROGRAM table;
   a second marking surface meant two places competing to be the one he trusts, and a
   report card that asks you to re-classify a row it only shows because you classified it.
   What survives is the two number states the card still uses. */

.rv-neg { color: var(--red); font-weight: 600; }
.rv-dim { color: var(--text-muted); font-weight: 400; }

/* ================================================= the mark-driven report card === */

/* Shape is DERIVED, never configured: a division block exists because something in it is
 * marked, a metric block exists because that metric carries a mark, and inside the block
 * the same numbers are cut three ways — canal · programa · recinto — each ranked worst
 * first. Modelled on the Power BI panel he already reads, which is also why the bar is a
 * BULLET against PY(YTD) rather than a decorative sparkline: the question it answers is
 * "how close are we to last year", and a bullet answers it without being read. */

.rv-card { padding: 0; overflow: hidden; }
.rv-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 14px 18px; background: var(--navy); color: #fff;
}
.rv-card-t { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.rv-card-s { font-size: 11.5px; color: rgba(255, 255, 255, 0.72); font-family: 'JetBrains Mono', monospace; }
.rv-card-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------ the division carousel -- */

/* One preview card per division, ONE open underneath. The stacked version put every division
 * at full height on one page, so reading the second one meant scrolling past all of the first.
 * A preview has to carry enough to CHOOSE with — the headline, the pace against PY(YTD), the
 * three paid channels, and what he flagged — or it is just a tab with extra padding. */

.rv-dcw { display: flex; flex-direction: column; gap: 12px; }
.rv-dc-nav { display: flex; gap: 6px; }
.rv-dc-nav button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  border: 1px solid var(--border); background: #fff; color: var(--navy); font-family: inherit;
}
.rv-dc-nav button:hover { background: var(--off-white); }

.rv-dcs {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin;
}
.rv-dcs::-webkit-scrollbar { height: 6px; }
.rv-dcs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* `align-items: stretch` is EXPLICIT because the card is a <button>, and a button as a flex
 * container does not hand its children the cross-axis stretch a <div> would. Measured: every
 * child shrank to its content, so `.rv-dc-mi`'s grid came out 92px — exactly its two fixed
 * columns plus the gaps, with the 1fr bar track resolving to ZERO. The bar rendered, was
 * reported as painted, and was 0px wide. Same family as the icon-collapse traps elsewhere in
 * this app: the box exists, the measurement is the only thing that tells you it is empty. */
.rv-dc {
  flex: 0 0 232px; scroll-snap-align: start; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 14px; font-family: inherit; color: inherit;
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.rv-dc:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); }
/* The open card is the navy one. It has to win against ten neighbours at a glance, and colour
 * inversion does that where a border weight does not. */
.rv-dc.is-open { background: var(--navy); border-color: var(--navy); }
.rv-dc.is-quiet { opacity: 0.72; }
.rv-dc.is-quiet:hover { opacity: 1; }

.rv-dc-h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.rv-dc-t { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.rv-dc-n {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #fff;
  background: var(--red); border-radius: 20px; padding: 1px 7px; flex: none;
}
.rv-dc-v {
  display: flex; width: 100%; align-items: baseline; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 23px; font-weight: 700; color: var(--navy); line-height: 1.1;
}
.rv-dc-v i { font-style: normal; font-size: 11.5px; font-weight: 700; }
.rv-dc-l { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* Same bullet as the rows below, at card scale: the tick is PY(YTD), the fill is the actual. */
.rv-dc-bar, .rv-dc-mi { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 7px; }
.rv-dc-mi { grid-template-columns: 46px minmax(0, 1fr) 32px; }
.rv-dc-bar u, .rv-dc-mi u {
  position: relative; height: 7px; border-radius: 4px; background: rgba(13, 42, 94, 0.09);
  text-decoration: none; display: block;
}
.rv-dc-mi u { height: 5px; }
/* GEOMETRY ONLY. Colour lives on `.rv-dc-fill.rv-q-*` below, which is two classes and so beats
 * this selector's (0,1,2). Setting a background here as well silently won the cascade and every
 * mini bar painted grey on grey — a bar that renders but says nothing. */
.rv-dc-bar u em, .rv-dc-mi u em {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--text-muted);
}
.rv-dc-fill.rv-q-over  { background: var(--green); }
.rv-dc-fill.rv-q-near  { background: var(--amber); }
.rv-dc-fill.rv-q-under { background: var(--red); }
/* NEUTRAL — inversión. Spending more than last year is a fact, not a verdict; painting it green
   or red invents an opinion the workbook never expressed. Navy at low opacity is the page's
   "measured, not judged" ink. */
.rv-dc-fill.rv-q-flat  { background: rgba(13, 42, 94, 0.55); }
.rv-dc-bar u::after, .rv-dc-mi u::after {
  content: ''; position: absolute; left: 68%; top: -2px; bottom: -2px; width: 2px;
  border-radius: 1px; background: var(--navy); opacity: 0.45;
}
.rv-dc-bar b, .rv-dc-mi b {
  text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 700;
}
.rv-dc-mi i {
  font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-dc-ch { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 2px; }

.rv-dc-chips { display: flex; width: 100%; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rv-dc-chips em {
  font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--navy);
  background: var(--off-white); border-radius: 5px; padding: 2px 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-dc-chips .rv-dc-none, .rv-dc-chips .rv-dc-more { color: var(--text-muted); background: transparent; padding: 2px 0; }

/* Inverted state. Every token that was navy-on-white flips, or the open card reads as a
 * disabled one — light text on a light chip is the usual way this goes wrong. */
.rv-dc.is-open .rv-dc-t,
.rv-dc.is-open .rv-dc-v { color: #fff; }
.rv-dc.is-open .rv-dc-l,
.rv-dc.is-open .rv-dc-mi i { color: rgba(255, 255, 255, 0.66); }
.rv-dc.is-open .rv-dc-bar u,
.rv-dc.is-open .rv-dc-mi u { background: rgba(255, 255, 255, 0.16); }
.rv-dc.is-open .rv-dc-bar u::after,
.rv-dc.is-open .rv-dc-mi u::after { background: #fff; opacity: 0.75; }
.rv-dc.is-open .rv-dc-chips em { color: #fff; background: rgba(255, 255, 255, 0.14); }
.rv-dc.is-open .rv-dc-n { background: #fff; color: var(--navy); }
.rv-dc.is-open .rv-pos { color: #7fd4a4; }
.rv-dc.is-open .rv-neg { color: #f09b9b; }
.rv-dc.is-open .rv-dim { color: rgba(255, 255, 255, 0.6); }
/* On navy the three pace colours have to be lifted or they read as mud. Same hues, raised
 * lightness — the semantic reading (green ahead / amber close / red behind) is unchanged. */
.rv-dc.is-open b.rv-q-over  { color: #7fd4a4; }
.rv-dc.is-open b.rv-q-near  { color: #f0c479; }
.rv-dc.is-open b.rv-q-under { color: #f09b9b; }
.rv-dc.is-open .rv-dc-fill.rv-q-over  { background: #7fd4a4; }
.rv-dc.is-open .rv-dc-fill.rv-q-near  { background: #f0c479; }
.rv-dc.is-open .rv-dc-fill.rv-q-under { background: #f09b9b; }

/* ----------------------------------------------------- the metric cards --------- */

/* One card per metric inside the open division, ONE detail open under them. The division
 * carousel's rule, one level down: before this, every marked metric drew its full
 * canal · programa · recinto block, stacked, so reaching Total Enroll meant scrolling past
 * four other metrics — "tengo que estar infinitely scrolling to find what i want".
 *
 * A GRID, not a scroll strip like the divisions: there are exactly five metrics, so all of
 * them fit and nothing is hidden behind a chevron. auto-fill means it is five across at
 * Dashboard width and folds to two and one without a breakpoint to keep in step. */
.rv-mcs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 10px;
}

/* `align-items: stretch` is EXPLICIT for the same reason it is on `.rv-dc`: this is a
 * <button>, and a button as a flex container hands its children no cross-axis stretch, so
 * every `minmax(0,1fr)` bar track resolves to ZERO and the bars render 0px wide. */
.rv-mc {
  text-align: left; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 12px 12px; font-family: inherit; color: inherit;
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.rv-mc:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); }
.rv-mc.is-quiet { opacity: 0.7; }
.rv-mc.is-quiet:hover { opacity: 1; }

.rv-mc-h { display: flex; width: 100%; align-items: center; gap: 7px; }
.rv-mc-t {
  flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--navy); line-height: 1.25;
}
/* Which workbook this card is about — the Marketing Dashboard ships a UGD and a GRD file for
   the same week, and a block-scoped By Program division is one campus column of a bigger one.
   Without it two cards can carry the same title and different numbers. */
.rv-mc-c {
  display: inline-block; margin-left: 5px; font-style: normal; text-transform: none;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--navy); background: var(--off-white);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; vertical-align: 1px;
}
/* Closed by default, so the card needs to SAY it opens. A chevron that turns is the whole
   affordance — cursor and hover-lift alone read as "this is a tile", not "this expands". */
.rv-mc-ch {
  flex: none; width: 7px; height: 7px; margin-left: 1px; border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--duration-fast), border-color var(--duration-fast);
}
.rv-mc:hover .rv-mc-ch { border-color: var(--navy); }
.rv-mc.is-open .rv-mc-ch {
  border-color: #fff; transform: rotate(225deg) translate(-1px, -1px);
}
.rv-mc-n {
  flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: #fff; background: var(--navy); border-radius: 20px; padding: 1px 7px;
}
.rv-mc-v {
  display: flex; width: 100%; align-items: baseline; gap: 7px; margin-top: 1px;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.1;
}
.rv-mc-v i { font-style: normal; font-size: 11.5px; font-weight: 700; }
.rv-mc-l {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Same bullet as everything else on this page: the tick is PY(YTD) at 68% of the track and
 * the fill is the actual as a share of it. GEOMETRY ONLY here — colour lives on
 * `.rv-dc-fill.rv-q-*` (two classes), which is the one definition of the three pace hues. */
.rv-mc-bar { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 7px; }
.rv-mc-tk {
  position: relative; display: block; height: 7px; border-radius: 4px;
  background: rgba(13, 42, 94, 0.09);
}
.rv-mc-tk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--text-muted); }
.rv-mc-tk::after {
  content: ''; position: absolute; left: 68%; top: -2px; bottom: -2px; width: 2px;
  border-radius: 1px; background: var(--navy); opacity: 0.45;
}
.rv-mc-bar b {
  text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 700;
}
/* The three pace hues have no bare class on this page — every surface restates them at its
 * own specificity, on purpose, so a colour can never be inherited from an unrelated rule.
 * `.rv-mc-bar b` and `.rv-mc-rp` both set a colour, so both have to. */
.rv-mc-bar b.rv-q-over,  .rv-mc-rp.rv-q-over  { color: var(--green); }
.rv-mc-bar b.rv-q-near,  .rv-mc-rp.rv-q-near  { color: var(--amber); }
.rv-mc-bar b.rv-q-under, .rv-mc-rp.rv-q-under { color: var(--red); }
.rv-mc-bar b.rv-q-flat,  .rv-mc-rp.rv-q-flat  { color: var(--navy); }
.rv-mc-bar b.rv-dim,     .rv-mc-rp.rv-dim     { color: var(--text-muted); }

/* The peek. Two rows, and they carry the NUMBER — a card that only names what is inside it
 * is a tab with extra padding, which is the thing being replaced. */
.rv-mc-pkl {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-top: 4px;
}
.rv-mc-none { text-transform: none; letter-spacing: 0.02em; font-weight: 600; }
.rv-mc-pk { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
/* Name · figure · pace, and NO bar: a 30px fill inside a 246px card cannot show a share of
 * anything, and the card's own bar already carries the shape. */
.rv-mc-r {
  display: grid; width: 100%; align-items: baseline; gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  font-style: normal;
}
.rv-mc-rn {
  min-width: 0; font-size: 10.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-mc-rv, .rv-mc-rp {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 10px; font-weight: 700; color: var(--navy); text-align: right;
}
/* A peek row's NAME carries his mark, never a stripe — the same device the report-card rows
 * settled on after the 3px rail read as a template. */
.rv-mc-pk-bad  .rv-mc-rn { color: var(--red); }
.rv-mc-pk-good .rv-mc-rn { color: var(--green); }
.rv-mc-pk-eh   .rv-mc-rn { color: var(--text-muted); }
/* Marked one way in By Program and the other way in the Marketing Dashboard. It rides on the
   CLOSED card so the disagreement is not something he only finds after opening the right one.
   Amber against the name's own mark colour, because the row is already painted by the worst
   of the two and a matching hue would read as more of the same verdict. */
.rv-mc-ne {
  font-style: normal; font-weight: 800; color: var(--amber);
  margin-left: 4px; font-size: 11px;
}
.rv-mc.is-open .rv-mc-ne { color: #f0c46a; }

.rv-mc-miss {
  font-size: 10.5px; line-height: 1.45; color: var(--text-muted); margin-top: 4px;
}

/* His mark on the card: a FAINT fill, a hairline in the hue, and the title + badge in it.
 * Measured on his own week (171 marks, 2026-08-10) all five metrics carry a malo, so the
 * 0.07 fill this started at washed the whole strip pink and stopped discriminating anything —
 * the tint has to be quiet enough that ONE green metric among five reds still jumps. Never a
 * stripe: the 3px rail is the thing the report-card rows removed on his call. */
.rv-mc.rv-mc-bad  { background: rgba(178, 59, 59, 0.035);  border-color: rgba(178, 59, 59, 0.34); }
.rv-mc.rv-mc-good { background: rgba(46, 125, 82, 0.035);  border-color: rgba(46, 125, 82, 0.34); }
.rv-mc.rv-mc-eh   { background: rgba(120, 120, 120, 0.04); border-color: rgba(120, 120, 120, 0.3); }
/* The metric NAME stays navy. He did not mark "Total Enroll" — he marked Paid Social inside
 * it, so painting the section title red states a verdict he never gave, and with every metric
 * carrying a malo it turned five card titles red and left nothing looking like a label. The
 * hue lives on the badge (a count of HIS marks) and on the peek rows (the things he marked). */
.rv-mc.rv-mc-bad  .rv-mc-n { background: var(--red); }
.rv-mc.rv-mc-good .rv-mc-n { background: var(--green); }
.rv-mc.rv-mc-eh   .rv-mc-n { background: var(--text-muted); }

/* The open card is the navy one — the same inversion the open division uses, because colour
 * wins against four neighbours where a border weight does not. It is declared AFTER the mark
 * tints on purpose: both selectors are (0,2,0), so source order is what lets the open state
 * beat a red fill. The mark survives the inversion in the TITLE and the badge, lifted to the
 * hues that stay legible on navy. */
.rv-mc.is-open { background: var(--navy); border-color: var(--navy); box-shadow: 0 6px 18px var(--shadow); }
.rv-mc.is-open .rv-mc-t,
.rv-mc.is-open .rv-mc-v,
.rv-mc.is-open .rv-mc-rv,
.rv-mc.is-open .rv-mc-rn { color: #fff; }
.rv-mc.is-open .rv-mc-l,
.rv-mc.is-open .rv-mc-pkl,
.rv-mc.is-open .rv-mc-miss { color: rgba(255, 255, 255, 0.66); }
.rv-mc.is-open .rv-mc-n { background: #fff; color: var(--navy); }
.rv-mc.is-open .rv-mc-tk { background: rgba(255, 255, 255, 0.16); }
.rv-mc.is-open .rv-mc-tk::after { background: #fff; opacity: 0.72; }
.rv-mc.is-open .rv-pos { color: #7fd4a4; }
.rv-mc.is-open .rv-neg { color: #f09b9b; }
.rv-mc.is-open .rv-dim { color: rgba(255, 255, 255, 0.6); }
.rv-mc.is-open .rv-q-over  { color: #7fd4a4; }
.rv-mc.is-open .rv-q-near  { color: #f0c479; }
.rv-mc.is-open .rv-q-under { color: #f09b9b; }
.rv-mc.is-open .rv-dc-fill.rv-q-over  { background: #7fd4a4; }
.rv-mc.is-open .rv-dc-fill.rv-q-near  { background: #f0c479; }
.rv-mc.is-open .rv-dc-fill.rv-q-under { background: #f09b9b; }
.rv-mc.is-open .rv-mc-pk-bad  .rv-mc-rn { color: #f09b9b; }
.rv-mc.is-open .rv-mc-pk-good .rv-mc-rn { color: #7fd4a4; }
.rv-mc.is-open .rv-mc-pk-eh   .rv-mc-rn { color: rgba(255, 255, 255, 0.62); }

/* On a phone the five previews stack, and at full height that is ~1,700px of cards before the
 * detail — the scroll this change exists to remove, moved. So below 620px they become a
 * two-column chooser and drop the peek: the headline, the delta and the pace bar are what the
 * choice is made on, and the rows they preview are one tap away in the panel. */
@media (max-width: 620px) {
  .rv-mcs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rv-mc { padding: 9px 10px 10px; gap: 4px; }
  .rv-mc-v { font-size: 18px; }
  /* Wrap instead of ellipsing: the half that gets cut at 174px is the PY(YTD) figure, which is
     the whole point of the line — the unit word is already in the title above it. */
  .rv-mc-l { white-space: normal; }
  .rv-mc-pkl, .rv-mc-pk { display: none; }
}

/* ------------------------------------------------------------- a metric block -- */

.rv-q { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }

.rv-q-hd {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr minmax(140px, 210px);
  align-items: center; gap: 16px;
  padding: 10px 14px; background: var(--off-white); border-bottom: 1px solid var(--border);
}
.rv-q-t {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rv-q-scope {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: none; color: var(--navy);
  background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.rv-q-tot { display: flex; gap: 18px; flex-wrap: wrap; }
.rv-q-tot span { display: flex; flex-direction: column; gap: 1px; }
.rv-q-tot i {
  font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.rv-q-tot b {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; color: var(--navy);
}
/* `.rv-q-tot b` is (0,1,1) and `.rv-neg` is (0,1,0), so the plain semantic class loses and
 * a negative Dif printed navy. Re-state it at the same specificity rather than reaching
 * for !important. */
.rv-q-tot b.rv-neg { color: var(--red); }
.rv-q-tot b.rv-pos { color: var(--green); }
.rv-q-tot b.rv-dim { color: var(--text-muted); font-weight: 600; }

.rv-q-hdbar { display: flex; flex-direction: column; gap: 3px; }
.rv-q-hd .rv-q-m { margin: 0; }
/* The one legend on the block, so no row has to spend a line explaining its own bar. */
.rv-q-lg {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.02em;
}
.rv-q-lg u {
  position: static; display: inline-block; width: 2px; height: 10px; border-radius: 1px;
  background: var(--navy); opacity: 0.5;
}

/* -------------------------------------------------- semana a semana (the trend) --
 *
 * The weekly series that lives inside the SAME workbook the card already read — see the
 * module header in review.js. It sits between the header and the three columns because
 * that is the reading order: how much (header) → which way it has been going (chart) →
 * who moved it (columns).
 *
 * Colour is entirely in CSS so the three views share ONE definition of "actual", "año
 * pasado" and "proyección" — a chart that painted its own hex would drift from the pace
 * bars beside it the first time a token changed. */

.rv-tr { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); background: #fff; }
.rv-tr-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.rv-tr-h > b {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--navy);
}
.rv-tr-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Geometry only. `dropdown.css` owns the chevron, the radius and the dark card menu for
   every <select> in the app, and restating those here would fight it at equal weight. */
.rv-tr-sel {
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--navy);
  background: var(--off-white); border: 1px solid var(--border);
  padding: 5px 9px; max-width: 190px; min-width: 0;
}
.rv-tr-wrap { position: relative; }
.rv-tr-svg { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }

.rv-tr-grid { stroke: var(--border); stroke-width: 1; }
/* The zero / 100% line is a REFERENCE, not a gridline — a diff bar crossing an
   indistinguishable line reads as noise instead of as the year turning over. */
.rv-tr-ref  { stroke: var(--navy); stroke-width: 1.5; opacity: 0.45; }
.rv-tr-ax   { fill: var(--text-muted); font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.rv-tr-axref{ fill: var(--navy); opacity: 0.75; }

.rv-tr-a { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rv-tr-p { fill: none; stroke: #9a9a9a; stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.9; }
.rv-tr-j { fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-dasharray: 2 4; opacity: 0.85; }
.rv-tr-fill { fill: rgba(13, 42, 94, 0.11); stroke: none; }
.rv-tr-pt { fill: var(--navy); stroke: #fff; stroke-width: 1.4; }
.rv-tr-bar { fill: var(--navy); }
.rv-tr-pytick { stroke: #6f6f6f; stroke-width: 2; stroke-linecap: round; }

/* A diff bar's hue is the NEWS, not the sign: on a CPL card up is the bad direction, and
   on inversión neither direction is a verdict. `trendDeltaCls` decides; this only paints. */
.rv-tr-bar.rv-tr-pos  { fill: var(--green); }
.rv-tr-bar.rv-tr-neg  { fill: var(--red); }
.rv-tr-bar.rv-tr-flat { fill: var(--navy); opacity: 0.72; }
/* The pace dots reuse the three pace hues, restated at this surface's own specificity —
   the same discipline `.rv-mc-bar b` follows, so a colour is never inherited from an
   unrelated rule. */
.rv-tr-pt.rv-q-over  { fill: var(--green); }
.rv-tr-pt.rv-q-near  { fill: var(--amber); }
.rv-tr-pt.rv-q-under { fill: var(--red); }
.rv-tr-pt.rv-q-flat  { fill: var(--navy); }

.rv-tr-hit { fill: transparent; cursor: crosshair; }
.rv-tr-hit:hover { fill: rgba(13, 42, 94, 0.05); }

.rv-tr-lg {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 7px;
  font-size: 10.5px; color: var(--text-muted);
}
.rv-tr-lg span { display: flex; align-items: center; gap: 5px; }
.rv-tr-lg i { width: 13px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.rv-tr-k1 { background: var(--navy); }
.rv-tr-k2 { background: repeating-linear-gradient(90deg, #9a9a9a 0 4px, transparent 4px 7px); height: 2px; }
.rv-tr-k3 { background: repeating-linear-gradient(90deg, var(--amber) 0 2px, transparent 2px 6px); height: 2px; }
.rv-tr-k5 { background: var(--navy); opacity: 0.45; height: 2px; }
.rv-tr-acc {
  margin-left: auto; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--navy); font-weight: 700;
}
/* The sum of the weeks legitimately differs from the figure at the top of the card on the
   enrollment metrics — see the note in `trendHtml`. Amber, because it is a definition to
   read, not a verdict; the caption underneath names the reason. */
.rv-tr-acc-gap { color: var(--amber); cursor: help; }
/* The caption is load-bearing, not decoration: it names the window, the row and the file
   the numbers came out of. A chart that silently re-scoped would be quotable and wrong. */
.rv-tr-cap {
  margin-top: 5px; font-size: 10px; line-height: 1.45; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.rv-tr-cap b { color: var(--amber); font-weight: 700; }
.rv-tr-none { font-size: 11px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.rv-tr-off { background: var(--off-white); }

/* The hover card. It borrows `.rv-tip`'s box wholesale — one tooltip shape on the page. */
.rv-tr-tip { min-width: 210px; }
.rv-tr-tipr {
  margin-top: 3px; font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rv-tr-tipr i { font-style: normal; font-weight: 700; }
.rv-tr-tipj {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-muted);
}
.rv-tr-tipj b { font-family: 'JetBrains Mono', monospace; color: var(--navy); }
.rv-tr-tipj b.rv-pos { color: var(--green); }
.rv-tr-tipj b.rv-neg { color: var(--red); }

/* ---- the sparkline on a CLOSED card ----
 * Drawn at ~1/5 the chart's scale, so every stroke is restated: a 2.2px stroke inside a
 * 1000-wide viewBox rendered into a 210px card lands at 0.46px, which anti-aliases to a
 * grey smudge. This is the same class of trap as the peek row's 30px bar — if it renders
 * and says nothing it should not render. */
.rv-mc-sp { position: relative; display: block; width: 100%; margin-top: 2px; }
/* A chip, not bare text: the line reaches the top-right corner on any card that is having a
   good week, and "12 sem" sitting on top of it read as a broken label. */
.rv-mc-sp em {
  position: absolute; right: 0; top: 0; font-style: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.02em;
  background: #fff; padding: 0 3px; border-radius: 3px; line-height: 1.5;
}
.rv-tr-svg.rv-tr-mini { margin-top: 0; }
.rv-tr-mini .rv-tr-a { stroke-width: 9; }
.rv-tr-mini .rv-tr-p { stroke-width: 7; stroke-dasharray: 18 14; }
.rv-tr-mini .rv-tr-pt { stroke-width: 5; }
.rv-tr-mini .rv-tr-pytick { stroke-width: 7; }
.rv-tr-mini .rv-tr-ref { stroke-width: 5; }

/* On the OPEN (navy) card the whole preview is inverted, so the sparkline has to be too —
 * a navy line on a navy card is a line that is not there. */
.rv-mc.is-open .rv-tr-mini .rv-tr-a { stroke: #fff; }
.rv-mc.is-open .rv-tr-mini .rv-tr-bar { fill: rgba(255, 255, 255, 0.85); }
.rv-mc.is-open .rv-tr-mini .rv-tr-fill { fill: rgba(255, 255, 255, 0.18); }
.rv-mc.is-open .rv-tr-mini .rv-tr-p { stroke: rgba(255, 255, 255, 0.55); }
.rv-mc.is-open .rv-tr-mini .rv-tr-pt { fill: #fff; stroke: var(--navy); }
.rv-mc.is-open .rv-tr-mini .rv-tr-pytick { stroke: rgba(255, 255, 255, 0.55); }
.rv-mc.is-open .rv-tr-mini .rv-tr-ref { stroke: rgba(255, 255, 255, 0.5); }
.rv-mc.is-open .rv-tr-mini .rv-tr-bar.rv-tr-flat { fill: rgba(255, 255, 255, 0.8); }
.rv-mc.is-open .rv-mc-sp em { color: rgba(255, 255, 255, 0.7); background: var(--navy); }

/* ------------------------------------------------------- the three columns ----- */

/* auto-fit, not a fixed 3: at Dashboard width it is three across, and on a laptop it
 * folds to two and then one WITHOUT a breakpoint that has to be kept in step with the
 * sidebar. The columns are ordered canal → programa → recinto in the DOM, so a single
 * column stack still reads in the order he asked for. */
/* The 1px gap over a border-coloured grid draws the separators, instead of a border-right
 * on each column. That is what makes a WRAPPED third column still get a rule above it —
 * with border-right, folding to two columns left the recinto block floating with no line
 * between it and the pair above. */
.rv-q-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1px; background: var(--border);
}
.rv-q-c { min-width: 0; padding: 10px 12px 12px; background: #fff; }
.rv-q-ch {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--navy);
}
.rv-q-ch i {
  font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  font-weight: 700; color: var(--text-muted); background: var(--off-white);
  border-radius: 5px; padding: 1px 5px;
}
/* Every column PRINTS its basis. Canal and recinto are cut over the marked set, so their
 * scope changes as he marks — a table that silently re-scoped would be quotable and
 * wrong. min-height keeps the three column heads aligned when one note wraps. */
.rv-q-cn {
  font-size: 10.5px; color: var(--text-muted); line-height: 1.4;
  margin: 3px 0 9px; min-height: 29px;
}
.rv-q-empty { font-size: 11.5px; color: var(--text-muted); padding: 8px 0 12px; }

/* -------------------------------------------------------------------- a row ---- */

.rv-q-r { padding: 7px 6px; border-radius: 7px; border-bottom: 1px solid var(--border); }
.rv-q-r:last-child { border-bottom: none; }
.rv-q-r:hover { background: var(--off-white); }

.rv-q-h { display: flex; align-items: baseline; gap: 6px; }
.rv-q-h b {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-q-a {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--navy);
}
.rv-q-tag {
  flex: none; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; padding: 1px 5px; border-radius: 4px;
}
.rv-q-tag-worst { color: var(--red);   background: rgba(178, 59, 59, 0.13); }
.rv-q-tag-best  { color: var(--green); background: rgba(46, 125, 82, 0.13); }
/* The two pages disagree about this row. Amber, never red: the row is ALREADY coloured by
   the worst of the two marks, so a second red chip would read as more bad news instead of as
   "there is another verdict here you cannot see". One glyph — the words are on the line below. */
.rv-q-tag-conf {
  color: var(--amber); background: rgba(191, 138, 32, 0.15);
  font-size: 10px; letter-spacing: 0; padding: 0 5px;
}

/* The pace bar. The tick is PY(YTD) at 100% and the fill is the actual as a share of it,
 * so short-of-last-year is everything LEFT of the tick and a beat runs past it. It is
 * NEVER scaled against the `PY` column: that one is the FULL prior year while `actual` is
 * year-to-date, and a bar built on it would show every program ~40% behind by
 * construction. Same reason the workbook's own Dif % compares to PY(YTD). */
.rv-q-m {
  display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center;
  gap: 8px; margin: 6px 0 4px;
}
.rv-q-bar { position: relative; height: 9px; border-radius: 5px; background: rgba(13, 42, 94, 0.08); }
.rv-q-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.rv-q-bar u {
  position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px;
  background: var(--navy); opacity: 0.5;
}
.rv-q-bar-off { background: repeating-linear-gradient(135deg, rgba(13,42,94,0.05) 0 4px, transparent 4px 8px); }
.rv-q-bar i.rv-q-over  { background: var(--green); }
.rv-q-bar i.rv-q-near  { background: var(--amber); }
.rv-q-bar i.rv-q-under { background: var(--red); }
.rv-q-bar i.rv-q-flat  { background: rgba(13, 42, 94, 0.55); }
.rv-q-pace {
  text-align: right; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700;
}
.rv-q-pace.rv-q-over  { color: var(--green); }
.rv-q-pace.rv-q-near  { color: var(--amber); }
.rv-q-pace.rv-q-under { color: var(--red); }
.rv-q-pace.rv-q-flat  { color: var(--navy); }

/* Actual / PY(YTD) / PY / Dif — the four he asked to see on every row. PY is dimmed
 * because it is a REFERENCE, not the comparison the percentage is built on. */
.rv-q-s { display: flex; align-items: flex-start; gap: 8px; }
/* Wraps rather than ellipsing. Four numbers at 10px do not fit one 220px line in a
 * three-column layout, and an ellipsis would hide a figure the row exists to show —
 * a second short line costs 12px and hides nothing. */
.rv-q-ref {
  flex: 1 1 auto; min-width: 0; font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-muted);
  line-height: 1.5;
}
.rv-q-ref b { font-weight: 700; color: var(--text); }
.rv-q-ref em { font-family: inherit; font-style: normal; }

/* HIS mark fills the row. There are no mark BUTTONS on a report-card row: the row is on
 * this card because it is already classified, so three dots with one of them lit ask a
 * question that has been answered. The fill and the left stripe are the answer. */
/* NO INSET EDGE STRIPE. The 3px bar down the left of every flagged row ran together into one
 * long coloured rail beside the column and was the loudest thing on the page — louder than the
 * numbers it was pointing at, and instantly readable as a template rather than a judgement.
 *
 * What replaces it is quieter and more specific: a soft fill, a hairline in the same colour,
 * and the row's NAME in that colour. Three signals on the row itself, none of them a bar. */
.rv-q-r.is-mark { border: 1px solid; border-radius: 9px; margin: 5px 0; padding: 8px 9px; }
.rv-q-r.is-mark + .rv-q-r { border-top: none; }

.rv-q-r.rv-bp-bad  { background: rgba(178, 59, 59, 0.07);   border-color: rgba(178, 59, 59, 0.38); }
.rv-q-r.rv-bp-good { background: rgba(46, 125, 82, 0.07);   border-color: rgba(46, 125, 82, 0.38); }
.rv-q-r.rv-bp-eh   { background: rgba(120, 120, 120, 0.07); border-color: rgba(120, 120, 120, 0.34); }
.rv-q-r.rv-bp-bad  .rv-q-h > b { color: var(--red); }
.rv-q-r.rv-bp-good .rv-q-h > b { color: var(--green); }
.rv-q-r.rv-bp-eh   .rv-q-h > b { color: var(--text-muted); }

.rv-q-tot-r {
  border-top: 2px solid var(--navy); border-bottom: none; margin-top: 5px;
  background: var(--off-white); border-radius: 0 0 7px 7px;
}
.rv-q-tot-r .rv-q-h b { font-weight: 800; }

/* A worst-first list truncated from the bottom cuts exactly the BEST half — the half he
 * asked for. So a long column keeps both ends and counts the middle. */
.rv-q-mid {
  font-size: 10px; color: var(--text-muted); text-align: center;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.rv-q-notot {
  text-align: left; line-height: 1.45; border-bottom: none;
  border-top: 1px dashed var(--border); margin-top: 4px;
}
/* Marks that name a row the ranking does not contain — a Marketing Dashboard channel this
 * division does not buy, or a source-tree group like TOTAL LEADS w/o HS. They are shown
 * BELOW the ranking rather than dropped, because an invisible mark is the failure this
 * whole path exists to prevent, and inside it because a group the size of the column wins
 * "PEOR" against a set it is not a member of. */
.rv-q-extra {
  text-align: left; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 9px; border-bottom: none; border-top: 1px dashed var(--border); margin-top: 4px;
}

/* A marked row whose entity is not in this week's report. Dimmed and labelled, because
 * reporting does rename programs between weeks and a blank row reads as a broken page. */
.rv-q-r.rv-ct-miss .rv-q-h b { color: var(--text-muted); }
.rv-q-r.rv-ct-miss .rv-q-ref em { color: var(--amber); }

/* His two verdicts, printed. Agreement says NOTHING here — one verdict stated twice is still
 * one verdict, and sourcing it invites him to re-open a call he already made on both pages.
 * This line exists ONLY when the two disagree, which is why it out-reads the numbers beside
 * it. The dashed border is the same idea on the box: the row is coloured by the worst of the
 * two marks, and a solid border would state that verdict as settled when it is not. */
.rv-q-r.is-conflict { border-style: dashed; }
.rv-q-r.is-conflict .rv-q-ref em { color: var(--amber); font-weight: 700; }

@media (max-width: 900px) {
  .rv-q-hd { grid-template-columns: 1fr; gap: 9px; }
  .rv-q-tot { gap: 14px; }
}

/* Neutral: "seen it, not a finding". Grey, so it never competes with a real flag. */
.rv-bp-eh { background: rgba(120, 120, 120, 0.1); }

/* ==========================================================================
   LO QUE MARQUÉ — his marks as a measured chart
   --------------------------------------------------------------------------
   His marks from By Program and the Marketing Dashboard for the week on screen.
   The first version was three columns of text and it read flat, because it
   opted out of the two devices this page already owns: the bar (paceBar) and
   the semantic triad red/grey/green. This version uses both at full strength.

   THREE MOVES, in the system's own vocabulary — no new colour, no new font, no
   new radius, no gradient text, no glass:

   1. THE WEIGHT BAR in the header answers "how did this week go" before a row
      is read: one bar split by how many things he called malo, ojo and bueno.
      It is the card's one authored moment; it wipes in once, on mount.
   2. EVERY ROW CARRIES A RAIL — its own figure as a share of the biggest number
      in the card — so the ranking has a shape and the eye sorts before it
      reads. The figure is printed beside it, always: the rail is data ink, and
      a colour-blind reader must get the same answer from the number.
   3. MALO GETS THE ROOM. The lanes are 1.35 / 1 / 1, because the lane that
      carries the week's problem is the lane he is here for. An even three-way
      split is what made the card read as a table of equals.

   Contrast: the tinted lane headers tint their ink FROM the lane's own hue
   (never grey on a colour), and every state carries a glyph and a number
   alongside the colour.
   ========================================================================== */

/* -------------------------------------------------------------- the header -- */

.rv-lnhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 42%);
  align-items: center;
  gap: 20px;
}
.rv-lnid { min-width: 0; }
.rv-lncard .rv-card-t {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.rv-lncard .rv-card-s {
  /* The incumbent card subtitle is JetBrains Mono, which is right for the cut
     date it usually holds and wrong for a metric NAME. Mono on this page means
     "this is a measurement"; using it for a label is a costume. */
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.72);
}

/* The weight bar. Segments are flex-basis'd by their share, so the bar IS the
   proportion — nothing is redrawn per row and nothing can round out of sync. */
.rv-lnw {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.rv-lnw-seg {
  flex: 0 0 var(--rv-w, 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 6px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: rv-lnw-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.rv-lnw-seg b {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  /* A segment too narrow for its own count hides the label rather than
     clipping a digit into a comma. The title attribute still says it, and the
     lane header repeats it two lines down. */
  padding: 0 2px;
}
.rv-lnw-bad  { background: #B23B3B; color: #FFF1F1; }
.rv-lnw-eh   { background: #6C6A64; color: #F7F6F3; }
.rv-lnw-good { background: #2E7D52; color: #EEF8F1; }
@keyframes rv-lnw-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------- the lanes -- */

.rv-lns {
  display: grid;
  /* MALO carries the week: it gets the room. */
  grid-template-columns: 1.35fr 1fr 1fr;
  align-items: start;
  gap: 14px;
  padding: 16px 18px 18px;
}
@media (max-width: 1180px) { .rv-lns { grid-template-columns: 1fr; } }

.rv-ln {
  border-radius: 12px;
  background: var(--warm-white, #fff);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(13, 42, 94, 0.04);
  overflow: hidden;
}
.rv-ln.is-empty { box-shadow: 0 0 0 1px var(--border); background: transparent; }

/* The lane header wears its verdict: a 2px rail of the lane's own colour, a
   tinted ground, and ink tinted FROM that hue rather than grey. */
.rv-ln-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 2px 0 currentColor;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.rv-ln-t { font-size: 12.5px; }
.rv-ln-h i {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.rv-ln-g { font-size: 11px; line-height: 1; }

.rv-ln-bad  .rv-ln-h { background: rgba(178, 59, 59, 0.11);  color: #8E2F2F; }
.rv-ln-eh   .rv-ln-h { background: rgba(108, 106, 100, 0.11); color: #57544D; }
.rv-ln-good .rv-ln-h { background: rgba(46, 125, 82, 0.11);  color: #1F6440; }

/* ---------------------------------------------------------------- the rows -- */

.rv-ln-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 11px;
  border-bottom: 1px solid rgba(13, 42, 94, 0.05);
  transition: background 0.12s ease;
}
.rv-ln-row:last-of-type { border-bottom: 0; }
.rv-ln-row:hover { background: rgba(13, 42, 94, 0.025); }
.rv-ln-l { min-width: 0; flex: 1 1 auto; }
.rv-ln-name {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-ln-sub {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The rail: this row's figure as a share of the card's largest. Grows once, on
   mount, from the left — the same direction the eye reads the label above it. */
.rv-ln-rail {
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(13, 42, 94, 0.07);
  overflow: hidden;
}
.rv-ln-rail i {
  display: block;
  width: var(--rv-w, 0%);
  height: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  animation: rv-rail-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
.rv-ln-bad  .rv-ln-rail i { background: #B23B3B; }
.rv-ln-eh   .rv-ln-rail i { background: #8A8780; }
.rv-ln-good .rv-ln-rail i { background: #2E7D52; }
@keyframes rv-rail-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rv-ln-n { flex: 0 0 auto; text-align: right; }
.rv-ln-n b {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
}
/* The delta is a chip, not loose text: an arrow, a number, and a ground, so it
   reads as one token at the end of the row. */
.rv-ln-n i {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 1px 6px 2px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
}
.rv-ln-n i span { font-size: 10px; line-height: 1; }
.rv-d-down { color: #8E2F2F; background: rgba(178, 59, 59, 0.10); }
.rv-d-up   { color: #1F6440; background: rgba(46, 125, 82, 0.10); }
.rv-d-flat { color: var(--text-muted); background: rgba(13, 42, 94, 0.05); }

/* A mark whose row is not in this week's cut keeps its place and says so — a
   silently dropped mark reads as "I never flagged that". */
.rv-ln-row.is-missing .rv-ln-name { color: var(--text-muted); }
.rv-ln-row.is-missing .rv-ln-sub { font-style: italic; }
.rv-ln-none {
  padding: 16px 12px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* "+N más" — the lane's last line, not a button pretending to be one. */
.rv-ln-more {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid rgba(13, 42, 94, 0.06);
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease;
}
.rv-ln-more:hover { background: var(--off-white); }
.rv-ln-more:focus-visible { outline: 0; box-shadow: var(--bb-sh-focus); }

/* ---------------------------------------------------------------- the dark -- */

html[data-bb-theme="dark"] .rv-ln {
  background: var(--bb-inset);
  box-shadow: 0 0 0 1px var(--bb-line);
}
html[data-bb-theme="dark"] .rv-ln.is-empty { background: transparent; }
html[data-bb-theme="dark"] .rv-ln-row { border-bottom-color: rgba(255, 255, 255, 0.05); }
html[data-bb-theme="dark"] .rv-ln-row:hover { background: rgba(255, 255, 255, 0.03); }
html[data-bb-theme="dark"] .rv-ln-n b { color: var(--bb-ink); }
html[data-bb-theme="dark"] .rv-ln-rail { background: rgba(255, 255, 255, 0.08); }
html[data-bb-theme="dark"] .rv-ln-h i { background: rgba(0, 0, 0, 0.28); box-shadow: none; }
html[data-bb-theme="dark"] .rv-ln-bad  .rv-ln-h { background: rgba(239, 107, 107, 0.14); color: #F09B9B; }
html[data-bb-theme="dark"] .rv-ln-eh   .rv-ln-h { background: rgba(255, 255, 255, 0.07); color: #B6B2A9; }
html[data-bb-theme="dark"] .rv-ln-good .rv-ln-h { background: rgba(63, 190, 122, 0.14); color: #7FD8A4; }
html[data-bb-theme="dark"] .rv-ln-bad  .rv-ln-rail i { background: #EF6B6B; }
html[data-bb-theme="dark"] .rv-ln-eh   .rv-ln-rail i { background: #8894A8; }
html[data-bb-theme="dark"] .rv-ln-good .rv-ln-rail i { background: #3FBE7A; }
html[data-bb-theme="dark"] .rv-d-down { color: #F09B9B; background: rgba(239, 107, 107, 0.14); }
html[data-bb-theme="dark"] .rv-d-up   { color: #7FD8A4; background: rgba(63, 190, 122, 0.14); }
html[data-bb-theme="dark"] .rv-d-flat { color: var(--bb-ink-3); background: rgba(255, 255, 255, 0.06); }
html[data-bb-theme="dark"] .rv-ln-more { color: var(--bb-accent-ink); border-top-color: rgba(255, 255, 255, 0.06); }
html[data-bb-theme="dark"] .rv-ln-more:hover { background: var(--bb-hover); }
html[data-bb-theme="dark"] .rv-lnw { background: rgba(255, 255, 255, 0.06); }

/* One authored moment means it collapses to the finished state, never to a
   blank one: the bars are DATA, so they stay at full width without the wipe. */
@media (prefers-reduced-motion: reduce) {
  .rv-lnw-seg, .rv-ln-rail i { animation: none; transform: none; }
}

/* The basis, stated where the number is — a chip, not a sentence. */
.rv-lnbasis {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  vertical-align: 1px;
}

/* The incumbent .rv-card body is a literal white, which in dark mode framed the
   lanes in a white gutter. Scoped to this card, not to its neighbours. */
html[data-bb-theme="dark"] .rv-lncard { background: var(--bb-surface); }
html[data-bb-theme="dark"] .rv-lnbasis {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}