/* Генератор прописей.
 *
 * Написан заново на токенах марки: перенесённые со страницы Тильды
 * стили жили собственной палитрой (синий #1a56db посреди
 * красно-нефритового сайта) и родовыми именами — `.container`, `.btn`,
 * `.footer`, правила для `body` и `*`. Здесь всё под `.propisi` и
 * `.propisi-*`, а вид органов управления даёт кит (`eddy-card`,
 * `eddy-input`, `eddy-btn`, `eddy-chip`).
 *
 * Клетка прописи НЕ берёт размеры у сетки страницы: лист печатают, и
 * клетка обязана оставаться квадратом с известной стороной, иначе
 * пропись превращается в набор прямоугольников разной высоты.
 */

.propisi__layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

/* Панель настроек липнет к верху: лист длинный, и прокрутив его до
   середины, человек иначе теряет из виду то, чем лист настраивается. */
.propisi__panel {
    position: sticky;
    top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.propisi__panel-title { margin: 0; }

.propisi__field { display: flex; flex-direction: column; gap: var(--sp-2); }

.propisi__chars {
    font-size: var(--fs-lg);
    line-height: 1.5;
    resize: vertical;
    min-height: 72px;
}

.propisi__chars.is-invalid { border-color: var(--red-500); }

.propisi__hint,
.propisi__error {
    margin: 0;
    font-size: var(--fs-2xs);
    line-height: 1.5;
}

.propisi__hint { color: var(--text-muted); }
.propisi__error { color: var(--red-600); }

.propisi__presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.propisi__presets .eddy-chip { cursor: pointer; }

.propisi__num {
    float: right;
    font-variant-numeric: tabular-nums;
    color: var(--red-600);
}

/* Ползунок: у браузеров он свой у каждого, и без правил в красно-нефритовом
   интерфейсе остаётся системным синим. */
.propisi__range {
    width: 100%;
    height: 4px;
    margin: var(--sp-2) 0;
    appearance: none;
    background: var(--border-default);
    border-radius: 999px;
    outline: none;
}

.propisi__range::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red-500);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.propisi__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--red-500);
    cursor: pointer;
}

.propisi__range:focus-visible { outline: 2px solid var(--red-400); outline-offset: 4px; }

.propisi__checks {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.propisi__checks .eddy-check { cursor: pointer; }

.propisi__actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- лист ---------------------------------------------------------- */

.propisi__preview { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.propisi__preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.propisi__preview-head h2 { margin: 0; }

.propisi__count { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Белый лист, а не общий фон: страница показывает то, что человек
   получит на печати, и серая подложка врала бы про результат. */
.propisi__paper {
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--r-card);
    padding: var(--sp-6);
    min-height: 320px;
    overflow-x: auto;
}

.propisi__empty { margin: 0; }

.propisi__status {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    min-height: 1.2em;
}

.propisi-block + .propisi-block {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px dashed var(--border-subtle);
}

.propisi-block__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.propisi-block__sample {
    font-family: "Noto Sans SC", "Ma Shan Zheng", serif;
    font-size: 40px;
    line-height: 1;
    color: var(--ink-900);
}

.propisi-block__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    min-width: 0;
}

.propisi-block__pinyin { font-size: var(--fs-site-small); color: var(--red-600); }
.propisi-block__translation { font-size: var(--fs-2xs); color: var(--text-body); }
.propisi-block__strokes { font-size: var(--fs-2xs); color: var(--text-muted); }

/* --- порядок черт --------------------------------------------------- */

.propisi-strokes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.propisi-strokes__step {
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--border-default);
    border-radius: var(--r-xs);
    background: #fff;
}

.propisi-glyph { display: block; width: 100%; height: 100%; }

/* Уже написанное — чёрным, добавленное на этом шаге — красным: так
   устроены прописи в учебниках, и видно не только что написано, но и
   что именно появилось. */
.propisi-glyph__done { fill: var(--ink-900); }
.propisi-glyph__new { fill: var(--red-500); }

/* --- сетка для письма ----------------------------------------------- */

.propisi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 56px);
    gap: 0;
}

.propisi-cell {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--border-strong);
    margin: -1px 0 0 -1px;   /* смежные клетки делят одну линию */
    display: grid;
    place-items: center;
    background: #fff;
}

/* 米字格 — клетка китайских прописей: средние линии и обе диагонали.
   Средние идут фоном, диагонали — двумя псевдоэлементами: одним фоном
   их не выложить, потому что диагональ в `linear-gradient` считается по
   углу коробки и при неквадратной клетке промахивается мимо углов. */
.propisi-cell--guides {
    background-image:
        linear-gradient(var(--border-subtle), var(--border-subtle)),
        linear-gradient(var(--border-subtle), var(--border-subtle));
    background-size: 1px 100%, 100% 1px;
    background-position: center, center;
    background-repeat: no-repeat;
}

.propisi-cell--guides::before,
.propisi-cell--guides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--border-subtle) calc(50% - .5px), var(--border-subtle) calc(50% + .5px), transparent calc(50% + .5px));
}

.propisi-cell--guides::after {
    background: linear-gradient(to bottom left, transparent calc(50% - .5px), var(--border-subtle) calc(50% - .5px), var(--border-subtle) calc(50% + .5px), transparent calc(50% + .5px));
}

.propisi-cell__glyph {
    position: relative;
    z-index: 1;
    font-family: "Noto Sans SC", serif;
    font-size: 38px;
    line-height: 1;
    color: var(--ink-500);
    opacity: .38;
}

@media (max-width: 900px) {
    .propisi__layout { grid-template-columns: minmax(0, 1fr); }
    .propisi__panel { position: static; }
}

@media (max-width: 560px) {
    .propisi__paper { padding: var(--sp-4); }
    .propisi-grid { grid-template-columns: repeat(auto-fill, 46px); }
    .propisi-cell { width: 46px; height: 46px; }
    .propisi-cell__glyph { font-size: 30px; }
}

/* Печать прямо из браузера — запасной путь к тому же результату, если
   PDF не собрался. Панель настроек, шапка и подвал сайта на бумаге не
   нужны. */
@media print {
    .propisi__panel,
    .propisi__preview-head,
    .propisi__status,
    .eddy-header,
    .eddy-footer,
    .site-pagehead { display: none !important; }

    .propisi__layout { display: block; }
    .propisi__paper { border: 0; padding: 0; }
    .propisi-block { break-inside: avoid; }
}