/* Monthly Review (Vault). Uses only the existing Nexus tokens, so it follows the
   light and dark themes like every other screen. */

/* ---------- stars */
.rv-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; white-space: nowrap; }
.rv-stars svg { width: var(--rv-sz, 16px); height: var(--rv-sz, 16px); margin-right: 2px; }
.rv-stars-base svg { fill: var(--surface-3); }
.rv-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.rv-stars-fill svg { fill: var(--amber); }

.rv-pick { display: inline-flex; align-items: center; gap: 2px; }
.rv-pick-s { border: 0; background: transparent; padding: 3px; cursor: pointer; border-radius: 8px; line-height: 0; transition: transform .12s; }
.rv-pick-s svg { width: 24px; height: 24px; fill: var(--surface-3); transition: fill .12s; }
.rv-pick-s.on svg { fill: var(--amber); }
.rv-pick-s:hover { transform: scale(1.12); }
.rv-pick-s:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.rv-pick-w { min-width: 74px; margin-left: 6px; font-size: 12.5px; font-weight: 650; color: var(--text-dim); }

/* ---------- small shared bits */
.rv-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin: 4px 0 8px; }
.rv-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; margin-top: 2px; }
.rv-small { font-size: 12px; line-height: 1.5; margin-top: 8px; }
.rv-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.rv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }
.rv-chip.warn { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
button.rv-chip { cursor: pointer; }
button.rv-chip:hover { border-color: var(--brand); color: var(--text); }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rv-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.rv-pill.none { color: var(--text-faint); background: var(--surface-2); }
.rv-pill.draft { color: var(--amber); background: var(--amber-soft); }
.rv-pill.ready { color: var(--brand-ink); background: var(--brand-soft); }
.rv-pill.ok { color: var(--green); background: var(--green-soft); }
.rv-pill svg { width: 12px; height: 12px; }
.rv-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; font-size: 12.5px; }
.rv-ok svg { width: 13px; height: 13px; }
.rv-self-chip { font-size: 11px; font-weight: 650; color: var(--violet); background: var(--violet-soft); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }

/* ---------- Home cards */
.rv-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rv-hc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 0; }
.rv-hc.quiet { box-shadow: none; }
.rv-wrap > .rv-hc, #rv-body > .rv-hc { margin-bottom: 14px; }
.rv-hc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.rv-hc-ic svg { width: 18px; height: 18px; }
.rv-hc-ic.amber { color: var(--amber); background: var(--amber-soft); }
.rv-hc-ic.brand { color: var(--brand); background: var(--brand-soft); }
.rv-hc-ic.green { color: var(--green); background: var(--green-soft); }
.rv-hc-ic.violet { color: var(--violet); background: var(--violet-soft); }
.rv-hc-t { flex: 1; min-width: 0; }
.rv-hc-h { font-weight: 650; font-size: 14px; }
.rv-hc-s { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; }

