/* Ronnie Mini App — «Грамматика» (lessons of grammar and spoken English). Loaded after writing.css: the tab reuses
   its hero (.whero), the «продолжить» card (.wresume), the task card (.wtask, .wchip, .wgap__*), Ronnie's check
   (.wfb) and the footer (.wfoot). */

/* ---------- home of the tab ---------- */
.grammar__scroll { padding-bottom: var(--s6); }

/* «Ронни советует»: his bubble holds the advice and the button that opens the topic */
.ladvice__label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); }
.ladvice__text { margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.ladvice__text b { font-weight: 800; }
.ladvice__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 42px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: 0 2px 0 var(--accent-deep);
  transition: transform 0.12s var(--ease);
}
.ladvice__btn:active { transform: translateY(2px) scale(0.98); }
.ladvice__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Грамматика | Разговорный */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: var(--s3); padding: 4px; border-radius: 26px; background: var(--bg-deep); }
.seg__btn { min-height: 44px; padding: 0 var(--s2); border-radius: 22px; font-size: 16px; font-weight: 800; color: var(--ink-2); transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s var(--ease); }
.seg__btn:active { transform: scale(0.97); }
.seg__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.ltopics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; animation: rise 0.3s var(--ease); }
.ltopics__text { padding: 0 var(--s1) 2px; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }
.ltopic {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 76px;
  padding: var(--s3);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  transition: transform 0.12s var(--ease);
}
.ltopic:active { transform: scale(0.985); }
/* the number of the topic; amber once it was practised, a green tick when it is done */
.ltopic__mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grey-tint); color: var(--grey-ink); font-size: 16px; font-weight: 800; }
.ltopic.is-started .ltopic__mark { background: var(--amber-tint); color: var(--amber-ink); }
.ltopic.is-done .ltopic__mark { background: var(--green); color: #fff; }
.ltopic__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ltopic__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.ltopic__title { min-width: 0; font-size: var(--fs-md); font-weight: 800; line-height: 1.25; }
.ltopic__level { flex: none; margin-top: 1px; padding: 2px 8px; border-radius: 10px; background: var(--bg); font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--ink-2); }
.ltopic__sub { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); }
.ltopic__sub b { font-weight: 600; color: var(--ink); }
.ltopic__progress { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--amber-ink); }
.ltopic.is-done .ltopic__progress { color: var(--green-ink); }
.ltopic__go { flex: none; color: var(--ink-3); }

/* ---------- the card of a topic ---------- */
.lcard__head { display: flex; align-items: center; gap: var(--s1); padding-left: var(--s1); padding-top: calc(var(--safe-top) + 8px); }
.lcard__titles { flex: 1; min-width: 0; }
.lcard__eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); }
.lcard__title { font-size: 22px; line-height: 1.2; }
.lcard__sk { margin-top: 6px; }
.lcard__scroll { padding-bottom: var(--s5); }

/* the rule: a few short paragraphs with air between them — never a wall of text */
.lrule { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: 2px var(--s1) 0; font-size: var(--fs-md); line-height: 1.55; }
.lrule b { font-weight: 700; }
.lrule b.is-short, .lwarn__text b.is-short { white-space: nowrap; }

/* the forms at a glance: + / − / ? */
.lpat { margin-top: var(--s4); padding: var(--s1) var(--s4); }
.lpat__row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.lpat__row + .lpat__row { border-top: 1px solid var(--line); }
.lpat__label { flex: none; display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; font-size: 20px; font-weight: 800; line-height: 1; white-space: nowrap; }
/* a label that is a word («где», «когда», «куда») and not a sign: smaller letters, the box grows with it */
.lpat__label.is-word { min-width: 62px; padding: 0 9px; font-size: 13.5px; letter-spacing: 0.01em; }
.lpat__label--plus { background: var(--green-tint); color: var(--green-ink); }
.lpat__label--minus { background: var(--accent-tint); color: var(--accent-ink); }
.lpat__label--ask { background: var(--amber-tint); color: var(--amber-ink); }
.lpat__body { flex: 1; min-width: 0; }
.lpat__en { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
.lpat__ru { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); }

