/* ==========================================================
 * Project: MOYAMOVA
 * File: trainer.v2.css
 * Purpose: MOYAMOVA 1.6 word trainer visual layer (1x4)
 * Scope: ordinary word trainer only; Articles/Prepositions untouched
 * Version: 1.6.0
 * ========================================================== */

/* Keep the legacy engine/markup underneath; only the word trainer opts in. */
.home-trainer.home-trainer--words{
  --trainer-answer-h: 64px;
  --trainer-answer-gap: 10px;
  position: relative;
  row-gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  overflow: visible;
}

/* Stable centered mastery row: heart remains on the right, stars never drift. */
.home-trainer--words .trainer-top{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  min-height:36px;
  gap:8px;
}
.home-trainer--words .trainer-stars{
  grid-column:2;
  justify-self:center;
  font-size:20px;
  gap:5px;
}
.home-trainer--words .heart{
  grid-column:3;
  justify-self:end;
}

/* The learning unit is the visual anchor. It may be a word or a phrase. */
.home-trainer--words .trainer-word{
  margin:2px auto 0;
  max-width:100%;
  min-height:1.35em;
  text-align:center;
  font-size:clamp(25px, 3.1vw, 34px);
  line-height:1.18;
  font-weight:750;
  letter-spacing:-.015em;
  white-space:normal;
  overflow-wrap:anywhere;
}
.home-trainer--words .trainer-subtitle{
  margin:0 0 2px;
  text-align:center;
  font-size:13px;
  line-height:1.3;
  opacity:.62;
}

