/* 6.6.70 — desktop-only semantic heading remains out of the compact phone flow. */
.msid-directory-discovery-heading{display:none}

/*
 * MSID Mobile Directory 2.0
 * Single source of truth for phone discovery on courses, trainers, institutions,
 * tk_field archives and school-support. Do not append versioned overrides here.
 */
@media (max-width:760px){
  /* ---------------------------------------------------------
   * 1. Replace legacy desktop discovery controls on phones.
   * --------------------------------------------------------- */
  body.post-type-archive-tk_course .tk-dir-hero,
  body.post-type-archive-tk_trainer .tk-dir-hero,
  body:is(.post-type-archive-tk_institution,.msid-institution-preset) .tk-dir-hero,
  body.tax-tk_field .tk-dir-hero,
  body.post-type-archive-tk_course .tk-cat-icons-bar,
  body.post-type-archive-tk_trainer .tk-cat-icons-bar,
  body:is(.post-type-archive-tk_institution,.msid-institution-preset) .tk-cat-icons-bar,
  body.tax-tk_field .tk-cat-icons-bar,
  body.post-type-archive-tk_course .tk-filters-bar,
  body.post-type-archive-tk_trainer .tk-filters-bar,
  body:is(.post-type-archive-tk_institution,.msid-institution-preset) .tk-filters-bar,
  body.tax-tk_field .tk-filters-bar,
  body.post-type-archive-tk_course .tk-active-filters,
  body.post-type-archive-tk_trainer .tk-active-filters,
  body:is(.post-type-archive-tk_institution,.msid-institution-preset) .tk-active-filters,
  body.tax-tk_field .tk-active-filters,
  body.page-template-page-private-lessons .msid-school-hero,
  body.page-template-page-private-lessons .sp-grade-tabs-wrap,
  body.page-template-page-private-lessons .sp-subjects-wrap,
  body.page-template-page-private-lessons .sp-filters-bar{
    display:none;
  }

  .msid-mobile-directory-discovery,
  .msid-mobile-school-discovery{
    display:block;
    padding:12px 0 8px;
    background:#fff;
    border-bottom:1px solid var(--msid-line-soft);
  }

  .msid-mobile-directory-title,
  .msid-mobile-school-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0 0 9px;
  }
  .msid-mobile-directory-title small,
  .msid-mobile-school-title small{
    color:var(--msid-muted);
    font-size:.66rem;
    font-weight:750;
  }
  .msid-mobile-directory-title strong,
  .msid-mobile-school-title strong{
    color:var(--msid-ink);
    font-size:1.08rem;
    line-height:1.35;
    font-weight:900;
  }

  /* Search */
  .msid-mobile-directory-search,
  .msid-mobile-school-search{
    min-height:44px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    margin:0 0 10px;
    padding:0 12px;
    border:1px solid var(--msid-line);
    border-radius:15px;
    background:#fff;
    box-shadow:none;
  }
  .msid-mobile-directory-search>span,
  .msid-mobile-school-search>span{
    color:var(--msid-subtle);
    font-size:.92rem;
  }
  .msid-mobile-directory-search input,
  .msid-mobile-school-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    box-shadow:none;
    background:transparent;
    color:var(--msid-ink);
    font:inherit;
    font-size:.86rem;
  }
  .msid-mobile-directory-search input::placeholder,
  .msid-mobile-school-search input::placeholder{color:#8d949b;opacity:.82;}
  .msid-mobile-directory-search button,
  .msid-mobile-school-search button{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--msid-surface-soft);
    color:var(--msid-ink);
    box-shadow:none;
  }
  .msid-mobile-directory-search button[hidden],
  .msid-mobile-school-search button[hidden]{display:none !important;}

  .msid-mobile-directory-discovery--course .msid-mobile-nearby .msid-mobile-directory-search{
    width:100%;min-width:0;margin:0;
  }
  .msid-mobile-nearby-status:empty{display:none;}

  /* ---------------------------------------------------------
   * 2. One-slot hierarchical icon browser.
   * No outer cards around each icon. 4 columns x 2 rows visible.
   * --------------------------------------------------------- */
  .msid-mobile-directory-browser,
  .msid-mobile-school-browser{
    min-height:0;
    height:auto;
    padding:3px 0 1px;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .msid-mobile-directory-browser[hidden],
  .msid-mobile-school-browser[hidden]{display:none !important;}

  .msid-mobile-directory-nav,
  .msid-mobile-school-nav{
    min-height:34px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    margin:0 0 6px;
  }
  .msid-mobile-school-nav{grid-template-columns:34px minmax(0,1fr);}
  .msid-mobile-directory-nav[hidden],
  .msid-mobile-school-nav[hidden]{display:none !important;}
  .msid-mobile-directory-nav>button:first-child,
  .msid-mobile-school-nav>button:first-child{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--msid-line);
    border-radius:11px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
    font-size:1.15rem;
  }
  .msid-mobile-directory-nav strong,
  .msid-mobile-school-nav strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--msid-ink);
    font-size:.8rem;
    font-weight:850;
  }
  .msid-mobile-directory-all{
    min-height:32px;
    padding:0 9px;
    border:1px solid var(--msid-line);
    border-radius:999px;
    background:#fff;
    color:var(--msid-text-secondary);
    box-shadow:none;
    font-size:.66rem;
    font-weight:800;
    white-space:nowrap;
  }
  .msid-mobile-directory-all[hidden]{display:none !important;}

  .msid-mobile-directory-level,
  .msid-mobile-school-level{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,86px);
    grid-auto-columns:calc((100% - 18px)/4);
    gap:8px 6px;
    min-width:0;
    min-height:0;
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 3px;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .msid-mobile-directory-level:not(:has(> :nth-child(5))),
  .msid-mobile-school-level:not(:has(> :nth-child(5))){grid-template-rows:86px;}
  .msid-mobile-school-level.is-stage{
    grid-template-rows:74px;
    grid-auto-columns:calc((100% - 16px)/3);
  }
  .msid-mobile-directory-level::-webkit-scrollbar,
  .msid-mobile-school-level::-webkit-scrollbar{display:none;}
  .msid-mobile-directory-level.is-loading{opacity:.5;pointer-events:none;}

  button.msid-mobile-directory-icon,
  button.msid-mobile-school-icon{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:54px minmax(0,1fr);
    align-items:center;
    justify-items:center;
    gap:5px;
    padding:4px 1px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--msid-ink);
    -webkit-text-fill-color:var(--msid-ink);
    box-shadow:none;
    transform:none;
    font:inherit;
    cursor:pointer;
    scroll-snap-align:start;
  }
  button.msid-mobile-directory-icon:hover,
  button.msid-mobile-directory-icon:focus-visible,
  button.msid-mobile-school-icon:hover,
  button.msid-mobile-school-icon:focus-visible{
    border:0;
    background:transparent;
    box-shadow:none;
    transform:none;
  }

  .msid-mobile-directory-glyph,
  .msid-mobile-school-icon>span{
    width:54px;
    height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--msid-mi-border,var(--msid-line-soft));
    border-radius:17px;
    background:var(--msid-mi-bg,var(--msid-surface-soft));
    color:var(--msid-mi-fg,var(--msid-ink));
    -webkit-text-fill-color:var(--msid-mi-fg,var(--msid-ink));
    box-shadow:none;
    font-size:.8rem;
    font-weight:900;
  }
  .msid-mobile-directory-glyph svg{
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .msid-mobile-directory-icon>span:last-child,
  .msid-mobile-school-icon>b{
    width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    margin:0;
    text-align:center;
    color:var(--msid-ink);
    -webkit-text-fill-color:var(--msid-ink);
    font-size:.73rem;
    line-height:1.27;
    font-weight:800;
  }

  /* Unified MSID category palette: categories stay readable without rainbow noise. */
  [data-mobile-color]{
    --msid-mi-fg:var(--msid-blue-dark);
    --msid-mi-bg:var(--msid-blue-soft);
    --msid-mi-border:var(--msid-blue-line);
  }


  /* School-support visual emphasis: BAC is the only glowing exam shortcut. */
  .msid-mobile-school-level.is-stage button.msid-mobile-school-icon>span{
    font-size:.92rem;
    letter-spacing:.01em;
  }
  .msid-mobile-school-icon.is-bac-featured>span{
    width:58px;
    height:58px;
    border-width:1.5px;
    border-radius:19px;
    font-size:.72rem;
    letter-spacing:.055em;
    font-weight:950;
    box-shadow:
      0 0 0 3px rgba(37,99,235,.10),
      0 0 18px rgba(37,99,235,.32),
      0 8px 18px rgba(37,99,235,.12);
    animation:msid-bac-glow 2.8s ease-in-out infinite;
  }
  .msid-mobile-school-icon.is-bac-featured>b{
    color:#1d4ed8;
    -webkit-text-fill-color:#1d4ed8;
    font-weight:900;
  }
  @keyframes msid-bac-glow{
    0%,100%{box-shadow:0 0 0 3px rgba(37,99,235,.08),0 0 14px rgba(37,99,235,.24),0 8px 18px rgba(37,99,235,.10);}
    50%{box-shadow:0 0 0 5px rgba(37,99,235,.12),0 0 24px rgba(37,99,235,.40),0 8px 22px rgba(37,99,235,.14);}
  }
  @media (prefers-reduced-motion:reduce){
    .msid-mobile-school-icon.is-bac-featured>span{animation:none;}
  }

  .msid-mobile-directory-loading{
    padding:7px 2px 0;
    color:var(--msid-muted);
    font-size:.7rem;
    font-weight:700;
  }
  .msid-mobile-directory-loading[hidden]{display:none !important;}

  /* Selected path: replaces icon browser after final selection. */
  .msid-mobile-directory-selected,
  .msid-mobile-school-selected{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:9px 10px;
    border:1px solid var(--msid-line);
    border-radius:14px;
    background:#fff;
  }
  .msid-mobile-directory-selected[hidden],
  .msid-mobile-school-selected[hidden]{display:none !important;}
  .msid-mobile-directory-selected>span,
  .msid-mobile-school-selected>span{min-width:0;display:flex;flex-direction:column;gap:1px;}
  .msid-mobile-directory-selected small,
  .msid-mobile-school-selected small{color:var(--msid-muted);font-size:.6rem;font-weight:700;}
  .msid-mobile-directory-selected strong,
  .msid-mobile-school-selected strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--msid-ink);
    font-size:.76rem;
    font-weight:850;
  }
  .msid-mobile-directory-selected>div,
  .msid-mobile-school-selected>div{display:flex;gap:5px;}
  .msid-mobile-directory-selected button,
  .msid-mobile-school-selected button{
    min-height:33px;
    padding:0 9px;
    border:1px solid var(--msid-line);
    border-radius:10px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.66rem;
    font-weight:800;
  }
  .msid-mobile-directory-selected button:last-child,
  .msid-mobile-school-selected button:last-child{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:#fff;
  }

  /* Results controls: always visible, compact and touch friendly. */
  .msid-mobile-results-toolbar{
    display:grid;
    grid-template-columns:minmax(78px,1fr) auto auto;
    align-items:center;
    gap:7px;
    margin-top:10px;
    padding:9px;
    border:1px solid var(--msid-line-soft);
    border-radius:16px;
    background:var(--msid-surface);
  }
  .msid-mobile-results-toolbar>strong{
    min-width:0;
    color:var(--msid-ink);
    font-size:.78rem;
    font-weight:900;
    white-space:nowrap;
  }
  .msid-mobile-results-toolbar>label{
    min-height:40px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 8px;
    border:1px solid var(--msid-line);
    border-radius:12px;
    background:#fff;
  }
  .msid-mobile-results-toolbar>label>span{
    color:var(--msid-muted);
    font-size:.62rem;
    font-weight:800;
  }
  .msid-mobile-results-toolbar select{
    max-width:96px;
    min-height:38px;
    padding:0;
    border:0;
    outline:0;
    background:#fff;
    color:var(--msid-ink);
    font:inherit;
    font-size:.68rem;
    font-weight:850;
  }
  .msid-mobile-results-toolbar>button{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 10px;
    border:1px solid var(--msid-line);
    border-radius:12px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.7rem;
    font-weight:900;
    white-space:nowrap;
  }
  .msid-mobile-results-toolbar>button b{
    min-width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    border-radius:999px;
    background:var(--msid-blue-soft);
    color:var(--msid-blue-dark);
    font-size:.62rem;
    font-weight:900;
  }
  .msid-mobile-results-toolbar>button b[hidden]{display:none!important;}

  .msid-mobile-active-filters{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
  }
  .msid-mobile-active-filters[hidden]{display:none!important;}
  .msid-mobile-active-filters>div{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:1px 0 3px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .msid-mobile-active-filters>div::-webkit-scrollbar{display:none;}
  .msid-mobile-active-chip,
  .msid-mobile-active-filters>[data-mobile-add-filter]{
    min-height:34px;
    flex:0 0 auto;
    padding:0 10px;
    border:1px solid var(--msid-blue-line);
    border-radius:999px;
    background:var(--msid-blue-soft);
    color:var(--msid-blue-dark);
    box-shadow:none;
    font-size:.66rem;
    font-weight:850;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .msid-mobile-active-filters>[data-mobile-add-filter]{
    border-color:var(--msid-line);
    background:#fff;
    color:var(--msid-ink);
  }

  /* ---------------------------------------------------------
   * 3. Bottom-sheet filters.
   * --------------------------------------------------------- */
  .msid-mobile-directory-overlay,
  .msid-mobile-school-overlay{
    position:fixed;
    inset:0;
    z-index:9997;
    background:rgba(17,17,17,.34);
    backdrop-filter:blur(2px);
  }
  .msid-mobile-directory-overlay[hidden],
  .msid-mobile-school-overlay[hidden]{display:none !important;}
  .msid-mobile-directory-drawer,
  .msid-mobile-school-drawer{
    position:fixed;
    inset:auto 0 0 0;
    z-index:9998;
    width:100%;
    height:min(88vh,760px);
    height:min(88dvh,760px);
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    transform:translateY(102%);
    transition:transform .24s ease;
    border:1px solid var(--msid-line-soft);
    border-bottom:0;
    border-radius:24px 24px 0 0;
    background:#fff;
    box-shadow:0 -20px 60px rgba(17,17,17,.14);
  }
  .msid-mobile-directory-drawer.is-open,
  .msid-mobile-school-drawer.is-open{transform:translateY(0);}
  html.msid-mobile-directory-open,
  html.msid-mobile-directory-open body,
  html.msid-mobile-school-open,
  html.msid-mobile-school-open body{overflow:hidden;}
  .msid-mobile-directory-drawer>header,
  .msid-mobile-school-drawer>header{
    position:relative;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:18px 13px 11px;
    border-bottom:1px solid var(--msid-line-soft);
  }
  .msid-mobile-directory-drawer>header::before,
  .msid-mobile-school-drawer>header::before{
    content:"";
    position:absolute;
    top:7px;
    left:50%;
    width:42px;
    height:4px;
    transform:translateX(-50%);
    border-radius:999px;
    background:var(--msid-line);
  }
  .msid-mobile-directory-drawer>header>div,
  .msid-mobile-school-drawer>header>div{display:flex;flex-direction:column;gap:1px;}
  .msid-mobile-directory-drawer>header small,
  .msid-mobile-school-drawer>header small{font-size:.62rem;color:var(--msid-muted);}
  .msid-mobile-directory-drawer>header strong,
  .msid-mobile-school-drawer>header strong{font-size:.92rem;color:var(--msid-ink);font-weight:900;}
  .msid-mobile-directory-drawer>header button,
  .msid-mobile-school-drawer>header button{
    width:35px;
    height:35px;
    padding:0;
    border:1px solid var(--msid-line);
    border-radius:11px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
  }
  .msid-mobile-directory-drawer-body,
  .msid-mobile-school-drawer-body{
    min-height:0;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:15px 13px;
  }
  .msid-mobile-directory-drawer-body>label,
  .msid-mobile-school-drawer-body>label{display:flex;flex-direction:column;gap:6px;}
  .msid-mobile-filter-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0;}
  .msid-mobile-filter-pair[hidden]{display:none!important;}
  .msid-mobile-directory-drawer-body>.msid-mobile-filter-pair>label{min-width:0;display:flex;flex-direction:column;gap:6px;}
  .msid-mobile-directory-drawer-body>.msid-mobile-filter-pair>label>span,
  .msid-mobile-directory-drawer-body>label>span,
  .msid-mobile-school-drawer-body>label>span,
  .msid-mobile-directory-drawer-body legend,
  .msid-mobile-school-drawer-body legend{color:var(--msid-ink);font-size:.74rem;font-weight:850;}
  .msid-mobile-directory-drawer-body select,
  .msid-mobile-school-drawer-body select{
    width:100%;
    min-height:46px;
    padding:0 10px;
    border:1px solid var(--msid-line);
    border-radius:12px;
    background:#fff;
    color:var(--msid-ink);
    font:inherit;
    font-size:.8rem;
  }
  .msid-mobile-directory-drawer-body fieldset,
  .msid-mobile-school-drawer-body fieldset{margin:0;padding:0;border:0;}
  .msid-mobile-directory-drawer-body fieldset>div,
  .msid-mobile-school-drawer-body fieldset>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .msid-mobile-directory-drawer-body fieldset button,
  .msid-mobile-school-drawer-body fieldset button{
    min-height:35px;
    padding:0 10px;
    border:1px solid var(--msid-line);
    border-radius:999px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.7rem;
    font-weight:800;
  }
  .msid-mobile-directory-drawer-body fieldset button.is-active,
  .msid-mobile-school-drawer-body fieldset button.is-active{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:#fff;
  }
  .msid-mobile-directory-drawer>footer,
  .msid-mobile-school-drawer>footer{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:7px;
    padding:11px 13px max(11px,env(safe-area-inset-bottom));
    border-top:1px solid var(--msid-line-soft);
    background:#fff;
  }
  .msid-mobile-directory-drawer>footer button,
  .msid-mobile-school-drawer>footer button{
    min-height:43px;
    border:1px solid var(--msid-line);
    border-radius:12px;
    background:#fff;
    color:var(--msid-ink);
    box-shadow:none;
    font-size:.78rem;
    font-weight:850;
  }
  .msid-mobile-directory-drawer>footer button:last-child,
  .msid-mobile-school-drawer>footer button:last-child{
    border-color:var(--msid-aubergine);
    background:var(--msid-aubergine);
    color:#fff;
  }

}

/* 6.8.4 — the first directory level is server-paged to match desktop first paint.
 * On phones the page wrapper must be layout-transparent so its buttons remain
 * direct grid items without waiting for JavaScript to unwrap/rebuild them. */
@media (max-width:760px){
  .msid-mobile-directory-level > .msid-directory-icon-page[data-msid-icon-page]{display:contents}
}