/* Dashboard shell shared by teacher.html and admin.html (approved mockups in
   docs/superpowers/specs/assets/2026-10-16-plans-credit-dashboards/).
   Tokens live on .dash-app so the student pages that use styles.css are untouched.
   Light only: the site has no dark theme. */
.dash-app{--nv:#0d3b73;--bl:#1677d2;--lb:#29a3e0;--lbs:#e5f3fc;--or:#f28c28;--ors:#fff1e3;--gd:#e9b10e;--gds:#fbf3dc;
  --ink:#132238;--mu:#5a6b80;--ln:#dbe4ee;--pg:#f3f7fb;
  display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh;color:var(--ink);
  background:linear-gradient(90deg,var(--nv) 220px,var(--pg) 220px)}   /* the navy column runs the full page height */
.dash-app *{box-sizing:border-box}

/* sidebar */
.dash-side{background:var(--nv);color:#c8d8ec;padding:14px 10px 24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.dash-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;padding:2px 8px 14px;text-decoration:none}
.dash-brand img{width:28px;height:28px;border-radius:50%;background:#fff}
.dash-role{font-size:11px;color:#f6b26b;padding:0 8px 10px 45px;font-weight:700;letter-spacing:.06em;margin-top:-10px}
.dash-h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:14px 10px 5px;color:#7f9cc0}
.dash-it{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;color:inherit;
  font:inherit;font-size:.95rem;padding:8px 10px;border-radius:7px;margin:0 0 2px;cursor:pointer}
.dash-it:hover{background:rgba(255,255,255,.07);color:#fff}
.dash-it:focus-visible{outline:2px solid var(--lb);outline-offset:1px}
.dash-it[aria-current="page"]{background:rgba(41,163,224,.22);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--lb)}
.dash-it .dash-ic{width:1.3em;text-align:center}
.dash-badge{margin-left:auto;background:var(--or);color:var(--nv);border-radius:99px;font-size:11px;padding:0 7px;font-weight:700;line-height:1.6}
.dash-badge.blue{background:var(--bl);color:#fff}

/* top bar + main */
.dash-body{min-width:0;display:flex;flex-direction:column}
.dash-top{display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--ln);padding:10px 20px;position:sticky;top:0;z-index:5}
.dash-title{color:var(--mu);font-weight:600}
.dash-sp{flex:1}
.dash-burger{display:none;background:none;border:1px solid var(--ln);border-radius:7px;font-size:1.2rem;line-height:1;padding:5px 9px;cursor:pointer;color:var(--nv)}
.dash-chip{border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;background:var(--lbs);color:var(--bl);white-space:nowrap}
.dash-chip-gold{background:linear-gradient(90deg,#f2c232,var(--gd));color:var(--nv)}
.dash-av{width:32px;height:32px;border-radius:50%;background:var(--bl);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.dash-main{padding:20px;max-width:1180px;width:100%}
.dash-main > [hidden]{display:none !important}

/* building blocks */
.dash-hello{font-size:1.35rem;font-weight:700;margin:0 0 2px;color:var(--nv)}
.dash-sub{color:var(--mu);margin:0 0 16px}
.dash-sec{margin:20px 0 8px;font-weight:700;color:var(--nv)}
.dash-grid{display:grid;gap:14px}
.dash-grid.g2{grid-template-columns:1.3fr 1fr}
.dash-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dash-card{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:14px;box-shadow:0 1px 2px rgba(13,59,115,.05);min-width:0}
.dash-card h4{margin:0 0 8px;font-size:12px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;gap:8px}
.dash-card h4 a{color:var(--bl);text-transform:none;letter-spacing:0;text-decoration:none}
.dash-big{font-size:1.6rem;font-weight:700;color:var(--nv);line-height:1.2}
.dash-big small{font-size:.8rem;font-weight:400;color:var(--mu)}
.dash-mu{color:var(--mu)}
.dash-hero{background:linear-gradient(120deg,var(--nv),var(--bl));color:#fff;border:0}
.dash-hero h4{color:#bcd6f2}.dash-hero .dash-big{color:#fff}.dash-hero .dash-mu{color:#d3e4f7}
.dash-hero.gold{box-shadow:inset 0 -3px 0 var(--gd)}
.dash-warn{border-color:var(--or);background:linear-gradient(#fff8f0,#fff)}.dash-warn .dash-big{color:var(--or)}
.dash-bar{height:8px;border-radius:9px;background:#e3ebf4;margin:8px 0}
.dash-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--lb),var(--bl))}
.dash-funnel{display:grid;grid-template-columns:minmax(0,11rem) 3rem 3rem minmax(0,1fr);align-items:center;gap:10px;border-top:1px solid #edf2f7;padding:7px 0;font-size:.92rem}
.dash-funnel:first-of-type{border-top:0}
.dash-funnel b{text-align:right;color:var(--nv)}
.dash-fbar{height:8px;border-radius:9px;background:#e3ebf4;overflow:hidden}
.dash-fbar span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--lb),var(--bl))}
@media (max-width:600px){.dash-funnel{grid-template-columns:minmax(0,1fr) 2.5rem 3rem;row-gap:6px}.dash-fbar{grid-column:1/-1}}
.dash-li{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #edf2f7;padding:7px 0;font-size:.92rem}
.dash-li:first-of-type{border-top:0}
.dash-li > :first-child{min-width:0;overflow-wrap:anywhere}
.dash-li > :last-child{text-align:right;flex:none;max-width:60%}
.dash-neg{color:var(--or);font-weight:600}
.dash-up{color:#1a7f37;font-size:.85rem}
.dash-tile{display:block;width:100%;text-align:center;padding:16px 8px;color:var(--nv);font:inherit;font-weight:600;cursor:pointer}
.dash-tile:hover{border-color:var(--lb)}
.dash-tile b{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 8px;border-radius:10px;background:var(--lbs);font-size:1.3rem}
.dash-btn{display:inline-block;background:var(--or);color:var(--nv);border:0;border-radius:7px;padding:7px 13px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none}
.dash-btn.b{background:var(--bl);color:#fff}
.dash-btn.o{background:#fff;color:var(--bl);border:1px solid var(--bl)}
.dash-btn.r{background:#fff;color:#b42318;border:1px solid #e3b3ad}
.dash-btn.sm{padding:4px 10px;font-size:.82rem}
.dash-link{background:none;border:0;padding:0;color:var(--bl);font:inherit;font-size:.9rem;cursor:pointer}
.dash-chipk{font-size:11px;border-radius:99px;padding:1px 8px;font-weight:600;white-space:nowrap}
.dash-chipk.pp{background:var(--gds);color:#9a7310}.dash-chipk.pr{background:var(--lbs);color:var(--bl)}.dash-chipk.tp{background:#eef1f5;color:var(--mu)}
.dash-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dash-table{width:100%;border-collapse:collapse;font-size:.9rem}
.dash-table td,.dash-table th{padding:8px 6px;border-top:1px solid #edf2f7;text-align:left;vertical-align:top}
.dash-table th{color:var(--mu);font-weight:600;border:0;font-size:.82rem}

/* plan cards (Home) */
.dash-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dash-plan{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:14px;position:relative}
.dash-plan.cur{border:2px solid var(--gd);background:linear-gradient(#fffdf6,#fff)}
.dash-plan .tag{position:absolute;top:-10px;right:12px;background:var(--gd);color:var(--nv);font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px}

/* the existing tool panes inside the shell */
.dash-main > .card{border-color:var(--ln);border-radius:10px;box-shadow:0 1px 2px rgba(13,59,115,.05)}
.dash-main > .card + .card{margin-top:0}
.dash-main > #verify-banner,.dash-main > #due-banner,.dash-main > #quota-notice{margin-bottom:14px}
.dash-main > .help-line,.dash-main > .footer{margin-top:28px}
.dash-links{display:flex;flex-direction:column;gap:2px;margin:0;padding:0 10px}
.dash-links a{color:#9fbadb;font-size:.85rem;text-decoration:none;padding:3px 0}
.dash-links a:hover{color:#fff;text-decoration:underline}
#profile-info .dash-li{margin:0}
.dash-form{max-width:520px;margin:1rem 0;padding-top:.5rem;border-top:1px solid #edf2f7}
.dash-form h3{margin:.25rem 0 .5rem}
.dash-out{margin-left:4px;white-space:nowrap}

/* phones: the sidebar becomes a drawer behind the burger */
.dash-scrim{display:none}
@media (max-width:860px){
  .dash-app{grid-template-columns:minmax(0,1fr);background:var(--pg)}
  .dash-side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:30;transform:translateX(-100%);transition:transform .2s ease}
  body.dash-open .dash-side{transform:none}
  body.dash-open .dash-scrim{display:block;position:fixed;inset:0;background:rgba(10,20,40,.4);z-index:20}
  .dash-burger{display:inline-block}
  .dash-top{padding:8px 12px}
  .dash-main{padding:16px}
  .dash-grid.g2,.dash-grid.g3,.dash-plans{grid-template-columns:minmax(0,1fr)}
  .dash-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.dash-side{transition:none}}