/* Round variant A, "compact" (prefix rva-). Halftime tokens and parts only.
 * One package per joke: a navy feed (scorebug row, title, iso crop + scene line, two disclosures) over the white
 * "call" box, which turns into the ruling, the key and the one-line field once the call is graded. */

.rva { display: flex; flex-direction: column; margin-block: 2.25rem 2.5rem; }
.rva-slot, .rva-joke { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ scorebug row: the six jokes + Correct */
.rva-bug { padding-block: .85rem .75rem; }
.rva-bug .hp-strip { margin-bottom: .7rem; }
.rva-bugrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: .7rem; }
.rva-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.rva-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem; min-width: 0; min-height: 52px;
  margin: 0; padding: .35rem 0 .45rem; border: 0; cursor: pointer; background: var(--bug-2); color: var(--bug-dim);
  box-shadow: inset 0 -3px 0 transparent; -webkit-tap-highlight-color: transparent;
}
.rva-cell.is-current { background: var(--bug-3); color: var(--bug-ink); box-shadow: inset 0 -3px 0 var(--signal); }
.rva-cell:focus-visible { outline: 3px solid var(--signal); outline-offset: -1px; }
@media (hover: hover) { .rva-cell:not(.is-current):hover { color: var(--bug-ink); background: var(--bug-3); } }
.rva-cell-n { font: 800 .98rem/1 var(--f-cond); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.rva-cell.is-current .rva-cell-n { color: var(--signal); }
.rva-cell .hf-sq { width: .95rem; height: .95rem; }
.rva-cell .hf-sq.is-open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--held); }
.rva-score { display: grid; justify-items: end; align-content: center; gap: .22rem; min-width: 3.5rem; }
.rva-score-k { font: 700 .62rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bug-dim); }
.rva-score-v { font: 800 1rem/1 var(--f-cond); color: var(--bug-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rva-score-v strong { font-size: 1.75rem; font-weight: 800; color: var(--bug-ink); }
.rva-score-p { min-height: .62rem; font: 600 .64rem/1 var(--f-ui); letter-spacing: .04em; color: var(--v-partial); white-space: nowrap; }

/* ------------------------------------------------------------------ the feed: title, iso crop, scene line */
.rva-feed { padding-block: .85rem .95rem; border-top: 1px solid var(--bug-3); }
.rva-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .9rem; margin-bottom: .75rem; }
.rva-title { display: flex; align-items: baseline; gap: .5rem; margin: 0; min-width: 0; font: 800 1.6rem/1 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.rva-title:focus { outline: none; }
.rva-title:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.rva-title-n { color: var(--signal); font-variant-numeric: tabular-nums; }
.rva-head-meta { font: 600 .72rem/1.3 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--bug-dim); font-variant-numeric: tabular-nums; }

.rva-media { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "thumb scene" "thumb tgs"; align-items: start; column-gap: .9rem; }
.rva-media.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "scene" "tgs"; }
.rva-media.is-stacked { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "thumb" "scene" "tgs"; row-gap: .75rem; }
.rva-thumb { grid-area: thumb; align-self: start; position: relative; display: flex; justify-content: center; margin: 0; padding: 0; border: 0; background: var(--clock); line-height: 0; }
.rva-thumb:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.rva-thumb.is-crop .rva-crop { display: block; width: auto; height: 7.5rem; max-width: 7rem; object-fit: contain; }
.rva-thumb.is-spine .rva-crop { display: block; width: 100%; height: auto; max-height: 4.5rem; object-fit: contain; }
.rva-thumb.is-frame img { width: 8.25rem; height: auto; }
.rva-thumb-k { position: absolute; left: 0; bottom: 0; font-size: .62rem; line-height: 1; }

.rva-scene { grid-area: scene; position: relative; min-width: 0; }
.rva-at { margin: 0 0 .3rem; font: 600 .7rem/1.3 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--bug-dim); }
.rva-ev { margin: 0; font: 600 1.08rem/1.5 var(--f-ui); color: var(--bug-ink); text-wrap: pretty; }
.rva-evline { position: relative; }

