/*
 * cursive-trainer.css — общая механика тренажёра прописей: лист в линейку,
 * отрисовка связного письма по штрихам, анимация письма, сетка алфавита.
 *
 * До 08.09.2026 эти строки лежали инлайном в ДВУХ блейдах — /russian-cursive и
 * /portuguese-cursive, — которые отличались только алфавитом и словами:
 * разметка совпадала на 0.984. Механика у них действительно одна, и её место —
 * в одном файле; разными обязаны быть страницы, а не копии одного кода.
 */
/* ===== RUSSIAN CURSIVE (пропись) ===== */
@font-face{font-family:'CaveatCyr';src:url('/fonts/caveat-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap}

.rc-app{max-width:900px;margin:0 auto;color:var(--text-primary)}
.rc-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* tabs */
.rc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.rc-tab{appearance:none;font:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:.15s}
.rc-tab:hover{border-color:var(--accent);color:var(--accent)}
.rc-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rc-panel{display:none}
.rc-panel.is-active{display:block}

/* lined пропись paper — two solid rules + dotted midline + slanted guide */
.rc-paper{position:relative;border-radius:var(--radius-md);background:#fffdf7;border:1px solid var(--border);overflow:hidden}
[data-theme="light"] .rc-paper{background:#fffdf7}
.rc-paper-lines{position:absolute;inset:0;pointer-events:none;
    background-image:
        linear-gradient(#e0cfa6,#e0cfa6),
        repeating-linear-gradient(90deg,#ecdfbf 0 8px,transparent 8px 16px),
        linear-gradient(#f1e7cc,#f1e7cc);
    background-repeat:no-repeat;
    background-size:100% 2px,100% 1.5px,100% 1.5px;
    background-position:0 70%,0 50%,0 31%}
.rc-word-wrap{position:relative;padding:26px 22px;min-height:120px;display:flex;align-items:center;justify-content:center}

/* the cursive render */
.rc-word{font-family:'CaveatCyr','Caveat',cursive;color:#1f3a8a;line-height:1;white-space:nowrap;font-size:clamp(54px,14vw,120px);position:relative;direction:ltr}
.rc-word.is-slanted{transform:skewX(-9deg)}
.rc-print-ref{text-align:center;font-size:15px;color:var(--text-muted);margin:0 0 4px;letter-spacing:.06em}

/* v2: connected-cursive stroke render (skeletonized) + stroke-order animation */
.rc-stroke-host{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:14px 18px;box-sizing:border-box}
.rc-word-wrap.is-stroke .rc-word,.rc-word-wrap.is-stroke .rc-pen{display:none}
.rc-word-wrap.is-stroke .rc-stroke-host{display:flex}
.rc-stroke-host .rcs-svg{display:block;width:100%;height:100%;max-height:170px;overflow:visible}
.rcs-s{fill:none;stroke:#1f3a8a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
[data-theme="light"] .rcs-s{stroke:#1f3a8a}
.rcs-ln{stroke:#dccfa8;stroke-width:1}
.rcs-ln-mid{stroke-dasharray:3 8}
/* SVG-пропись в ячейках алфавита / практики / таблицы «печатная → пропись» */
.rc-cell-cursive .rc-cw{width:100%}
.rc-cell-cursive svg{display:block;width:100%;height:64px}
.rc-pword .rc-pc svg{display:block;width:100%;height:56px;max-width:220px;margin:0 auto}
.rc-tcursive svg{display:block;height:52px;width:auto;max-width:76px;margin:0 auto}

/* write-on animation: reveal left→right + travelling pen */
.rc-word.is-writing{animation:rcReveal var(--rc-dur,1.6s) steps(120) forwards}
@keyframes rcReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.rc-pen{position:absolute;top:-6px;font-size:30px;pointer-events:none;opacity:0}
.rc-pen.is-writing{animation:rcPen var(--rc-dur,1.6s) linear forwards}
@keyframes rcPen{0%{opacity:1;left:0}100%{opacity:0;left:100%}}
@media (prefers-reduced-motion: reduce){.rc-word.is-writing,.rc-pen.is-writing{animation:none}.rc-pen{display:none}}

/* controls */
.rc-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.rc-input{appearance:none;font:inherit;font-size:17px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);flex:1;min-width:200px;box-sizing:border-box}
.rc-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.rc-btn{appearance:none;font:inherit;font-size:14px;font-weight:600;padding:11px 18px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;line-height:1.3}
.rc-btn:hover{border-color:var(--accent);color:var(--accent)}
.rc-btn:disabled{opacity:.5;cursor:default}
.rc-btn svg{width:16px;height:16px;flex-shrink:0}
.rc-btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rc-btn-primary:hover{color:#fff;opacity:.92;border-color:var(--accent)}
.rc-toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary);cursor:pointer;user-select:none;font-weight:600}
.rc-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* example chips + random */
.rc-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.rc-chips-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-inline-end:2px}
.rc-chip{appearance:none;font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:.15s}
.rc-chip:hover{border-color:var(--accent);color:var(--accent)}

/* worksheet builder */
.rc-ws{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary)}
.rc-ws-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;width:100%}
.rc-ws-field{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);font-weight:600}
.rc-ws-field input[type=number]{width:56px;appearance:auto;font:inherit;font-size:15px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);text-align:center}
.rc-ws-field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.rc-ws .rc-btn{margin-inline-start:auto}

/* alphabet grid */
.rc-alpha{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rc-cell{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);padding:10px;text-align:center;position:relative}
.rc-cell-cursive{font-family:'CaveatCyr','Caveat',cursive;color:#1f3a8a;font-size:46px;line-height:1.1;min-height:58px;display:flex;align-items:center;justify-content:center;gap:6px;background:#fffdf7;border-radius:8px;overflow:hidden}
.rc-cell-cursive .rc-cw{position:relative}
.rc-cell-print{font-size:14px;color:var(--text-muted);margin-top:6px;font-weight:600;letter-spacing:.1em}
.rc-cell-acts{display:flex;gap:6px;justify-content:center;margin-top:6px}
.rc-mini{appearance:none;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);width:30px;height:30px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:.15s}
.rc-mini:hover{border-color:var(--accent);color:var(--accent)}
.rc-cw.is-writing{animation:rcReveal 1.2s steps(80) forwards}

/* learner / reading table */
.rc-tricky{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rc-trow{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);padding:12px}
.rc-tprint{font-size:30px;font-weight:700;min-width:34px;text-align:center;color:var(--text-primary)}
.rc-tcursive{font-family:'CaveatCyr','Caveat',cursive;font-size:42px;color:#1f3a8a;min-width:40px;text-align:center;background:#fffdf7;border-radius:6px;padding:0 6px}
.rc-tnote{font-size:13px;color:var(--text-secondary);line-height:1.4}
.rc-arrow{color:var(--text-muted);font-size:18px}

/* reading practice */
.rc-practice{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.rc-pword{border:1px solid var(--border);border-radius:var(--radius-md);background:#fffdf7;padding:10px 14px;cursor:pointer;text-align:center;transition:.15s}
.rc-pword:hover{border-color:var(--accent)}
.rc-pword .rc-pc{font-family:'CaveatCyr','Caveat',cursive;font-size:40px;color:#1f3a8a;line-height:1.1}
.rc-pword .rc-pp{font-size:14px;color:var(--text-muted);margin-top:2px;min-height:18px;font-weight:600;letter-spacing:.05em;opacity:0;transition:opacity .2s}
.rc-pword.is-revealed .rc-pp{opacity:1}

.rc-note{font-size:13px;color:var(--text-muted);line-height:1.6;margin:10px 0 0}
.rc-note code{background:var(--bg-tertiary);padding:1px 5px;border-radius:4px;font-size:12px}