becomes
a bordered card; each becomes a label/value row using
data-label; Actions becomes a responsive button grid. */
@media (max-width: 767px) {
.homework-table-wrap {
overflow-x: visible;
}
.homework-table {
display: block;
min-width: 0;
}
.homework-table thead {
display: none;
}
.homework-table tbody {
display: grid;
gap: 1rem;
}
.homework-table tbody tr {
display: block;
border: 1px solid var(--ed-border);
border-radius: 0.875rem;
background: var(--ed-card-bg);
overflow: hidden;
}
.homework-table tbody td {
display: grid;
grid-template-columns: minmax(6.5rem, 35%) minmax(0, 1fr);
gap: 0.75rem;
width: 100%;
min-width: 0;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--ed-border);
}
.homework-table tbody td::before {
content: attr(data-label);
font-size: 0.75rem;
font-weight: 700;
color: var(--ed-muted-text);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.homework-table tbody td:last-child {
border-bottom: 0;
}
/* Phase 8 — Actions cell spans the full card width with its label
stacked above a responsive button grid, rather than the two-column
label/value grid every other cell uses. */
.homework-table td.homework-col-actions {
display: block;
}
.homework-table td.homework-col-actions::before {
display: block;
margin-bottom: 0.625rem;
}
.homework-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.homework-actions .ed-btn-primary,
.homework-actions .ed-btn-secondary {
width: 100%;
min-width: 0;
}
}
/* Very small screens — one action button per row instead of two. */
@media (max-width: 420px) {
.homework-actions {
grid-template-columns: 1fr;
}
}
/* "Remove Homework Rows Immediately Without Refreshing" blueprint —
* Phase 13 (optional). Brief, non-blocking fade/collapse applied by
* homework-actions.js right before a successfully-removed row is
* taken out of the DOM. The row is only ever removed AFTER the server
* confirms success (never optimistically), so this is purely a visual
* polish on top of already-correct data, not a substitute for it. */
.homework-row-removing {
opacity: 0;
transform: translateY(-0.25rem);
transition: opacity 160ms ease, transform 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
.homework-row-removing {
transition: none;
}
}
.ta-detail-row td { background: var(--ed-body-bg); padding: 1.25rem 1.5rem !important; }
/* "Unit Edit Form Background" — the per-unit editor (Unit Title,
* Description, Estimated Hours, Mastery Target, Skills / Topics,
* Learning Notes), shown inside .ta-detail-row when "Edit Roadmap" is
* toggled on. Uses the same --ed-advanced-col-bg tint as the Advanced
* Features column above it (Option 1 from the color-options mockup) so
* the two "advanced-only" surfaces read as one consistent zone rather
* than two different shades. Shared by both live roadmap tables —
* .unit-edit-form appears identically in student/plan-roadmap.php and
* teacher/plan-view.php, so this one rule covers both.
*/
.unit-edit-form { background: var(--ed-advanced-col-bg); border-radius: .75rem; padding: 1rem 1.1rem; }
.ta-dt-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--ed-border); }
.ta-dt-footer-text { font-size: .8125rem; color: var(--ed-muted-text); }
.ta-dt-pagination { display: flex; align-items: center; gap: .375rem; }
.ta-dt-page-btn { min-width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .4rem; font-size: .8125rem; font-weight: 500; border: 1px solid transparent; color: var(--ed-body-text); background: transparent; cursor: pointer; padding: 0 .5rem; }
.ta-dt-page-btn:hover { background: var(--ed-body-bg); }
.ta-dt-page-btn.ta-active { background: var(--ed-primary); color: var(--ed-on-accent); }
.ta-dt-page-btn:disabled { color: var(--ed-muted-text); opacity: .5; cursor: not-allowed; }
.ed-row-details-summary { list-style: none; }
.ed-row-details-summary::-webkit-details-marker { display: none; }
.ed-row-details-summary:hover { text-decoration: underline; }
/* ---------------------------------------------------------------------
* "Claude.ai Visual System" pass — global fallback for plain, unclassed
* tables and lists. Many admin pages render a bare (already using semantic tokens like text-muted/border-ed-
* border/bg-app-body per-cell, just without the richer .ta-table/
* .ed-table treatment) rather than one of the named table components
* above. Scoped with :not(.ta-table, .ed-table, .ed-plan-table) and
* kept to low-specificity element selectors so it only fills gaps —
* any page's own utility classes (padding, borders, etc.) still win —
* and existing designed tables are completely unaffected. */
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) {
border-collapse: collapse;
}
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) thead tr {
background: var(--ed-body-bg);
}
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) th {
color: var(--ed-muted-text);
font-weight: 600;
text-align: left;
}
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) th,
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) td {
padding: 0.625rem 0.75rem;
}
table:not(.ta-table):not(.ed-table):not(.ed-plan-table) tbody tr:hover {
background: var(--ed-body-bg);
}
/* Bulleted/numbered content lists (About/Terms/Privacy-style prose,
* plus any dashboard list using Tailwind's list-disc/list-decimal)
* get a branded marker instead of the browser default, so a list
* reads as clearly "on-brand" as a card or button does. Doesn't touch
* / used as pure layout scaffolding (nav menus, card grids)
* since those never carry list-disc/list-decimal in this codebase. */
.list-disc > li::marker,
.list-decimal > li::marker {
color: var(--ed-primary);
font-weight: 600;
}
/* teacher/quiz-preview.php — "Show All Quiz Questions at Once" blueprint.
Brief highlight applied to the first unanswered question card when a
teacher cancels "Submit anyway?" so they can see which one it jumped
to; fades on its own, no JS timer dependency beyond removing the class. */
.qp-highlight { animation: qp-highlight-pulse 1.6s ease-out; }
@keyframes qp-highlight-pulse {
0% { box-shadow: 0 0 0 3px var(--ed-primary); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* "Detailed Report Live Progress and Activity Stream" blueprint,
* Phase 7/8 — the expanded progress panel (includes/learning-
* recommendation-cta-view.php) and its typing indicator. The three-dot
* indicator pulses to show the activity log is "about to type" a new
* event; respects prefers-reduced-motion by simply not animating
* (still visible, just static) rather than hiding the information it
* conveys. */
.ed-lr-activity-panel { max-width: 42rem; }
.ed-lr-typing-dot {
display: inline-block;
width: 0.35rem;
height: 0.35rem;
margin-right: 0.15rem;
border-radius: 9999px;
background: var(--ed-muted, #94a3b8);
animation: ed-lr-typing-bounce 1.2s infinite ease-in-out both;
}
.ed-lr-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ed-lr-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ed-lr-typing-bounce {
0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ed-lr-typing-dot { animation: none; opacity: 0.7; }
}
/* "Persistent Animated Progress Indicator During Long Report
* Generation" blueprint — a continuously-rotating ring immediately
* beside the percentage in the detailed-report progress panel's
* header (includes/learning-recommendation-cta-view.php), so the
* page never reads as frozen during the long early stage where the
* percent itself doesn't move for many seconds. Deliberately CSS-only
* (no JS timer driving the rotation) — an `animation: ... infinite`
* rule can't drift, pause, or be blocked by a slow/failed poll the
* way a JS-timed frame-cycle could, which matters for something whose
* entire job is to prove the page is still alive. JS only ever adds
* .ed-lr-activity-spinner--stopped once, when the job reaches a
* terminal state (see learning-recommendations.js's stop()).
*/
.ed-lr-percent-group {
display: inline-flex;
align-items: center;
gap: 0.5rem; /* ~8px — "within 8-12px of the percentage" */
}
.ed-lr-percent-value--active {
display: inline-block;
animation: ed-lr-percent-pulse 1s ease-in-out infinite;
}
@keyframes ed-lr-percent-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.ed-lr-activity-spinner {
display: inline-block;
width: 1.15rem;
height: 1.15rem;
border-radius: 9999px;
border: 2.5px solid var(--ed-primary, #2563eb);
border-right-color: transparent;
border-top-color: transparent;
opacity: 0.85;
animation: ed-lr-spinner-rotate 0.7s linear infinite;
}
.ed-lr-activity-spinner--stopped {
animation: none;
opacity: 0;
visibility: hidden;
}
@keyframes ed-lr-spinner-rotate {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
/* Same "stay visible, just don't move" rule as .ed-lr-typing-dot
above — a solid ring/steady percentage still communicates "there
is an indicator here", it just doesn't spin/pulse for anyone who
has asked their OS not to animate things. */
.ed-lr-percent-value--active { animation: none; }
.ed-lr-activity-spinner { animation: none; border-right-color: var(--ed-primary, #2563eb); border-top-color: var(--ed-primary, #2563eb); opacity: 0.6; }
}
/* =======================================================================
* "Live HTML/CSS/JavaScript Visuals for Every How-To Step" blueprint —
* annotation/containment chrome ONLY (per that blueprint's §26 CSS
* isolation rule). Anything reproducing actual TeeCarbon UI inside a
* How-To visual (buttons, cards, inputs) uses the real .ed-btn-*/
* .ed-card/.ed-input/.ed-badge-* classes already defined above — never
* duplicated here. These classes exist only for: the outer card shell,
* the "STEP PREVIEW" badge, the highlight ring + "CLICK HERE" callout,
* and small layout-only containers specific to a demo fixture
* (.how-to-sidebar-demo, .how-to-roadmap-unit-demo, etc.) that have no
* real-page equivalent to borrow from.
* ===================================================================== */
.how-to-visual {
position: relative;
background: var(--ed-body-bg);
border: 1px solid var(--ed-border);
border-radius: 14px;
padding: 1.5rem 1rem 1.25rem;
max-width: 480px;
}
.how-to-visual-badge {
position: absolute;
top: 10px;
right: 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ed-muted-text);
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 999px;
padding: 3px 10px;
}
.how-to-visual-body {
pointer-events: none; /* §24/§25 — every control inside a visual is inert; nothing here should be clickable except via how-to-visuals.js's own explicit, opted-in data-how-to-action handlers below */
}
.how-to-visual-body [data-how-to-action] {
pointer-events: auto;
cursor: pointer;
}
.how-to-visual-body [data-how-to-mode-value] {
pointer-events: auto;
cursor: pointer;
}
/* Highlight ring + "CLICK HERE" callout — wraps whichever element a
step's 'target' option names (how_to_visual_target(), how-to-visuals.php). */
.how-to-visual-target {
position: relative;
display: inline-block;
outline: 2px dashed var(--ed-primary);
outline-offset: 4px;
border-radius: 10px;
}
.how-to-visual-target-label {
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ed-primary);
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
/* Sidebar demo fixture (includes/how-to-visual-components/sidebar.php) */
.how-to-sidebar-demo {
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 12px;
padding: 0.75rem;
max-width: 260px;
}
.how-to-sidebar-brand {
font-weight: 800;
font-size: 13px;
color: var(--ed-heading);
margin-bottom: 0.5rem;
}
.how-to-sidebar-group-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ed-muted-text);
margin: 0.5rem 0 0.25rem;
}
.how-to-sidebar-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 8px;
font-size: 13px;
color: var(--ed-body-text);
}
.how-to-sidebar-row-active {
background: var(--ed-body-bg);
color: var(--ed-primary);
font-weight: 700;
}
.how-to-sidebar-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0.6;
}
/* Roadmap-unit demo fixture */
.how-to-roadmap-unit-demo h3 {
font-size: 15px;
font-weight: 700;
color: var(--ed-heading);
margin: 0.25rem 0 0.15rem;
}
.how-to-roadmap-unit-demo p {
font-size: 12px;
color: var(--ed-muted-text);
margin: 0 0 0.75rem;
}
.how-to-roadmap-unit-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.how-to-roadmap-nonowner-title {
font-size: 13px;
font-weight: 700;
color: var(--ed-muted-text);
margin: 0;
}
.how-to-roadmap-nonowner-text {
font-size: 12px;
color: var(--ed-muted-text);
margin: 2px 0 0;
}
.how-to-mode-toggle {
display: flex;
gap: 4px;
margin-bottom: 0.75rem;
}
.how-to-mode-toggle .mode-toggle-btn {
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--ed-border);
background: var(--ed-card-bg);
color: var(--ed-muted-text);
}
.how-to-mode-toggle .mode-toggle-btn.how-to-mode-active {
background: var(--ed-primary);
color: #fff;
border-color: var(--ed-primary);
}
/* Quiz Settings demo fixture */
.how-to-quiz-settings-collapsed {
font-size: 13px;
font-weight: 600;
color: var(--ed-body-text);
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 8px 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.how-to-quiz-settings-demo {
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 12px;
padding: 0.9rem;
max-width: 300px;
}
.how-to-quiz-settings-title {
font-size: 13px;
font-weight: 700;
color: var(--ed-heading);
margin: 0 0 0.5rem;
}
.how-to-quiz-settings-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--ed-body-text);
margin-bottom: 0.4rem;
}
.how-to-quiz-settings-field .ed-input,
.how-to-quiz-settings-field .ed-select {
max-width: 110px;
padding: 3px 8px;
font-size: 12px;
}
.how-to-quiz-settings-save-row {
margin-top: 0.6rem;
}
/* Plan-directory demo fixture */
.how-to-plan-directory-tabs {
display: flex;
gap: 4px;
margin-bottom: 0.6rem;
}
.how-to-tab {
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--ed-border);
background: var(--ed-card-bg);
color: var(--ed-muted-text);
}
.how-to-tab-active {
background: var(--ed-primary);
color: #fff;
border-color: var(--ed-primary);
}
.how-to-plan-search-field {
display: flex;
align-items: center;
gap: 8px;
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 8px 12px;
font-size: 12px;
color: var(--ed-muted-text);
margin-bottom: 0.6rem;
}
.how-to-input-placeholder {
color: var(--ed-muted-text);
}
.how-to-plan-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 10px 12px;
}
.how-to-plan-result-title {
font-size: 13px;
font-weight: 700;
color: var(--ed-heading);
margin: 0 0 2px;
}
.how-to-plan-create-demo {
text-align: center;
padding: 1rem 0;
}
/* Journey demo fixture */
.how-to-journey-tabs {
display: flex;
gap: 4px;
margin-bottom: 0.6rem;
}
.how-to-journey-entry {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
color: var(--ed-heading);
}
.how-to-journey-entry-meta {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--ed-muted-text);
}
/* Communication demo fixture */
.how-to-comm-composer {
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 0.75rem;
max-width: 300px;
}
.how-to-comm-context {
font-size: 11px;
color: var(--ed-muted-text);
margin: 0 0 0.5rem;
}
.how-to-comm-composer textarea {
width: 100%;
margin-bottom: 0.5rem;
resize: none;
}
.how-to-comm-feed-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--ed-card-bg);
border: 1px solid var(--ed-border);
border-radius: 10px;
padding: 10px 12px;
}
.how-to-comm-feed-title {
font-size: 13px;
font-weight: 600;
color: var(--ed-heading);
}
@media (max-width: 480px) {
.how-to-visual { max-width: 100%; padding: 1.25rem 0.75rem 1rem; }
.how-to-sidebar-demo, .how-to-quiz-settings-demo, .how-to-comm-composer { max-width: 100%; }
}
/* Quick View gets a smaller version of the same component (blueprint
§21) rather than a second component — just visually shrunk. */
.how-to-visual-compact {
transform: scale(0.72);
transform-origin: top left;
margin-bottom: -1.5rem; /* offset the visual gap the scale-down leaves */
}
/* "Syllabus Learning Relationships Control Center" blueprint, Part 35
* ("Mobile behavior") — this feature was already built without any
* drag-and-drop dependency (badges/buttons + a shared modal/drawer,
* same tap-to-open pattern as everything else on this page), so the
* only genuinely missing piece is comfortable touch-target sizing and
* edge-to-edge dialogs on a phone-width viewport, rather than a
* separate mobile layout. Map mode (Part 16) needs nothing extra here
* either — it was already vertically-stacked cards, never a real
* graph, per that Part's own "Start simple" instruction, so it already
* degrades to a single column on a narrow screen with no changes.
*/
@media (max-width: 640px) {
/* The Add-Relationship modal, Suggest-Relationships drawer, and
Learning Path Settings drawer are all centered fixed-position
dialogs with a max-w-* cap — on a phone that cap plus the
surrounding p-4 leaves cramped side margins, so this widens them
to genuinely edge-to-edge instead. The inspector drawer already
anchors to the trailing edge (items-center justify-end) and stays
that way — collapsing it to centered on mobile would fight its
own slide-in affordance. */
#syl-lr-add-modal > div,
#syl-lr-suggest-drawer > div,
#syl-lr-settings-drawer > div {
max-width: 100%;
max-height: 92vh;
}
#syl-lr-add-modal,
#syl-lr-suggest-drawer,
#syl-lr-settings-drawer,
#syl-lr-inspector-drawer {
padding: 0.5rem;
}
/* Larger tap targets for the filter bar, badges, and per-Quiz row
action buttons — Part 35's own "List mode must be fully functional
on touch." Applied narrowly to this feature's own buttons/badges,
not a site-wide button-size change. */
.syl-lr-filter-btn,
.syl-lr-badge-toggle,
.syl-lr-add-btn,
.syl-lr-inspect-btn {
min-height: 32px;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
/* The per-Quiz row's action-button column (+ Add Relationship /
Details / Edit Relationships) sits to the right of the title on a
wide screen; on a phone that squeezes the title, so it drops below
as a full-width row of buttons instead. */
#syl-lr-hierarchy .ed-card > div.flex.items-start.justify-between {
flex-direction: column;
}
#syl-lr-hierarchy .ed-card .flex.flex-col.gap-1.items-end {
align-items: stretch;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
}
/* "TeeCarbon Deterministic Math Visual Engine" blueprint, PART 31/48.
Named rule constraining .tc-math-visual to the pixel maximums PART
31 specifies (this was NOT added in the Parts 31-45 pass — see that
pass's own changelog note "still open" — JSXGraph board sizing had
been following whatever CSS the containing .ed-card/.tc-math-visual-
container already applied, which is reasonable but not the explicit
rule PART 31 describes). `responsive_size` per template
('compact' | 'coordinate', see math-visual-templates.php's own
registry) selects between the two --coordinate variant and the
plain default; math-visual-renderer.js does not currently add a
template-specific class itself, so this rule applies the PART 31
DEFAULT (420px) to every .tc-math-visual and the wider COORDINATE
max (480px) only inside a container a page has explicitly marked
`.tc-math-visual-container--coordinate` (opt-in, since most current
Release 1 templates render fine at the default). */
.tc-math-visual {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.tc-math-visual-container--compact .tc-math-visual {
max-width: 320px;
}
.tc-math-visual-container--coordinate .tc-math-visual {
max-width: 480px;
}
/* PART 48 — the visible accessible-description text block
math-visual-renderer.js's render() now appends after every diagram
(see its own PART 48 comment). Deliberately still visible to
sighted users too (not screen-reader-only) — PART 48's own wording
is "do not make essential information available only through the
diagram," and a small, muted caption serves both a screen-reader
user and a sighted user who wants the diagram's content restated in
words. */
.tc-math-visual-description {
font-size: 0.75rem;
line-height: 1.1rem;
color: var(--ed-text-muted, #6b7280);
margin-top: 0.375rem;
text-align: center;
}
/* "TeeCarbon Worksheets" blueprint, Phase 1 (u213_422) — Worksheet
print layout (blueprint §15), REVISED in the u213_422 completion
pass to make the three print buttons genuinely independent (the
completion audit found all three previously just called a bare
window.print() with no mode actually consumed, and the old
`#tw-solution-sheet.hidden { display: block !important; }` rule
force-showed the Solution Sheet on EVERY print regardless of which
button was clicked — Print Worksheet could leak answers). Own
#tw-print-root mechanism rather than the generic #print-area toggle
above, matching the same per-feature choice the Learning Insights
Reports print rules (#li-report-print-root, above) already made:
this page has its own screen-only controls (search/filter UI,
sidebar, navbar, the "Show/Hide Solution Sheet" button, print
buttons themselves) that must never appear on paper.
Mode is set on #tw-print-root's own `data-print-mode` attribute by
twWorksheetPrint() (includes/syllabus-topic-worksheet-view.php's
own inline script) immediately before calling window.print(), and
cleared again on the browser's `afterprint` event. Three values:
- 'worksheet' (also the default/unset state, e.g. a raw Ctrl+P
that never went through one of our buttons) — worksheet body
only, Solution Sheet NEVER rendered, regardless of its on-screen
shown/hidden state. This is the safe default specifically so a
Student (or anyone) printing via the browser's own shortcut can
never accidentally leak answers.
- 'solutions' — Solution Sheet only, worksheet body hidden.
- 'both' — everything, Solution Sheet forced onto its own page via
.tw-print-page-break regardless of on-screen state.
Every one of these selectors is an ID + attribute selector (higher
specificity than a bare `.hidden` utility class), so they reliably
override the on-screen collapsed state either direction (force show
OR force hide) without needing to touch the DOM/class list at print
time. */
@media print {
#tw-print-root, #tw-print-root * { visibility: visible; }
#tw-print-root {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
}
.tw-hide-print { display: none !important; }
/* Default / 'worksheet' mode: the Solution Sheet is never printed,
full stop — overrides ANY on-screen shown/revealed state. */
#tw-print-root:not([data-print-mode="solutions"]):not([data-print-mode="both"]) #tw-solution-sheet {
display: none !important;
}
/* 'solutions' mode: Solution Sheet only — the worksheet body
(header/instructions/sections/questions) is suppressed, and the
Solution Sheet itself starts at the top of the page rather than
forcing a leading blank page via the 'both'-mode page-break. */
#tw-print-root[data-print-mode="solutions"] .tw-worksheet-body { display: none !important; }
#tw-print-root[data-print-mode="solutions"] #tw-solution-sheet {
display: block !important;
break-before: avoid;
page-break-before: avoid;
}
/* 'both' mode: everything prints, Solution Sheet forced visible
(overriding an unrevealed on-screen state) and starting on its
own page (blueprint §15). */
#tw-print-root[data-print-mode="both"] #tw-solution-sheet {
display: block !important;
}
/* blueprint §15 — "Solution sheet should begin on a separate
printed page" — only actually applies in 'both' mode; 'solutions'
mode above explicitly cancels this so a solutions-only printout
doesn't start with a blank leading page. */
.tw-print-page-break { break-before: page; page-break-before: always; }
/* blueprint §15 — the printed Worksheet header carries blank
Student Name / Date / Topic lines; those are pure screen clutter
everywhere else, so this block is print-only in both directions. */
.tw-print-only { display: block !important; }
}
.tw-print-only { display: none; }
.tw-fill-lines p { margin: 0.25rem 0; }
/* =======================================================================
* "TOC as a Visual Learning Path with Simple Progress Tracking"
* blueprint — Parts 7/19. Exactly THREE status colors anywhere in this
* block (green/red/neutral) — no yellow, blue, or mastery-band colors
* belong here; see includes/syllabus-toc-progress.php's own docblock
* for the three-state model these classes render.
* ===================================================================== */
.toc-progress-node {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.65rem;
height: 0.65rem;
border-radius: 999px;
flex-shrink: 0;
border: 2px solid var(--ed-border);
background: transparent;
}
.toc-progress-complete.toc-progress-node { background: var(--ed-success); border-color: var(--ed-success); }
.toc-progress-incomplete.toc-progress-node { background: var(--ed-danger); border-color: var(--ed-danger); }
.toc-progress-not-started.toc-progress-node { background: transparent; border-color: var(--ed-border); }
/* Same three states used as a badge/pill (question rows, quiz rows —
more legible at small sizes than the bare dot alone). */
.toc-progress-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.6875rem;
font-weight: 600;
padding: 0.05rem 0.45rem;
border-radius: 999px;
white-space: nowrap;
}
.toc-progress-badge.toc-progress-complete { color: var(--ed-success); background: var(--ed-success-bg); }
.toc-progress-badge.toc-progress-incomplete { color: var(--ed-danger); background: var(--ed-danger-bg); }
.toc-progress-badge.toc-progress-not-started { color: var(--ed-muted-text); background: transparent; border: 1px dashed var(--ed-border); }
/* The connecting vertical line between major TOC nodes (Part 7) — the
line itself always stays neutral; only the node dot at each end
carries status color (Part 7: "Do not introduce extra colors for
the path"). */
.toc-path-line {
width: 2px;
min-height: 1.1rem;
background: var(--ed-border);
margin: 0 auto;
}
/* Current-position marker (Part 9/19) — never a fourth status color,
just an outline/badge layered on top of whatever the node's own
green/red/neutral color already is. */
.toc-progress-current {
box-shadow: 0 0 0 3px var(--ed-primary);
}
.toc-current-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ed-on-accent);
background: var(--ed-primary);
padding: 0.05rem 0.4rem;
border-radius: 999px;
}
/* u213_720 — Large Course Navigator (My Learning, 50+ topics only).
Uses the existing tokens; a course under 50 topics never gets these classes. */
.toc-course-navigator {
/* Phase 31 — stays in reach while a long course scrolls, just below the
4rem site bar (sticky top-0 h-16); rows keep a scroll margin so a
revealed row is never hidden under it. */
position: sticky;
top: 4.5rem;
z-index: 30;
box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.25);
}
.toc-course-navigator-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.toc-course-navigator-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ed-muted-text);
}
.toc-course-navigator-count { font-size: 0.8125rem; font-weight: 600; color: var(--ed-heading); }
.toc-course-navigator .ta-dt-search { width: 100%; min-width: 0; }
.toc-course-navigator-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.toc-course-filters {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
.toc-course-filter {
min-height: 2.25rem;
padding: 0.25rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--ed-border);
background: var(--ed-card-bg);
color: var(--ed-heading);
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.toc-course-filter[aria-pressed="true"] {
background: var(--ed-primary);
border-color: var(--ed-primary);
color: var(--ed-on-accent);
}
.toc-course-filter:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; }
.toc-course-tools { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.toc-course-results { margin-top: -0.5rem; }
.toc-course-results-count { font-size: 0.75rem; font-weight: 600; color: var(--ed-muted-text); padding: 0.25rem 0; }
.toc-course-result {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.375rem 0;
border-bottom: 1px solid var(--ed-border);
font-size: 0.875rem;
}
.toc-course-group + .toc-course-group { border-top: 1px solid var(--ed-border); }
.toc-course-group, .toc-course-row, .toc-course-subunit { scroll-margin-top: 16rem; }
.toc-course-group-head { display: flex; align-items: center; gap: 0.5rem; }
.toc-course-group-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: 0.5rem 0.25rem;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
color: var(--ed-heading);
flex-wrap: wrap;
}
.toc-course-group-toggle:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; border-radius: 0.375rem; }
.toc-course-group-caret { width: 1rem; flex-shrink: 0; font-size: 0.7rem; color: var(--ed-muted-text); }
.toc-course-group-name { font-weight: 700; overflow-wrap: anywhere; }
.toc-course-group-count { margin-left: auto; flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: var(--ed-muted-text); white-space: nowrap; }
.toc-course-group-body { padding: 0 0 0.5rem 0.75rem; }
.toc-course-subunit { margin: 0.25rem 0 0.25rem 0.25rem; }
.toc-course-subunit-name { display: flex; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ed-heading); padding: 0.375rem 0; }
/* Phase 29 — compact topic rows: marker · name · status · one action. */
.toc-course-row { padding: 0.375rem 0; border-bottom: 1px solid var(--ed-border); }
.toc-course-row-main { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.toc-course-row-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 14rem; flex-wrap: wrap; }
.toc-course-row-name a, .toc-course-row-name button, .toc-course-row-name span.font-semibold { white-space: normal; overflow-wrap: anywhere; }
.toc-course-row-side { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.toc-course-row-current { background: color-mix(in srgb, var(--ed-primary) 7%, transparent); border-radius: 0.5rem; padding-left: 0.375rem; padding-right: 0.375rem; }
.toc-course-status { font-size: 0.6875rem; font-weight: 700; color: var(--ed-muted-text); white-space: nowrap; }
.toc-course-status-incomplete { color: var(--ed-warning, #b45309); }
.toc-course-status-complete { color: var(--ed-success, #2f7d5b); }
.toc-course-here { letter-spacing: 0.04em; }
.toc-course-schoolwork { font-size: 0.6875rem; font-weight: 600; color: var(--ed-heading); background: var(--ed-app-body, rgba(0,0,0,.05)); border: 1px solid var(--ed-border); border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap; }
.toc-course-more { margin: 0.25rem 0 0 1.5rem; }
.toc-course-more > summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--ed-muted-text); min-height: 1.75rem; display: inline-flex; align-items: center; }
.toc-course-more > summary:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; border-radius: 0.25rem; }
.toc-course-more-body { padding: 0.25rem 0 0.25rem 0; }
.toc-course-target { outline: 2px solid var(--ed-primary); outline-offset: 2px; border-radius: 0.375rem; }
/* Phase 32 — phones: a compact toolbar, filters scroll sideways in one row. */
@media (max-width: 640px) {
.toc-course-navigator { top: 4.25rem; padding: 0.75rem; }
.toc-course-navigator-head { margin-bottom: 0.375rem; }
.toc-course-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; }
.toc-course-navigator-controls { margin-top: 0.375rem; gap: 0.375rem; }
.toc-course-filter { min-height: 2rem; padding: 0.2rem 0.65rem; font-size: 0.75rem; }
.toc-course-tools { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
.toc-course-tools .ed-btn-secondary { white-space: nowrap; }
.toc-course-more { margin-left: 0; }
}
/* Phase 51 — pre-existing 375px overflow of the TOC action-button row (every
course size, since u213_7xx): let the row's buttons wrap on narrow screens
instead of pushing the page sideways. Same buttons, same order. */
@media (max-width: 480px) {
#toc-tree .toc-node > div > .flex-shrink-0 { flex-shrink: 1; min-width: 0; }
}
/* Overall syllabus progress bar (Part 8). */
.toc-overall-progress-track {
width: 100%;
height: 0.5rem;
border-radius: 999px;
background: var(--ed-border);
overflow: hidden;
}
.toc-overall-progress-fill {
height: 100%;
background: var(--ed-success);
border-radius: 999px;
transition: width 0.3s ease;
}
/* Expandable Quiz/Question detail (Part 11). */
.toc-quiz-detail {
border-left: 2px solid var(--ed-border);
margin-left: 0.6rem;
padding-left: 0.4rem;
}
.toc-quiz-row + .toc-quiz-row { border-top: 1px solid var(--ed-border); }
/* Continue Learning card (Part 10). */
.toc-continue-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
border: 1px solid var(--ed-border);
background: var(--ed-body-bg);
border-radius: 0.75rem;
padding: 0.85rem 1rem;
}
/* u213_723 — Topic Learning grouped actions (My Learning Course Map only;
toc-topic-learning.js). Token colors only; compact, wraps on phones. */
.toc-tl-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.toc-tl-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-left: 0.45rem; border-left: 2px solid var(--ed-border); }
.toc-tl-group-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-muted-text); margin-right: 0.1rem; }
.toc-tl-group a { padding: 0.2rem 0.6rem; font-size: 0.75rem; line-height: 1.2; min-height: 1.75rem; display: inline-flex; align-items: center; }
.toc-tl-group a:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; }
.toc-course-more-body .toc-tl-actions { display: flex; margin-top: 0.35rem; }
@media (max-width: 640px) {
.toc-tl-group a { min-height: 2.25rem; }
}
/* u213_723 — Topic Learning page (/student/topic-learning.php; Phases 54-59).
Token colors only; readable blocks, wraps on phones. */
.tlv-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ed-border); }
.tlv-tab { padding: 0.5rem 0.85rem; font-size: 0.875rem; font-weight: 600; color: var(--ed-muted-text); border-bottom: 2px solid transparent; min-height: 2.5rem; display: inline-flex; align-items: center; }
.tlv-tab:hover { color: var(--ed-body-text); }
.tlv-tab-current { color: var(--ed-primary); border-bottom-color: var(--ed-primary); }
.tlv-tab:focus-visible, .tlv-chip:focus-visible, .tlv-hint summary:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; }
.tlv-section { margin-bottom: 1.5rem; }
.tlv-h2 { font-size: 1.05rem; font-weight: 800; color: var(--ed-heading); margin: 0 0 0.6rem; }
.tlv-h3 { font-size: 1rem; font-weight: 700; color: var(--ed-heading); margin: 0 0 0.4rem; }
.tlv-body .ed-card { margin-bottom: 0.75rem; }
.tlv-text { margin: 0 0 0.4rem; color: var(--ed-body-text); line-height: 1.55; }
.tlv-lead { margin: 0 0 0.6rem; color: var(--ed-body-text); line-height: 1.6; font-size: 0.95rem; }
.tlv-meta { font-size: 0.8rem; color: var(--ed-muted-text); margin: 0.25rem 0 0; }
.tlv-facet { margin-top: 0.6rem; padding-left: 0.65rem; border-left: 3px solid var(--ed-border); }
.tlv-facet-warn { border-left-color: var(--ed-warning); background: var(--ed-warning-bg); padding: 0.45rem 0.65rem; border-radius: 0.35rem; }
.tlv-facet-muted .tlv-text { color: var(--ed-muted-text); }
.tlv-facet-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-muted-text); margin: 0 0 0.2rem; }
.tlv-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tlv-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; min-height: 1.9rem; border: 1px solid var(--ed-border); border-radius: 999px; font-size: 0.8rem; color: var(--ed-body-text); background: var(--ed-card-bg); }
a.tlv-chip:hover { border-color: var(--ed-primary); color: var(--ed-primary); }
.tlv-chip-role { font-size: 0.65rem; text-transform: uppercase; color: var(--ed-muted-text); }
.tlv-chain-list { list-style: none; margin: 0; padding: 0; }
.tlv-chain-list li { padding: 0.1rem 0; color: var(--ed-body-text); }
.tlv-chain-arrow { display: block; font-size: 0.75rem; color: var(--ed-muted-text); }
.tlv-relations, .tlv-list { margin: 0.3rem 0 0; padding-left: 1.1rem; list-style: disc; color: var(--ed-body-text); }
.tlv-step-no { color: var(--ed-primary); }
.tlv-transform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }
.tlv-transform-arrow { color: var(--ed-muted-text); }
.tlv-math { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; background: var(--ed-body-bg); border: 1px solid var(--ed-border); border-radius: 0.3rem; padding: 0.15rem 0.45rem; overflow-wrap: anywhere; }
.tlv-parts { margin: 0.5rem 0 0; padding-left: 1.2rem; list-style: decimal; display: grid; gap: 0.3rem; }
.tlv-hints { margin-top: 0.6rem; }
.tlv-hint { border: 1px solid var(--ed-border); border-radius: 0.35rem; padding: 0.35rem 0.6rem; margin-top: 0.3rem; background: var(--ed-card-bg); }
.tlv-hint summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ed-primary); min-height: 1.75rem; display: flex; align-items: center; }
.tlv-question { margin-bottom: 0.75rem; }
.tlv-question-part { margin: 0.6rem 0 0 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--ed-border); }
.tlv-q-text { margin: 0 0 0.5rem; color: var(--ed-body-text); line-height: 1.5; }
.tlv-q-no { font-weight: 700; color: var(--ed-heading); }
.tlv-choices { border: 0; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.tlv-choice { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; color: var(--ed-body-text); }
.tlv-answer { width: 100%; max-width: 100%; }
.tlv-q-principles { margin-top: 0.5rem; }
.tlv-your-answer { margin-top: 0.4rem; }
.tlv-form-actions, .tlv-start-form { margin: 0.75rem 0 1rem; }
.tlv-flash { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.35rem; background: var(--ed-success-bg); color: var(--ed-body-text); }
@media (max-width: 640px) {
.tlv-tab { flex: 1 1 auto; justify-content: center; }
.tlv-question-part { margin-left: 0.25rem; }
}
/* u213_723 — Topic Learning review (/teacher/topic-learning-review.php; Phases 62-64).
Token colors only. */
.tlr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; }
.tlr-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ed-muted-text); margin: 0.5rem 0 0.2rem; }
.tlr-field { width: 100%; max-width: 100%; }
.tlr-filters, .tlr-actions, .tlr-record { margin-bottom: 0.75rem; }
.tlr-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.tlr-form { display: inline-block; margin: 0.25rem 0.25rem 0.25rem 0; }
.tlr-edit .tlr-form { display: block; }
.tlr-edit { border-top: 1px solid var(--ed-border); margin-top: 0.5rem; padding-top: 0.4rem; }
.tlr-edit summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ed-primary); min-height: 2rem; display: flex; align-items: center; }
.tlr-edit summary:focus-visible { outline: 2px solid var(--ed-primary); outline-offset: 2px; }
.tlr-part { margin-left: 1rem; }
.tlr-section { margin-bottom: 1.25rem; }
.tlr-h2 { font-size: 1.05rem; font-weight: 800; color: var(--ed-heading); margin: 0 0 0.5rem; }
.tlr-h3 { font-size: 0.95rem; font-weight: 700; color: var(--ed-heading); margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.tlr-versions, .tlr-list { margin: 0.2rem 0; padding-left: 1rem; list-style: disc; font-size: 0.85rem; color: var(--ed-body-text); }
.tlr-table-wrap { overflow-x: auto; }
.tlr-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.tlr-table th { text-align: left; color: var(--ed-muted-text); font-weight: 700; padding: 0.35rem; border-bottom: 1px solid var(--ed-border); }
.tlr-table td { padding: 0.35rem; border-bottom: 1px solid var(--ed-border); color: var(--ed-body-text); vertical-align: top; }
.tlr-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.85rem; }
.tlr-flash { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.35rem; color: var(--ed-body-text); }
.tlr-flash-ok { background: var(--ed-success-bg); }
.tlr-flash-err { background: var(--ed-danger-bg); }
.tlr-preview-banner { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 0.35rem; background: var(--ed-info-bg); color: var(--ed-body-text); font-size: 0.875rem; }
/* Dual-Path Book Integration blueprint, Phase 186 — the Book import / debug center tables stack into label / value cards on
phones (the browser harness found every one of them overflowing a 390 px viewport). Scoped to .bi-table; every cell already
carries data-label. Long tokens (hashes, correlation ids, codes) wrap instead of widening the page. */
.bi-table td, .bi-table th { overflow-wrap: anywhere; word-break: break-word; }
.bi-table input, .bi-table select, .bi-table textarea { max-width: 100%; }
@media (max-width: 767px) {
.bi-table, .bi-table tbody, .bi-table tr { display: block; width: 100%; }
.bi-table thead { display: none; }
.bi-table caption { display: block; text-align: left; padding: 0.25rem 0; }
.bi-table tbody tr { border: 1px solid var(--ed-border); border-radius: 0.75rem; margin-bottom: 0.75rem; overflow: hidden; background: var(--ed-card-bg); }
.bi-table tbody td { display: grid; grid-template-columns: minmax(5.5rem, 35%) minmax(0, 1fr); gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; text-align: left; }
.bi-table tbody td::before { content: attr(data-label); font-size: 0.75rem; font-weight: 700; color: var(--ed-muted-text); text-transform: uppercase; letter-spacing: 0.03em; }
.bi-table tbody td[colspan] { display: block; }
.bi-table tbody td[colspan]::before { content: none; }
.bi-table tbody th[scope="row"], .bi-table tbody th[scope="rowgroup"] { display: block; padding: 0.5rem 0.75rem 0; text-align: left; }
.bi-table tbody th[scope="row"] + td { display: block; }
.bi-table tbody th[scope="row"] + td::before { content: none; }
}
.bi-pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
|