/* Source style block: block-1 */ /* ============================================================ STYLE ORGANIZATION MAP ------------------------------------------------------------ Order is intentional and should stay like this: A) Base / desktop-first component styles. B) Large-screen PC rules. C) Tablet rules. D) Small-tablet / wide-mobile rules. E) Phone/mobile rules. F) Reduced-motion accessibility rules. Notes: - No full-file JavaScript or HTML is included here. This is style only. - Supervised buttons have their own controls and do not share the mobile normal-lesson sub-button engine. - Arabic and French supervised mobile title widths are separated inside the mobile section so centering is preserved. ============================================================ */ /* ============================================================ 0) FIRST-PAINT LAYOUT STABILITY m1_math now uses the same hardcoded-component behavior as index/m1: no empty-slot shimmer, no sidebar min-height reservation, and no artificial scroll-height growth during refresh. ============================================================ */ /* Mobile performance guard: phones do not need hover lift work. */ @media (hover: none), (pointer: coarse) { .content-area .lesson-block:hover, .content-area .lesson-block:focus-within, .content-area .res-item:hover, .content-area .res-item:focus-within, .content-area .lesson-links .res-toggle:hover, .content-area .lesson-links .res-toggle:focus { transform: none !important; } } /* ============================================================ 1) THEME VARIABLES / DESIGN TOKENS Root values for colors, radii, shadows, sizing, and reusable spacing. ============================================================ */ .content-area { --bg-soft: rgba(var(--accent-rgb), 0.05); --bd-soft: rgba(var(--accent-rgb), 0.28); --surface: #ffffff; --card-bd: rgba(var(--accent-rgb), 0.18); --accent: #ff9800; --accent-600: #e65100; --accent-300: #ffb74d; --accent-rgb: 255, 152, 0; --accent-600-rgb: 230, 81, 0; --accent-300-rgb: 255, 183, 77; --txt-900: #0f172a; --txt-700: #334155; --txt-600: #64748b; --crumb-fg: #64748b; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px; --shadow-sm: 0 2px 8px rgba(var(--accent-rgb), 0.05); --shadow-accent: 0 8px 20px rgba(var(--accent-rgb), 0.12), 0 0 0 1px rgba(var(--accent-rgb), 0.18); --shadow-accent-strong: 0 8px 20px rgba(var(--accent-300-rgb), 0.18), 0 0 0 1px rgba(var(--accent-300-rgb), 0.28); --links-cols: 4; --links-gap: 10px; --links-minh: 38px; --res-cols: 2; --res-gap: 16px; --les-scale: 1; --les-card-radius: calc(14px * var(--les-scale)); --les-card-pad: calc(16px * var(--les-scale)); --les-card-gap: 20px; --les-title-size: calc(18px * var(--les-scale)); --les-title-weight: 800; --les-title-gap: calc(8px * var(--les-scale)); --les-num-h: calc(22px * var(--les-scale)); --les-num-minw: calc(22px * var(--les-scale)); --les-num-border: calc(1.5px * var(--les-scale)); --les-num-radius: calc(7px * var(--les-scale)); --les-num-font: calc(13px * var(--les-scale)); --les-link-font: calc(13px * var(--les-scale)); --les-link-pady: calc(6px * var(--les-scale)); --les-link-padx: calc(8px * var(--les-scale)); --les-link-radius: 10px; --les-link-icon: calc(16px * var(--les-scale)); --les-res-item-pad-y: calc(10px * var(--les-scale)); --les-res-item-pad-x: calc(14px * var(--les-scale)); --les-res-item-font: calc(14px * var(--les-scale)); --sup-btn-minh: var(--links-minh); } html.dark-mode .content-area, body.dark-mode .content-area { --bg-soft: rgba(var(--accent-rgb), 0.08); --bd-soft: rgba(var(--accent-rgb), 0.18); --surface: #0f172a; --card-bd: rgba(var(--accent-rgb), 0.16); --accent: var(--accent); --accent-600: var(--accent-600); --accent-300: var(--accent-600); --accent-rgb: 251, 146, 60; --accent-600-rgb: 253, 186, 116; --accent-300-rgb: 253, 186, 116; --txt-900: #f8fafc; --txt-700: #cbd5e1; --txt-600: #94a3b8; --crumb-fg: #94a3b8; } /* ============================================================ 2) PAGE WRAPPER Main grid wrapper around the subject-page content. ============================================================ */ .content-area .sp-wrapper { display: grid; gap: 20px; } /* ============================================================ 3) BREADCRUMBS Top navigation path: home > level > subject. ============================================================ */ /* ============================================================ 4) HERO CARD Page hero, title, description, and supervised shortcut button. ============================================================ */ .content-area .sp-hero { display: grid; place-items: center; gap: 12px; width: 100%; max-width: none; margin: 0 0 20px; padding: 20px; text-align: center; position: relative; z-index: 0; overflow: visible; border: 1px solid var(--bd-soft); border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.03) 100%), var(--surface); box-shadow: var(--shadow-sm); } .content-area .sp-hero h2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; color: var(--txt-900); font-size: 24px; font-weight: 900; line-height: 1.2; } .content-area .sp-hero h2 i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #ffffff; font-size: 18px; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25); } .content-area .sp-hero p { margin: 0; color: var(--txt-700); font-size: 16px; font-weight: 500; line-height: 1.5; } .content-area .hero-inline-btn { --hero-btn-px: 14px; --hero-btn-pt: 6px; --hero-btn-pb: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: var(--hero-btn-pt) var(--hero-btn-px) var(--hero-btn-pb); border: 2px solid var(--accent); border-radius: 999px; background: rgba(var(--accent-rgb), 0.10); color: var(--accent-600); font-weight: 900; line-height: 1; text-align: center; text-decoration: none; vertical-align: middle; outline: none; box-sizing: border-box; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .content-area .hero-inline-btn:hover { background: var(--accent); color: #ffffff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.30); transform: translateY(-1px); } .dark-mode .content-area .sp-hero { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.03) 100%), #1e293b; border-color: rgba(var(--accent-rgb), 0.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .dark-mode .content-area .sp-hero h2 i { color: #0f172a; } .dark-mode .content-area .hero-inline-btn { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border-color: var(--accent); } .dark-mode .content-area .hero-inline-btn:hover { background: var(--accent); color: #0f172a; box-shadow: 0 4px 15px rgba(var(--accent-300-rgb), 0.35); } /* ============================================================ 5) SECTION AND TERM HEADERS Semester titles, section dividers, and visual term headers. ============================================================ */ .content-area .unit-divider { margin: 4px 0 2px; padding: 10px 14px; border: 1px solid var(--bd-soft); border-radius: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%); color: var(--txt-900); font-size: 16px; font-weight: 900; text-align: center; box-shadow: var(--shadow-sm); } .content-area .unit-divider small { display: block; margin-top: 4px; color: var(--txt-600); font-size: 12px; font-weight: 700; } .dark-mode .content-area .unit-divider { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.05) 100%); border-color: rgba(var(--accent-rgb), 0.22); } .content-area .term-head { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .content-area .term-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--txt-900); font-size: 20px; font-weight: 900; } .content-area .term-title i { color: var(--accent); font-size: 1.1em; } /* ============================================================ 6) TERMS AND LESSON LAYOUT Desktop two-column terms and shared lesson stack structure. ============================================================ */ .content-area .terms-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; width: 100%; min-width: 0; } .content-area .terms-wrap > * { min-width: 0; } .content-area .term-card { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; content-visibility: visible; contain-intrinsic-size: auto; } .content-area.force-supervised-layout .term-card { content-visibility: visible; contain-intrinsic-size: auto; } .content-area.force-supervised-layout #supervised, .content-area.force-supervised-layout #supervised .term-card, .content-area.force-supervised-layout #supervised .lesson-block, .content-area.force-supervised-layout #supervised .res-panel.open { content-visibility: visible !important; contain-intrinsic-size: auto !important; } .content-area .lessons-stack { display: grid; gap: var(--les-card-gap); width: 100%; min-width: 0; } /* ============================================================ 7) LESSON CARDS Individual lesson/supervised card shells and title-number layout. ============================================================ */ .content-area .lesson-block { width: 100%; min-width: 0; padding: var(--les-card-pad); border: 1px solid var(--card-bd); border-radius: var(--les-card-radius); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; overflow: hidden; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .content-area .lesson-block:hover, .content-area .lesson-block:focus-within { background: #fffaf0; border-color: var(--accent); box-shadow: var(--shadow-accent); transform: translateY(-3px); } .content-area .lesson-block.open { border-color: var(--accent); box-shadow: var(--shadow-accent); } .dark-mode .content-area .lesson-block { background: #1e293b; border-color: rgba(var(--accent-rgb), 0.18); } .dark-mode .content-area .lesson-block:hover, .dark-mode .content-area .lesson-block:focus-within, .dark-mode .content-area .lesson-block.open { background: #0f172a; border-color: var(--accent); box-shadow: var(--shadow-accent-strong); } .content-area .lesson-title { display: flex; align-items: center; gap: var(--les-title-gap); margin: 0 0 12px; color: var(--txt-900); font-size: var(--les-title-size); font-weight: var(--les-title-weight); } .content-area .lesson-title .title-text { line-height: 1.3; } .content-area .num-squares { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--les-num-minw); min-width: var(--les-num-minw); height: var(--les-num-h); padding: 0; border: var(--les-num-border) solid var(--accent); border-radius: var(--les-num-radius); background: var(--bg-soft); color: var(--accent); font-size: var(--les-num-font); font-weight: 900; line-height: 1; direction: ltr; text-align: center; vertical-align: middle; box-sizing: border-box; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; transform: translateZ(0); } .content-area .num-squares .sq-digits { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; font-size: inherit; line-height: 1; direction: ltr; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; } /* ============================================================ 8) LESSON ACTION BUTTONS Main resource toggles: lessons, exercises, quizzes, videos. ============================================================ */ .content-area .lesson-links { display: grid; grid-template-columns: repeat(var(--links-cols), minmax(0, 1fr)); gap: var(--links-gap); width: 100%; min-width: 0; margin-bottom: 0; box-sizing: border-box; } .content-area .lesson-links .res-toggle { display: flex; align-items: center; justify-content: center; flex-flow: row nowrap; gap: 6px; inline-size: 100%; min-width: 0; min-block-size: var(--links-minh); padding: var(--les-link-pady) var(--les-link-padx); border: 1px solid var(--card-bd); border-radius: var(--les-link-radius); background: var(--surface); color: var(--txt-700); font-size: calc(var(--les-link-font) + 1px); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .content-area .lesson-links .res-toggle > * { align-self: center; } .content-area .lesson-links .res-toggle i { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); font-size: var(--les-link-icon); line-height: 1; transform: none; transition: transform 0.2s; } .content-area .lesson-links .res-toggle:hover, .content-area .lesson-links .res-toggle:focus, .content-area .lesson-links .res-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24); outline: none; transform: translateY(-1px); } .content-area .lesson-links .res-toggle:hover i, .content-area .lesson-links .res-toggle[aria-expanded="true"] i { color: #ffffff; } .dark-mode .content-area .lesson-links .res-toggle { background: #1e293b; border-color: rgba(var(--accent-rgb), 0.25); color: #cbd5e1; } .dark-mode .content-area .lesson-links .res-toggle:hover, .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #0f172a; } .dark-mode .content-area .lesson-links .res-toggle:hover i, .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] i { color: #0f172a; } /* Remembered last-open resource button: only one button per lesson card. */ .content-area .lesson-links .res-toggle.last-open-kind, .content-area .lesson-links .res-toggle.last-open-kind:visited, .content-area .lesson-links .res-toggle.last-open-kind:link { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24); } .content-area .lesson-links .res-toggle.last-open-kind i { color: #ffffff; } .dark-mode .content-area .lesson-links .res-toggle.last-open-kind, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link { background: var(--accent); border-color: var(--accent); color: #0f172a; } .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i { color: #0f172a; } /* ============================================================ 9) RESOURCE PANELS Collapsible panels shown under lesson cards after clicking toggles. ============================================================ */ /* V229.80: a closed resource category must never keep layout space or remain visible because of first-paint/legacy inline rules. The current accordion owner toggles the native hidden attribute for single-slot panels. */ .content-area .res-panel[hidden] { display: none !important; } .content-area .res-panel { height: 0; margin-top: 0; padding-block: 0; padding-inline: 12px; border-width: 0; border-style: dashed; border-color: var(--bd-soft); border-radius: var(--radius-md); background: var(--bg-soft); opacity: 0; overflow: hidden; will-change: auto; transition: opacity 0.12s ease; } .content-area .res-panel.open { height: auto; margin-top: 15px; padding-block: 15px; border-width: 1px; opacity: 1; } .content-area .res-title { margin: 0 0 12px; color: var(--txt-600); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; } .content-area .res-list { display: grid; grid-template-columns: repeat(var(--res-cols), minmax(0, 1fr)); gap: var(--res-gap); margin: 0; padding: 0; list-style: none; } .dark-mode .content-area .res-panel { background: rgba(0, 0, 0, 0.2); border-color: rgba(var(--accent-rgb), 0.2); } .dark-mode .content-area .res-title { color: var(--txt-600); } /* Video panel group separator: lesson videos first, then exercise/correction videos. */ .content-area .res-panel[data-kind="vid"] .video-group-separator { grid-column: 1 / -1; display: block; width: 100%; height: 1px; min-height: 0; margin: 2px 0; padding: 0; border: 0; border-top: 1px dashed var(--bd-soft); background: transparent; box-shadow: none; list-style: none; pointer-events: none; } /* ============================================================ 10) RESOURCE ITEMS Sub-buttons inside panels: icon, PDF/video link, and base item behavior. ============================================================ */ .content-area .res-item { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; min-height: 46px; border: 1px solid var(--card-bd); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); position: relative; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .content-area .res-item:hover, .content-area .res-item:focus-within { background: #fffaf0; border-color: var(--accent); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15); outline: none; transform: translateY(-2px); } .content-area .res-meta { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; flex: 1 1 auto; gap: 10px; min-width: 0; min-height: 100%; padding: var(--les-res-item-pad-y) var(--les-res-item-pad-x); box-sizing: border-box; position: relative; z-index: 2; pointer-events: none; } .content-area .res-item a { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; flex: 1 1 auto; min-width: 0; min-height: 100%; margin: 0; color: var(--txt-900); font-size: var(--les-res-item-font); font-weight: 700; line-height: 1.25; text-align: start; text-decoration: none; white-space: normal; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; outline: none; pointer-events: auto; } .content-area .res-item a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .content-area .res-meta i, .content-area .res-meta .pdf-inline-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); transform: translateY(0); } .content-area .res-meta i { font-size: 16px; } /* Upper video sub-buttons: same video icon size as supervised video buttons */ .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta i { font-size: 18px; } .content-area .res-meta .pdf-inline-icon { width: 20px; height: 22px; } .content-area .res-meta .pdf-inline-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; } .dark-mode .content-area .res-item { background: #1e293b; border-color: rgba(var(--accent-rgb), 0.15); } .dark-mode .content-area .res-item:hover, .dark-mode .content-area .res-item:focus-within { background: #0f172a; border-color: var(--accent); } .dark-mode .content-area .res-panel .res-item a { color: #f1f5f9; } /* ============================================================ 11) VISITED AND RETURN STATES Mark-as-open check state, return focus, and dark-mode equivalents. ============================================================ */ /* V230.88 — legacy immediate .visited state matches the canonical level3-resource-pins prepaint. No second orange/gradient/round-check paint. */ .content-area .res-item.visited { background: var(--surface); background-image: none; border-color: var(--card-bd); border-width: 1px; box-shadow: none; transform: none; } .content-area .res-item.visited .res-meta { padding-inline-end: calc(var(--les-res-item-pad-x) + 24px); } .content-area .res-item.visited .res-meta a { color: var(--accent-600); font-weight: 800; } .content-area .res-item.visited .res-meta i, .content-area .res-item.visited .res-meta .pdf-inline-icon { color: var(--accent-600); } .content-area .res-item.visited::after { content: "✓"; position: absolute; top: 50%; right: auto; left: auto; inset-inline-end: 9px; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--accent-600); font-size: 12px; font-weight: 900; line-height: 1; box-shadow: none; pointer-events: none; z-index: 4; transform: translateY(-50%); } .content-area .res-item.visited::before { content: none; display: none; } .content-area .res-item.return-focus { background: var(--surface); background-image: none; border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); } .content-area .lesson-block.visited-card .lesson-title .title-text, .content-area .lesson-block.visited-card .supervised-label { color: var(--accent-600); font-weight: 900; } .content-area .lesson-block.visited-card .lesson-num, .content-area .lesson-block.visited-card .supervised-num { border-color: rgba(var(--accent-600-rgb), 0.62); color: var(--accent-600); background: rgba(var(--accent-rgb), 0.12); } .content-area .lesson-block.return-card-focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.20), var(--shadow-accent); } .dark-mode .content-area .lesson-block.visited-card .lesson-title .title-text, .dark-mode .content-area .lesson-block.visited-card .supervised-label { color: var(--accent-600); } .dark-mode .content-area .lesson-block.visited-card .lesson-num, .dark-mode .content-area .lesson-block.visited-card .supervised-num { border-color: rgba(var(--accent-rgb), 0.70); color: var(--accent-600); background: rgba(var(--accent-rgb), 0.16); } .dark-mode .content-area .lesson-block.return-card-focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.24), var(--shadow-accent-strong); } /* Last opened card glow: one clear visual target for the user. */ .content-area .lesson-block.last-open-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } .content-area .lesson-block.last-open-card .lesson-title .title-text, .content-area .lesson-block.last-open-card .supervised-label { color: var(--accent-600) !important; font-weight: 900 !important; } .content-area .lesson-block.last-open-card .lesson-num, .content-area .lesson-block.last-open-card .supervised-num { border-color: rgba(var(--accent-600-rgb), 0.70) !important; color: var(--accent-600) !important; background: rgba(var(--accent-rgb), 0.14) !important; } .dark-mode .content-area .lesson-block.last-open-card { border-color: var(--accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; } .dark-mode .content-area .lesson-block.last-open-card .lesson-title .title-text, .dark-mode .content-area .lesson-block.last-open-card .supervised-label { color: var(--accent-600) !important; } .dark-mode .content-area .res-item.visited, html.dark-mode .content-area .res-item.visited, body.dark-mode .content-area .res-item.visited { background: var(--surface); background-image: none; border-color: var(--card-bd); box-shadow: none; } .dark-mode .content-area .res-item.visited .res-meta a, html.dark-mode .content-area .res-item.visited .res-meta a, body.dark-mode .content-area .res-item.visited .res-meta a { color: var(--accent-600); } .dark-mode .content-area .res-item.visited .res-meta i, .dark-mode .content-area .res-item.visited .res-meta .pdf-inline-icon, html.dark-mode .content-area .res-item.visited .res-meta i, html.dark-mode .content-area .res-item.visited .res-meta .pdf-inline-icon, body.dark-mode .content-area .res-item.visited .res-meta i, body.dark-mode .content-area .res-item.visited .res-meta .pdf-inline-icon { color: var(--accent-600); } .dark-mode .content-area .res-item.visited::after, html.dark-mode .content-area .res-item.visited::after, body.dark-mode .content-area .res-item.visited::after { background: transparent; color: var(--accent-600); border: 0; box-shadow: none; } .dark-mode .content-area .res-item.return-focus, html.dark-mode .content-area .res-item.return-focus, body.dark-mode .content-area .res-item.return-focus { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); } /* ============================================================ 12) SUPERVISED EXAMS Supervised/controle cards and exam model/corrigé/video sub-buttons. ============================================================ */ /* Main supervised section separator and title */ .content-area #supervised { margin-top: 25px; padding-top: 25px; position: relative; } .content-area #supervised::before { content: ""; position: absolute; top: 0; left: 5%; right: 5%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--accent-300), var(--accent-600), var(--accent-300), transparent); opacity: 1; box-shadow: 0 4px 15px rgba(var(--accent-600-rgb), 0.25); } .content-area #supervised .sp-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; color: var(--txt-900); font-size: 21px; font-weight: 900; text-align: center; } .content-area #supervised .sp-title i { color: var(--accent); font-size: 23px; } .content-area #supervised .term-title { font-size: 19px; } .dark-mode .content-area #supervised .sp-title { color: #f8fafc; } /* Supervised card shell */ .content-area .supervised-card { overflow: hidden; } /* Supervised card main toggle */ .content-area .supervised-toggle-btn { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .content-area .supervised-toggle-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.35); border-radius: 8px; } .content-area .supervised-toggle-left { display: flex; align-items: center; gap: var(--les-title-gap); min-width: 0; color: var(--txt-900); font-size: calc(var(--les-title-size) - 1px); font-weight: var(--les-title-weight); text-align: start; } .dark-mode .content-area .supervised-toggle-left { color: #f8fafc; } .content-area .supervised-num { flex: 0 0 var(--les-num-minw); width: var(--les-num-minw); min-width: var(--les-num-minw); height: var(--les-num-h); align-self: center; } .content-area .supervised-label { display: block; min-width: 0; line-height: 1.22; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; } .content-area .supervised-toggle-btn .chev { color: var(--txt-600); font-size: 16px; transition: transform 0.3s ease; } .content-area .supervised-toggle-btn[aria-expanded="true"] .chev { color: var(--accent); transform: rotate(180deg); } /* Supervised panel title */ .content-area .supervised-card .res-panel[data-kind="exam"] .res-title { margin-bottom: 14px; } /* Supervised model groups. Default / PC layout: two sub-buttons per row. Mobile changes this to one sub-button per row inside section 16. */ .content-area .supervised-card .exam-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .content-area .supervised-card .exam-actions-grid:last-child { margin-bottom: 0; } .content-area .supervised-card .res-panel[data-kind="exam"] .exam-actions-grid:not(:last-of-type) { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--bd-soft); } .content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-res-item, .content-area .supervised-card .res-panel .supervised-res-item { min-width: 0; min-height: var(--links-minh); align-items: stretch; } /* Supervised sub-button icon/title system. Change --sup-icon-title-gap only when you want to control the icon-title space. */ .content-area .supervised-res-meta { --sup-icon-w: 20px; --sup-icon-title-gap: 4px; display: flex; align-items: center; justify-content: flex-start; gap: var(--sup-icon-title-gap); width: 100%; min-width: 0; } .content-area .supervised-card .res-panel .supervised-res-item a { flex: 1 1 auto; min-width: 0; width: auto; justify-content: flex-start; text-align: start; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; } .content-area .supervised-card .res-panel .supervised-res-item .res-meta i, .content-area .supervised-card .res-panel .supervised-res-item .res-meta .pdf-inline-icon { flex: 0 0 var(--sup-icon-w); width: var(--sup-icon-w); min-width: var(--sup-icon-w); height: var(--sup-icon-w); justify-content: center; } .content-area .supervised-card .exam-action--video .supervised-res-meta i { font-size: 18px; } /* ============================================================ 13) HIGHLIGHT Temporary flash animation used when returning to a card. ============================================================ */ .lesson-highlight { animation: lessonCardFlash 1.1s ease; } @media (max-width: 720px) { .lesson-highlight { animation: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18), var(--shadow-sm); } } @keyframes lessonCardFlash { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45), var(--shadow-accent); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.12), var(--shadow-accent); } 100% { box-shadow: var(--shadow-accent); } } /* ============================================================ 14) DESKTOP RESPONSIVE RULES Large screens first: PC / laptop layout. Keep this section before tablet/mobile. ============================================================ */ @media (min-width: 961px) { .content-area { --links-cols: 4; --res-cols: 2; --links-gap: 8px; --links-minh: 38px; } /* PC: quiz resources use three compact columns. */ .content-area .res-panel[data-kind="quiz"] .res-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* PC: supervised resources always stay two by two. */ .content-area .supervised-card .exam-actions-grid, .content-area .supervised-card .res-panel.actions-count-3 .exam-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-card .res-panel.actions-count-3 .exam-actions-grid > .supervised-res-item:nth-child(3), .content-area .supervised-card .res-panel.actions-count-1 .exam-actions-grid > .supervised-res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; } /* PC: keep supervised icon and title close with the same gap for every supervised sub-button. */ .content-area .supervised-res-meta { --sup-icon-title-gap: 6px; padding-inline: 14px; } /* PC only: move quiz + video sub-button icon/title group slightly upward. */ .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta, .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta { position: relative; top: -2px; } } /* ============================================================ 15) TABLET RESPONSIVE RULES Medium screens: one term column, but supervised stays two by two. ============================================================ */ @media (max-width: 960px) { .content-area { --links-cols: 2; --res-cols: 1; --links-gap: 10px; --links-minh: 44px; --les-res-item-font: 13px; --les-res-item-pad-y: 8px; --les-res-item-pad-x: 12px; } .content-area .terms-wrap { grid-template-columns: 1fr; } .content-area .res-item { min-height: 42px; } .content-area .res-panel[data-kind="quiz"] .res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .content-area .res-panel[data-kind="quiz"] .res-list > .res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; } .content-area .res-panel[data-kind="vid"] .res-list { grid-template-columns: 1fr; gap: 12px; } .content-area .res-panel .res-meta { display: flex; align-items: center; align-self: stretch; justify-content: flex-start; flex-direction: row; width: 100%; min-width: 0; min-height: 100%; gap: 8px; padding-block: 8px; padding-inline: 12px; padding-inline-end: 34px; box-sizing: border-box; } html[dir="rtl"] .content-area .res-panel .res-meta { text-align: right; } html[dir="ltr"] .content-area .res-panel .res-meta { text-align: left; } .content-area .res-panel[data-kind="quiz"] .res-item a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content-area .res-panel .res-item a { position: relative; top: 2.2px; } /* Tablet: supervised sub-buttons still stay two by two. */ .content-area .supervised-card .exam-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .content-area .supervised-card .exam-actions-grid > .supervised-res-item { grid-column: auto; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; } .content-area .supervised-res-meta { --sup-icon-title-gap: 3px; } } /* ============================================================ 16) SMALL TABLET / WIDE MOBILE RULES Between tablet and phone: compact lesson toggles before true mobile. ============================================================ */ @media (max-width: 960px) and (min-width: 721px) { .content-area { --links-cols: 4; --res-cols: 2; --links-gap: 8px; --links-minh: 40px; } .content-area .lesson-links .res-toggle { padding-inline: 6px; font-size: 12px; } .content-area .lesson-links .res-toggle i { font-size: 14px; } } /* ============================================================ 17) MOBILE RESPONSIVE RULES Phones: one supervised sub-button per row. Normal lesson and supervised sub-button engines are separated here to avoid overriding each other. ============================================================ */ @media (max-width: 720px) { .content-area { min-width: 0; --les-title-gap: 6px; --les-num-h: 20px; --les-num-minw: 20px; --les-num-border: 1.5px; --les-num-radius: 6px; --les-num-font: 12px; } .content-area .sp-wrapper { gap: 16px; } .content-area .sp-hero h2 { font-size: 20px; } .content-area .hero-inline-btn { --hero-btn-px: 12px; --hero-btn-pt: 7px; --hero-btn-pb: 4px; } .content-area .term-card { padding: 0; } .content-area .lesson-block { padding: 14px; } .content-area .lesson-title { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 12px; font-size: 16px; line-height: 1.25; } .content-area .lesson-title .title-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; position: relative; top: 3px; } .content-area .num-squares { flex: 0 0 20px; width: 20px; min-width: 20px; height: 20px; align-self: center; } .content-area .num-squares .sq-digits { font-size: inherit; line-height: 0; transform: translateY(1.5px); } .content-area .lesson-links .res-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding-top: 6.5px; padding-bottom: 3.5px; padding-inline: 7px; font-size: 14px; line-height: 1; } .content-area .lesson-links .res-toggle i { position: relative; top: -1.5px; } .content-area .res-panel.open, .content-area .supervised-card .res-panel.open { margin-top: 10px; padding-inline: 10px; padding-block: 10px; } .content-area .res-list { gap: 12px; } /* Mobile: normal upper sub-buttons use the same thin Y height as supervised. */ .content-area .lesson-block:not(.supervised-card) .res-panel .res-item { min-height: 40px; border-radius: 12px; } .content-area .res-item { border-radius: 12px; } .content-area .res-item.visited::after { content: "✓"; top: 50%; inset-inline-end: 9px; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--accent-600); font-size: 12px; box-shadow: none; z-index: 4; transform: translateY(-50%); } .content-area .res-item.visited::before { content: none; display: none; } .content-area .res-meta .pdf-inline-icon { width: 20px; height: 20px; } /* Mobile supervised card interaction cleanup. */ .content-area .supervised-card, .content-area .supervised-toggle-btn, .content-area .supervised-toggle-left, .content-area .supervised-res-item, .content-area .supervised-res-meta, .content-area .supervised-card .res-panel .supervised-res-item a, .content-area .supervised-card .res-panel .supervised-res-item a::after { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .content-area .supervised-card:focus, .content-area .supervised-card:active, .content-area .supervised-card:focus-visible, .content-area .supervised-toggle-btn:focus, .content-area .supervised-toggle-btn:active, .content-area .supervised-toggle-btn:focus-visible, .content-area .supervised-res-item:focus, .content-area .supervised-res-item:active, .content-area .supervised-res-item:focus-visible, .content-area .supervised-card .res-panel .supervised-res-item a:focus, .content-area .supervised-card .res-panel .supervised-res-item a:active, .content-area .supervised-card .res-panel .supervised-res-item a:focus-visible { outline: none; box-shadow: none; } .content-area .supervised-card .supervised-toggle-left { align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.2; } .content-area .supervised-card .supervised-label { font-size: inherit; line-height: 1.2; position: relative; top: 1.5px; } .content-area .supervised-num { flex: 0 0 20px; width: 20px; min-width: 20px; height: 20px; align-self: center; font-size: 12px; } /* Mobile: supervised resources become one button per row. */ .content-area .supervised-card .res-list, .content-area .supervised-card .exam-actions-grid { grid-template-columns: 1fr; gap: 10px; } .content-area .supervised-card .exam-actions-grid > .supervised-res-item, .content-area .supervised-res-item { grid-column: 1 / -1; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; min-height: 40px; } /* Mobile: supervised sub-buttons use the SAME centered icon/title engine as normal lesson buttons. Control the centered group width with --sup-table-w. Control the icon/title gap with --sup-icon-title-gap. */ html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { --sup-table-w: 162px; --sup-icon-w: 22px; --sup-icon-title-gap: 4px; --sup-title-y: 2.5px; display: grid; grid-template-columns: var(--sup-icon-w) minmax(0, calc(var(--sup-table-w) - var(--sup-icon-w) - var(--sup-icon-title-gap))); grid-template-rows: 1fr; column-gap: var(--sup-icon-title-gap); align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sup-table-w); min-width: 0; min-height: 100%; margin-inline: auto; padding-inline: 0; padding-block: 4px; box-sizing: border-box; pointer-events: none; } html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { direction: rtl; text-align: right; --sup-title-y: 2.5px; } html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta { direction: ltr; text-align: left; --sup-table-w: 168px; --sup-title-y: 2.5px; } html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > i, html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > .pdf-inline-icon, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > i, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > .pdf-inline-icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; justify-self: center; align-self: center; flex: none; width: var(--sup-icon-w); min-width: var(--sup-icon-w); height: var(--sup-icon-w); margin: 0; transform: none; } html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a, html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-start; align-self: center; justify-self: stretch; flex: none; width: 100%; min-width: 0; min-height: auto; margin: 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; line-height: 1.2; position: relative; top: var(--sup-title-y); pointer-events: auto; } html[dir="rtl"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { direction: rtl; text-align: right; } html[dir="ltr"] .content-area .supervised-card .res-panel .supervised-res-item .supervised-res-meta > a { direction: ltr; text-align: left; white-space: nowrap; overflow: visible; text-overflow: clip; } html[dir="rtl"] .content-area .supervised-res-item.visited .supervised-res-meta, html[dir="ltr"] .content-area .supervised-res-item.visited .supervised-res-meta { padding-inline: 0; } /* Mobile sub-button engine for normal lesson cards only. */ html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { --sub-table-w: 150px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; display: grid; grid-template-columns: var(--sub-icon-w) minmax(0, calc(var(--sub-table-w) - var(--sub-icon-w) - var(--sub-gap))); grid-template-rows: 1fr; column-gap: var(--sub-gap); align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sub-table-w); min-width: 0; min-height: 100%; margin-inline: auto; padding-inline: 0; padding-block: 4px; box-sizing: border-box; pointer-events: none; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { direction: rtl; text-align: right; } html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta { direction: ltr; text-align: left; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > i, html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > .pdf-inline-icon, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > i, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-meta > .pdf-inline-icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; justify-self: center; align-self: center; flex: none; width: var(--sub-icon-w); height: var(--sub-icon-w); margin: 0; transform: none; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: flex-start; align-self: center; justify-self: stretch; flex: none; width: 100%; min-width: 0; min-height: auto; margin: 0; padding: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; position: relative; top: var(--sub-title-y); pointer-events: auto; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { direction: rtl; text-align: right; } html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item a { direction: ltr; text-align: left; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item.visited .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel .res-item.visited .res-meta { padding-inline: 0; } /* Mobile normal lesson sub-button manual controls. */ html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-meta { --sub-table-w: 135px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-item a, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="lesson"] .res-item a { width: max-content; max-width: none; white-space: nowrap; overflow: visible; text-overflow: clip; } /* Mobile EXERCICES sub-buttons — AR only. AR is RTL, so the movement is reversed. Increase --sub-ar-x to move the icon/title group more toward the visual center. Decrease it or use negative values if it goes too far. */ html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="ex"] .res-meta { --sub-table-w: 162px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; --sub-ar-x: 8px; transform: translateX(calc(-1 * var(--sub-ar-x))); } /* Mobile EXERCICES sub-buttons — FR only. FR is LTR, so positive movement goes visually right. Keep the table wider so "Série n° 01 : Corrigés" does not break badly. */ html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="ex"] .res-meta { --sub-table-w: 165px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2.7px; --sub-fr-x: 20px; transform: translateX(var(--sub-fr-x)); } /* Mobile VIDEOS sub-buttons — AR only. Control video button icon/title group width with --vid-table-w. AR is RTL, so positive --vid-ar-x moves the group visually left. Use --vid-title-y for vertical title adjustment. */ html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta { --sub-table-w: 160px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 1px; --vid-table-w: 160px; --vid-ar-x: 0px; --sub-table-w: var(--vid-table-w); transform: translateX(calc(-1 * var(--vid-ar-x))); } /* Mobile VIDEOS sub-buttons — FR only. Control video button icon/title group width with --vid-table-w. FR is LTR, so positive --vid-fr-x moves the group visually right. Use --vid-title-y for vertical title adjustment. */ html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="vid"] .res-meta { --sub-table-w: 175px; --sub-icon-w: 22px; --sub-gap: 3px; --sub-title-y: 2px; --vid-table-w: 175px; --vid-fr-x: 12px; --sub-table-w: var(--vid-table-w); transform: translateX(var(--vid-fr-x)); } html[dir="rtl"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta, html[dir="ltr"] .content-area .lesson-block:not(.supervised-card) .res-panel[data-kind="quiz"] .res-meta { --sub-table-w: 85px; --sub-icon-w: 22px; --sub-gap: 2px; --sub-title-y: 2.7px; } } /* ============================================================ 17.5) PERFORMANCE MODE Reduces paint/layout work on big subject pages. ============================================================ */ .content-area .lesson-block { contain: layout paint style; content-visibility: visible; contain-intrinsic-size: auto; } .content-area .res-panel:not(.open) { content-visibility: hidden; contain: layout paint style; contain-intrinsic-size: 0 0; } .content-area .res-panel.open { content-visibility: visible; contain: layout paint style; } /* Refresh stability: all hardcoded semester cards must participate in layout immediately. This prevents Semestre 2 from being painted as an empty intrinsic placeholder, then expanding later and moving the restored browser scroll position. */ .content-area #math-terms-wrap > .term-card, .content-area #math-terms-wrap .lesson-block { content-visibility: visible !important; contain-intrinsic-size: auto !important; } /* Avoid permanent GPU layers on every hidden panel */ .content-area .res-panel { will-change: auto; } .content-area .res-panel.open { will-change: auto; } /* Mobile: reduce expensive shadows/transforms */ @media (max-width: 720px), (hover: none), (pointer: coarse) { .content-area .lesson-block, .content-area .res-item, .content-area .lesson-links .res-toggle, .content-area .hero-inline-btn { transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease !important; } .content-area .lesson-block:hover, .content-area .lesson-block:focus-within, .content-area .res-item:hover, .content-area .res-item:focus-within, .content-area .lesson-links .res-toggle:hover, .content-area .lesson-links .res-toggle:focus, .content-area .hero-inline-btn:hover { transform: none !important; } .content-area .lesson-block:hover, .content-area .lesson-block:focus-within, .content-area .res-item:hover, .content-area .res-item:focus-within { box-shadow: var(--shadow-sm) !important; } } /* ============================================================ 18) REDUCED MOTION Accessibility: disables animations/transitions for users who request reduced motion. ============================================================ */ @media (prefers-reduced-motion: reduce) { .content-area * { animation: none; transition: none; transform: none; } .content-area .res-panel { height: auto; } } /* Schoolep old mobile link hitbox repair */ .content-area .res-item a::after { content: none !important; display: none !important; } .content-area .res-meta, .content-area .supervised-res-meta { pointer-events: none !important; } .content-area .res-meta a:not(.schoolep-hitbox-link), .content-area .supervised-res-meta a:not(.schoolep-hitbox-link) { pointer-events: auto !important; position: relative !important; z-index: 3 !important; } .content-area .res-panel .res-item > a.schoolep-hitbox-link, .content-area .supervised-card .res-panel .supervised-res-item > a.schoolep-hitbox-link { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; -webkit-tap-highlight-color: transparent; } /* ============================================================ CARD TITLE READ MARK — SUB-RESOURCE ONLY ------------------------------------------------------------ Big lesson titles change color only after opening a real sub-resource in viewer_m / videos_m / quizzer_m, not when only expanding the card. ============================================================ */ .content-area .lesson-block.last-open-card { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } .dark-mode .content-area .lesson-block.last-open-card { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } .dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text, .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label { color: var(--accent-600) !important; } .dark-mode .content-area .lesson-block.resource-opened-card .lesson-num, .dark-mode .content-area .lesson-block.resource-opened-card .supervised-num { border-color: rgba(var(--accent-rgb), 0.70) !important; color: var(--accent-600) !important; background: rgba(var(--accent-rgb), 0.16) !important; } /* ============================================================ FINAL FIX — BIG CARD TITLE ONLY AFTER SUB-BUTTON OPEN ------------------------------------------------------------ Opening the card/panel must not color the big lesson title. Only real sub-resource activation through viewer_m/videos_m/quizzer_m may color the lesson title by adding .resource-opened-card. ============================================================ */ .content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-title .title-text, .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-label, .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-title .title-text, .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-label, .content-area .lesson-block.open:not(.resource-opened-card) .lesson-title .title-text, .content-area .lesson-block.open:not(.resource-opened-card) .supervised-label { color: var(--txt-900) !important; font-weight: var(--les-title-weight) !important; } .content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-num, .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-num, .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-num, .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-num { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--bg-soft) !important; } .dark-mode .content-area .lesson-block:not(.resource-opened-card).visited-card .lesson-title .title-text, .dark-mode .content-area .lesson-block:not(.resource-opened-card).visited-card .supervised-label, .dark-mode .content-area .lesson-block:not(.resource-opened-card).last-open-card .lesson-title .title-text, .dark-mode .content-area .lesson-block:not(.resource-opened-card).last-open-card .supervised-label, .dark-mode .content-area .lesson-block.open:not(.resource-opened-card) .lesson-title .title-text, .dark-mode .content-area .lesson-block.open:not(.resource-opened-card) .supervised-label { color: #f8fafc !important; } .dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text, .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label { color: var(--accent-600) !important; font-weight: 900 !important; } /* ============================================================ FINAL FIX — MAIN 4 BUTTON TITLES AFTER SUB-BUTTON OPEN ------------------------------------------------------------ The four main buttons (دروس / تمارين / كويزات / فيديوهات) change only text + icon color after a real sub-resource file is opened. No orange background, no glow, no full-button fill. ============================================================ */ .content-area .lesson-links .res-toggle.kind-visited, .content-area .lesson-links .res-toggle.kind-visited:link, .content-area .lesson-links .res-toggle.kind-visited:visited, .content-area .lesson-links .res-toggle.last-open-kind, .content-area .lesson-links .res-toggle.last-open-kind:link, .content-area .lesson-links .res-toggle.last-open-kind:visited { background: var(--surface) !important; border-color: var(--card-bd) !important; box-shadow: none !important; color: var(--accent-600) !important; font-weight: 900 !important; transform: none !important; } .content-area .lesson-links .res-toggle.kind-visited i, .content-area .lesson-links .res-toggle.last-open-kind i { color: var(--accent-600) !important; } .dark-mode .content-area .lesson-links .res-toggle.kind-visited, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:link, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited { background: #1e293b !important; border-color: rgba(var(--accent-rgb), 0.25) !important; box-shadow: none !important; color: var(--accent-600) !important; font-weight: 900 !important; transform: none !important; } .dark-mode .content-area .lesson-links .res-toggle.kind-visited i, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i { color: var(--accent-600) !important; } .content-area .lesson-links .res-toggle.kind-visited:hover, .content-area .lesson-links .res-toggle.kind-visited:focus, .content-area .lesson-links .res-toggle.last-open-kind:hover, .content-area .lesson-links .res-toggle.last-open-kind:focus { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24) !important; } .content-area .lesson-links .res-toggle.kind-visited:hover i, .content-area .lesson-links .res-toggle.kind-visited:focus i, .content-area .lesson-links .res-toggle.last-open-kind:hover i, .content-area .lesson-links .res-toggle.last-open-kind:focus i { color: #ffffff !important; } /* ============================================================ FINAL FIX — LAST REAL SUB-RESOURCE CARD GLOW ------------------------------------------------------------ The last lesson card whose sub-resource was opened gets a visible glow. This is tied to real sub-resource activation: left click, middle click, Ctrl/Cmd-open, or Enter. Right-click context menu alone does not paint. ============================================================ */ .content-area .lesson-block.resource-opened-card.last-open-card, .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } .dark-mode .content-area .lesson-block.resource-opened-card.last-open-card, .dark-mode .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; } /* ============================================================ FINAL FIX — 4 MAIN BUTTONS VISITED PAINT ------------------------------------------------------------ When a real resource opens, the parent main button keeps the same paint style as a normal left-click active button. Multiple categories in the same card can stay painted. Right-click/contextmenu alone does not add this class. ============================================================ */ /* Source style block: m1-math-clickable-resource-fix */ /* Final resource click fix: sub-resource items must be real clickable launch zones. */ .content-area .res-panel .res-item, .content-area .supervised-card .res-panel .supervised-res-item { cursor: pointer; } .content-area .res-panel .res-item .res-meta, .content-area .supervised-card .res-panel .supervised-res-meta { pointer-events: auto !important; } .content-area .res-panel .res-item a.res-link, .content-area .res-panel .res-item a.quiz-link, .content-area .res-panel .res-item a.video-link, .content-area .supervised-card .res-panel .supervised-res-item a { position: relative; z-index: 6; pointer-events: auto !important; } .content-area .res-panel .res-item .pdf-inline-icon, .content-area .res-panel .res-item i, .content-area .supervised-card .res-panel .supervised-res-item .pdf-inline-icon, .content-area .supervised-card .res-panel .supervised-res-item i { pointer-events: none !important; } /* ============================================================ LIGHTWEIGHT M1 CARD STATE Simple rules: - .open = real open card glow - .m1-simple-breadcrumb-glow = exact breadcrumb target glow, closed - .m1-simple-manual-glow = last manually used card glow, closed - visited paint never cancels these two glow classes ============================================================ */ .content-area .lesson-block.open, .content-area .lesson-block.m1-simple-breadcrumb-glow, .content-area .lesson-block.m1-simple-manual-glow { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.30), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } .dark-mode .content-area .lesson-block.open, .dark-mode .content-area .lesson-block.m1-simple-breadcrumb-glow, .dark-mode .content-area .lesson-block.m1-simple-manual-glow { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.28), var(--shadow-accent-strong) !important; } .content-area .lesson-block.visited-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow), .content-area .lesson-block.resource-opened-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow), .content-area .lesson-block.last-open-card:not(.open):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) { box-shadow: var(--shadow-sm) !important; } /* ============================================================ SIMPLE 40-DAY PAINT — TITLE + MAIN RESOURCE BUTTONS Real resource opening paints the lesson title and the exact main button. ============================================================ */ .content-area .lesson-block.resource-opened-card .lesson-title .title-text, .content-area .lesson-block.resource-opened-card .supervised-label { color: var(--accent-600) !important; font-weight: 900 !important; } .content-area .lesson-block.resource-opened-card .lesson-num, .content-area .lesson-block.resource-opened-card .supervised-num { border-color: rgba(var(--accent-600-rgb), 0.62) !important; color: var(--accent-600) !important; background: rgba(var(--accent-rgb), 0.12) !important; } .content-area .lesson-links .res-toggle.kind-visited, .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) { background: var(--surface) !important; border-color: var(--card-bd) !important; box-shadow: none !important; color: var(--accent-600) !important; font-weight: 900 !important; transform: none !important; } .content-area .lesson-links .res-toggle.kind-visited i, .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } .dark-mode .content-area .lesson-block.resource-opened-card .lesson-title .title-text, .dark-mode .content-area .lesson-block.resource-opened-card .supervised-label, .dark-mode .content-area .lesson-links .res-toggle.kind-visited, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), .dark-mode .content-area .lesson-links .res-toggle.kind-visited i, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } /* ============================================================ FINAL FIX — 4 MAIN BUTTONS VISITED PAINT ------------------------------------------------------------ When a real resource opens, the parent main button keeps the same paint style as a normal left-click active button. Multiple categories in the same card can stay painted. Right-click/contextmenu alone does not add this class. ============================================================ */ .content-area .lesson-links .res-toggle.kind-visited, .content-area .lesson-links .res-toggle.kind-visited:link, .content-area .lesson-links .res-toggle.kind-visited:visited, .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), .content-area .lesson-links .res-toggle.last-open-kind, .content-area .lesson-links .res-toggle.last-open-kind:link, .content-area .lesson-links .res-toggle.last-open-kind:visited, .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24) !important; font-weight: 900 !important; transform: none !important; } .content-area .lesson-links .res-toggle.kind-visited i, .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, .content-area .lesson-links .res-toggle.last-open-kind i, .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: #ffffff !important; } .dark-mode .content-area .lesson-links .res-toggle.kind-visited, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:link, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), .dark-mode .content-area .lesson-links .res-toggle.last-open-kind, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited, .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--accent) !important; border-color: var(--accent) !important; color: #0f172a !important; box-shadow: 0 4px 12px rgba(var(--accent-300-rgb), 0.24) !important; font-weight: 900 !important; transform: none !important; } .dark-mode .content-area .lesson-links .res-toggle.kind-visited i, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i, .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: #0f172a !important; } /* Source style block: m1-hover-click-glow-last-only-final-fix */ /* ============================================================ FINAL FIX — INTERACTION GLOW + ONE PERSISTENT LAST CARD GLOW ------------------------------------------------------------ - Hover/focus/open can glow on every card while the user is interacting. - Idle/refresh permanent glow stays only on the last real resource card. - Visited title/button paint remains untouched for all cards. ============================================================ */ /* Idle non-last visited/resource cards: keep paint, remove permanent glow only. */ html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow), html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow), html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.open):not(:hover):not(:focus-within):not(.m1-simple-breadcrumb-glow):not(.m1-simple-manual-glow) { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } /* Interaction glow: every card may glow while hovered/focused/opened. */ html body .content-area .lesson-block:hover, html body .content-area .lesson-block:focus-within, html body .content-area .lesson-block.open, html body .content-area .lesson-block.m1-simple-breadcrumb-glow, html body .content-area .lesson-block.m1-simple-manual-glow { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.30), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block:hover, html.dark-mode body .content-area .lesson-block:focus-within, html.dark-mode body .content-area .lesson-block.open, html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow, html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.28), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Permanent idle glow: only the latest real resource card keeps glowing after refresh/back/new tab return. */ html body .content-area .lesson-block.resource-opened-card.last-open-card, html body .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block.resource-opened-card.last-open-card, html.dark-mode body .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Source style block: m1_math_sidebar_icons_font_lock_20260617 */ /* Keep shared sidebar icons identical to index/m1 on m1_math. */ .levels-sidebar i[class^="fa-"], .levels-sidebar i[class*=" fa-"], .levels-sidebar .fa, .levels-sidebar .fas, .levels-sidebar .far, .levels-sidebar .fab, .levels-sidebar .fa-solid, .levels-sidebar .fa-regular, .levels-sidebar .fa-brands { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal !important; font-synthesis: none !important; } /* Source style block: m1-math-resource-button-state-style */ /* ============================================================ M1 Math — 4 main buttons: no permanent/open-state paint ------------------------------------------------------------ Scope: page main content only. Behavior unchanged. This removes visual paint from: - 40-day remembered main buttons - last-open main button - aria-expanded open-panel state Only real hover/focus/active gets the orange interaction style. ============================================================ */ /* 1) Neutral base for remembered buttons AND open panels. */ html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.kind-visited:link, html body .content-area .lesson-links .res-toggle.kind-visited:visited, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), html body .content-area .lesson-links .res-toggle[aria-expanded="true"], html body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] { background: var(--surface) !important; background-image: none !important; border-color: var(--card-bd) !important; color: var(--txt-700) !important; box-shadow: none !important; font-weight: 700 !important; text-shadow: none !important; filter: none !important; transform: none !important; } html body .content-area .lesson-links .res-toggle.kind-visited i, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html body .content-area .lesson-links .res-toggle.last-open-kind i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i, html body .content-area .lesson-links .res-toggle[aria-expanded="true"] i, html body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i { color: var(--accent) !important; text-shadow: none !important; filter: none !important; } /* 2) Orange interaction exists ONLY while hovering/focusing/clicking. */ html body .content-area .lesson-links .res-toggle:hover, html body .content-area .lesson-links .res-toggle:focus, html body .content-area .lesson-links .res-toggle:active, html body .content-area .lesson-links .exam-toggle-btn:hover, html body .content-area .lesson-links .exam-toggle-btn:focus, html body .content-area .lesson-links .exam-toggle-btn:active { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(var(--accent-rgb), 0.07) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.85), 0 0 0 2px rgba(var(--accent-rgb), 0.12), 0 6px 14px rgba(var(--accent-rgb), 0.12) !important; outline: none !important; font-weight: 900 !important; transform: translateY(-1px) !important; } html body .content-area .lesson-links .res-toggle:hover i, html body .content-area .lesson-links .res-toggle:focus i, html body .content-area .lesson-links .res-toggle:active i, html body .content-area .lesson-links .exam-toggle-btn:hover i, html body .content-area .lesson-links .exam-toggle-btn:focus i, html body .content-area .lesson-links .exam-toggle-btn:active i { color: var(--accent-600) !important; } /* 3) Dark mode neutral remembered/open-panel state. */ html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), html.dark-mode body .content-area .lesson-links .res-toggle[aria-expanded="true"], html.dark-mode body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"], .dark-mode .content-area .lesson-links .res-toggle.kind-visited, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:link, .dark-mode .content-area .lesson-links .res-toggle.kind-visited:visited, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), .dark-mode .content-area .lesson-links .res-toggle.last-open-kind, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:link, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind:visited, .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"], .dark-mode .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] { background: #1e293b !important; background-image: none !important; border-color: rgba(var(--accent-rgb), 0.25) !important; color: #cbd5e1 !important; box-shadow: none !important; font-weight: 700 !important; text-shadow: none !important; filter: none !important; transform: none !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i, html.dark-mode body .content-area .lesson-links .res-toggle[aria-expanded="true"] i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i, .dark-mode .content-area .lesson-links .res-toggle.kind-visited i, .dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, .dark-mode .content-area .lesson-links .res-toggle.last-open-kind i, .dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i, .dark-mode .content-area .lesson-links .res-toggle[aria-expanded="true"] i, .dark-mode .content-area .lesson-links .exam-toggle-btn[aria-expanded="true"] i { color: var(--accent) !important; text-shadow: none !important; filter: none !important; } /* 4) Dark interaction only while hovering/focusing/clicking. */ html.dark-mode body .content-area .lesson-links .res-toggle:hover, html.dark-mode body .content-area .lesson-links .res-toggle:focus, html.dark-mode body .content-area .lesson-links .res-toggle:active, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:hover, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:focus, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:active, .dark-mode .content-area .lesson-links .res-toggle:hover, .dark-mode .content-area .lesson-links .res-toggle:focus, .dark-mode .content-area .lesson-links .res-toggle:active, .dark-mode .content-area .lesson-links .exam-toggle-btn:hover, .dark-mode .content-area .lesson-links .exam-toggle-btn:focus, .dark-mode .content-area .lesson-links .exam-toggle-btn:active { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(var(--accent-rgb), 0.09) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.82), 0 0 0 2px rgba(var(--accent-rgb), 0.18), 0 8px 18px rgba(0, 0, 0, 0.22) !important; font-weight: 900 !important; transform: translateY(-1px) !important; } html.dark-mode body .content-area .lesson-links .res-toggle:hover i, html.dark-mode body .content-area .lesson-links .res-toggle:focus i, html.dark-mode body .content-area .lesson-links .res-toggle:active i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:hover i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:focus i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn:active i, .dark-mode .content-area .lesson-links .res-toggle:hover i, .dark-mode .content-area .lesson-links .res-toggle:focus i, .dark-mode .content-area .lesson-links .res-toggle:active i, .dark-mode .content-area .lesson-links .exam-toggle-btn:hover i, .dark-mode .content-area .lesson-links .exam-toggle-btn:focus i, .dark-mode .content-area .lesson-links .exam-toggle-btn:active i { color: var(--accent-600) !important; } /* Source style block: viewer-open-main-button-style-v3 */ /* Same style as the old M1 reference: text/icon mark only, no persistent fill. */ html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.kind-visited:link, html body .content-area .lesson-links .res-toggle.kind-visited:visited, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--surface) !important; background-image: none !important; border-color: var(--card-bd) !important; color: var(--accent-600) !important; box-shadow: none !important; font-weight: 900 !important; transform: none !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), body.dark-mode .content-area .lesson-links .res-toggle.kind-visited, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: #1e293b !important; background-image: none !important; border-color: rgba(var(--accent-rgb), 0.25) !important; color: var(--accent-600) !important; box-shadow: none !important; font-weight: 900 !important; transform: none !important; } /* Source style block: m1-last-card-only-glow-fix */ /* Final rule: opened/visited cards may keep their paint, but only the one latest target is allowed to keep the orange glow. */ .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } .dark-mode .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), .dark-mode .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), .dark-mode .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } .content-area .lesson-block.resource-opened-card.last-open-card, .content-area .lesson-block.last-open-card.resource-opened-card, .content-area .lesson-block.m1-simple-manual-glow, .content-area .lesson-block.m1-simple-breadcrumb-glow { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } .dark-mode .content-area .lesson-block.resource-opened-card.last-open-card, .dark-mode .content-area .lesson-block.last-open-card.resource-opened-card, .dark-mode .content-area .lesson-block.m1-simple-manual-glow, .dark-mode .content-area .lesson-block.m1-simple-breadcrumb-glow { border-color: var(--accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; } /* Source style block: m1-card-glow-behavior-final-lock */ /* ============================================================ FINAL CARD GLOW BEHAVIOR LOCK ------------------------------------------------------------ 1) Any card may glow while hovered/focused. 2) The card clicked/opened now glows immediately. 3) After refresh/back/new tab return, only the latest card keeps permanent glow. Old cards keep title/button paint only. ============================================================ */ /* Old/open/visited cards: no idle permanent glow unless they are the latest target. */ html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):not(:hover):not(:focus-within) { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } /* Temporary interaction glow: hover/focus works for every card, including old cards. */ html body .content-area .lesson-block:hover, html body .content-area .lesson-block:focus-within, html body .content-area .lesson-block.m1-simple-manual-glow, html body .content-area .lesson-block.m1-simple-breadcrumb-glow, html body .content-area .lesson-block.last-open-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block:hover, html.dark-mode body .content-area .lesson-block:focus-within, html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow, html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow, html.dark-mode body .content-area .lesson-block.last-open-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Source style block: m1-previous-cards-hover-glow-restore-fix */ /* Previous visited/opened cards must lose permanent glow when idle, but still glow normally while hovered/focused like every other card. */ html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within, html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within, html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.30), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html.dark-mode body .content-area .lesson-block.open:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within, html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within, html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):hover, html.dark-mode body .content-area .lesson-block.visited-card:not(.last-open-card):not(.m1-simple-manual-glow):not(.m1-simple-breadcrumb-glow):focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Source style block: m1-sub-resource-only-permanent-glow-lock-v2 */ /* Final lock: - Hover/focus glow still works for every card. - Permanent idle glow stays only on the latest real sub-resource opened. - Main card/category button clicks never create permanent glow. - Context menu alone never paints anything. */ html body .content-area .lesson-block.m1-simple-manual-glow:not(.last-open-card):not(:hover):not(:focus-within), html body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.last-open-card):not(:hover):not(:focus-within) { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow:not(.last-open-card):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.last-open-card):not(:hover):not(:focus-within) { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } /* Source style block: m1-final-visible-marks-last-resource-glow */ /* FINAL LOCK v6.23 - All visited/opened category buttons stay painted. - Only the latest real sub-resource card keeps permanent glow. - Every card can still glow on hover/focus/open interaction. - Right-click menu alone is not a visited/open action. */ html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.kind-visited:link, html body .content-area .lesson-links .res-toggle.kind-visited:visited, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24) !important; font-weight: 900 !important; transform: none !important; } html body .content-area .lesson-links .res-toggle.kind-visited i, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html body .content-area .lesson-links .res-toggle.last-open-kind i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: #ffffff !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--accent) !important; border-color: var(--accent) !important; color: #0f172a !important; box-shadow: 0 4px 12px rgba(var(--accent-300-rgb), 0.24) !important; font-weight: 900 !important; transform: none !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: #0f172a !important; } html body .content-area .lesson-block.resource-opened-card .lesson-title .title-text, html body .content-area .lesson-block.resource-opened-card .supervised-label, html body .content-area .lesson-block.visited-card .lesson-title .title-text, html body .content-area .lesson-block.visited-card .supervised-label { color: var(--accent-600) !important; font-weight: 900 !important; } html body .content-area .lesson-block.resource-opened-card .lesson-num, html body .content-area .lesson-block.resource-opened-card .supervised-num, html body .content-area .lesson-block.visited-card .lesson-num, html body .content-area .lesson-block.visited-card .supervised-num { border-color: rgba(var(--accent-600-rgb), 0.62) !important; color: var(--accent-600) !important; background: rgba(var(--accent-rgb), 0.12) !important; } /* Idle non-last cards: keep title/button paint, but no permanent glow. */ html body .content-area .lesson-block.resource-opened-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within), html body .content-area .lesson-block.visited-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within), html body .content-area .lesson-block.m1-simple-manual-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within), html body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within) { border-color: var(--card-bd) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface) !important; } html.dark-mode body .content-area .lesson-block.resource-opened-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.visited-card:not(.m1-real-last-resource-card):not(.last-open-card):not(.open):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.m1-simple-manual-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within), html.dark-mode body .content-area .lesson-block.m1-simple-breadcrumb-glow:not(.m1-real-last-resource-card):not(.last-open-card):not(:hover):not(:focus-within) { border-color: rgba(var(--accent-rgb), 0.18) !important; box-shadow: var(--shadow-sm) !important; background: #1e293b !important; } /* Hover/focus glow remains available for every card. */ html body .content-area .lesson-block:hover, html body .content-area .lesson-block:focus-within, html body .content-area .lesson-block.open { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.30), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block:hover, html.dark-mode body .content-area .lesson-block:focus-within, html.dark-mode body .content-area .lesson-block.open { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.28), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Permanent glow: exactly one latest real sub-resource card. */ html body .content-area .lesson-block.m1-real-last-resource-card, html body .content-area .lesson-block.resource-opened-card.last-open-card, html body .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px rgba(var(--accent-rgb), 0.32), var(--shadow-accent) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.025) 100%), var(--surface) !important; } html.dark-mode body .content-area .lesson-block.m1-real-last-resource-card, html.dark-mode body .content-area .lesson-block.resource-opened-card.last-open-card, html.dark-mode body .content-area .lesson-block.last-open-card.resource-opened-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.28), 0 0 24px rgba(var(--accent-rgb), 0.30), var(--shadow-accent-strong) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 100%), #0f172a !important; } /* Source style block: m1-opened-mark-old-reference-final-override */ /* Final override copied from the old M1 reference: no persistent fill on opened main buttons. */ html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.kind-visited:link, html body .content-area .lesson-links .res-toggle.kind-visited:visited, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: var(--surface) !important; background-image: none !important; border-color: var(--card-bd) !important; box-shadow: none !important; color: var(--accent-600) !important; font-weight: 900 !important; transform: none !important; } html body .content-area .lesson-links .res-toggle.kind-visited i, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html body .content-area .lesson-links .res-toggle.last-open-kind i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:link, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), body.dark-mode .content-area .lesson-links .res-toggle.kind-visited, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: #1e293b !important; background-image: none !important; border-color: rgba(var(--accent-rgb), 0.25) !important; box-shadow: none !important; color: var(--accent-600) !important; font-weight: 900 !important; transform: none !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i, body.dark-mode .content-area .lesson-links .res-toggle.kind-visited i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn) i, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } html body .content-area .lesson-links .res-toggle.kind-visited:hover, html body .content-area .lesson-links .res-toggle.kind-visited:focus, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus, html body .content-area .lesson-links .res-toggle.last-open-kind:hover, html body .content-area .lesson-links .res-toggle.last-open-kind:focus, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(var(--accent-rgb), 0.07) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.85), 0 0 0 2px rgba(var(--accent-rgb), 0.12), 0 6px 14px rgba(var(--accent-rgb), 0.12) !important; outline: none !important; transform: translateY(-1px) !important; } html body .content-area .lesson-links .res-toggle.kind-visited:hover i, html body .content-area .lesson-links .res-toggle.kind-visited:focus i, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover i, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus i, html body .content-area .lesson-links .res-toggle.last-open-kind:hover i, html body .content-area .lesson-links .res-toggle.last-open-kind:focus i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus i { color: var(--accent-600) !important; } /* Source style block: m1-opened-mark-dark-hover-final-override */ html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:hover, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:focus, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:hover, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:focus, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus, body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:hover, body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:focus, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:hover, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:focus, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(var(--accent-rgb), 0.09) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.82), 0 0 0 2px rgba(var(--accent-rgb), 0.18), 0 8px 18px rgba(0, 0, 0, 0.22) !important; outline: none !important; font-weight: 900 !important; transform: translateY(-1px) !important; } html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:hover i, html.dark-mode body .content-area .lesson-links .res-toggle.kind-visited:focus i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus i, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:hover i, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:focus i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus i, body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:hover i, body.dark-mode .content-area .lesson-links .res-toggle.kind-visited:focus i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):hover i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn):focus i, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:hover i, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind:focus i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):hover i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn):focus i { color: var(--accent-600) !important; } /* Source style block: m1-last-open-kind-persistent-hover-style */ /* Latest opened main button keeps the hover-style paint; older opened buttons stay as simple marks. */ html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(255, 255, 255, 0.96) 58%, rgba(var(--accent-rgb), 0.07) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.85), 0 0 0 2px rgba(var(--accent-rgb), 0.12), 0 6px 14px rgba(var(--accent-rgb), 0.12) !important; outline: none !important; font-weight: 900 !important; transform: none !important; } html body .content-area .lesson-links .res-toggle.last-open-kind i, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:link, html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind:visited, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn), body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(15, 23, 42, 0.96) 58%, rgba(var(--accent-rgb), 0.09) 100%) !important; border-color: var(--accent) !important; color: var(--accent-600) !important; box-shadow: inset 0 -3px 0 rgba(var(--accent-rgb), 0.82), 0 0 0 2px rgba(var(--accent-rgb), 0.18), 0 8px 18px rgba(0, 0, 0, 0.22) !important; outline: none !important; font-weight: 900 !important; transform: none !important; } html.dark-mode body .content-area .lesson-links .res-toggle.last-open-kind i, html.dark-mode body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i, body.dark-mode .content-area .lesson-links .res-toggle.last-open-kind i, body.dark-mode .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) i { color: var(--accent-600) !important; } /* Source style block: schoolep-open-kind-corner-triangle-v1 */ /* Corner triangle read mark for the four main resource buttons only. Arabic (RTL): top-left. French (LTR): top-right. */ html body .content-area { --open-kind-corner: rgba(var(--accent-600-rgb), .78); } html.dark-mode body .content-area, body.dark-mode .content-area { --open-kind-corner: rgba(var(--accent-600-rgb), .88); } html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn), html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn) { position: relative !important; overflow: hidden !important; } html body .content-area .lesson-links .res-toggle.kind-visited::after, html body .content-area .lesson-links .res-toggle.last-open-kind::after, html body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn)::after, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { content: ""; position: absolute; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; opacity: .72; } /* Arabic / RTL: cut triangle in the top-left corner. */ html[dir="rtl"] body .content-area .lesson-links .res-toggle.kind-visited::after, html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn)::after, html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { left: 0; right: auto; border-top: 22px solid var(--open-kind-corner); border-right: 22px solid transparent; } /* French / LTR: cut triangle in the top-right corner. */ html[dir="ltr"] body .content-area .lesson-links .res-toggle.kind-visited::after, html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn)::after, html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { right: 0; left: auto; border-top: 22px solid var(--open-kind-corner); border-left: 22px solid transparent; } /* The latest opened kind is slightly larger and fully visible. */ html body .content-area .lesson-links .res-toggle.last-open-kind::after, html body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { opacity: 1; } html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { border-top-width: 27px; border-right-width: 27px; } html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { border-top-width: 27px; border-left-width: 27px; } @media (max-width: 575.98px) { html[dir="rtl"] body .content-area .lesson-links .res-toggle.kind-visited::after, html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn)::after { border-top-width: 18px; border-right-width: 18px; } html[dir="ltr"] body .content-area .lesson-links .res-toggle.kind-visited::after, html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.kind-visited:not(.supervised-toggle-btn)::after { border-top-width: 18px; border-left-width: 18px; } html[dir="rtl"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="rtl"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { border-top-width: 23px; border-right-width: 23px; } html[dir="ltr"] body .content-area .lesson-links .res-toggle.last-open-kind::after, html[dir="ltr"] body .content-area .lesson-links .exam-toggle-btn.last-open-kind:not(.supervised-toggle-btn)::after { border-top-width: 23px; border-left-width: 23px; } } /* V229.81 — canonical Level 3 subject hero title: text only. The subject icon exists only as the hero background watermark. */ .content-area .sp-hero #page-title { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: center; } .content-area .sp-hero #page-title > .schoolep-subject-hero-title-text { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } /* V171 — main Level 3 resource buttons: keep the round opened dot only. No bottom cut/underline is allowed on دروس/تمارين/كويزات/فيديوهات. */ html body .content-area .lesson-links .res-toggle.kind-visited, html body .content-area .lesson-links .res-toggle.kind-visited:link, html body .content-area .lesson-links .res-toggle.kind-visited:visited, html body .content-area .lesson-links .res-toggle.last-open-kind, html body .content-area .lesson-links .res-toggle.last-open-kind:link, html body .content-area .lesson-links .res-toggle.last-open-kind:visited { position: relative !important; box-shadow: none !important; } html body .content-area .lesson-links .res-toggle.kind-visited::after, html body .content-area .lesson-links .res-toggle.last-open-kind::after { content: "" !important; position: absolute !important; inset-block-start: 7px !important; inset-inline-start: 7px !important; width: 7px !important; height: 7px !important; border: 0 !important; border-radius: 50% !important; background: var(--accent) !important; opacity: .92 !important; pointer-events: none !important; box-shadow: none !important; } html body .content-area .lesson-links .res-toggle.kind-visited:hover, html body .content-area .lesson-links .res-toggle.kind-visited:focus, html body .content-area .lesson-links .res-toggle.kind-visited:active, html body .content-area .lesson-links .res-toggle.last-open-kind:hover, html body .content-area .lesson-links .res-toggle.last-open-kind:focus, html body .content-area .lesson-links .res-toggle.last-open-kind:active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent) !important; } /* ===================================================================== V229.85 — LEVEL-3 MOBILE FAST PAINT Mobile/tablet only. Desktop is intentionally unchanged. ===================================================================== */ @media (max-width: 960px), (hover: none) and (pointer: coarse) { /* Skip style/layout/paint work for off-screen semester/card content. */ html body .content-area #math-terms-wrap > .term-card { content-visibility: auto !important; contain: layout paint style !important; contain-intrinsic-size: auto 520px !important; } html body .content-area #math-terms-wrap .lesson-block { content-visibility: auto !important; contain: layout paint style !important; contain-intrinsic-size: auto 138px !important; } html body .content-area #math-terms-wrap .lesson-block.open, html body .content-area #math-terms-wrap .lesson-block:focus-within { content-visibility: visible !important; contain-intrinsic-size: auto !important; } html body .content-area .res-panel:not(.open), html body .content-area .res-panel[hidden] { content-visibility: hidden !important; contain: strict !important; contain-intrinsic-size: 0 0 !important; } /* Touch does not need desktop hover animation or repeated shadow rasterization. */ html body .content-area .lesson-block, html body .content-area .res-panel, html body .content-area .res-item, html body .content-area .lesson-links .res-toggle, html body .content-area .exam-toggle-btn, html body .content-area .supervised-toggle-btn, html body .content-area .hero-inline-btn, html body .content-area .unit-divider { animation: none !important; transition: none !important; filter: none !important; -webkit-filter: none !important; transform: none !important; will-change: auto !important; } html body .content-area .lesson-block, html body .content-area .res-item, html body .content-area .unit-divider { box-shadow: none !important; } html body .content-area .lesson-block.open, html body .content-area .lesson-links .res-toggle[aria-expanded="true"] { box-shadow: none !important; } /* Remove GPU-expensive glass blur from Level-3 mobile drawers/overlays. */ .sidebar-overlay, #levels-overlay.sidebar-overlay, #levels-overlay.levels-overlay, .mobile-sidebar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; } .content-area button, .content-area a, .content-area .res-toggle, .content-area .exam-toggle-btn { touch-action: manipulation; } }