:root { color-scheme: dark; --bg:#0b0e16; --panel:#171d2a; --line:#394458; --ink:#f5f6fa; --muted:#b9c3d5; --blue:#244ccf; --warm:#f2ce70; --green:#a9d2b2; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; }
.shell { max-width:1240px; margin:auto; padding:24px 32px; }
.notice { text-align:center; padding:10px 20px; background:#212b3b; font-size:14px; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.brand { display:block; max-width:290px; color:var(--ink); text-decoration:none; }
.brand img { display:block; width:100%; height:auto; }
.brand span { display:block; margin-top:8px; font-size:11px; letter-spacing:.18em; }
nav,.actions,.tabs { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
button { background:var(--blue); color:#fff; border:1px solid transparent; padding:12px 20px; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; min-height:48px; max-width:100%; }
button:hover { filter:brightness(1.15); }
button.secondary,nav button { background:transparent; border-color:var(--line); color:var(--ink); }
nav button[aria-current="page"] { background:var(--blue); border-color:#839ef9; }
button.quiet { font-size:14px; color:var(--muted); }
button:disabled { opacity:.65; cursor:not-allowed; }
a { color:#b0c4ff; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--warm); outline-offset:4px; }
.skip { position:absolute; top:-100px; left:20px; background:var(--blue); padding:12px; z-index:10; }
.skip:focus { top:8px; }
#status { border-left:3px solid #8faaff; padding:12px 16px; background:#151f33; margin-bottom:24px; overflow-wrap:anywhere; }
h1 { font-size:clamp(30px,4vw,48px); line-height:1.15; margin:12px 0 20px; }
h2 { font-size:28px; line-height:1.25; margin:8px 0 16px; }
h3 { font-size:20px; line-height:1.4; margin:10px 0; }
p { margin:10px 0 20px; }
.eyebrow { color:#bbcbff; text-transform:uppercase; font-size:12px; letter-spacing:.14em; margin:0; }
.fine,.muted { color:var(--muted); }
.fine { font-size:14px; }
.page-head { display:grid; grid-template-columns:1fr 240px; gap:32px; align-items:center; margin:12px 0 36px; }
.page-head img { width:100%; border-radius:12px; }
.context-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; color:var(--muted); }
.chip { border:1px solid var(--line); border-radius:30px; padding:5px 12px; font-size:14px; display:inline-block; }
.lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:24px 0 40px; }
.lesson-card { display:flex; text-align:left; flex-direction:column; align-items:stretch; padding:0; overflow:hidden; background:var(--panel); color:var(--ink); border-color:var(--line); font-weight:400; }
.lesson-card.selected { border-color:#a0b7ff; box-shadow:0 0 0 2px #a0b7ff; }
.thumbnail { display:flex; min-height:150px; align-items:center; justify-content:center; background:linear-gradient(135deg,#203251,#2d2040); position:relative; }
.thumbnail::before { content:""; background:url("assets/course-tiles.svg") center/cover; opacity:.2; position:absolute; inset:0; }
.thumbnail span { position:relative; font-size:44px; font-family:Georgia,serif; color:#efe1bd; }
.card-body { display:block; padding:22px; }
.card-body strong { display:block; font-size:20px; margin:0 0 8px; }
.card-body .status-label { display:block; margin-top:16px; font-size:15px; }
.status-label.complete { color:var(--green); }
progress { width:100%; accent-color:#87addf; height:12px; }
.panel { background:var(--panel); border:1px solid var(--line); padding:28px; border-radius:14px; margin:24px 0; min-width:0; }
.panel.warn { border-left:4px solid var(--warm); }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.player-placeholder { display:flex; align-items:center; justify-content:center; min-height:170px; background:#0a101d; border:1px dashed #70829d; border-radius:10px; text-align:center; padding:30px; margin:18px 0; }
label { display:block; margin:12px 0 5px; font-weight:600; }
input,select,textarea { width:100%; padding:12px; background:#0e1420; color:var(--ink); border:1px solid #66758f; border-radius:6px; font:inherit; }
.form-row { display:flex; gap:16px; align-items:end; flex-wrap:wrap; }
.form-row>div { flex:1; min-width:130px; }
.actions { margin:18px 0; }
ul { padding-left:22px; }
.history { padding:18px; border:1px solid var(--line); border-radius:8px; margin:12px 0; overflow-wrap:anywhere; }
.history p { margin:6px 0; }
.history h3 { margin-top:0; }
.empty { border:1px dashed var(--line); padding:20px; color:var(--muted); border-radius:10px; }
footer { color:var(--muted); border-top:1px solid var(--line); font-size:14px; }
@media(max-width:800px) { .lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .page-head { grid-template-columns:1fr; } .page-head img { display:none; } .two-columns { grid-template-columns:1fr; } }
@media(max-width:480px) { .shell { padding:20px; } .lesson-grid { grid-template-columns:1fr; } .panel { padding:20px; } nav { gap:8px; } nav button { padding:10px 12px; } .thumbnail { min-height:170px; } }
.reviewer-tools { position:relative; border:1px dashed var(--line); padding:8px 12px; border-radius:8px; font-size:14px; color:var(--muted); }
.reviewer-tools summary { cursor:pointer; }
.reviewer-tools[open] { max-width:320px; }
.reviewer-tools p { margin:10px 0; }
.reviewer-tools button { display:block; margin-top:10px; width:100%; }
/* Viewing states use distinct colours alongside their text and icons. */
.lesson-card.not-started { border-top:4px solid #a6b7cf; }
.lesson-card.in-progress { border-top:4px solid #f2ce70; }
.lesson-card.complete { border-top:4px solid #a9d2b2; }
.lesson-card.not-started .thumbnail { background:linear-gradient(135deg,#243148,#30263e); }
.lesson-card.in-progress .thumbnail { background:linear-gradient(135deg,#463921,#2e283e); }
.lesson-card.complete .thumbnail { background:linear-gradient(135deg,#243d35,#263448); }
.status-label.not-started { color:#c2d2ea; }
.status-label.in-progress { color:#f2ce70; }
.status-label.complete { color:#a9d2b2; }
.parent-child-choice { max-width:540px; margin-bottom:24px; }
@media(max-width:480px) {
  header.shell { padding:16px 20px; gap:16px; }
  header .brand { max-width:225px; }
  header nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:8px; }
  header nav > button { padding:8px 6px; min-height:44px; font-size:14px; }
  header .reviewer-tools { grid-column:1 / -1; max-width:none; width:100%; padding:0; }
  header .reviewer-tools summary { min-height:44px; padding:10px 12px; }
  header .reviewer-tools p { padding:0 12px; }
  header .reviewer-tools button { width:calc(100% - 24px); margin:8px 12px 12px; }
  .page-head { margin:4px 0 20px; }
  .page-head h1 { margin:8px 0 14px; }
  .page-head p { margin-bottom:12px; }
  .context-bar { margin-bottom:12px; gap:8px; }
  #status { margin-bottom:18px; padding:10px 12px; }
  .lesson-grid { margin-top:16px; }
}
/* Selected Midnight A: original black banner with navigation above its five-colour strip. */
.primo-banner { margin:0; padding:20px 6%; background:#000000; color:white; border:0; position:relative; min-height:96px; display:flex; align-items:center; }
.primo-banner::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:linear-gradient(90deg,#087caf 0 20%,#aa519f 20% 40%,#e5232b 40% 60%,#ffcd43 60% 80%,#35a643 80%); }
.brand-original { display:flex; gap:16px; align-items:center; text-decoration:none; background:#000000; }
.brand-original img { display:block; width:250px; height:auto; background:#000000; }
.online-label { border-left:1px solid #ffffff55; padding-left:16px; color:#ddd; font-size:14px; letter-spacing:.08em; font-weight:700; }
.product-nav { border-bottom:1px solid var(--line); gap:12px; padding-top:14px; padding-bottom:14px; }
.product-nav .reviewer-tools { margin-left:auto; }
.learning-context { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.learning-context .context-bar { margin:0; }
.learning-context p { margin:0; }
.lms-grid { display:grid; grid-template-columns:305px minmax(0,1fr); gap:26px; align-items:start; }
.module-sidebar { position:sticky; top:12px; }
.module-map { border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.map-heading { padding:16px 18px; border-bottom:1px solid var(--line); }
.map-heading h2 { margin:0 0 4px; font-size:20px; }
.map-heading p { margin:0; font-size:13px; color:var(--muted); }
.module-scroll { max-height:680px; overflow-y:auto; }
.module-block { border-bottom:1px solid var(--line); padding:10px; }
.module-block h3 { margin:0 0 8px; padding:2px 6px; font-size:15px; }
.activity-link { display:grid; grid-template-columns:45px 1fr; align-items:center; gap:10px; text-align:left; width:100%; padding:8px; margin-top:4px; min-height:54px; background:transparent; color:var(--ink); border:1px solid transparent; font-weight:400; }
.activity-link.selected { background:#293b5d; border-color:#93b0ee; }
.activity-link:disabled { color:#b0bdcf; background:#111825; opacity:1; }
.activity-link strong { display:block; font-size:14px; }
.activity-link small { display:block; font-size:11px; }
.activity-link .complete { color:#a9d2b2; }
.activity-link .in-progress { color:#f2ce70; }
.activity-link .not-started { color:#c2d2ea; }
.activity-link .public-mark { color:#b7cfff; font-size:10px; }
.activity-thumb { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:34px; border-radius:5px; background:#263c58; color:#c2ddff; overflow:hidden; }
.activity-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.activity-thumb>span { position:relative; background:#000b; border-radius:50%; width:22px; height:22px; text-align:center; font-size:15px; }
.activity-thumb.practice { background:#40334f; color:#e4c7fa; }
.finish-link { display:block; width:100%; text-align:left; padding:12px; margin-top:8px; background:#223856; font-size:14px; color:#d0dfff; }
.finish-link.selected { background:#244ccf; }
.module-drawer { display:none; }
.selected-content { min-width:0; }
.inline-learning.panel,.end-pane.panel { margin:0; }
.inline-learning h1,.end-pane h1 { font-size:28px; margin:6px 0 12px; }
#content-title:focus { outline:3px solid var(--warm); outline-offset:6px; }
.player-frame { background:#0a101d; border:1px solid #42546d; border-radius:12px; overflow:hidden; }
.player-art { display:flex; flex-direction:column; justify-content:center; align-items:center; aspect-ratio:16/9; padding:24px; color:#eef4fc; background:linear-gradient(135deg,#0a101d,#20334a); position:relative; text-align:center; }
.player-art::before { content:""; position:absolute; inset:0; background:#0009; z-index:1; }
.player-art .player-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.player-art>*:not(.player-poster) { position:relative; z-index:2; }
.player-art strong { margin-top:14px; font-size:20px; }
.player-controls { padding:16px 20px; }
.player-controls p { margin:0 0 10px; }
.player-controls .actions { margin:8px 0 12px; }
.player-controls label { font-size:13px; margin:4px 0; }
.player-controls input[type=range] { padding:0; min-height:48px; accent-color:#9db7fb; }
.player-controls .fine { margin:8px 0 0; font-size:12px; }
.content-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.content-meta .complete { color:#bce5ca; background:#203e32; }
.content-meta .in-progress { color:#f6d88e; background:#47391d; }
.content-meta .not-started { color:#d0ddf0; background:#26344a; }
.public-account-note { border-left:3px solid #a0b8ee; background:#111b2d; color:#c5d4ec; padding:12px 16px; font-size:14px; }
body.player-expanded { overflow:hidden; }
.player-frame.fullscreen-demo { position:fixed; inset:0; z-index:1000; border:0; border-radius:0; width:100%; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:auto; background:#050a12; }
.fullscreen-demo .player-art { flex:1 1 auto; min-height:140px; aspect-ratio:auto; }
.fullscreen-demo .player-controls { flex:0 0 auto; width:min(100%,800px); margin:0 auto; padding:14px 20px; }
.fullscreen-demo .player-controls .actions { margin:4px 0 8px; }
.fullscreen-demo #fullscreen-enter { margin-left:auto; background:#293953; }
@media(max-width:1000px) { .lms-grid { grid-template-columns:270px minmax(0,1fr); gap:18px; } .inline-learning.panel,.end-pane.panel { padding:22px; } }
@media(max-width:760px) {
  .primo-banner { min-height:88px; padding:18px 5%; }
  .brand-original img { width:210px; }
  .online-label { padding-left:12px; font-size:13px; }
  .product-nav { display:flex; flex-wrap:wrap; padding:12px 20px; }
  .product-nav>button { min-height:44px; padding:8px 12px; font-size:14px; }
  .product-nav .reviewer-tools { margin-left:auto; font-size:12px; }
  .product-nav .reviewer-tools summary { min-height:44px; padding:10px; }
  .lms-grid { grid-template-columns:1fr; gap:16px; }
  .module-sidebar { position:static; }
  .module-drawer { display:block; width:100%; text-align:left; min-height:48px; background:#22334f; border-color:#819abe; color:#d6e5ff; }
  .module-map { margin-top:10px; }
  .module-map.map-closed { display:none; }
  .module-scroll { max-height:380px; }
  .learning-context { gap:8px; margin-bottom:12px; }
  .learning-context .context-bar { gap:6px; }
  .inline-learning h1,.end-pane h1 { font-size:24px; }
  .player-art { min-height:150px; padding:16px; }
  .player-art strong { font-size:17px; }
  .player-controls { padding:14px; }
  .player-controls .actions { gap:8px; }
  .player-controls button { font-size:13px; padding:10px 12px; }
}
@media(max-width:480px) {
  .product-nav .reviewer-tools { width:100%; margin:0; }
  .inline-learning.panel,.end-pane.panel { padding:18px; }
  .learning-context .chip { font-size:12px; padding:4px 8px; }
}
@media(orientation:landscape) and (max-height:520px) {
  .fullscreen-demo .player-art { min-height:100px; }
  .fullscreen-demo .player-art strong { margin-top:5px; font-size:16px; }
  .fullscreen-demo .player-controls { padding:8px 20px; }
  .fullscreen-demo .player-controls .fine { font-size:11px; }
}

/* Owner review: photographs and separate parent viewing overview. */
.primo-banner .product-nav { padding:0; border:0; margin-left:auto; justify-content:flex-end; }
.primo-banner .product-nav>button { min-height:48px; }
.primo-banner .reviewer-tools { background:#000000; }
.primo-banner .reviewer-tools summary { min-height:32px; }
.progress-summary { display:grid; grid-template-columns:minmax(170px,1fr) 2fr; gap:28px; padding:18px; background:#101827; border:1px solid var(--line); border-radius:10px; }
.progress-summary p { margin:8px 0; }
.progress-total { display:block; font-size:48px; line-height:1.3; margin:6px 0 12px; }
.progress-total span { font-size:24px; color:var(--muted); }
.progress-legend { display:flex; gap:12px 24px; flex-wrap:wrap; padding:18px 0; font-size:14px; color:var(--muted); }
.module-progress-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0 0 20px; }
.module-progress-card { background:#101827; border:1px solid var(--line); border-radius:10px; padding:14px; min-width:0; }
.module-progress-card h3 { font-size:17px; margin:0 0 12px; }
.module-progress-activity { border-top:1px solid var(--line); padding:10px 0; }
.module-progress-activity strong,.module-progress-activity span,.module-progress-activity small { display:block; }
.module-progress-activity span { font-size:13px; margin:4px 0; }
.module-progress-activity small { font-size:12px; color:var(--muted); }
.module-progress-activity.complete>span { color:var(--green); }
.module-progress-activity.in-progress>span { color:var(--warm); }
.module-progress-activity.not-started>span { color:#c2d2ea; }
.module-progress-activity progress { margin-top:6px; }
#progress-learning { min-height:48px; text-align:left; }
@media(max-width:1100px) { .module-progress-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .primo-banner { gap:16px; }
  .primo-banner .product-nav { width:100%; margin:0; justify-content:flex-start; padding:0; }
  .primo-banner .product-nav>button { min-height:48px; }
  .primo-banner .reviewer-tools { margin-left:auto; }
  .progress-summary { grid-template-columns:1fr; gap:10px; }
  .module-progress-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:480px) {
  .brand-original { gap:10px; }
  .brand-original img { width:190px; }
  .online-label { padding-left:10px; font-size:12px; }
  .primo-banner .reviewer-tools { width:100%; margin:0; }
  .module-progress-grid { grid-template-columns:1fr; }
  .module-progress-activity { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
  .module-progress-activity progress,.module-progress-activity small { grid-column:1 / -1; }
}

/* Restore the original quiet banner navigation; detail is optional. */
.primo-banner .product-nav { gap:26px; }
.primo-banner .product-nav>a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--muted); text-decoration:none; font-size:16px; font-weight:500; border-bottom:2px solid transparent; }
.primo-banner .product-nav>a[aria-current="page"] { color:#fff; border-bottom-color:#2d9fc4; }
.primo-banner .product-nav>a:hover { color:#fff; }
.primo-banner .product-nav>a:focus-visible { outline:2px solid #a0b8ee; outline-offset:5px; }
.cart-count { margin-left:8px; font-size:13px; }
.reviewer-area { display:flex; justify-content:flex-end; padding-top:12px; }
.reviewer-area .reviewer-tools { margin:0; font-size:12px; }
.reviewer-area .reviewer-tools summary { min-height:32px; padding:6px 12px; }
.progress-details { margin-top:18px; border-top:1px solid var(--line); padding-top:8px; }
.progress-details>summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; color:#d6e5ff; font-weight:600; }
.progress-details>summary:focus-visible { outline:2px solid #a0b8ee; outline-offset:3px; }
@media(max-width:760px) { .primo-banner .product-nav { gap:24px; } .reviewer-area { padding-top:8px; } }

/* Primo indicators and compact, noninteractive viewing statistics. */
.child-chip { background:#2d9fc4; color:#06121b; border-color:#2d9fc4; font-weight:700; }
.level-chip { background:#a96caf; color:#080b12; border-color:#a96caf; font-weight:700; }
.access-chip.access-active { background:#36ba43; color:#051208; border-color:#36ba43; font-weight:700; }
.access-chip.access-expired { background:#ffd02c; color:#181303; border-color:#ffd02c; font-weight:700; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.viewing-stats { width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; table-layout:fixed; }
.viewing-stats th,.viewing-stats td { padding:8px 6px; border-bottom:1px solid var(--line); text-align:center; }
.viewing-stats thead { color:#d6e5ff; background:#101827; }
.viewing-stats th:first-child { width:18%; }
.viewing-stats tbody th { color:var(--muted); font-weight:500; }
.viewing-stats tbody tr:nth-child(even) { background:#101827; }
.viewing-percent { display:inline-block; padding:2px 7px; border-radius:4px; white-space:nowrap; }
.viewing-percent.complete { background:#36ba43; color:#051208; font-weight:700; }
.viewing-percent.in-progress { background:#ffd02c; color:#181303; }
.viewing-percent.not-started { color:#b9c3d5; }
.viewing-count { font-variant-numeric:tabular-nums; }
.stats-key { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; font-size:12px; }
@media(max-width:480px) { .viewing-stats { font-size:12px; } .viewing-stats th,.viewing-stats td { padding:7px 2px; } .viewing-percent { padding:2px 4px; } }

/* Learning keeps its nested map/player; typography follows Home. */
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6}
.learning-context{margin:12px 0 24px}
.module-sidebar{top:20px}
.map-heading h2{font-weight:500;letter-spacing:-.5px;font-size:23px}
.map-heading .eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em}
.module-block h3{font-weight:600;letter-spacing:-.2px}
.inline-learning h1,.end-pane h1{font-weight:500;letter-spacing:-.9px;font-size:32px;line-height:1.18;margin-bottom:16px}
.inline-learning,.end-pane{border-radius:7px}
.panel h2{font-weight:500;letter-spacing:-.7px}
.player-controls button,.finish-link{border-radius:4px}
@media(max-width:760px){.module-sidebar{position:static}.inline-learning h1,.end-pane h1{font-size:27px}}
/* Sprint 01 gap sprint (04-design-spec.md). Built from existing tokens only. */
.reviewer-note{border:1px dashed var(--line);border-radius:4px;padding:6px 10px;font-size:12px;color:var(--muted)}
.learner-picker{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:22px;margin:24px 0 40px}
.learner-picker .lesson-card{min-height:160px}
.learner-picker .thumbnail{min-height:120px}
.learner-picker .card-body small{color:var(--muted);font-size:14px}
.learning-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.learning-controls .fine{margin:4px 0 0;font-size:12px}
.who-can-see{margin:0 0 14px;max-width:70ch}
.who-can-see p{margin:4px 0}
.resources{margin-top:24px;border-top:1px solid var(--line);padding-top:8px}
.resources h2{font-size:20px;margin:12px 0 4px}
.resources img{display:block;width:100%;height:auto;background:#fff;border-radius:4px;margin:8px 0 12px}
.resource-text{font-size:16px;max-width:70ch}
.caption-line{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;max-width:90%;padding:6px 12px;background:#000c;color:#fff;font-size:18px;line-height:1.4;border-radius:4px}
.player-art>.caption-line{position:absolute;z-index:3;display:block;width:max-content;max-width:90%;height:auto;border:0;border-radius:4px;font-size:18px;white-space:normal;bottom:8px}
.tutor-table .chip{white-space:nowrap;font-size:12px;padding:2px 8px}
.resource-enlarged{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#050a12;padding:16px;overflow:auto}
.resource-enlarged img{flex:1 1 auto;object-fit:contain;max-height:calc(100dvh - 96px);max-width:100%;background:#fff;border-radius:4px}
.resource-enlarged-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tutor-table td,.tutor-table th{text-align:left;overflow-wrap:anywhere}
.tutor-table .button{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
.fold-375{display:none}
.back-link{display:inline-flex;align-items:center;min-height:48px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;margin-bottom:12px}
.tutor-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.tutor-facts dt{color:var(--muted);font-size:14px}.tutor-facts dd{margin:4px 0 0;font-weight:600}
#review-text{width:100%;max-width:100%}
@media(max-width:480px){.player-art>.caption-line{font-size:14px;bottom:8px}.learner-picker{grid-template-columns:1fr 1fr;gap:12px}.learner-picker .lesson-card{min-height:140px}.learner-picker .thumbnail{min-height:88px}.tutor-table .col-tutor,.tutor-table .col-submitted{display:none}.fold-375{display:block}.tutor-facts{grid-template-columns:1fr}}
@media(min-width:768px){.learner-picker:has(> :nth-child(3)){grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
/* D-4: per-item placeholder tag on each resource summary. */
.resource-tag{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;opacity:.85}
/* DEC-127: Claim learner confirmation (head tutor) and the claim button in the learners table. */
.claim-confirm{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:12px 0}
.claim-confirm h3{margin:0 0 6px}.claim-confirm h3:focus{outline:2px solid currentColor;outline-offset:2px}
.tutor-table button[data-claim]{min-height:44px;min-width:44px;padding:8px 12px}
/* TA-14: Delegate learner and the shared reason picker (Claim and Delegate). */
.tutor-table button[data-delegate]{min-height:44px;min-width:44px;padding:8px 12px}
.tutor-table .row-actions{display:flex;flex-wrap:wrap;gap:6px}
.claim-confirm .reason-fields{border:0;margin:10px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.claim-confirm .reason-fields legend{font-weight:600;padding:0;margin-bottom:4px;width:100%}.claim-confirm .reason-fields legend:focus{outline:2px solid currentColor;outline-offset:2px}
.claim-confirm .reason-option{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.claim-confirm .reason-note label,.claim-confirm .delegate-to label{display:block;font-weight:600;margin:8px 0 4px}
.claim-confirm .reason-note input,.claim-confirm .delegate-to select{min-height:44px;width:100%;max-width:28rem;box-sizing:border-box;font:inherit}
.inactive-tutors{list-style:none;margin:8px 0 0;padding:0}.inactive-tutors:focus{outline:2px solid currentColor;outline-offset:2px}
.inactive-tutors li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 0;border-top:1px solid var(--line)}.inactive-tutors button{min-height:44px}
/* B-N1/B-N2: at 375 the Claim/Delegate buttons stay whole, cells wrap at word boundaries, reason radios sit one per line. */
.tutor-table button[data-claim],.tutor-table button[data-delegate]{white-space:nowrap}
@media(max-width:480px){.tutor-table td,.tutor-table th{overflow-wrap:break-word;word-break:normal}.claim-confirm .reason-fields{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}.claim-confirm .reason-option{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;text-align:left}.claim-confirm .reason-option input[type=radio]{width:24px;height:24px;min-width:24px;margin:0;padding:0;flex:0 0 auto}}

/* Learner picker: Primo banner colours, headline font, clearly selectable. */
.learner-picker .lesson-card{border:2px solid transparent;border-radius:12px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.learner-picker .lesson-card:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 12px 28px #0008}
.learner-picker .lesson-card:focus-visible{outline:3px solid #ffcd43;outline-offset:4px;border-color:#fff}
.learner-picker .thumbnail{min-height:140px;background:var(--pick,#087caf)}
.learner-picker .thumbnail::before{display:none}
.learner-picker .thumbnail span{font:700 72px/1 var(--font-display);color:var(--pick-ink,#fff)}
.learner-picker .lesson-card:nth-child(5n+1){--pick:#087caf}
.learner-picker .lesson-card:nth-child(5n+2){--pick:#aa519f}
.learner-picker .lesson-card:nth-child(5n+3){--pick:#e5232b}
.learner-picker .lesson-card:nth-child(5n+4){--pick:#ffcd43;--pick-ink:#0b0e16}
.learner-picker .lesson-card:nth-child(5n+5){--pick:#35a643;--pick-ink:#0b0e16}
.learner-picker .card-body strong{font:700 22px var(--font-display)}
.learner-picker .pick-cue{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
.learner-picker .lesson-card:hover .pick-cue{text-decoration:underline;text-underline-offset:4px}
@media(max-width:480px){.learner-picker .thumbnail span{font-size:56px}}
@media(prefers-reduced-motion:reduce){.learner-picker .lesson-card{transition:none}.learner-picker .lesson-card:hover{transform:none}}
/* PP-ST-008 quiz engine: questions sit inside the existing end-of-level pane (right-hand column). Large tap targets for ages 5 to 11. */
.quiz-question{border:1px solid var(--line);border-radius:8px;margin:12px 0;padding:14px 16px;min-width:0}
.quiz-question legend{font-weight:600;padding:0 6px}
.quiz-choice{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 4px;font-size:17px;cursor:pointer}
.quiz-choice input{width:24px;height:24px;flex:none}
.quiz-feedback{margin:8px 0 0;font-weight:600}
/* #556 (John, 9 Nov 2026): a player like YouTube's. The video box keeps its 16:9 shape with captions on or off, so the
   page never jumps; the caption sits over the bottom of the picture. The centre holds only the play button, the title sits
   top left, so nothing overlaps (this replaces the D-2 in-flow caption). Primo blue #2d9fc4, Primo yellow #ffd02c. */
.player-stage{position:relative}
.player-art{aspect-ratio:16/9;justify-content:flex-start;align-items:flex-start;padding:14px 18px}
.player-art strong{margin:0;font-size:16px;text-align:left}
.player-art>.caption-line{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;width:max-content;max-width:90%;margin:0}
.player-big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:76px;height:76px;min-height:0;padding:0;border-radius:50%;background:#2d9fc4;border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #0008}
.player-big-play svg{width:38px;height:38px;fill:#fff;margin-left:4px}
.player-big-play[hidden]{display:none}
.player-controls{padding:0 8px 4px;background:#0a101d}
.player-controls .player-seek{display:block;width:100%;height:24px;min-height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.player-seek::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,#2d9fc4 var(--played,0%),#ffffff40 var(--played,0%))}
.player-seek::-moz-range-track{height:5px;border-radius:3px;background:linear-gradient(to right,#2d9fc4 var(--played,0%),#ffffff40 var(--played,0%))}
.player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5px;border-radius:50%;background:#2d9fc4;border:2px solid #fff}
.player-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#2d9fc4;border:2px solid #fff}
.player-bar{display:flex;align-items:center;gap:4px}
.player-spacer{flex:1}
.player-time{font-size:14px;color:#eef4fc;font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap}
.player-controls .player-icon{position:relative;width:48px;height:48px;min-height:48px;padding:0;background:transparent;border:0;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}
.player-icon svg{width:28px;height:28px;fill:#fff}
.player-icon.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:3px;border-radius:2px;background:#ffd02c}
.fullscreen-demo .player-stage{flex:1 1 auto;display:flex}
.fullscreen-demo .player-art{flex:1 1 auto;aspect-ratio:auto}
.fullscreen-demo .player-controls{width:100%;max-width:none}
@media(max-width:480px){.player-big-play{width:52px;height:52px}.player-big-play svg{width:26px;height:26px;margin-left:3px}.player-art strong{font-size:14px}.player-art>.caption-line{font-size:13px;bottom:8px;padding:3px 8px;max-width:86%}}
/* #556: the quiz entry after the last lesson (not designed yet). */
.quiz-placeholder{display:flex;gap:12px;align-items:center;padding:10px 12px;margin-top:8px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.quiz-placeholder strong{display:block;color:var(--ink)}
.quiz-placeholder small{display:block;font-size:13px}
.activity-thumb.quiz{background:#3d3a20;color:#ffd02c;flex:0 0 auto}
/* #628: the choice before play, inline and expanded; stacks at tablet widths and below */
.player-choice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(86%,340px)}
.player-choice-note{margin:0;text-align:center;color:#fff;font-size:15px;text-shadow:0 1px 4px #000a}
.player-choice-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:24px;background:#2d9fc4;color:#fff;border:2px solid #fff;font-size:16px;box-shadow:0 4px 18px #0008}
.player-choice-btn.secondary{background:#0a101d}
.player-choice-btn svg{width:22px;height:22px;fill:#fff;flex:0 0 auto}