/* Sky & Mosaic: the student portal + homework look, shared by every course (Fun programme P1, Oct 2026).
   Loaded AFTER each page's own CSS on: platform/index.html (QA dashboard), platform/homework.html, the GCSE portal + homework
   (courses/gcse/index.html, homework.html), Fast Track's, the GCSE Words, My work and AI partner pages (siblings' and Fast Track's,
   site review GC-7), and the 1-to-1 course home. It only changes appearance: no ids, classes,
   links or data hooks are removed. Lesson pages do not load it and keep their own look.
   Design: calm, bright, light blue; Karla for all UI and headings; Amiri for Arabic (never under 18px); one colour per area
   of the course; terracotta only for the one main "Continue" action. Light only; colours are tokens; reduced motion honoured. */

:root{
  /* base */
  --bg:#F3F8FD; --bg-panel:#FFFFFF; --bg-alt:#E8F1FA; --ink:#16233A; --ink-soft:#56657A;
  --border:#CFE0EE; --border-soft:#E1ECF6; --radius:14px;
  --sky:#2A79C0; --sky-deep:#174F86; --sky-ink:#1F63A6; --sky-bg:#ECF3FA;
  --cta:#B85C38; --cta-deep:#8E4127;
  /* area colours: --x fill (white text >= 4.5:1), --x-ink text on white and on its tint (>= 4.5:1), --x-bg ~9% tint */
  --a-lessons:#2A79C0; --a-lessons-ink:#276FB1; --a-lessons-bg:#ECF3FA;
  --a-homework:#D9912B; --a-homework-ink:#96651D; --a-homework-bg:#FCF5EC;      /* saffron: solid fills take dark text */
  --a-words:#128479;    --a-words-ink:#11796F;    --a-words-bg:#EAF4F3;
  --a-games:#6B5BD2;    --a-games-ink:#6A5AD0;    --a-games-bg:#F2F0FB;
  --a-stories:#C05539;  --a-stories-ink:#B14E34;  --a-stories-bg:#FAF0ED;       /* stories, poems, films: rose-clay */
  --a-quran:#1F7A4D;    --a-quran-ink:#1F7A4D;    --a-quran-bg:#EBF3EF;
  --a-exam:#3D4FB8;     --a-exam-ink:#3D4FB8;     --a-exam-bg:#EEEFF9;
  --a-ai:#12809B;       --a-ai-ink:#117790;       --a-ai-bg:#EAF5F8;
  --ok:#1F7A4D; --ok-bg:#E6F4EC; --done-bg:#E6F4EC; --done-ink:#1F7A4D;
  --now-bg:#FFF6E6; --now-ink:#8A5B17;
  /* the old terracotta tokens, remapped so every existing rule picks up the new look */
  --teal:#2A79C0; --teal-deep:#174F86; --teal-tint:#E4EFFA; --teal-text:#1F63A6;
  --gold:#96651D; --gold-soft:#E9B35E; --gold-pale:#FBEFD9; --gold-text:#8A5B17;
  --lock-ink:#7A8798;
  --ui:'Karla',system-ui,sans-serif; --serif:'Karla',system-ui,sans-serif; --ar-font:'Amiri','Arial','Traditional Arabic',serif;
}

