/* The teacher's documents inside the LMS: convert a PDF, My documents, one
   document (read, correct, print) and its questions. The pages and their
   scripts came from the apascreative studio (2026-10-13); the service is
   still apas-agents (`/api/flow/...`). What the engine draws sits on white
   "paper", as a lesson does. */
:root { --display: var(--font); --body: var(--font); }
[hidden] { display: none !important; }
.eyebrow { color: var(--accent-deep); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; margin: 0 0 4px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

.paper{background:#fff;color:#111827;font:17px/1.5 var(--body)}
.paper h1{font:700 1.75em/1.12 var(--display);margin:0 0 .5em}
.paper h2{font:700 1.3em/1.15 var(--display);margin:1em 0 .4em;color:#111827}
.paper h3{font-size:1.05em;margin:.9em 0 .3em;color:#5b21b6;text-transform:uppercase;letter-spacing:.06em;font-size:.82em}
.paper>:first-child,.paper .body>:first-child{margin-top:0}
.paper .body>:last-child{margin-bottom:0}
.paper p{margin:.45em 0}
.paper ul,.paper ol{margin:.4em 0;padding-left:1.3em}
.paper .apc-math{margin:.6em 0;overflow-x:auto;overflow-y:hidden}
.paper .apc-script-block,.paper .asc-graph{margin:.5em 0}
.paper canvas{display:block;margin:0 auto;max-width:100%;height:auto}
.paper .asc-picture-tools{display:none}
.paper .apc-callout{border-left:4px solid #7c3aed;background:#f4f1fe;padding:.55em .9em;margin:.7em 0;border-radius:0 10px 10px 0}
.paper .apc-callout-label{font-weight:700;color:#5b21b6;font-size:.72em;text-transform:uppercase;letter-spacing:.08em}
.paper .apc-callout p:last-child{margin-bottom:0}
.paper .apc-table{border-collapse:collapse;margin:.6em 0}.paper .apc-table th,.paper .apc-table td{border:1px solid #d1d5db;padding:.3em .6em}
.paper .apc-question{border:1px solid #e5e7eb;border-radius:12px;padding:.9em 1.1em;margin:.9em 0;background:#fafafa}
.paper .apc-question-title{font-weight:700;color:#5b21b6}
.paper .apc-question-options{display:grid;gap:.3em;margin:.5em 0}
.paper .apc-question-answer-input{border:1px solid #d1d5db;border-radius:6px;padding:.35em .5em;background:#fff;color:#111827}
.paper .apc-question-check{margin:.4em 0 0;padding:.35em .9em;border:0;border-radius:999px;background:#111827;color:#fff;cursor:pointer}
.paper{border:1px solid var(--border)}
.dq-q{border:1px solid var(--border)}

/* convert.html */
.cv-wrap{width:min(1280px,calc(100% - 24px));margin:1.5rem auto 5rem}
.cv-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(1rem,3vw,1.5rem);margin-bottom:1rem}
.cv-drop{border:1px dashed var(--border2);border-radius:10px;background:var(--surface2);padding:1.1rem;margin:.4rem 0 1rem}
.cv-drop input{width:100%}
.cv-hint{font-size:.82rem;color:var(--t3)}
.cv-status{margin-top:1rem;padding:.8rem 1rem;border-radius:9px;background:var(--surface2);color:var(--t2)}
.cv-status[data-kind=ok]{color:#15803d;border:1px solid #22c55e44}
.cv-status[data-kind=error]{color:#b91c1c;border:1px solid #f8717144}
.cv-steps{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.3rem;font-size:.9rem}
.cv-steps li{display:flex;gap:.6rem;align-items:center;color:var(--t3)}
.cv-steps li[data-state=done]{color:#15803d}.cv-steps li[data-state=now]{color:var(--t1)}
.cv-steps b{display:inline-block;min-width:3.6em;font-weight:600;font-variant-numeric:tabular-nums}
.cv-runs{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.9rem}
.cv-runs a{color:var(--accent)}
.cv-summary{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between}
.cv-unit{margin-top:1.6rem;border-top:1px solid var(--border);padding-top:1.1rem}
.cv-unit h2{font-size:1.05rem;margin:0 0 .7rem}
.cv-unit h2 small{font-weight:400;color:var(--t3);margin-left:.5rem}
.cv-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.cv-pair>div{min-width:0}
.cv-unit,.cv-card{min-width:0;overflow-wrap:anywhere}
.cv-pair h3{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin:0 0 .4rem}
.cv-pages img{width:100%;display:block;background:#fff;border-radius:8px;margin-bottom:8px}
.cv-paper{border-radius:8px;padding:22px 24px;overflow-x:auto;min-height:120px}
.cv-paper img{max-width:100%;height:auto}
.cv-find{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin-top:.8rem;font-size:.84rem}
.cv-find th,.cv-find td{border:1px solid var(--border);padding:.35rem .55rem;text-align:left;vertical-align:top}
.cv-find tr[data-grave=serious] td{background:#fee2e2}
.cv-clean{color:#15803d;font-size:.88rem;margin:.7rem 0 0}
@media(max-width:860px){.cv-pair{grid-template-columns:1fr}}

/* documents.html */
.dl-wrap{width:min(900px,calc(100% - 24px));margin:1.5rem auto 5rem}
.dl-top{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end;justify-content:space-between;margin-bottom:1rem}
.dl-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.dl-list li{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}
.dl-list a.name{color:var(--t1);font-weight:700;text-decoration:none;font-size:1.05rem;overflow-wrap:anywhere}
.dl-list a.name:hover{color:var(--accent)}
.dl-meta{color:var(--t3);font-size:.85rem}
.dl-empty,.dl-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.6rem;text-align:center;color:var(--t3)}
.dl-note{color:#b91c1c;margin:.6rem 0}

/* document.html */
.dc-wrap{width:min(900px,calc(100% - 24px));margin:1rem auto 6rem}
.dc-bar{position:sticky;top:0;z-index:5;background:#f8fafcf2;backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:.6rem 0;margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.dc-bar input.title{flex:1 1 220px;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;padding:.4rem .5rem;font:700 1.15rem/1.2 var(--display,inherit);color:var(--t1)}
.dc-bar input.title:hover,.dc-bar input.title:focus{border-color:var(--border2);background:var(--surface2);outline:none}
.dc-note{font-size:.85rem;color:var(--t3);flex-basis:100%}
.dc-note[data-kind=error]{color:#b91c1c}.dc-note[data-kind=ok]{color:#15803d}
.dc-paper{border-radius:12px;padding:34px 38px;min-height:200px;overflow-x:auto}
.dc-paper img,.blk img{max-width:100%;height:auto;display:block;margin:10px auto}
.blk{position:relative;border:1px solid transparent;border-radius:8px;padding:2px 8px;margin:0 -8px}
.blk:hover,.blk.open{border-color:#c4b5fd;background:#faf5ff}
.blk .tools{position:absolute;right:6px;top:-14px;display:none;gap:4px;background:#fff;border:1px solid #c4b5fd;border-radius:999px;padding:2px 6px;box-shadow:0 4px 14px #0002;z-index:2}
.blk:hover .tools,.blk:focus-within .tools{display:flex}
.blk.open .tools{display:none}
.tools button{border:0;background:transparent;cursor:pointer;font:600 12px/1.6 system-ui,sans-serif;color:#5b21b6;padding:2px 6px;border-radius:999px}
.tools button:hover{background:#ede9fe}
.blk .view{min-height:1.2em}
.blk .wait{color:var(--t3);font:13px system-ui,sans-serif}
.ed{font:14px/1.5 system-ui,sans-serif;color:#111827;border-top:1px dashed #c4b5fd;margin-top:8px;padding:10px 0 6px;display:grid;gap:8px}
.ed label{font-weight:600;font-size:12px;color:#4b5563;display:grid;gap:3px}
.ed textarea,.ed input[type=text],.ed select{font:15px/1.5 system-ui,sans-serif;color:#111827;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:6px 8px;width:100%}
.ed textarea{min-height:90px;resize:vertical}
.ed .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ed button{font:600 13px system-ui,sans-serif;border:1px solid #cbd5e1;background:#fff;color:#111827;border-radius:6px;padding:6px 10px;cursor:pointer}
.ed button.go{background:#7c3aed;border-color:#7c3aed;color:#fff}
.ed button:disabled{opacity:.5;cursor:default}
.ed .hint{font-size:12px;color:#6b7280}
.ed .fault{color:#b91c1c;font-size:13px}
.ed .grid{overflow-x:auto}.ed .grid table{border-collapse:collapse}.ed .grid td{padding:2px}.ed .grid input{min-width:90px}
.ed .offer{border:1px solid #c4b5fd;border-radius:8px;padding:8px 10px;background:#fff}
.blk .katex.pick{cursor:pointer;border-radius:4px;outline:1px dashed transparent;outline-offset:2px}
.blk:not(.open) .katex.pick:hover{outline-color:#7c3aed;background:#ede9fe}
.ed .preview{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:6px 10px;min-height:2em;overflow-x:auto;font:17px/1.5 var(--body,system-ui)}
.ed .change{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.ed .change .was,.ed .change .now{border-radius:6px;padding:2px 8px;min-width:2em;font:16px/1.5 var(--body,system-ui);max-width:100%;overflow-x:auto}
.ed .change .was{background:#fee2e2;border:1px solid #fca5a5}
.ed .change .now{background:#dcfce7;border:1px solid #86efac}
.ed .change p{margin:0}.ed .change .to{color:#6b7280}
.ed .same{color:#166534;font-size:14px}
.ed a{color:#5b21b6}
.dc-figswitch{display:flex;flex-wrap:wrap;gap:.3rem .7rem;justify-content:center;align-items:center;margin:-2px auto 14px;font:500 .78rem/1.3 system-ui,sans-serif;color:#64748b}
.dc-figswitch button{font:inherit;color:#5b21b6;background:#faf5ff;border:1px solid #c4b5fd;border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.dc-figswitch button:hover{background:#ede9fe}.dc-figswitch button:disabled{opacity:.5;cursor:default}
.dc-figask{flex-basis:100%;display:flex;gap:.4rem;align-items:flex-end;max-width:560px;margin:.2rem auto 0}.dc-figask[hidden]{display:none}
.dc-figask textarea{flex:1;min-width:0;font:inherit;font-size:.85rem;color:#0f172a;background:#fff;border:1px solid #c4b5fd;border-radius:8px;padding:.35rem .5rem;resize:vertical}
@media print{.dc-figswitch{display:none}}
.dc-add{display:block;margin:14px auto 0;color:#5b21b6;border-color:#c4b5fd;background:#faf5ff}
@media(max-width:560px){.dc-paper{padding:22px 16px}.blk .tools{position:static;display:flex;margin-bottom:4px;flex-wrap:wrap}}

/* document-questions.html */
.dq-wrap{width:min(900px,calc(100% - 24px));margin:1rem auto 6rem}
.dq-bar{position:sticky;top:0;z-index:5;background:#f8fafcf2;backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:.6rem 0;margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.dq-bar h1{flex:1 1 220px;min-width:0;margin:0;font:700 1.1rem/1.25 var(--display,inherit);color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dq-note{font-size:.85rem;color:var(--t3);flex-basis:100%}
.dq-note[data-kind=error]{color:#b91c1c}.dq-note[data-kind=ok]{color:#15803d}
.dq-empty{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:1.6rem;color:var(--t2);text-align:center}
.dq-set{margin:1.6rem 0 .6rem;display:flex;align-items:baseline;gap:.6rem;color:var(--t1);font:700 1rem/1.3 var(--display,inherit)}
.dq-set small{color:var(--t3);font:500 .8rem/1.3 system-ui,sans-serif}
.dq-q{background:#fff;color:#0f172a;border-radius:12px;padding:14px 18px;margin:0 0 10px;display:grid;grid-template-columns:2.4rem 1fr;gap:0 .6rem}
.dq-q .n{font:700 .95rem/1.6 system-ui,sans-serif;color:#475569}
.dq-q .body{min-width:0;overflow-x:auto}
.dq-q .body img{max-width:100%;height:auto;display:block;margin:8px auto}
.dq-q .body>*:first-child{margin-top:0}
.dq-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.5rem}
.dq-tag{font:600 .72rem/1 system-ui,sans-serif;border-radius:999px;padding:.3rem .6rem;background:#eef2ff;color:#3730a3}
.dq-tag.proof{background:#fef3c7;color:#92400e}.dq-tag.book,.dq-tag.ok{background:#dcfce7;color:#166534}.dq-tag.bad{background:#fee2e2;color:#991b1b}
.dq-q .n input.pick{display:block;width:1.15rem;height:1.15rem;margin:.35rem 0 0;accent-color:#6d28d9;cursor:pointer}
.dq-why{font:500 .8rem/1.4 system-ui,sans-serif;color:#475569;margin:.5rem 0 0}
.dq-q button.more{font:600 .75rem/1 system-ui,sans-serif;color:#5b21b6;background:#faf5ff;border:1px solid #c4b5fd;border-radius:999px;padding:.3rem .7rem;cursor:pointer}
.dq-sol{grid-column:2;border-top:1px dashed #cbd5e1;margin-top:.6rem;padding-top:.6rem;overflow-x:auto}
@media(max-width:560px){.dq-q{grid-template-columns:1.8rem 1fr;padding:12px}}

/* under the LMS's own bar, which stays at the top on a wide screen */
.dc-bar, .dq-bar { top: 62px; background: color-mix(in srgb, var(--page) 94%, transparent); }
@media (max-width: 640px) { .dc-bar, .dq-bar { top: 0; } }

/* speak.html */
.sp-card { padding: 24px; }
.sp-rec { display: flex; gap: 18px; align-items: center; margin: 6px 0 16px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.sp-mic { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px -6px var(--accent); transition: transform .12s, background .12s; }
.sp-mic:hover { transform: scale(1.04); }
.sp-mic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-mic[data-on=yes] { background: #dc2626; box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); animation: sp-pulse 1.4s infinite; }
@keyframes sp-pulse { 70% { box-shadow: 0 0 0 16px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .sp-mic[data-on=yes] { animation: none; } }
.sp-state { display: grid; gap: 2px; min-width: 0; color: var(--t3); font-size: .92rem; }
.sp-state b { font-size: 1.6rem; line-height: 1.1; color: var(--t1); font-variant-numeric: tabular-nums; }
.sp-ready { display: grid; gap: 12px; margin: 6px 0 16px; }
.sp-ready audio { width: 100%; }
.sp-file span { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.sp-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 0 12px; color: var(--t4); font-size: .92rem; }
.sp-steps li::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border2); }
.sp-steps li b { color: var(--t4); font-size: 1rem; }
.sp-steps li[data-state=now] b, .sp-steps li[data-state=done] b { color: var(--t1); }
.sp-steps li[data-state=now] { color: var(--t3); }
.sp-steps li[data-state=now]::before { border-color: var(--accent); border-top-color: transparent; animation: sp-turn .8s linear infinite; }
.sp-steps li[data-state=done]::before { border-color: #16a34a; background: #16a34a; }
@keyframes sp-turn { to { transform: rotate(360deg); } }
.sp-heard { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; color: var(--t3); font-size: .9rem; }
.sp-heard summary { cursor: pointer; font-weight: 600; color: var(--t2); }
.sp-heard p { white-space: pre-wrap; }
/* Do more with this page (document-tasks.js) */
.dc-welcome{margin:0 0 .8rem;padding:.7rem .9rem;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;font-size:.92rem;color:var(--t2,#334155)}
.dc-tasks{margin:0 0 1rem;padding:.7rem .9rem;border:1px solid var(--border);background:var(--surface);border-radius:12px}
.dc-tasks .tk-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.dc-tasks .tk-row b{margin-right:.3rem;font-size:.95rem}
.dc-tasks [aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.dc-tasks .tk-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-top:.6rem}.dc-tasks .tk-form[hidden]{display:none}
.dc-tasks .tk-field{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--t3);flex:1 1 260px;min-width:0}.dc-tasks .tk-field[hidden]{display:none}
.dc-tasks #tk-language-field{flex:0 1 180px}
.dc-tasks input,.dc-tasks select{font:inherit;font-size:.9rem;color:var(--t1);background:#fff;border:1px solid var(--border2);border-radius:8px;padding:.4rem .5rem}
.dc-tasks .dc-note{margin:.5rem 0 0}.dc-tasks .tk-price{margin:.3rem 0 0;font-size:.78rem;color:var(--t4,#94a3b8)}
.dc-tasks .tk-sub{display:block;margin:.6rem 0 .2rem;font-size:.85rem}
@media print{.dc-tasks,.dc-welcome{display:none}}
.dc-draftbar{margin:0 0 1rem;padding:.7rem .9rem;border:1px solid #f59e0b;background:#fffbeb;border-radius:12px;font-size:.92rem}
.dc-draftbar p{margin:0 0 .5rem}.dc-draftbar .row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.dc-draftbar .dc-note{flex-basis:auto}
.dc-paper.dc-draft{outline:2px dashed #f59e0b;outline-offset:4px}
@media print{.dc-draftbar{display:none}}
.dc-download{position:relative}.dc-download>summary{list-style:none;cursor:pointer}.dc-download>summary::-webkit-details-marker{display:none}
.dc-download>summary::after{content:"▾";margin-left:.35em;font-size:.8em;color:var(--t3)}
.dc-download-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:240px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0f172a22;padding:.3rem;display:grid}
.dc-download-menu button{display:grid;text-align:left;gap:.05rem;font:inherit;font-weight:600;font-size:.9rem;color:var(--t1);background:none;border:0;border-radius:7px;padding:.45rem .6rem;cursor:pointer}
.dc-download-menu button:hover,.dc-download-menu button:focus-visible{background:var(--accent-soft)}
.dc-download-menu small{font-weight:400;font-size:.78rem;color:var(--t3)}
@media(max-width:560px){.dc-download-menu{right:auto;left:0}}