/* 6.4.5 — mobile icon taxonomy browser: 10 roots in two rows, unlimited hierarchical drill-down. */
@media (max-width:760px){
  /* Mobile discovery replaces the classic homepage filters entirely. */
  body.home .fp-priority-strip,
body.home .mc-filter-bar,
body.home .mc-filter-meta{
    display:none;
  }
  body.home .mc-discovery .mc-section-head{
    margin:16px 0 12px;
  }

  body.home .msid-mobile-field-discovery{
    margin:0 0 6px;
    padding:0;
  }
  body.home .msid-mobile-field-head{
    align-items:center;
    margin-bottom:12px;
  }
  body.home .msid-mobile-field-head strong{
    font-size:1.02rem;
  }
  body.home .msid-mobile-field-head span{
    max-width:55%;
    white-space:normal;
    text-align:left;
    line-height:1.35;
    font-size:.67rem;
  }

  /* Exactly 10 root icons: five columns × two rows. */
  body.home .msid-mobile-field-carousel{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2,auto);
    gap:10px 6px;
    width:100%;
    overflow:visible;
    padding:0;
    scroll-snap-type:none;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon{
    width:100%;
    min-width:0;
    min-height:78px;
    display:grid;
    grid-template-rows:50px auto;
    justify-items:center;
    align-content:start;
    gap:6px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph{
    width:50px;
    height:50px;
    border-radius:16px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph svg{
    width:23px;
    height:23px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon>span:nth-child(2){
    font-size:.65rem;
    line-height:1.25;
    -webkit-line-clamp:2;
  }
  body.home .msid-mobile-field-icon.is-parent-active .msid-mobile-field-glyph,
body.home .msid-mobile-field-icon.is-active .msid-mobile-field-glyph{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:var(--msid-white);
  }

  /* Hierarchical drill-down. Each level is also icon-based and can scroll horizontally
     in two rows when a parent has many specialities. */
  body.home .msid-mobile-field-drilldown{
    margin-top:12px;
    padding:11px 10px 10px;
    border:1px solid var(--msid-line-soft);
    border-radius:18px;
    background:var(--msid-surface-soft);
    overflow:hidden;
  }
  body.home .msid-mobile-field-nav{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  body.home .msid-mobile-field-back{
    flex:0 0 34px;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--msid-line);
    border-radius:11px;
    background:var(--msid-white);
    color:var(--msid-ink);
    font:900 1.25rem/1 inherit;
    box-shadow:none;
  }
  body.home .msid-mobile-field-path{
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
    overflow-x:auto;
    scrollbar-width:none;
    color:var(--msid-text-secondary);
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
  }
  body.home .msid-mobile-field-path::-webkit-scrollbar{display:none;}
  body.home .msid-mobile-field-path span:last-of-type{
    color:var(--msid-ink);
    font-weight:950;
  }
  body.home .msid-mobile-field-path b{
    color:var(--msid-subtle);
    font-weight:700;
  }
  body.home .msid-mobile-field-level{
    display:grid;
    grid-template-rows:repeat(2,82px);
    grid-auto-flow:column;
    grid-auto-columns:66px;
    gap:8px 7px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding:1px 1px 5px;
    -webkit-overflow-scrolling:touch;
  }
  body.home .msid-mobile-field-level::-webkit-scrollbar{display:none;}
  body.home .msid-mobile-field-level.is-loading{opacity:.45;pointer-events:none;}
  body.home .msid-mobile-field-level .msid-mobile-field-icon{
    position:relative;
    width:66px;
    min-width:66px;
    min-height:82px;
    display:grid;
    grid-template-rows:48px auto;
    justify-items:center;
    align-content:start;
    gap:5px;
    padding:0;
  }
  body.home .msid-mobile-field-level .msid-mobile-field-glyph{
    width:48px;
    height:48px;
    border-radius:15px;
    background:var(--msid-white);
  }
  body.home .msid-mobile-field-level .msid-mobile-field-glyph svg{
    width:21px;
    height:21px;
  }
  body.home .msid-mobile-field-level .msid-mobile-field-icon>span:nth-child(2){
    width:100%;
    font-size:.62rem;
    line-height:1.25;
    -webkit-line-clamp:2;
  }
  body.home .msid-mobile-field-more{
    position:absolute;
    top:35px;
    left:5px;
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--msid-aubergine);
    color:var(--msid-white);
    font-size:.65rem;
    font-style:normal;
    line-height:1;
    border:2px solid var(--msid-surface-soft);
  }
  body.home .msid-mobile-field-loading,
body.home .msid-mobile-field-empty{
    padding:9px 3px 2px;
    color:var(--msid-muted);
    font-size:.72rem;
    text-align:center;
  }

  /* Old one-level subfield UI is no longer part of the mobile experience. */
}

@media (max-width:380px){
  body.home .msid-mobile-field-carousel{
    gap:8px 4px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph{
    width:46px;
    height:46px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon{
    grid-template-rows:46px auto;
    min-height:74px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon>span:nth-child(2){font-size:.61rem;}
}

/* 6.4.6 — final mobile discovery flow: slider → direct search → 10 visible icons + swipe. */
@media (max-width:760px){
  /* Compact header: remove unused vertical/side breathing room on phones. */
  :root{--msid-mobile-header:56px;--msid-mobile-touch:40px;}
  #site-header .msid-learning-header-inner,
#site-header .header-inner{
    min-height:56px;
    height:56px;
    gap:8px;
    justify-content:space-between;
  }
  #site-header .site-logo,
#site-header .msid-learning-logo{
    display:flex;
    align-items:center;
    line-height:0;
    margin:0;
  }
  #site-header .msid-brand-logo{height:31px;width:auto;}
  #site-header .msid-learning-header-inner,
#site-header .header-inner{
    position:relative;
    justify-content:flex-start;
  }
  #site-header .msid-learning-logo,
#site-header .site-logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
    width:auto;
    max-width:min(44vw,160px);
    z-index:2;
    pointer-events:auto;
  }
  #site-header .msid-brand-logo{height:32px;max-width:min(44vw,150px);width:auto;object-fit:contain;}
  #site-header .msid-header-left-tools{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;}
  #site-header .msid-learning-actions{display:flex;align-items:center;gap:10px;margin-inline-start:0;}
  #site-header .msid-header-left-tools,
#site-header .msid-learning-actions{
    margin-inline-start:0;
    min-width:0;
  }
  #site-header .menu-toggle{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:13px;
  }
  #site-header .menu-toggle span{width:18px;}

  /* Search is a first-class mobile action immediately below the ad slider. */

  /* Pull discovery close to search; the classic filter UI remains hidden. */
  body.home .mc-discovery.fp-filters{padding:12px 0 28px;}
  body.home .msid-mobile-field-discovery{margin:0 0 8px;}
  body.home .msid-mobile-field-head{margin-bottom:10px;}
  body.home .msid-mobile-field-head strong{font-size:.96rem;}
  body.home .msid-mobile-field-head span{font-size:.64rem;max-width:62%;}

  /* Two-row carousel. Four columns fit the viewport = 8 larger, more readable icons;
     every remaining root continues horizontally in the same slider. */
  body.home .msid-mobile-field-carousel{
    display:grid;
    grid-template-rows:repeat(2,92px);
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 18px)/4);
    gap:9px 6px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:1px 1px 6px;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon{
    width:100%;
    min-width:0;
    min-height:92px;
    grid-template-rows:58px auto;
    gap:6px;
    scroll-snap-align:start;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph{
    width:58px;
    height:58px;
    border-radius:18px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph svg{width:27px;height:27px;}
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon>span:nth-child(2){
    font-size:.72rem;
    line-height:1.24;
  }

  /* Every child level is a genuine icon slider, not a text/filter list. */
  body.home .msid-mobile-field-drilldown{
    margin-top:10px;
    padding:10px 9px 9px;
    border-radius:16px;
  }
  body.home .msid-mobile-field-nav{margin-bottom:8px;}
  body.home .msid-mobile-field-level{
    display:grid;
    grid-template-rows:82px;
    grid-auto-flow:column;
    grid-auto-columns:70px;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:1px 1px 4px;
    scroll-snap-type:x proximity;
  }
  body.home .msid-mobile-field-level .msid-mobile-field-icon{
    width:70px;
    min-width:70px;
    min-height:82px;
    grid-template-rows:48px auto;
    scroll-snap-align:start;
  }

  /* Course cards: preserve the 50/50 concept but remove the empty cavity. */
  body.home #front-courses-grid>.msid-home-course-card{
    height:270px;
    min-height:270px;
    grid-template-rows:135px 135px;
  }
  body.home .msid-home-course-card .sp-tc-card-body{
    height:135px;
    min-height:0;
    padding:8px 9px;
    gap:3px;
    justify-content:flex-start;
  }
  body.home .msid-home-course-card .sp-tc-card-tags{
    min-height:17px;
    height:17px;
  }
  body.home .msid-home-course-card .sp-tc-card-tags>span{
    min-height:17px;
    height:17px;
    padding:1px 5px;
    font-size:.58rem;
  }
  body.home .msid-home-course-card .sp-tc-card-title{
    min-height:3.75em;
    max-height:3.75em;
    font-size:.79rem;
    line-height:1.25;
    -webkit-line-clamp:3;
  }
  body.home .msid-home-course-card .sp-tc-card-role{
    display:block;
    min-height:15px;
    max-height:15px;
    margin:0;
    color:var(--msid-muted);
    font-size:.62rem;
    line-height:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.home .msid-home-course-card .sp-tc-card-footer{
    margin:2px 0 0;
    padding:0;
    min-height:30px;
  }
  body.home .msid-home-course-card .sp-tc-card-price{font-size:.72rem;}
  body.home .msid-home-course-card .sp-btn-view{
    min-height:28px;
    padding:4px 7px;
    font-size:.63rem;
  }
}

@media (max-width:380px){
  body.home .msid-mobile-field-carousel{
    grid-auto-columns:calc((100% - 15px)/4);
    gap:7px 5px;
  }
  body.home .msid-mobile-field-carousel .msid-mobile-field-glyph{width:45px;height:45px;}
  body.home .msid-mobile-field-carousel .msid-mobile-field-icon{grid-template-rows:45px auto;}
  body.home #front-courses-grid>.msid-home-course-card{
    height:256px;
    min-height:256px;
    grid-template-rows:128px 128px;
  }
  body.home .msid-home-course-card .sp-tc-card-body{height:128px;padding:7px 8px;}
  body.home .msid-home-course-card .sp-tc-card-title{font-size:.75rem;}
  body.home .msid-home-course-card .sp-tc-card-role{font-size:.59rem;}
}

