/* Review the code (src/interview/review.js). Loads after interview.css and talk.css, with drills.css for the keycap.
   The sheet is the paper: the pull request's title and what it does, the file, then the diff printed on the sheet
   itself, its rows running edge to edge like a listing, the line numbers and the +/- signs hanging in the margin.
   Light warm paper, never a dark code panel. A flagged line gets a small orange mark in the margin. After the reveal,
   each comment is an index card from the lessons (a serif title over an orange line, ruled lines) lying under its
   lines; decoys left alone get a quiet margin note. The page's theme carries through; motion stops under
   prefers-reduced-motion. */

.rv {
  --pad: 56px; --gut: 56px;
  --ic-bg: #FFFEFB; --ic-edge: rgba(29, 28, 26, .07); --ic-line: rgba(29, 28, 26, .085);
  --add: rgba(35, 136, 90, .075); --add-ink: #23885A; --del: rgba(210, 63, 42, .065); --del-ink: #C2412F;
  --flag: rgba(255, 90, 31, .075);
  max-width: 920px; margin: 0 auto; width: 100%;
}
/* Light paper in both themes. On a dark page the sheet stays a printout, a little softer than white (like the
   lessons' folders and dividers keep their light tint), so the diff never turns into a dark code panel. */
[data-theme="dark"] .rv {
  --ink: #1D1C1A; --ink-2: #5E5B55; --ink-3: #8E8A82; --rule: rgba(29, 28, 26, .11); --rule-2: rgba(29, 28, 26, .17);
  --card: #F2F0EA; --card-2: #E9E6DF; --ic-bg: #FBFAF6; --orange-ink: #C2410C; --green: #23885A; --red: #D23F2A;
  --dark: #1D1C1A; --on-dark: #FCFBF8;
  color: var(--ink); color-scheme: light;
}
.rv .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- the sheet */
.rv-sheet { padding: 44px var(--pad) 40px; border-radius: 28px; background: var(--card); box-shadow: var(--lift-2); }
.rv-h { margin: 0; font: 380 30px/1.1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; text-wrap: balance; }
.rv-h i { font-style: italic; }
.rv-h:focus { outline: none; }
.rv-about { margin: 10px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.rv-how, .rv-sum { margin: 22px 0 0; max-width: 64ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.rv-sum { font-size: 17.5px; font-weight: 500; color: var(--ink); outline: none; text-wrap: pretty; animation: rv-in .32s var(--enter); }
.rv code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.rv-about code, .rv-tx code, .rv-note code, .rv-sum code { padding: .05em .32em; border: 1px solid var(--rule); border-radius: 5px; background: var(--card-2); font: 500 .86em/1.4 var(--mono); overflow-wrap: anywhere; }

/* The file: its path on a hairline, like the head of a printout. */
.rv-file { display: flex; align-items: baseline; margin: 26px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 10px var(--gut); border-bottom: 1px solid var(--rule-2); }
.rv-file-n { font: 500 13.5px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the diff, edge to edge */
.rv-diff { margin: 0 calc(var(--pad) * -1); padding: 8px 0 10px; border-bottom: 1px solid var(--rule-2); font: 400 13.5px/1.7 var(--mono); }
.rv-ln { position: relative; display: flex; align-items: flex-start; width: 100%; min-height: 23px; margin: 0; padding: 0 var(--pad) 0 var(--gut); border: 0; border-radius: 0;
  background: none; color: var(--ink); font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
button.rv-ln { cursor: pointer; transition: background-color .16s var(--ease); }
.rv-ln.is-add { background: var(--add); }
.rv-ln.is-del { background: var(--del); }
.rv-ln.is-del .rv-c { color: var(--ink-2); }
button.rv-ln:hover { background-image: linear-gradient(rgba(29, 28, 26, .045), rgba(29, 28, 26, .045)); }
button.rv-ln:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
button.rv-ln[aria-pressed="true"] { background-image: linear-gradient(var(--flag), var(--flag)); }

/* The margin: a mark, the line number, the sign. */
.rv-g { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gut); display: grid; grid-template-columns: 14px minmax(0, 1fr) 14px; align-items: start; padding: 0 2px 0 12px;
  border-right: 1px solid var(--rule); color: var(--ink-3); font: 400 12px/23px var(--mono); font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }
.rv-no { text-align: right; }
.rv-sg { text-align: center; font-weight: 600; }
.is-add .rv-sg { color: var(--add-ink); }
.is-del .rv-sg { color: var(--del-ink); }
.rv-mk { display: grid; place-items: center; width: 12px; height: 23px; font-style: normal; }
.rv-mk svg { width: 12px; height: 12px; }
button.rv-ln[aria-pressed="true"] .rv-mk::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); animation: rv-pop .2s var(--enter); }

/* The code: wraps on narrow screens, continuation lines hang two characters in from the line's own indent. */
.rv-c { display: block; flex: 1; min-width: 0; padding: 0 0 0 calc(var(--in, 0) * 1ch + 2ch + 12px); text-indent: -2ch; white-space: pre-wrap; overflow-wrap: anywhere;
  background: none; border: 0; border-radius: 0; font: inherit; color: inherit; }
/* Blank rows are shorter, with the number set to their height. */
.rv-ln.is-blank { min-height: 16px; }
.rv-ln.is-blank .rv-c, .rv-ln.is-blank .rv-g { line-height: 16px; }
.rv-ln.is-blank .rv-g { font-size: 10.5px; }
.rv-ln.is-blank .rv-mk { height: 16px; }

/* ---------------------------------------------------------------- after the reveal */
.rv.is-open .rv-ln.is-caught .rv-mk { color: var(--green); }
.rv.is-open .rv-ln.is-missed .rv-mk { color: var(--red); }
.rv.is-open .rv-ln.is-fine .rv-mk { color: var(--ink-3); }
.rv.is-open .rv-ln.is-caught, .rv.is-open .rv-ln.is-missed { box-shadow: inset 3px 0 0 var(--st); }
.rv.is-open .rv-ln.is-caught { --st: var(--green); }
.rv.is-open .rv-ln.is-missed { --st: var(--red); }
.rv.is-open .rv-ln.was-flagged:not(.is-caught):not(.is-missed) { background-image: linear-gradient(var(--flag), var(--flag)); }

/* A comment: an index card under its lines, from the code's edge to the sheet's. */
.rv-th { padding: 12px var(--pad) 18px calc(var(--gut) + 12px); animation: rv-in .32s var(--enter); }
.rv-card { max-width: 640px; padding: 14px 22px 14px; border-radius: 4px; background: var(--ic-bg); box-shadow: 0 0 0 1px var(--ic-edge), var(--lift-2); font-family: var(--sans); }
.rv-st { display: flex; align-items: center; gap: 7px; margin: 0; font: 600 13.5px/1.4 var(--sans); }
.rv-st svg { flex: none; width: 13px; height: 13px; }
.is-caught .rv-st { color: var(--green); }
.is-missed .rv-st { color: var(--red); }
.is-fine .rv-st { color: var(--ink-2); }
.rv-tt { margin: 4px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--orange); font: 400 21px/1.3 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; color: var(--ink); }
.rv-tx { margin: 0; font-size: 15.5px; line-height: 28px; color: var(--ink); background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--ic-line) 27px 28px); text-wrap: pretty; }
.rv-fk { margin: 10px 0 0; font: 700 13.5px/28px var(--sans); color: var(--orange-ink); }

