:root { --success:#168a53; --warm:#af6a19; --warm-bg:#fff5e7; }
.skip-link { position:absolute;left:260px;top:-60px;z-index:50;background:white;padding:12px; }
.skip-link:focus { top:0; }
.sidebar-caption { margin:14px 8px 0;font-size:12px;color:var(--muted); }
.subject-nav { margin-top:24px; }
.subject-nav summary { cursor:pointer;padding:10px 12px;font-weight:650; }
.subject-nav summary .muted { font-size:11px;font-weight:400;float:right; }
.subject-nav .sidebar-link { margin-left:16px; }
.admin-link { margin-top:32px;font-size:12px;color:var(--muted); }
.header-note { font-size:12px;font-weight:400;color:var(--muted);margin-left:auto; }
.eyebrow { color:var(--primary);font-size:12px;font-weight:650;letter-spacing:.06em;margin:0 0 10px!important;display:block; }
.page-heading { margin-top:8px; }.spaced { margin-top:24px; }
.panel { padding:28px; }.panel h2 { margin-top:0; }.panel p { line-height:1.8; }
.pill { display:inline-flex;align-items:center;padding:4px 10px;border-radius:6px;font-size:12px;background:var(--primary-soft);color:var(--primary);margin-bottom:8px; }
.pill.warm { background:var(--warm-bg);color:var(--warm); }.pill.success { color:var(--success);background:#eaf6ef; }
.hero-card { display:flex;align-items:center;justify-content:space-between;gap:24px;background:#eaf1f8;border:1px solid #d2dfed;border-radius:14px;padding:30px; }
.hero-card h2 { font-size:23px;margin:0 0 8px; }.hero-card p { margin:0;color:#4c6078;line-height:1.8; }
.hero-card .eyebrow { color:var(--primary); }
.fit { width:auto;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal; }
.button.secondary { color:var(--primary);background:white;border:1px solid #cbd8e6; }.button.secondary:hover { background:var(--primary-soft); }
.button:disabled { opacity:.5;cursor:default; }
.text-link { color:var(--primary);display:inline-block;margin:8px 0;font-weight:600; }
.section { margin-top:28px; }.section>h2 { margin:0 0 14px; }
.stack { display:grid;gap:14px; }.two-columns { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.task-row { padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.task-row small { display:block;color:var(--muted);margin-top:6px; }.task-row h2 { margin:4px 0 6px;font-size:17px; }.task-row p { color:var(--muted);margin:0; }
.action-text { flex-shrink:0;color:var(--primary);font-weight:600; }
.progress-form { margin-top:22px;max-width:540px; }.progress-form fieldset { margin:20px 0;padding:0;border:0; }.progress-form legend { font-weight:600;margin-bottom:8px; }
input[type=radio],input[type=checkbox] { width:18px!important;min-height:0!important;margin:0!important;accent-color:var(--primary);flex-shrink:0; }
.radio-label,.check-label { display:flex;align-items:center;gap:8px;font-weight:400;margin:12px 0;cursor:pointer; }
select,textarea { font:inherit;max-width:100%;color:var(--text);background:white;border:1px solid var(--line);border-radius:8px;padding:10px 12px; }
.progress-form select { width:100%; }textarea { display:block;width:100%;resize:vertical; }
.lesson-row { display:flex;align-items:center;gap:24px;padding:26px; }.lesson-number { width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:650;color:var(--primary);background:var(--primary-soft);flex-shrink:0; }
.lesson-description { flex:1; }.lesson-description h2 { margin:6px 0; }.lesson-description p { color:var(--muted);font-size:13px; }
.source-note { margin-top:24px;color:var(--muted);font-size:12px; }.source-note a { color:var(--primary); }
.textbook-context { margin:24px 0; }.textbook-context h2 { margin:6px 0 12px; }
.textbook-actions { display:flex;align-items:center;flex-wrap:wrap;gap:16px; }.textbook-actions form { margin:0; }
.textbook-reader { margin:18px 0; }.textbook-reader summary { cursor:pointer;color:var(--primary);font-weight:650;padding:14px 0; }
.textbook-reader iframe { display:block;width:100%;height:70vh;min-height:440px;max-height:900px;border:1px solid var(--line);border-radius:12px;background:#f5f4ef; }
.textbook-reference { padding:14px 18px;border-left:3px solid var(--primary);background:var(--primary-soft);border-radius:0 8px 8px 0; }
.lesson-actions { display:grid;gap:14px;flex-shrink:0; }.lesson-row .lesson-actions form { margin:0; }
.knowledge:target { scroll-margin-top:24px;outline:2px solid var(--primary);outline-offset:3px; }
@media (max-width:700px) { .textbook-reader iframe { min-height:360px;height:65vh; }.lesson-actions { width:100%; } }
.step-nav { display:flex;flex-wrap:wrap;gap:8px;margin:20px 0; }
.step-button { border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:white;color:var(--muted);font-size:13px; }
.step-button[aria-current=step] { background:var(--primary);color:white;border-color:var(--primary); }.step-button:disabled { opacity:.55;cursor:default; }
.step-title { font-size:23px;margin:10px 0!important; }.step-body { font-size:16px;max-width:800px; }
.step-footer { display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:26px; }
.save-status { color:var(--muted);font-size:12px;overflow-wrap:anywhere; }
.figure-pair { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px; }
figure { margin:0; }.solid-figure { width:min(100%,300px);text-align:center; }.cube-svg { display:block;width:100%;max-height:290px; }
.flat-figure { width:146px;max-width:100%;text-align:center; }.view-svg { width:100%;display:block; }
figcaption { font-size:12px;line-height:1.6;margin-top:6px; }
.observation { background:#f8fafc;padding:18px;border-radius:12px;margin:20px 0; }.observation-result:empty { display:none; }.observation-result { margin-top:20px; }
.prediction { border-top:1px solid var(--line);padding-top:12px;margin-top:12px;text-align:center; }.prediction .grid-editor { margin:12px auto; }
.direction-tabs { display:flex;flex-wrap:wrap;justify-content:center;gap:10px; }
.chip-button { background:white;border:1px solid #ccd9e6;border-radius:8px;padding:10px 18px;color:var(--primary); }.chip-button[aria-pressed=true] { background:var(--primary);color:white; }
.question-widget { margin-top:18px; }.question-title { font-size:18px;line-height:1.75;font-weight:600; }
.answer-options { display:flex;flex-wrap:wrap;gap:12px;margin:24px 0;justify-content:center; }
.answer-option { display:flex;align-items:center;justify-content:center;gap:8px;position:relative;min-width:160px;padding:15px;border:2px solid var(--line);border-radius:12px;background:white;color:var(--text); }
.answer-option[aria-pressed=true] { border-color:var(--primary);background:var(--primary-soft); }.answer-option:disabled { cursor:default;opacity:1; }
.option-letter { align-self:flex-start;color:var(--muted);font-size:12px;font-weight:650; }
.grid-editor,.build-grid { display:grid;grid-template-columns:repeat(4,48px);width:max-content;border:1px solid #a8bacb; }
.grid-cell { width:48px;height:48px;padding:0;border:1px solid #ccd9e6;border-radius:0;background:#fff;color:#5c7a93;font-size:18px;touch-action:manipulation; }
.grid-cell[aria-pressed=true] { background:#6aaabe;color:#fff;border-color:#3c748b; }.grid-cell:disabled { cursor:default;opacity:1; }
.draw-workspace { display:flex;align-items:center;flex-direction:column;gap:12px;margin:24px 0; }
.target-views { display:flex;justify-content:center;flex-wrap:wrap;gap:16px;background:#f8fafc;padding:14px;border-radius:10px; }
.builder { display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:center;padding:20px 0; }.builder-scene { display:flex;justify-content:center; }.builder-controls { display:flex;flex-direction:column;align-items:center; }
.builder-controls select { min-width:194px; }.builder-controls p { font-size:12px;color:var(--muted);text-align:center; }.board-label { font-size:11px;color:var(--muted);margin:6px 0; }
.count-label { font-weight:650;color:var(--primary)!important;margin:8px 0; }.answer-controls { border-top:1px solid var(--line);margin-top:20px;padding-top:16px; }
.hint-text { color:var(--primary);font-size:14px; }.hint-text:empty { display:none; }
.feedback { margin:24px 0;padding:24px;border-radius:12px;border:1px solid #c4ddce;background:#f0f8f3; }.feedback.needs-work { background:#fff8ee;border-color:#eddbbc; }.feedback h3 { margin-top:0; }.feedback p { line-height:1.8; }
.round-progress { display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0; }.round-dot { flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:white; }.round-dot.current { border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft); }.round-dot.done { background:#e9f7ef;color:var(--success); }.round-dot.wrong { background:var(--warm-bg);color:var(--warm); }
.completion { text-align:center;padding:42px; }.complete-mark { margin:0 auto 20px;width:56px;height:56px;border-radius:50%;color:var(--success);background:#e9f7ef;display:grid;place-items:center;font-size:30px; }.completion-banner { background:#eef7f1;border:1px solid #c8dfcf;padding:24px;border-radius:12px;margin-bottom:20px; }
.knowledge summary { display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:12px; }.knowledge summary strong { display:block;font-size:18px; }.recall-prompt { color:var(--primary);background:var(--primary-soft);padding:12px;border-radius:8px; }
.filter-bar { display:flex;gap:8px;margin:24px 0; }.filter-bar a { padding:8px 16px;border-radius:8px;color:var(--muted); }.filter-bar .is-active { background:var(--primary-soft);color:var(--primary);font-weight:600; }
@media (max-width:900px) { .builder { grid-template-columns:1fr; }.hero-card { align-items:flex-start;flex-direction:column; }.lesson-row { flex-wrap:wrap; }.lesson-row form { margin-left:80px; } }
@media (max-width:700px) { .panel { padding:20px; }.two-columns { grid-template-columns:1fr; }.hero-card { padding:24px; }.lesson-row { gap:14px;padding:20px; }.lesson-description { min-width:160px; }.lesson-row form { margin-left:0; }.task-row { padding:18px;align-items:flex-start; }.task-row .action-text { font-size:12px; }.answer-option { min-width:0;flex:1 1 110px;padding:8px; }.answer-option .flat-figure { width:110px; }.step-button { font-size:12px;padding:8px; }.target-views { gap:8px;padding:8px; }.target-views .flat-figure { width:94px; }.subject-nav { margin-top:8px; }.sidebar-nav { margin-top:12px; }.subject-nav .sidebar-link { display:inline-flex;margin-left:8px; }.admin-link { margin-top:8px; }.header-note { display:none; }.question-title { font-size:16px; }.step-title { font-size:20px; }.knowledge summary strong { font-size:16px; } }
/* Lesson activities share navigation and saving, with their own teaching surfaces. */
.unit-heading { margin: 24px 0 4px; }
.unit-heading h2 { margin: 8px 0; }
.unit-tabs, .phase-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.unit-tabs a { text-decoration: none; }
.unit-tabs .selected, .phase-label.current { background: #eaf1ff; color: #2458d3; border-color: #9db9f5; }
.phase-label { padding: 8px 12px; border: 1px solid #dfe5ef; border-radius: 20px; color: #637089; font-size: 13px; }
.arithmetic-workspace, .arithmetic-exploration { max-width: 700px; margin: 22px 0; }
.arithmetic-exploration { padding: 24px; background: #f6f8fc; border: 1px solid #e1e7f0; border-radius: 16px; }
.math-expression { font-size: clamp(24px, 5vw, 36px); font-weight: 700; letter-spacing: .03em; color: #243e70; overflow-wrap: anywhere; }
.number-field { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.number-field > span { flex: 1 1 200px; }
.number-field input, .number-field select { width: 180px; max-width: 100%; min-height: 48px; padding: 10px 14px; font-size: 21px; border: 1px solid #c7d3e7; border-radius: 10px; background: #fff; color: #253d64; }
.number-field input:focus { outline: 3px solid #bdd1fd; border-color: #4075de; }
.number-field input:disabled { opacity: 1; background: #edf1f7; color: #455777; }
.calculation-fields { border-left: 3px solid #a8c1f5; padding-left: 20px; }
.equal-groups { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.price-card { border-radius: 6px 12px 12px 6px; border: 1px solid #9cb9ee; border-left: 6px solid #6c97ea; background: #fff; padding: 22px 16px; color: #2b58a1; }
.area-grid { display: grid; grid-template-columns: repeat(10, 1fr); width: min(100%, 320px); aspect-ratio: 1; border: 2px solid #567ab7; margin: 16px 0; }
.area-cell { background: #fff; border: 1px solid #d4e0f1; }
.area-cell.selected { background: #6b9df0; border-color: #bad0f5; }
.explore-result:not(:empty) { margin-top: 20px; padding: 18px; background: #e9f3ee; border-radius: 12px; line-height: 1.8; }
.decimal-placement { display: flex; align-items: center; max-width: 100%; overflow-x: auto; padding: 16px 0; }
.decimal-digit { font-size: 28px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.point-slot { flex: 0 0 48px; width: 48px; height: 48px; border: 1px dashed #abc0e5; border-radius: 10px; color: #426ab2; background: #fff; font-size: 25px; cursor: pointer; }
.point-slot[aria-pressed="true"] { background: #e4eeff; border: 2px solid #437be2; }
.decimal-result { font-size: 19px; color: #2e528c; }
.rounding-line { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 40px 0 6px; border-bottom: 3px solid #9fb8e4; margin: 30px 24px 24px; font-variant-numeric: tabular-nums; }
.rounding-line strong { position: absolute; top: 0; transform: translateX(-50%); background: #e0ebfd; border-radius: 8px; padding: 6px 10px; }
.rounding-line strong::after { content: ''; position: absolute; left: 50%; top: 100%; height: 34px; border-left: 2px solid #628edc; }
@media (max-width: 600px) {
  .arithmetic-exploration { padding: 16px; }
  .number-field > span { flex-basis: 100%; }
  .number-field input, .number-field select { width: 100%; }
  .calculation-fields { padding-left: 12px; }
  .phase-label { font-size: 12px; padding: 6px 9px; }
  .step-button { flex: 1 1 130px; }
}

.reading-material { white-space: pre-wrap; line-height: 1.9; padding: 1.2rem; border-radius: 12px; background: #f3f7fc; margin: 1rem 0; overflow-wrap: anywhere; }
.step-body { white-space: pre-wrap; }
.short-answer { display: block; width: min(100%, 36rem); margin-top: .6rem; padding: .8rem; font-size: 1.1rem; border: 1px solid #bdcce0; border-radius: 8px; }
.learning-step textarea { width: 100%; padding: .8rem; font: inherit; line-height: 1.8; }
.plane-diagram {display:block;width:min(100%,440px);height:auto;margin:12px auto;overflow:visible;background:#fff;}
.plane-coordinate {font-size:11px;fill:#64748b;}
.plane-label {font-size:13px;fill:#334155;paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round;}
.plane-diagram [role="button"] {cursor:pointer;}
.plane-diagram [role="button"]:focus {outline:none;stroke:#123f63;stroke-width:3;}
.plane-status {color:#475569;font-size:14px;}

/* Photo collection: readable originals and editable transcription on small screens. */
.capture-columns { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.capture-columns > *, .capture-form, .capture-text { min-width:0; }
.capture-image { display:block; width:100%; height:auto; }
.capture-thumb { width:100px; max-height:100px; object-fit:contain; flex-shrink:0; }
.capture-text { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; }
.capture-form p { display:grid; gap:8px; }
.capture-form textarea, .capture-form input, .capture-form select { width:100%; box-sizing:border-box; }
.capture-form textarea { min-height:90px; max-height:320px; }
.capture-actions, .capture-search { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.capture-search label { display:grid; gap:8px; }
.capture-columns figure { margin:0 0 20px; }
.capture-columns details { margin-top:20px; }
@media(max-width:760px) { .capture-columns { grid-template-columns:minmax(0,1fr); } .capture-thumb { width:64px; } .capture-actions .button { width:100%; } }

.capture-thumb + div { min-width:0; overflow-wrap:anywhere; }
.capture-actions .button { width:auto; }
.capture-search input, .capture-search select { min-width:0; max-width:100%; }
@media(max-width:760px) { .capture-actions .button { width:100%; } }