/* Review: the numbered sheet, one piece big, side by side, shares and rounds. The page is the only
   scroll. The dock holds what a thumb reaches for, so the island and tips step aside here. */
.lab[data-center=rounds] { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
.lab[data-center=rounds] .stage, .lab[data-center=rounds] #sheet { display: none; }
.lab[data-center=rounds] .lab-island, .lab[data-center=rounds] .switch { visibility: hidden; }
.lab[data-center=rounds] .tip-button { display: none; }

.rv { max-width: 1320px; margin: 0 auto; font-size: 13px; line-height: 20px; color: var(--ink); }
.rv-head { display: grid; gap: 4px; max-width: 640px; padding: 4px 0 12px; }
.rv-round-name { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
.rv-round-name b { font-weight: 600; color: var(--ink); }
.rv-question { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.rv-line { font-size: 13px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; }
.rv-label { font-size: 12px; line-height: 16px; color: var(--muted); }
.rv-start { display: grid; gap: 8px; max-width: 480px; padding: 12px 0; }
.rv-start .button, .rv-next .button { justify-self: start; min-height: 40px; }

/* A field that grows. The text behind it sets the height, so nothing is ever cut or scrolled. */
.rv-grow { display: grid; min-width: 0; }
.rv-grow::after { content: attr(data-value) " "; visibility: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-grow::after, .rv-grow textarea { grid-area: 1 / 1; width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; line-height: 20px; box-sizing: border-box; }
.rv-grow textarea { display: block; background: var(--card); color: var(--ink); resize: none; overflow: hidden; overflow-wrap: anywhere; }
.rv-head .rv-grow::after, .rv-head .rv-grow textarea { padding: 7px 10px; font-size: 15px; line-height: 22px; }

/* The sheet. */
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px 10px; }
.rv-tile { min-width: 0; }
.rv-art { display: block; width: 100%; padding: 0; aspect-ratio: 1; border-radius: 3px; background: var(--paper); overflow: hidden; box-shadow: 0 1px 2px rgb(var(--sh) / .1), 0 4px 12px rgb(var(--sh) / .08); }
.rv-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rv-grid[data-frame=portrait] .rv-art { aspect-ratio: 2 / 3; }
.rv-grid[data-frame=landscape] { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.rv-grid[data-frame=landscape] .rv-art { aspect-ratio: 3 / 2; }
.rv-grid[data-frame=banner] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rv-grid[data-frame=banner] .rv-art { aspect-ratio: 3; }
.rv-grid[data-frame=mixed] .rv-art { display: grid; place-items: center; background: none; box-shadow: none; overflow: visible; }
.rv-grid[data-frame=mixed] .rv-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 1px 2px rgb(var(--sh) / .1), 0 4px 12px rgb(var(--sh) / .08); }
.rv-tile[data-mark=keep] .rv-art { outline: 1.5px solid var(--ink); outline-offset: 2px; }
/* A cut piece goes quiet on the sheet. Opened or side by side it draws at full strength, to be judged fairly. */
.rv-tile[data-mark=cut] .rv-art { box-shadow: none; }
.rv-tile[data-mark=cut] img { opacity: .36; }
.rv-tile[data-mark=cut] .rv-id { color: var(--muted); }
.rv-row { display: flex; align-items: center; gap: 2px; min-height: 36px; margin-top: 4px; }
.rv-id { position: relative; flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: .02em; }
.rv-tile[data-note=true] .rv-id::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: var(--ink); vertical-align: 2px; }
.rv-mark { flex: none; min-width: 40px; min-height: 36px; padding: 0 4px; border-radius: 8px; font-size: 12px; color: var(--muted); transition: background-color .16s var(--ease); }
@media (hover: hover) { .rv-mark:hover { background: var(--hover); } }
.rv-mark[aria-pressed=true] { background: var(--selected); color: var(--ink); font-weight: 600; }
.rv-flag, .rv-same { font-size: 12px; line-height: 16px; color: var(--muted); }
.rv-last { min-height: 16px; font-size: 12px; line-height: 16px; color: var(--muted); }

/* A third view in the switch, so the row above the sheet stays on one line on a phone. */
@media (max-width: 767px) {
  .lab[data-lesson=off] .lab-top { gap: 6px; }
  .lab[data-lesson=off] .lab-view button { padding: 0 6px; }
  .lab[data-center=rounds] .lab-progress { justify-items: start; }
  .lab[data-center=rounds] #lesson-button { white-space: nowrap; }
}

/* The dock. */
.rv-dock { position: fixed; z-index: 10; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--lifted); }
.rv-dock .mode { display: grid; grid-auto-flow: column; grid-auto-columns: auto; }
.rv-dock .mode button { min-height: 40px; padding: 0 4px; white-space: nowrap; }
.rv-pick, .rv-walk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.rv-pick .rv-mark { min-height: 44px; border: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--ink); }
.rv-pick .rv-mark[aria-pressed=true] { background: var(--selected); }
.rv-walk .button { min-height: 44px; min-width: 0; }

