/* =====================================================================
   cards.css — lesson cards: recall · word_intro · info · stress · build · summary
   (+ shared card vocabulary: .prompt-ru .sentence .hintline .pron .slip .caption .mnote)
   Tokens only; both themes. Paper (.p-body.flash) comes from base.css.
   ===================================================================== */

@media (max-width: 1023px) { .desk-only { display: none !important; } }

/* ---------- shared card vocabulary ---------- */
.prompt-ru { font-family: var(--font-head); font-style: italic; font-size: var(--t-xl); line-height: 1.3; overflow-wrap: anywhere; }
.sentence-ru { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.hintline { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--warn); line-height: 1.45; overflow-wrap: anywhere; }
.hintline .ic { margin-top: 1px; }
.avoid { font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--muted); }
.avoid s { text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; opacity: 1; }
.p-body mark.ans { color: var(--accent); font-weight: 600; border-bottom: 0;
  background-image: linear-gradient(transparent 82%, color-mix(in srgb, var(--accent) 35%, transparent) 82%, color-mix(in srgb, var(--accent) 35%, transparent) 90%, transparent 90%); }

/* margin-like block: label + small italic text, hairline on the left */
.mnote { border-left: 2px solid var(--line2); padding: 2px 0 2px var(--s-4); display: flex; flex-direction: column; gap: 4px; }
.mnote p { font-family: var(--font-head); font-style: italic; color: var(--muted); font-size: var(--t-md); line-height: 1.5; overflow-wrap: anywhere; }
.mnote.avoid-note { border-left-color: var(--bad); }
.mnote s { text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; opacity: 1; }

/* pronunciation: syllables (stressed one in accent) + IPA */
.pron { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-family: var(--font-head); color: var(--muted); }
.pron .syl { font-size: var(--t-lg); letter-spacing: .02em; }
.pron .syl b { color: var(--accent); font-weight: 700; }
.pron .ipa { font-style: italic; font-size: var(--t-md); overflow-wrap: anywhere; }

/* letterpress slip (tiles, syllables, new words) */
.slip { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; background: var(--slip); border: 1px solid var(--slip-edge); border-radius: var(--r);
  font-family: var(--font-head); font-size: 1.0625rem; line-height: 1.2; color: var(--text); text-align: left; text-shadow: 0 var(--emboss-y) 0 var(--emboss); letter-spacing: .005em; overflow-wrap: anywhere;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 1px 0 var(--slip-edge), 0 3px 0 -1px var(--slip-edge), 0 6px 10px -4px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s, opacity .2s; }
button.slip:active:not(:disabled) { transform: translateY(1px); }
button.slip:disabled { cursor: default; }
.slip .n { display: none; position: absolute; top: -9px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line2); color: var(--muted);
  font: 600 .6875rem/16px var(--font); text-align: center; text-shadow: none; }