/* 6.4.7 — contextual mobile refine drawer after selecting a final specialty. */
@media (max-width:760px){
  body.home .msid-mobile-refine{
    display:block;
    margin:10px 0 4px;
  }
  body.home .msid-mobile-refine-trigger{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px 8px 12px;
    border:1px solid var(--msid-line);
    border-radius:16px;
    background:var(--msid-white);
    color:var(--msid-ink);
    box-shadow:0 5px 16px rgba(17,17,17,.05);
    text-align:right;
  }
  body.home .msid-mobile-refine-trigger[hidden]{display:none !important;}
  body.home .msid-mobile-refine-trigger-copy{
    min-width:0;
    display:grid;
    gap:2px;
  }
  body.home .msid-mobile-refine-trigger-copy small{
    color:var(--msid-muted);
    font-size:.61rem;
    font-weight:700;
  }
  body.home .msid-mobile-refine-trigger-copy strong{
    max-width:210px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--msid-ink);
    font-size:.78rem;
    font-weight:900;
  }
  body.home .msid-mobile-refine-trigger-action{
    flex:0 0 auto;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 11px;
    border-radius:11px;
    background:var(--msid-aubergine);
    color:var(--msid-white);
    font-size:.72rem;
    font-weight:900;
  }
  body.home .msid-mobile-refine-trigger-action b{
    min-width:17px;
    height:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border-radius:999px;
    background:var(--msid-white);
    color:var(--msid-ink);
    font-size:.58rem;
  }
  body.home .msid-mobile-refine-trigger-action b[hidden]{display:none !important;}

  body.home .msid-mobile-refine-overlay{
    position:fixed;
    inset:0;
    z-index:10040;
    background:rgba(17,17,17,.42);
    backdrop-filter:blur(2px);
  }
  body.home .msid-mobile-refine-overlay[hidden]{display:none !important;}
  body.home .msid-mobile-refine-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:10050;
    width:min(88vw,370px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--msid-white);
    color:var(--msid-ink);
    box-shadow:-18px 0 54px rgba(17,17,17,.18);
    transform:translate3d(105%,0,0);
    transition:transform .24s ease;
    visibility:hidden;
  }
  body.home .msid-mobile-refine-drawer.is-open{
    transform:translate3d(0,0,0);
    visibility:visible;
  }
  html.msid-mobile-refine-open,
