/* ---------- Figure 2: static resolution example (below the figure and its caption, inside the card) ----------
 * Three frames drawn to scale: 480p is half as wide and tall as 960p. Each frame is a real video frame (the palace scene poster)
 * under a grid with one line per token border. If the image file is missing, the frame stays a plain --ground box with the grid. */
.resfig { margin-top: var(--sp-5); padding-top: var(--sp-3); }
.resfig-h { margin: 0 0 var(--sp-3); text-align: center; font: 400 20px/1.3 var(--serif); color: var(--ink); }
/* Columns 1 : 2 : 2, so the 960p frames are exactly twice the width of the 480p frame. Frames sit on the bottom of the first row, text starts on one line. */
.resrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); grid-template-rows: auto auto; column-gap: var(--sp-3); row-gap: var(--sp-2); }
.respanel { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.resframe { align-self: end; position: relative; width: 100%; aspect-ratio: 1664 / 960; background: var(--ground) url("../media/t2v/palace/pixvid.jpg") center / cover no-repeat; outline: 1px solid var(--muted); outline-offset: -1px; }
.respanel[data-model="pixvid"] .resframe { outline: 2px solid var(--accent); outline-offset: -2px; }
.resgrid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.resgrid path { fill: none; stroke: var(--link-line); stroke-width: 1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; }
.restoken { fill: var(--accent); stroke: var(--ground); stroke-width: 1; vector-effect: non-scaling-stroke; }
.restext { min-width: 0; }
.restext p { margin: 0; }
.resname { margin-top: 2px; font: 400 20px/1.25 var(--serif); }
.resdim { display: inline-block; margin-left: 4px; font: 400 12px/1.4 var(--mono); color: var(--faint); white-space: nowrap; }
.resnum { margin-top: 4px; font: 500 14px/1.4 var(--mono); }
.restok { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.resswatch { display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: var(--accent); }
.rescost { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.respanel[data-model="pixvid"] .rescost { font-weight: 600; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .resrow { display: flex; flex-direction: column; gap: var(--sp-3); }
  .respanel { display: block; }
  .respanel .resframe { margin-bottom: var(--sp-1); }
  .respanel[data-model="base"] .resframe { width: 50%; }
  .resname { font-size: 20px; }
}