.teacher-workspace { background:#e5e3d2; color:#24251f; font-family:Geneva,"Segoe UI",sans-serif; }
.teacher-workspace [hidden] { display:none !important; }
.teacher-workspace .main { max-width:1400px; padding:0 24px 32px; }
.teacher-workspace .page-header { background:transparent; color:inherit; border:0; max-width:1400px; margin:auto; padding:24px; }
.teacher-workspace .page-header h1 { font-size:1.55rem; }
.teacher-workspace .subtitle { color:#57594e; }
.teacher-workspace .section { border:1px solid #b6b7a7; border-radius:8px; box-shadow:none; background:#f7f5ee; margin:16px 0; }
.workspace-toolbar,.workspace-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.workspace-toolbar { margin-bottom:16px; }
.workspace-toolbar label { font-size:.8rem; font-weight:600; }
.workspace-toolbar input,.workspace-toolbar select { display:block; margin-top:5px; min-height:38px; }
.workspace-toolbar input { width:300px; max-width:80vw; }
.workspace-button { font:inherit; font-size:.86rem; border:1px solid #aaa998; border-radius:5px; padding:9px 12px; color:#30332a; background:#faf9f3; cursor:pointer; }
.workspace-button:hover { background:#e9ecdf; }
.workspace-button[aria-pressed=true] { background:#354e41; color:white; border-color:#354e41; }
.teacher-workspace :focus-visible { outline:3px solid #24649c; outline-offset:3px; }
.teacher-workspace .student-name { border:0; background:transparent; padding:4px 0; color:#254f41; text-decoration:underline; text-underline-offset:3px; font:inherit; font-weight:600; cursor:pointer; text-align:left; }
.workspace-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(180px,1.5fr) minmax(140px,1fr); gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid #ddded2; font-size:.88rem; }
.workspace-row:last-child { border-bottom:0; }
.workspace-tag { font-size:.78rem; color:#775524; }
.workspace-empty { padding:14px 0; color:#5c6055; line-height:1.6; }
.workspace-settings summary,#workspace-class-details>summary { cursor:pointer; padding:10px 0; font-weight:600; }
.workspace-settings .row-2 { margin-top:12px; }
#workspace-connection { padding:10px 18px; }
.teacher-workspace .tsc-drawer-panel { width:min(900px,96vw); max-width:96vw; background:#f7f5ee; }
.teacher-workspace .tsc-drawer-body { padding:18px 24px; }
.teacher-workspace .tsc-actions { margin:14px 0; }
.teacher-workspace .tsc-recent-list .workspace-saved-item { display:block; padding:14px 0; line-height:1.7; }
.workspace-saved-item pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#eeeee4; padding:12px; font:inherit; }
.workspace-saved-item summary { cursor:pointer; }
.workspace-worksheet-frame { width:100%; height:65vh; border:1px solid #aaa998; background:white; }
.workspace-tool-frame { display:block; width:100%; height:75vh; border:1px solid #aaa998; margin-top:10px; background:white; }
#workspace-worksheet .workspace-button { margin:5px; }
@media(max-width:650px) { .teacher-workspace .main { padding:0 12px 24px; } .workspace-row { grid-template-columns:1fr; gap:4px; } .teacher-workspace .tsc-drawer-body { padding:14px; } }

/* Keep the first class rows visible on a school laptop, without nesting card gaps. */
.teacher-workspace .main { display:block; }
.teacher-workspace .page-header { flex-wrap:wrap; padding:16px 24px; }
.teacher-workspace .page-header h1 { color:#303c32; font-size:1.25rem; }
.teacher-workspace .section { gap:10px; }
.teacher-workspace .section h2 { margin:0 0 8px; font-size:1.15rem; }
#workspace-connection { display:block; margin:12px 0; }
#workspace-connection .btn-row { margin:4px 0; }
#workspace-connection #info-banner { border:0; background:transparent; padding:4px 0; font-size:.8rem; }
.teacher-workspace .btn { border-radius:5px; background:#354e41; }
.teacher-workspace .tsc-actions { display:flex; flex-wrap:wrap; gap:8px; }
.teacher-workspace .tsc-action-btn { width:auto; }
.teacher-workspace .tsc-recent-list .workspace-saved-item { padding:14px; }

/* Questions and answers stay readable in the narrow student drawer. */
#workspace-evidence { min-width: 0; }
#workspace-evidence pre, .workspace-question { white-space: pre-wrap; overflow-wrap: anywhere; }
#workspace-evidence img { max-width: 100%; }
#workspace-evidence table { width: 100%; font-size: .85rem; }
#workspace-evidence td, #workspace-evidence th { padding: .3rem; border: 1px solid #8886; }
.workspace-evidence-chart { position: relative; min-height: 250px; max-width: 100%; }
.workspace-choice { margin: .35rem 0; }
.skill-result-correct { color: #287544; font-weight: 600; }
.skill-result-incorrect { color: #b34b35; font-weight: 600; }

#workspace-evidence .workspace-empty { margin: .65rem 0; padding: 0; text-align: left; }
#workspace-evidence .workspace-saved-item { margin-top: 1.5rem; }

/* CLASS_SNAPSHOT_SPEC.md — "Where the class stands" */
.workspace-snapshot-box { margin: 8px 0 12px; }
.workspace-snapshot-box h3 { margin: 0 0 4px; font-size: 12px; }
.workspace-snapshot-box canvas { display: block; max-width: 100%; height: auto; border: 1px solid #000; background: #fff; }
.workspace-nav [aria-pressed="true"] { background: #000; color: #fff; }

/* ── Pico Desk skin (teacher 2026-10-10) ─────────────────────────────────────────────────────
   html[data-pico] is set by teacher-workspace.js when the workspace is opened from the Pico Desk.
   Same nodes as the classic skin; only the look changes: plain text, the orange recovered
   window for the student pane and the class picture, stage-select buttons (green = current,
   orange = focus) for the view strip and the student tabs, the class list as tiles. */
html[data-pico] { --pico-orange:#FF864D; --pico-green:#3DA35D; --pico-ink:#000040; --pico-paper:#FEFEFE; --pico-cream:#FFFBF0;
  --pico-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
html[data-pico] .teacher-workspace { background:var(--pico-paper); color:var(--pico-ink); font-family:var(--pico-font); }
html[data-pico] .teacher-workspace button, html[data-pico] .teacher-workspace input, html[data-pico] .teacher-workspace select,
html[data-pico] .teacher-workspace summary, html[data-pico] .teacher-workspace h1, html[data-pico] .teacher-workspace h2,
html[data-pico] .teacher-workspace h3 { font-family:var(--pico-font); }
html[data-pico] .teacher-workspace .page-header h1 { color:var(--pico-ink); font-weight:800; letter-spacing:.04em; }
html[data-pico] .teacher-workspace .section { background:var(--pico-paper); border:3px solid #e4e4e4; border-radius:4px; }
html[data-pico] .teacher-workspace :focus-visible { outline:3px solid var(--pico-ink); outline-offset:2px; }
html[data-pico] .workspace-button { min-height:44px; padding:6px 14px; background:var(--pico-paper); color:var(--pico-ink);
  border:3px solid var(--pico-green); border-radius:4px; font-weight:700; font-size:15px; }
html[data-pico] .workspace-button:hover { background:var(--pico-cream); }
html[data-pico] .workspace-nav [aria-pressed="true"], html[data-pico] .workspace-button[aria-pressed=true] { background:var(--pico-paper); color:var(--pico-ink); }
/* View strip and student tabs: stage-select buttons. One green outline = the current one;
   keyboard focus = orange. */
html[data-pico] .workspace-view-strip .workspace-button, html[data-pico] .workspace-student-tabs .workspace-button {
  min-height:48px; padding:6px 18px; border:4px solid #e4e4e4; font-size:16px; font-weight:800; letter-spacing:.04em; }
html[data-pico] .workspace-view-strip .workspace-button[aria-pressed="true"],
html[data-pico] .workspace-student-tabs .workspace-button[aria-pressed="true"] { border-color:var(--pico-green); }
html[data-pico] .workspace-view-strip .workspace-button:focus-visible,
html[data-pico] .workspace-student-tabs .workspace-button:focus-visible { outline:none; border-color:var(--pico-orange); }
html[data-pico] .workspace-view-strip .workspace-unread { background:var(--pico-orange); color:#fff; border-color:var(--pico-orange); }
html[data-pico] .workspace-student-tabs .workspace-button:disabled { opacity:.4; cursor:default; }
/* The class list as tiles: name, period / last saved, the module's own status line and tags. */
html[data-pico] #workspace-roster { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
html[data-pico] #workspace-roster .workspace-row { display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:10px 12px; border:3px solid #e4e4e4; border-radius:4px; background:var(--pico-cream); font-size:15px; }
html[data-pico] #workspace-roster .workspace-row:focus-within { border-color:var(--pico-orange); }
html[data-pico] #workspace-roster .workspace-empty { grid-column:1 / -1; }
html[data-pico] .teacher-workspace .student-name { color:var(--pico-ink); font-size:18px; font-weight:800; text-decoration:none; min-height:32px; }
html[data-pico] .teacher-workspace .student-name:hover { text-decoration:underline; }
html[data-pico] .workspace-tag { display:inline-block; padding:1px 8px; border:2px solid #d9b400; border-radius:4px; background:#fff3b0; color:var(--pico-ink); font-size:13px; font-weight:700; }
/* The class picture in the recovered window: orange frame, its heading on the orange bar. */
html[data-pico] #workspace-snapshot-section { position:relative; padding:43px 16px 16px; border:0; background:var(--pico-paper);
  box-shadow:inset 0 0 0 6px var(--pico-orange); border-radius:4px; }
html[data-pico] #workspace-snapshot-section > h2 { position:absolute; top:0; left:0; right:0; height:31px; margin:0; padding:0 14px;
  display:flex; align-items:center; background:var(--pico-orange); color:#fff; font-size:16px; font-weight:800; letter-spacing:.04em; border-radius:4px 4px 0 0; }
html[data-pico] .workspace-snapshot-box canvas { border:3px solid #e4e4e4; border-radius:4px; }
/* The student pane: an orange sub-window over the workspace. */
html[data-pico] .teacher-workspace .tsc-drawer-panel { background:var(--pico-paper); border:6px solid var(--pico-orange); border-radius:6px; box-shadow:none; }
html[data-pico] .teacher-workspace .tsc-drawer-header { background:var(--pico-orange); color:#fff; }
html[data-pico] .teacher-workspace .tsc-drawer-header h2, html[data-pico] .teacher-workspace .tsc-drawer-subtitle { color:#fff; font-family:var(--pico-font); }
html[data-pico] .teacher-workspace .tsc-drawer-close { min-width:44px; min-height:44px; }