html.msid-mobile-refine-open body{overflow:hidden;}

  body.home .msid-mobile-refine-head{
    min-height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--msid-line-soft);
  }
  body.home .msid-mobile-refine-head>div{
    min-width:0;
    display:grid;
    gap:3px;
  }
  body.home .msid-mobile-refine-head small{
    color:var(--msid-muted);
    font-size:.66rem;
    font-weight:750;
  }
  body.home .msid-mobile-refine-head strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.92rem;
    font-weight:950;
  }
  body.home .msid-mobile-refine-close{
    flex:0 0 38px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    border:1px solid var(--msid-line);
    border-radius:12px;
    background:var(--msid-white);
    color:var(--msid-ink);
    box-shadow:none;
    font:800 1.25rem/1 inherit;
  }
  body.home .msid-mobile-refine-body{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:14px;
  }
  body.home .msid-mobile-refine-select{
    display:grid;
    gap:7px;
    margin:0 0 17px;
  }
  body.home .msid-mobile-refine-select>span,
body.home .msid-mobile-refine-group legend{
    color:var(--msid-ink);
    font-size:.78rem;
    font-weight:900;
  }
  body.home .msid-mobile-refine-select select{
    width:100%;
    height:44px;
    padding:0 11px;
    border:1px solid var(--msid-line);
    border-radius:13px;
    background:var(--msid-white);
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.78rem;
    font-weight:750;
  }
  body.home .msid-mobile-refine-group{
    min-width:0;
    margin:0 0 17px;
    padding:0;
    border:0;
  }
  body.home .msid-mobile-refine-group legend{
    margin:0 0 8px;
    padding:0;
  }
  body.home .msid-mobile-refine-group>div{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  body.home .msid-mobile-refine-group button{
    min-height:36px;
    padding:0 11px;
    border:1px solid var(--msid-line);
    border-radius:11px;
    background:var(--msid-white);
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.7rem;
    font-weight:800;
  }
  body.home .msid-mobile-refine-group button.is-active{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:var(--msid-white);
  }
  body.home .msid-mobile-refine-foot{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:9px;
    padding:11px 14px max(11px,env(safe-area-inset-bottom));
    border-top:1px solid var(--msid-line-soft);
    background:var(--msid-white);
  }
  body.home .msid-mobile-refine-foot button{
    min-height:44px;
    border-radius:13px;
    font-size:.78rem;
    font-weight:900;
  }
  body.home .msid-mobile-refine-reset{
    border:1px solid var(--msid-line);
    background:var(--msid-white);
    color:var(--msid-ink);
  }
  body.home .msid-mobile-refine-apply{
    border:1px solid var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:var(--msid-white);
  }
}

