/* Test D play pages (ui 3, 13 Nov 2026): the quiz flow and the missions (ui 5) share these. The app's quiz and mission
   screens (review board 2 Nov: quiz-01…05, mission-03…17) in Test D's tokens: a light page, the company chip and the ×
   on one row, the title with its clay art, the "n of N" and the bar, the question, answer cards, the hint, the one
   button at the foot; then the Complete page on the purple stage.

   <main class="pl">
     <div class="pl-top"><span class="pl-co"><img src="…logo"> Starbucks</span><a class="pl-x" href="…" aria-label="Close"></a></div>
     <header class="pl-head"><div><h1>Quick Quiz</h1><p class="pl-count">1 of 3</p><span class="pl-bar"><i></i></span></div><img class="pl-art" src="…"></header>
     <h2 class="pl-q">…</h2>
     <ul class="pl-opts"><li><button class="pl-opt"><b>A</b><span>…</span></button></li>…</ul>
     <p class="pl-hint"><img src="assets/figma/clay/hint-bulb.png" alt="">…</p>
     <div class="pl-fb ok|no"><b>Correct!</b><span>…</span></div>
     <button class="pl-go" disabled>Choose an answer</button>
   </main> */
.pl { padding: calc(var(--td-status) - 8px) var(--td-gutter) 0; background: #f6f5ff; min-height: 100vh; }
body:has(.pl) { background: #f6f5ff; }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.pl-co { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--td-font); }
.pl-co img { width: 32px; height: 32px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain;
  box-shadow: 0 1px 3px rgb(16 18 58 / 12%); }
.pl-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000;
  text-decoration: none; box-shadow: 0 2px 8px rgb(16 18 58 / 10%); flex: none; }
.pl-x::before { content: ''; width: 16px; height: 16px; background:
  linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
  linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); }