/* ---------- type ---------- */
body{font-family:'Karla',system-ui,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Karla',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em;}
.ar, [lang=ar], .chap-ar, .g-hero-ar{font-family:var(--ar-font); font-size:max(18px,1em);}
::selection{background:#CFE3F7;}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}

/* ---------- the mosaic: an 8-point star tile, white at low opacity, for the greeting cards ---------- */
:root{
  --mosaic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M10 10H46V46H10Z'/%3E%3Cpath d='M28 2.5L53.5 28 28 53.5 2.5 28Z'/%3E%3Cpath d='M28 17L39 28 28 39 17 28Z' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
}
.pt-hero{
  position:relative; overflow:hidden; color:#fff; border-radius:20px;
  background:var(--mosaic) 0 0/56px 56px, linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%);
}

/* ---------- shared small pieces ---------- */
.pt-chip{display:inline-flex; align-items:center; gap:6px; font-family:'Karla',sans-serif; font-size:12.5px; font-weight:700; line-height:1; border-radius:100px; padding:5px 10px; background:var(--c-bg,var(--sky-bg)); color:var(--c-ink,var(--sky-ink));}
.pt-chip.homework{--c-bg:var(--a-homework-bg); --c-ink:var(--a-homework-ink);}
.pt-chip.words{--c-bg:var(--a-words-bg); --c-ink:var(--a-words-ink);}
.pt-chip.games{--c-bg:var(--a-games-bg); --c-ink:var(--a-games-ink);}
.pt-chip.stories{--c-bg:var(--a-stories-bg); --c-ink:var(--a-stories-ink);}
.pt-chip.quran{--c-bg:var(--a-quran-bg); --c-ink:var(--a-quran-ink);}
.pt-chip.exam{--c-bg:var(--a-exam-bg); --c-ink:var(--a-exam-ink);}
.pt-chip.ai{--c-bg:var(--a-ai-bg); --c-ink:var(--a-ai-ink);}

/* =====================================================================================================
   QA dashboard (platform/index.html)
   ===================================================================================================== */
.pt-qa-dash .page{max-width:1000px;}
.pt-qa-dash .hero{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px 28px; align-items:center; padding:30px 32px; margin:22px 0 16px;}
.pt-qa-dash .hero .eyebrow{font-family:'Karla',sans-serif; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.82); margin:0 0 6px;}
.pt-qa-dash .hero h1{font-family:'Karla',sans-serif; font-size:36px; line-height:1.12; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0 0 8px;}
.pt-qa-dash .hero .sub{font-size:16.5px; line-height:1.5; color:rgba(255,255,255,.9); margin:0; max-width:34em;}
.pt-qa-dash .hero-go:empty{display:none;}
.pt-qa-dash .hero:has(.hero-go:empty){grid-template-columns:1fr;}
.pt-qa-dash .hero-go .tile.continue{background:#fff; color:var(--ink); border:none; border-radius:16px; padding:18px 20px; gap:14px; box-shadow:0 14px 30px -18px rgba(8,30,60,.55);}
.pt-qa-dash .hero-go .tile.continue h3{font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--ink-soft);}
.pt-qa-dash .hero-go .tile.continue .big{font-family:'Karla',sans-serif; font-size:23px; font-weight:700; line-height:1.2; color:var(--ink);}
.pt-qa-dash .hero-go .tile.continue .small{color:var(--ink-soft); font-size:14.5px;}
.pt-qa-dash .tile.continue a.go{align-self:stretch; text-align:center; background:var(--cta); color:#fff; font-size:17px; padding:13px 22px; min-height:48px; box-shadow:0 8px 18px -10px rgba(142,65,39,.8);}
.pt-qa-dash .tile.continue a.go:hover{background:var(--cta-deep);}

.pt-qa-dash .tile{border-radius:16px; border:1px solid var(--border-soft); box-shadow:0 1px 0 rgba(22,35,58,.03);}
.pt-qa-dash .tile h3{font-family:'Karla',sans-serif; font-size:14px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink-soft);}
.pt-qa-dash .tile .big{font-family:'Karla',sans-serif; font-weight:700; color:var(--ink);}
.pt-qa-dash .dash{grid-template-columns:1fr 1fr; margin:0 0 16px;}
.pt-qa-dash .tile.meter{border-top:4px solid var(--a-quran);}
.pt-qa-dash .tile.meter .ring svg .bar{stroke:var(--a-quran);}
.pt-qa-dash .tile.meter .big{color:var(--a-quran-ink);}
.pt-qa-dash .tile.meter .gain{background:var(--a-quran-bg); color:var(--a-quran-ink);}
.pt-qa-dash .tile.meter a{color:var(--a-quran-ink);}
.pt-qa-dash .tile.days{border-top:4px solid var(--sky);}
.sd-row{display:flex; gap:8px; margin:6px 0 10px;}
.sd{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1 1 0;}
.sd i{display:block; width:100%; max-width:30px; aspect-ratio:1; border-radius:50%; background:var(--sky-bg); border:2px solid var(--border);}
.sd.on i{background:var(--sky); border-color:var(--sky);}
.sd.sd-now i{outline:2px solid var(--sky-deep); outline-offset:2px;}
.sd b{font-size:11.5px; font-weight:700; color:var(--ink-soft);}
.pt-qa-dash .tile.days .small b{color:var(--ink);}

