/* ================================================================
   FINOTECH WORLD — SINGLE-VIEWPORT DESKTOP LAYOUT
   ----------------------------------------------------------------
   Presentation-only. This layer binds the existing World elements into
   one focused desktop viewport without changing engines, evidence,
   accounting, mastery, adaptive selection, access control or persistence.
   It activates only on sufficiently large desktop viewports. Smaller
   devices retain the existing responsive/scrolling behavior.
   ================================================================ */

@media (min-width: 1200px) and (min-height: 760px) {
  /* Give the learning screen the full width available while keeping the
     global shell recognisably FINOTECH. */
  .app:has(.world-learning-shell){max-width:1660px}

  .topbar.is-learning{
    min-height:66px;
    padding:8px 0;
    gap:18px;
  }
  .topbar.is-learning .wordmark img{height:24px}
  .topbar.is-learning .wordmark b{font-size:17px}
  .topbar.is-learning .wordmark span{font-size:9px}
  .topbar.is-learning .learning-topbar-track{
    max-width:590px;
    min-width:360px;
    padding:0 4px;
  }
  .topbar.is-learning .learning-topbar-track::before{top:15px;left:8%;right:8%}
  .topbar.is-learning .top-learning-stage span{
    width:30px;height:30px;margin-bottom:3px;font-size:10px;
  }
  .topbar.is-learning .top-learning-stage small{font-size:8.5px}
  .topbar.is-learning .topbar-actions{gap:6px}
  .topbar.is-learning .topbar-actions .btn{padding:7px 11px;font-size:11px}
  .topbar.is-learning .topbar-actions .nav-icon{width:18px;height:18px}
  .topbar.is-learning .topbar-actions .nav-icon-home{width:21px;height:21px}
  .topbar.is-learning .topbar-actions .nav-icon-restart{width:20px;height:20px}

  /* Three-column learning cockpit: progress | practice | mentor. */
  .world-learning-shell{
    height:calc(100dvh - 78px);
    min-height:682px;
    max-height:calc(100dvh - 78px);
    max-width:1640px;
    grid-template-columns:180px minmax(0,1fr) 300px;
    gap:14px;
    padding:8px 0 10px;
    overflow:hidden;
    align-items:stretch;
  }

  .world-learning-shell .learning-sidebar,
  .world-learning-shell .learning-main,
  .world-learning-shell .learning-teacher-rail{min-height:0}

  /* LEFT: compress the four progress cards into a compact 2×2 HUD. */
  .world-learning-shell .learning-sidebar{
    position:relative;
    top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:8px;
    overflow:hidden;
  }
  .world-learning-shell .learning-stat-card{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 8px;
    padding:10px;
    border-radius:14px;
  }
  .world-learning-shell .learning-stat-card .learning-side-title{
    grid-column:1/-1;
    margin-bottom:3px;
    font-size:8px;
  }
  .world-learning-shell .world-momentum{
    grid-column:1/-1;
    margin-top:3px;
    padding:8px 9px;
    border-radius:11px;
  }
  .world-learning-shell .world-momentum-head{font-size:9px}
  .world-learning-shell .world-xp-label{font-size:8px}
  .world-learning-shell .world-mastery-line{font-size:9px;margin-top:5px}
  .world-learning-shell .world-badge-mini{font-size:8px;margin-top:5px}

  /* The context card becomes a concise business-state explainer rather than
     repeating the full transaction story already shown in the centre. */
  .world-learning-shell .learning-context-card{
    grid-column:1/-1;
    padding:10px;
    border-radius:14px;
    min-height:0;
  }
  .world-learning-shell .learning-context-card .learning-side-title{font-size:8px;margin-bottom:5px}
  .world-learning-shell .learning-context-icon{font-size:25px;display:inline-block;margin:0 6px 0 0;vertical-align:middle}
  .world-learning-shell .learning-context-card h3{display:inline;font-size:14px}
  .world-learning-shell .learning-context-card p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin:6px 0 0;
    font-size:9.5px;
    line-height:1.35;
  }
  .world-learning-shell .learning-side-action{
    min-height:34px;
    padding:7px 8px;
    font-size:9.5px;
    border-radius:10px;
  }
  .world-learning-shell .learning-statements-icon{width:22px;height:22px;flex-basis:22px;border-radius:6px}
  .world-learning-shell .learning-statements-action{gap:6px}
  .world-learning-shell .learning-records-action{gap:6px}
  .world-learning-shell .learning-records-icon{width:26px;height:26px;flex-basis:26px;border-radius:6px}

  /* CENTRE: the actual learning task owns the viewport. */
  .world-learning-shell .learning-main{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
  }
  .world-learning-shell .learning-main-top{
    flex:0 0 auto;
    padding:0 0 5px;
  }
  .world-learning-shell .learning-shell-nav .btn{padding:6px 11px;font-size:10px}
  .world-learning-shell .world-business-strip{
    flex:0 0 auto;
    grid-template-columns:minmax(145px,1fr) minmax(0,2fr) auto;
    gap:7px;
    padding:7px 9px;
    margin-bottom:6px;
    border-radius:12px;
  }
  .world-learning-shell .world-business-icon{width:30px;height:30px;flex-basis:30px;font-size:15px;border-radius:8px}
  .world-learning-shell .world-business-brand{gap:7px}
  .world-learning-shell .world-business-brand b{font-size:9px}
  .world-learning-shell .world-business-brand small{font-size:8px;margin-top:1px}
  .world-learning-shell .world-business-metrics{gap:5px}
  .world-learning-shell .world-business-metric{padding:5px 6px;border-radius:8px;gap:5px}
  .world-learning-shell .world-business-metric small{font-size:7px}
  .world-learning-shell .world-business-metric b{font-size:9px;margin-top:1px}
  .world-learning-shell .metric-icon{width:21px;height:21px;flex-basis:21px;font-size:11px;border-radius:6px}
  .world-learning-shell .world-business-mission{padding:6px 8px;font-size:8px;border-radius:8px}
  .world-learning-shell .mission-dot{font-size:10px}
  .world-learning-shell .world-business-strip .yard{display:none}

  /* Keep the scenario illustration, but make it a compact visual cue. */
  .world-learning-shell .scene{
    flex:0 0 auto;
    gap:14px;
    padding:0 0 4px;
    min-height:45px;
  }
  .world-learning-shell .sceneObj .icon{font-size:26px}
  .world-learning-shell .sceneObj .lbl{font-size:7px;margin-top:2px}
  .world-learning-shell .sceneObj.active{transform:translateY(-2px) scale(1.04)}

  .world-learning-shell .world-boss-banner{
    flex:0 0 auto;
    margin:0 0 5px;
    padding:6px 9px;
    font-size:9px;
  }
  .world-learning-shell .world-boss-banner small{font-size:8px}

  .world-learning-shell .oq-card{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:13px 18px 11px;
    border-radius:14px;
  }
  .world-learning-shell .learning-step-label{font-size:9px;margin-bottom:4px}
  .world-learning-shell .world-stage-coach{
    flex:0 0 auto;
    max-width:100%;
    margin:0 0 7px;
    padding:6px 8px;
    gap:7px;
    border-radius:9px;
  }
  .world-learning-shell .world-stage-coach-mark{width:25px;height:25px;flex-basis:25px;font-size:9px}
  .world-learning-shell .world-stage-coach b{font-size:9.5px}
  .world-learning-shell .world-stage-coach span{font-size:8px;margin-top:1px}
  .world-learning-shell .oq-card > .eyebrow{font-size:8px;margin-bottom:4px}
  .world-learning-shell .oq-context{
    display:none;
  }
  .world-learning-shell .adaptive-note{
    flex:0 0 auto;
    margin:0 0 7px;
    padding:6px 9px;
    border-radius:9px;
    font-size:9px;
    line-height:1.3;
  }
  .world-learning-shell .adaptive-note span{font-size:7px;margin-bottom:2px}
  .world-learning-shell .adaptive-note small{font-size:7.5px;margin-top:2px}
  .world-learning-shell .adaptive-note::after{right:-25px;top:-35px;width:75px;height:75px}
  .world-learning-shell .ledger-strip{margin:0 0 7px;height:24px}
  .world-learning-shell .ledger-strip div{font-size:8px}
  .world-learning-shell .oq-ask{
    flex:0 0 auto;
    max-width:100%;
    font-size:20px;
    line-height:1.15;
    margin:0 auto 8px;
  }
  .world-learning-shell .dropzone{
    flex:0 0 auto;
    min-height:48px;
    padding:7px 10px;
    border-radius:9px;
  }
  .world-learning-shell .dropzone-icon{width:25px;height:25px}
  .world-learning-shell .dropzone-icon svg{width:16px;height:16px}
  .world-learning-shell .dropzone-hint{font-size:9px;gap:4px}
  .world-learning-shell .dropzone-hint em{font-size:8px}
  .world-learning-shell .chip-tray{
    flex:0 0 auto;
    max-width:100%;
    gap:7px;
    margin:7px auto 0;
  }
  .world-learning-shell .chip{
    flex:1 1 0;
    min-width:0;
    min-height:47px;
    padding:7px 9px;
    border-radius:10px;
  }
  .world-learning-shell .chip-copy{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .world-learning-shell .chip .choice-icon{width:26px;height:26px;flex-basis:26px;border-radius:7px}
  .world-learning-shell .chip .choice-icon svg{width:16px;height:16px}
  .world-learning-shell .chip .chip-grip{display:none}
  .world-learning-shell .oq-hint{
    flex:1 1 auto;
    min-height:18px;
    margin:4px auto 0;
    font-size:9px;
    max-width:100%;
    overflow:auto;
  }
  .world-learning-shell .world-step-actions{
    flex:0 0 auto;
    margin-top:6px;
    padding-top:6px;
    min-height:31px;
    gap:8px;
  }
  .world-learning-shell .world-step-actions .btn{padding:6px 10px;font-size:9px}
  .world-learning-shell .world-step-actions .world-back-btn{min-width:76px}
  .world-learning-shell .world-step-spacer{width:76px}

  /* RIGHT: keep Ben/Juma visible, but bind identity + speech + visual + tip
     into one compact mentor panel. */
  .world-learning-shell .learning-teacher-rail{
    position:relative;
    top:auto;
    overflow:hidden;
  }
  .world-learning-shell .learning-teacher-rail .teacher-card-compact{
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(150px,1fr) auto;
    gap:7px;
    padding:9px;
    border-radius:14px;
  }
  .world-learning-shell .learning-teacher-rail .teacher-identity{padding:1px 2px 4px;gap:7px}
  .world-learning-shell .learning-teacher-rail .teacher-identity-icon{width:28px;height:28px;flex-basis:28px;border-radius:8px;font-size:15px}
  .world-learning-shell .learning-teacher-rail .teacher-identity strong{font-size:13px}
  .world-learning-shell .learning-teacher-rail .teacher-identity span{font-size:8px;margin-top:1px}
  .world-learning-shell .learning-teacher-rail .teacher-speech{
    padding:9px 10px;
    border-radius:11px;
  }
  .world-learning-shell .learning-teacher-rail .teacher-section-label{font-size:7px;margin-bottom:4px}
  .world-learning-shell .learning-teacher-rail .teacher-section-icon{font-size:11px}
  .world-learning-shell .learning-teacher-rail .teacher-speech h3{font-size:14px;margin-bottom:4px}
  .world-learning-shell .learning-teacher-rail .teacher-speech p{font-size:9.5px;line-height:1.35}
  .world-learning-shell .learning-teacher-rail .teacher-speech .teacher-prompt{font-size:8.5px;padding:6px 7px;margin-top:6px;line-height:1.3}
  .world-learning-shell .learning-teacher-rail .teacher-speech::after{right:42px;bottom:-10px;border-left-width:10px;border-top-width:11px}
  .world-learning-shell .learning-teacher-rail .teacher-visual{
    min-height:0;
    margin:0;
    align-items:flex-end;
  }
  .world-learning-shell .learning-teacher-rail .teacher-visual::before{bottom:5px;width:70%;height:30px}
  .world-learning-shell .learning-teacher-rail .teacher-avatar{
    width:185px;height:240px;max-height:100%;object-fit:contain;
  }
  .world-learning-shell .learning-teacher-rail .teacher-avatar-ben{width:178px;height:250px}
  .world-learning-shell .learning-teacher-rail .teacher-tip{
    padding:7px 8px;
    border-radius:9px;
  }
  .world-learning-shell .learning-teacher-rail .teacher-tip-title{font-size:8px;gap:5px}
  .world-learning-shell .learning-teacher-rail .teacher-tip-icon{width:21px;height:21px;flex-basis:21px;border-radius:6px;font-size:11px}
  .world-learning-shell .learning-teacher-rail .teacher-tip p{font-size:8.5px;line-height:1.35;margin-top:4px}

  /* The glossary stays available but does not push the base viewport taller. */
  .world-learning-shell .glossary{flex:0 0 auto;margin-top:5px}
  .world-learning-shell .glossary-toggle{padding:5px 9px;font-size:8px}
  .world-learning-shell .glossary-panel{max-height:150px;overflow:auto}
}

