/* Dashboard proportions shared by the home and dashboard routes. */
#dashboard-screen .content{max-width:none}
#dashboard-screen .lower{grid-template-columns:1.12fr 1fr .98fr;gap:14px}
#dashboard-screen .lower>.panel{overflow:hidden}
#dashboard-screen #student-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:68px;gap:8px;align-content:start;overflow:auto}
#dashboard-screen #student-courses:has(.student-recommended){grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(60px,1fr)}
#dashboard-screen #student-courses .student-course-item{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;margin:0;padding:8px 48px 8px 18px!important;border-radius:11px;position:relative;overflow:hidden}
#dashboard-screen #student-courses .student-course-item:nth-child(4n+1){background:#eff9fc}
#dashboard-screen #student-courses .student-course-item:nth-child(4n+2){background:#f1fbf5}
#dashboard-screen #student-courses .student-course-item:nth-child(4n+3){background:#fff9ed}
#dashboard-screen #student-courses .student-course-item:nth-child(4n){background:#f7f2fc}
#dashboard-screen #student-courses .student-course-item:before{content:"▤";right:9px;width:32px;height:38px;border-radius:9px;background:#e0f3f2;color:#089da2;box-shadow:none;display:grid;place-items:center;font:600 23px/1 "Segoe UI",Arial,sans-serif}
#dashboard-screen #student-courses [data-course-slug^="option"]:before{content:"Δ"}
#dashboard-screen #student-courses [data-course-slug^="day"]:before{content:"↗"}
#dashboard-screen #student-courses [data-course-slug^="futures"]:before{content:"⇄"}
#dashboard-screen #student-courses [data-course-slug^="algo"]:before{content:"⌘"}
#dashboard-screen #student-courses [data-course-slug="market-profile"]:before{content:"▥"}
#dashboard-screen #student-courses [data-course-slug="volume-profile"]:before{content:"▰"}
#dashboard-screen #student-courses [data-course-slug^="financial"]:before{content:"▦"}
#dashboard-screen #student-courses .student-course-item:after{left:7px;font-size:18px}
#dashboard-screen #student-courses .student-recommend-tag{display:none}
#dashboard-screen #student-courses .student-course-item strong{font-size:clamp(11px,.9vw,16px);line-height:1.35;font-weight:600;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#dashboard-screen #student-courses .student-course-item small{font-size:clamp(9px,.68vw,12px);line-height:1.35;margin-top:4px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Started courses include a lesson count and progress: keep all three rows intact. */
#dashboard-screen #student-courses:not(:has(.student-recommended)){grid-template-rows:none;grid-auto-rows:minmax(90px,max-content);scrollbar-gutter:stable;overscroll-behavior:contain}
#dashboard-screen #student-courses .student-course-item:not(.student-recommended){display:grid;grid-template-rows:auto auto auto;align-content:center;gap:3px;padding:8px 48px 8px 18px!important}
#dashboard-screen #student-courses .student-course-item:not(.student-recommended) strong{font-size:clamp(12px,.75vw,14px);line-height:1.4;min-height:0}
#dashboard-screen #student-courses .student-course-item:not(.student-recommended) small{font-size:10px;line-height:1.4;margin:0;white-space:normal;overflow:visible}
#dashboard-screen #student-courses .student-course-item:not(.student-recommended) .student-watch-meter{margin:0;min-width:0;line-height:1.4;font-size:10px}
#dashboard-screen #student-courses .student-course-item:not(.student-recommended) .student-watch-meter progress{display:block;width:0;flex:1 1 0;min-width:0}
#dashboard-screen .student-systems{display:flex;flex-direction:column;gap:0;padding:4px 14px}
#dashboard-screen .student-systems .topic{flex:1;min-height:0;background:none!important;border:0;border-bottom:1px solid #e1edef;border-radius:0;padding:9px 0;gap:10px;box-shadow:none;text-decoration:none}
#dashboard-screen .student-systems .topic:last-child{border-bottom:0}
#dashboard-screen .student-systems .topic:hover{transform:none;background:#f4fbfb!important}
#dashboard-screen .student-systems .tile-icon{width:36px;height:36px;border-radius:9px;background:#e7f8f4;font-size:23px}
#dashboard-screen .student-systems .topic>span:nth-child(2){min-width:0}
#dashboard-screen .student-systems strong{font-size:clamp(11px,.84vw,16px);line-height:1.4}
#dashboard-screen .student-systems small{font-size:clamp(9px,.64vw,11px);margin-top:3px;line-height:1.4}
.student-system-status{margin-inline-start:auto;white-space:nowrap;color:#8197a6;font-size:10px;padding-inline-start:4px}
#dashboard-screen .student-systems a .student-system-status{color:#009ba3}
@media(min-width:1050px){
 #dashboard-screen>main>.hero{flex:0 0 clamp(150px,20svh,205px);height:clamp(150px,20svh,205px);min-height:0;padding:13px 32px 12px}
 #dashboard-screen .hero-content{height:100%;width:61%;display:flex;flex-direction:column}
 #dashboard-screen .eyebrow{font-size:13px;margin:0 0 6px}
 #dashboard-screen .hero h1{font-size:clamp(26px,2.2vw,42px);line-height:1.2;margin:0 0 6px}
 #dashboard-screen .hero h1+p{font-size:clamp(13px,1.05vw,18px);margin:0 0 8px}
 #dashboard-screen .metrics{margin-top:auto;gap:9px}
 #dashboard-screen .metric{min-height:49px;padding:5px 9px;border-radius:11px}
 #dashboard-screen .metric>div{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;line-height:1.2;font-size:11px}
 #dashboard-screen .metric strong{grid-column:2;grid-row:1;display:block;font-size:19px;line-height:1.1;margin:0}
 #dashboard-screen .metric small{grid-row:2;grid-column:1/-1;font-size:9px;line-height:1.3;margin-top:2px}
 #dashboard-screen .content{flex:1;min-height:0;width:100%;padding:10px 20px 7px;display:grid;grid-template-rows:minmax(0,.74fr) minmax(0,1fr) 13px;gap:11px}
 #dashboard-screen .path-grid{min-height:0;gap:14px}
 #dashboard-screen .card{display:flex;flex-direction:column;min-height:0;border-radius:17px;padding:9px 9px 8px}
 #dashboard-screen .photo{height:auto;min-height:0;aspect-ratio:auto;flex:0 0 51%;border-radius:10px}
 #dashboard-screen .card-body{flex:1;min-height:0;padding:10px 5px 2px;display:flex;flex-direction:column;align-items:flex-start}
 #dashboard-screen .card h2{font-size:clamp(17px,1.15vw,23px);margin:0 0 5px}
 #dashboard-screen .card p{font-size:clamp(11px,.78vw,14px);line-height:1.4;min-height:0;margin:0 0 7px}
 #dashboard-screen .card .button{margin-top:auto;padding:8px 17px;font-size:clamp(11px,.74vw,14px);border-radius:10px}
 #dashboard-screen .round{left:2px;top:11px;width:31px;height:31px}
 #dashboard-screen .lower{margin:0;min-height:0}
 #dashboard-screen .lower>.panel{grid-column:auto;display:flex;flex-direction:column;min-height:0}
 #dashboard-screen .lower .panel-head{min-height:46px;padding:10px 14px;flex-shrink:0}
 #dashboard-screen .lower .panel-head h2{font-size:clamp(16px,1vw,20px)}
 #dashboard-screen .lower .panel-inner{flex:1;min-height:0}
 #dashboard-screen #student-resume{display:block;overflow:hidden;padding:10px}
 #dashboard-screen .student-resume-layout{min-height:0;height:100%;grid-template-columns:29% minmax(0,1fr);gap:13px}
 #dashboard-screen .student-resume-visual{min-height:0}
 #dashboard-screen #student-resume h3{font-size:clamp(16px,1.15vw,23px);margin:0 0 8px}
 #dashboard-screen #student-resume .student-resume-body>p{font-size:clamp(11px,.76vw,14px);line-height:1.5;margin:0 0 9px}
 #dashboard-screen #student-resume .student-resume-guide{padding:9px 11px;margin:3px 0 10px}
 #dashboard-screen #student-resume .student-resume-guide p{font-size:clamp(10px,.72vw,13px);line-height:1.6}
 #dashboard-screen #student-resume .button{flex-shrink:0;min-height:38px;margin-top:auto;padding:9px;font-size:13px}
 #dashboard-screen #student-resume .student-first-note{display:none}
 #dashboard-screen #student-courses{padding:9px;gap:8px}
 #dashboard-screen .demo{font-size:10px;padding:0 4px;line-height:1.2;align-items:center}
}
@media(min-width:1050px) and (max-height:760px){
 #dashboard-screen>main>.hero{flex-basis:145px;height:145px;padding-top:9px;padding-bottom:9px}
 #dashboard-screen .hero h1{font-size:28px}
 #dashboard-screen .hero h1+p{font-size:13px;margin-bottom:5px}
 #dashboard-screen .eyebrow{font-size:11px;margin-bottom:4px}
 #dashboard-screen .metric{min-height:43px;padding:4px 6px}
 #dashboard-screen .metric>div{font-size:10px}
 #dashboard-screen .metric strong{font-size:17px}
 #dashboard-screen .metric small{font-size:8px}
 #dashboard-screen .content{gap:8px;padding:8px 16px 5px}
 #dashboard-screen .lower .panel-head{min-height:36px;padding:7px 10px}
 #dashboard-screen .lower .panel-head h2{font-size:15px}
 #dashboard-screen .card{padding:6px}
 #dashboard-screen .card-body{padding:7px 4px 1px}
 #dashboard-screen .photo{flex-basis:48%}
 #dashboard-screen .card h2{font-size:16px}
 #dashboard-screen .card p{font-size:10px;line-height:1.25;margin-bottom:3px}
 #dashboard-screen .card .button{padding:6px 12px;font-size:10px}
 #dashboard-screen #student-courses{gap:5px;padding:7px}
 #dashboard-screen #student-courses .student-course-item{padding:5px 39px 5px 15px!important}
 #dashboard-screen #student-courses .student-course-item:before{width:26px;height:30px;right:7px;font-size:20px}
 #dashboard-screen #student-courses .student-course-item strong{font-size:10px}
 #dashboard-screen #student-courses .student-course-item small{font-size:8px;margin-top:2px}
 #dashboard-screen .student-systems{padding:3px 10px}
 #dashboard-screen .student-systems .topic{padding:5px 0;gap:7px}
 #dashboard-screen .student-systems .tile-icon{width:28px;height:28px;font-size:20px}
 #dashboard-screen .student-systems strong{font-size:11px}
 #dashboard-screen .student-systems small{font-size:8px}
 #dashboard-screen #student-resume{padding:8px}
 #dashboard-screen #student-resume .student-resume-guide{padding:7px 8px;margin-bottom:6px}
 #dashboard-screen #student-resume .button{min-height:31px;padding:6px;font-size:11px}
}
@media(min-width:701px) and (max-width:1049px){
 #dashboard-screen .lower{grid-template-columns:1fr 1fr}
 #dashboard-screen .lower>.panel:last-child{grid-column:1/-1}
 #dashboard-screen .student-systems{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
 #dashboard-screen .student-systems .topic{min-height:65px}
 #dashboard-screen #student-courses:has(.student-recommended){grid-template-rows:repeat(4,minmax(66px,1fr))}
}
@media(max-width:700px){
 #dashboard-screen .lower{grid-template-columns:1fr}
 #dashboard-screen .lower>.panel:last-child{grid-column:auto}
 #dashboard-screen #student-courses,#dashboard-screen #student-courses:has(.student-recommended){grid-template-rows:repeat(4,minmax(68px,auto));grid-auto-rows:minmax(68px,auto);gap:7px;padding:10px}
 #dashboard-screen #student-courses .student-course-item{padding:9px 40px 9px 15px!important}
 #dashboard-screen #student-courses .student-course-item:before{right:7px;width:26px;height:33px;font-size:21px}
 #dashboard-screen #student-courses .student-course-item strong{font-size:12px}
 #dashboard-screen #student-courses .student-course-item small{font-size:9px}
 #dashboard-screen .student-systems{display:flex;padding:4px 12px}
 #dashboard-screen .student-systems .topic{min-height:64px;padding:10px 0}
 #dashboard-screen .student-systems strong{font-size:14px}
 #dashboard-screen .student-systems small{font-size:11px}
 #dashboard-screen .student-system-status{font-size:10px}
}
@media(max-width:760px){
 #dashboard-screen #student-courses .student-course-item:not(.student-recommended){padding-inline:40px 15px!important}
}

/* Give the dashboard actions a quieter surface and clear space below the copy. */
#dashboard-screen .path-grid .card p{margin-bottom:14px}
#dashboard-screen .path-grid .card .button{
 background:#e6f7f8;border:1px solid #d2edef;color:#16879a;
 border-radius:9px;padding:7px 16px;font-weight:500;
 box-shadow:none;min-height:32px;line-height:1.3;
}
#dashboard-screen .path-grid .card .button:hover{background:#d9f1f3;border-color:#b6dfe3}
@media(min-width:1050px){
 #dashboard-screen .path-grid .photo{flex-basis:48%}
 #dashboard-screen .path-grid .card-body{padding-bottom:4px}
 #dashboard-screen .path-grid .card .button{margin-top:auto}
}
@media(min-width:1050px) and (max-height:760px){
 #dashboard-screen .path-grid .photo{flex-basis:43%}
 #dashboard-screen .path-grid .card p{margin-bottom:11px}
 #dashboard-screen .path-grid .card .button{min-height:28px;padding:5px 13px}
}

/* Fixed course discovery, shared by new and returning learners. */
#dashboard-screen #student-resume.student-discovery .student-resume-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center;display:block}
#dashboard-screen #student-resume.student-discovery .student-resume-visual>span{font-size:clamp(13px,1vw,20px);font-weight:500;line-height:1.45;bottom:18px}
#dashboard-screen #student-resume.student-discovery .student-resume-guide{border-right:1px solid #d8eeeb;border-radius:12px;background:#f0faf8}
#dashboard-screen #student-resume.student-discovery .button{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}
#dashboard-screen #student-resume.student-discovery .student-first-note{display:block;font-size:11px;line-height:1.5;margin:2px 0 10px;color:#8293ac}
#dashboard-screen .student-systems-note{display:flex;align-items:center;gap:10px;position:relative;flex:0 0 auto;min-height:53px;margin:8px 0 6px;padding:10px 12px;border-radius:12px;background:linear-gradient(110deg,#ddfaf4,#b9eee5);overflow:hidden;color:#00aaa6}
.student-systems-note>div{position:relative;z-index:1;min-width:0}
.student-systems-note strong{display:block;font-size:12px;font-weight:500;line-height:1.5;color:#155b80}
.student-systems-note small{display:block;font-size:10px;line-height:1.4;color:#6e94a8}
.systems-note-sun{width:28px;height:28px;flex:none}
.systems-note-leaves{width:70px;height:42px;align-self:flex-end;margin-inline-start:auto;flex:none;margin-bottom:-7px}
@media(min-width:1050px) and (max-height:760px){
 #dashboard-screen #student-resume.student-discovery h3{font-size:17px;line-height:1.3;margin-bottom:5px}
 #dashboard-screen #student-resume.student-discovery .student-first-note{display:none}
 #dashboard-screen #student-resume.student-discovery .student-resume-guide{padding:6px 8px}
 #dashboard-screen #student-resume.student-discovery .button{font-size:12px}
 #dashboard-screen .student-systems-note{min-height:42px;padding:6px 9px;margin-top:5px;margin-bottom:4px}
 .student-systems-note strong{font-size:10px}.student-systems-note small{font-size:9px}
 .systems-note-sun{width:23px;height:23px}.systems-note-leaves{width:52px;height:33px}
}
@media(max-width:700px){
 #dashboard-screen #student-resume.student-discovery .student-resume-layout{display:grid;grid-template-columns:30% minmax(0,1fr);height:auto;min-height:255px;gap:12px;align-items:stretch}
 #dashboard-screen #student-resume.student-discovery .student-resume-visual{grid-column:auto;grid-row:auto;width:auto;height:auto;min-height:245px}
 #dashboard-screen #student-resume.student-discovery .student-resume-visual>span{display:block;font-size:13px;right:9px;left:9px}
 #dashboard-screen #student-resume.student-discovery .student-resume-body{display:flex;min-height:0}
 #dashboard-screen #student-resume.student-discovery .student-resume-body>*{margin:0 0 9px}
 #dashboard-screen #student-resume.student-discovery h3{font-size:20px;line-height:1.35}
 #dashboard-screen #student-resume.student-discovery .student-resume-body>p{font-size:12px}
 #dashboard-screen #student-resume.student-discovery .student-resume-guide{padding:9px}
 #dashboard-screen #student-resume.student-discovery .student-first-note{font-size:10px}
 #dashboard-screen #student-resume.student-discovery .button{margin:4px 0 0;min-height:40px;padding:9px;font-size:13px}
 #dashboard-screen .student-systems-note{margin-bottom:6px}
}
@media(max-width:380px){#dashboard-screen #student-resume.student-discovery h3{font-size:17px}#dashboard-screen #student-resume.student-discovery .student-resume-layout{grid-template-columns:27% minmax(0,1fr)}#dashboard-screen #student-resume.student-discovery .student-resume-visual>span{font-size:11px}}

/* Keep each system title and its explanation visually together. */
#dashboard-screen .student-systems .topic{padding-block:5px;gap:8px}
#dashboard-screen .student-systems .topic>span:nth-child(2){display:flex;flex-direction:column;gap:1px}
#dashboard-screen .student-systems .topic strong{line-height:1.15;margin:0}
#dashboard-screen .student-systems .topic small{line-height:1.2;margin:0}
#dashboard-screen .student-systems .topic .tile-icon{width:32px;height:32px;font-size:21px}
@media(max-width:700px){#dashboard-screen .student-systems .topic{min-height:50px;padding-block:6px}}

/* Five learning cards across desktop, with compact copy and buttons. */
@media(min-width:1050px){
 #dashboard-screen .path-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 #dashboard-screen .path-grid .card{min-width:0}
 #dashboard-screen .path-grid .card-body{padding-inline:6px}
 #dashboard-screen .path-grid .card h2{font-size:clamp(15px,1.05vw,20px);line-height:1.25;padding-inline-end:23px}
 #dashboard-screen .path-grid .round{width:24px;height:24px;left:0}
 #dashboard-screen .path-grid .card .button{min-width:0;max-width:100%;padding-inline:12px;font-size:12px;gap:12px}
}

/* Reserve room for the welcome row, title and complete metric cards. */
@media(min-width:1050px){
 #dashboard-screen>main>.hero{flex-basis:clamp(190px,20svh,205px);height:clamp(190px,20svh,205px);padding-block:12px;box-sizing:border-box}
 #dashboard-screen .hero-content{gap:4px;min-height:0}
 #dashboard-screen .hero-content>*{flex-shrink:0}
 #dashboard-screen .dashboard-welcome-row{margin:0;min-height:26px}
 #dashboard-screen .dashboard-welcome-row .eyebrow{margin:0}
 #dashboard-screen .dashboard-guide-link{padding:5px 10px;font-size:11px;line-height:1.25}
 #dashboard-screen .hero h1{font-size:clamp(26px,2vw,38px);line-height:1.12;margin:0}
 #dashboard-screen .hero h1+p{line-height:1.35;margin:0}
 #dashboard-screen .hero .metrics{margin-top:auto;min-height:49px}
 #dashboard-screen .hero .metric{min-height:49px;box-sizing:border-box}
}
@media(min-width:1050px) and (max-height:760px){
 #dashboard-screen>main>.hero{flex-basis:170px;height:170px;padding-block:10px}
 #dashboard-screen .hero h1{font-size:28px}
 #dashboard-screen .hero .metrics,#dashboard-screen .hero .metric{min-height:43px}
}