/* ============================================================================
site-refresh.css · Site-refresh v1.1.0
(c) Britt Innovations Inc., Monsieur Britt
Universal visual layer for brittinnovations.ca (FSL + /math/).
Applied with two edits per page: one in , one data-skin on
(plus data-grade on the five FSL grade pages). It changes the look,
never the logic.
Design contract (read before editing this file):
1. Everything heavy is scoped under body[data-skin="..."], so a page with
no skin attribute is never affected.
2. We do NOT set global rules on img, svg, canvas, or td backgrounds.
Those repaint manipulatives, illustrations, heatmap cells, and SVG
maps. The brief calls this out repeatedly; honour it.
3. We do NOT add transitions or transforms to .card, .flashcard,
.memory-card, or timer displays. Those fight rotateY flips and make
clocks look slow.
4. We never touch user-select, and we never un-hide .gamification-bar.
5. No em dashes anywhere in this file (project style rule).
Section map:
1 Font loading
2 Design tokens (:root)
3 Per-skin accent + surface tokens
4 Grade tints (G4 to G8)
5 Base layer (typography, links, buttons, inputs, tables, cards)
6 Skin surfaces (backgrounds and headers per skin)
7 Pattern library (.x-* opt-in classes)
8 Decorations (.x-flag, .x-stamp, .x-tape, .x-divider, .x-decor-*)
9 Utilities (.u-*)
10 Grade-page hooks (student-hub internal class system, brief section 14)
11 Activity-screen overrides (brief section 15)
12 Reduced motion + print
============================================================================ */
/* ---- 1 · Font loading -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Fraunces:opsz,wght@9..144,400..700&family=DM+Serif+Display&display=swap');
/* ---- 2 · Design tokens ------------------------------------------------- */
:root {
/* ink + paper colour story */
--ink: #0F0E0C;
--ink-2: #3a382f;
--ink-soft: #6b675b;
--paper: #FAF7F2;
--paper-2: #FFFFFF;
--paper-3: #F1ECE2;
--line: #e4ddcf;
--line-2: #d3cab6;
/* status colours (shared across skins) */
--good: #1f9d57;
--good-bg: #e7f6ec;
--bad: #d83a3a;
--bad-bg: #fbe9e9;
--warn: #d98a17;
--warn-bg: #fbf1dd;
/* accent defaults to activity blue; each skin overrides below */
--accent: #2f6df0;
--accent-ink: #11203f;
--accent-soft: #e6eefc;
--on-accent: #ffffff;
/* type families */
--font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-editorial: 'DM Serif Display', Georgia, serif;
/* radii */
--r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; --r-5: 22px; --r-pill: 999px;
/* shadows */
--sh-soft: 0 1px 2px rgba(15,14,12,.06), 0 2px 8px rgba(15,14,12,.05);
--sh-card: 0 6px 22px rgba(15,14,12,.10);
--sh-hard: 4px 4px 0 var(--ink);
--sh-hard-lg: 8px 8px 0 var(--ink);
/* motion + spacing */
--ease: cubic-bezier(.2,.7,.2,1);
--dur: 200ms;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;
}
/* ---- 3 · Per-skin accent + surface tokens ------------------------------ */
/* Each skin only re-points the accent and a couple of surface tokens. The
base layer in section 5 reads these, so we keep the rules DRY. */
body[data-skin="student-hub"] {
--accent: #e6427e; --accent-ink: #7a1340; --accent-soft: #fce4ef; --on-accent: #fff;
--skin-radius: var(--r-4);
}
body[data-skin="student-activity"] {
--accent: #2f6df0; --accent-ink: #11203f; --accent-soft: #e6eefc; --on-accent: #fff;
--skin-radius: var(--r-3);
}
body[data-skin="student-arcade"] {
--accent: #ffb020; --accent-ink: #ffd98a; --accent-soft: #2a2410; --on-accent: #1a1a1a;
--ink: #f4f1e8; --paper: #14130f; --paper-2: #1d1b15; --paper-3: #26241c;
--line: #38342a; --line-2: #4a4538; --ink-soft: #b8b2a0;
--skin-radius: var(--r-2);
}
body[data-skin="student-daily"] {
--accent: #7c5cff; --accent-ink: #36237a; --accent-soft: #ece7ff; --on-accent: #fff;
--skin-radius: var(--r-4);
}
body[data-skin="teacher-pro"] {
--accent: #2563c9; --accent-ink: #143057; --accent-soft: #e7eefa; --on-accent: #fff;
--skin-radius: var(--r-1);
}
body[data-skin="reference"] {
--accent: #138a86; --accent-ink: #0c4f4c; --accent-soft: #e1f2f1; --on-accent: #fff;
--skin-radius: var(--r-2);
}
body[data-skin="form"] {
--accent: #2b2b2b; --accent-ink: #000; --accent-soft: #eee; --on-accent: #fff;
--skin-radius: var(--r-1);
}
body[data-skin="lockdown"] {
--accent: #e3433f; --accent-ink: #ffb3b1; --accent-soft: #2a1413; --on-accent: #fff;
--ink: #f2ece8; --paper: #15100f; --paper-2: #1d1614; --paper-3: #251b19;
--line: #3a2b28; --line-2: #4d3a36; --ink-soft: #c0b3ae;
--skin-radius: var(--r-1);
}
/* ---- 4 · Grade tints (FSL grade pages only) ---------------------------- */
/* Only re-points --accent so the hub skin re-tones by year. G4 rose to G8
mint. Applied alongside data-skin="student-hub". */
body[data-grade="4"] { --accent: #e85d8a; --accent-ink: #7c1b41; --accent-soft: #fce1ea; }
body[data-grade="5"] { --accent: #f0a426; --accent-ink: #7c5410; --accent-soft: #fdefd6; }
body[data-grade="6"] { --accent: #3aa0e6; --accent-ink: #134a72; --accent-soft: #def0fc; }
body[data-grade="7"] { --accent: #8a6cf0; --accent-ink: #3c2a78; --accent-soft: #ece5fd; }
body[data-grade="8"] { --accent: #2bbf9e; --accent-ink: #0f5e4c; --accent-soft: #d9f5ee; }
/* ============================================================================
5 · Base layer
All scoped to [data-skin] so unskinned pages are untouched. We unify body
background, typography, and the common interactive primitives. We avoid
img/svg/canvas/td-background rules entirely.
============================================================================ */
body[data-skin] {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body[data-skin] h1,
body[data-skin] h2,
body[data-skin] h3,
body[data-skin] h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
/* Links pick up the accent but only when the page did not already paint them
a specific colour through an inline style attribute. */
body[data-skin] a:not([style*="color"]) { color: var(--accent-ink); }
/* Buttons: a gentle, consistent treatment. We do not set width or display so
we never reflow a page's layout. Pages that fully style their own buttons
with higher specificity keep their look. */
body[data-skin] button,
body[data-skin] .btn,
body[data-skin] input[type="button"],
body[data-skin] input[type="submit"] {
font-family: var(--font-body);
font-weight: 700;
cursor: pointer;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
body[data-skin] button:not([class]),
body[data-skin] input[type="submit"]:not([class]) {
background: var(--accent);
color: var(--on-accent);
border: 0;
border-radius: var(--skin-radius, var(--r-2));
padding: 10px 18px;
font-size: .98rem;
}
body[data-skin] button:not(:disabled):hover { transform: translateY(-1px); }
body[data-skin] button:not(:disabled):active { transform: translateY(0); }
body[data-skin] button:disabled { opacity: .55; cursor: not-allowed; }
/* Inputs and selects: keep them legible with a clear focus ring. We do not
force a background so dark skins and custom palettes stay intact. */
body[data-skin] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body[data-skin] select,
body[data-skin] textarea {
font-family: var(--font-body);
color: inherit;
}
body[data-skin] input:focus-visible,
body[data-skin] select:focus-visible,
body[data-skin] textarea:focus-visible,
body[data-skin] button:focus-visible,
body[data-skin] a:focus-visible {
outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
/* Generic .card: only the ones that are literally class="card". We add border,
radius and a soft shadow. We never add transitions here (flip cards use the
same class on some pages). */
body[data-skin] .card {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--skin-radius, var(--r-3));
box-shadow: var(--sh-soft);
}
/* Tables: thin borders and a subtle header. We set a header background only on
th, never on td, so heatmap cells that paint their own td background are
safe. */
body[data-skin] table { border-collapse: collapse; }
body[data-skin] table th {
font-family: var(--font-body);
font-weight: 700;
text-align: left;
border-bottom: 2px solid var(--line-2);
}
body[data-skin] table td { border-bottom: 1px solid var(--line); }
/* Code and curriculum chips stay mono. */
body[data-skin] code,
body[data-skin] kbd,
body[data-skin] .u-mono { font-family: var(--font-mono); }
/* Selection colour follows the accent. */
body[data-skin] ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* ============================================================================
6 · Skin surfaces
Per-skin background and the editorial / dark treatments. Kept light so we
harmonize without erasing each page's identity.
============================================================================ */
/* student-hub: warm paper with a faint accent wash at the top. */
body[data-skin="student-hub"] {
background:
radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
var(--paper);
background-attachment: fixed;
}
/* student-arcade + lockdown: dark canvas. The token overrides in section 3
already flipped ink and paper, so the base layer paints dark automatically.
We add a faint vignette for depth. */
body[data-skin="student-arcade"],
body[data-skin="lockdown"] {
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
var(--paper);
background-attachment: fixed;
}
/* student-daily: calm violet wash. */
body[data-skin="student-daily"] {
background:
radial-gradient(120% 55% at 50% -5%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
var(--paper);
background-attachment: fixed;
}
/* reference: library feel with a serif body and a narrower measure. We set the
serif on body text but keep headings in the display face. The measure is
applied to only if a page has one. */
body[data-skin="reference"] { font-family: var(--font-serif); }
body[data-skin="reference"] p,
body[data-skin="reference"] li { line-height: 1.7; }
body[data-skin="reference"] main { max-width: 760px; margin-inline: auto; }
/* form: clean official document on white. */
body[data-skin="form"] { background: var(--paper-2); }
body[data-skin="form"] main { max-width: 820px; margin-inline: auto; }
/* teacher-pro: dense and professional, denser line-height. */
body[data-skin="teacher-pro"] { background: var(--paper-3); }
body[data-skin="teacher-pro"] table { font-size: .92rem; }
/* ============================================================================
7 · Pattern library (.x-* opt-in)
These do nothing unless a page opts in by adding the class. Safe to ship.
============================================================================ */
.x-progress { display: block; height: 10px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.x-progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }
.x-progress[data-style="stepped"] { background: repeating-linear-gradient(90deg, var(--paper-3) 0 18px, var(--paper-2) 18px 20px); }
.x-hearts { display: inline-flex; gap: 6px; }
.x-hearts > span { font-size: 1.1rem; line-height: 1; }
.x-hearts > span.is-lost { filter: grayscale(1); opacity: .35; }
.x-streak { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.x-xp { display: inline-flex; align-items: baseline; gap: 6px; }
.x-xp > b { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-ink); }
.x-xp > em { font-style: normal; color: var(--ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.x-timer { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-pill); border: 2px solid var(--line-2); font-family: var(--font-mono); font-weight: 700; }
.x-timer[data-warn="true"] { border-color: var(--warn); color: var(--warn); }
.x-timer[data-danger="true"] { border-color: var(--bad); color: var(--bad); }
.x-prompt { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--skin-radius, var(--r-3)); padding: 18px 20px; box-shadow: var(--sh-soft); line-height: 1.55; }
.x-prompt[data-eyebrow]::before { content: attr(data-eyebrow); display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 8px; }
.x-choices { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .x-choices { grid-template-columns: 1fr; } }
.x-choice { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--paper-2); border: 2px solid var(--line); border-radius: var(--skin-radius, var(--r-3)); padding: 14px 16px; font-weight: 600; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.x-choice:hover { transform: translateY(-2px); border-color: var(--accent); }
.x-choice[data-letter]::before { content: attr(data-letter); flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-weight: 700; }
.x-choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.x-choice[data-state="correct"] { border-color: var(--good); background: var(--good-bg); }
.x-choice[data-state="wrong"] { border-color: var(--bad); background: var(--bad-bg); }
.x-stat { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 14px 16px; }
.x-stat__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.x-stat__value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.x-stat__delta { font-size: .82rem; font-weight: 700; }
.x-stat__delta[data-dir="up"] { color: var(--good); }
.x-stat__delta[data-dir="down"] { color: var(--bad); }
.x-toast { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-2); background: var(--ink); color: var(--paper); box-shadow: var(--sh-card); font-weight: 600; }
.x-toast[data-tone="success"] { background: var(--good); }
.x-toast[data-tone="error"] { background: var(--bad); }
.x-empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.x-empty__glyph { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.x-skel { display: block; border-radius: var(--r-1); background: linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 37%, var(--paper-3) 63%); background-size: 400% 100%; animation: x-skel 1.4s ease infinite; }
@keyframes x-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.x-celebration { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
/* ---- 8 · Decorations --------------------------------------------------- */
.x-flag { display: inline-block; padding: 3px 10px 3px 14px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
.x-stamp { display: inline-block; transform: rotate(-8deg); border: 2px solid var(--accent); color: var(--accent); border-radius: var(--r-1); padding: 4px 10px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.x-tape { position: relative; }
.x-tape::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 120px; height: 22px; background: color-mix(in srgb, var(--warn) 55%, transparent); box-shadow: var(--sh-soft); }
.x-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.x-divider::before, .x-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.x-decor-dots { background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 16px 16px; }
.x-decor-rule { background-image: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px); }
.x-decor-grain { position: relative; }
.x-decor-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* ---- 9 · Utilities ----------------------------------------------------- */
.u-stack-2 > * + * { margin-top: var(--s-2); }
.u-stack-4 > * + * { margin-top: var(--s-4); }
.u-stack-6 > * + * { margin-top: var(--s-6); }
.u-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.u-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.u-mono { font-family: var(--font-mono); }
.u-muted { color: var(--ink-soft); }
.u-center { text-align: center; }
.u-hide-print { }
/* ============================================================================
10 · Grade-page hooks (brief section 14)
The five FSL grade pages carry data-skin="student-hub" and use a large
internal 391-class design system. We re-tone a handful of those classes
around each page's existing :root vars, scoped to student-hub so nothing
leaks. We never touch .gamification-bar (kept hidden) or .confetti-container
(the page fires its own). Surgical !important is used only against inline
styles, and only inside this scope.
============================================================================ */
body[data-skin="student-hub"] .container { max-width: 1100px; }
body[data-skin="student-hub"] .day-card {
border-radius: var(--r-4);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body[data-skin="student-hub"] .day-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
body[data-skin="student-hub"] .day-card-title { font-family: var(--font-display); }
body[data-skin="student-hub"] .selection-grid { gap: 16px; }
/* Bonus-tools pill bar and similar inline-styled link rows: gentle rounding.
We only round and space, we do not recolour, so per-grade palettes survive. */
body[data-skin="student-hub"] .btn-primary,
body[data-skin="student-hub"] .btn-success,
body[data-skin="student-hub"] .btn-warning,
body[data-skin="student-hub"] .btn-danger {
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
}
body[data-skin="student-hub"] .login-container,
body[data-skin="student-hub"] .selection-screen { font-family: var(--font-body); }
/* ============================================================================
11 · Activity-screen overrides (brief section 15)
Inner-activity classes rendered by grade pages (student-hub) and reused by
standalone activity pages (student-activity). We style colour, border and
state only. We never add transform or transition to flashcard / memory-card
so rotateY flips keep working.
============================================================================ */
body[data-skin="student-hub"] .nav-tabs,
body[data-skin="student-activity"] .nav-tabs { gap: 6px; border-bottom: 1px solid var(--line); }
body[data-skin="student-hub"] .nav-tab,
body[data-skin="student-activity"] .nav-tab { border-radius: var(--r-2) var(--r-2) 0 0; font-weight: 700; }
body[data-skin="student-hub"] .quiz-question,
body[data-skin="student-activity"] .quiz-question { font-family: var(--font-display); }
body[data-skin="student-hub"] .quiz-option,
body[data-skin="student-activity"] .quiz-option {
border: 2px solid var(--line);
border-radius: var(--r-3);
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
body[data-skin="student-hub"] .quiz-option:hover,
body[data-skin="student-activity"] .quiz-option:hover { border-color: var(--accent); }
body[data-skin="student-hub"] .quiz-option.selected,
body[data-skin="student-activity"] .quiz-option.selected { border-color: var(--accent); background: var(--accent-soft); }
body[data-skin="student-hub"] .quiz-option.correct,
body[data-skin="student-activity"] .quiz-option.correct { border-color: var(--good); background: var(--good-bg); }
body[data-skin="student-hub"] .quiz-option.incorrect,
body[data-skin="student-activity"] .quiz-option.incorrect { border-color: var(--bad); background: var(--bad-bg); }
body[data-skin="student-hub"] .completion-card,
body[data-skin="student-activity"] .completion-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); }
body[data-skin="student-hub"] .completion-blank,
body[data-skin="student-activity"] .completion-blank { border-bottom: 2px solid var(--accent); }
body[data-skin="student-hub"] .dialogue-box,
body[data-skin="student-activity"] .dialogue-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); }
body[data-skin="student-hub"] .listening-card,
body[data-skin="student-activity"] .listening-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); }
body[data-skin="student-hub"] .listening-word-item.correct,
body[data-skin="student-activity"] .listening-word-item.correct { color: var(--good); }
body[data-skin="student-hub"] .listening-word-item.incorrect,
body[data-skin="student-activity"] .listening-word-item.incorrect { color: var(--bad); }
body[data-skin="student-hub"] .match-item.selected,
body[data-skin="student-activity"] .match-item.selected { border-color: var(--accent); background: var(--accent-soft); }
body[data-skin="student-hub"] .match-item.matched,
body[data-skin="student-activity"] .match-item.matched { border-color: var(--good); background: var(--good-bg); }
/* flashcard / memory-card: colour and border only. No transform, no transition,
because the page owns the flip animation. */
body[data-skin="student-hub"] .flashcard-front,
body[data-skin="student-activity"] .flashcard-front { background: var(--paper-2); border: 1px solid var(--line); }
body[data-skin="student-hub"] .flashcard-back,
body[data-skin="student-activity"] .flashcard-back { background: var(--accent-soft); border: 1px solid var(--line); }
body[data-skin="student-hub"] .progress-bar,
body[data-skin="student-activity"] .progress-bar { background: var(--paper-3); border-radius: var(--r-pill); }
body[data-skin="student-hub"] .progress-fill,
body[data-skin="student-activity"] .progress-fill { background: var(--accent); border-radius: inherit; }
body[data-skin="student-hub"] .feedback-correct,
body[data-skin="student-activity"] .feedback-correct { color: var(--good); }
body[data-skin="student-hub"] .feedback-incorrect,
body[data-skin="student-activity"] .feedback-incorrect { color: var(--bad); }
body[data-skin="student-hub"] .expression-card,
body[data-skin="student-activity"] .expression-card,
body[data-skin="student-hub"] .fact-card,
body[data-skin="student-activity"] .fact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3); }
/* ============================================================================
12 · Reduced motion + print
============================================================================ */
@media (prefers-reduced-motion: reduce) {
body[data-skin] *,
.x-progress > i,
.x-skel { animation: none !important; transition: none !important; }
}
@media print {
body[data-skin] { background: #fff !important; }
.u-hide-print,
.x-celebration,
.x-toast { display: none !important; }
/* form + reference pages should print as clean documents */
body[data-skin="form"],
body[data-skin="reference"] { color: #000; }
}