/* ---------- team list */
.rv-progress { display: flex; align-items: center; gap: 20px; }
.rv-prog-l { flex: 1; min-width: 0; }
.rv-prog-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.rv-prog-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.rv-prog-big span { font-size: 15px; font-weight: 600; color: var(--text-dim); letter-spacing: 0; }
.rv-prog-when { font-size: 13px; margin-top: 2px; }
.rv-prog-r { flex: none; }
.rv-table .rv-row { cursor: pointer; }
.rv-table th, .rv-table td { padding-left: 10px; padding-right: 10px; }
.rv-table .person .pr { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-table .rv-row:hover td { background: var(--surface-2); }
.rv-cell-stars { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rv-table td:nth-child(4) { white-space: nowrap; }
.rv-cell-badge { font-size: 15px; }
.rv-cell-act { text-align: right; white-space: nowrap; }
.rv-cell-act .btn { vertical-align: middle; }
.rv-skip { width: 28px; height: 28px; display: inline-grid; margin-left: 4px; vertical-align: middle; }
.rv-skip svg { width: 14px; height: 14px; }
.rv-skipped { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin: 4px 2px 18px; }

/* ---------- editor */
.rv-ed-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-ed-name { font-size: 17px; font-weight: 700; }
.rv-ed-who .muted { font-size: 12.5px; }
.rv-their-reply { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-color: var(--violet); background: var(--violet-soft); }
.rv-editor { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.rv-main .card, .rv-side .card { margin-bottom: 16px; }
.rv-side { position: sticky; top: 12px; }
.rv-side-card .card-head { margin-bottom: 12px; }
.rv-side-card .card-head h3 { display: inline-flex; align-items: center; gap: 7px; }
.rv-side-card .card-head h3 svg { width: 15px; height: 15px; color: var(--text-dim); }
.rv-self-q { font-size: 13px; line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--border-soft); white-space: pre-wrap; }
.rv-self-q b { display: block; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.rv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rv-tile { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 11px; }
.rv-tile-v { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rv-tile-v small { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.rv-tile-l { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.rv-tile.green .rv-tile-v { color: var(--green); }
.rv-tile.amber .rv-tile-v { color: var(--amber); }
.rv-tile.red .rv-tile-v { color: var(--red); }

.rv-legend { font-size: 12px; color: var(--text-faint); margin: -8px 0 6px; line-height: 1.5; }
.rv-tpl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 8px; font-size: 12.5px; color: var(--text-faint); }
.rv-area { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.rv-area:last-child { border-bottom: 0; padding-bottom: 2px; }
.rv-area-top { display: flex; align-items: flex-start; gap: 10px 14px; justify-content: space-between; flex-wrap: wrap; }
.rv-area-l { min-width: 0; flex: 1 1 240px; }
.rv-area-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.rv-evi { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 3px 8px; }
.rv-evi svg { width: 12px; height: 12px; }
.rv-anote { margin-top: 10px; font-size: 13px; padding: 8px 11px; }

.rv-nbox { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rv-nbox:last-child { border-bottom: 0; }
.rv-nbox-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rv-insert { max-width: 210px; }
.rv-ta { font-size: 13.5px; line-height: 1.55; }
.rv-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.rv-goal-ins { display: grid; gap: 8px; }
.rv-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-badge-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: .12s; }
.rv-badge-opt:hover { border-color: var(--brand); color: var(--text); }
.rv-badge-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.rv-badge-opt:disabled { cursor: default; }
.rv-private { border-style: dashed; }

.rv-bar { position: sticky; bottom: 10px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-lg); margin-top: 4px; }
.rv-bar-l { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.rv-bar-l b { font-size: 18px; }
.rv-bar-r { display: flex; gap: 8px; }

/* ---------- the report */
.rv-wrap { max-width: 900px; margin: 0 auto; }
.rv-report .card { margin-bottom: 16px; }
.rv-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; overflow: hidden; padding: 24px 26px; }
.rv-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 100% 0%, var(--brand-soft), transparent 60%); pointer-events: none; }
.rv-hero > * { position: relative; }
.rv-hero-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rv-hero-t { margin: 2px 0 4px; font-size: 22px; letter-spacing: -.02em; }
.rv-hero-s { font-size: 13px; }
.rv-hero-r { text-align: right; }
.rv-overall { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rv-overall small { font-size: 16px; font-weight: 600; color: var(--text-faint); margin-left: 4px; letter-spacing: 0; }
.rv-hero-r .rv-stars { margin-top: 8px; }
.rv-overall-w { font-size: 13px; font-weight: 700; color: var(--brand-ink); margin-top: 4px; }
.rv-ribbon { flex-basis: 100%; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; font-weight: 700; font-size: 13.5px; color: var(--amber); background: var(--amber-soft); border-radius: 10px; padding: 7px 12px; }
.rv-ribbon-e { font-size: 18px; }
.rv-agroup + .rv-agroup { margin-top: 14px; }
.rv-arow { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.rv-agroup .rv-arow:last-child { border-bottom: 0; }
.rv-arow-l { min-width: 0; flex: 1 1 220px; }
.rv-arow-t { font-weight: 650; font-size: 14px; }
.rv-arow-n { font-size: 13px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.rv-arow-r { display: flex; align-items: center; gap: 8px; flex: none; }
.rv-arow-w { font-size: 12.5px; font-weight: 650; color: var(--text-dim); min-width: 78px; }
.rv-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rv-note.expect { grid-column: 1 / -1; }   /* the forward-looking part gets its own full row */
.rv-note { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.rv-note.keep { border-top-color: var(--green); }
.rv-note.grow { border-top-color: var(--amber); }
.rv-note-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.rv-note-h svg { width: 15px; height: 15px; color: var(--text-dim); }
.rv-note-b { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; color: var(--text); }
.rv-goals { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.rv-goals-done { display: grid; gap: 6px; }
.rv-goal { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rv-gs { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; color: var(--text-faint); background: var(--surface-2); }
.rv-gs.achieved { color: var(--green); background: var(--green-soft); }
.rv-gs.partly { color: var(--amber); background: var(--amber-soft); }
.rv-gs.missed { color: var(--red); background: var(--red-soft); }
.rv-accept { display: grid; gap: 14px; border-color: var(--brand); }
.rv-accept .btn { justify-self: center; }
.rv-accepted { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--green); font-weight: 650; font-size: 13px; margin: 0 2px 6px; }
.rv-accepted svg { width: 14px; height: 14px; }
.rv-reply-shown { flex-basis: 100%; color: var(--text-dim); font-weight: 450; }

/* the envelope before the report opens */
.rv-envelope { max-width: 620px; margin: 20px auto; text-align: center; padding: 32px; }
.rv-env-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--amber); background: var(--amber-soft); }
.rv-env-ic svg { width: 28px; height: 28px; }
.rv-envelope h2 { margin: 14px 0 8px; font-size: 24px; letter-spacing: -.02em; }
.rv-envelope p { max-width: 460px; margin: 0 auto 20px; line-height: 1.55; }
.rv-env-foot { margin-top: 14px; font-size: 12px; display: flex; justify-content: center; align-items: center; gap: 5px; }
.rv-env-foot svg { width: 13px; height: 13px; }

/* self-check modal */
.rv-self-intro { margin: 0 0 14px; line-height: 1.5; }
.rv-srows { display: grid; }
.rv-srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }

/* history */
.rv-hist { padding: 0; overflow: hidden; margin-bottom: 14px; }
.rv-hist summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.rv-hist summary::-webkit-details-marker { display: none; }
.rv-hist summary svg { width: 14px; height: 14px; color: var(--text-faint); }
.rv-hist-b { padding: 0 18px 4px; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.rv-hist-b .card, .rv-hist-b .rv-note { box-shadow: none; }
.rv-journey { width: 100%; height: 120px; display: block; }
.rv-j-mid { stroke: var(--border); stroke-dasharray: 4 4; }
.rv-j-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rv-j-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rv-j-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-faint); font-weight: 600; padding: 4px 16px 0; }

/* areas & settings */
.rv-ae-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.rv-arow-edit { display: grid; grid-template-columns: 1fr 90px 60px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.rv-arow-edit .rv-ae-hint { grid-column: 1 / -1; font-size: 13px; }
.rv-ae-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
#rv-ae-add { margin-top: 10px; }

@media (max-width: 1280px) {
  .rv-editor { grid-template-columns: 1fr; }
  .rv-side { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .rv-side .card { margin-bottom: 0; }
  .rv-side { margin-bottom: 16px; }
}
@media (max-width: 640px) {
  .rv-area-top, .rv-arow, .rv-srow { flex-direction: column; align-items: flex-start; }
  .rv-progress { flex-direction: column; align-items: flex-start; }
  .rv-hero-r { text-align: left; }
  .rv-pick-s svg { width: 26px; height: 26px; }
  .rv-report .card-head { flex-wrap: wrap; }
  .rv-report .card-head .sub { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-pick-s, .rv-pick-s svg { transition: none; }
}