/* All Feedback on one answer (B.20, js/details.js). */

/* All Feedback: one scroll of sections, the same in the sheet and on its page (#attempt/<id>), where it sits in a white
   card like the sheet. Sections are --panel-gap apart (36px, 24px at 1068px and below); a heading sits 12px from its
   content (.block). The parts that redraw while the answer is processed (.details-part) add no box of their own. */
.details { display: grid; gap: var(--panel-gap); align-content: start; min-width: 0; container-type: inline-size; }
.details-part { display: contents; }
.details-q { display: grid; gap: 4px; }
/* The timing: the tiles, then the pause timeline with its line. On the white surface the tiles are grey, two to a
   row, and four to a row when the view is wide enough for their notes (the page on a computer). */
.details-timing { display: grid; gap: 24px; }
.details .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.details .tile { background: var(--bg); box-shadow: none; border-radius: var(--r-inner); }
@container (min-width: 720px) { .details .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
/* Model answers: the heading and the band switch, then the clip, the text, why, and the pill to read it aloud. */
.details-models { display: grid; gap: 24px; min-width: 0; }
/* The practices made from this answer: History's rows (app.css .list-row). */
.details-list { display: grid; }
.details .link .ico { width: 14px; height: 14px; }
.compare { border-collapse: collapse; font-variant-numeric: tabular-nums; justify-self: start; }
.compare th, .compare td { padding: 6px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--ink-2); font-weight: 600; }
.compare tbody th { font-weight: 600; padding-left: 0; }
.compare thead td { padding-left: 0; }
.compare thead th, .compare td { white-space: nowrap; }
/* The AI and teacher blocks (moreFeedback), also under the mock test's All Answers. */
.fb-panel { display: grid; gap: var(--panel-gap); align-content: start; min-width: 0; }