/* ===================================================================== * ET+ AI Tutor — UX upgrade stylesheet (2026-05-16) * * Mobile-responsive + WCAG 2.1 AA accessibility polish + tutor-action * bar styling. Layered on top of the existing style.css; nothing here * overrides core layout outside its scoped selectors. * * Sections: * 1. Tutor action bar mobile breakpoint * 2. Focus rings (a11y) * 3. prefers-reduced-motion * 4. prefers-contrast: more * 5. data-a11y-large-text + data-a11y-reduce-motion (preferences) * 6. Dashboard CTA mobile reflow * 7. Drafts panel responsive * ===================================================================== */ /* 1. Tutor action bar — wrap chips below 600px so they don't push off-screen. */ @media (max-width: 600px) { #etp-tutor-actions { flex-direction: column; align-items: stretch !important; gap: 6px !important; } #etp-tutor-actions button { width: 100%; } #etp-tutor-actions span { text-align: center; } } /* 2. Visible focus ring on every interactive ET+ UX element. Replaces the * UA default outline with a brand-coloured ring that meets WCAG 2.4.7 * (3:1 contrast against the surface, 2px thick). */ #etp-tutor-actions button:focus-visible, [data-etp-quota-history] :focus-visible, [data-etp-drafts] :focus-visible, [data-etp-preferences-form] :focus-visible, [data-etp-today-cta] :focus-visible, #etp-ux-toast:focus-visible { outline: 2px solid #A5B4FC !important; outline-offset: 2px; border-radius: 6px; } /* Tutor-wide interaction affordance. Several late-mounted controls (session * drawer actions, Teaching Assistant scaffolds, attachment/voice buttons) * use inline base styles and previously had no hover state of their own. * Scope this ring to the Tutor stage so every interactive control has a * consistent pointer affordance without changing other standalone pages. */ body[data-etp-stage] button:not(:disabled):hover, body[data-etp-stage] a[href]:hover, body[data-etp-stage] select:hover, body[data-etp-stage] input:not([type="hidden"]):hover, body[data-etp-stage] textarea:hover { box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.72); } /* 3. Honour the OS reduced-motion preference globally — no animations, * no transitions, no decorative orbs. Critical for vestibular-disorder * users (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } #etp-ux-toast { transition: none !important; } } /* 4. High-contrast mode — bumps every faint surface to a pure-black / * pure-white border. Triggers on Windows High Contrast + on user-pref * via prefers-contrast: more. */ @media (prefers-contrast: more) { [data-etp-quota-history] table td, [data-etp-drafts] li, [data-etp-preferences-form] select, [data-etp-preferences-form] input[type="checkbox"] { border-color: #fff !important; } [data-etp-today-cta] > div { border-color: #fff !important; background: #000 !important; } } /* 5. data-a11y-* — driven by Preferences.save (Item 12 → 9). The user's * saved preferences set these attributes on so the CSS rules * apply across every page automatically. */ html[data-a11y-large-text="true"] body { font-size: 18px; line-height: 1.65; } html[data-a11y-large-text="true"] .sidebar-nav__item, html[data-a11y-large-text="true"] .btn, html[data-a11y-large-text="true"] input, html[data-a11y-large-text="true"] select { font-size: 16px !important; } html[data-a11y-reduce-motion="true"] *, html[data-a11y-reduce-motion="true"] *::before, html[data-a11y-reduce-motion="true"] *::after { animation: none !important; transition: none !important; } /* 6. "What's teaching today?" CTA — mobile: chips wrap, hero pads tighter. */ @media (max-width: 640px) { [data-etp-today-cta] > div { padding: 14px !important; } [data-etp-today-cta] h2 { font-size: 17px !important; } } /* 7. Drafts panel — drop the per-row Open + Share buttons under the title * on narrow screens so the title gets its full width. */ @media (max-width: 560px) { [data-etp-drafts] li { flex-direction: column; align-items: stretch !important; gap: 8px !important; } [data-etp-drafts] li > div:last-child { justify-content: flex-end; } } /* 8. Toast — ensure it stays readable on tiny screens. */ @media (max-width: 380px) { #etp-ux-toast { left: 12px !important; right: 12px !important; transform: none !important; text-align: center; } } /* ========================================================================== 9. Theme picker — light + dark + high-contrast (Item 9, 2026-05-18) ========================================================================== Default theme is the existing dark (no data-etp-theme attr / or data-etp-theme="dark" / "auto"). Light + high-contrast override the small set of CSS variables that drive bg + surface + text + border. Accent + grade-band colours stay constant across themes so brand recognition is preserved. */ html[data-etp-theme="light"] { --bg: #f4fafc; --bg2: #ebf4f7; --bg3: #e0eef2; --surface: #ffffff; --surface2: #f8fcfd; --surface3: #eef6f9; --border: rgba(0, 91, 116, 0.10); --border2: rgba(0, 91, 116, 0.18); --border3: rgba(0, 91, 116, 0.28); --text: #0a2230; --text2: #2d5a6c; --text3: #6b8a99; --text-inverse: #ffffff; --shadow-sm: 0 1px 3px rgba(0, 60, 80, 0.10); --shadow: 0 4px 14px rgba(0, 60, 80, 0.12); --shadow-lg: 0 8px 32px rgba(0, 60, 80, 0.16); --shadow-xl: 0 16px 48px rgba(0, 60, 80, 0.20); } html[data-etp-theme="high-contrast"] { --bg: #000000; --bg2: #000000; --bg3: #0a0a0a; --surface: #0a0a0a; --surface2: #141414; --surface3: #1e1e1e; --border: #ffffff; --border2: #ffffff; --border3: #ffe100; --text: #ffffff; --text2: #ffffff; --text3: #f5f5f5; --text-inverse: #000000; --accent: #ffe100; --info: #ffffff; --success: #00ff00; --error: #ff5555; --warning: #ffe100; --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-xl: none; } /* High-contrast: stronger focus rings everywhere. */ html[data-etp-theme="high-contrast"] :focus-visible { outline: 3px solid #ffe100 !important; outline-offset: 2px !important; } /* Picker widget — three pill buttons mounted into the chrome. */ .etp-theme-picker { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; } .etp-theme-picker button { appearance: none; background: transparent; border: 0; padding: 4px 10px; border-radius: 999px; color: var(--text2); cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase; transition: background var(--duration, 200ms) var(--ease, ease), color var(--duration, 200ms) var(--ease, ease); } .etp-theme-picker button:hover { color: var(--text); background: rgba(0, 229, 255, 0.06); } .etp-theme-picker button[aria-pressed="true"] { background: var(--accent); color: var(--text-inverse); font-weight: 600; } html[data-etp-theme="light"] .etp-theme-picker { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.10); } html[data-etp-theme="high-contrast"] .etp-theme-picker { background: #000; border-color: #fff; } /* =================================================================== 10. Conversation typography + typing-bob (Wave-B Items 2 + 3) =================================================================== Goals: * Tutor and student messages instantly distinguishable by shape + alignment (left-bar = speaker, right-bubble = me). * Assistant replies prefer airy 1.65 leading + soft italic on the / emphasis so they read like a person speaking, not a database emitting JSON. * Typing indicator dots bob gently (not the harsh blink most chat UIs use) — feels like the tutor is "thinking." */ /* Tutor reply card — frosted, left-aligned, primary-coloured left-bar. */ .message--tutor { align-self: flex-start; max-width: 86%; margin: 8px 12px; padding: 12px 16px 14px 18px; background: rgba(13, 43, 58, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--border, rgba(0, 229, 255, 0.10)); border-left: 3px solid var(--accent, #00E5FF); border-radius: 4px 14px 14px 14px; box-shadow: var(--shadow-sm); } .message--tutor .message__content { color: var(--text, #e8f4fd); font-size: 15px; line-height: 1.65; letter-spacing: 0.005em; } .message--tutor .message__content em, .message--tutor .message__content strong { font-style: italic; font-weight: 600; color: var(--accent, #00E5FF); } .message--tutor .message__content strong { font-style: normal; } .message--tutor .message__content p + p { margin-top: 0.75em; } .message--tutor .message__content code { font-family: var(--font-mono, 'JetBrains Mono', monospace); background: rgba(0, 229, 255, 0.07); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; } .message--tutor .message__content pre { background: rgba(0, 0, 0, 0.25); padding: 10px 14px; border-radius: 8px; overflow-x: auto; margin: 8px 0; border: 1px solid rgba(255, 255, 255, 0.05); } .message--tutor .message__content pre code { background: transparent; padding: 0; } /* Student message — right-aligned translucent bubble. */ .message--student { align-self: flex-end; max-width: 80%; margin: 8px 12px; padding: 10px 14px; background: linear-gradient(135deg, rgba(124, 106, 250, 0.18), rgba(99, 102, 241, 0.10)); border: 1px solid rgba(124, 106, 250, 0.30); border-radius: 14px 4px 14px 14px; color: var(--text, #e8f4fd); font-size: 15px; line-height: 1.55; } /* Both speaker types get a tiny timestamp underneath. */ .message__time { font-size: 10px; color: var(--text3, #5c99b3); margin-top: 4px; letter-spacing: 0.03em; } /* Item 3 — typing indicator with soft bob (not the blink that most chat UIs ship). The visual difference is small but felt. */ #typing-indicator, .typing-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; background: rgba(13, 43, 58, 0.45); border: 1px solid var(--border, rgba(0, 229, 255, 0.10)); margin: 8px 12px; align-self: flex-start; } .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #00E5FF); animation: etp-typing-bob 0.9s ease-in-out infinite; } .typing-dot:nth-child(2) { animation-delay: 0.15s; } .typing-dot:nth-child(3) { animation-delay: 0.30s; } @keyframes etp-typing-bob { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .typing-dot { animation: none; opacity: 0.7; } .etp-face .etp-mouth { transition: none !important; } .etp-face .etp-face-eyes { transition: none !important; } } /* Item 1 avatar — sit at the top of the tutor header. */ [data-etp-avatar] { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-right: 12px; } /* High-contrast theme — flatten avatar gradient, lose backdrop blur. */ html[data-etp-theme="high-contrast"] .message--tutor { background: #000; border-left-color: #fff; border-left-width: 4px; } html[data-etp-theme="high-contrast"] .message--tutor .message__content em, html[data-etp-theme="high-contrast"] .message--tutor .message__content strong { color: #ffe100; } html[data-etp-theme="light"] .message--tutor { background: #ffffff; border-color: rgba(0, 91, 116, 0.10); border-left-color: var(--accent); box-shadow: 0 1px 3px rgba(0, 60, 80, 0.08); } html[data-etp-theme="light"] .message--student { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.20); } /* =================================================================== 11. Wave-C Item 11 — Material restraint theme ("instructor's office") =================================================================== Picked by setting data-etp-theme="material" on . Calm + soft; no glow. Designed for the "looks like a colleague's tablet" feel. */ html[data-etp-theme="material"] { --bg: #f6f4ee; /* warm off-white */ --bg2: #f1eee5; --bg3: #ebe7dc; --surface: #ffffff; --surface2: #fbf9f4; --surface3: #f3f1ea; --border: rgba(74, 60, 41, 0.08); --border2: rgba(74, 60, 41, 0.16); --border3: rgba(74, 60, 41, 0.26); --text: #2a241a; --text2: #574a3a; --text3: #8a7e6c; --text-inverse: #ffffff; --accent: var(--tenant-accent, #6b4ea8); /* tenant brand if set */ --primary-band: var(--accent); --shadow-sm: 0 1px 2px rgba(74, 60, 41, 0.06); --shadow: 0 4px 12px rgba(74, 60, 41, 0.08); --shadow-lg: 0 8px 28px rgba(74, 60, 41, 0.10); } html[data-etp-theme="material"] .message--tutor { background: #ffffff; backdrop-filter: none; border: 1px solid var(--border, rgba(74,60,41,0.10)); border-left: 3px solid var(--accent); box-shadow: var(--shadow-sm); } html[data-etp-theme="material"] .message--tutor .message__content em, html[data-etp-theme="material"] .message--tutor .message__content strong { color: var(--accent); } html[data-etp-theme="material"] .message--student { background: rgba(107, 78, 168, 0.06); border-color: rgba(107, 78, 168, 0.16); } html[data-etp-theme="material"] #typing-indicator { background: rgba(0, 0, 0, 0.03); border-color: var(--border, rgba(74,60,41,0.10)); } /* =================================================================== 12. Wave-C Item 12 — Margin notes pattern =================================================================== The tutor wraps misconception / worked-example callouts inside