/* Progress pages: every course's dashboard.html (site redesign round 2, step 4;
   docs/site-redesign.md, mockup S10-Dashboard on the design canvas).
   Loaded after hub.css, so it restyles the shared dashboard pieces from
   assets/course/hub.js (cx-stats, cx-panel, cx-row, cx-next ...) in the
   homepage's look: grid paper, a big two-tone headline with one handwritten
   line, white cards, one dark "do this next" card. Colors come only from the
   theme tokens, so dark mode follows them. Nothing here changes what the
   pages read or store. */

body{
  --db-display:'Inter Display','Nunito',system-ui,sans-serif;
  --db-grid:color-mix(in srgb,var(--ink) 4%,transparent);
  --db-on-navy-soft:color-mix(in srgb,var(--on-accent) 74%,var(--navy));
  --db-track:color-mix(in srgb,var(--ink) 8%,transparent);
  background-image:linear-gradient(var(--db-grid) 1px,transparent 1px),linear-gradient(90deg,var(--db-grid) 1px,transparent 1px);
  background-size:44px 44px;
}

/* ---- the opener: course pill, two-tone headline, the hand line ---------- */
.page-head.db-head{background:none;border:0;box-shadow:none;border-radius:0;padding:26px 0 4px;margin-top:6px;}
.db-head .eyebrow{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;border:1.5px solid currentColor;border-radius:999px;padding:3px 12px;font:800 12px/1.4 var(--font-ui);letter-spacing:.06em;color:var(--cink);}
.db-head .eyebrow .cx-beta{margin-left:0;}
.db-head h1{font:900 clamp(40px,5.4vw,62px)/1 var(--db-display);letter-spacing:-.04em;margin:16px 0 12px;color:var(--ink);text-wrap:balance;}
.db-head h1 span{display:block;color:var(--cink);}
.db-head .db-hand{font:700 clamp(19px,2vw,24px)/1.25 'Kalam','Nunito',cursive;color:var(--amber-text);margin:0 0 8px;max-width:none;}
.db-head p.lede,.db-head p:not(.db-hand){font:600 16px/1.6 var(--font-ui);color:var(--muted);max-width:60ch;margin:0;}

