/* Mobile layout overrides: shared by the trainer and static knowledge pages. */
@media (max-width: 767px) {
  html { scroll-padding-top: 0; }
  .layout, .main, #content { min-width: 0; }
  .sidebar {
    position: sticky; top: 0; z-index: 50;
    height: auto; min-height: 0; width: 100%;
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px max(16px, env(safe-area-inset-right));
    background: #131916; backdrop-filter: none;
  }
  .sidebar .brand { min-width: 0; flex: 1 1 auto; }
  .sidebar .brandLogo { display: block; width: min(220px, 100%); height: auto; }
  .sidebar .menuToggle.secondary {
    display: inline-flex !important; flex: 0 0 auto;
    align-items: center; justify-content: center; gap: 7px;
    min-width: 68px; min-height: 44px; padding: 10px 12px;
    font-size: 14px; margin: 0; border-radius: 10px;
  }
  .sidebar #siteNavigation {
    display: none !important; position: absolute;
    top: 100%; left: 0; right: 0; width: auto;
    margin: 0; padding: 10px 16px 14px;
    background: #131916; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 18px #0003;
    gap: 8px; overflow: visible;
  }
  .sidebar #siteNavigation.expanded { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar #siteNavigation a, .sidebar #siteNavigation button {
    display: flex; justify-content: center; align-items: center;
    min-height: 48px; min-width: 0; margin: 0; padding: 12px 8px;
    font-size: 14px; text-align: center; white-space: normal;
  }
  .main { width: 100%; padding: 22px max(16px, env(safe-area-inset-left)) 32px; }
  .simpleHero { padding: 14px 0 36px; }
  .simpleHero h1 { font-size: clamp(32px, 8.8vw, 40px); letter-spacing: -1.4px; margin: 16px 0; }
  .simpleHero > p { font-size: 16px; line-height: 1.65; margin: 18px 0 22px; }
  .startCta { min-height: 52px; padding: 15px 20px; gap: 24px; }
  .startPrice { font-size: 13px; line-height: 1.65; }
  .startBenefits { gap: 24px; padding-top: 26px; }
  .startBenefits p, .sampleQuestion > div { font-size: 14px; }
  .startPreview { margin-top: 36px; gap: 18px; }
  .card { padding: 22px 18px; }
  .cardhead { gap: 10px; flex-wrap: wrap; }
  .cardhead .tag { min-width: 0; max-width: 100%; }
  .bookmark { min-height: 44px; padding: 10px 12px; }
  .answers { gap: 12px; }
  .answer { min-height: 56px; padding: 15px 12px; gap: 11px; font-size: 16px; line-height: 1.55; }
  .answer > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .letter { width: 30px; height: 30px; }
  .feedback p { font-size: 15px; line-height: 1.7; }
  .sourcelink { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
  .stats { gap: 8px; margin: 20px 0; }
  .stat { min-width: 0; padding: 14px 10px; }
  .stat strong { font-size: 27px; }
  .stat strong span { font-size: 12px; }
  .stat > span { font-size: 12px; line-height: 1.45; display: block; }
  .subnav { gap: 6px; margin-bottom: 24px; padding-bottom: 16px; overflow: visible; }
  .subnav button { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  .subnav summary { min-height: 44px; padding: 12px 6px; font-size: 13px; }
  .subnav .moreModes { right: 0; top: 48px; max-width: calc(100vw - 32px); }
  .subnav .moreModes button { justify-content: flex-start; width: 100%; }
  .toolbar { align-items: stretch; gap: 12px; }
  .toolbar > label { width: 100%; }
  .toolbar select, .toolbar input { min-width: 0; width: 100%; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; min-height: 48px; }
  input[type=checkbox], input[type=radio] { min-height: 0; }
  .footrow { align-items: stretch; gap: 12px; }
  .footrow > .hint { flex: 1 1 100%; line-height: 1.6; }
  .footrow > .primary, .footrow > .secondary { flex: 1 1 135px; min-height: 48px; }
  .examgrid { gap: 6px; }
  .examgrid button { width: 44px; height: 44px; flex: 0 0 44px; }
  .examhero { padding: 22px 18px; align-items: flex-start; gap: 12px; }
  .examhero h2 { font-size: 22px; }
  .examhero .target { display: none; }
  .flashcard { min-height: 280px; padding: 28px 20px; }
  .flashcard h2 { font-size: clamp(22px, 6vw, 28px); overflow-wrap: anywhere; }
  .libraryhead h1, .readinghero h1 { font-size: clamp(30px, 8vw, 40px); letter-spacing: -1.2px; overflow-wrap: anywhere; }
  .librarysearch { gap: 8px; padding: 8px 12px; min-width: 0; }
  .librarysearch input { min-width: 0; }
  .editorialgrid, .glossarygrid, .sourceTiles { grid-template-columns: minmax(0, 1fr); }
  .editorialgrid > *, .glossarygrid > *, .readinglayout > *, .accountGrid > *, .pricingGrid > * { min-width: 0; }
  .readingmeta { align-items: center; gap: 12px; line-height: 1.5; }
  .readingmeta .bookmark { margin-left: 0; }
  .readinglayout { display: block; margin-top: 24px; }
  .articlebody h2 { font-size: 24px; overflow-wrap: anywhere; }
  .articlebody p { font-size: 16px; line-height: 1.8; }
  .articlebody a, .articleCredit, footer a, .accountHeading .intro { overflow-wrap: anywhere; }
  .articlebody section, .articleQuiz, #question, #kalkulator { scroll-margin-top: 88px; }
  .readingtoc { position: static; }
  .articleblueprint svg, .atlasart { max-width: 100%; height: auto; }
  .articleQuiz { padding: 24px 18px; }
  .miniquizhead { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .articlebody details > summary, .offerfaq summary, .sourcebox > summary, .bankitem summary { min-height: 44px; padding-block: 12px; }
  .accountHeading { gap: 12px; margin-top: 16px; flex-wrap: wrap; }
  .accountHeading h1 { font-size: clamp(30px, 8vw, 40px); }
  .accountHeading > button { min-height: 44px; }
  .accountContinue { padding: 24px 20px; }
  .accountNumbers > div { min-width: 0; padding: 16px 10px; }
  .accountNumbers span { font-size: 12px; line-height: 1.5; }
  .accountHistoryRow { grid-template-columns: minmax(0, 1fr) 42px 86px; gap: 8px; }
  .accountCardHead .textlink, .accountShortcut, .accountReading, .accountSyncRow .textlink { min-height: 44px; }
  .accountLoginWrap { margin: 16px auto; }
  .accountLoginWrap h1 { font-size: clamp(32px, 8.6vw, 40px); letter-spacing: -1.4px; }
  .accountLoginForm .consent { min-height: 44px; padding-block: 6px; font-size: 13px; }
  .accountLoginForm .consent input { width: 20px; height: 20px; margin-top: 3px; }
  .accountLoginForm .primary { min-height: 52px; }
  .pricingGrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pricingCard { padding: 26px 20px; }
  .pricingAmount { font-size: 44px; }
  .pricingCard button { width: 100%; min-height: 52px; }
  .purchaseForm { padding: 24px 18px; }
  .purchaseForm h2 { font-size: 24px; }
  .purchaseForm label { font-size: 14px; line-height: 1.7; }
  .purchaseForm button { width: 100%; min-height: 52px; white-space: normal; line-height: 1.5; }
  .costFields { grid-template-columns: minmax(0, 1fr); }
  .costOption { min-height: 44px; align-items: flex-start; }
  .seoDetails p { font-size: 16px; }
  .seoResourceGrid { grid-template-columns: minmax(0, 1fr); }
  .seoResourceGrid a, .seoFooter a { min-height: 44px; display: inline-flex; align-items: center; }
  .seoFooter { line-height: 1.6; }
  footer { font-size: 12px; line-height: 1.8; }
}
@media (hover: none) {
  .answer:not(:disabled):hover, .primary:hover { transform: none; }
}
@media (max-width:767px) {
  .subnav { position: relative; }
  .subnav details { position: static; }
  .subnav .moreModes { top: calc(100% - 8px); right: 0; left: auto; width: min(240px, 100%); min-width: 0; }
  #content > h1 { font-size: clamp(30px,8vw,36px); letter-spacing: -1.2px; }
  .statsPanel { margin: 16px 0 20px; border: 1px solid var(--line); border-radius: 12px; }
  .statsPanel > summary { min-height: 46px; padding: 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
  .statsPanel > summary span { margin-left: 8px; color: var(--ink); }
  .statsPanel .stats { margin: 0; padding: 0 10px 10px; }
  .statsPanel .stat { padding: 12px 8px; }
  .statsPanel .stat strong { font-size: 24px; }
  #examQuestion, #content { scroll-margin-top: 88px; }
}
@media (min-width:768px) {
  .statsPanel { border: 0; margin: 0; padding: 0; }
  .statsPanel > summary { display: none; }
}
@media (max-width:767px) {
  button.textlink { min-height: 44px; }
  .legalLinks a { display: inline-flex; align-items: center; min-height: 44px; }
}