/* Ronnie Mini App — «Письмо» (writing practice). Loaded after app.css; uses its tokens, buttons, cards and steps. */

/* ---------- home of the tab ---------- */
.writing__scroll { padding-bottom: var(--s6); }
.whero { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); }
.whero__ronnie { --ronnie-size: 104px; margin: -6px 0 -6px -10px; }
.whero__bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  animation: bubble-pop 0.45s var(--spring) both;
  transform-origin: 0 60%;
}

.wresume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  margin-bottom: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-xl);
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #E46C5F 0%, var(--accent) 55%, #C94C40 100%);
  box-shadow: 0 3px 0 var(--accent-deep), 0 12px 24px rgba(216, 87, 74, 0.28);
  transition: transform 0.14s var(--ease);
}
.wresume:active { transform: translateY(2px) scale(0.985); }
.wresume__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wresume__label { font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
.wresume__title { font-size: 20px; font-weight: 800; line-height: 1.2; }

.wmodes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); animation: rise 0.3s var(--ease); }
.wmode {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 84px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  transition: transform 0.12s var(--ease), opacity 0.15s ease;
}
.wmode:active { transform: scale(0.985); }
.wmode.is-off { opacity: 0.6; }
.wmode__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--amber-tint); font-size: 26px; line-height: 1; }
.wmode:nth-child(2) .wmode__icon { background: var(--accent-tint); }
.wmode:nth-child(3) .wmode__icon { background: var(--green-tint); }
.wmode:nth-child(4) .wmode__icon { background: var(--grey-tint); }
.wmode__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wmode__title { font-size: 18px; font-weight: 800; line-height: 1.2; }
.wmode__text { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); }
/* the minutes sit next to the title — the description below gets the whole width */
.wmode__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.wmode__min { flex: none; padding: 3px 9px; border-radius: 11px; background: var(--bg); font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

.wstats { margin-top: var(--s3); display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.wstats b { color: var(--ink); }
.wweak { margin-top: var(--s3); }
.wweak .card__title { font-size: 16px; margin-bottom: var(--s2); }
.wtags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.wtag { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border-radius: 15px; background: var(--amber-tint); color: var(--amber-ink); font-size: 14px; font-weight: 700; line-height: 1.3; }
.wtag--word { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
.wtag--word b { font-weight: 800; margin-right: 0.3em; } /* the tag is a flex box: the space before «—» is dropped */
.writing__talk { margin-top: var(--s4); }

/* ---------- a session: header, the task, the footer with the answer ---------- */
.wtop { padding-left: var(--s1); }
.wtop__back { flex: none; display: grid; place-items: center; width: 44px; height: 48px; border-radius: 22px; color: var(--ink-2); }
.wtop__back:active { transform: scale(0.92); }
.wtop .words__ronnie { --ronnie-size: 72px; margin: -4px 0 -8px -6px; }

.writing__task { padding-top: var(--s3); padding-bottom: var(--s4); }
.wtask {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  animation: card-in 0.36s var(--ease) both;
}
.wtask__label { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.wtask__pic { width: min(56%, 26vh, 220px); margin: 0 auto; }
.wtask__pic .pic__letter { font-size: 56px; }
.wtask__ru { font-size: 24px; font-weight: 800; line-height: 1.25; text-align: center; }
.wtask--build .wtask__ru, .wtask--translate .wtask__ru { text-align: left; }
.wtask__ru--sm { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-align: left; }
.wtask__ru--big { font-size: 24px; }
.wtask__hint { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.wtask--dictation { align-items: center; text-align: center; }
.wtask--dictation .wtask__label { align-self: stretch; text-align: left; }

/* «_ _ _ _»: one cell per letter, filled as the student types */
.wtask__letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wtask__letters i { width: 18px; height: 6px; border-radius: 3px; background: var(--grey-tint); transition: background-color 0.15s ease; }
.wtask__letters i.is-on { background: var(--accent); }

/* word chips: «Собери предложение», «Какое слово пропущено?» */
.wchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px; /* «I», «a»: still a full touch target */
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  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;
  user-select: none;
  transition: transform 0.1s var(--ease), opacity 0.15s ease, background-color 0.15s ease;
}
.wchip:active { transform: translateY(2px) scale(0.97); }
.wchip.is-used { opacity: 0.25; box-shadow: inset 0 0 0 1.5px var(--line); }
.wchip.is-picked { background: var(--accent-tint); color: var(--accent-ink); box-shadow: 0 2px 0 #F1C9C1; animation: pop-in 0.2s var(--spring); }
.wchip--opt { min-width: 72px; }
.wchip--opt.is-sel { background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-deep); }
.wtask.is-closed .wchip { pointer-events: none; }

.wbuild__line { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--s2); min-height: 62px; padding: var(--s2); border-radius: var(--r-md); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
/* a sentence of four words and more takes two rows: the room is there from the start, so the words below do not
   jump away from under the finger when the second row begins */
.wbuild__line--two { min-height: 116px; }
.wbuild__line.is-empty { align-items: center; align-content: center; justify-content: center; }
.wbuild__ph { font-size: var(--fs-sm); color: var(--ink-3); }
.wbuild__bank { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

.wgap__sentence { font-size: 24px; font-weight: 700; line-height: 1.5; }
.wgap__slot { display: inline-block; min-width: 64px; padding: 0 10px; border-bottom: 3px solid var(--accent); color: var(--accent-ink); text-align: center; white-space: pre; }
.wgap__slot.is-filled { border-bottom-color: transparent; border-radius: 10px; background: var(--accent-tint); }
.wgap__options { display: flex; flex-wrap: wrap; gap: var(--s2); }

.wlisten { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--accent-tint); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 800; transition: transform 0.12s var(--ease); }
.wlisten:active { transform: scale(0.95); }
.wlisten--big { flex-direction: column; justify-content: center; gap: 6px; width: 132px; height: 132px; padding: 0; border-radius: 50%; font-size: var(--fs-sm); box-shadow: 0 3px 0 #F1C9C1; }
.wlisten.is-playing .ic-wave--1 { animation: wave 0.9s ease-in-out infinite; }
.wlisten.is-playing .ic-wave--2 { animation: wave 0.9s ease-in-out 0.2s infinite; }

.wfree { display: flex; align-items: flex-start; gap: var(--s2); }
.wfree__bubble { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--bg); }
.wfree__tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.wfree--reply { margin-top: var(--s3); }
.wfree--reply .wfree__bubble { background: var(--surface); box-shadow: var(--shadow-1); }

/* ---------- Ronnie's feedback ---------- */
.wfb {
  margin-top: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  animation: rise 0.3s var(--ease);
}
.wfb__head { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.25; }
.wfb__mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 800; }
.wfb--correct { background: var(--green-tint); box-shadow: none; }
.wfb--correct .wfb__head { color: var(--green-ink); }
.wfb--correct .wfb__mark { background: var(--green); }
.wfb--almost { background: var(--amber-tint); box-shadow: none; }
.wfb--almost .wfb__head { color: var(--amber-ink); }
.wfb--almost .wfb__mark { background: var(--amber); }
.wfb--wrong .wfb__head { color: var(--accent-ink); }
.wfb--wrong .wfb__mark { background: var(--accent); }
.wfb--wrong .wfb__correct, .wfb--wrong .wnote { background: var(--bg); } /* this panel is white itself */
.wfb--retry { background: var(--amber-tint); box-shadow: none; }
.wfb--retry .wfb__head { color: var(--amber-ink); }
.wfb--retry .wfb__mark { background: var(--amber); }
.wfb__yours { margin-top: var(--s3); font-size: var(--fs-md); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.wfb__yours span { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); }
.wfb__correct { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.wfb__text { flex: 1; min-width: 0; }
.wfb__en { font-size: 20px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.wfb__en--long { font-size: var(--fs-md); font-weight: 700; line-height: 1.5; } /* a few sentences: reads as text, not as a headline */
.wfb__ru { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); }
.wfb__hint { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); font-size: var(--fs-sm); line-height: 1.45; color: #5E4310; }
.wfb__hint .ic { margin-top: 1px; color: var(--amber-ink); }
.wfb--retry .wfb__hint:first-child { margin-top: 0; }
.wfb--correct .wfb__hint, .wfb--correct .wfb__hint .ic { color: var(--green-ink); }
.wfb--wrong .wfb__hint { color: var(--ink-2); }

.wnote { margin-top: var(--s3); padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); }
.wnote__cat { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); }
.wnote__fix { margin-top: 2px; font-size: var(--fs-md); line-height: 1.4; overflow-wrap: anywhere; }
.wnote__was { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(216, 87, 74, 0.6); }
.wnote__fix b { color: var(--green-ink); }
.wnote__why { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); }

/* ---------- footer: the answer and the buttons ---------- */
.wfoot { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s1) var(--s4) var(--s3); }
.wfoot::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: linear-gradient(to top, var(--bg), rgba(245, 239, 222, 0)); pointer-events: none; }
.winput {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink);
  font: 700 22px/1.3 var(--font);
  letter-spacing: 0.01em;
  user-select: text;
  -webkit-user-select: text;
  -webkit-appearance: none;
  appearance: none;
}
.winput--area { min-height: 72px; max-height: 132px; font: 500 var(--fs-md)/1.45 var(--font); resize: none; }
.winput::placeholder { color: var(--ink-3); font-weight: 500; }
.winput:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.winput[disabled] { opacity: 0.7; }
.wfoot__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.wfoot__row .btn { padding: 0 var(--s3); }

