/* * learning-embed.css — styling for the Learning section: the /learning hub's * guide grid and the guide pages under /learning/. It is the fourth * sibling of sample-embed.css / student-diagrams.css / teacher-diagrams.css * and keeps the same contract: * * 1. Never declare `display` on the BARE `.learning-embed` selector. The * sheet is unlayered, site-tailwind.css puts every utility in * `@layer utilities`, and an unlayered declaration outranks `.hidden` * regardless of specificity (the wizard-page bug sample-embed.css * documents). Descendant rules are safe. * 2. For the same layering reason these rules beat Tailwind utilities on the * same element, so content inside `.learning-embed` is written in the * component vocabulary below, never in raw Tailwind utilities. * 3. Tokens are declared on `.learning-embed`, never on `:root`, so nothing * leaks into the surrounding page. Colors come only from the palette * already used by sample-embed.css / semantic-colors.ts; the bar fills * mirror SEMANTIC_BAR_FILL. Never hand-pick a new color here. * 4. No JavaScript-independent surprises: no fixed or sticky positioning, * z-index at or below 10, and nothing that scrolls the page body (wide * content scrolls inside its own .table-scroll). * * Companion script: learning-embed.js. Its widgets are data-attribute driven * with a `data-lrn-*` vocabulary that is deliberately DISJOINT from * sample-embed's `data-toggle` / `data-hl-*`, so the two sheets' guard tests * can never trip over each other's markup. No-JS contract: every pane ships * visible (with .pane-label captions), controls stay CSS-hidden until the * script stamps [data-lrn-js] on , and highlight/checklist triggers ship * as plain elements that only become interactive once JS runs. */ /* ── Scoped design tokens ── */ .learning-embed { --brand-blue: #3b82f6; --brand-navy: #1f2937; --surface: #ffffff; --border: rgba(31, 41, 55, .12); --text-primary: #1f2937; --text-secondary: rgba(31, 41, 55, .78); --text-tertiary: rgba(31, 41, 55, .62); --text-quaternary: rgba(31, 41, 55, .42); --shadow-warm-sm: 0 1px 3px rgba(31, 41, 55, .05), 0 1px 2px rgba(31, 41, 55, .04); --shadow-warm-md: 0 4px 14px rgba(31, 41, 55, .06), 0 2px 4px rgba(31, 41, 55, .04); color: var(--text-primary); } /* ══ Guide-page header: breadcrumb, title, subtitle ═════════════════════ A reference library opens quietly. There is no colored hero here: the flat blue bar above carries the brand, and the article starts with the same breadcrumb trail the BreadcrumbList JSON-LD has always described. */ .learning-embed .guide-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .learning-embed .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--text-tertiary); font-size: .8rem; font-weight: 600; } .learning-embed .crumbs a { color: var(--text-tertiary); } .learning-embed .crumbs a:hover { color: var(--brand-blue); text-decoration: underline; } .learning-embed .crumb-sep { color: var(--text-quaternary); } .learning-embed .crumbs [aria-current="page"] { color: var(--text-secondary); } .learning-embed .guide-header .eyebrow { display: block; margin-top: 1.1rem; } .learning-embed .guide-h1 { color: var(--brand-navy); font-size: clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; max-width: 46rem; margin-top: .45rem; } .learning-embed .guide-header .updated { margin-top: 1rem; } /* ══ Table of contents ══════════════════════════════════════════════════ Only the SKIN lives here. The rail is positioned by the page shell (a Tailwind `lg:sticky`