/* SAB v5.9: the student look (SAB Student Look 9b, 10a, 10b) for My mocks,
   Progress and the results after a mock. The page sets body[data-look="student"]
   while it is shown; the public site, the parent view, the exam and Review keep
   the adult look. Values follow the handoff README. */
@font-face { font-family: Lexend; src: url('/fonts/Lexend.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

/* The exam's and Review's only student touch: a bar in the subject colour along the top. */
/* Above the exam's full-window layer (10000), below its dialogs. */
.subject-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; height: 4px; background: var(--subject); pointer-events: none; }

/* Lexend throughout. Earlier rules set families with the font shorthand at many
   specificities, so the family alone is forced here; the logo is an image and
   stays Lora. */
html:has(body[data-look="student"]), body[data-look="student"] { background: #fffefb; }
body[data-look="student"] :is(.site-header, main) :is(*, *::placeholder) { font-family: Lexend, sans-serif !important; }
body[data-look="student"] main { font-size: 16px; }

/* Header: the active item is a dark pill. */
body[data-look="student"] .site-header { background: #fffefb; border-bottom: 1px solid #e3ded2; padding: 20px max(40px, calc((100% - 1200px) / 2)); }
body[data-look="student"] .site-header nav { gap: 8px; }
body[data-look="student"] .site-header nav a { font-size: 16px; font-weight: 500; color: #3d4844; padding: 9px 18px; border-radius: 999px; text-decoration: none; }
body[data-look="student"] .site-header nav a:hover { background: #f3efe8; color: #1b2a24; }
body[data-look="student"] .site-header nav a[aria-current] { background: #1b2a24; color: #fffefb; font-weight: 600; text-decoration: none; }
body[data-look="student"] .site-header nav .pill { margin-left: 12px; font-size: 15px; font-weight: 500; border: 1px solid #d6d0c4; border-radius: 999px; padding: 9px 16px; background: transparent; }

/* Header bands. */
body[data-look="student"] :is(.mocks-header-band, .student-band) { background: #f3efe8; border-bottom: 0; padding: 32px max(40px, calc((100% - 1200px) / 2)); }
body[data-look="student"] :is(.mocks-header-band, .student-band) .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #7a3550; }
body[data-look="student"] :is(.mocks-heading, .student-band) h1 { font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-top: 12px; text-wrap: balance; }
body[data-look="student"] .student-band h1 { font-size: 42px; }
body[data-look="student"] .student-band > div > p:not(.eyebrow), body[data-look="student"] .mocks-intro { font-size: 17px; color: #3d4844; margin-top: 12px; }
body[data-look="student"] .mocks-heading, body[data-look="student"] .student-band { display: flex; align-items: center; gap: 32px; }
body[data-look="student"] .student-band > div:first-child { flex: 1; min-width: 0; }
body[data-look="student"] .student-band > .mascot-says { flex: none; }
body[data-look="student"] .mocks-header-band .mocks-heading .bundle-toggle, body[data-look="student"] .student-band .bundle-toggle { align-self: flex-start; background: #e9e3d6; border-radius: 999px; }
body[data-look="student"] .bundle-toggle button { font-size: 15px; border-radius: 999px; }

/* Streak, mocks finished and best score, as white chips. */
body[data-look="student"] .mocks-counts { gap: 12px; padding: 20px 0 0; }
body[data-look="student"] .mocks-counts > div { background: #fffefb; border-radius: 14px; padding: 14px 20px; gap: 2px; }
body[data-look="student"] .mocks-counts dd { font-size: 28px; font-weight: 700; line-height: 1.25; }
body[data-look="student"] .mocks-counts dt { font-size: 14px; font-weight: 500; color: #3d4844; }
body[data-look="student"] .count-streak dd { color: #c27a12; }
body[data-look="student"] .count-best dd { color: #7a3550; }
/* The chips sit under the greeting, beside Buddy. */
body[data-look="student"] .mocks-header-band:has(.mascot-says) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
body[data-look="student"] .mocks-header-band:has(.mascot-says) .mocks-heading { display: contents; }
body[data-look="student"] .mocks-header-band:has(.mascot-says) .mocks-heading > div:first-child { grid-column: 1; }
body[data-look="student"] .mocks-header-band:has(.mascot-says) .mascot-says { grid-column: 2; grid-row: 1 / span 2; }
body[data-look="student"] .mocks-header-band:has(.mascot-says) .bundle-toggle { grid-column: 1; justify-self: start; margin-top: 16px; }
body[data-look="student"] .mocks-header-band:has(.mascot-says) .mocks-counts { grid-column: 1; }

.mascot-says { display: flex; align-items: flex-end; gap: 14px; flex: none; }
.mascot-bubble { max-width: 240px; margin: 0; padding: 16px 18px; background: #fffefb; border-radius: 18px 18px 4px 18px; font-size: 16px; line-height: 1.5; color: #1b2a24; text-wrap: pretty; }

/* Cards: 20px corners; the main card of a page is raised on a 4px bottom shadow. */
body[data-look="student"] :is(.student-card, .mock-progress-card, .start-card, .home-buddy, .test-day-card, .finished-rows, .unfinished-rows, .finished-empty, .locked-mock-list, .mock-list-row, .other-free) {
  background: #fffefb; border: 1px solid #e3ded2; border-radius: 20px; box-shadow: none;
}
body[data-look="student"] :is(.student-card.is-raised, .mocks-main > section:first-child > .mock-progress-card, .mocks-main > .start-card:first-child) { box-shadow: 0 4px 0 #e3ded2; }
body[data-look="student"] .student-card { padding: 24px 28px; display: grid; gap: 16px; align-content: start; min-width: 0; }
body[data-look="student"] .parent-side .student-card { padding: 24px; }
.student-card-head { display: flex; align-items: baseline; gap: 16px; }
.student-card-head h2 { flex: 1; font-size: 20px; font-weight: 700; white-space: nowrap; }
.student-card-head > span { font-size: 14px; font-weight: 500; color: #3d4844; white-space: nowrap; }
.student-card-head.stacked { display: grid; gap: 4px; }
.student-card-head.stacked > span { white-space: normal; font-weight: 400; }
body[data-look="student"] .mocks-main h2.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #3d4844; }

/* Buttons: a raised plum primary, quiet outlines otherwise. */
body[data-look="student"] main :is(button, .button) { border-radius: 12px; border-color: #d6d0c4; font-size: 15px; font-weight: 600; }
body[data-look="student"] main :is(button.primary, .button.primary) {
  background: #7a3550; border: 0; color: #fffefb; border-radius: 14px; padding: 14px 24px; font-size: 18px; font-weight: 600;
  box-shadow: 0 4px 0 #561f38; transition: transform .08s, box-shadow .08s;
}
body[data-look="student"] main :is(button.primary, .button.primary):hover { filter: none; background: #6d2e48; }
body[data-look="student"] main :is(button.primary, .button.primary):active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #561f38; }
body[data-look="student"] main :is(button.primary, .button.primary):disabled { background: #b89aa6; box-shadow: 0 4px 0 #9c7d8a; }
body[data-look="student"] main :is(.text-button, .text-link) { border-radius: 0; font-size: 15px; }

/* In progress: the mock, its time left, Resume, and a tile per subject. */
body[data-look="student"] .mock-progress-card { padding: 28px; gap: 24px; overflow: visible; }
body[data-look="student"] .mock-card-title { padding: 0; border: 0; gap: 20px; align-items: center; }
body[data-look="student"] .mock-save-line { font-size: 14px; font-weight: 600; color: #7a3550; }
body[data-look="student"] .mock-save-line .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
body[data-look="student"] .mock-current-detail h3 { font-size: 32px; font-weight: 700; margin-top: 6px; }
body[data-look="student"] .mock-current-detail p { font-size: 17px; color: #3d4844; margin-top: 4px; }
body[data-look="student"] .mock-time-left strong { font-size: 34px; font-weight: 600; letter-spacing: 0; }
body[data-look="student"] .mock-time-left span { font-size: 14px; color: #3d4844; }
/* Practice has no clock: its place says so quietly, not in the clock's large type. */
body[data-look="student"] .mock-time-left--none span { font-size: 16px; font-weight: 400; color: #646e69; }
body[data-look="student"] .mock-resume-actions .button.primary { padding: 16px 26px; }
body[data-look="student"] .end-link { font-size: 15px; color: #3d4844; }
.subject-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.subject-steps li { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--subject-tint); color: var(--subject-ink); }
.subject-steps li.section-current { background: var(--subject); color: #fffefb; }
.subject-steps strong { font-size: 16px; font-weight: 600; }
.subject-steps li > span { font-size: 14px; }

/* Start: the subject tiles take their subject's colours. */
body[data-look="student"] .start-card { padding: 0; }
body[data-look="student"] .start-card header h3 { font-size: 26px; font-weight: 700; }
body[data-look="student"] .start-card header .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #7a3550; }
body[data-look="student"] .start-tile { border-radius: 14px; border: 1px solid #e3ded2; background: #fffefb; }
body[data-look="student"] .start-tile[style] { background: var(--subject-tint); border-color: transparent; color: var(--subject-ink); }
body[data-look="student"] .start-tile[style].is-picked { background: var(--subject); color: #fffefb; border-color: var(--subject); }
body[data-look="student"] .start-tile.start-tile--full.is-picked { background: #1b2a24; border-color: #1b2a24; color: #fffefb; }
body[data-look="student"] .start-tile-name { font-size: 16px; font-weight: 600; }
body[data-look="student"] .start-tile small { font-size: 14px; color: inherit; opacity: .85; }
body[data-look="student"] .start-action p { font-size: 15px; }
body[data-look="student"] .start-choices legend { margin-bottom: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #1b2a24; }

/* Badges: number and letter circles, dashed until earned. */
.badge-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--badge); color: #fffefb; font-weight: 700; }
.badge-mark.is-unearned { background: transparent; border: 2px dashed #c9c2b5; color: #8a918d; }
.badge-mark--large { width: 64px; height: 64px; font-size: 22px; }
.badge-mark--large.is-long { font-size: 17px; }
.badge-mark--small { width: 52px; height: 52px; font-size: 18px; }
.badge-mark--small.is-long { font-size: 14px; }
.badge-mark--hero { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--badge) 18%, #fffefb); }
.badge-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; text-align: center; }
.badge-shelf li { display: grid; justify-items: center; gap: 8px; align-content: start; font-size: 13px; font-weight: 500; line-height: 1.3; }
.badge-shelf li.is-unearned { color: #646e69; }
.badge-shelf small { display: block; font-size: 13px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.badges-card > p { font-size: 15px; line-height: 1.5; color: #3d4844; }

/* Subject bests: the highest score in each subject, as rings. */
.subject-bests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.subject-bests li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.subject-ring { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--subject) 0 var(--ring), var(--subject-tint) 0); }
.subject-ring > span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fffefb; font-size: 13px; font-weight: 600; }
.subject-best-name { display: grid; font-size: 15px; font-weight: 500; }
.subject-best-name small { font-size: 13px; font-weight: 400; color: #646e69; }

/* Ask Buddy on My mocks. */
body[data-look="student"] .home-buddy { border-top: 3px solid #7a3550; padding: 24px; gap: 14px; }
body[data-look="student"] .home-buddy header { gap: 12px; }
body[data-look="student"] .mocks-page .home-buddy h2 { font-size: 18px; font-weight: 600; }
body[data-look="student"] .home-buddy header > div p { font-size: 13px; }
body[data-look="student"] .home-buddy > p { font-size: 16px; }
body[data-look="student"] .home-buddy > p.meta { font-size: 13px; }
body[data-look="student"] .home-buddy-composer { background: #faf8f3; border-radius: 14px; padding: 8px 8px 8px 16px; }
body[data-look="student"] .home-buddy-composer input { font-size: 16px; }
body[data-look="student"] .home-buddy-composer button { border-radius: 10px; box-shadow: none; padding: 0; font-size: 16px; }
body[data-look="student"] .home-buddy.home-buddy--locked { border-top: 1px solid #e3ded2; }

/* Finished mocks and the other My mocks cards. */
body[data-look="student"] .finished-row { padding: 16px 24px; }
body[data-look="student"] .finished-row h3 { font-size: 17px; font-weight: 600; }
body[data-look="student"] .finished-row p { font-size: 14px; color: #3d4844; }
body[data-look="student"] .finished-score { font-size: 22px; font-weight: 700; }
body[data-look="student"] .finished-row a { font-size: 15px; font-weight: 600; color: #7a3550; }
body[data-look="student"] .test-day-card { padding: 24px; }
body[data-look="student"] .test-day-card h2 { font-size: 18px; font-weight: 600; }
body[data-look="student"] .test-day-card p { font-size: 15px; color: #3d4844; }
body[data-look="student"] .test-day-card strong { font-weight: 700; color: #7a3550; }

/* Progress (10a). */
body[data-look="student"] .progress-page .parent-body { padding: 32px max(40px, calc((100% - 1200px) / 2)) 44px; max-width: none; }
body[data-look="student"] .progress-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
body[data-look="student"] .progress-page .parent-main { gap: 20px; }
body[data-look="student"] .progress-page .parent-side { gap: 20px; }
body[data-look="student"] .score-line { margin: 0; }
body[data-look="student"] .score-line-area { fill: #f8e6ec; }
body[data-look="student"] .score-line-path { stroke: #7a3550; stroke-width: 3; }
body[data-look="student"] .score-line-point circle:not(.chart-hit) { stroke: #7a3550; stroke-width: 3; }
body[data-look="student"] .score-line-point circle.is-best { fill: #7a3550; stroke: #7a3550; }
body[data-look="student"] .chart-tick, body[data-look="student"] .chart-category { font-size: 12px; fill: #646e69; }
body[data-look="student"] .score-line-best { font-size: 14px; font-weight: 600; fill: #7a3550; }
body[data-look="student"] .chart-empty { font-size: 16px; }
.time-bars { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 14px; list-style: none; margin: 0; padding: 0; }
/* Each row sits on the list's columns, so every bar ends where the longest label begins. */
.time-bars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: 15px; font-weight: 500; }
.time-bar-track { height: 14px; border-radius: 7px; background: var(--subject-tint); overflow: hidden; }
.time-bar-track > span { display: block; height: 100%; border-radius: 7px; background: var(--subject); }
.time-bar-label { min-width: 110px; text-align: right; color: #3d4844; white-space: nowrap; }
.time-bars li.is-warning .time-bar-label { color: #9a5f08; }
.time-bars-tip { font-size: 15px; line-height: 1.5; color: #3d4844; }
body[data-look="student"] .focus-card { border-top: 4px solid var(--subject); }
.focus-eyebrow { font-size: 14px; font-weight: 600; color: var(--subject-ink); }
body[data-look="student"] .focus-card h2 { font-size: 22px; font-weight: 700; }
body[data-look="student"] .focus-card p:not(.focus-eyebrow) { font-size: 16px; line-height: 1.5; color: #3d4844; }

/* Results after a mock (10b). */
body:has(.student-results) main { max-width: none; }
.student-results { padding: 0; max-width: none; }
.student-results .student-band h1 { font-size: 46px; }
.student-results .tag-untimed { margin-left: 10px; }
.new-badge { display: flex; align-items: center; gap: 16px; flex: none; padding: 20px 24px; background: #fffefb; border-radius: 20px; box-shadow: 0 4px 0 #e3ded2; }
.new-badge p { font-size: 13px; font-weight: 600; color: #9a5f08; }
.new-badge h2 { font-size: 20px; font-weight: 700; line-height: 1.25; }
.new-badge small { font-size: 13px; color: #646e69; }
.student-results-body { display: grid; gap: 24px; padding: 32px max(40px, calc((100% - 1200px) / 2)) 44px; }
.result-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.result-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-cards--1 { grid-template-columns: minmax(0, 360px); }
.result-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; background: #fffefb; border: 1px solid #e3ded2; border-top: 6px solid var(--subject); border-radius: 20px; }
.result-card h2 { font-size: 16px; font-weight: 600; color: var(--subject-ink); }
.result-card strong { font-size: 36px; font-weight: 700; line-height: 1.2; }
.result-card p { font-size: 15px; color: #3d4844; }
body[data-look="student"] .result-card .button { margin-top: auto; padding: 11px 14px; }
.results-buddy { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #fffefb; border: 1px solid #e3ded2; border-radius: 20px; }
.results-buddy p { flex: 1; font-size: 16px; line-height: 1.5; }
body[data-look="student"] .results-buddy .pill-button { border-radius: 999px; padding: 11px 18px; font-size: 16px; }

/* iClass (v5.11). The dark label is a stand-in for iClass's logo. 12a sits in
   the Ask Buddy panel once the day's messages are used; 12b on the results,
   bordered in the subject's colour. */
.iclass-label { display: inline-block; flex: none; justify-self: start; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: #1b2a24; color: #fffefb; font-size: 13px; font-weight: 700; line-height: 1.3; }
.iclass-actions { display: flex; align-items: center; gap: 10px; }
body[data-look="student"] main .iclass-actions .button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font-size: 16px; white-space: nowrap; text-decoration: none; }
body[data-look="student"] main .iclass-actions .text-button { padding: 12px 10px; color: #3d4844; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body[data-look="student"] main .iclass-actions .text-button:hover { text-decoration: underline; }
.iclass-card--buddy { display: grid; gap: 12px; padding: 20px; border: 1px solid #e3ded2; border-radius: 20px; background: #fffefb; box-shadow: 0 4px 0 #e3ded2; }
.iclass-card--buddy h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.home-buddy .iclass-card--buddy p { margin: 0; color: #3d4844; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.home-buddy .iclass-actions { margin-top: 4px; }
.buddy-limit-reply p { margin: 0; }
.home-buddy .buddy-back-tomorrow { margin: 0; padding: 14px 16px; border: 1px solid #e3ded2; border-radius: 14px; background: #f3efe8; color: #646e69; font-size: 16px; }
.iclass-card--struggling { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 2px solid var(--subject, #1b2a24); border-radius: 20px; background: #fffefb; }
.iclass-struggling-copy { flex: 1; display: grid; gap: 8px; min-width: 0; }
.iclass-struggling-copy p { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.iclass-struggling-copy .iclass-struggling-head { display: flex; align-items: center; gap: 10px; color: var(--subject-ink, #1b2a24); font-size: 14px; font-weight: 600; }
.iclass-card--struggling .iclass-actions { flex: none; flex-direction: column; align-items: stretch; gap: 8px; }
body[data-look="student"] main .iclass-card--struggling .iclass-actions .text-button { padding: 6px; }

/* Tablet: one column, Buddy beside the heading only while it fits. */
@media (max-width: 999px) {
  body[data-look="student"] .progress-layout { grid-template-columns: minmax(0, 1fr); }
  /* My mocks' header stacks: greeting, chips, then Buddy, as the eye reads down. */
  body[data-look="student"] .mocks-header-band:has(.mascot-says) { grid-template-columns: minmax(0, 1fr); }
  body[data-look="student"] .mocks-header-band:has(.mascot-says) .bundle-toggle { grid-row: 2; }
  body[data-look="student"] .mocks-header-band:has(.mascot-says) .mocks-counts { grid-row: 3; }
  body[data-look="student"] .mocks-header-band:has(.mascot-says) .mascot-says { grid-column: 1; grid-row: 4; margin-top: 20px; }
  .result-cards, .result-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
  body[data-look="student"] .student-band { flex-wrap: wrap; }
  .new-badge { flex: 1 1 100%; }
}
/* Phone: Buddy's bubble goes under the heading, and grids narrow. */
@media (max-width: 600px) {
  body[data-look="student"] .site-header { padding: 14px 20px; }
  /* The four nav items fit one row beside nothing else at 390px. */
  body[data-look="student"] .site-header nav { gap: 2px; flex-wrap: nowrap; }
  body[data-look="student"] .site-header nav a { padding: 7px 10px; font-size: 15px; }
  body[data-look="student"] .site-header nav .pill { margin-left: 4px; padding: 7px 10px; font-size: 14px; }
  body[data-look="student"] :is(.mocks-header-band, .student-band) { padding: 28px 20px; }
  body[data-look="student"] :is(.mocks-heading, .student-band) h1, .student-results .student-band h1 { font-size: 34px; }
  .mascot-says { width: 100%; }
  .mascot-bubble { flex: 1; max-width: none; }
  .buddy-avatar--header { width: 120px; height: 120px; }
  body[data-look="student"] .mocks-counts { gap: 8px; flex-wrap: nowrap; }
  body[data-look="student"] .mocks-counts > div { padding: 10px 12px; min-width: 0; }
  body[data-look="student"] .mocks-counts dd { font-size: 22px; }
  body[data-look="student"] .mocks-counts dt { font-size: 13px; }
  body[data-look="student"] :is(.mock-progress-card, .student-card) { padding: 22px 20px; }
  /* The clock, or the line saying there is none, takes its own row above Resume. */
  .mock-card-title .mock-time-left { flex-basis: 100%; text-align: left; }
  .mock-card-title .mock-resume-actions { justify-items: start; }
  .student-card-head { flex-wrap: wrap; row-gap: 4px; }
  .student-card-head > span { white-space: normal; }
  .subject-steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  /* A phone puts the subject and its time on one line, with the bar under them, so a long subject name never wraps. */
  .time-bars { grid-template-columns: minmax(0, 1fr) auto; }
  .time-bars li { row-gap: 6px; }
  .time-bar-name { grid-row: 1; }
  .time-bar-label { grid-row: 1; grid-column: 2; min-width: 0; font-size: 14px; }
  .time-bar-track { grid-row: 2; grid-column: 1 / -1; }
  .student-results-body, body[data-look="student"] .progress-page .parent-body { padding: 24px 20px 36px; }
  .result-cards, .result-cards--3, .result-cards--1 { grid-template-columns: minmax(0, 1fr); }
  .results-buddy { flex-wrap: wrap; }
  .results-buddy p { flex: 1 1 calc(100% - 68px); }
  .results-buddy .button { flex: 1; }
  .iclass-card--struggling { flex-wrap: wrap; align-items: flex-start; padding: 20px; }
  .iclass-struggling-copy { flex: 1 1 calc(100% - 70px); }
  .iclass-card--struggling .iclass-actions { flex: 1 1 100%; }
}
.unfinished-mocks ul { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.unfinished-mocks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; }
.unfinished-mocks li > :is(a, button, .subscription-status) { margin-left: auto; }
.unfinished-row > strong { min-width: 5.4em; }
/* The ticks wrap inside their own column, so Finish keeps its place at the row's end. */
.unfinished-sections { display: flex; flex: 1 1 14em; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.unfinished-sections .is-done { font-weight: 500; }
.run-row-text { display: grid; gap: 2px; min-width: 0; }
.run-row-detail { font-size: 14px; color: #3d4844; }
.unfinished-mocks h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.unfinished-mocks section { margin: 0; }
.finish-blocked { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: #3d4844; }
/* Progress's mocks card: each row ruled off from the next, as My mocks' Unfinished rows are, so two Resume buttons never meet. */
.student-card.unfinished-mocks ul { gap: 0; }
.student-card.unfinished-mocks li { padding: 14px 0; }
.student-card.unfinished-mocks li:first-child { padding-top: 4px; }
.student-card.unfinished-mocks li + li { border-top: 1px solid #f0ece2; }
.student-card.unfinished-mocks section + section { padding-top: 16px; border-top: 1px solid #f0ece2; }
.unfinished-mocks section > .show-all { margin-top: 10px; padding: 4px 0; color: #7a3550; font-weight: 600; }

/* My mocks: the runs in progress, and the begun mocks with sections left. */
.in-progress-cards { display: grid; gap: 16px; }
.in-progress-list > .meta { margin-top: 12px; }
body[data-look="student"] .mocks-main > .in-progress-list:first-child .mock-progress-card:first-child { box-shadow: 0 4px 0 #e3ded2; }
.unfinished-rows { background: #fffefb; border: 1px solid #e3ded2; border-radius: 14px; overflow: hidden; }
.unfinished-rows ul { gap: 0; margin: 0; }
.unfinished-rows li { align-items: center; padding: 14px 24px; }
.unfinished-rows li + li { border-top: 1px solid #f0ece2; }
.unfinished-rows li > strong { font-size: 17px; font-weight: 600; }
.unfinished-rows > .finish-blocked { margin: 0; padding: 0 24px 16px; }
.unfinished-rows > .text-button { display: block; width: 100%; padding: 12px 24px; border-top: 1px solid #f0ece2; text-align: left; color: #7a3550; font-weight: 600; }
/* A trial's finished mocks are rows of one card, not cards of their own. */
body[data-look="student"] .finished-mocks { border-radius: 20px; background: #fffefb; }
body[data-look="student"] .finished-mocks .mock-list-row { border: 0; border-radius: 0; }
body[data-look="student"] .finished-mocks .mock-list-row + .mock-list-row { border-top: 1px solid #f0ece2; }
@media (max-width: 600px) {
  /* A row action that wraps under its row starts the line, as the other row actions on the page do. */
  .unfinished-mocks :is(.run-row, .unfinished-row) > :is(a, button, .subscription-status) { margin-left: 0; }
  /* Every run row puts Resume under its text, as the unfinished rows put Finish, whatever the text's length. */
  .run-row-text { flex-basis: 100%; }
  /* On a phone the ticks take the line under the mock's number, the whole width of the row. */
  .unfinished-sections { flex-basis: 100%; }
  .unfinished-rows li { padding: 14px 20px; }
  .unfinished-rows > .finish-blocked { padding: 0 20px 16px; }
}