.slip.ghost { background: transparent; border: 1.5px dashed var(--line2); box-shadow: none; color: transparent; text-shadow: none; transform: none; pointer-events: none; user-select: none; }
.slip.placed { border-bottom: 2px solid var(--accent); animation: land .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes land { from { transform: translateY(-14px) rotate(-2deg); opacity: .4; } }
.slip.dim { opacity: .5; transform: none; }
.slip.right { border-color: var(--ok); border-bottom-width: 2px; color: var(--ok); }
.slip.wrong { border-color: var(--bad); border-bottom-width: 2px; color: var(--bad); }
.slip .pen { bottom: -9px; }
@media (hover: hover) {
  button.slip:hover:not(:disabled) { transform: rotate(0) translateY(-2px); box-shadow: 0 1px 0 var(--slip-edge), 0 3px 0 -1px var(--slip-edge), 0 9px 14px -5px var(--shadow); }
}
@media (min-width: 1024px) {
  .slip { min-height: 54px; font-size: 1.125rem; padding: 8px 18px; }
  .slip .n { display: block; }
  .slip.ghost .n { display: none; }
}

.caption { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-style: italic; font-size: var(--t-sm); color: var(--muted); }
.caption .ic { width: 16px; height: 16px; }

/* foot hint button: icon only on phone, labelled on desktop */
.p-foot .row-flex .btn.hint-btn { flex: none; width: var(--tap); padding: 0; min-width: 0; }
@media (min-width: 1024px) {
  .p-foot .row-flex .btn.hint-btn { width: auto; padding: 0 var(--s-4); min-width: 120px; }
}

/* ---------- recall: ruled-paper sentence with an inline blank ---------- */
.sentence { font-family: var(--font-head); font-size: 1.375rem; line-height: 56px; overflow-wrap: anywhere;
  background-image: linear-gradient(to bottom, transparent 53px, var(--rule) 53px, var(--rule) 54px); background-size: 100% 56px; background-position: 0 0; }
.blank { position: relative; display: inline-block; max-width: 100%; margin: 0 .12em; text-align: center; vertical-align: baseline; }
.blank input { width: 100%; min-height: 0; background: transparent; border: 0; outline: 0; text-align: center; font-family: var(--font-head); font-style: italic; font-size: inherit; line-height: 1.3; padding: 0;
  color: var(--accent); border-bottom: 1.5px solid var(--text); border-radius: 0; caret-color: var(--accent); }
.blank:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.blank.bad input { color: var(--bad); border-bottom-color: transparent; }
.blank.ok input { color: var(--ok); border-bottom-color: transparent; }
.blank.ok, .blank.bad { outline: 0; }
.blank .fix { position: absolute; left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); font-style: italic; font-size: 1.125rem; line-height: 1; color: var(--ok); white-space: nowrap; animation: fix-in .5s .55s both; }
@keyframes fix-in { from { opacity: 0; transform: translateX(-50%) translateY(6px) rotate(-3deg); } }
@media (min-width: 1024px) {
  .sentence { font-size: 2rem; line-height: 64px; background-image: linear-gradient(to bottom, transparent 61px, var(--rule) 61px, var(--rule) 62px); background-size: 100% 64px; }
  .blank .fix { top: -16px; font-size: 1.25rem; }
  .prompt-ru { font-size: 1.75rem; }
}

/* ---------- word_intro · stress · info ---------- */
.word-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.bigword { font-family: var(--font-head); font-weight: 500; font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0; }
.word-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.word-meta .pos { font-family: var(--font-head); font-style: italic; color: var(--muted); font-size: var(--t-lg); }
.gloss { font-family: var(--font-head); font-style: italic; font-size: var(--t-xl); line-height: 1.3; color: var(--accent); overflow-wrap: anywhere; }
.example { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ex-en { font-family: var(--font-head); font-size: var(--t-xl); line-height: 1.4; overflow-wrap: anywhere; }
@media (min-width: 1024px) { .bigword { font-size: 3.25rem; } }

.syl-row { display: flex; flex-wrap: wrap; gap: 14px 10px; padding-top: var(--s-2); }
.syl-row .slip { min-height: 64px; min-width: 64px; justify-content: center; padding: 8px 20px; font-size: var(--t-xl); }

.title { font-size: var(--t-2xl); overflow-wrap: anywhere; }
.p-body .md { font-size: var(--t-md); line-height: 1.6; }
.examples { display: flex; flex-direction: column; gap: var(--s-4); }
.ex { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--line2); padding: 2px 0 2px var(--s-4); }
.ex p { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-head); font-size: var(--t-lg); line-height: 1.4; overflow-wrap: anywhere; }
.ex p .ic { width: 16px; height: 16px; align-self: center; stroke-width: 2; }
.ex-bad { color: var(--bad); }
.ex-bad span { text-decoration: line-through; text-decoration-thickness: 1px; }
.ex-good { color: var(--ok); }
.p-body .btn.listen { align-self: flex-start; }
@media (min-width: 1024px) { .title { font-size: 2.5rem; } }