/* Taller screens can breathe slightly without reintroducing vertical scroll. */
@media (min-width: 1200px) and (min-height: 900px) {
  .world-learning-shell .learning-stat-card{padding:11px}
  .world-learning-shell .learning-context-card{padding:11px}
  .world-learning-shell .oq-ask{font-size:22px}
  .world-learning-shell .learning-teacher-rail .teacher-avatar{width:200px;height:260px}
  .world-learning-shell .learning-teacher-rail .teacher-avatar-ben{width:190px;height:270px}
}

/* Progress HUD: retain the new visual hierarchy while keeping the World screen compact. */
.world-learning-shell .progress-panel{padding:9px}
.world-learning-shell .progress-panel-title{margin-bottom:7px}
.world-learning-shell .progress-level-hero{grid-template-columns:31px minmax(0,1fr) auto;gap:7px;padding:7px 6px}
.world-learning-shell .progress-level-icon{width:31px;height:31px;border-radius:9px}
.world-learning-shell .progress-level-copy b{font-size:19px}
.world-learning-shell .progress-level-copy span{font-size:7px}
.world-learning-shell .progress-percent{font-size:8px}
.world-learning-shell .progress-xp-track{margin:5px 3px 6px;height:4px}
.world-learning-shell .progress-metrics-grid{gap:5px}
.world-learning-shell .progress-metric{padding:5px;gap:5px;border-radius:8px}
.world-learning-shell .progress-metric-icon{width:25px;height:25px;flex-basis:25px;border-radius:7px}
.world-learning-shell .progress-metric small{font-size:7px}
.world-learning-shell .progress-metric b{font-size:14px}
.world-learning-shell .progress-mastery-metric{padding:6px;border-radius:8px}
.world-learning-shell .progress-mastery-head{margin-bottom:4px}
.world-learning-shell .progress-mastery-head b,.world-learning-shell .progress-mastery-head strong{font-size:8px}
.world-learning-shell .progress-mastery-track{height:3px}