/* Styles for the review screen (step 3). Builds on the .m- two-checklist review of assets/mockup.css. Tokens only, no raw colors. */

.rv .d-title { max-width: 30em; }
.rv-h { font: 600 15px/1.35 var(--sans); letter-spacing: 0; margin: 0; }
.rv-h2 { font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; margin: 0 0 4px; }

/* ---------- Toolbar: the four problems at a glance, and the test evidence ---------- */

.rv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rv-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%;
  padding: 4px 12px 4px 8px; background: var(--m-1); color: var(--white); border: 1px solid var(--white); border-radius: 999px;
  font: 500 12.5px/1.3 var(--sans); text-align: left; cursor: pointer;
}
.rv-chip:hover { background: var(--m-2); }
.rv-chip > i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--white); border-radius: 50%; font-size: 11px; line-height: 1; }
.rv-chip em { font: 400 12px/1.3 var(--sans); font-style: normal; color: var(--soft); white-space: nowrap; }
.rv-chip[data-state="resolved"] { border-color: var(--soft); }
.rv-chip[data-state="resolved"] > i { background: var(--white); border-color: var(--white); color: var(--charcoal); font-weight: 700; }
.rv-tests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Evidence ---------- */

.rv-evidence { margin-bottom: 14px; background: var(--m-1); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.rv-ev-head { display: grid; gap: 2px; padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); }
.rv-clients { display: grid; }
.rv-clients li {
  display: grid; grid-template-columns: 120px minmax(0, 1.5fr) minmax(0, 1.2fr) 72px minmax(0, 0.9fr); gap: 6px 16px; align-items: start;
  padding: 11px 16px; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.45;
}
.rv-clients li:first-child { border-top: 0; }
.rv-clients p { margin: 0; }
.rv-c-name b { font-weight: 600; }
.rv-k { display: none; margin-right: 6px; color: var(--soft); font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.rv-approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; background: var(--m-0); border-top: 1px solid var(--hair); }
.rv-approve .m-sub { flex: 1 1 18em; min-width: 0; }
.rv-approve:focus { outline: none; }
.rv-approve:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* ---------- The two checklists ---------- */

.rv-board { border: 1px solid var(--hair); border-radius: 14px; overflow: clip; background: var(--m-0); } /* clip, not hidden: the release bar sticks to the viewport */
.rv-col { padding-bottom: 14px; }
.rv-col .m-col-head { margin-bottom: 8px; }
.rv-col .m-col-head .m-sub { white-space: normal; text-align: right; }
.rv-counts { padding: 2px 0 14px; border-bottom: 1px solid var(--hair); }
.rv-rows { display: grid; }
.rv-pill { white-space: normal; max-width: 15em; align-items: flex-start; }
.rv-pill i { margin-top: 3px; }

/* An open problem stands out as a card, a resolved one goes back to a plain row with a note. */
.rv-row { scroll-margin-top: 80px; }
.rv-row:focus { outline: none; }
.rv-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.rv-row[data-state="open"] { margin: 10px 0 4px; padding: 12px; background: var(--veil); border: 1px solid var(--edge); border-radius: 12px; }
.rv-row[data-state="open"] + .rv-row[data-state="open"] { margin-top: 10px; }
.rv-row[data-state="resolved"] { background: transparent; }
.rv-done { color: var(--soft); }
.rv-done i { color: var(--white); font-weight: 700; }
.rv-row s { color: var(--soft); }

.rv-fix { background: var(--m-1); }
.rv-fix-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.rv-fix p { margin: 0; }
.rv-prob { font-size: 14px; }
.rv-law { padding: 8px 10px; background: var(--m-0); border-left: 3px solid var(--edge); border-radius: 0 8px 8px 0; color: var(--soft); font-size: 12.5px !important; }
.rv-law q { quotes: "\201C" "\201D"; }
.rv-draft { display: grid; gap: 4px; padding: 9px 11px; background: var(--m-0); border-radius: 8px; }
.rv-draft p { font-size: 13px; }
.rv-mono { font: 400 12.5px/1.55 var(--mono) !important; overflow-wrap: anywhere; }
.rv-fix .m-btn { padding: 7px 12px; font-size: 13px; white-space: normal; text-align: left; min-height: 36px; }
.rv-actions { align-items: stretch; }
.rv-fix .m-why { margin: 0; }
.rv-note-now { color: var(--white); }

.rv-rest { margin-top: 6px; }
.rv-rest summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 2px; cursor: pointer; list-style: none;
  color: var(--soft); font-size: 13px;
}
.rv-rest summary::-webkit-details-marker { display: none; }
.rv-rest summary::before, .rv-caret {
  content: ""; flex: none; display: inline-block; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg);
}
.rv-rest[open] summary::before, [aria-expanded="true"] > .rv-caret { transform: rotate(45deg); }
.rv-rest summary:hover { color: var(--white); }
.rv-guidance { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--hair); }

/* ---------- Release ---------- */

.rv-foot { border-top: 1px solid var(--hair); }
.rv-foot p { flex: 1 1 22em; min-width: 0; }
.rv-foot .m-actions { align-items: center; }
.rv-foot[data-state="locked"] { background: var(--m-1); }
@container (min-width: 761px) {
  .rv-foot { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -10px 18px -12px var(--charcoal); }
  /* Tab must not leave a control under the sticky bar: the bar is about 70px tall here. */
  .rv-cols :is(button, a, summary, [tabindex]) { scroll-margin-bottom: 96px; }
}

/* ---------- Changes since v1.0 ---------- */

.rv-later { display: grid; gap: 12px; margin-top: 24px; }
.rv-diff { background: var(--m-0); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }

@container (max-width: 820px) {
  .rv-col .m-col-head { flex-direction: column; gap: 2px; }
  .rv-col .m-col-head .m-sub { text-align: left; }
}
@container (max-width: 760px) {
  .rv-clients li { grid-template-columns: minmax(0, 1fr) auto; }
  .rv-c-name { grid-column: 1; grid-row: 1; }
  .rv-c-res { grid-column: 2; grid-row: 1; }
  .rv-c-facts, .rv-c-exp, .rv-c-cl { grid-column: 1 / -1; }
  .rv-k { display: inline; }
}
@container (max-width: 520px) {
  .rv-pill { max-width: none; }
  .rv-row[data-state="open"] { padding: 10px; }
  .rv-chip { width: 100%; }
  .rv-chips { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  .rv-actions .m-btn { flex: 1 1 100%; }
  .rv-foot .m-actions .m-btn { flex: 1 1 auto; }
}
/* A §4 pill with its plain-text remainder beside it, kept together as one item. */
.rv-pc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }