/* ECG Lab — dashboard viewport model v3
   Harmonized desktop overview: one-screen Dashboard without crushing typography.
   Content-heavy destinations keep their natural scrolling. Small-height/mobile
   screens remain scrollable so legibility and touch targets are preserved. */

@media (min-width:1024px) and (min-height:700px){
  body.ui-foundation-v3:has(#dashboard.page.active){
    overflow-y:hidden;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .main{
    height:100dvh;
    min-height:0;
    padding:14px 24px 16px!important;
    overflow:hidden;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .topbar{
    min-height:54px;
    margin-bottom:12px!important;
    align-items:center!important;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .topbar h1{
    font-size:clamp(1.55rem,1.75vw,1.9rem)!important;
    line-height:1.08!important;
    letter-spacing:-.02em;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .topbar p{
    margin-top:4px!important;
    font-size:.9rem!important;
    line-height:1.35!important;
  }

  /* The Dashboard has three balanced bands: hero, KPIs and learning focus. */
  body.ui-foundation-v3 #dashboard.page.active{
    display:grid!important;
    grid-template-rows:clamp(218px,28vh,258px) clamp(94px,10.5vh,104px) minmax(238px,1fr);
    gap:14px;
    height:min(calc(100dvh - 96px),860px);
    min-height:0;
    overflow:hidden;
    align-content:start;
  }

  /* Hero: still the visual anchor, but no longer overwhelms the page. */
  body.ui-foundation-v3 #dashboard .hero{
    min-height:0!important;
    height:100%;
    grid-template-columns:minmax(0,1.42fr) minmax(230px,.58fr)!important;
    padding:clamp(22px,2vw,30px)!important;
    gap:24px!important;
    border-radius:26px!important;
    align-items:center!important;
  }

  body.ui-foundation-v3 #dashboard .hero>div:first-child{
    align-self:center;
  }

  body.ui-foundation-v3 #dashboard .hero .eyebrow{
    padding:6px 10px!important;
    font-size:.7rem!important;
    line-height:1!important;
    letter-spacing:.035em!important;
  }

  body.ui-foundation-v3 #dashboard .hero h2{
    max-width:900px;
    margin:11px 0 8px!important;
    font-size:clamp(2.2rem,2.75vw,2.9rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }

  body.ui-foundation-v3 #dashboard .hero p{
    max-width:760px;
    margin:0!important;
    font-size:clamp(.9rem,1vw,.98rem)!important;
    line-height:1.5!important;
  }

  body.ui-foundation-v3 #dashboard .hero .cta{
    margin-top:15px!important;
    gap:9px!important;
  }

  body.ui-foundation-v3 #dashboard .hero .btn{
    min-height:44px!important;
    padding:9px 16px!important;
    border-radius:13px!important;
    font-size:.86rem!important;
  }

  body.ui-foundation-v3 #dashboard .pulse{
    align-self:stretch;
    min-width:0;
  }

  body.ui-foundation-v3 #dashboard .pulse-ring{
    width:clamp(128px,11.5vw,164px)!important;
    height:clamp(128px,11.5vw,164px)!important;
    font-size:44px!important;
    box-shadow:0 0 0 22px rgba(76,224,179,.03),0 0 0 46px rgba(110,168,255,.018)!important;
  }

  /* KPI strip: readable values, consistent labels, equal card weight. */
  body.ui-foundation-v3 #dashboard .stats{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin-top:0!important;
    gap:12px!important;
  }

  body.ui-foundation-v3 #dashboard .stat{
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    min-height:0!important;
    height:100%;
    padding:14px 16px!important;
    border-radius:20px!important;
  }

  body.ui-foundation-v3 #dashboard .stat .label{
    font-size:.77rem!important;
    line-height:1.2!important;
    font-weight:650!important;
  }

  body.ui-foundation-v3 #dashboard .stat strong{
    margin:5px 0 2px!important;
    font-size:clamp(1.9rem,2.35vw,2.35rem)!important;
    line-height:.98!important;
    letter-spacing:-.03em!important;
  }

  body.ui-foundation-v3 #dashboard .stat small{
    font-size:.75rem!important;
    line-height:1.25!important;
  }

  /* Lower row: 58/42 balance. Both cards fill the remaining space and their
     inner content is distributed instead of being crushed at the top. */
  body.ui-foundation-v3 #dashboard .two{
    display:grid!important;
    grid-template-columns:minmax(0,1.38fr) minmax(380px,1fr)!important;
    align-items:stretch!important;
    margin-top:0!important;
    gap:14px!important;
    min-height:0;
    overflow:hidden;
  }

  body.ui-foundation-v3 #dashboard .two>.card{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border-radius:22px!important;
  }

  body.ui-foundation-v3 #dashboard .section{
    padding:16px 18px!important;
  }

  body.ui-foundation-v3 #dashboard .section-head{
    margin-bottom:10px!important;
    min-height:24px;
  }

  body.ui-foundation-v3 #dashboard .section-head h3{
    margin:0!important;
    font-size:1.08rem!important;
    line-height:1.2!important;
    letter-spacing:-.015em!important;
  }

  body.ui-foundation-v3 #dashboard .section-head .badge{
    font-size:.67rem!important;
    padding:5px 8px!important;
  }

  /* Continue studying: three comfortable, equal-height actions. */
  body.ui-foundation-v3 #dashboard .two>.card:first-child{
    display:flex!important;
    flex-direction:column;
  }

  body.ui-foundation-v3 #dashboard .two>.card:first-child .list{
    flex:1;
    display:grid!important;
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:8px!important;
    min-height:0;
  }

  body.ui-foundation-v3 #dashboard .list-item{
    min-height:0!important;
    height:100%;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    padding:10px 12px!important;
    gap:11px!important;
    border-radius:15px!important;
    align-items:center!important;
  }

  body.ui-foundation-v3 #dashboard .list-num{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    font-size:.82rem!important;
  }

  body.ui-foundation-v3 #dashboard .list-item h4{
    margin:0 0 3px!important;
    font-size:.9rem!important;
    line-height:1.2!important;
    letter-spacing:-.01em!important;
  }

  body.ui-foundation-v3 #dashboard .list-item p{
    margin:0!important;
    font-size:.73rem!important;
    line-height:1.25!important;
  }

  body.ui-foundation-v3 #dashboard .list-item .badge{
    font-size:.67rem!important;
    padding:5px 8px!important;
  }

  /* Skill map: five rows with stable rhythm and thicker, easier-to-read bars. */
  body.ui-foundation-v3 #dashboard .two>.card:nth-child(2){
    display:grid!important;
    grid-template-rows:auto repeat(5,minmax(0,1fr));
    align-items:center;
  }

  body.ui-foundation-v3 #dashboard .two>.card:nth-child(2) .section-head{
    align-self:start;
  }

  body.ui-foundation-v3 #dashboard .skill{
    grid-template-columns:minmax(120px,148px) minmax(140px,1fr) 42px!important;
    gap:10px!important;
    margin:0!important;
    min-height:0;
    font-size:.78rem!important;
    line-height:1.18!important;
    align-items:center!important;
  }

  body.ui-foundation-v3 #dashboard .skill span{
    font-weight:650!important;
  }

  body.ui-foundation-v3 #dashboard .skill b{
    font-size:.78rem!important;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }

  body.ui-foundation-v3 #dashboard .progress{
    height:8px!important;
  }

  /* Keep the floating Tutor clear of the Dashboard content edge. */
  body.ui-foundation-v3:has(#dashboard.page.active) .ft2-fab{
    right:18px;
    bottom:18px;
    padding:10px 13px;
  }
}

/* Short notebooks: preserve the hierarchy instead of shrinking text to tiny sizes. */
@media (min-width:1024px) and (max-height:819px) and (min-height:700px){
  body.ui-foundation-v3:has(#dashboard.page.active) .main{
    padding-top:9px!important;
    padding-bottom:10px!important;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .topbar{
    min-height:44px;
    margin-bottom:8px!important;
  }

  body.ui-foundation-v3 #dashboard.page.active{
    grid-template-rows:clamp(192px,26vh,214px) 84px minmax(218px,1fr);
    gap:10px;
    height:calc(100dvh - 72px);
  }

  body.ui-foundation-v3 #dashboard .hero{
    padding:16px 20px!important;
    gap:18px!important;
  }

  body.ui-foundation-v3 #dashboard .hero h2{
    font-size:clamp(1.9rem,2.45vw,2.25rem)!important;
    margin:8px 0 6px!important;
  }

  body.ui-foundation-v3 #dashboard .hero p{
    font-size:.82rem!important;
    line-height:1.4!important;
  }

  body.ui-foundation-v3 #dashboard .hero .cta{
    margin-top:10px!important;
  }

  body.ui-foundation-v3 #dashboard .hero .btn{
    min-height:39px!important;
    padding:7px 13px!important;
    font-size:.8rem!important;
  }

  body.ui-foundation-v3 #dashboard .pulse-ring{
    width:116px!important;
    height:116px!important;
    font-size:38px!important;
  }

  body.ui-foundation-v3 #dashboard .stat{
    padding:10px 13px!important;
  }

  body.ui-foundation-v3 #dashboard .stat .label,
  body.ui-foundation-v3 #dashboard .stat small{
    font-size:.68rem!important;
  }

  body.ui-foundation-v3 #dashboard .stat strong{
    font-size:1.7rem!important;
    margin:3px 0 1px!important;
  }

  body.ui-foundation-v3 #dashboard .section{
    padding:11px 13px!important;
  }

  body.ui-foundation-v3 #dashboard .section-head{
    margin-bottom:6px!important;
  }

  body.ui-foundation-v3 #dashboard .section-head h3{
    font-size:.96rem!important;
  }

  body.ui-foundation-v3 #dashboard .list-item{
    padding:7px 9px!important;
    gap:9px!important;
  }

  body.ui-foundation-v3 #dashboard .list-num{
    width:31px!important;
    height:31px!important;
    font-size:.75rem!important;
  }

  body.ui-foundation-v3 #dashboard .list-item h4{
    font-size:.8rem!important;
    margin-bottom:1px!important;
  }

  body.ui-foundation-v3 #dashboard .list-item p{
    font-size:.64rem!important;
  }

  body.ui-foundation-v3 #dashboard .skill{
    grid-template-columns:minmax(105px,132px) minmax(120px,1fr) 38px!important;
    gap:8px!important;
    font-size:.69rem!important;
  }

  body.ui-foundation-v3 #dashboard .skill b{
    font-size:.7rem!important;
  }

  body.ui-foundation-v3 #dashboard .progress{
    height:7px!important;
  }
}

