/* Writing practice dialog: watch → trace → write alone, with a stroke-count check.
 * Loads after sinao.css wherever kana-writing.css is used. */
.writing-modal{width:min(900px,calc(100vw - 32px))}
.writing-heading #writing-symbol{width:60px;height:60px;border-radius:18px;font-size:34px;flex:none}
.writing-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.writing-meta #writing-reading{margin:0;font-size:13px}
.writing-meta #writing-reading:empty{display:none}
.writing-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--color-paper-2);font-size:12px;color:var(--color-muted);white-space:nowrap}

.writing-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.writing-layout h3{margin:0}
.stroke-order h3{margin-bottom:12px}
.stroke-demo{background:var(--color-paper)}

.writing-practice-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.writing-mode{display:inline-flex;padding:4px;gap:4px;border-radius:var(--radius-pill);background:var(--color-paper-2)}
.writing-mode label{position:relative;display:inline-flex;cursor:pointer}
.writing-mode input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.writing-mode span{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;color:var(--color-muted);white-space:nowrap;transition:background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.writing-mode input:checked+span{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-card)}
.writing-mode input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:2px}

/* The practice square: a visible paper frame with an inner margin, no crosshair. */
.writing-layout .writing-stage{width:min(100%,max(240px,calc(100dvh - 560px)),380px);border-radius:18px;background:var(--color-paper);border:1.5px solid var(--color-canvas-rule);transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}
.writing-stage::before{content:"";display:block;position:absolute;inset:9%;border:1px dashed var(--color-rule);border-radius:12px;pointer-events:none}
.writing-stage[data-state=success]{border-color:var(--color-success);background:var(--color-success-soft)}
.writing-stage[data-state=retry]{border-color:var(--color-chart-secondary)}
.writing-stage-badge{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-success);color:var(--color-surface);opacity:0;transform:scale(.6);transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);pointer-events:none}
.writing-stage-badge svg{width:18px;height:18px;stroke-width:2.4}
.writing-stage[data-state=success] .writing-stage-badge{opacity:1;transform:none}

.writing-tally{display:flex;justify-content:space-between;gap:12px;margin:12px auto 0;width:min(100%,380px);font-size:12px;color:var(--color-muted)}
.writing-tally strong{color:var(--color-ink);font-size:14px;font-variant-numeric:tabular-nums;margin-left:4px}
.writing-tally #writing-expected{color:var(--color-ink);font-weight:500;font-variant-numeric:tabular-nums}
.writing-practice>#writing-try-hint{width:min(100%,380px);margin:8px auto 0}
.writing-practice .writing-tools{width:min(100%,380px);margin:12px auto 0}
.writing-practice .writing-tools .btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:var(--radius-control)}
.writing-practice .writing-tools .btn svg{width:16px;height:16px}
.writing-practice .writing-tools .writing-check{margin-left:auto}

.writing-feedback{display:grid;gap:4px;width:min(100%,380px);margin:12px auto 0;padding:12px 14px;border-radius:14px;background:color-mix(in oklch,oklch(96% .035 60),oklch(30% .04 60) var(--dark-mix));color:var(--color-ink);font-size:13px;line-height:1.5}
.writing-feedback[data-result=match]{background:var(--color-success-soft)}
.writing-feedback[data-result=match] p{color:var(--color-success);font-weight:500}
.writing-feedback small{font-size:11px;color:var(--color-muted)}
.writing-feedback .dashboard-text-link{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0;background:none;border:0;color:var(--color-accent);font-size:13px;font-weight:500;cursor:pointer}
.writing-feedback .dashboard-text-link svg{width:16px;height:16px}

.writing-free .writing-practice-head .writing-mode,.writing-free .writing-tally{display:none}

@media(max-width:700px){
 .writing-modal{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
 .writing-heading #writing-symbol{width:50px;height:50px;font-size:28px;border-radius:14px}
 .writing-layout{display:block}
 .writing-layout h3{display:block;font-size:13px}
 .stroke-order h3{display:none}
 .writing-layout .writing-stage{width:min(100%,max(220px,calc(100dvh - 430px)),380px)}
}
@media(max-width:359px){.writing-mode span{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.writing-stage,.writing-stage-badge,.writing-mode span{transition:none}}