/* ---- stat tiles --------------------------------------------------------- */
.cx-db .cx-stats{gap:16px;}
.cx-db .cx-stat{background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:none;padding:20px 22px;}
.cx-db .cx-stat-num{font:900 clamp(32px,3.4vw,42px)/1.05 var(--db-display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
.cx-db .cx-stat-num small{font:800 16px var(--font-ui);letter-spacing:0;color:var(--muted);}
.cx-db .cx-stat-label{font:800 14px/1.35 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:6px;}
.cx-db .cx-stat-sub{font:600 13px/1.4 var(--font-ui);color:var(--muted);margin-top:2px;}

/* ---- panels --------------------------------------------------------------- */
.cx-db .cx-panel,.cx-db .xd-card{border-radius:22px;box-shadow:none;border:1px solid var(--line);padding:24px 26px;}
.cx-db .cx-panel > h2,.cx-db .xd-card h2{font:900 22px/1.15 var(--db-display);letter-spacing:-.025em;color:var(--ink);margin:0 0 6px;}
.cx-db .cx-hint{margin:0 0 14px;font:600 14px/1.55 var(--font-ui);}
.cx-db .cx-emptynote{font:600 14.5px/1.55 var(--font-ui);}

/* rows: name and value, a thick bar in the course color */
.cx-db .cx-row{padding:12px 0;}
.cx-db .cx-row-name{font:800 15px/1.35 var(--font-ui);}
.cx-db .cx-row-val{font:700 13px var(--font-ui);}
.cx-db .cx-row-val b{font:900 17px var(--db-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cx-db .cx-row .track{height:10px;border-radius:999px;background:var(--db-track);}
.cx-db .cx-row .track > i{border-radius:999px;}
.cx-db .cx-row-foot{font-size:12.5px;}
.cx-db .cx-go{padding:7px 14px;border-width:1.5px;font-size:12.5px;min-height:32px;display:inline-flex;align-items:center;}
.cx-db .cx-group-body .cx-row-name{font-size:14px;}

/* ---- "do this next": the one dark card ---------------------------------- */
.cx-db .cx-next{background:var(--navy);border-color:var(--navy);color:var(--on-accent);
  background-image:linear-gradient(color-mix(in srgb,var(--on-accent) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--on-accent) 5%,transparent) 1px,transparent 1px);background-size:36px 36px;}
.cx-db .cx-next::before{content:'do this next';display:block;font:700 22px/1.2 'Kalam','Nunito',cursive;color:var(--amber);margin:0 0 4px;}
.cx-db .cx-next:has(ol)::before{content:'start here';}
.cx-db .cx-next > h2{color:var(--on-accent);font-size:26px;}
.cx-db .cx-next > p{color:var(--db-on-navy-soft);font-size:15.5px;margin:4px 0 4px;}
.cx-db .cx-next ol{color:var(--on-accent);font:700 15.5px/1.8 var(--font-ui);margin-top:10px;}
.cx-db .cx-next ol a,.cx-db .cx-next-list a,.cx-db .cx-next a{color:var(--on-accent);text-decoration-color:var(--amber);text-underline-offset:3px;}
.cx-db .cx-next-list{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.cx-db .cx-next-list li{background:color-mix(in srgb,var(--on-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--on-accent) 14%,transparent);border-radius:16px;padding:14px 16px;}
.cx-db .cx-next-list a{font:900 16px/1.3 var(--db-display);letter-spacing:-.01em;}
.cx-db .cx-next-list span{color:var(--db-on-navy-soft);font-size:13.5px;}
.cx-db .cx-next-list span a{font:inherit;}
.cx-db .cx-next a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px;}

/* ---- the score chart (NREMT) ------------------------------------------- */
.db-chart{display:block;width:100%;height:auto;margin:12px 0 0;overflow:visible;}
.db-chart-narrow{display:none;}
@media (max-width:560px){.db-chart-wide{display:none;}.db-chart-narrow{display:block;}}
.db-chart text{font:700 12px var(--font-ui);fill:var(--muted);}
.db-chart .db-grid{stroke:var(--line);stroke-width:1;}
.db-chart .db-area{fill:var(--cink);fill-opacity:.1;}
.db-chart .db-line{fill:none;stroke:var(--cink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;}
.db-chart .db-dot{fill:var(--cink);stroke:var(--white);stroke-width:2.5;}
.db-figs{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 0;font:600 14px var(--font-ui);color:var(--muted);}
.db-figs b{font:900 20px var(--db-display);letter-spacing:-.02em;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums;}

/* ---- side column ----------------------------------------------------------- */
.cx-db .cx-level{border-radius:22px;padding:22px;}
.cx-db .premium-card{border-radius:22px;}

/* ---- phones ----------------------------------------------------------------- */
@media (max-width:640px){
  .page-head.db-head{padding-top:14px;}
  .db-head h1{font-size:42px;margin:12px 0 10px;}
  .cx-db .cx-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .cx-db .cx-stat{padding:14px 16px;border-radius:18px;}
  .cx-db .cx-stat-num{font-size:30px;}
  .cx-db .cx-panel,.cx-db .xd-card{padding:18px;border-radius:18px;}
  .cx-db .cx-panel > h2{font-size:20px;}
  .cx-db .cx-next > h2{font-size:22px;}
  .cx-db .cx-next-list{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.page-head.db-head{animation:none;}}

/* One column when only one side of a two-column section has content (assets/course/r3-db.js adds .one). */
.r3-dashboard .r3-db-two.one,.r3-dashboard .r3-db-lead.one{grid-template-columns:1fr}
.r3-dashboard .r3-db-levelTop{margin:0 0 20px}