/* A decoy left alone, or a plain line flagged: a quiet note in the margin of the code, no card. */
.rv-note { padding: 4px var(--pad) 10px calc(var(--gut) + 12px); animation: rv-in .32s var(--enter); }
.rv-note p { margin: 0; max-width: 62ch; padding: 1px 0 1px 12px; border-left: 2px solid var(--rule-2); font: 400 14.5px/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.rv-note-k { font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------- the foot: the one key, then what's next */
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.rv-go { min-width: 210px; min-height: 54px; padding: 0 26px; border-radius: 12px; font-size: 16px; }
.rv.is-open .rv-foot { display: block; }
.rv-learn { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.rv-learn a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.rv-learn a:hover { text-decoration-color: var(--ink-3); }
.rv-learn .iv-lock { display: inline-grid; vertical-align: -1px; margin-left: 5px; width: 12px; height: 12px; color: var(--ink-3); }
.rv-learn .iv-lock svg { width: 12px; height: 12px; }
.rv-learn + .dr-acts { margin-top: 16px; }
.rv .dr-acts { margin-top: 0; }

@keyframes rv-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes rv-pop { from { transform: scale(.4); opacity: 0; } }

/* ---------------------------------------------------------------- narrow (.rv is the container, so the sheet takes the sizes) */
@container (max-width: 700px) {
  .rv-sheet { --pad: 28px; --gut: 50px; padding: 30px var(--pad) 28px; border-radius: 22px; }
  .rv-h { font-size: 26px; }
  .rv-th { padding-left: calc(var(--gut) + 6px); }
}
@container (max-width: 520px) {
  .rv-sheet { --pad: 16px; --gut: 44px; padding: 24px var(--pad) 22px; border-radius: 20px; }
  .rv-h { font-size: 24px; }
  .rv-about { font-size: 15.5px; }
  .rv-diff { font-size: 12px; }
  .rv-ln { min-height: 21px; }
  .rv-g { grid-template-columns: 12px minmax(0, 1fr) 12px; padding-left: 6px; font-size: 11px; line-height: 21px; }
  .rv-mk { width: 10px; height: 21px; }
  .rv-c { padding-left: calc(var(--in, 0) * 1ch + 2ch + 8px); }
  .rv-th { padding: 10px 10px 14px; }
  .rv-card { padding: 12px 16px 12px; }
  .rv-tt { font-size: 19px; }
  .rv-tx { font-size: 15px; }
  .rv-note { padding: 4px 12px 10px calc(var(--gut) + 8px); }
  .rv-sum { font-size: 16.5px; }
  /* The key stays in reach while the diff scrolls, above the floating tab bar. */
  .rv:not(.is-open) .rv-foot { position: sticky; bottom: 10px; z-index: 3; margin: 18px -8px -8px; padding: 8px; border-radius: 18px;
    background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .rv-go { flex: 1; min-height: 52px; }
}
@media (max-width: 900px) {
  .st-shell .rv:not(.is-open) .rv-foot { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-sum, .rv-th, .rv-note, button.rv-ln[aria-pressed="true"] .rv-mk::before { animation: none; }
  button.rv-ln { transition: none; }
}