/* One permanent geometry for every question: four full-width answer rows. */
.home-trainer--words .answers-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:repeat(4, var(--trainer-answer-h));
  gap:var(--trainer-answer-gap) !important;
  width:100%;
  margin:4px 0 6px !important;
}
.home-trainer--words .answers-grid .answer-btn{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:var(--trainer-answer-h) !important;
  min-height:var(--trainer-answer-h);
  max-height:var(--trainer-answer-h);
  padding:8px 18px;
  border:1px solid color-mix(in srgb, var(--brand, #35b6ff) 82%, transparent);
  border-radius:14px;
  background:var(--brand, #35b6ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  font-size:16px !important;
  line-height:1.22;
  font-weight:700;
  letter-spacing:.005em;
  box-shadow:0 2px 7px rgba(0,0,0,.06);
  transition:transform .07s ease, filter .14s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.home-trainer--words .answers-grid .answer-btn.answer-btn--long{
  font-size:14px !important;
  line-height:1.2;
}
.home-trainer--words .answers-grid .answer-btn.answer-btn--xlong{
  font-size:12.5px !important;
  line-height:1.15;
}
@media (hover:hover) and (pointer:fine){
  .home-trainer--words .answers-grid .answer-btn:not(:disabled):hover{
    filter:brightness(1.035);
    transform:translateY(-1px);
  }
}
.home-trainer--words .answers-grid .answer-btn:active{ transform:translateY(1px); }

/* Feedback changes colour only — position and dimensions never change. */
.home-trainer--words .answers-grid .answer-btn.is-correct{
  background:var(--answer-green-bg, #22c55e);
  border-color:var(--answer-green-bd, #16a34a);
  color:#fff;
}
.home-trainer--words .answers-grid .answer-btn.is-wrong{
  background:var(--answer-red-bg, #ef4444);
  border-color:var(--answer-red-bd, #dc2626);
  color:#fff;
}
.home-trainer--words .answers-grid .answer-btn.is-dim{ opacity:.56; }
.home-trainer--words .answers-grid .answer-btn.is-correct.is-dim{ opacity:1; }
.home-trainer--words .answers-grid .answer-btn:disabled{ cursor:default; transform:none; }

/* Secondary action stays spatially stable under the four choices. */
.home-trainer--words .btn-ghost.idk-btn{
  width:100%;
  height:42px;
  margin:0;
  border-radius:12px;
  font-size:14px;
  font-weight:650;
}
.home-trainer--words .dict-stats{ margin:0; font-size:13px; opacity:.62; }

/* Existing example/hint card remains functional, but visually belongs to the trainer. */
.home--word-trainer .home-hints{
  border-radius:16px;
}
.home--word-trainer .home-hints .hints-body{
  line-height:1.4;
}

/* Mobile keeps the exact same 1x4 geometry, only scaled once for the viewport. */
@media (max-width: 560px){
  .home-trainer.home-trainer--words{
    --trainer-answer-h: 58px;
    --trainer-answer-gap: 8px;
    padding:14px 12px 12px;
    row-gap:8px;
    border-radius:16px;
  }
  .home-trainer--words .trainer-top{ min-height:30px; }
  .home-trainer--words .trainer-stars{ font-size:18px; gap:4px; }
  .home-trainer--words .trainer-word{
    font-size:clamp(23px, 7vw, 29px);
    line-height:1.16;
  }
  .home-trainer--words .answers-grid .answer-btn{
    height:var(--trainer-answer-h) !important;
    min-height:var(--trainer-answer-h);
    max-height:var(--trainer-answer-h);
    padding:6px 12px;
    font-size:15px !important;
    border-radius:13px;
  }
  .home-trainer--words .answers-grid .answer-btn.answer-btn--long{ font-size:13px !important; }
  .home-trainer--words .answers-grid .answer-btn.answer-btn--xlong{ font-size:11.5px !important; }
  .home-trainer--words .btn-ghost.idk-btn{ height:40px; }
}

/* Dark mode derives surfaces from existing tokens; success/danger/brand stay unchanged. */
html[data-theme="dark"] .home-trainer--words .answers-grid .answer-btn{
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce){
  .home-trainer--words .answers-grid .answer-btn{ transition:none; }
}

/* ==========================================================
 * 1.7.1 — compact secondary action + Trainer quick controls
 * ========================================================== */

/* “Не знаю” is a secondary action, not a fifth answer. */
.home-trainer--words .btn-ghost.idk-btn,
.idk-btn {
  width: fit-content !important;
  min-width: 128px !important;
  max-width: 180px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* The quickbar replaces the old corner mode/audio indicators in word trainer. */
.home-trainer--words .trainer-mode-indicator,
.home-trainer--words .trainer-audio-btn {
  display: none !important;
}

.trainer-quickbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 1px 44px 44px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface-1, #fff);
  box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
}

.trainer-qbtn {
  min-width: 0;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text, #111827);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .08s ease, opacity .15s ease;
}

.trainer-qbtn:active { transform: scale(.97); }

.trainer-qico {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.qico-auto    { background: rgba(59,130,246,.14); color: #3b82f6; }
.qico-reverse { background: rgba(16,185,129,.14); color: #10b981; }
.qico-focus   { background: rgba(139,92,246,.14); color: #8b5cf6; }
.qico-example { background: rgba(236,72,153,.13); color: #ec4899; }
.qico-word    { background: rgba(14,165,233,.13); color: #0ea5e9; }

.trainer-qbtn.is-active {
  background: color-mix(in srgb, var(--brand, #35b6ff) 8%, transparent);
}

.trainer-qbtn.is-active .trainer-qico {
  box-shadow: inset 0 0 0 1px currentColor;
}

.trainer-qbtn--audio {
  width: 38px;
  padding: 0;
}

.trainer-qbtn--audio .trainer-qico {
  opacity: .42;
  filter: grayscale(.55);
}

.trainer-qbtn--audio.is-active .trainer-qico {
  opacity: 1;
  filter: none;
}

.trainer-qsep {
  width: 1px;
  height: 28px;
  background: var(--border, #e5e7eb);
  justify-self: center;
}

@media (max-width: 560px) {
  .trainer-quickbar {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 1px 38px 38px;
    gap: 4px;
    padding: 7px 8px;
    margin-top: 7px;
  }
  .trainer-qbtn {
    height: 34px;
    gap: 5px;
    padding: 0 4px;
    font-size: 10px;
  }
  .trainer-qico {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    font-size: 13px;
  }
  .trainer-qbtn--audio {
    width: 34px;
  }
  .trainer-qsep {
    height: 24px;
  }
}

@media (max-width: 390px) {
  .trainer-qlabel { display: none; }
  .trainer-qbtn { padding: 0; }
}


/* ==========================================================
 * 1.7.7 — Desktop Trainer shell
 * Same desktop geometry as Dashboard. Mobile remains untouched.
 * ========================================================== */
@media (min-width: 900px) {
  body:has(.trainer-desktop-shell) {
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  body:has(.trainer-desktop-shell) > .header,
  body:has(.trainer-desktop-shell) .header {
    display: none !important;
  }

  body:has(.trainer-desktop-shell) .app-footer {
    display: none !important;
  }

  .content:has(.trainer-desktop-shell) {
    display: block !important;
    height: auto !important;
    min-height: 100vh;
    max-width: none !important;
    overflow: visible !important;
    padding: 12px 18px 28px !important;
    box-sizing: border-box;
  }

  .trainer-desktop-shell {
    --db: #f5f8fd;
    --dc: #fff;
    --dt: #182235;
    --dm: #6d7788;
    --dbd: #e4eaf3;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    width: min(100%, 1440px);
    min-height: calc(100vh - 24px);
    margin: 0 auto;
    background: var(--db);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(20,40,80,.08);
  }

  .trainer-desktop-shell .trainer-side {
    width: 224px;
    min-width: 224px;
    min-height: 100%;
    padding: 18px 14px 14px;
    box-sizing: border-box;
  }

  .trainer-desktop-main {
    min-width: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px 30px;
    box-sizing: border-box;
  }

  .trainer-desktop-main > .home.home--word-trainer {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 12px;
  }

  /* Compact the set strip to Dashboard proportions. */
  .trainer-desktop-main .home-sets.card {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .trainer-desktop-main .home-sets .sets-header {
    margin-bottom: 8px;
  }

  .trainer-desktop-main .home-sets .sets-title {
    font-size: 15px;
  }

  .trainer-desktop-main .home-sets .sets-viewport {
    max-height: 62px;
  }

  .trainer-desktop-main .home-sets .sets-grid {
    gap: 7px;
  }

  .trainer-desktop-main .home-sets .set-pill {
    min-width: 54px;
    height: 42px;
    border-radius: 10px;
  }

  .trainer-desktop-main .home-sets .sets-stats {
    margin: 7px 0 0;
    font-size: 11px;
  }

  /* Example becomes a compact supporting card, not a full-width empty band. */
  .trainer-desktop-main .home-hints {
    padding: 12px 16px !important;
    border-radius: 14px;
  }

  .trainer-desktop-main .home-hints .hints-body {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Put quick controls before the question visually on desktop. */
  .trainer-desktop-main .trainer-quickbar {
    order: 0;
    width: min(100%, 820px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0,1fr)) 1px 44px 44px;
    padding: 7px 9px;
    border-radius: 13px;
  }

  .trainer-desktop-main .trainer-qbtn {
    height: 36px;
  }

  /* Main learning card: same shell width, focused inner interaction zone. */
  .trainer-desktop-main .home-trainer.home-trainer--words {
    --trainer-answer-h: 58px;
    --trainer-answer-gap: 9px;
    padding: 16px 18px 14px;
    row-gap: 8px;
    border-radius: 16px;
  }

  .trainer-desktop-main .home-trainer--words .trainer-word {
    font-size: clamp(28px, 2.2vw, 34px);
    margin-top: 0;
  }

  .trainer-desktop-main .home-trainer--words .trainer-subtitle {
    font-size: 12px;
  }

  .trainer-desktop-main .home-trainer--words .answers-grid {
    width: min(100%, 820px);
    margin: 4px auto 6px !important;
  }

  .trainer-desktop-main .home-trainer--words .answers-grid .answer-btn {
    height: var(--trainer-answer-h) !important;
    min-height: var(--trainer-answer-h);
    max-height: var(--trainer-answer-h);
    border-radius: 12px;
    font-size: 15px !important;
  }

  .trainer-desktop-main .home-trainer--words .btn-ghost.idk-btn {
    height: 40px;
    min-width: 126px !important;
  }

  .trainer-desktop-main .home-trainer--words .dict-stats {
    font-size: 11px;
  }

  .trainer-desktop-main .home-filters {
    max-width: 820px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1400px) {
  .trainer-desktop-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .trainer-desktop-shell .trainer-side {
    width: 232px;
    min-width: 232px;
  }

  .trainer-desktop-main {
    max-width: 1200px;
  }
}

/* On phones/tablets the shell disappears structurally and the proven mobile trainer stays intact. */
@media (max-width: 899px) {
  .trainer-desktop-shell,
  .trainer-desktop-main {
    display: contents;
  }

  .trainer-desktop-shell > .trainer-side {
    display: none !important;
  }
}

html[data-theme="dark"] .trainer-desktop-shell,
.dark .trainer-desktop-shell {
  --db: #0d141d;
  --dc: #121c28;
  --dt: #edf5ff;
  --dm: #9cabbc;
  --dbd: #263447;
}

/* ==========================================================
 * 1.7.8 — Desktop set navigator + sidebar routing polish
 * Desktop-only; mobile set UI remains unchanged.
 * ========================================================== */
@media (min-width: 900px) {
  .trainer-desktop-main .home-sets.card {
    padding: 12px 14px 11px;
    overflow: hidden;
  }

  .trainer-desktop-main .home-sets .sets-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    margin: 0 0 9px;
  }

  .trainer-desktop-main .home-sets .sets-title {
    flex: 0 0 auto;
    margin: 0;
    font-size: 15px;
  }

  .trainer-desktop-main .home-sets .flag {
    order: 3;
    flex: 0 0 auto;
    margin-left: 2px;
    font-size: 11px;
  }

  .trainer-desktop-main .sets-desktop-tools {
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-left: auto;
  }

  .trainer-desktop-main .sets-desktop-stats {
    margin-right: 7px;
    white-space: nowrap;
    color: var(--muted, #6d7788);
    font-size: 10.5px;
    font-weight: 600;
  }

  .trainer-desktop-main .sets-arrow {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line, #dfe6ef);
    border-radius: 9px;
    background: var(--card, #fff);
    color: var(--text, #182235);
    font: 700 22px/1 system-ui, sans-serif;
    cursor: pointer;
  }

  .trainer-desktop-main .sets-arrow:hover:not(:disabled) {
    border-color: #32b6f4;
    background: rgba(50,182,244,.07);
  }

  .trainer-desktop-main .sets-arrow:disabled {
    opacity: .28;
    cursor: default;
  }

  .trainer-desktop-main .home-sets .sets-viewport {
    width: 100%;
    max-height: none;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .trainer-desktop-main .home-sets .sets-viewport::-webkit-scrollbar {
    display: none;
  }

  .trainer-desktop-main .home-sets .sets-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: max-content;
    gap: 8px;
    padding: 0;
  }

  .trainer-desktop-main .home-sets .set-pill {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 82px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 12px;
  }

  .trainer-desktop-main .home-sets .sets-stats {
    display: none !important;
  }

  /* Sidebar is the desktop navigation; keep every item clearly interactive. */
  .trainer-desktop-shell .trainer-side nav button {
    cursor: pointer;
    pointer-events: auto;
  }
}

@media (max-width: 899px) {
  .sets-desktop-tools { display: none !important; }
}


/* 1.8.2 — real language asset in the desktop set header */
.trainer-lang-flag{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:30px;
  height:22px;
  line-height:1;
}
.trainer-lang-flag img{
  display:block;
  width:26px;
  height:18px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(15,23,42,.12);
}

/* 1.9.8 — trainer set arrows in dark theme */
@media (min-width:900px){
  html[data-theme="dark"] .trainer-desktop-main .sets-arrow,
  .dark .trainer-desktop-main .sets-arrow{
    background:#172638!important;border-color:#30465d!important;color:#edf6ff!important
  }
  html[data-theme="dark"] .trainer-desktop-main .sets-arrow:hover:not(:disabled),
  .dark .trainer-desktop-main .sets-arrow:hover:not(:disabled){
    background:#1b2e42!important;border-color:#32b6f4!important;color:#fff!important
  }
}


/* ==========================================================
 * MOYAMOVA 1.10.4 — unified desktop trainer utility strip
 * Articles and regular trainer now share the same visual grammar.
 * ========================================================== */
@media (min-width:900px){
  .trainer-desktop-main .trainer-quickbar{
    min-height:74px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1px 74px 74px;
    align-items:stretch;
    gap:0;
    margin-top:14px;
    padding:0;
    border:1px solid #294158;
    border-radius:14px;
    background:#0e1c2a;
    box-shadow:none;
    overflow:hidden;
  }

  .trainer-desktop-main .trainer-quickbar .trainer-qbtn{
    width:auto;
    height:74px;
    min-width:0;
    border:0;
    border-right:1px solid #294158;
    border-radius:0;
    background:transparent;
    color:#edf5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 16px;
    font-size:12px;
    font-weight:650;
    box-shadow:none;
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qbtn:hover{
    background:rgba(43,140,255,.06);
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qbtn.is-active{
    background:rgba(43,140,255,.08);
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qico{
    width:30px;
    height:30px;
    flex:0 0 30px;
    font-size:16px;
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qbtn--audio{
    width:74px;
    padding:0;
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qbtn--audio .trainer-qlabel{
    display:none;
  }
  .trainer-desktop-main .trainer-quickbar .trainer-qsep{
    width:1px;
    height:auto;
    align-self:stretch;
    background:#294158;
    justify-self:stretch;
  }

  html:not([data-theme="dark"]) .trainer-desktop-main .trainer-quickbar{
    background:#fff;
    border-color:#dce6f0;
    box-shadow:0 7px 24px rgba(31,51,73,.06);
  }
  html:not([data-theme="dark"]) .trainer-desktop-main .trainer-quickbar .trainer-qbtn{
    color:#182235;
    border-color:#e1e8f0;
  }
  html:not([data-theme="dark"]) .trainer-desktop-main .trainer-quickbar .trainer-qbtn:hover{
    background:#f7faff;
    color:#182235;
  }
  html:not([data-theme="dark"]) .trainer-desktop-main .trainer-quickbar .trainer-qbtn.is-active{
    background:#eef6ff;
    color:#182235;
  }
  html:not([data-theme="dark"]) .trainer-desktop-main .trainer-quickbar .trainer-qsep{
    background:#e1e8f0;
  }
}


/* ==========================================================
 * MOYAMOVA 1.10.5 — final desktop lower-panel unification
 * IMPORTANT: word answer geometry remains permanent 1x4.
 * ========================================================== */
@media (min-width:900px){
  .trainer-desktop-main .home-trainer--words .trainer-audio-btn,
  .trainer-desktop-main .home-trainer.is-articles .trainer-audio-btn{
    display:none!important;
  }

  .trainer-desktop-main .trainer-quickbar{
    width:100%!important;
    max-width:none!important;
    height:74px!important;
    min-height:74px!important;
    margin:14px 0 0!important;
    padding:0!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .trainer-desktop-main .trainer-quickbar .trainer-qbtn{
    height:72px!important;
    min-height:72px!important;
    border-radius:0!important;
    margin:0!important;
  }

  .trainer-desktop-main .trainer-quickbar .trainer-qsep{
    height:72px!important;
    margin:0!important;
  }

  .trainer-desktop-main .home-trainer--words .answers-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:repeat(4,var(--trainer-answer-h))!important;
  }
}