/* Large/tall desktops get slightly more breathing room without changing the
   basic proportions or turning the lower cards into oversized empty panels. */
@media (min-width:1440px) and (min-height:900px){
  body.ui-foundation-v3:has(#dashboard.page.active) .main{
    padding-left:28px!important;
    padding-right:28px!important;
  }

  body.ui-foundation-v3 #dashboard.page.active{
    grid-template-rows:268px 108px minmax(270px,1fr);
    height:min(calc(100dvh - 100px),900px);
    gap:16px;
  }

  body.ui-foundation-v3 #dashboard .hero{
    padding:28px 32px!important;
  }

  body.ui-foundation-v3 #dashboard .hero h2{
    font-size:2.85rem!important;
  }

  body.ui-foundation-v3 #dashboard .hero p{
    font-size:1rem!important;
  }

  body.ui-foundation-v3 #dashboard .stat{
    padding:15px 18px!important;
  }

  body.ui-foundation-v3 #dashboard .two{
    grid-template-columns:minmax(0,1.38fr) minmax(420px,1fr)!important;
    gap:16px!important;
  }
}

/* Tablets/phones and very short desktop windows keep normal document scrolling. */
@media (max-width:1023px), (max-height:699px){
  body.ui-foundation-v3:has(#dashboard.page.active){
    overflow-y:auto;
  }

  body.ui-foundation-v3:has(#dashboard.page.active) .main{
    height:auto;
    overflow:visible;
  }

  body.ui-foundation-v3 #dashboard.page.active{
    display:block!important;
    height:auto;
    overflow:visible;
  }
}