/* ---------- summary ---------- */
.wsum__streak { margin-top: var(--s4); padding: 8px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-sm); font-weight: 800; color: var(--accent-ink); }
.wsum__streak--note { border-radius: var(--r-md); font-weight: 700; line-height: 1.4; white-space: pre-line; }
.wsum__block { width: 100%; margin-top: var(--s5); text-align: left; }
.wsum__block h2 { margin-bottom: var(--s2); font-size: 16px; font-weight: 800; }
.wsum .done__ronnie { --ronnie-size: clamp(180px, 56vw, 240px); }

/* the keyboard is up, or the window is short: the task keeps only what is needed to answer */
.kb-open .wtask__pic { width: 88px; }
.kb-open .wtop .words__ronnie { --ronnie-size: 56px; }
.kb-open .wlisten--big { width: 84px; height: 84px; }
.kb-open .wtask { gap: var(--s2); padding: var(--s3) var(--s4); }
.kb-open .wtask__ru { font-size: 20px; }
/* a small phone with the keyboard up: what must be read to answer stays on the screen without scrolling */
.kb-tight .wtask__pic, .kb-tight .wtask__hint, .kb-tight .wtask__label { display: none; }
.kb-tight .wlisten--big { flex-direction: row; gap: var(--s2); width: auto; height: 48px; padding: 0 20px; border-radius: 24px; }
.kb-tight .wlisten--big .ic { width: 24px; height: 24px; }
.kb-tight .writing__task { padding-top: var(--s2); padding-bottom: var(--s3); }
/* narrow phones (360 px): the task label stays on one line */
@media (max-width: 374px) {
  .wtask__label { font-size: 13px; letter-spacing: 0.03em; }
}
@media (max-height: 700px) {
  .wsum .done__ronnie { --ronnie-size: clamp(132px, 27vh, 200px); }
  .wsum__streak { margin-top: var(--s3); }
  .wsum__block { margin-top: var(--s4); }
  .wsum__block + .done__actions { margin-top: var(--s5); } /* the tags are small: the buttons keep their distance */
  .wtask__pic { width: min(40%, 22vh, 150px); }
  .wlisten--big { width: 104px; height: 104px; }
  .wtask { gap: var(--s2); }
  .whero__ronnie { --ronnie-size: 88px; }
  .wmode { min-height: 72px; }
  /* the second try: the task and the hint are on the screen together — the label has been read, the hint is compact */
  .writing__task.is-retry { padding-bottom: var(--s2); }
  .is-retry .wtask { padding-bottom: var(--s3); }
  .is-retry .wtask__label { display: none; }
  .wfb--retry { margin-top: var(--s2); padding: 10px var(--s4); }
  .wfb--retry .wfb__head { font-size: 16px; }
  .wfb--retry .wfb__mark { width: 24px; height: 24px; font-size: 14px; }
  .wfb--retry .wfb__hint { margin-top: 6px; }
}