.handwriting-switch { display: flex; width: fit-content; gap: 4px; padding: 4px; margin: 8px 0 12px; border: 1px solid var(--line, #d9dbe7); border-radius: 999px; }
.handwriting-switch button { min-width: 76px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.handwriting-switch button[aria-pressed="true"] { background: #5b50e8; color: #fff; }
.handwriting-switch button:focus-visible { outline: 3px solid #8d83ff; outline-offset: 3px; }
.handwriting-switch button:disabled { cursor: default; }
.handwriting-answer[hidden], .written-textarea[hidden] { display: none !important; }
.handwriting-status, .handwriting-pilot { margin: 10px 0; font-size: .8rem; line-height: 1.5; color: var(--text-secondary, #5f6472); }
/* Keep the original visible after marking, without the editing instructions and tools. */
.written-answer-wrap:has(> .examiner-report) .handwriting-answer :is(.handwriting-pilot, .awp__toolbar, .awp__instruction, .handwriting-photo-actions, .handwriting-photo-tip) { display: none; }
.handwriting-review { margin: 12px 0; font-size: .88rem; }
.handwriting-review summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.handwriting-review img { display: block; width: 100%; height: auto; margin: 12px 0; border: 1px solid #c9ccd6; border-radius: 8px; background: #fff; }
.handwriting-original { position: relative; margin: 12px 0; border: 1px solid #c9ccd6; border-radius: 8px; background: #fff; }
.handwriting-original img { margin: 0; border: 0; }
.handwriting-recovery-dialog { box-sizing: border-box; width: min(850px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--line, #d9dbe7); border-radius: 20px; padding: 24px; background: var(--card-bg, #fff); color: var(--text-primary, #111827); }
.handwriting-recovery-dialog::backdrop { background: rgba(11, 14, 26, .65); }
.handwriting-recovery-dialog > details { border-top: 1px solid var(--line, #d9dbe7); padding: 16px 0; }
.handwriting-recovery-dialog > details > summary { font-weight: 700; cursor: pointer; line-height: 1.6; }
[data-dark] .handwriting-recovery-dialog { background: #18181b; color: #f3f4f8; }
[data-dark] .handwriting-status, [data-dark] .handwriting-pilot { color: #b6bbcf; }
@media (max-width: 600px) { .handwriting-recovery-dialog { padding: 16px; } }
/* Read, check, then mark: the reading is the student's to correct. */
.handwriting-confirm { margin: 16px 0 4px; padding: 18px 20px; border: 1px solid var(--study-line, rgba(91, 80, 232, .18)); border-radius: 14px; background: var(--study-surface, #f7f7fc); }
.handwriting-confirm-title { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; color: var(--text-primary, #111827); }
.handwriting-confirm-title:focus { outline: none; }
.handwriting-confirm-title:focus-visible { outline: 2px solid var(--study-accent, #5b50e8); outline-offset: 3px; }
.handwriting-confirm > p { margin: 0 0 12px; font-size: .88rem; line-height: 1.55; color: var(--text-secondary, #5f6472); }
.handwriting-confirm-flag { margin-bottom: 4px !important; font-weight: 700; color: #92400e !important; }
.handwriting-confirm-unsure { margin: 0 0 12px; padding-left: 20px; font-size: .88rem; line-height: 1.55; color: #92400e; }
.handwriting-confirm-label { display: block; margin: 4px 0 8px; font-size: .82rem; font-weight: 700; color: var(--text-primary, #111827); }
.handwriting-confirm-text { box-sizing: border-box; width: 100%; min-height: 96px; padding: 14px 16px; border: 1.5px solid var(--study-line, rgba(91, 80, 232, .18)); border-radius: 12px; background: var(--study-inset, #fff); color: var(--text-primary, #111827); font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.7; resize: vertical; }
.handwriting-confirm-text:focus-visible { outline: none; border-color: var(--study-accent, #5b50e8); box-shadow: 0 0 0 3px rgba(91, 80, 232, .14); }
.handwriting-confirm-text[readonly] { color: var(--text-secondary, #5f6472); }
.handwriting-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.handwriting-confirm-actions .btn-grade { margin: 0; min-height: 46px; }
.handwriting-confirm-actions .study-session__change { min-height: 44px; margin: 0; }
[data-dark] .handwriting-confirm-flag, [data-dark] .handwriting-confirm-unsure { color: #f0c779 !important; }
@media (max-width: 600px) {
    .handwriting-confirm { padding: 16px; }
    .handwriting-confirm-actions .btn-grade { width: 100%; }
}

.handwriting-retry { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line, #d9dbe7); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.handwriting-retry[hidden] { display: none; }
.handwriting-retry:focus-visible { outline: 3px solid #8d83ff; outline-offset: 3px; }
.handwriting-retry:disabled { cursor: wait; opacity: .65; }

.handwriting-notice { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding: 20px; border: 1px solid var(--next-line); border-radius: 16px; background: var(--next-bg); color: var(--next-ink); }
.handwriting-notice > svg { flex: 0 0 24px; margin-top: 2px; color: #b5a8ff; }
.handwriting-notice > div { flex: 1; min-width: 0; }
.handwriting-notice h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 750; }
.handwriting-notice p { margin: 0; color: var(--next-muted); font-size: 13px; line-height: 1.65; }
.handwriting-notice button { flex-shrink: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--next-line); border-radius: 10px; background: transparent; color: var(--next-ink); font-size: 13px; font-weight: 700; }
.handwriting-notice button:hover { background: var(--next-wash); }
@media (max-width: 600px) {
    .handwriting-notice { flex-wrap: wrap; gap: 10px 12px; padding: 18px; }
    .handwriting-notice > div { flex-basis: calc(100% - 36px); }
    .handwriting-notice button { margin-left: 36px; }
}

/* Photo of paper */
.handwriting-photo[hidden], .handwriting-photo-preview[hidden], .handwriting-answer > div[hidden] { display: none !important; }
.handwriting-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.handwriting-photo-actions button { min-height: 44px; }
.handwriting-photo-actions button[hidden] { display: none !important; }
.handwriting-photo-tip { margin: 0 0 12px; font-size: .8rem; line-height: 1.5; color: var(--text-secondary, #5f6472); }
.handwriting-photo-preview { margin: 0 0 12px; border: 1px solid #c9ccd6; border-radius: 12px; overflow: hidden; background: #fff; }
.handwriting-photo-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #f4f4f6; }
.handwriting-photo-check { margin: 4px 0 14px; }
.handwriting-photo-check img { max-height: 320px; }
[data-dark] .handwriting-photo-tip { color: #b6bbcf; }
[data-dark] .handwriting-photo-preview { border-color: #3a3a44; }
[data-dark] .handwriting-photo-preview img { background: #111114; }
/* The enlarged photo is shown at full width so small writing can be checked. */
.handwriting-photo-check.is-expanded img { max-height: none; }
.handwriting-confirm > .handwriting-photo-enlarge { display: block; margin: -6px 0 14px; }