/* ─── Human Intelligence Learner Platform — Platform-specific styles ──────── Milestone 18.4 (Human Intelligence Learner Platform, Phase 1). Loaded *in addition to* main.css (see platform.html) — every color, radius, border, and button style below reuses main.css's own existing custom properties and classes (--gold/--border/--text-*/--radius-*/ .btn/.btn-gold/.btn-ghost/.btn-quiet/.loading-ring), consistent with this milestone's "no duplicated infrastructure" instruction. Only genuinely new layout — Programme cards, the Activity table, reserved- placeholder sections — gets a new `.plat-*` class here. Nothing in this file redefines a main.css custom property or class. */ /* ─── Experience Runtime — Milestone 18.5 ─────────────────────────────────── The Experience Runtime (platform-experience-runtime.js) deliberately reuses admin-eb-preview.js's own visual language and class names verbatim (.eb-pw-*/.eb-preview-*/.eb-scale-*/.eb-slider-*/.eb-fb-*/.lc-preview-*/ .eb-chip) — that file already proved this exact interactive design for the Interaction Library's 4 types. Those classes live in admin.css, which platform.html does not load (admin.css is the authoring-tool bundle, not the learner-facing one) — so the rules below are copied here verbatim from admin.css, unchanged, purely to make the SAME class names resolve inside the Platform's own CSS bundle. This is presentation duplication across two different page bundles, not logic duplication — the exact same pattern main.css/admin.css already both use for si-hero/ si-canvas-wrap/editorial-canvas/sal-*/question-*/completion-*/ reflection-* (all already defined in main.css, which both platform.html and index.html load, and duplicated again in admin.css for the Builder's own preview column). Every custom property referenced below (--gold/--gold-soft/--bg-card/--bg-input/--text-*/--radius-*/--border/ --transition/--font-display) already exists in main.css, which platform.html loads immediately above this file — nothing new is introduced. */ .eb-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--gold-soft); color: var(--text-primary); font-size: 0.78rem; font-weight: 500; padding: 0.28rem 0.55rem 0.28rem 0.7rem; border-radius: 999px; } .eb-chip--static { background: var(--bg-input); } .lc-preview-characters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.35rem; } .lc-preview-context { font-size: 1rem; line-height: 1.75; color: var(--text-primary); max-width: 640px; margin-bottom: 1.5rem; white-space: pre-wrap; } .lc-preview-reflection { background: var(--bg-card); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1rem 1.25rem; } .lc-preview-reflection-eyebrow { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.4rem; } .lc-preview-reflection p { font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); font-style: italic; margin: 0; } .eb-fade-in { animation: fadeSlideIn 0.22s ease both; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } } .eb-preview-empty-frame { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 2rem 1rem; font-style: italic; } .eb-preview-guidance { font-size: 0.9rem; font-style: italic; color: var(--text-secondary); margin-bottom: 1rem; } .eb-preview-option-explain { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.35rem; font-style: italic; } .eb-preview-agreement { padding: 0.5rem 0 0.25rem; } .eb-scale-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.9rem; } .eb-scale-dot { flex: 1; height: 14px; border-radius: 999px; border: 1.5px solid var(--gold-soft); background: var(--bg-card); max-width: 32px; cursor: pointer; transition: var(--transition); padding: 0; appearance: none; outline: none; font: inherit; } .eb-scale-dot:hover { background: var(--gold-soft); } .eb-scale-dot--selected { background: var(--gold) !important; border-color: var(--gold) !important; } .eb-scale-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); } .eb-preview-slider { padding: 0.5rem 0 0.25rem; } .eb-slider-input { width: 100%; accent-color: var(--gold); margin-bottom: 0.9rem; } .eb-slider-labels { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--text-muted); } .eb-slider-value { font-weight: 700; color: var(--gold); font-size: 0.9rem; } .eb-fb-message { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin: 0 0 1.25rem; } .eb-fb-message--coaching { background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; } .eb-fb-message--coaching p { margin: 0; line-height: 1.65; color: var(--text-secondary); } .eb-fb-message-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8B6A12; margin-bottom: 0.4rem; } .eb-fb-encouragement { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-primary); margin: 0 0 1.25rem; } .eb-fb-movie-callback { display: flex; align-items: flex-start; gap: 0.65rem; background: var(--bg-input); border-radius: var(--radius-md); padding: 0.85rem 1rem; margin-bottom: 1.25rem; } .eb-fb-movie-callback p { margin: 0; line-height: 1.6; color: var(--text-secondary); } .eb-fb-movie-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; } .eb-fb-quote { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; line-height: 1.55; color: var(--text-primary); border-left: 2px solid var(--gold); padding-left: 1.1rem; margin: 1.5rem 0; } .eb-fb-followup { margin-top: 1.75rem; } .eb-fb-followup-prompt { font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.75rem; } .eb-pw-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .eb-pw-toolbar-main { flex: 1; min-width: 0; } .eb-pw-toolbar .assessment-progress-bar { margin-bottom: 0.9rem; } /* Milestone 24.6 Issue 4: the Experience runtime previously had no "return to Programme" action at all until the Complete/Already-Completed screen — a learner exiting mid-Experience had nothing to click. This reuses the toolbar's own existing flex/space-between layout (see .eb-pw-toolbar above) as a second child alongside .eb-pw-toolbar-main, so it sits in the one piece of chrome present on every step, not a new band. */ .eb-pw-toolbar-back { flex-shrink: 0; color: var(--text-secondary); font-size: 0.85rem; text-decoration: none; white-space: nowrap; padding-top: 0.15rem; } .eb-pw-toolbar-back:hover { color: var(--gold); } .eb-pw-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .eb-pw-crumb { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text-muted); } .eb-pw-crumb.done { color: var(--text-secondary); } .eb-pw-crumb.active { color: var(--gold); } .eb-pw-crumb-sep { font-size: 0.7rem; color: var(--border); } .eb-pw-stage-wrap { margin-bottom: 1.5rem; } .eb-pw-stage { min-height: 0; } .eb-pw-stage .si-canvas-wrap { padding: 2rem 0 0; } /* M24.4 Priority 1 fix: this used to be the unscoped `.eb-pw-stage .editorial-canvas { margin: 0; }`, which stripped the canvas's own `margin: 0 auto` centring (main.css's .editorial-canvas — see that file's own comment: "horizontal centring is the canvas's own job") on EVERY runtime step, not just the two-column Reference Panel layout it was written for. Most Activities have no Reference Panel at all (an Activity-level authoring choice, not every Activity's default), so in practice this made the canvas render flush against the left edge with a large dead void on the right on most Assessment/Experience steps — exactly the "left sticky reference margin ... no longer presenting as intended" regression this milestone exists to fix. Scoping the reset to `.eb-rt-with-refpanel` (the class only present when a Reference Panel is actually rendering beside the stage, see platform-reference-panel.js) restores centred Premium balance for the common no-panel case while keeping the flex-fill behavior the two-column case still needs. */ .eb-rt-with-refpanel .eb-pw-stage .editorial-canvas { margin: 0; } /* Round 4 correction: Round 3's own comment here assumed the sticky_sidebar remaining column is always narrower than editorial-canvas's 960px cap — true only on compact screens. computeAssessmentReferenceBlocks() (platform-assessment-runtime.js) hardcodes displayMode: "sticky_sidebar" for every Assessment Reference Panel — Assessment never uses top_banner — so this is the ONLY rule that ever governs the Assessment stage's horizontal position when a Reference Panel is present; the :has(.eb-rt-refpanel--banner) override two rules below never reaches it. On any desktop-width screen, the remaining flex column (page width minus the 340px sidebar and 2rem gap) is comfortably wider than 960px, so margin: 0 pinned the canvas flush against the sidebar and dumped 100% of the leftover slack on the right — "correct width, but left-aligned" as reported live. margin: 0 auto restores centring within that remaining column whenever there's slack to distribute (below 960px it's a no-op, width:100% already fills the column edge-to-edge either way — mobile/ tablet reflow, where the column becomes 100% of the page, is unaffected for the same reason). Left as its own rule (not merged into the .eb-pw-stage one above) deliberately: Experience's own sidebar-mode "hug the sidebar" presentation wasn't reported as a problem and this fix is scoped to the one runtime that was. */ .eb-rt-with-refpanel .qa-canvas-wrap .editorial-canvas { margin: 0 auto; } .eb-pw-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); margin-bottom: 1.5rem; } .eb-pw-nav-center { display: flex; align-items: center; gap: 0.9rem; } .eb-pw-nav-counter { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } /* Milestone 19 Phase P6 — schemaVersion-2 Learner Runtime (Section/Block walk) */ /* .eb-option-btn copied verbatim from admin.css per this file's own established convention */ .eb-option-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); width: 26px; height: 26px; cursor: pointer; font-size: 0.82rem; line-height: 1; transition: var(--transition); } .eb-option-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); } .eb-option-btn:disabled { opacity: 0.35; cursor: default; } .eb-rt-narrative { font-size: 1rem; line-height: 1.7; color: var(--text); margin-bottom: 1.25rem; } .eb-rt-narrative-prompt { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin-top: 1rem; } .eb-rt-summary-title { font-family: var(--font-serif, serif); font-size: 1.3rem; color: var(--text); margin-bottom: 0.75rem; } .eb-rt-summary-body { font-size: 0.98rem; line-height: 1.7; color: var(--text-muted); } .eb-rt-ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .eb-rt-ranking-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); } .eb-rt-ranking-text { flex: 1; font-size: 0.95rem; color: var(--text); } .eb-rt-ranking-actions { display: flex; gap: 0.4rem; } .eb-rt-checkbox { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0; cursor: pointer; } .eb-rt-with-refpanel { display: flex; gap: 2rem; align-items: flex-start; } .eb-rt-with-refpanel .eb-pw-stage { flex: 1; min-width: 0; } /* Round 3 root-cause fix: the Experience runtime's stage wrapper is .eb-pw-stage (rule above), but the Assessment runtime (platform-assessment-runtime.js) wraps its own stage in .qa-canvas-wrap instead — a pre-existing class-name mismatch from when this two-column Reference Panel treatment was extended from Experience to Assessment (M24 Step D). Every flex-fill rule keyed to .eb-pw-stage above silently never matched a real Assessment element, so the Assessment stage was never a proper flex: 1 item at all: it fell back to default flex (0 1 auto), sizing itself to its own content's preferred width instead of filling the row/column — exactly the "assessment becomes much narrower whenever Reference Material exists" symptom. This is a pure CSS addition (no markup/JS change, no rename of the existing class) so the Assessment stage now gets the identical flex-fill treatment Experience already had. */ .eb-rt-with-refpanel .qa-canvas-wrap { flex: 1; min-width: 0; } /* UX fix (Video Reference Material follow-up): top_banner is meant to render as a full-width strip ABOVE the stage — but .eb-rt-with-refpanel above is a flex ROW, built for the sticky_sidebar case. A banner-mode panel (`.eb-rt-refpanel--banner`, width: 100%) dropped into that row fights the stage for horizontal space instead of stacking, squeezing the question card narrower than its normal reading width until the existing 900px breakpoint kicks in. Force column layout whenever a banner panel is present, at every viewport width, so the stage always keeps its normal width and the reference content (video or otherwise) simply sits above it, full width, as the "banner" name always implied. :has() is supported by every evergreen browser this platform targets; a browser without it just keeps the pre-existing row behaviour above 900px for banner mode only — no worse than before this fix, not a new risk. */ /* Round 2: align-items: flex-start (base rule above) is a sidebar-mode concern — it keeps the sticky sidebar from stretching to the stage's full height. In the banner case forced to column layout here, that same flex-start also applies to the CROSS axis, which in a column flex container is width: neither the banner nor the stage stretch to fill the row, so the stage — and the editorial-canvas/question card inside it — shrinks to its content's own preferred width instead of the full available width. That's the "split-stage width constraint" that outlived its purpose once banner mode stacks: restore full-width stretch for both children so the stage returns to exactly the width it used to fill before Reference Material existed. */ .eb-rt-with-refpanel:has(.eb-rt-refpanel--banner) { flex-direction: column; align-items: stretch; } /* Round 3: banner mode's stage is now the full page width again (fixes above), matching the no-Reference-Panel case exactly — so it should also look like that case: the canvas centred within that full width via main.css's own `.editorial-canvas { margin: 0 auto }`, not pinned to the left edge. The two `margin: 0` rules above exist specifically for the sticky_sidebar case (a genuinely narrower column, where flush-left filling is the intended look) — this override restores centring only for banner mode, leaving sidebar mode's own margin: 0 untouched. */ .eb-rt-with-refpanel:has(.eb-rt-refpanel--banner) .eb-pw-stage .editorial-canvas, .eb-rt-with-refpanel:has(.eb-rt-refpanel--banner) .qa-canvas-wrap .editorial-canvas { margin: 0 auto; } /* Milestone 24 Part 7: was `background: var(--surface, transparent)` — --surface was never actually defined anywhere in main.css, so this silently rendered transparent on every page, not a real card. Fixed to `var(--bg-card)`, which made the panel a real card — but --bg-card is pure #FFFFFF, and Milestone 24.6 live testing flagged that a solid white box reads as a foreign "dashboard card" against the ivory/gold Premium canvas (same failure mode .results-chart-card/.feedback-card in main.css already document and fixed: "these panels no longer read as white dashboard cards sitting on ivory"). Reusing that exact established pattern here — var(--premium-ivory) (== --bg-deep, the page's own background) plus a faint gold hairline border — so the Reference Panel (and every reference asset inside it, which has no background of its own and simply inherits this container) reads as part of the Premium page instead of a white box breaking the design. */ .eb-rt-refpanel { border: 1px solid rgba(201, 162, 75, 0.25); border-radius: var(--radius-md); background: var(--premium-ivory); } /* Milestone 24.6 Issue 2: was a fixed 280px — live testing on desktop found this read as cramped/narrow next to the ~960px stage, not using the available desktop width the Premium two-column layout was meant to give it. 340px is still deliberately far short of the stage's own width (this is a supporting sidebar, not a second stage), but gives real reference assets (images, PDF cards, longer quotes) enough room to read as intentional rather than an afterthought. Sticky/scroll/responsive behaviour below is unchanged. */ .eb-rt-refpanel--sidebar { width: 340px; flex-shrink: 0; padding: 1.25rem; position: sticky; top: 1.5rem; align-self: flex-start; max-height: calc(100vh - 3rem); overflow-y: auto; } .eb-rt-refpanel--banner { width: 100%; padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .eb-rt-refpanel--drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; padding: 1.25rem; transform: translateX(100%); transition: transform var(--transition, 0.2s ease); z-index: 40; overflow-y: auto; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); } .eb-rt-refpanel--drawer.eb-rt-refpanel--open { transform: translateX(0); } .eb-rt-refpanel-drawer-toggle { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 41; border-radius: 999px; padding: 0.65rem 1.1rem; background: var(--gold); color: var(--bg, #fff); border: none; cursor: pointer; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .eb-rt-refblock { margin-bottom: 1.25rem; } .eb-rt-refblock:last-child { margin-bottom: 0; } .eb-rt-refasset { margin-bottom: 0.9rem; } .eb-rt-refasset img { max-width: 100%; border-radius: var(--radius-sm); } .eb-rt-refasset-caption { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.5; } /* Milestone: Video Reference Material (V1) — responsive width, matches the image treatment above (max-width: 100%, same radius). display: block avoids the few stray pixels of inline-element whitespace under