/* The national guide has two control groups and a long, scrollable city list. */
html body.national-guide-layout .stage{width:100%!important;height:100%!important;transition:none!important;}
html body.national-guide-layout #svgHost{inset:0!important;}
html body.national-guide-layout #svgHost>svg{transform:none!important;}
html body.national-guide-layout .modeBar{
  max-height:calc(var(--app-height,100dvh) - var(--safeT,0px) - var(--safeB,0px) - 74px);
  overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;
}
html body.national-guide-layout .modeBar>*{flex-shrink:0;}
html body.national-guide-layout .guidePilotList #list .item[data-code]{
  grid-column:auto!important;grid-row:auto!important;width:100%!important;
}
html body.national-guide-layout .guidePilotList #list .item.has-study-selection{
  height:auto!important;min-height:min-content!important;align-self:start;padding:8px!important;
}
html body.national-guide-layout .guideSelectionNames{gap:4px!important;}
html body.national-guide-layout .guideSelectionNames :is(.studyPref,.studyCapital){font-size:clamp(13px,3.4vw,18px);}
html body.national-guide-layout .guideSelectionNames .studyReading{font-size:10px;}
html[lang="ja"] body.national-guide-layout .guideSelectionNames :is(.studyPref,.studyCapital){white-space:nowrap;overflow-wrap:normal;}
/* National courses are review: Japanese city names need no reading row. */
html[lang="ja"] body.national-guide-layout :is(.guidePilotList .yomi,.guidePilotList .capYomi,.guideSelectionNames .studyReading,#nationalQuestionReading){display:none!important;}
html[lang="ja"] body.national-guide-layout .guidePilotList #list .blockTitle{display:none!important;}
/* Keep regional divisions in the study directory at every screen size. */
html body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list .blockTitle[data-region-subblock]{
  display:block!important;grid-column:1/-1!important;grid-row:auto!important;
  min-height:24px;margin:2px 0;padding:2px 3px;
  font-size:clamp(14px,3.5vw,16px);line-height:1.25;
}
html[lang="ja"] body.national-guide-layout .guidePilotList #list .item[data-code]{
  min-height:28px;height:auto;padding:3px 5px!important;
}
html[lang="ja"] body.national-guide-layout .guidePilotList #list .item .name{font-size:clamp(14px,3.8vw,18px);line-height:1.15;}
html[lang="ja"] body.national-guide-layout .guidePilotList #list .item.has-study-selection{padding:2px 4px!important;}
html[lang="ja"] body.national-guide-layout .guideSelectionNames{gap:0!important;text-align:center!important;}
html[lang="ja"] body.national-guide-layout .guideSelectionNames .studyPref{font-size:10px;line-height:1.1;}
html[lang="ja"] body.national-guide-layout .guideSelectionNames .studyCapital{font-size:14px;line-height:1.1;}
@media(orientation:portrait){
  html body.national-guide-layout .modeBar{
    left:calc(12px + var(--safeL,0px));right:calc(12px + var(--safeR,0px));
    top:calc(70px + var(--safeT,0px));width:auto;max-height:none;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    overflow:visible;
  }
  html body.national-guide-layout .modeBar .guideTitle{
    grid-column:1/-1;min-height:24px;height:auto;font-size:16px;padding:0;
  }
  html body.national-guide-layout .modeBar .knowledgeGroup{min-width:0;margin:0;padding:5px;border-radius:12px;}
  html body.national-guide-layout .nationalSpringTitle{font-size:13px;padding:2px 0 5px;white-space:normal;}
  html body.national-guide-layout .nationalStudyRow{gap:4px;}
  html body.national-guide-layout .modeBar .nationalStudyRow .viewBtn{
    min-height:36px;padding:4px 2px;font-size:11px;gap:3px;
  }
  html body.national-guide-layout .modeBar .nationalStudyRow .viewBtn::before{width:14px;height:14px;flex-basis:14px;}
  html body.national-guide-layout .practiceGroup{margin-top:5px;padding-left:5px;gap:5px;}
  html body.national-guide-layout .modeBar .modeBtn{min-height:36px;padding:4px;font-size:11px;}
  html body.national-guide-layout .modeBar>#allLangToggle{grid-column:1/-1;min-height:28px;margin:0;padding:2px 10px;justify-self:start;}
  html body.national-guide-layout .guidePilotList{
    left:calc(12px + var(--safeL,0px));right:calc(12px + var(--safeR,0px));
    top:var(--national-list-top,70%);bottom:calc(12px + var(--safeB,0px));
    height:auto!important;width:auto;padding-top:0;
  }
  html body.national-guide-layout .guidePilotList #list{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-content:start;gap:6px;max-width:none;height:100%;
  }
  html[lang="ja"] body.national-guide-layout .guidePilotList #list{gap:4px;}
  html body.national-guide-layout .guidePilotList #list .blockTitle{display:block;grid-column:1/-1!important;grid-row:auto!important;}
  html body.national-guide-layout .guidePilotList #list .item{min-height:48px;flex:0 0 auto;padding:6px 10px;}
  html body.national-guide-layout .guidePilotList #list .item .name{font-size:clamp(14px,4vw,18px);}
  html body.national-guide-layout #nationalQuestion{
    width:min(180px,calc(100% - 24px - var(--safeL,0px) - var(--safeR,0px)));
    right:calc(12px + var(--safeR,0px));bottom:calc(12px + var(--safeB,0px));
  }
  html body.national-guide-layout #nationalQuestionName{font-size:clamp(22px,3.4vw,28px);}
}
@media(orientation:portrait) and (min-width:600px){
  html body.national-guide-layout .modeBar{
    width:clamp(220px,29vw,280px);right:auto;display:flex;gap:8px;
  }
  html body.national-guide-layout .modeBar .guideTitle{min-height:32px;font-size:22px;}
  html body.national-guide-layout .modeBar .knowledgeGroup{padding:9px;border-radius:16px;}
  html body.national-guide-layout .nationalSpringTitle{font-size:19px;padding:2px 0 8px;}
  html body.national-guide-layout .modeBar .nationalStudyRow .viewBtn{min-height:44px;font-size:15px;padding:6px;}
  html body.national-guide-layout .modeBar .nationalStudyRow .viewBtn::before{width:20px;height:20px;flex-basis:20px;}
  html body.national-guide-layout .practiceGroup{margin-top:8px;padding-left:10px;gap:7px;}
  html body.national-guide-layout .modeBar .modeBtn{min-height:40px;padding:7px;font-size:15px;}
  html body.national-guide-layout .modeBar>#allLangToggle{min-height:34px;font-size:15px;}
  html body.national-guide-layout .guidePilotList #list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px;}
  html body.national-guide-layout .guidePilotList #list .item{min-height:52px;padding:6px;}
}

/* Japanese study lists use the tablet's right side as a regional directory. */
@media(orientation:landscape) and (min-width:900px) and (min-height:601px){
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"]{
    --pilot-list-width:clamp(280px,32vw,400px);
  }
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start;align-items:start;gap:4px 6px;
  }
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list .blockTitle{
    display:block!important;grid-column:1/-1!important;grid-row:auto!important;
    min-height:24px;margin:0;padding:2px 3px;font-size:16px;line-height:1.25;
  }
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list .item[data-code]{
    min-height:32px;padding:4px 6px!important;
  }
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list .item .left:only-child{
    flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;
  }
  html[lang="ja"] body.national-guide-layout[data-practice-mode="view"] .guidePilotList #list .item.has-study-selection{
    padding:2px 4px!important;
  }
}