.lcard__h { margin: var(--s5) var(--s1) var(--s2); font-size: 18px; font-weight: 800; }
.lexs { margin: 0; padding: var(--s1) var(--s4); list-style: none; }
.lex { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.lex + .lex { border-top: 1px solid var(--line); }
.lex__body { flex: 1; min-width: 0; }
.lex__en { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; }
.lex--hero .lex__en { font-size: 19px; font-weight: 800; } /* a spoken unit: the natural phrase is the hero */
.lex__ru { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); }
.lex__formal { margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); } /* «по учебнику: I am fine, thank you» */
.lex__formal span { font-weight: 700; }
.lex__note { margin-top: 4px; font-size: 13.5px; line-height: 1.35; color: var(--amber-ink); }
.lex__note b { font-weight: 700; }
.speaker--sm { width: 44px; height: 44px; }
.speaker--sm .ic { width: 22px; height: 22px; }
.lcard__tip { margin: var(--s2) var(--s1) 0; font-size: 13px; line-height: 1.3; color: var(--ink-3); }

.lwarn { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--amber-tint); color: #5E4310; }
.lwarn__title { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber-ink); }
.lwarn__text { margin-top: 4px; font-size: 16px; line-height: 1.5; }
.lwarn__text b { font-weight: 700; color: #3D2A06; }

.lcard__foot { gap: 0; padding-bottom: var(--s1); }
.lcard__backbtn { min-height: 44px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.lcard__backbtn:active { opacity: 0.7; }

/* ---------- the practice ---------- */
/* «Впиши нужное слово»: what to change, under the sentence */
.ltask__hint { display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--amber-tint); color: #5E4310; font-size: var(--fs-sm); line-height: 1.4; }
.ltask__hint .ic { flex: none; margin-top: 2px; color: var(--amber-ink); }
.ltask__hint b { font-weight: 700; }

/* «Выбери ответ»: the question in Russian, the English line it is about, the options as full-width buttons */
.ltask__question { font-size: 20px; font-weight: 800; line-height: 1.3; }
.ltask__prompt { padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--bg); font-size: 19px; font-weight: 700; line-height: 1.5; }
.lopts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.lopt {
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 0 #E2D9C2, inset 0 0 0 1.5px var(--line);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  transition: transform 0.1s var(--ease), background-color 0.15s ease, opacity 0.15s ease;
}
.lopt:active { transform: translateY(2px) scale(0.99); }
.lopt.is-sel { background: var(--accent-tint); color: var(--accent-ink); box-shadow: 0 2px 0 #F1C9C1, inset 0 0 0 2px var(--accent); }
/* after the check: the right line is green, the others step back */
.wtask.is-closed .lopt { pointer-events: none; }
.wtask.is-closed .lopt:not(.is-sel):not(.is-right) { opacity: 0.5; }
.lopt.is-right { background: var(--green-tint); color: var(--green-ink); box-shadow: inset 0 0 0 2px var(--green); }

/* ---------- the summary ---------- */
.lsum__badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-bottom: var(--s2); padding: 0 12px; border-radius: 15px; background: var(--green-tint); color: var(--green-ink); font-size: 14px; font-weight: 800; animation: pop-in 0.45s var(--spring) both; }
.stat b small { font-size: 0.6em; font-weight: 800; }

/* the keyboard is up («Впиши нужное слово»): the sentence and its hint stay on the screen */
.kb-open .ltask__hint { padding: 6px 10px; }
.kb-tight .ltask--fill .wtask__ru--sm { display: none; }
@media (max-height: 700px) {
  .lcard__h { margin-top: var(--s4); }
  .ltask__question { font-size: 18px; }
  .lopt { min-height: 48px; }
}