/* The practice palette is owned by practice.css; handwriting uses those tokens. */
.ink-response { min-width: 0; }
.ink-response[hidden] { display: none; }
.ink-original-host { position: relative; min-width: 0; }
.ink-original-host > .question-image { padding-top: 64px; }
.ink-original-host > .question-image img { width: 100%; }
.ink-original-host > .question-image[hidden], .ink-original-actions[hidden], .ink-original-status[hidden] { display: none; }
.ink-original-actions { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap: 8px; font-family: Inter, "Segoe UI", sans-serif; }
.ink-original-start, .ink-original-part { min-height: 44px; padding: 10px 18px; border: 1px solid var(--teal); border-radius: 10px; font-size: 14px; font-weight: 650; }
.ink-original-start { color: white; background: var(--teal); cursor: pointer; }
.ink-original-start:hover:not(:disabled) { background: var(--teal-dark); }
.ink-original-start:disabled { opacity: .6; cursor: progress; }
.ink-original-part { max-width: 180px; color: var(--ink); background: var(--surface); }
.ink-original-start:focus-visible, .ink-original-part:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.ink-original-status { margin: 8px 0; padding: 8px 12px; color: var(--muted); font-size: 13px; font-family: Inter, "Segoe UI", sans-serif; }
.ink-original-host.is-answering > .ink-original-actions { position: static; padding: 8px 12px; justify-content: flex-end; background: var(--surface-warm); }
.ink-original-host.is-answering:has(> .ink-original-actions[hidden]):has(> .ink-original-status[hidden]) { display: none; }
.ink-response--original { margin-top: 20px; }
.ink-response--original .question-prompt.is-original-writing { margin: 0; max-height: none; overflow: visible; padding: 0; border: 0; }
.ink-response--original .question-prompt.is-original-writing > p,
.ink-response--original .question-prompt.is-original-writing > .question-formula { margin: 14px 16px; }
.ink-response--original .question-image-list { margin: 0; gap: 14px; }
.ink-editor { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); overflow: clip; overflow-anchor: none; }
.ink-editor button, .ink-ai-controls button, .ink-secondary { min-width: 44px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.ink-editor button:hover:not(:disabled), .ink-ai-controls button:hover:not(:disabled), .ink-secondary:hover:not(:disabled) { background: var(--teal-soft); border-color: var(--teal); }
.ink-editor button:focus-visible, .ink-ai-controls button:focus-visible, .ink-secondary:focus-visible, .ink-keyboard summary:focus-visible, .ink-reading summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ink-editor button:disabled, .ink-ai-controls button:disabled, .ink-secondary:disabled { opacity: .45; cursor: not-allowed; }
.ink-editor button[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); box-shadow: inset 0 -2px var(--teal); }
.ink-editor__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ink-editor__top strong { display: block; font-size: 16px; }
.ink-editor__top small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ink-editor__tools { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--surface-warm); border-bottom: 1px solid var(--line); }
.ink-editor__tools button svg { display: block; width: 20px; height: 20px; }
.ink-editor__width { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: var(--muted); font-size: 12px; }
.ink-editor__width-range { width: 116px; height: 44px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.ink-editor__width-value { min-width: 28px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ink-editor__width-sample { display: inline-block; min-width: 24px; border-radius: 12px; background: currentColor; color: var(--ink); }
.ink-editor__image-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0; }
.ink-editor__image-tools[hidden] { display: none; }
.ink-editor__image-select { flex: 1 1 160px; min-width: 0; max-width: 360px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.ink-editor__width-range:focus-visible, .ink-editor__image-select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ink-editor__zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--muted); }
.ink-editor__zoom output { min-width: 45px; text-align: center; font-variant-numeric: tabular-nums; }
.ink-editor__sheet-image-status { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-warm); color: var(--muted); font-size: 12px; line-height: 1.5; }
.ink-editor__sheet-image-status[hidden] { display: none; }
.ink-editor__color { font-size: 21px !important; padding: 7px !important; }
.ink-editor { scroll-margin-top: 12px; }
@media (max-width: 980px) { .ink-editor { scroll-margin-top: 72px; } }
.ink-editor__paper { position: relative; width: 100%; aspect-ratio: 14 / 9; min-width: 0; background: #fff; color-scheme: light; overflow: hidden; overflow-anchor: none; }
.ink-editor__viewport { max-height: min(70dvh, 720px); touch-action: none; overscroll-behavior: contain; }
.ink-editor__sheets { display: flex; flex-direction: column; gap: 0; background: #fff; overflow-anchor: none; }
.ink-editor__sheet { min-width: 0; background: #fff; overflow-anchor: none; }
.ink-editor button.ink-editor__sheet-heading { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; padding: 10px 16px; color: var(--muted); background: var(--surface-warm); box-shadow: none; font-size: 12px; }
.ink-editor .is-current > button.ink-editor__sheet-heading { color: var(--teal-dark); background: var(--teal-soft); box-shadow: inset 3px 0 var(--teal); }
.ink-editor__preview { position: absolute; top: 0; left: 0; pointer-events: none; background: #fff; transform-origin: 0 0; }
.ink-editor__preview[hidden] { display: none; }
.ink-editor__preview > svg { display: block; width: 100%; height: 100%; }
.ink-editor__canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; color-scheme: light; filter: none; mix-blend-mode: normal; }
.ink-editor__canvas[hidden] { display: none !important; }
.ink-editor__canvas--active, .ink-editor__canvas--tip { pointer-events: none; }
.ink-editor__feedback[hidden] { display: none; }
.ink-editor__feedback-hint { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.ink-editor__feedback-hint:empty { display: none; }
.ink-editor__hint { position: absolute; inset: 32% 10% auto; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.8; pointer-events: none; }
.ink-editor__foot, .ink-editor__feedback { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.ink-editor__pages { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ink-editor__status { flex: 1 1 150px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }
.ink-editor__feedback { background: var(--surface-warm); }
.ink-editor__feedback > button:first-child { color: white; background: var(--teal); border-color: var(--teal); }
.ink-editor__feedback > button:first-child:hover:not(:disabled) { color: white; background: var(--teal-dark); }
.ink-editor__auto, .ink-editor__touch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ink-editor input[type="checkbox"], .ink-ai-controls input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); }
.ink-ai-controls .ink-editor__auto { flex: 0 0 auto; width: auto; white-space: nowrap; color: var(--ink); font-weight: 650; }
.ink-ai-controls input[role="switch"] { appearance: none; -webkit-appearance: none; flex: 0 0 40px; width: 40px; height: 24px; margin: 0; border: 1px solid var(--line-strong); border-radius: 20px; background: radial-gradient(circle at 11px center, #fff 7px, transparent 8px), #899b97; cursor: pointer; }
.ink-ai-controls input[role="switch"]:checked { background: radial-gradient(circle at 27px center, #fff 7px, transparent 8px), var(--teal); border-color: var(--teal); }
.ink-ai-controls input[role="switch"]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.ink-ai-controls input[role="switch"]:disabled { opacity: .45; cursor: not-allowed; }
.ink-editor__recovery { padding: 12px; background: var(--amber-soft); color: var(--ink); font-size: 13px; line-height: 1.65; }
.ink-editor__recovery:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ink-editor__recovery[hidden] { display: none; }
.ink-save-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 16px; }
.ink-save-actions .ink-secondary { border: none; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 8px; }
.ink-save-actions__status { color: var(--muted); font-size: 12px; }
.ink-step-review { padding: 18px; border-left: 3px solid var(--teal); background: var(--surface-warm); border-radius: 0 10px 10px 0; margin: 12px 0 18px; overflow-anchor: none; }
.ink-step-review__heading { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.ink-step-review__heading strong { font-size: 15px; }
.ink-step-review__scope { font-size: 12px; color: var(--muted); }
.ink-step-review__status { min-height: 21px; margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.ink-step-review[data-state="check_step"] { border-left-color: var(--amber); }
.ink-step-review__paragraph { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.ink-step-review__paragraph p { margin: 9px 0 0; }
.ink-step-review__note { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 12px; }
.ink-reading { margin-top: 12px; font-size: 13px; color: var(--muted); }
.ink-reading summary, .ink-keyboard summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.ink-reading summary::before, .ink-keyboard summary::before { content: '+'; font-size: 18px; }
.ink-reading[open] summary::before, .ink-keyboard[open] summary::before { content: '−'; }
.ink-step-review__actions:has(button:not([hidden])) { margin-top: 12px; }
.ink-keyboard { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.ink-keyboard__label { display: block; color: var(--ink); }
.ink-keyboard textarea { display: block; width: 100%; margin-top: 8px; min-height: 100px; max-height: 280px; }
.question-card--ink > .response-area { min-width: 0; }
.question-card--ink .response-area__title { margin-bottom: 12px; }
:root { --practice-tutor-width: clamp(300px, 26vw, 380px); --practice-content-gap: 20px; }
/* The tutor is the right edge of the workspace, not a card inside its gutters. */
.practice-main:has(> .session-view:not([hidden])) { width: auto; max-width: none; margin: 0; padding-inline: var(--practice-content-gap) calc(var(--practice-tutor-width) + var(--practice-content-gap)); }
.practice-workspace, .practice-workspace.has-handwriting { grid-template-columns: minmax(0, 1fr); align-items: start; }
.practice-workspace .tutor-panel { position: fixed; inset: 0 0 auto auto; z-index: 40; display: flex; flex-direction: column; width: var(--practice-tutor-width); height: 100vh; height: 100dvh; min-height: 0; max-height: none; margin: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: hidden; overflow-anchor: none; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0; }
.practice-workspace .tutor-panel[hidden] { display: none; }
.tutor-panel__heading { padding-top: calc(17px + env(safe-area-inset-top, 0px)); }
.tutor-panel__heading, .tutor-composer, .tutor-note, .ink-ai-toolbar { flex: 0 0 auto; }
.tutor-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: #b8c6bf transparent; }
.tutor-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.practice-workspace .tutor-messages { min-height: 0; max-height: none; overflow: visible; }
.practice-workspace.has-handwriting .tutor-panel__heading { background: var(--teal-dark); }
.practice-workspace.has-handwriting .tutor-xiaoi { padding-top: 12px; }
.tutor-xiaoi button { min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--teal); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tutor-xiaoi button:hover:not(:disabled) { color: var(--teal-dark); }
.tutor-xiaoi button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.tutor-xiaoi button:disabled { opacity: .45; cursor: wait; }
.ink-ai-feedback[hidden] { display: none; }
.ink-ai-toolbar { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ink-ai-toolbar[hidden], .ink-ai-tool-group[hidden] { display: none; }
.ink-ai-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; }
.ink-ai-tabs button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.ink-ai-tabs button[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); }
.ink-ai-tabs button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ink-ai-part { padding: 14px; border-bottom: 1px solid var(--line); }
.ink-ai-part__title { margin: 0 0 12px; font-size: 14px; }
.ink-ai-toolbar .ink-editor__feedback { border: 0; padding: 0; background: transparent; }
.ink-ai-controls { justify-content: flex-start; gap: 8px 12px; }
.ink-ai-controls > button:first-child { flex: 0 0 auto; width: auto; white-space: nowrap; }
.ink-ai-part .ink-step-review { margin: 16px 0 0; padding: 12px; }
.tutor-panel .answer-formula { display: block; max-width: 100%; margin: 8px 0; padding-block: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tutor-panel .answer-formula .katex-display { margin: 0; }
.tutor-panel .answer-formula::-webkit-scrollbar { display: none; }
.tutor-panel .inline-formula { display: inline; max-width: none; overflow: visible; vertical-align: baseline; }
.tutor-panel .inline-formula .katex { white-space: normal; }
.tutor-panel pre { max-width: 100%; overflow-x: auto; white-space: pre; }
body.has-writing-workspace { overflow: hidden; }
/* The shared mobile navigation explicitly sets visibility with !important. */
body.has-writing-workspace .site-nav-toggle { visibility: hidden !important; pointer-events: none !important; }
.practice-workspace.is-writing { position: fixed; inset: 0 var(--practice-tutor-width) 0 0; height: 100vh; height: 100dvh; z-index: 90; margin: 0; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--canvas); grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 12px; overflow: auto; overflow-anchor: none; }
.practice-workspace.is-writing .question-panel { min-width: 0; min-height: 0; padding: 16px; overflow: visible; border-radius: 12px; }
.practice-workspace.is-writing .question-card--ink { display: block; }
.practice-workspace.is-writing .question-card__top { grid-column: 1 / -1; margin: 0; padding-bottom: 0; border: 0; }
.practice-workspace.is-writing .question-tag-list { display: none; }
.practice-workspace.is-writing .question-prompt { margin: 16px 0; font-size: 15px; max-height: 210px; overflow: auto; }
.practice-workspace.is-writing .ink-response--original .question-prompt { margin: 0; max-height: none; overflow: visible; }
.practice-workspace.is-writing .response-area { grid-column: 2; grid-row: 2; margin: 0; padding: 0; border: 0; }
.practice-workspace.is-writing .response-area > .response-area__title { display: none; }
.practice-workspace.is-writing .answer-panel, .practice-workspace.is-writing .practice-remediation { grid-column: 1 / -1; }
.practice-workspace.is-writing .tutor-panel { position: fixed; inset: 0 0 auto auto; height: 100vh; height: 100dvh; }
.practice-workspace.is-writing .question-navigation { margin-top: 14px; }
@media (max-width: 1190px) {
  :root { --practice-tutor-width: 300px; --practice-content-gap: 14px; }
}
@media (min-width: 981px) {
  .practice-page .site-chrome-head { padding-right: 44px; }
  body.practice-page.site-chrome-workspace-active.site-chrome-workspace-collapsed { padding-left: 64px; }
}
@media (max-width: 760px) {
  .practice-main:has(> .session-view:not([hidden])) { padding-inline: 0; }
  .session-heading, .session-view > .progress-panel { margin-inline: 12px; }
  .practice-workspace.has-handwriting, .practice-workspace.is-writing { grid-template-columns: minmax(0, 1fr); }
  .practice-workspace.is-writing { inset: 0; padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); }
  .practice-workspace .tutor-panel, .practice-workspace.is-writing .tutor-panel { position: relative; inset: auto; width: 100%; height: 100vh; height: 100dvh; border-left: 0; }
  .practice-workspace.is-writing .question-card--ink { display: block; }
  .practice-workspace.is-writing .question-prompt { position: static; max-height: 220px; overflow: auto; margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
  .practice-workspace.is-writing .ink-response--original .question-prompt { margin: 0; max-height: none; overflow: visible; padding: 0; border: 0; }
  .practice-workspace.is-writing .question-panel { padding: 12px; overflow: visible; }
  .ink-editor__top { padding: 10px; }
  .ink-editor__top small { max-width: 210px; }
  .ink-editor__tools { gap: 4px; padding: 8px; }
  .ink-editor__paper { aspect-ratio: 14 / 12; }
  .ink-editor__status { text-align: left; }
  .ink-step-review { padding: 14px; }
}
@media (hover: none) and (pointer: coarse) {
  .tutor-composer textarea { font-size: 16px; }
}
@media (forced-colors: active) {
  .ink-editor button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .ink-editor__paper { background: white; forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) { .ink-editor *, .ink-step-review * { scroll-behavior: auto; transition: none; animation: none; } }