/* The review room (work-review.js): where a finished round is judged, marked up and decided.
   One rhythm throughout: small labels, thin rules, space. No cards inside cards. */

/* ---------- a session's two views ---------- */
/* The switch is Work's segmented control (.rv-seg, in work.css). */
.work-views { flex: none; display: flex; align-items: center; gap: 4px; }
.work-views:empty { display: none; }
.work-views-round { color: var(--tertiary); font-variant-numeric: tabular-nums; font-weight: 600; }
.work-views-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--verified); }
.rv-icon.work-split-toggle { display: none; }
/* Expanded, the review takes the sessions list's place too. */
@media (min-width: 720px) {
  .work-workspace.is-expanded { grid-template-columns: minmax(0, 1fr); }
  .work-workspace.is-expanded > .work-sessions { display: none; }
}
@media (max-width: 719px) { .rv-icon.work-expand-toggle { display: none; } }
.work-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.work-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.work-session.is-review .work-pane { display: none; }
@container (min-width: 1180px) {
  .rv-icon.work-split-toggle { display: grid; }
  .work-session.is-split .work-panes { grid-template-columns: minmax(380px, 2fr) minmax(760px, 5fr); }
  .work-session.is-split .work-pane { display: flex; border-right: 1px solid var(--hairline); }
}
@container (max-width: 640px) {
  /* On a phone the switch takes its own row under the title. */
  .work-session .work-header { flex-wrap: wrap; row-gap: 6px; }
  .work-views { order: 5; flex: 1 0 100%; }
  .work-views .rv-seg { flex: 1; }
  .work-views .rv-seg button { flex: 1; justify-content: center; height: 30px; }
  .work-confirm { flex-wrap: wrap; padding: 12px 16px; }
  .work-confirm .rv-confirm-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- the room ---------- */
.work-review { container: review / inline-size; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: clip; background: var(--canvas); }
.work-review > .work-empty { flex: 1; }
.rv {
  --rv-rail: 312px; --rv-pad: 20px; --rv-stage: clamp(340px, calc(100dvh - 318px), 740px);
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rv-rail); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head actions" "confirm confirm" "body rail"; font-size: 14px; line-height: 1.5;
}
.rv :is(button, summary, a, pre, .rv-frame, .rv-confirm, .rv-data-scroll):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rv-muted { margin: 0; color: var(--secondary); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Labels speak as the sidebar's sections and the cards' titles do: sentence case, no tracking. */
.rv-label { flex: none; margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.rv-key { flex: none; margin: 0; font: 500 12.5px/1.3 var(--font); color: var(--tertiary); white-space: nowrap; }
.rv-meta { min-width: 0; font-size: 12px; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
summary.rv-icon { list-style: none; }
.rv-num {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 0; border-radius: 10px;
  background: var(--ink); color: #fff; font: 650 11px/1 var(--font); font-variant-numeric: tabular-nums;
}
.rv-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--secondary); text-decoration: none; }
.rv-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rv-links { display: inline-flex; gap: 14px; }

/* ---------- header: the verdict and the decision ---------- */
.rv-head { grid-area: head; min-width: 0; display: grid; align-content: center; gap: 9px; padding: 13px 20px 13px var(--rv-pad); border-bottom: 1px solid var(--hairline); }
.rv-head-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.rv-round-slot { flex: none; }
.rv-round {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--fill);
  color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; list-style: none;
}
summary.rv-round { padding-right: 6px; cursor: pointer; transition: background 0.15s; }
summary.rv-round:hover, .rv-round-menu[open] > summary { background: rgba(29, 29, 31, 0.1); }
.rv-verdict {
  margin: 1px 0 0; min-width: 0; font: 560 16px/1.38 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.rv-chips { display: flex; gap: 6px; min-width: 0; margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.rv-chips::-webkit-scrollbar { display: none; }
.rv-chip[data-tone="plain"] { padding-left: 10px; }
.rv-chip[data-tone="ok"] svg { color: var(--verified); }
/* Amber or red only where something failed or did not run, and only on the mark and the words that say so. */
.rv-chip[data-tone="warn"] :is(svg, .rv-chip-extra) { color: var(--attention); }
.rv-chip[data-tone="bad"] :is(svg, .rv-chip-extra) { color: var(--destructive); }
.rv-chip-extra::before { content: "·"; margin-right: 5px; color: var(--tertiary); }

.rv-actions {
  grid-area: actions; min-width: 0; display: grid; align-content: center; justify-items: end; gap: 6px; padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--hairline); border-left: 1px solid var(--hairline); background: rgba(251, 250, 247, 0.6);
}
.rv-actions-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 100%; }
.rv-actions .btn { height: 34px; padding: 0 14px; white-space: nowrap; }
.rv-send[data-count]::after, .rv-notes-toggle[data-count]::after {
  content: attr(data-count); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.rv-send:not(.secondary)[data-count]::after { background: #fff; color: var(--ink); }
.rv-notes-toggle { display: none; }
.rv-hint { margin: 0; max-width: 100%; font-size: 11.5px; line-height: 1.3; color: var(--tertiary); text-align: right; }
.rv-hint:empty { display: none; }
.rv-readonly { padding: 0 4px; font-size: 12.5px; color: var(--secondary); white-space: nowrap; }

.rv-pop { position: relative; }
.rv-menu {
  position: absolute; z-index: 12; top: calc(100% + 4px); left: 0; min-width: 184px; padding: 5px; display: grid;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-2); animation: work-pop 0.12s ease-out;
}
.rv-more .rv-menu { left: auto; right: 0; }
.rv-menu > :is(button, a) {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 13px; line-height: 18px; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.rv-menu > :is(button, a):hover:not(:disabled) { background: var(--fill); }
.rv-menu > button[aria-checked="true"] { font-weight: 600; }
.rv-menu > button:disabled { opacity: 0.4; cursor: default; }
.rv-menu-sub { font-size: 12px; font-weight: 450; color: var(--tertiary); }
.rv-menu-link svg { color: var(--tertiary); }
.rv-menu > .rv-menu-danger { color: var(--destructive); }

/* The same second step asks before a session is stopped (.work-confirm, under the session's header). */
.rv-confirm, .work-confirm { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--hairline); background: #faf6ec; outline: none; }
.rv-confirm { grid-area: confirm; padding-left: var(--rv-pad); }
.rv-confirm[hidden] { display: none; }
.rv-confirm-mark { flex: none; margin-top: 2px; color: var(--attention); }
.rv-confirm-text { flex: 1; min-width: 0; font-size: 13px; }
.rv-confirm-text > strong { font-size: 13.5px; font-weight: 620; }
.rv-confirm-text p { margin: 1px 0 0; color: var(--secondary); }
.rv-confirm-checks { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; color: var(--secondary); }
.rv-confirm-checks strong { font-weight: 600; color: var(--ink); }
.rv-confirm-actions { flex: none; align-self: center; display: flex; gap: 6px; }

/* ---------- body ---------- */
.rv-scroll { grid-area: body; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rv-body { max-width: 1180px; padding: 0 var(--rv-pad) 72px; overflow-wrap: anywhere; }
.rv-section { padding-top: 22px; scroll-margin-top: 0; }
.rv-section + .rv-section, .rv-group + .rv-group { margin-top: 24px; border-top: 1px solid var(--hairline); }
.rv-group + .rv-group { padding-top: 22px; }
/* Decisions under their own headings (an audit's findings) are one section: no rules between them. */
.rv-decisions .rv-group + .rv-group { margin-top: 10px; padding-top: 0; border-top: 0; }
.rv-section-head { display: flex; align-items: center; gap: 12px; min-height: 30px; margin-bottom: 8px; }
.rv-section-head > :is(.rv-seg, .rv-links) { margin-left: auto; }
.rv-section.is-target > .rv-section-head .rv-label, .rv-group.is-target .rv-label { color: var(--ink); transition: color 0.2s; }
.rv-fold > summary { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; font-size: 13px; color: var(--secondary); cursor: pointer; }
.rv-fold > summary:hover { color: var(--ink); }
.rv-fold > summary svg, .rv-output > summary svg { transition: transform 0.15s; }
.rv-fold[open] > summary svg, .rv-output[open] > summary svg { transform: rotate(90deg); }
.rv-changes .files { margin-top: 10px; }

/* Summary: what was asked, what changed, where to look. */
.rv-facts { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px 20px; max-width: 860px; }
.rv-key { padding-top: 3px; }
/* One sentence already said in the header is not said again under it. */
.rv-facts > .is-said { display: none; }
.rv-value p { margin: 0; }
.rv-asked { color: var(--secondary); }
.rv-changed { font-size: 16px; line-height: 1.5; }
.rv-look, .rv-risks { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rv-jump {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; margin: -3px -8px; padding: 3px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 14px; line-height: 1.5; text-align: left; cursor: pointer; transition: background 0.15s;
}
.rv-jump:hover { background: var(--fill); }
.rv-jump svg { flex: none; align-self: center; color: var(--tertiary); }
.rv-jump-to { font-size: 12.5px; color: var(--tertiary); white-space: nowrap; }
.rv-jump.small { font-size: 12.5px; color: var(--secondary); }
.rv-risks li { display: flex; align-items: flex-start; gap: 8px; }
.rv-risks svg { flex: none; margin-top: 3px; color: var(--attention); }
.rv-question + .rv-question { margin-top: 14px; }
.rv-question-text { margin: 0 0 7px; }
.rv textarea { display: block; width: 100%; resize: none; line-height: 1.45; }
.rv-answer { max-width: 560px; min-height: 36px; padding: 7px 11px; border-radius: 10px; background: var(--surface); border-color: rgba(29, 29, 31, 0.1); }
.rv-answer-sent { margin: 0; font-size: 13px; color: var(--secondary); }
.rv-question.is-hot .rv-question-text, .rv-decision.is-hot .rv-decision-text { animation: rv-flash 1.6s ease-out; }

/* Rows: checks, tests, earlier notes, decisions. A mark, a name, one muted line. */
.rv-rows { margin: 0; padding: 0; list-style: none; }
.rv-row { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 11px; align-items: start; padding: 10px 0; }
.rv-row + .rv-row { border-top: 1px solid var(--hairline); }
.rv-row.is-hot, .rv-data tr.is-hot { animation: rv-flash 1.6s ease-out; }
@keyframes rv-flash { 0%, 35% { background: rgba(29, 29, 31, 0.07); } 100% { background: transparent; } }
.rv-mark { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--tertiary); }
.rv-mark[data-status="passed"] { background: rgba(31, 122, 53, 0.12); color: var(--verified); }
.rv-mark[data-status="failed"] { background: rgba(199, 0, 19, 0.1); color: var(--destructive); }
/* Did not run is its own state: a hollow amber ring, never a filled mark. */
.rv-mark[data-status="did_not_run"] { background: none; box-shadow: inset 0 0 0 1.5px var(--attention); color: var(--attention); }
.rv-row-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rv-row-name { min-width: 0; font-weight: 560; }
.rv-row-state { flex: none; font-size: 12px; font-weight: 600; color: var(--secondary); white-space: nowrap; }
.rv-row[data-status="failed"] .rv-row-state { color: var(--destructive); }
.rv-row[data-status="did_not_run"] .rv-row-state { color: var(--attention); }
.rv-row-proves { margin: 1px 0 0; font-size: 13px; color: var(--secondary); }
.rv-row-plain { margin: 5px 0 0; font-size: 13.5px; }
.rv-output { margin-top: 5px; font-size: 12px; }
.rv-output > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--tertiary); cursor: pointer; }
.rv-output > summary:hover { color: var(--secondary); }
.rv-output:not([open]) .rv-output-hide, .rv-output[open] .rv-output-show { display: none; }
.rv-output pre {
  margin: 8px 0 2px; padding: 10px 12px; max-height: 260px; overflow: auto; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface); font: 11.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.rv-row-side { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.rv-row-marks { display: inline-flex; gap: 4px; }
.rv-row-mark { cursor: pointer; }
.rv-row-add { width: 26px; height: 22px; opacity: 0; }
:is(.rv-row, .rv-data tr):hover .rv-row-add, .rv-row-add:focus-visible, :is(.rv-row, .rv-data tr):focus-within .rv-row-add { opacity: 1; }
@media (hover: none) { .rv-row-add { opacity: 1; } }
.rv-passed { border-top: 1px solid var(--hairline); }
.rv-rows + .rv-passed { margin-top: 0; }
.rv-passed > summary { display: flex; align-items: center; gap: 11px; padding: 10px 0; color: var(--secondary); cursor: pointer; }
.rv-passed > summary:hover { color: var(--ink); }
.rv-passed > summary .rv-mark { margin-top: 0; }
.rv-passed-count { font-weight: 560; }
.rv-passed .rv-row-name { font-weight: 450; }
.rv-passed > summary > svg { color: var(--tertiary); transition: transform 0.15s; }
.rv-passed[open] > summary > svg { transform: rotate(180deg); }
.rv-passed > .rv-rows { border-top: 1px solid var(--hairline); }
.rv-since-note { font-weight: 560; quotes: "“" "”"; }
.rv-since-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0 8px; }
.rv-bullet { width: 5px; height: 5px; margin: 9px 0 0 6px; border-radius: 50%; background: var(--tertiary); }
.rv-decision-text { margin: 0; }
.rv-attachment { grid-template-columns: minmax(0, 1fr); }
.rv-video { display: grid; justify-items: start; gap: 8px; margin-top: 8px; }
.rv-video video { display: block; max-width: 100%; max-height: 60vh; border-radius: 10px; }

/* Data: before → after per column, in mono so stray spaces show. */
.rv-data-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.rv-data table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-data th { padding: 0 16px 7px 0; text-align: left; font-size: 12px; font-weight: 560; color: var(--tertiary); white-space: nowrap; }
.rv-data td { padding: 9px 16px 9px 0; border-top: 1px solid var(--hairline); vertical-align: top; }
.rv-data .rv-cell-side { width: 1%; padding-right: 0; white-space: nowrap; }
.rv-data .rv-slot-row > td { padding: 0; border: 0; }
.rv-data .rv-slot-row > td:empty { display: none; }
.rv-val { padding: 1px 5px; border-radius: 5px; background: var(--fill); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.rv-none { color: var(--tertiary); }
.rv-change { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.rv-was .rv-val { color: var(--secondary); background: none; box-shadow: inset 0 0 0 1px var(--hairline); }
.rv-space { color: var(--attention); }
.rv-arrow { color: var(--tertiary); }
.rv-cell-detail { min-width: 180px; color: var(--secondary); }
.rv-data-state { margin-right: 8px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.rv-data-state[data-status="failed"] { color: var(--destructive); }
.rv-data-state[data-status="added"] { color: var(--verified); }
.rv-files { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rv-files li { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.rv-files code { min-width: 0; font: 12px/1.5 var(--mono); color: var(--secondary); overflow-wrap: anywhere; }
.rv-kind { flex: none; width: 16px; font: 650 10.5px/1.5 var(--mono); color: var(--tertiary); text-align: center; }
.rv-kind[data-kind="added"] { color: var(--verified); }
.rv-kind[data-kind="deleted"], .rv-kind[data-kind="removed"] { color: var(--destructive); }

/* Guide edits: the stored guide before and after, drawn as a file's diff is. Prose wraps. */
.rv-guide-edit + .rv-guide-edit { margin-top: 20px; }
.rv-guide-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rv-guide-head .work-delta { margin-left: auto; }
.rv-guide-path { font: 600 12.5px/1.5 var(--mono); }
.rv-guide-diff { max-width: 860px; margin-top: 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rv-guide-diff .work-diff { max-height: 420px; line-height: 20px; }
.rv-guide-diff .work-diff-lines { width: 100%; }
.rv-guide-diff .work-diff-line .work-diff-text { padding-top: 1px; padding-bottom: 1px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- screens: one large viewer ---------- */
.rv-viewer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.rv-captures { display: flex; gap: 6px 18px; min-width: 0; min-height: 36px; margin: -2px 138px 8px -2px; padding: 2px 16px 2px 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, transparent, #000 16px); mask-image: linear-gradient(to left, transparent, #000 16px); }
.rv-captures::-webkit-scrollbar { display: none; }
.rv-cap-group { flex: none; display: flex; align-items: center; gap: 3px; }
.rv-cap-name { margin-right: 5px; font-size: 12.5px; font-weight: 560; color: var(--secondary); white-space: nowrap; }
.rv-cap {
 flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
 text-align: left;
}
.rv-thumb { display: none; flex: none; width: 34px; height: 26px; border-radius: 5px; overflow: hidden; background: var(--raised); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1); }
.rv-thumb[data-shape="tall"] { width: 18px; height: 30px; margin: 0 8px; border-radius: 4px; }
.rv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rv-cap-text { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.rv-cap-label { font-size: 12.5px; font-weight: 560; white-space: nowrap; }
.rv-cap-size { display: none; font-size: 11px; color: var(--tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-cap-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.rv-cap-count[hidden] { display: none; }
.rv-stage-col { min-width: 0; }
/* Stepping between screens stays in one place above the stage, whatever height the pictures take. */
.rv-bar { position: absolute; top: 0; right: 0; height: 32px; display: flex; align-items: center; gap: 10px; }
.rv-bar-title { display: none; min-width: 0; font-size: 13px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-stage {
  position: relative; height: var(--rv-stage); max-height: var(--rv-stage); min-height: 200px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 14px; padding: 12px 16px 16px; border-radius: 16px; background: var(--raised); touch-action: pan-y; transition: box-shadow 0.25s;
}
.rv-stage.is-target { box-shadow: 0 0 0 2px rgba(29, 29, 31, 0.5); }
.rv-stage[data-mode="side"][data-flow="stacked"] { grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.rv-panel { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.rv-panel:hover { z-index: 2; }
.rv-panel.has-editor { z-index: 3; }
/* Capture ancestors stay untransformed so pin and editor coordinates stay exact. */
.rv-panel-label { font: 560 11.5px/1.2 var(--font); color: var(--tertiary); text-align: center; }
.rv-stage:not([data-mode="side"]) .rv-panel-label { display: none; }
.rv-stage:not([data-mode="side"]) .rv-panel { grid-template-rows: minmax(0, 1fr); }
.rv-stage[data-mode="slider"] .rv-panel { padding-top: 26px; }
.rv-fit { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
.rv-frame {
  position: relative; width: min(100cqw, calc(100cqh * var(--w) / var(--h)), calc(var(--w) * 1px)); aspect-ratio: var(--w) / var(--h);
  border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1), 0 8px 28px rgba(29, 29, 31, 0.12); cursor: crosshair;
}
.rv .rv-frame:focus-visible { outline-offset: 3px; }
.work-review[data-editable="false"] .rv-frame { cursor: zoom-in; }
.rv-frame.is-placing { outline: 2px solid var(--ink); outline-offset: 3px; }
.rv-shot { position: absolute; inset: 0; border-radius: inherit; }
.rv-shot img { display: block; width: 100%; height: 100%; border-radius: inherit; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.rv-shot.is-broken img { visibility: hidden; }
.rv-broken { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; font-size: 13px; color: var(--secondary); cursor: default; }
.rv-broken[hidden] { display: none; }
.rv-missing { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 16px; border: 1px dashed rgba(29, 29, 31, 0.16); border-radius: 10px; text-align: center; font-size: 13px; color: var(--secondary); }
.rv-missing strong { font-weight: 560; color: var(--ink); }
.rv-pins { position: absolute; inset: 0; pointer-events: none; }
.rv-pin {
  position: absolute; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: auto; cursor: pointer; transition: transform 0.12s;
}
button.rv-pin:hover, button.rv-pin:focus-visible { z-index: 4; transform: translate(-50%, -50%) scale(1.1); }
.rv-pin.is-draft { box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(29, 29, 31, 0.16), 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; }
.rv-pin.is-placing { box-shadow: 0 0 0 2px #fff, 0 0 0 9px rgba(29, 29, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3); }
.rv-pin.is-hot { animation: rv-pulse 0.6s ease-out 3; }
@keyframes rv-pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(29, 29, 31, 0.5); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 16px rgba(29, 29, 31, 0); } }
.rv-pin-tip {
  position: absolute; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 10px;
  transform: translateX(-16px); background: var(--ink); color: #fff; font: 450 12.5px/1.4 var(--font); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.rv-pin[data-tip~="left"] .rv-pin-tip { left: auto; right: 50%; transform: translateX(16px); }
.rv-pin[data-tip~="below"] .rv-pin-tip { bottom: auto; top: calc(100% + 9px); }
.rv-pin:hover .rv-pin-tip, .rv-pin:focus-visible .rv-pin-tip { opacity: 1; }
.rv-panel.has-editor .rv-pin-tip { display: none; }
@media (hover: none) { .rv-pin-tip { display: none; } }
/* Slider: before left of the divider, after right of it. */
.rv-slide .rv-shot[data-side="before"] { clip-path: inset(-40px calc(100% - var(--split)) -40px -40px); }
.rv-slide .rv-shot[data-side="after"] { clip-path: inset(-40px -40px -40px var(--split)); }
.rv-divider { position: absolute; z-index: 3; top: -8px; bottom: -8px; left: var(--split); width: 32px; margin-left: -16px; display: grid; place-items: center; cursor: ew-resize; touch-action: none; }
.rv-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); }
.rv-grip { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0, 0, 0, 0.3); transition: transform 0.12s; }
.rv-divider:hover .rv-grip, .rv-divider.is-dragging .rv-grip { transform: scale(1.08); }
.rv .rv-divider:focus-visible { outline: none; }
.rv-divider:focus-visible .rv-grip { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.rv-tag { position: absolute; top: -22px; font: 560 11.5px/1.2 var(--font); color: var(--tertiary); pointer-events: none; }
.rv-tag-before { left: 1px; }
.rv-tag-after { right: 1px; }
.rv-caption { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 9px 2px 0; font-size: 12.5px; color: var(--tertiary); }
.rv-caption strong { font-weight: 560; color: var(--ink); }
.rv-page { font-family: var(--mono); font-size: 11.5px; }
.rv-pager { flex: none; display: flex; align-items: center; gap: 2px; }
.rv-position { min-width: 40px; font-size: 12px; color: var(--secondary); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- writing a note: a bubble on the pin, a field under the row, a dock on a phone ---------- */
.rv-editor { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1), var(--shadow-2); }
.rv-editor textarea { min-height: 32px; padding: 5px 7px; }
.rv-editor-title { display: none; padding: 0 7px; font-size: 11.5px; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-editor-foot { display: flex; align-items: center; gap: 6px; }
.rv-editor-hint { flex: 1; min-width: 0; padding-left: 7px; font-size: 11px; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-editor-delete:hover:not(:disabled) { color: var(--destructive); background: rgba(199, 0, 19, 0.06); }
.rv-editor-delete + .rv-editor-hint { padding-left: 0; }
.rv-editor .btn.small { height: 28px; padding: 0 11px; }
.rv-bubble { position: absolute; z-index: 6; width: 276px; transform: translate(18px, -16px); cursor: auto; animation: rv-appear 0.12s ease-out; }
@keyframes rv-appear { from { opacity: 0; } }
.rv-bubble.flip-x { transform: translate(calc(-100% - 18px), -16px); }
.rv-bubble.flip-y { transform: translate(18px, calc(-100% + 16px)); }
.rv-bubble.flip-x.flip-y { transform: translate(calc(-100% - 18px), calc(-100% + 16px)); }
.rv-bubble .rv-editor-cancel { display: none; }
.rv-inline { max-width: 560px; margin: 8px 0 2px; }
.rv-inline .rv-editor { box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.12), var(--shadow-1); }
.rv-data .rv-inline { margin: 0 0 10px; }
.rv-dock {
  /* The phone editor must also sit above the full comparison (z-index: 40). */
  position: absolute; z-index: 41; left: 0; right: 0; bottom: var(--rv-keyboard, 0px); padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline); background: var(--canvas); box-shadow: 0 -10px 30px rgba(29, 29, 31, 0.12);
}
.rv-dock .rv-editor { padding: 0; background: none; box-shadow: none; }
.rv-dock .rv-editor-title { display: block; padding: 0 4px; }
.rv-dock .rv-editor textarea { padding: 9px 12px; }
.rv-dock .rv-editor-hint { visibility: hidden; }

/* ---------- the notes rail ---------- */
.rv-rail { grid-area: rail; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--hairline); background: rgba(251, 250, 247, 0.6); }
.rv-rail-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px 0 16px; }
.rv-count { font-size: 12px; font-weight: 600; color: var(--secondary); font-variant-numeric: tabular-nums; }
.rv-save { margin-left: auto; font-size: 11.5px; color: var(--tertiary); }
.rv-save[data-status="Retry"], .rv-save[data-status="Conflict"] { color: var(--attention); font-weight: 600; }
/* With nothing written yet there is nothing to call saved. */
.rv-rail:not(:has(.rv-note)) .rv-save[data-status="Saved"] { visibility: hidden; }
.rv-rail-close { display: none; }
.rv-rail-alert { flex: none; display: grid; justify-items: start; gap: 8px; margin: 0 12px 10px; padding: 10px 12px; border-radius: 12px; background: #faf6ec; font-size: 12.5px; }
.rv-rail-alert[hidden] { display: none; }
.rv-rail-alert p { margin: 0; }
.rv-rail-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; }
.rv-rail-empty { margin: 2px 8px; font-size: 13px; line-height: 1.5; color: var(--tertiary); }
.rv-note { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3px 8px; padding: 8px; border-radius: 12px; transition: background 0.15s; }
.rv-note:hover, .rv-note:focus-within { background: rgba(29, 29, 31, 0.04); }
.rv-note.is-hot { animation: rv-flash 1.6s ease-out; }
.rv-note-head { grid-area: 1 / 1; min-width: 0; min-height: 24px; display: flex; align-items: center; gap: 8px; padding: 0; text-align: left; }
.rv-note-where { min-width: 0; font-size: 11.5px; color: var(--tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-note-head:hover .rv-note-where { color: var(--ink); }
.rv-note-text { grid-area: 2 / 1; margin: 0 0 0 22px; padding: 3px 6px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv textarea.rv-note-text { width: calc(100% - 22px); }
.rv-note-crop { grid-area: 2 / 2; width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1); }
.rv-note-crop[hidden] { display: none; }
.rv-note > :is(.rv-note-delete, .rv-sent) { grid-area: 1 / 2; justify-self: end; }
.rv-note-delete { width: 24px; height: 24px; opacity: 0; }
.rv-note:hover .rv-note-delete, .rv-note:focus-within .rv-note-delete { opacity: 1; }
.rv-note-delete:hover:not(:disabled) { color: var(--destructive); background: rgba(199, 0, 19, 0.06); }
@media (hover: none) { .rv-note-delete { opacity: 1; } }
.rv-sent { align-self: center; font-size: 11px; color: var(--tertiary); }
.rv-rail-foot { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--hairline); }
.rv-feedback { min-height: 40px; padding: 9px 12px; border-color: rgba(29, 29, 31, 0.1); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-1); }
.rv-feedback:focus { border-color: rgba(29, 29, 31, 0.26); }
.rv-feedback-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 3px 0; font-size: 11.5px; line-height: 1.35; color: var(--tertiary); }
.rv-key-hint { flex: none; min-width: 18px; padding: 1px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.14); font: 600 10.5px/1.4 var(--font); text-align: center; color: var(--tertiary); }
@media (hover: none) { .rv-key-hint { display: none; } }
.rv-scrim { display: none; }

/* ---------- wide: captures listed at the side of the stage ---------- */
@container review (min-width: 1360px) {
  .rv-viewer { grid-template-columns: 184px minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .rv-captures { display: grid; gap: 14px; align-content: start; max-height: calc(var(--rv-stage) + 40px); margin: -2px; padding: 2px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .rv-cap-group { display: grid; gap: 2px; }
  .rv-cap-name { margin: 0 0 3px 8px; overflow: hidden; text-overflow: ellipsis; }
  .rv-cap { width: 100%; height: auto; gap: 10px; padding: 6px 8px; }
  .rv-thumb { display: block; }
  .rv-cap-text { flex: 1; display: grid; gap: 0; }
  .rv-cap-size { display: block; }
  .rv-bar { position: static; justify-content: space-between; margin-bottom: 8px; }
  .rv-bar-title { display: block; }
}
@container review (max-width: 899px) {
  .rv { --rv-rail: 280px; --rv-pad: 20px; }
  .rv-pictures .rv-meta { display: none; }
}

/* ---------- phone: one column, notes in a drawer, the decision in a bar at the bottom ---------- */
@container review (max-width: 719px) {
  .rv {
    --rv-pad: 16px; --rv-stage: clamp(300px, calc(100dvh - 336px), 640px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "body" "confirm" "actions";
  }
  /* One row of round and status stays in place; the verdict is the first thing in the board ("Changed"). */
  .rv-head { display: flex; align-items: center; gap: 6px; padding: 8px 0 8px 16px; }
  .rv-verdict { display: none; }
  .rv-facts > .is-said { display: block; }
  .rv-chips { flex: 1; margin: 0; padding: 0 16px 0 0; -webkit-mask-image: none; mask-image: none; }
  .rv-actions { justify-items: stretch; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--hairline); background: var(--canvas); }
  .rv-actions-row { gap: 8px; }
  .rv-actions .btn { height: 38px; }
  .rv-notes-toggle { display: inline-flex; margin-right: auto; }
  .rv-readonly { margin-left: auto; }
  .rv-hint { display: none; }
  .rv-more .rv-menu { top: auto; bottom: calc(100% + 6px); }
  .rv-confirm { flex-wrap: wrap; padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--hairline); }
  .rv-confirm-actions { width: 100%; justify-content: flex-end; }
  .rv-body { padding-bottom: 40px; }
  .rv-facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rv-key { padding-top: 10px; }
  .rv-facts > .rv-key:first-child { padding-top: 0; }
  .rv-jump { align-items: flex-start; }
  .rv-jump svg { margin-top: 3px; align-self: flex-start; }
  .rv-section-head { flex-wrap: wrap; row-gap: 6px; }
  .rv-pictures .rv-meta { display: none; }
  /* Outrank the shared .ctl-button.ctl-button display rule, loaded after this sheet. */
  .rv-modes button[data-mode="side"], .rv-modes button[data-mode="slider"] { display: none; }
  .rv-captures { display: none; }
  .rv-bar { position: static; justify-content: space-between; margin-bottom: 8px; }
  .rv-bar-title { display: block; }
  .rv-stage { padding: 12px; }
  .rv-row-add { width: 32px; height: 28px; }
  .rv-editor-hint { visibility: hidden; }
  .rv-rail {
    position: absolute; z-index: 25; left: 0; right: 0; bottom: 0; max-height: min(80%, 640px); border-left: 0; border-radius: 20px 20px 0 0; background: var(--canvas);
    box-shadow: 0 -12px 48px rgba(29, 29, 31, 0.2); padding-bottom: env(safe-area-inset-bottom); transform: translateY(104%); visibility: hidden; transition: transform 0.22s ease, visibility 0s 0.22s;
  }
  .rv-rail.open { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .rv-rail-head { min-height: 52px; padding: 4px 8px 0 18px; }
  .rv-rail-close { display: grid; width: 36px; height: 36px; }
  .rv-rail-list { padding: 0 10px 12px; }
  .rv-scrim { display: block; position: absolute; z-index: 24; inset: 0; background: rgba(29, 29, 31, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .rv-scrim.open { opacity: 1; pointer-events: auto; }
}
/* Touch keyboards zoom the page for small type; keep fields at 16px there. */
@media (hover: none) and (pointer: coarse) { }
@media (prefers-reduced-motion: reduce) {
  .rv-stage .rv-panel, .rv-bubble, .rv-menu, .rv-pin.is-hot, .rv-row.is-hot, .rv-note.is-hot { animation: none; }
  .rv-rail, .rv-scrim, .rv-pin { transition: none; }
}

/* Outputs lead the room; attached renders fit the width and keep their own tall scroll. */
.rv-changed.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-summary-more { margin-top: 6px; }
.rv-check-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 1.6; }
.rv-stage.is-attachment { display: block; height: auto; max-height: 80vh; overflow: auto; }
.rv-stage.is-attachment .rv-panel { display: block; }
.rv-stage.is-attachment .rv-fit { container-type: normal; display: flex; justify-content: center; align-items: start; }
.rv-stage.is-attachment .rv-frame { flex: none; width: min(100%, calc(var(--w) * 1px)); }
.rv-picture-description { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.rv-picture-description.is-expanded { display: block; }
.rv-document { padding: 16px; border: 1px solid var(--hairline); border-radius: 8px; margin-top: 12px; }
.rv-document > summary { display: block; align-items: center; gap: 8px; cursor: pointer; }
.rv-document-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; }
.rv-document-content { max-height: 70vh; overflow: auto; margin: 16px 0; }
.rv-document:not([open]) > :is(.rv-document-content, button, .rv-row-slot) { display: none; }
.rv-document[open] .rv-document-preview { display: none; }
.rv-document-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.rv-document-title { display: flex; align-items: center; gap: 8px; }

.rv-stage.is-attachment .rv-frame.is-loading { width: 100%; min-height: 200px; aspect-ratio: auto; }
.rv :is(.rv-modes, .rv-summary-more, .rv-group > button, .rv-passed > button)[hidden] { display: none; }

/* Outputs are a sheet; the notes column exists only while it is open. */
.rv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head actions" "confirm confirm" "body body"; }
.rv.has-notes { grid-template-columns: minmax(0, 1fr) var(--rv-rail); grid-template-areas: "head actions" "confirm confirm" "body rail"; }
.rv-rail { display: none; background: var(--canvas); }
.rv.has-notes .rv-rail.open { display: flex; }
.rv-rail-close { display: grid; }
.rv-notes-toggle { display: inline-flex; }
.rv-body { max-width: none; overflow-wrap: normal; }
.rv-pictures { padding-top: 16px; }
.rv-picture-sheet { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1px; align-items: start; column-gap: 24px; }
.rv-picture-tile { min-width: 0; width: 340px; max-width: 100%; }
.rv-picture-tile[data-shape="wide"], .rv-picture-sheet[data-layout="single"] .rv-picture-tile { width: 100%; }
.rv-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-tile-title { flex: 1; min-width: 0; }
.rv-tile-meta { display: flex; gap: 8px; }
.rv-tile-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.rv-tile-tools { display: flex; align-items: center; justify-content: flex-end; flex: none; gap: 8px; margin-left: auto; min-height: 28px; }
.rv-tile-tools .rv-jump.ctl-button { font-size: 11px; margin: 0; padding: 4px 0; white-space: nowrap; color: var(--tertiary); }
.rv-tile-switch { display: inline-flex; align-items: center; gap: 4px; }
.rv-tile-tools .rv-tile-switch button[aria-pressed="true"] { color: var(--ink); }
.rv-tile-tools:empty { display: none; }
.rv-tile-stage { position: relative; width: min(100%, calc(var(--natural-width) + 24px)); padding: 12px; border-radius: 16px; background: var(--raised); }
.rv-tile-crop { position: relative; }
.rv-picture-tile .rv-frame { width: min(100%, var(--natural-width)); aspect-ratio: var(--w) / var(--h); box-shadow: 0 0 0 1px var(--hairline); }
.rv-picture-tile.is-tall:not(.is-expanded) .rv-tile-crop { max-height: min(60vh, 720px); overflow: clip; }
.rv-picture-tile.is-tall:not(.is-expanded) .rv-tile-crop::after { content: ""; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; height: 48px; pointer-events: none; background: linear-gradient(transparent, var(--raised)); }
.rv-tile-tools .rv-tile-full.ctl-button { --ctl-height: 28px; min-width: 28px; color: var(--tertiary); }
.rv-notes-below { position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.rv-notes-below[hidden] { display: none; }
.rv-tile-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin: 8px 2px 0; font-size: 12.5px; color: var(--secondary); }
.rv-tile-caption.is-expanded { display: block; }
.rv-expand-height[hidden] { display: none; }
.rv-pin-detail { position: absolute; z-index: 5; width: min(240px, 75%); padding: 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-2); transform: translate(10px, 16px); font-size: 13px; }
.rv-pin-detail p { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-pin-detail button + button { margin-left: 16px; }
.rv-document > summary { display: block !important; position: relative; padding-right: 24px; }
.rv-document-title { display: flex; justify-content: space-between; }
.rv-document-title svg { position: absolute; top: 3px; right: 0; }
.rv-document[open] .rv-document-title svg { transform: rotate(90deg); }
.rv-document > summary .rv-row-proves { margin-top: 4px; }
.rv-document-preview { margin-bottom: 0; }
.rv-document-block { position: relative; cursor: text; }
.rv-document-block > .rv-row-side { display: inline-flex; float: right; margin-left: 8px; }
.rv-document-block > .rv-row-side .rv-row-add { display: none; }
.rv-document-block:hover { background: var(--fill); }
.rv-design-look { margin-top: 12px; font-size: 12px; }
.rv-not-included .rv-row { display: block; width: 100%; }
.rv-not-included .rv-row-main { width: 100%; min-width: 0; }
.rv-not-included strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-not-included .rv-row-proves { white-space: normal; overflow-wrap: break-word; word-break: normal; }
.rv-send { min-width: 90px; }
.rv-section[data-section="send"] { padding-top: 28px; }
.rv-section[data-section="send"] > .rv-label { margin-bottom: 12px; }
.rv-feedback { min-height: 96px; resize: none; width: 100%; box-shadow: none; font-size: 15px; line-height: 1.5; }
.rv-send-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rv-send-actions .btn { min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.rv-send-actions .rv-send-main.ctl-button { flex: 1 1 440px; max-width: 440px; }
.rv-send-hint { margin-top: 10px; font-size: 12px; }
.rv-full-view { position: absolute; z-index: 40; inset: 0; padding: 20px; overflow: auto; background: var(--canvas); }
.rv-full-close { margin-bottom: 12px; }
.rv-stage[data-mode="diff"] .rv-divider, .rv-stage[data-mode="diff"] .rv-tag { display: none; }
.rv-stage[data-mode="diff"] .rv-shot { clip-path: none; }
.rv-stage[data-mode="diff"] .rv-shot[data-side="after"] { mix-blend-mode: difference; }
@container review (max-width: 699px) {
  .rv, .rv.has-notes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "head" "body" "confirm" "actions"; }
  .rv-head { display: grid; padding: 12px 16px; }
  .rv-verdict { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rv-picture-tile, .rv-picture-tile[data-shape="wide"] { width: 100%; }
  .rv-send-actions { flex-direction: column; align-items: stretch; }
  .rv-send-actions .btn.ctl-button { flex: none; width: 100%; max-width: none; }
  .rv-bubble { width: min(276px, calc(100cqw - 40px)); transform: translate(4px, 12px); }
  .rv-bubble.flip-x { transform: translate(4px, 12px); }
  .rv-bubble.flip-y, .rv-bubble.flip-x.flip-y { transform: translate(4px, calc(-100% + 16px)); }
}

.rv-send-actions .btn.ctl-button { --ctl-height: 52px; min-height: 52px; padding-inline: 24px; font-size: 16px; font-weight: 600; }
@container review (min-width: 700px) { .rv-rail { position: static; transform: none; visibility: visible; max-height: none; border-radius: 0; box-shadow: none; } .rv-scrim { display: none; } }
.rv textarea.rv-feedback.ctl-field { min-height: 96px; font-size: 16px; line-height: 1.5; }
.rv-document > summary.ctl-button { height: auto; min-height: 0; white-space: normal; text-align: left; width: 100%; justify-content: start; }
.rv-document-block > td:last-child > .rv-row-side .rv-row-add { display: none; }
@container review (max-width: 699px) {
  .rv-actions { position: relative; z-index: 26; }
  .rv-rail { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .rv-full-view .rv-modes { flex-wrap: wrap; }
  .rv-full-view .rv-modes button[data-mode="side"], .rv-full-view .rv-modes button[data-mode="slider"] { display: inline-flex; }
}

.rv-picture-tile .rv-meta { display: inline; }