/* ==========================================================
 * MOYAMOVA 1.11.6 — Mobile Articles Trainer
 * Mobile presentation only. Article trainer logic stays unchanged.
 * ========================================================== */
@media (max-width:899px){
  html[data-mobile-shell="articles"]{--footer-h-actual:0px}

  html[data-mobile-shell="articles"] .header,
  html[data-mobile-shell="articles"] .app-footer{display:none!important}

  html[data-mobile-shell="articles"] #app.content{
    display:block!important;
    width:100%!important;max-width:none!important;
    height:auto!important;min-height:var(--mobile-viewport-height)!important;
    padding:
      max(8px,var(--mobile-safe-top,0px))
      max(10px,var(--mobile-safe-right,0px))
      calc(18px + var(--mobile-safe-bottom,0px))
      max(10px,var(--mobile-safe-left,0px))!important;
    overflow:visible!important;box-sizing:border-box
  }

  html[data-mobile-shell="articles"] .trainer-desktop-shell{
    display:block!important;width:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;background:transparent!important;
    border-radius:0!important;box-shadow:none!important;overflow:visible!important
  }
  html[data-mobile-shell="articles"] .trainer-side{display:none!important}
  html[data-mobile-shell="articles"] .trainer-desktop-main{
    width:100%!important;max-width:560px!important;min-width:0!important;
    margin:0 auto!important;padding:0!important
  }

  .mobile-articles-bar{
    display:grid;grid-template-columns:minmax(0,1fr) auto 44px;
    align-items:center;gap:8px;min-height:52px;margin:0 0 10px
  }
  .mobile-articles-back{
    min-width:0;height:44px;display:inline-flex;align-items:center;gap:8px;
    justify-self:start;padding:0 12px 0 10px;border:1px solid rgba(69,88,165,.12);
    border-radius:14px;background:rgba(255,255,255,.78);color:inherit;
    box-shadow:0 5px 18px rgba(44,55,112,.06);font:inherit;font-size:12px;font-weight:750
  }
  .mobile-articles-back__arrow{font-size:20px;line-height:1;transform:translateY(-1px)}
  .mobile-articles-title{
    min-width:0;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-align:center;font-size:13px;font-weight:800
  }
  .mobile-articles-menu{
    width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(69,88,165,.12);
    border-radius:14px;background:rgba(255,255,255,.78);color:inherit;
    box-shadow:0 5px 18px rgba(44,55,112,.06);font:inherit;font-size:18px;font-weight:800;letter-spacing:1px
  }

  html[data-theme="dark"][data-mobile-shell="articles"] .mobile-articles-back,
  html[data-theme="dark"][data-mobile-shell="articles"] .mobile-articles-menu,
  html.dark[data-mobile-shell="articles"] .mobile-articles-back,
  html.dark[data-mobile-shell="articles"] .mobile-articles-menu{
    background:rgba(24,36,52,.92);border-color:rgba(142,166,215,.16);box-shadow:none
  }

  html[data-mobile-shell="articles"] .trainer-desktop-main>.home{
    width:100%!important;max-width:none!important;min-width:0!important;
    margin:0!important;padding:0!important;display:flex!important;flex-direction:column;gap:6px!important
  }

  /* Sets match Words mobile geometry. */
  html[data-mobile-shell="articles"] .home-sets.card{
    order:1;margin:0!important;padding:8px 10px 7px!important;
    border-radius:16px!important;box-shadow:0 6px 22px rgba(34,48,94,.055)!important
  }
  html[data-mobile-shell="articles"] .sets-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:7px;margin:0 0 6px!important
  }
  html[data-mobile-shell="articles"] .sets-title{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    margin:0!important;font-size:12px!important;font-weight:800!important
  }
  html[data-mobile-shell="articles"] .sets-desktop-tools,
  html[data-mobile-shell="articles"] .trainer-lang-flag{display:none!important}
  html[data-mobile-shell="articles"] .sets-viewport{
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  html[data-mobile-shell="articles"] .sets-viewport::-webkit-scrollbar{display:none}
  html[data-mobile-shell="articles"] .sets-grid{
    display:flex!important;flex-wrap:nowrap!important;gap:7px!important;width:max-content;min-width:100%
  }
  html[data-mobile-shell="articles"] .set-pill{
    flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:32px!important;
    padding:0!important;border-radius:11px!important;font-size:11px!important
  }
  html[data-mobile-shell="articles"] .sets-stats{
    margin:5px 0 0!important;min-height:0!important;font-size:10px!important;line-height:1.2;opacity:.65
  }

  /* Articles has no useful context payload: do not reserve an empty card. */
  html[data-mobile-shell="articles"] .home-hints,
  html[data-mobile-shell="articles"] .home-filters{display:none!important}

  html[data-mobile-shell="articles"] .home-trainer.is-articles{
    order:3;margin:0!important;padding:10px 10px 9px!important;
    min-height:0!important;border-radius:18px!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:7px!important;box-shadow:0 10px 30px rgba(32,46,96,.075)!important
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-top{
    display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;
    align-items:center!important;min-height:30px!important;gap:8px!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-mode-indicator{
    display:grid!important;grid-column:1;justify-self:start;width:38px;height:38px;min-width:38px;min-height:38px;
    padding:0;place-items:center;border:1px solid rgba(69,88,165,.14);border-radius:12px;
    background:rgba(247,249,255,.92);font-size:18px;line-height:1
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-audio-btn{display:none!important}
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-stars{
    grid-column:2;justify-self:center;font-size:17px!important;gap:3px!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .heart{
    grid-column:3;justify-self:end;width:38px;height:38px;display:grid;place-items:center;
    padding:0;font-size:20px
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-word{
    margin:2px auto 0!important;min-height:1.2em!important;text-align:center!important;
    font-size:clamp(25px,7.4vw,32px)!important;line-height:1.1!important;font-weight:800!important;
    letter-spacing:-.025em
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-subtitle{
    margin:0 0 2px!important;text-align:center!important;font-size:12px!important;opacity:.62
  }

  /* Three article choices stay in one row. */
  html[data-mobile-shell="articles"] .home-trainer.is-articles .answers-grid{
    width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;margin:5px 0 2px!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .answers-grid .answer-btn{
    width:100%!important;min-width:0!important;height:76px!important;min-height:76px!important;
    padding:10px 4px!important;border:1px solid #dfe7f0!important;border-radius:15px!important;
    background:#f8fbff!important;color:#1c2637!important;box-shadow:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important
  }
  html[data-mobile-shell="articles"] .article-answer__choice{
    display:block;font-size:24px!important;font-weight:850!important;line-height:1!important
  }
  html[data-mobile-shell="articles"] .article-answer__gender{
    display:block;margin-top:7px;font-size:9px!important;font-weight:700!important;line-height:1.15
  }
  html[data-mobile-shell="articles"] .article-answer--der .article-answer__gender{color:#258cff!important}
  html[data-mobile-shell="articles"] .article-answer--die .article-answer__gender{color:#ef4f62!important}
  html[data-mobile-shell="articles"] .article-answer--das .article-answer__gender{color:#25bd72!important}

  html[data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn.is-correct{
    background:#e7f8ef!important;border-color:#24b86b!important;color:#127341!important;opacity:1!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn.is-wrong{
    background:#fff0f1!important;border-color:#ef4f62!important;color:#b82d3d!important;opacity:1!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn.is-dim{opacity:.42!important}

  html[data-mobile-shell="articles"] .home-trainer.is-articles .idk-btn{
    width:fit-content!important;min-width:118px!important;height:34px!important;min-height:34px!important;
    margin:3px auto 0!important;padding:0 15px!important;border-radius:11px!important;font-size:12px!important
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .dict-stats{
    margin:0!important;text-align:center;font-size:10px!important;line-height:1.2;opacity:.62
  }

  /* Same component language as Words quickbar; only the 3-column layout differs. */
  html[data-mobile-shell="articles"] .articles-mobile-tools.trainer-quickbar{
    order:4;
    width:100%;
    margin:0!important;
    box-sizing:border-box;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    padding:6px!important;
    border-radius:15px!important;
    box-shadow:0 5px 18px rgba(34,48,94,.045)!important
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qbtn{
    height:36px!important;
    min-width:0!important;
    padding:0 4px!important;
    gap:5px!important;
    font-size:10px!important
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qico{
    width:24px!important;height:24px!important;flex-basis:24px!important;font-size:13px!important
  }

  /* Main article card follows the quickbar, same hierarchy as Words. */

  /* Shared migrated bottom sheet. */
  html[data-mobile-shell="articles"] .oc-root{inset:0;max-height:var(--mobile-viewport-height)}
  html[data-mobile-shell="articles"] .oc-overlay{
    inset:0!important;background:rgba(12,20,38,.30);backdrop-filter:none!important;-webkit-backdrop-filter:none!important
  }
  html[data-mobile-shell="articles"] .oc-panel{
    left:8px!important;right:8px!important;top:auto!important;
    bottom:max(8px,var(--mobile-safe-bottom,0px))!important;width:auto!important;min-width:0!important;
    max-width:560px!important;max-height:min(82dvh,calc(var(--mobile-viewport-height) - 24px));
    margin:0 auto;border-radius:22px;overflow:hidden;
    transform:translateY(calc(100% + 28px))!important;transition:transform .22s ease!important
  }
  html[data-mobile-shell="articles"] body.menu-open .oc-panel{transform:translateY(0)!important}
  html[data-mobile-shell="articles"] .oc-back{display:none!important}
  html[data-mobile-shell="articles"] .oc-body{
    display:block!important;min-height:0;overflow-x:hidden!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;padding:10px 12px calc(82px + var(--mobile-safe-bottom,0px))!important
  }
  html[data-mobile-shell="articles"] .mobile-nav-sheet{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    padding:2px 0 12px;margin-bottom:8px;border-bottom:1px solid rgba(78,96,144,.12)
  }
  html[data-mobile-shell="articles"] .mobile-nav-sheet__item{
    min-width:0;min-height:52px;display:flex;align-items:center;gap:10px;padding:10px 11px;
    border:1px solid rgba(73,94,169,.12);border-radius:14px;background:rgba(247,249,255,.92);
    color:inherit;text-align:left;font:inherit
  }
  html[data-mobile-shell="articles"] .mobile-nav-sheet__icon{
    width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;
    background:rgba(97,118,235,.10);font-size:16px
  }
  html[data-mobile-shell="articles"] .mobile-nav-sheet__copy{min-width:0;display:flex;flex-direction:column;gap:1px}
  html[data-mobile-shell="articles"] .mobile-nav-sheet__copy strong{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.15
  }
  html[data-mobile-shell="articles"] .mobile-nav-sheet__copy small{color:#788498;font-size:9.5px;line-height:1.15}
  html[data-mobile-shell="articles"] .menu-item.app-version{
    position:relative;z-index:1;margin-bottom:8px!important;padding-bottom:12px!important
  }

  html[data-theme="dark"][data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn{
    background:#162231!important;border-color:rgba(135,157,204,.16)!important;color:#edf4fb!important
  }
  html[data-theme="dark"][data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn.is-correct{
    background:#123c31!important;border-color:#25c17e!important;color:#56e6a6!important
  }
  html[data-theme="dark"][data-mobile-shell="articles"] .home-trainer.is-articles .answer-btn.is-wrong{
    background:#48252b!important;border-color:#ff5059!important;color:#ff7b82!important
  }
  html[data-theme="dark"][data-mobile-shell="articles"] .mobile-nav-sheet__item{
    background:#162231;border-color:rgba(135,157,204,.14)
  }
  html[data-theme="dark"][data-mobile-shell="articles"] .mobile-nav-sheet__icon{background:rgba(121,147,255,.12)}
  html[data-theme="dark"][data-mobile-shell="articles"] .mobile-nav-sheet__copy small{color:#9aa9bb}
}
@media(max-width:390px){
  html[data-mobile-shell="articles"] .mobile-articles-title{display:none}
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qlabel{display:none}
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qbtn{padding:0!important}
  html[data-mobile-shell="articles"] .mobile-articles-bar{grid-template-columns:minmax(0,1fr) 44px}
  html[data-mobile-shell="articles"] .mobile-nav-sheet{grid-template-columns:1fr}
}


/* ==========================================================
 * MOYAMOVA 1.12.2 — Approved Mobile Articles layout
 * Final mobile-only authority for Articles Trainer.
 * ========================================================== */
@media (max-width:899px){
  html[data-mobile-shell="articles"] .home-hints,
  html[data-mobile-shell="articles"] .home-filters{
    display:none!important;
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles{
    order:3!important;
    position:relative!important;
    margin:0!important;
    padding:11px 10px 10px!important;
    gap:6px!important;
    min-height:0!important;
    border-radius:18px!important;
  }

  /* Top row: difficulty / stars / favorite. */
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-top{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-mode-indicator{
    display:grid!important;
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:38px!important;height:38px!important;
    min-width:38px!important;min-height:38px!important;
    padding:0!important;
    place-items:center!important;
    border:1px solid rgba(69,88,165,.14)!important;
    border-radius:12px!important;
    background:rgba(247,249,255,.92)!important;
    font-size:18px!important;
    line-height:1!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-stars{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    margin:0!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .heart{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:38px!important;height:38px!important;
    margin:0!important;padding:0!important;
  }

  /* Duplicate audio inside the card is intentionally removed. */
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-audio-btn,
  html[data-mobile-shell="articles"] .home-trainer.is-articles [data-articles-card-audio]{
    display:none!important;
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-word{
    margin:7px auto 0!important;
    font-size:clamp(28px,8vw,34px)!important;
    line-height:1.08!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-translation{
    margin:0!important;
    font-size:14px!important;
    line-height:1.2!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-subtitle{
    margin:4px 0 7px!important;
    font-size:11.5px!important;
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles .answers-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin:4px 0 6px!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .answers-grid .answer-btn{
    width:100%!important;
    min-width:0!important;
    height:82px!important;
    min-height:82px!important;
    padding:9px 4px!important;
    border-radius:15px!important;
  }
  html[data-mobile-shell="articles"] .article-answer__choice{
    font-size:24px!important;
  }
  html[data-mobile-shell="articles"] .article-answer__gender{
    margin-top:7px!important;
    font-size:9px!important;
  }

  html[data-mobile-shell="articles"] .home-trainer.is-articles .idk-btn{
    min-width:118px!important;
    height:36px!important;
    min-height:36px!important;
    margin:5px auto 1px!important;
  }
  html[data-mobile-shell="articles"] .home-trainer.is-articles .dict-stats{
    margin:2px 0 0!important;
    font-size:10px!important;
  }

  /* Bottom utility bar — the single control surface for Articles. */
  html[data-mobile-shell="articles"] .articles-mobile-tools.trainer-quickbar{
    order:4!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:0!important;
    padding:7px!important;
    border-radius:15px!important;
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qbtn{
    min-width:0!important;
    height:48px!important;
    padding:4px 3px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:11px!important;
    font-size:9.5px!important;
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qico{
    width:25px!important;height:25px!important;
    flex:0 0 25px!important;
    display:grid!important;
    place-items:center!important;
    font-size:13px!important;
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qlabel{
    display:block!important;
    line-height:1.05!important;
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qbtn.is-active{
    background:rgba(14,165,233,.08)!important;
  }
  html[data-mobile-shell="articles"] .articles-mobile-tools .trainer-qbtn.is-active .qico-word{
    box-shadow:inset 0 0 0 1px currentColor!important;
  }

  html[data-theme="dark"][data-mobile-shell="articles"] .home-trainer.is-articles .trainer-mode-indicator,
  html.dark[data-mobile-shell="articles"] .home-trainer.is-articles .trainer-mode-indicator{
    background:#162231!important;
    border-color:rgba(135,157,204,.16)!important;
  }
}