/* Today's 10 minutes: words (teal) */
.pt-qa-dash .today{border:1px solid var(--a-words); border-left:6px solid var(--a-words); border-radius:16px; background:var(--a-words-bg);}
.pt-qa-dash .today.done{border-color:#9FD1C4; background:var(--a-words-bg);}
.pt-qa-dash .today-k{font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--a-words-ink);}
.pt-qa-dash .today-h{font-family:'Karla',sans-serif; font-weight:700; font-size:22px; color:var(--ink);}
.pt-qa-dash .today.done .today-h{color:var(--a-words-ink);}
.pt-qa-dash .today-steps .n{background:#fff; color:var(--a-words-ink);}
.pt-qa-dash .today-go{background:var(--a-words); color:#fff;}
.pt-qa-dash .today-go:hover{background:var(--a-words-ink);}
.pt-qa-dash .today.done .today-go{background:#fff; color:var(--a-words-ink); border:1px solid #9FD1C4;}
.pt-qa-dash .today-catch{background:var(--a-homework-bg); color:var(--a-homework-ink);}

/* the area tiles */
.pt-qa-dash .actions{grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:0 0 22px;}
.action{--a:var(--sky); --a-ink:var(--sky-ink); --a-bg:var(--sky-bg);}
.action.a-words{--a:var(--a-words); --a-ink:var(--a-words-ink); --a-bg:var(--a-words-bg);}
.action.a-games{--a:var(--a-games); --a-ink:var(--a-games-ink); --a-bg:var(--a-games-bg);}
.action.a-hw{--a:var(--a-homework); --a-ink:var(--a-homework-ink); --a-bg:var(--a-homework-bg);}
.action.a-quran{--a:var(--a-quran); --a-ink:var(--a-quran-ink); --a-bg:var(--a-quran-bg);}
.action.a-exam{--a:var(--a-exam); --a-ink:var(--a-exam-ink); --a-bg:var(--a-exam-bg);}
.action.a-ai{--a:var(--a-ai); --a-ink:var(--a-ai-ink); --a-bg:var(--a-ai-bg);}
.action.a-lessons{--a:var(--a-lessons); --a-ink:var(--a-lessons-ink); --a-bg:var(--a-lessons-bg);}
.pt-qa-dash .action{position:relative; border-radius:16px; border:1px solid var(--border-soft); border-top:4px solid var(--a); padding:14px 16px; min-height:78px;}
.pt-qa-dash .action:hover{border-color:var(--a); box-shadow:0 12px 24px -18px var(--a);}
.pt-qa-dash .action .ico{width:42px; height:42px; border-radius:12px; background:var(--a-bg); color:var(--a-ink); font-size:0;}
.pt-qa-dash .action .ico svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pt-qa-dash .action .act-t{flex:1 1 auto; min-width:0;}
.pt-qa-dash .action b{font-size:16px; font-weight:700; color:var(--ink);}
.pt-qa-dash .action span.sub{font-size:13.5px; color:var(--ink-soft); line-height:1.4;}
.pt-qa-dash .action .num{flex:none; min-width:34px; height:34px; padding:0 10px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; background:var(--a); color:#fff; font-size:15px; font-weight:700;}
.pt-qa-dash .action.a-hw .num{color:var(--ink);}
.pt-qa-dash .action .num[hidden]{display:none;}
.pt-qa-dash .action.attn{background:var(--a-bg); border-color:var(--a); border-top-color:var(--a);}
.pt-qa-dash .revisit a{color:var(--sky-ink);}

/* the class card: lessons (sky) */
.pt-qa-dash .class-card{border-radius:16px; border-top:4px solid var(--a-lessons);}
.pt-qa-dash .cc-k{font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--a-lessons-ink);}
.pt-qa-dash .cc-when{font-family:'Karla',sans-serif; font-weight:700; font-size:20px; color:var(--ink);}
.pt-qa-dash .cc-join{background:#1D6FD1;}
.pt-qa-dash .cc-check b{text-transform:none; letter-spacing:0; font-size:13.5px;}
.pt-qa-dash .cc-check .ok .tick{background:var(--a-quran); border-color:var(--a-quran);}

/* search, units, lessons */
.pt-qa-dash .q-search-wrap input{border-radius:100px; border:1px solid var(--border); font-family:'Karla',sans-serif;}
.pt-qa-dash .units-h, .pt-qa-dash .level-block h2{font-family:'Karla',sans-serif; font-size:18px; letter-spacing:0; color:var(--ink);}
.pt-qa-dash .unit{border-radius:16px; border:1px solid var(--border-soft);}
.pt-qa-dash .unit.current{border-color:var(--sky); box-shadow:0 14px 28px -22px var(--sky);}
.pt-qa-dash .unit.complete{border-color:#9FD1B5;}
.pt-qa-dash .unit-medal{background:var(--sky-bg); color:var(--sky-ink); font-family:'Karla',sans-serif;}
.pt-qa-dash .unit.current .unit-medal{background:var(--sky); color:#fff;}
.pt-qa-dash .unit.complete .unit-medal{background:var(--a-quran); color:#fff;}
.pt-qa-dash .unit-k{text-transform:none; letter-spacing:0; font-size:13px;}
.pt-qa-dash .unit.current .unit-k{color:var(--sky-ink);}
.pt-qa-dash .unit-name{font-family:'Karla',sans-serif; font-weight:700; font-size:17px; color:var(--ink);}
.pt-qa-dash .unit-bar span{background:var(--sky);}
.pt-qa-dash .unit.complete .unit-bar span{background:var(--a-quran);}
.pt-qa-dash .chap-card{border-radius:14px; font-family:'Karla',sans-serif;}
.pt-qa-dash .chap-en{font-size:16px; font-weight:600;}
.pt-qa-dash .chap-ar{font-family:var(--ar-font); font-size:19px; line-height:1.9; margin-top:.15em;}   /* room for the vowel marks under the English title */
.pt-qa-dash .chap-num{background:var(--sky-bg); color:var(--sky-ink);}
.pt-qa-dash .chap-card:hover{border-color:var(--sky);}
.pt-qa-dash .chap-card.exam{border-color:#B6BDE6; border-style:dashed;}
.pt-qa-dash .chap-card.exam .chap-num{background:var(--a-exam-bg); color:var(--a-exam-ink);}
.pt-qa-dash .chap-mile{text-transform:none; letter-spacing:0; color:var(--a-exam-ink); font-size:12.5px;}
.pt-qa-dash .chap-card.q-complete{border-color:#9FD1B5; background:var(--done-bg);}
.pt-qa-dash .chap-card.q-complete .chap-num{background:var(--a-quran); color:#fff;}
.pt-qa-dash .chap-card.q-now{border:2px solid var(--sky); background:var(--sky-bg); box-shadow:0 10px 22px -16px var(--sky);}
.pt-qa-dash .chap-card.q-now .st{background:var(--sky); color:#fff;}
.pt-qa-dash .chap-card.q-free .st{background:var(--sky-bg); color:var(--sky-ink);}
.pt-qa-dash .welcome, .pt-qa-dash .trial{border-radius:16px; border:1px solid var(--border-soft); border-left:5px solid var(--sky);}
.pt-qa-dash .welcome-ok, .pt-qa-dash .trial .btns a.line{color:var(--sky-ink); border-color:var(--sky);}
.pt-qa-dash .trial .btns a.solid{background:var(--sky); color:#fff;}
.pt-qa-dash .marks-note{border-radius:16px;}

@media (max-width:760px){
  .pt-qa-dash .hero{grid-template-columns:1fr; padding:24px 20px; border-radius:18px;}
  .pt-qa-dash .hero h1{font-size:29px;}
  .pt-qa-dash .dash{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:no-preference){
  .pt-qa-dash .action, .pt-qa-dash .chap-card{transition:border-color .15s, box-shadow .15s;}
}

/* =====================================================================================================
   QA homework (platform/homework.html): a checklist of task cards grouped by due day
   ===================================================================================================== */
.pt-qa-hw main{max-width:760px; padding-top:28px;}
.pt-qa-hw .hw-head h1{font-family:'Karla',sans-serif; font-size:32px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.pt-qa-hw .hw-head p{font-size:16px;}
.pt-qa-hw .hw-summary{position:relative; border-radius:18px; border:1px solid var(--border-soft); border-top:5px solid var(--a-homework); padding:18px 20px;}
.pt-qa-hw .hw-summary .bar{stroke:var(--a-homework);}
.pt-qa-hw .hw-summary b{font-size:19px;}
.pt-qa-hw .hw-summary span{font-size:14.5px;}
.pt-qa-hw .hw-summary.all-done{background:var(--ok-bg); border-color:#B8DEC8; border-top-color:var(--ok);}
.pt-qa-hw .hw-summary.all-done .bar{stroke:var(--ok);}
.pt-qa-hw .hw-sum-t{flex:1 1 auto; min-width:0;}
.pt-qa-hw .hw-wbar{height:10px; border-radius:10px; background:var(--a-homework-bg); border:1px solid #F0DDBF; margin-top:10px; overflow:hidden;}
.pt-qa-hw .hw-wbar i{display:block; height:100%; border-radius:10px; background:var(--a-homework);}
.pt-qa-hw .hw-summary.all-done .pt-qa-hw .hw-wbar{background:#fff; border-color:#B8DEC8;}
.pt-qa-hw .hw-summary.all-done .pt-qa-hw .hw-wbar i{background:var(--ok);}
.pt-qa-hw .card{background:transparent; border:none; padding:0; margin:0 0 22px;}
.pt-qa-hw h2{font-family:'Karla',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); margin:6px 0 4px;}
.pt-qa-hw .hw-group{font-family:'Karla',sans-serif; font-size:16px; font-weight:700; color:var(--ink); margin:20px 0 8px; padding:0;}
.pt-qa-hw .hw-group span{font-weight:600; font-size:13.5px; color:var(--ink-soft);}

/* a task card */
.pt-qa-hw .hw-item{align-items:center; gap:16px; padding:14px 16px; margin:0 0 10px; background:#fff; border:1px solid var(--border-soft); border-left:5px solid var(--k,var(--sky)); border-radius:16px; transition:none;}
.pt-qa-hw .hw-item:last-child{border-bottom:1px solid var(--border-soft);}
.pt-qa-hw .hw-item:hover{background:#fff; border-color:var(--k,var(--sky)); border-left-color:var(--k,var(--sky));}
.pt-qa-hw .hw-wrap{border:none;}
.pt-qa-hw .hw-wrap .hw-item{border-bottom:1px solid var(--border-soft);}
.hw-item[data-kind=words]{--k:var(--a-words); --k-ink:var(--a-words-ink); --k-bg:var(--a-words-bg);}
.hw-item[data-kind=games]{--k:var(--a-games); --k-ink:var(--a-games-ink); --k-bg:var(--a-games-bg);}
.hw-item[data-kind=stories]{--k:var(--a-stories); --k-ink:var(--a-stories-ink); --k-bg:var(--a-stories-bg);}
.hw-item[data-kind=write]{--k:var(--a-homework); --k-ink:var(--a-homework-ink); --k-bg:var(--a-homework-bg);}
.hw-item[data-kind=listen]{--k:var(--a-exam); --k-ink:var(--a-exam-ink); --k-bg:var(--a-exam-bg);}
.hw-item[data-kind=ai]{--k:var(--a-ai); --k-ink:var(--a-ai-ink); --k-bg:var(--a-ai-bg);}
.hw-item[data-kind=exam]{--k:var(--a-exam); --k-ink:var(--a-exam-ink); --k-bg:var(--a-exam-bg);}
.hw-item[data-kind=quran]{--k:var(--a-quran); --k-ink:var(--a-quran-ink); --k-bg:var(--a-quran-bg);}
.hw-item[data-kind=lessons]{--k:var(--a-lessons); --k-ink:var(--a-lessons-ink); --k-bg:var(--a-lessons-bg);}
.pt-qa-hw .hw-desc{font-family:'Karla',sans-serif; font-size:16.5px; font-weight:600; line-height:1.4; color:var(--ink);}
.pt-qa-hw .hw-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13.5px; margin-top:8px; color:var(--ink-soft);}
.pt-qa-hw .hw-type{display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; line-height:1; padding:5px 10px; border-radius:100px; background:var(--k-bg,var(--sky-bg)); color:var(--k-ink,var(--sky-ink));}
.pt-qa-hw .hw-chip{background:#F0F4F9; color:var(--ink-soft); margin:0; font-size:12.5px; padding:5px 10px;}
.pt-qa-hw .hw-mins{font-weight:600;}
/* due dates: neutral chips, never red */
.pt-qa-hw .hw-due, .pt-qa-hw .hw-due.late, .pt-qa-hw .hw-due.soon{background:var(--a-homework-bg); color:var(--a-homework-ink); font-weight:700; padding:4px 10px; font-size:12.5px;}
.pt-qa-hw .hw-go{margin-left:auto; min-height:40px; padding:0 14px; border-radius:100px; background:var(--k,var(--sky)); color:#fff; font-size:14px;}
.pt-qa-hw .hw-item[data-kind=write] .hw-go{color:var(--ink);}
.pt-qa-hw .hw-go:hover{filter:brightness(.94); text-decoration:none; color:#fff;}
.pt-qa-hw .hw-item[data-kind=write] .hw-go:hover{color:var(--ink);}
.pt-qa-hw .hw-done-when{color:var(--ok); font-weight:700; font-size:13.5px;}
.pt-qa-hw .hw-item.done{background:#FAFCFE; border-left-color:#B8DEC8;}
.pt-qa-hw .hw-item.done .hw-desc{color:var(--ink-soft); font-weight:500; text-decoration:line-through; text-decoration-color:rgba(86,101,122,.45);}
.pt-qa-hw .hw-item.done .hw-type{background:#EEF2F6; color:var(--ink-soft);}

/* the big tick */
.pt-qa-hw .hw-item input[type=checkbox]{appearance:none; -webkit-appearance:none; width:32px; height:32px; margin:0; border-radius:50%; border:2.5px solid var(--k,var(--sky)); background:#fff; flex:none; cursor:pointer; display:grid; place-items:center;}
.pt-qa-hw .hw-item input[type=checkbox]::after{content:""; width:15px; height:8px; border-left:3.5px solid #fff; border-bottom:3.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); opacity:0;}
.pt-qa-hw .hw-item input[type=checkbox]:checked{background:var(--ok); border-color:var(--ok);}
.pt-qa-hw .hw-item input[type=checkbox]:checked::after{opacity:1;}
.pt-qa-hw .hw-item input[type=checkbox]:focus-visible{outline:3px solid var(--sky); outline-offset:3px;}
.pt-qa-hw .hw-autodot{width:32px; height:32px; margin:0; background:var(--k-bg,var(--sky-bg)); border:2.5px dashed var(--k,var(--sky)); box-sizing:border-box;}
@media (prefers-reduced-motion:no-preference){
  .pt-qa-hw .hw-item.just-done{animation:hwDone2 .8s ease;}
  .pt-qa-hw .hw-item.just-done input[type=checkbox]{animation:hwPop .45s cubic-bezier(.3,1.6,.5,1);}
  @keyframes hwDone2{0%{background:var(--ok-bg);}100%{background:#FAFCFE;}}
  @keyframes hwPop{0%{transform:scale(.7);}100%{transform:scale(1);}}
}

/* Done: folded, a calm list */
.pt-qa-hw #done-card summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; color:var(--ink); padding:12px 4px; min-height:44px;}
.pt-qa-hw #done-card summary::-webkit-details-marker{display:none;}
.pt-qa-hw #done-card summary::before{content:""; width:10px; height:10px; border-right:2.5px solid var(--ink-soft); border-bottom:2.5px solid var(--ink-soft); transform:rotate(-45deg); transition:transform .15s;}
.pt-qa-hw #done-card[open] summary::before{transform:rotate(45deg);}
.pt-qa-hw .muted{font-size:14.5px;}
.pt-qa-hw .btn{background:var(--sky); border-radius:100px;}
.pt-qa-hw .btn:hover{background:var(--sky-deep);}
@media (max-width:560px){
  .pt-qa-hw main{padding:20px 14px 60px;}
  .pt-qa-hw .hw-head h1{font-size:28px;}
  .pt-qa-hw .hw-item{gap:12px; padding:12px 12px;}
  .pt-qa-hw .hw-go{margin-left:0;}
}

/* =====================================================================================================
   GCSE siblings + Fast Track: the portal (Home) and the Homework page
   (body.g-index / body.g-fast-home / body.g-homework; markup by tools/gcse/build.py, drawn by gcse.js / homework.js);
   the heroes also on Words, My work and the AI partner (body.gw-page / .g-mywork / .g-tutor; site review GC-7, 26 Oct 2026)
   ===================================================================================================== */
:is(.g-index,.g-fast-home,.g-homework) .g-main{max-width:980px;}
:is(.g-index,.g-fast-home,.g-homework,.gw-page,.g-mywork,.g-tutor) .g-hero{text-align:left;}
:is(.g-index,.g-fast-home,.g-homework,.gw-page,.g-mywork,.g-tutor) .g-hero h1{font-family:'Karla',sans-serif; font-weight:700; font-size:32px; letter-spacing:-.02em; color:var(--ink); margin:8px 0 0;}
:is(.g-index,.g-fast-home,.g-homework,.gw-page,.g-mywork,.g-tutor) .g-hero-ar{font-size:24px; line-height:1.6; color:var(--sky-deep);}
:is(.g-index,.g-fast-home,.g-homework,.gw-page,.g-mywork,.g-tutor) .g-eyebrow{background:var(--sky-bg); color:var(--sky-ink); font-size:13.5px; padding:5px 14px; border:1px solid #D4E5F5;}
:is(.g-index,.g-fast-home) .g-hero-home{padding:24px 0 0;}
:is(.g-index,.g-fast-home) .g-whoami{margin-top:4px;}
.g-whoami .g-linkbtn, .g-linkbtn{color:var(--sky-ink);}
.g-btn{background:var(--sky); border-color:var(--sky); border-radius:100px;}
.g-btn:hover{background:var(--sky-deep); border-color:var(--sky-deep);}
.g-btn-ghost{background:#fff; color:var(--sky-ink) !important; border-color:var(--sky);}
.g-btn-ghost:hover{background:var(--sky-bg); border-color:var(--sky);}
.g-panel{border-radius:18px; border:1px solid var(--border-soft);}
.g-panel h2, .g-teacher-strip h2{font-family:'Karla',sans-serif; font-size:16px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink-soft);}

/* this week: the greeting hero card (sky, with the mosaic); its Continue button is the one terracotta action */
.g-panel.g-week{background:var(--mosaic) 0 0/56px 56px, linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%); border:none; border-radius:20px; padding:22px 24px; box-shadow:0 18px 34px -24px rgba(23,79,134,.75);}
.g-week h2{font-size:15px !important; font-weight:600; opacity:.9;}
.g-week .g-wtitle{font-family:'Karla',sans-serif; font-weight:700; letter-spacing:-.01em;}
.g-week .g-btn{background:var(--cta); color:#fff !important; border-color:var(--cta); box-shadow:0 8px 18px -10px rgba(10,20,40,.7);}
.g-week .g-btn:hover{background:var(--cta-deep); border-color:var(--cta-deep);}
.g-week .g-btn-ghost{background:rgba(255,255,255,.14); color:#fff !important; border-color:rgba(255,255,255,.7); box-shadow:none;}
.g-week .g-btn-ghost:hover{background:rgba(255,255,255,.26);}
.g-week a{color:#fff;}
.g-week .g-war, .g-week .g-wtitle{color:#fff;}

/* homework panel on Home: saffron */
.g-hwpanel{border-top:5px solid var(--a-homework); background:#fff;}
.g-hwpanel h2{color:var(--a-homework-ink);}
.g-hwpanel .hw-bar{background:var(--a-homework-bg); border:1px solid #F0DDBF;}
.g-hwpanel .hw-bar span, .hw-bar span{background:var(--a-homework);}
.g-hwpanel .g-btn{background:var(--a-homework); border-color:var(--a-homework); color:var(--ink) !important;}
.g-hwpanel .g-btn:hover{background:#C77F1A; border-color:#C77F1A;}
.g-hwpanel .g-btn-ghost{background:#fff; color:var(--a-homework-ink) !important; border-color:var(--a-homework);}
.g-hwpanel .g-btn-ghost:hover{background:var(--a-homework-bg);}
.g-fbnew{border-radius:14px; background:var(--ok-bg); border-color:#B8DEC8;}

/* the other parts of the course, one coloured tile each (Words, Games, Exam room, AI partner, My work) */
.g-links{gap:10px;}
.g-tool{--a:var(--sky); --a-ink:var(--sky-ink); --a-bg:var(--sky-bg); border-radius:16px; border:1px solid var(--border-soft); border-top:4px solid var(--a); padding:12px 14px; background:#fff;}
.g-tool:hover{border-color:var(--a); box-shadow:0 12px 22px -18px var(--a);}
.g-tool[href*="words"]{--a:var(--a-words); --a-ink:var(--a-words-ink); --a-bg:var(--a-words-bg);}
.g-tool[href*="play"]{--a:var(--a-games); --a-ink:var(--a-games-ink); --a-bg:var(--a-games-bg);}
.g-tool[href*="exam"]{--a:var(--a-exam); --a-ink:var(--a-exam-ink); --a-bg:var(--a-exam-bg);}
.g-tool[href*="tutor"]{--a:var(--a-ai); --a-ink:var(--a-ai-ink); --a-bg:var(--a-ai-bg);}
.g-tool[href*="my-work"]{--a:var(--a-homework); --a-ink:var(--a-homework-ink); --a-bg:var(--a-homework-bg);}
.g-tool-ic{background:var(--a-bg); color:var(--a-ink); border-radius:12px;}
.g-tool b{color:var(--ink);}
.g-tool-badge{background:var(--a); color:#fff;}
.g-tool[href*="my-work"] .g-tool-badge{color:var(--ink);}

/* all the lessons */
.g-parts-h{font-family:'Karla',sans-serif; font-size:20px; font-weight:700; text-transform:none; letter-spacing:-.01em; color:var(--ink); margin:30px 0 8px;}
.g-stage{border-radius:16px;}
.g-stage-h{font-family:'Karla',sans-serif; font-size:15px;}
.g-bar{background:var(--sky-bg);}
.g-bar span{background:var(--sky);}
.g-lcard{border-radius:14px; border:1px solid var(--border-soft); font-family:'Karla',sans-serif;}
.g-lcard:hover{border-color:var(--sky);}
.g-lcard .g-ltitle{font-weight:700; color:var(--ink);}
.g-lcard .g-lc-ar{font-family:var(--ar-font); font-size:19px; color:var(--ink-soft);}
.g-lnum{background:var(--sky-bg); color:var(--sky-ink);}
.g-lcard.is-current{border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-bg);}
.g-lcard.is-current .g-lstate{color:var(--sky-ink);}
.g-lcard.is-done .g-lnum{background:var(--ok); color:#fff;}
.g-cpcard{border-radius:14px; border:1px dashed #B6BDE6; background:var(--a-exam-bg);}
.g-cpcard b{color:var(--a-exam-ink);}
.g-first{border-radius:18px; background:var(--sky-bg); border:1px solid #D4E5F5;}
.g-first h2{font-family:'Karla',sans-serif; font-weight:700; color:var(--ink);}
.g-teacher-strip{border-radius:18px; background:var(--sky-bg); border-color:#D4E5F5;}

/* ----- Homework page ----- */
.g-homework .g-hero-small{padding:6px 0 2px;}
.g-homework .g-topic{color:var(--ink-soft); font-size:15.5px;}
:is(.g-homework,.g-mywork) .g-crumbs a{color:var(--sky-ink);}
.hw-eyebrow{font-size:13.5px; text-transform:none; letter-spacing:0; color:rgba(255,255,255,.85);}
.hw-week{background:var(--mosaic) 0 0/56px 56px, linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%); border:none; border-radius:20px; padding:20px 24px; color:#fff; box-shadow:0 18px 34px -24px rgba(23,79,134,.75);}
.hw-week h2{font-family:'Karla',sans-serif; font-weight:700; font-size:24px; color:#fff; letter-spacing:-.01em;}
.hw-week-m, .hw-week .hw-prog{color:rgba(255,255,255,.92);}
.hw-week .hw-due{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35);}
.hw-week .hw-due.is-late{background:rgba(255,255,255,.18); color:#fff;}
.hw-week .hw-bar{background:rgba(255,255,255,.22); height:12px;}
.hw-week .hw-bar span{background:var(--a-homework);}
.hw-week .g-btn{background:var(--cta); border-color:var(--cta); color:#fff !important; box-shadow:0 8px 18px -10px rgba(10,20,40,.7);}
.hw-week .g-btn:hover{background:var(--cta-deep); border-color:var(--cta-deep);}
.hw-alldone{color:#fff;}
.hw-block > h2{font-family:'Karla',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:6px 0 10px;}
.hw-block > h2 .hw-opt, .hw-block > h2 small, .hw-block > h2 span{font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.hw-block{margin:26px 0 0;}
.hw-card{--k:var(--a-homework); --k-ink:var(--a-homework-ink); --k-bg:var(--a-homework-bg); border-radius:16px; border:1px solid var(--border-soft); border-left:6px solid var(--k); padding:14px 16px; gap:6px; background:#fff;}
.hw-every .hw-card, .hw-words{--k:var(--a-words); --k-ink:var(--a-words-ink); --k-bg:var(--a-words-bg);}
.hw-play .hw-card{--k:var(--a-games); --k-ink:var(--a-games-ink); --k-bg:var(--a-games-bg);}
.hw-send .hw-card{--k:var(--a-homework); --k-ink:var(--a-homework-ink); --k-bg:var(--a-homework-bg);}
.hw-card.hw-done, .hw-card.hw-marked{border-left-color:var(--ok); background:#FAFDFB;}
.hw-card.hw-sent{border-left-color:var(--sky);}
.hw-card.hw-back{border-left-color:var(--a-homework); background:var(--a-homework-bg);}   /* returned: calm saffron, never red */
.hw-card-h h3{font-family:'Karla',sans-serif; font-weight:700; font-size:19px; color:var(--ink);}
.hw-card-day{font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--k-ink); background:var(--k-bg); border-radius:100px; padding:3px 9px;}
.hw-desc{font-size:15.5px; color:var(--ink);}
.hw-chip{border-radius:100px; padding:4px 10px; font-size:12.5px; background:#F0F4F9; border-color:#F0F4F9;}
.hw-chip-done, .hw-chip-marked{background:var(--ok-bg); border-color:var(--ok-bg); color:var(--ok);}
.hw-chip-sent{background:var(--sky-bg); border-color:var(--sky-bg); color:var(--sky-ink);}
.hw-chip-back{background:var(--a-homework-bg); border-color:var(--a-homework-bg); color:var(--a-homework-ink);}
.hw-chip-class, .hw-chip-best{background:var(--a-homework-bg); border-color:var(--a-homework-bg); color:var(--a-homework-ink);}
.hw-due.is-late{color:var(--a-homework-ink); background:var(--a-homework-bg);}
.hw-due{background:var(--a-homework-bg); color:var(--a-homework-ink);}
.hw-card-a .g-btn{background:var(--k); border-color:var(--k); color:#fff !important; min-height:44px;}
.hw-play .hw-card-a .g-btn.g-btn-ghost, .hw-card-a .g-btn-ghost{background:#fff; color:var(--k-ink) !important; border-color:var(--k);}
.hw-send .hw-card-a .g-btn:not(.g-btn-ghost){color:var(--ink) !important;}
.hw-card-a .g-btn:hover{filter:brightness(.93);}
.hw-stepn{background:var(--k-bg); color:var(--k-ink); font-family:'Karla',sans-serif; font-weight:700;}
.hw-card.hw-done .hw-stepn{background:var(--ok); color:#fff;}
.hw-dot{border-color:var(--a-homework);}
.hw-dot-done{background:var(--ok); border-color:var(--ok);}
.hw-dot-sent{background:var(--sky); border-color:var(--sky);}
.hw-dot-back{background:var(--a-homework); border-color:var(--a-homework);}
.hw-wd.is-on{background:var(--a-words); border-color:var(--a-words);}
.hw-plan-row{border-radius:14px;}
.hw-plan-d{text-transform:none; letter-spacing:0; color:var(--a-homework-ink); font-size:12.5px;}
.hw-extra h2, .hw-older h2{font-family:'Karla',sans-serif; font-size:16px; text-transform:none; letter-spacing:0; color:var(--ink);}
.hw-extra-list a{border-color:var(--border); color:var(--sky-ink);}
.hw-extra-list a:hover{border-color:var(--sky); background:var(--sky-bg);}
.hw-fb > summary, .hw-older-w h3, .hw-today{color:var(--ink);}
.hw-fb-class{background:var(--a-homework-bg);}
.hw-fb-tc{background:var(--sky-bg);}
@media (max-width:640px){
  :is(.g-index,.g-fast-home,.g-homework,.gw-page,.g-mywork,.g-tutor) .g-hero h1{font-size:27px;}
  .g-panel.g-week, .hw-week{padding:18px 18px; border-radius:18px;}
}
.hw-planbox > h2{font-family:'Karla',sans-serif; font-size:16px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); margin:26px 0 8px;}
.hw-wd{border-color:var(--a-words);}
.hw-card .g-gic{color:var(--k-ink,var(--sky-ink));}

/* ----- Fast Track portal (body.g-fast-home): the greeting is the hero card; one colour band per panel ----- */
.g-fast-home .g-hero-home{background:var(--mosaic) 0 0/56px 56px, linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%); border-radius:20px; padding:26px 28px 22px; margin:18px 0 0; color:#fff; box-shadow:0 18px 34px -24px rgba(23,79,134,.75);}
.g-fast-home .g-hero-home h1{color:#fff; margin-top:10px;}
.g-fast-home .g-hero-home .g-eyebrow{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4);}
.g-fast-home .g-whoami{color:rgba(255,255,255,.92);}
.g-fast-home .g-whoami .g-linkbtn{color:#fff;}
.g-fast-home .fast-card{border-top:5px solid var(--sky);}
.g-fast-home .fast-week{border-top-color:var(--a-homework);}
.g-fast-home .fast-week h2{color:var(--a-homework-ink);}
.g-fast-home .fast-road{border-top-color:var(--a-exam);}
.g-fast-home .fast-road h2{color:var(--a-exam-ink);}
.g-fast-home .fast-today h2{color:var(--sky-ink);}
.g-fast-home .fast-wk-title, .g-fast-home .fast-h3{font-family:'Karla',sans-serif; font-weight:700; color:var(--ink);}
.g-fast-home .fast-units .fast-un{background:var(--sky-bg); color:var(--sky-ink);}
@media (max-width:640px){ .g-fast-home .g-hero-home{padding:22px 18px 18px; border-radius:18px;} }

/* =====================================================================================================
   1-to-1 course home (body.c-index; markup by tools/news_verbs/build.py): the course title is the hero card
   ===================================================================================================== */
.c-index{font-family:'Karla',system-ui,sans-serif; font-size:16.5px;}
.c-index .c-main{max-width:900px;}
.c-index .c-hero{background:var(--mosaic) 0 0/56px 56px, linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%); border-radius:20px; padding:28px 28px 26px; margin:20px 0 0; color:#fff; box-shadow:0 18px 34px -24px rgba(23,79,134,.75);}
.c-index .c-hero-ar, .c-index .c-hero-big{font-family:var(--ar-font); font-size:40px; color:rgba(255,255,255,.95); line-height:1.5;}
.c-index .c-hero h1{font-family:'Karla',sans-serif; font-weight:700; font-size:34px; letter-spacing:-.02em; color:#fff; margin:2px 0 6px;}
.c-index .c-goal{color:rgba(255,255,255,.92); font-size:17px;}
.c-index .c-eyebrow{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.4);}
.c-index .c-hero .c-btn{background:var(--cta); border-color:var(--cta); color:#fff !important; box-shadow:0 8px 18px -10px rgba(10,20,40,.7);}
.c-index .c-hero .c-btn:hover{background:var(--cta-deep);}
.c-index .c-btn{background:var(--sky); border-color:var(--sky); border-radius:100px;}
.c-index .c-btn:hover{background:var(--sky-deep);}
.c-index .c-panel{border-radius:18px; border-top:5px solid var(--sky); background:#fff;}
.c-index #c-hw{border-top-color:var(--a-homework);}
.c-index .c-panel h2{font-size:16px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink-soft);}
.c-index #c-hw h2{color:var(--a-homework-ink);}
.c-index #c-next .c-btn{background:var(--cta); border-color:var(--cta);}
.c-index #c-next .c-btn:hover{background:var(--cta-deep);}
.c-index #c-hw .c-more-link, .c-index .c-more-link{color:var(--sky-ink);}
.c-index .c-bar{background:var(--sky-bg);}
.c-index .c-bar span{background:var(--sky);}
.c-index .c-part > h2{font-size:20px; font-weight:700; text-transform:none; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px;}
.c-index .c-lcard{border-radius:16px; border:1px solid var(--border-soft); background:#fff;}
.c-index .c-lcard:hover{border-color:var(--sky);}
.c-index .c-ltitle{font-family:'Karla',sans-serif; font-weight:700; font-size:17px; color:var(--ink);}
.c-index .c-lar{font-family:var(--ar-font); font-size:20px; color:var(--sky-deep);}
.c-index .c-lnum{background:var(--sky-bg); color:var(--sky-ink);}
.c-index .c-lcard.is-current{border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-bg);}
.c-index .c-lcard.is-current .c-lstate{color:var(--sky-ink);}
.c-index .c-tool{border-radius:16px; border-top:4px solid var(--a-stories);}
.c-index .c-tool b{color:var(--ink);}
@media (max-width:640px){ .c-index .c-hero{padding:22px 18px; border-radius:18px;} .c-index .c-hero h1{font-size:28px;} }