/* One piece. */
.rv-piece { display: grid; gap: 12px; outline: none; }
/* --r is the piece's width over its height. The box is that shape, inside the room it has. */
.rv-big { --r: 1; --room: calc(100svh - var(--lab-top, 57px) - var(--top-h, 44px) - 150px); width: min(100%, calc(var(--room) * var(--r))); aspect-ratio: var(--r); margin: 0 auto; background: var(--paper); border-radius: 3px; overflow: hidden; box-shadow: var(--lifted); }
.rv-big img { display: block; width: 100%; height: 100%; }
.rv-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rv-title { display: flex; align-items: baseline; gap: 10px; }
.rv-title b { font-size: 20px; line-height: 26px; font-weight: 500; }
.rv-title span { font-size: 12px; color: var(--muted); }
.rv-ref { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.rv-said { color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Side by side. */
.rv-compare { display: grid; gap: 4px; max-width: 320px; }
.rv-compare .menu-button { height: 40px; font-size: 13px; }
.rv-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 20px; }
.rv-pair { min-width: 0; }
.rv-pair .rv-row { gap: 8px; min-height: 24px; margin: 0 0 4px; }
.rv-pair .rv-id { flex: none; }
.rv-pair .rv-same { margin-left: auto; }
.rv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

/* Shares: a plain table. */
.rv-table { width: 100%; max-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rv-table th, .rv-table td { padding: 6px 0 6px 10px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 400; text-align: right; vertical-align: top; white-space: nowrap; }
.rv-table thead th { font-size: 12px; line-height: 16px; color: var(--muted); }
.rv-table th[scope=row], .rv-table .rv-group th { padding-left: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.rv-table .rv-group th { padding-top: 16px; font-weight: 600; }
.rv-table .rv-group span { font-size: 12px; font-weight: 400; color: var(--muted); }
.rv-tag { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Rounds. */
.rv-body { display: grid; gap: 14px; }
.rv-next, .rv-export { display: grid; gap: 6px; max-width: 480px; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-actions .button { min-height: 40px; }
.rv-text { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--code-bg); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-list { display: grid; gap: 6px; max-width: 640px; }
.rv-round { display: grid; gap: 2px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; line-height: 20px; text-align: left; overflow-wrap: anywhere; }
.rv-round:hover { background: var(--hover); }
.rv-round b { font-size: 12px; line-height: 16px; font-weight: 600; }
.rv-round[aria-current=true] { border-color: var(--ink); }
.rv-count { font-size: 12px; line-height: 16px; color: var(--muted); }

.rv-banner { position: sticky; z-index: 11; top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 8px; background: var(--surface); box-shadow: var(--float); }
.rv-banner p { flex: 1 1 220px; }
.rv-banner .button { min-height: 40px; }

/* Phone: three pieces across, every mark a 40px target, and the art as wide as the screen when open. */
@media (max-width: 767px) {
  .rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
  .rv-row { min-height: 40px; margin-top: 2px; gap: 0; }
  .rv-mark { min-height: 40px; padding: 0; }
  .rv-pairs { grid-template-columns: minmax(0, 1fr); }
  .rv-dock .mode button { padding: 0 2px; }
}
/* iOS zooms into any text field under 16px and leaves the page zoomed. */
@media (hover: none), (max-width: 767px) {
  .rv-grow::after, .rv-grow textarea, .rv-head .rv-grow::after, .rv-head .rv-grow textarea { font-size: 16px; line-height: 22px; }
}
@media (pointer: coarse) {
  .rv-mark { min-height: 40px; }
}
@media (min-width: 768px) {
  .rv-dock { left: 50%; right: auto; bottom: 14px; grid-auto-flow: column; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); }
  .rv-dock .mode button { padding: 0 10px; }
  .rv-pick, .rv-walk { min-width: 200px; }
  .rv-walk { min-width: 264px; }
  .rv-pick .rv-mark, .rv-walk .button { min-height: 40px; }
  .lab[data-center=rounds] { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .rv-piece { --big: min(calc(100svh - var(--lab-top, 57px) - var(--top-h, 44px) - 104px), 60vw, 760px); grid-template-columns: var(--big) minmax(0, 360px); justify-content: center; gap: 24px; }
  .rv-big { --room: var(--big); width: min(var(--big), calc(var(--room) * var(--r))); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-mark { transition: none; }
}