.rva-tgs { grid-area: tgs; display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: .15rem 0 -.7rem; min-width: 0; }
.rva-media.is-stacked .rva-tgs { margin-top: -.6rem; }
.rva-tg {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: 700 .86rem/1 var(--f-ui); color: var(--signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.rva-tg[aria-expanded="true"] { text-decoration-style: dotted; }
.rva-still { margin: .7rem 0 .9rem; }
.rva-shot { line-height: 0; }
.rva-prompt { margin-top: .85rem; padding: .8rem .9rem .85rem; background: var(--bug-2); border-left: 3px solid var(--bug-3); }
.rva-prompt-p { margin: 0 0 .65em; font: 400 .93rem/1.5 var(--f-ui); color: var(--bug-ink); }
.rva-prompt .hp-src { margin-top: .2rem; }

/* ------------------------------------------------------------------ the call: box, then ruling + key + field */
.rva-call { padding-block: .95rem 1.05rem; }
.rva-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .55rem; font: 800 1rem/1.2 var(--f-cond); letter-spacing: .09em; text-transform: uppercase; }
.rva-q span { font: 600 .95rem/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.rva-ta { min-height: 6.5rem; }
.rva-actions { margin-top: .7rem; }
.rva-fine { margin-top: .3rem; }
.rva-review { flex-wrap: wrap; }
.rva-review .hp-link { margin-left: auto; color: var(--ink-2); }

.rva-yours { margin-bottom: .7rem; padding-block: .5rem .55rem; }
.rva-yours p { font-size: .94rem; }
.rva-skipped { margin: 0 0 .75rem; font: 500 .98rem/1.4 var(--f-ui); }
.rva-skipped:focus { outline: none; }
.rva-ruling { margin-bottom: .7rem; }
.rva-ruling .hp-ruling-bar { padding-block: .5rem .45rem; }
.rva-ruling .hp-ruling-word { font-size: 2.2rem; }
.rva-ruling .hp-ruling-word:focus { outline: none; }
.rva-fb { margin: .6rem 0 0; font-size: 1rem; text-wrap: pretty; }

/* the key: the referent lands, then the why */
.rva-key { margin-bottom: .6rem; padding: .75rem .9rem .85rem; }
.rva-key:focus { outline: none; }
.rva-key:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.rva-key-dl { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.rva-key-dl dt { margin: .65rem 0 .3rem; font: 800 .74rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.rva-key-dl dt:first-child { margin-top: 0; }
.rva-key-dl dd { margin: 0; min-width: 0; }
.rva-ref { display: block; font: 800 1.28rem/1.08 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.rva-ref.is-2nd { margin-top: .3rem; font-size: 1.05rem; color: var(--bug-dim); }
.rva-k-why > span { display: block; font: 500 .98rem/1.45 var(--f-ui); text-wrap: pretty; }
.rva-k-why > .rva-alt { margin-top: .35rem; font-size: .9rem; color: var(--bug-dim); }
.rva-alt strong { color: var(--bug-ink); }
.rva-key.is-fresh .rva-k-ref { animation: hp-wipe .45s var(--ease) .3s both; }
.rva-key.is-fresh .rva-k-why { animation: hp-fade .35s var(--ease) .8s both; }
.rva-rubric { margin-top: .55rem; border-top: 1px solid var(--bug-3); }
.rva-rubric summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font: 700 .84rem/1 var(--f-ui); color: var(--signal); text-decoration: underline; text-underline-offset: .2em; }
.rva-rubric summary::-webkit-details-marker { display: none; }
.rva-rubric summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.rva-rubric p { margin: 0; font: 400 .88rem/1.45 var(--f-ui); color: var(--bug-dim); }

/* the field, folded to one line */
.rva-field {
  display: flex; align-items: center; gap: .55rem; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: .45rem .65rem;
  border: 0; cursor: pointer; background: var(--bug); color: var(--bug-ink); font: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
.rva-field:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (hover: hover) { .rva-field:hover { background: var(--bug-2); } }
.rva-field-sqs { display: flex; flex: none; gap: 2px; }
.rva-field-sqs .hf-sq { width: .64rem; height: .64rem; }
.rva-field-sqs .hf-sq.is-wrong { box-shadow: inset 0 0 0 1.5px var(--v-wrong); }
.rva-field-t { flex: 1 1 auto; min-width: 0; font: 600 .88rem/1.25 var(--f-ui); }
.rva-field-t strong { font: 800 1.08rem/1 var(--f-cond); letter-spacing: .03em; }
.rva-field-ico { display: inline-flex; flex: none; color: var(--signal); transition: transform .2s var(--ease); }
.rva-field[aria-expanded="true"] .rva-field-ico { transform: rotate(180deg); }
.rva-key.is-fresh ~ .rva-field { animation: hp-fade .35s var(--ease) 1.1s both; }
.rva-roster { padding: .1rem .8rem .85rem; background: var(--bug); color: var(--bug-ink); border-top: 1px solid var(--bug-3); }
.rva-roster .hp-roster { margin-bottom: .6rem; }
/* QA: the roster is navy inside the white call box, so its source line takes the navy-panel ink (was ink-2 on navy, 2.3:1) */
.rva-roster .hp-src { color: var(--bug-dim); }
.rva-roster .hp-cell { font-size: .7rem; }

/* up next, or the wrap */
.rva-next { display: flex; width: 100%; margin-top: .75rem; clip-path: none; padding-right: 1.15rem; }
.rva-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem;
  margin-top: .75rem; padding: .7rem .85rem; background: var(--paper-2); border-left: 3px solid var(--signal);
}
.rva-wrap-t { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.rva-wrap-k { font: 700 .66rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rva-wrap-v { font: 800 1.02rem/1 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.rva-wrap-v strong { font-size: 2.1rem; font-weight: 800; }
.rva-wrap-p { font: 600 .74rem/1.2 var(--f-ui); color: var(--ink-2); }
.rva-wrap-go { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font: 700 .95rem/1.2 var(--f-ui); color: var(--link); }
.rva-src { margin-top: .65rem; }

/* ------------------------------------------------------------------ phone and desktop */
@media (max-width: 719.98px) {
  .rva .hp-panel, .rva .rva-call { padding-left: var(--gl); padding-right: var(--gr); }
  /* Grade, Grade it myself and Skip share one row when they fit */
  .rva-call .rva-actions .jb-submit { flex: 1 0 auto; }
}
@media (min-width: 720px) {
  .rva-title { font-size: 2.05rem; }
  .rva-media { column-gap: 1.25rem; }
  .rva-thumb.is-crop .rva-crop { height: 8.5rem; max-width: 8rem; }
  .rva-thumb.is-frame img { width: 12rem; }
  .rva-thumb.is-spine { justify-self: start; max-width: 100%; }
  .rva-thumb.is-spine .rva-crop { width: auto; height: 4.25rem; max-width: 100%; max-height: none; }
  .rva-ev { font-size: 1.2rem; }
  .rva-ta { min-height: 6rem; }
  .rva-key-dl { grid-template-columns: 7.25rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem; row-gap: .7rem; }
  .rva-key-dl dt, .rva-key-dl dt:first-child { margin: 0; }
  .rva-ruling .hp-ruling-word { font-size: 2.6rem; }
  .rva-next { width: max-content; margin-left: auto; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-right: 1.5rem; }
}