/* The course dashboard (assets/course/dash.js, docs/dashboard.md): five questions, design F on the dashboard canvas.
   Scoped to .d5. Course colour comes from the page's data-cover (assets/course/r3.css: --accent, --ctint, --bbg,
   --bac); neutrals from assets/theme.css, so dark mode follows. Fonts: Inter Display for the questions, Kalam for
   the handwritten notes (both in assets/fonts/fonts.css). */
.d5{--d5-navy:#0B1A33;--d5-gold:#FFD23F;--d5-loss:#D9694F;--d5-loss-t:#B4412F;--d5-warm:#FCE8E3;--d5-cool:var(--ctint);max-width:900px;margin:0 auto;padding:6px 0 0;}
:root[data-theme="dark"] .d5{--d5-navy:#0B1528;--d5-loss:#E07A62;--d5-loss-t:#F0A08C;--d5-warm:rgba(224,122,98,.16);}
.d5 a{color:var(--accent-text,var(--accent));}
.d5-sec{margin:56px 0 0;}
.d5-sec:first-child{margin-top:28px;}
.d5-q{margin:0 0 16px;}
.d5-n{font:700 20px/1.2 'Kalam','Nunito',cursive;color:var(--hand,#A86F00);margin:0 0 2px;}
.d5-q h2,.r3-inner .r3-body .d5-q h2{font:900 30px/1.05 var(--display,var(--font-display));letter-spacing:-.035em;margin:0;color:var(--ink);}
.d5-q h2 span,.r3-inner .r3-body .d5-q h2 span{display:inline;color:var(--accent-text,var(--accent));}
.d5-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 18px 40px -34px rgba(11,26,51,.45);}
.d5-lead{margin:0 0 2px;font-weight:800;font-size:19px;color:var(--ink);}
.d5-mut{color:var(--muted);font-size:14.5px;margin:0;}
.d5-hand{font:700 19px/1.25 'Kalam','Nunito',cursive;color:var(--hand,#A86F00);margin:6px 0 0;}
.d5-k{font-size:12.5px;color:var(--muted);margin:0 0 4px;font-weight:700;}
.d5-spacer{flex:1;}
.d5-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.d5-empty{color:var(--muted);margin:14px 0 0;}

/* 1 what to do now: the dark card, like the channel's thumbnails */
.d5-now{background-color:var(--d5-navy);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;color:#fff;border-radius:22px;padding:30px;}
:root[data-theme="dark"] .d5-now{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.d5-now-top{display:flex;gap:22px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;}
.d5-now-txt{flex:1 1 360px;min-width:0;}
.d5-now-t{margin:0;font:900 29px/1.12 var(--display,var(--font-display));letter-spacing:-.03em;color:#fff;}
.d5-now-t span{color:var(--bac,#2EE6D6);}
.d5-now-b{margin:10px 0 0;color:#C7D3E6;font-size:15.5px;}
.d5-now-b a{color:var(--bac,#2EE6D6);}
.d5-now-go{text-align:center;}
.d5-starthere{margin:0 0 2px;font:700 18px 'Kalam','Nunito',cursive;color:var(--d5-gold);}
.d5-starthere-a{display:block;margin:0 auto 6px;color:var(--d5-gold);}
.d5 .d5-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:900 17px var(--font-ui);padding:15px 24px;border-radius:14px;background:var(--bac,#2EE6D6);color:#0B1A33;min-height:52px;box-sizing:border-box;}
.d5 .d5-btn:hover{filter:brightness(1.08);color:#0B1A33;}
.d5-then{margin-top:22px;border-top:1px solid rgba(255,255,255,.12);}
.d5 .d5-then-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;color:#E5ECF6;}
.d5-then-row span{flex:1;}
.d5-then-row b{color:var(--bac,#2EE6D6);white-space:nowrap;}
.d5 .d5-then-row:hover span{color:#fff;}
.d5-steps{margin:16px 0 0;padding-left:22px;color:#E5ECF6;display:grid;gap:8px;}
.d5-steps a{color:var(--bac,#2EE6D6);font-weight:800;}
.d5-today{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px;font-size:14px;color:#C7D3E6;}
.d5-today b{color:#fff;}
.d5-streak,.d5-freeze,.d5 .d5-remind{display:inline-flex;align-items:center;gap:6px;}
.d5-streak svg{color:var(--d5-gold);}
.d5-freeze svg{color:#8FD8F0;}
.d5 .d5-remind{color:#C7D3E6;}

/* 2 the chart */
.d5-chart{display:block;width:100%;height:auto;margin:12px 0 0;overflow:visible;font-family:var(--font-ui);}
.d5-chart-n{display:none;}
@media (max-width:640px){.d5-chart-w{display:none;}.d5-chart-n{display:block;}}
.d5-axis{stroke:var(--line);}
.d5-ahead{fill:var(--surface2);}
.d5-ahead-t{fill:var(--muted);font-size:12px;}
.d5-goal{stroke:var(--hand,#A86F00);stroke-width:1.5;stroke-dasharray:6 6;}
.d5-goal-t,.d5-note{fill:var(--hand,#A86F00);font-family:'Kalam','Nunito',cursive;font-weight:700;}
.d5-note-mut{fill:var(--muted);font-family:'Kalam','Nunito',cursive;font-weight:700;}
.d5-note-acc{fill:var(--accent-text,var(--accent));font-family:'Kalam','Nunito',cursive;font-weight:700;}
.d5-note-ink{fill:var(--ink);font-family:'Kalam','Nunito',cursive;font-weight:700;}
.d5-area{fill:var(--accent);fill-opacity:.08;}
.d5-line{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;}
.d5-proj{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:4 7;stroke-linecap:round;}
.d5-proj-dot{fill:var(--white);stroke:var(--accent);stroke-width:2.5;}
.d5-here{fill:var(--accent);}
.d5-here-ring{fill:none;stroke:var(--accent);stroke-opacity:.25;stroke-width:4;}
.d5-exam{fill:var(--ink);}
.d5-examday{stroke:var(--ink);stroke-width:2.5;}
.d5-strong{fill:var(--ink);font-weight:800;}
.d5-small{fill:var(--muted);}
.d5-arrow{fill:none;stroke:var(--hand,#A86F00);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.d5-arrow-mut{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.d5-arrow-acc{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.d5-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px;font-size:12.5px;color:var(--muted);}
.d5-key span{display:inline-flex;align-items:center;gap:7px;}
.d5-key i{display:inline-block;}
.d5-k-line{width:22px;height:3px;border-radius:2px;background:var(--accent);}
.d5-k-exam{width:8px;height:8px;background:var(--ink);transform:rotate(45deg);}
.d5-k-goal{width:22px;border-top:2px dashed var(--hand,#A86F00);}

/* 3 readiness */
.d5-ready-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.d5-big{margin:0;line-height:1;}
.d5-big b{font:900 54px/1 var(--display,var(--font-display));letter-spacing:-.04em;color:var(--ink);}
.d5-big span{color:var(--muted);font-size:20px;font-weight:700;}
.d5-big .premium-badge,.d5-big .pill-premium{margin-left:8px;vertical-align:middle;}
.d5-ready-side{margin:0;text-align:right;color:var(--muted);font-size:14px;}
.d5-scale{position:relative;height:14px;border-radius:99px;background:var(--track);margin:20px 0 6px;}
.d5-scale i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.d5-scale b{position:absolute;top:-7px;width:3px;height:28px;margin-left:-1px;border-radius:2px;background:var(--hand,#A86F00);}
.d5-scale-k{position:relative;height:18px;font-size:12.5px;color:var(--muted);}
.d5-scale-k span:first-child{position:absolute;left:0;}
.d5-scale-k span:last-child{position:absolute;right:0;}
.d5-scale-k .d5-scale-g{position:absolute;transform:translateX(-50%);color:var(--hand,#A86F00);font-weight:800;}
.d5-gap-h{margin:22px 0 4px;font-weight:900;font-size:18px;color:var(--ink);}
.d5-gap-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line-soft,var(--line));color:var(--ink);text-decoration:none;}
.d5 a.d5-gap-row{color:var(--ink);}
.d5 a.d5-gap-row:hover span{text-decoration:underline;}
.d5-gap-row span{flex:1;}
.d5-gap-v{color:var(--accent-text,var(--accent));font-size:18px;white-space:nowrap;}
.d5-gap-v.ok{font:700 17px 'Kalam','Nunito',cursive;color:var(--good-text,#1F6E3E);}
.d5-gap-v.mut{font-size:14px;font-weight:700;color:var(--muted);}
.d5-extra{margin-top:18px;}
.d5-foot{margin:12px 0 0;font-size:12.5px;color:var(--muted);}

/* 4 focus */
.d5-focus-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.d5-focus-top .d5-mut{max-width:30em;}
.d5-seg{display:inline-flex;background:var(--surface2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap;}
.d5-seg button{border:0;border-radius:9px;padding:9px 14px;font:800 14px var(--font-ui);cursor:pointer;min-height:40px;background:transparent;color:var(--muted);}
.d5-seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(11,26,51,.15);}
.d5-view-i{margin-top:10px;}
.d5-view-f{margin-top:12px;padding-top:14px;border-top:1px solid var(--line-soft,var(--line));}
.d5 .d5-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-top:1px solid var(--line-soft,var(--line));text-decoration:none;color:var(--ink);}
.d5 .d5-row:first-child{border-top:0;}
.d5 .d5-row:hover .d5-row-n b{text-decoration:underline;}
.d5-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--d5-cool);color:var(--accent-text,var(--accent));font-size:13px;}
.d5-ic.warm{background:var(--d5-warm);color:var(--d5-loss-t);}
.d5-row-n{flex:0 0 220px;min-width:0;display:flex;flex-direction:column;}
.d5-row-n small,.d5-row-b small{font-size:12.5px;color:var(--muted);}
.d5-row-b{flex:1;min-width:60px;display:flex;flex-direction:column;gap:4px;}
.d5-bar{display:block;height:10px;border-radius:99px;background:var(--track);overflow:hidden;}
.d5-bar i{display:block;height:100%;border-radius:99px;background:var(--d5-loss);}
.d5-bar-acc i{background:var(--accent);}
.d5-go{font-weight:800;color:var(--accent-text,var(--accent));white-space:nowrap;}

/* 5 record */
.d5-rec-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;margin-bottom:24px;}
.d5-rec-s p{margin:0 0 8px;}
.d5-rec-s b{font-size:22px;color:var(--ink);}
.d5-badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:18px;text-align:center;}
.d5-badges li{position:relative;display:flex;flex-direction:column;align-items:center;}
.d5-badges li > b{font-size:14px;color:var(--ink);}
.d5-badges small{font-size:12.5px;color:var(--muted);}
.d5-med{width:64px;height:64px;border-radius:50%;margin:0 0 8px;display:grid;place-items:center;font-weight:900;font-size:14px;}
.d5-badges .on .d5-med{background:var(--d5-navy);color:var(--bac,#2EE6D6);box-shadow:0 0 0 4px var(--ctint);}
.d5-badges .off .d5-med{background:var(--white);border:2px dashed var(--line);color:var(--muted);}
.d5-next{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:26px;padding:16px 18px;border-radius:16px;background:var(--tint-amber,#FBEFD6);color:var(--ink);}
.d5-next > svg{color:var(--hand,#A86F00);flex:none;}
.d5-next > span{flex:1 1 260px;}
.d5-next a{font-weight:800;}

/* the folded detail under each question */
.d5-more{margin-top:18px;border-top:1px solid var(--line-soft,var(--line));}
.d5-card > .d5-more:first-of-type{margin-top:22px;}
.d5-more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 0 0;font-weight:800;font-size:14.5px;color:var(--accent-text,var(--accent));min-height:44px;box-sizing:border-box;}
.d5-more-body h3.cx-row-name,.d5-more-body .cx-panel > h3,.d5-more-body .cx-level h3{font:900 18px/1.25 var(--display,var(--font-display));letter-spacing:-.01em;margin:0 0 6px;}
.d5-more > summary::-webkit-details-marker{display:none;}
.d5-more > summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px;transition:transform .15s;}
.d5-more[open] > summary::after{transform:rotate(225deg) translateY(-2px);}
.d5-more-body{padding:12px 0 0;}
.d5-more-body > .cx-panel,.d5-more-body > div > .cx-panel{box-shadow:none;}
.d5-now .d5-more{border-top-color:rgba(255,255,255,.12);}
.d5-now .d5-more > summary{color:var(--bac,#2EE6D6);}
.d5-now .d5-more-body{color:var(--ink);}

.d5-house{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:44px 0 0;font-size:14px;color:var(--muted);}

/* the band's level chip */
.r3 .band .d5-lvl{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);color:#fff;font-size:14.5px;}
.r3 .band .d5-lvl b{color:var(--bac,#2EE6D6);}
.r3 .band .d5-lvl small{color:rgba(255,255,255,.7);font-size:12.5px;}

@media (max-width:700px){
  .d5-card,.d5-now{padding:20px;}
  .d5-q h2,.r3-inner .r3-body .d5-q h2{font-size:24px;}
  .d5-now-t{font-size:23px;}
  .d5-sec{margin-top:44px;}
  .d5-row-n{flex-basis:100%;}
  .d5 .d5-row{flex-wrap:wrap;gap:8px 14px;}
  .d5-row-b{flex:1 1 140px;}
  .d5-ready-side{text-align:left;}
  .d5-now-go{width:100%;text-align:left;}
  .d5-starthere,.d5-starthere-a{display:none;}
  .d5 .d5-btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.d5-more > summary::after{transition:none;}}