.pl-head { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 12px; margin-top: 8px; }
.pl-head h1 { font: 800 32px/1.08 var(--td-font); letter-spacing: -0.6px; color: #14123a; }
.pl-count { margin: 8px 0 8px; font: 700 15px/1 var(--td-font); color: #5b46e6; }
.pl-bar { display: block; height: 8px; border-radius: 8px; background: #e2ddff; overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #8b6cf6, #5b46e6); transition: width .3s; }
.pl-art { width: 112px; height: 112px; object-fit: contain; }
.pl-q { margin: 24px 0 16px; font: 800 22px/28px var(--td-font); letter-spacing: -0.3px; color: #14123a; text-wrap: balance; }
.pl-lead { margin: -6px 0 16px; font: 500 15px/21px var(--td-font); color: #5b46e6; }

/* answer cards: the letter in its colour, the words, the mark after the pick */
.pl-opts { list-style: none; display: grid; gap: var(--td-gap); margin: 0; padding: 0; }
.pl-opt { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 16px 10px 12px; border: 0; border-radius: var(--td-r-card); background: #fff;
  box-shadow: inset 0 0 0 1px #e6e3f5; text-align: left; font: 700 16px/21px var(--td-font); color: #14123a; cursor: pointer; }
.pl-opt b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font: 800 16px/1 var(--td-font); }
.pl-opts li:nth-child(4n+1) .pl-opt b { background: #ec2d8f; }
.pl-opts li:nth-child(4n+2) .pl-opt b { background: #1f7bf2; }
.pl-opts li:nth-child(4n+3) .pl-opt b { background: #f5b301; }
.pl-opts li:nth-child(4n+4) .pl-opt b { background: #13c08a; }
.pl-opt:disabled { cursor: default; }
.pl-opt.right { background: #08a33a; color: #fff; box-shadow: none; }
.pl-opt.wrong { background: #f0392b; color: #fff; box-shadow: none; }
.pl-opts li .pl-opt.right b, .pl-opts li .pl-opt.wrong b { background: #fff; }
.pl-opts li .pl-opt.right b { color: #08a33a; } .pl-opts li .pl-opt.wrong b { color: #f0392b; }
.pl-opt.right::after, .pl-opt.wrong::after { content: ''; width: 16px; height: 16px; }
.pl-opt.right::after { width: 14px; height: 8px; margin: -4px 0 0 2px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.pl-opt.wrong::after { background:
  linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
  linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%); }
.pl-opt.dim { opacity: .55; }

/* the hint, then the feedback after the pick */
.pl-hint { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; margin: var(--td-gap) 0 0;
  padding: 12px 16px; border-radius: var(--td-r-card); background: #ece8ff; color: #4a36d6; font: 600 15px/20px var(--td-font); }
.pl-hint img { width: 28px; height: 28px; object-fit: contain; }
.pl-fb { margin: var(--td-gap) 0 0; padding: 14px 16px 16px; border-radius: var(--td-r-card); font: 500 15px/21px var(--td-font); }
.pl-fb b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 800 16px/1.2 var(--td-font); }
.pl-fb.ok { background: #e9fbe9; box-shadow: inset 0 0 0 1.5px #3bc35b; color: #0a7a2b; }
.pl-fb.no { background: #fff0ef; box-shadow: inset 0 0 0 1.5px #f2958c; color: #c0261a; }
.pl-go { display: block; width: 100%; min-height: 56px; margin: 16px 0 0; border: 0; border-radius: 100px;
  background: linear-gradient(90deg, #8b6cf6, #5b46e6); color: #fff; font: 800 18px/1 var(--td-font); cursor: pointer;
  text-align: center; text-decoration: none; display: grid; place-items: center; }
.pl-go:disabled { background: #e6e6ec; color: #7d7f91; cursor: default; }

/* ==== the Complete page: the purple stage, the art and the big two-line title, the reward chips, the next step card,
   What You Learned, then the Back / Go pills (the Back/Go rule: Go is the filled one) */
.pl-done { min-height: 100vh; padding: calc(var(--td-status) - 8px) var(--td-gutter) 24px; color: #fff;
  background: radial-gradient(360px 260px at 30% 12%, rgb(255 255 255 / 18%), transparent 70%), linear-gradient(170deg, #8a5cf6, #5a2fe0 60%, #4b22c9); }
body:has(.pl-done) { background: #4b22c9; }
.pl-done .pl-top { justify-content: flex-end; }
.pl-done .pl-x { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 80%); }
.pl-dhead { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 4px; }
.pl-dhead img { width: 104px; height: 120px; object-fit: contain; }
.pl-dhead .tier { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / 22%);
  font: 800 12px/1 var(--td-font); letter-spacing: .6px; text-transform: uppercase; }
.pl-dhead h1 { font: 800 28px/1.08 var(--td-font); letter-spacing: -0.5px; }
.pl-dhead h1 .nw { display: inline; color: inherit; white-space: nowrap; }
.pl-dhead h1 span { display: block; color: #ffd84a; }
.pl-dhead p { margin: 8px 0 0; font: 600 15px/20px var(--td-font); opacity: .95; }
.pl-sub { margin: 16px 0 0; font: 500 15px/21px var(--td-font); opacity: .95; }
.pl-earn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; }
.pl-earn .lb { padding: 6px 12px; border-radius: 8px; background: #ffd84a; color: #3a2a00; font: 800 13px/1 var(--td-font); transform: rotate(-2deg); }
.pl-earn .ch { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 99px;
  background: rgb(255 255 255 / 16%); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 55%); font: 800 16px/1 var(--td-font); }
.pl-earn .ch img { width: 22px; height: 22px; object-fit: contain; }
.pl-next { display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; align-items: center; gap: 12px; margin: 20px 0 0;
  padding: 14px 16px; border-radius: var(--td-r-card); background: linear-gradient(120deg, #ffd84a, #ffbe2e); color: #3a2a00; text-decoration: none; }
.pl-next img { width: 56px; height: 56px; object-fit: contain; }
.pl-next b { display: block; font: 800 17px/1.2 var(--td-font); }
.pl-next small { display: block; margin-top: 2px; font: 600 14px/19px var(--td-font); }
.pl-next::after { content: ''; width: 9px; height: 9px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); }
.pl-learned { margin: var(--td-gap) 0 0; padding: 16px 18px 18px; border-radius: var(--td-r-card); background: #fff; color: #14123a; }
.pl-learned h2 { margin: 0 0 10px; font: 700 22px/27px var(--td-font); }
.pl-learned ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.pl-learned li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font: 500 15px/21px var(--td-font); }
.pl-learned li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; margin-top: -1px;
  background: #13b34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pl-pills { display: grid; gap: var(--td-gap); margin: 16px 0 0; }
.pl-pill { display: grid; place-items: center; min-height: 56px; padding: 0 20px; border-radius: 100px; text-decoration: none;
  font: 800 17px/1.2 var(--td-font); text-align: center; }
.pl-pill.go { background: #0b0b12; color: #fff; box-shadow: 0 0 0 1.5px #3dffd0; }
.pl-pill.back { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 75%); }
.pl-virtual { margin: 14px 0 0; text-align: center; font: 600 13px/18px var(--td-font); opacity: .9; }
.pl-done .td-note { color: #5a4300; }