/* ---------- build ---------- */
.ru-line { font-family: var(--font-head); font-size: 1.375rem; line-height: 1.3; overflow-wrap: anywhere; }
.answer { position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 10px 8px; min-height: 72px; padding: 0 0 12px; border-bottom: 1.5px solid var(--text); }
.answer .ph { align-self: center; font-family: var(--font-head); font-style: italic; color: var(--muted); font-size: var(--t-md); }
.answer.done { border-bottom-color: transparent; }
.answer .pen { bottom: -6px; left: -1%; width: 102%; }
.tray { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-3) var(--s-4); box-shadow: inset 0 2px 6px -2px var(--shadow); }
.tray .label { margin-bottom: var(--s-3); }
.bank { display: flex; flex-wrap: wrap; gap: 12px 8px; }
@media (min-width: 1024px) {
  .ru-line { font-size: 1.875rem; }
  .answer { min-height: 96px; }
  .tray { padding: var(--s-3) var(--s-4) var(--s-4); }
  .bank { gap: 16px 12px; }
}

/* typed answer: ruled paper line */
.paper-wrap { position: relative; }
.paper { display: block; width: 100%; resize: none; border: 0; outline: 0; border-radius: 0; background-color: transparent; color: var(--text); caret-color: var(--accent);
  font-family: var(--font-head); font-size: 1.375rem; line-height: 48px; padding: 0; border-bottom: 1.5px solid var(--text);
  background-image: linear-gradient(to bottom, transparent 47px, var(--rule) 47px, var(--rule) 48px); background-size: 100% 48px; background-attachment: local; }
.paper::placeholder { color: var(--muted); font-style: italic; opacity: .85; }
.paper:focus { border-bottom-color: var(--accent); }
.paper-wrap.ok .paper { color: var(--ok); border-bottom-color: transparent; }
.paper-wrap.bad .paper { color: var(--bad); border-bottom-color: transparent; }
.paper-wrap .pen { bottom: -6px; }

/* ---------- summary: no paper ---------- */
#player[data-card="summary"] .p-body.flash { background: none; border: 0; box-shadow: none; padding: 0; gap: var(--s-5); }
#player[data-card="summary"] .p-body.flash::after { display: none; }
.sum-head h1 { margin-top: var(--s-2); }
.sum-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.stat-table { list-style: none; padding: 0; }
.stat-table li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stat-table .nm { font-size: var(--t-sm); color: var(--muted); }
.stat-table .ld { flex: 1; border-bottom: 1px dotted var(--line2); transform: translateY(-4px); min-width: 8px; }
.stat-table b { font-family: var(--font-head); font-weight: 500; font-size: var(--t-xl); font-variant-numeric: lining-nums tabular-nums; line-height: 1.1; white-space: nowrap; }
.level { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.level-big { font-family: var(--font-head); font-size: 4.5rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--accent); }
.level .lede { margin-top: 0; }
.quote { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-7); border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.quote::before { content: "\201C"; position: absolute; left: 0; top: 14px; font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--accent); opacity: .55; }
.quote .label { color: var(--accent); }
.quote blockquote { font-family: var(--font-head); font-style: italic; font-size: var(--t-2xl); line-height: 1.2; margin: var(--s-3) 0 0; position: relative; overflow-wrap: anywhere; }
.words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: var(--s-4); }
.words .slip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; font-size: var(--t-lg); padding: 8px 14px; }
.words .slip small { font-family: var(--font); font-size: var(--t-xs); color: var(--muted); text-shadow: none; line-height: 1.3; }
.sum-notes { display: flex; flex-direction: column; gap: var(--s-5); }
.ticks { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--s-3) 0; }
.ticks i { width: 9px; height: 22px; border-radius: 2px; background: var(--tick-off); }
.ticks i.on { background: var(--accent); }
@media (min-width: 1024px) {
  .sum-top { gap: var(--s-6); }
  .words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote blockquote { font-size: 2.25rem; }
}
/* wide desktop: notes live in the margin column the feedback note uses elsewhere */
@media (min-width: 1280px) {
  .sum-notes { position: absolute; top: var(--s-2); left: calc(100% + 44px); width: 304px; padding-left: var(--s-4); border-left: 1px solid var(--line2); }
}
@media (max-width: 380px) {
  .quote { padding-left: var(--s-6); }
  .quote blockquote { font-size: 1.75rem; }
  .level-big { font-size: 3.5rem; }
  .sum-top { gap: var(--s-4); }
}