/* 6.4.8 — single-slot mobile taxonomy drill-down.
   Each child level replaces the previous level instead of stacking below it. */
@media (max-width:760px){
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-head,
body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-carousel{
    display:none;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-drilldown{
    display:block;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:hidden;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-nav{
    min-height:38px;
    margin:0 0 8px;
    padding:0;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-back{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    border-radius:12px;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-path{
    font-size:.72rem;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level{
    display:grid;
    grid-template-rows:repeat(2,92px);
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 18px)/4);
    gap:9px 6px;
    width:100%;
    min-height:193px;
    max-height:193px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:1px 1px 5px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level::-webkit-scrollbar{display:none;}
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level .msid-mobile-field-icon{
    width:100%;
    min-width:0;
    min-height:92px;
    grid-template-rows:57px auto;
    gap:5px;
    scroll-snap-align:start;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level .msid-mobile-field-glyph{
    width:57px;
    height:57px;
    border-radius:18px;
  }
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level .msid-mobile-field-icon>span:nth-child(2){
    font-size:.71rem;
    line-height:1.24;
    -webkit-line-clamp:2;
  }
  body.home .msid-mobile-field-loading,
body.home .msid-mobile-field-empty{
    min-height:193px;
    display:grid;
    place-items:center;
    padding:0;
  }
  body.home .msid-mobile-field-loading[hidden],
body.home .msid-mobile-field-empty[hidden]{display:none !important;}

  /* Final selection collapses discovery into one compact bar. */
  body.home .msid-mobile-refine{
    margin:8px 0 5px;
  }
  body.home .msid-mobile-refine-trigger{
    min-height:52px;
    padding:7px 8px 7px 11px;
    gap:8px;
    border-radius:15px;
    box-shadow:none;
  }
  body.home .msid-mobile-refine-trigger-copy{
    flex:1 1 auto;
    min-width:0;
  }
  body.home .msid-mobile-refine-trigger-copy small{
    font-size:.58rem;
  }
  body.home .msid-mobile-refine-trigger-copy strong{
    max-width:none;
    font-size:.75rem;
  }
  body.home .msid-mobile-refine-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
  }
  body.home .msid-mobile-field-change,
body.home .msid-mobile-refine-trigger-action{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:0 10px;
    border-radius:10px;
    box-shadow:none;
    font-size:.68rem;
    font-weight:900;
    white-space:nowrap;
  }
  body.home .msid-mobile-field-change{
    border:1px solid var(--msid-line);
    background:var(--msid-white);
    color:var(--msid-ink);
  }
  body.home .msid-mobile-refine-trigger-action{
    border:1px solid var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:var(--msid-white);
  }
  body.home .msid-mobile-refine-trigger-action b{
    min-width:16px;
    height:16px;
    padding:0 3px;
    font-size:.55rem;
  }
}

@media (max-width:380px){
  body.home .msid-mobile-field-discovery.is-drilling .msid-mobile-field-level{
    grid-auto-columns:calc((100% - 15px)/4);
    gap:7px 5px;
  }
  body.home .msid-mobile-refine-trigger-copy strong{font-size:.71rem;}
  body.home .msid-mobile-field-change,
body.home .msid-mobile-refine-trigger-action{padding-inline:8px;font-size:.65rem;}
}