on dashboard.html by WorkspacePane (js/workspace-pane.src.js). When open, gets class .wsp-pane-open and #workspace-pane-root becomes position:fixed covering the viewport below the 56px fixed nav. The pane root IS the scroll container; the back-strip is pinned at the top of it (flex column), and the 3-pane .wsp-layout grid scrolls below. Loaded on dashboard.html alongside main.css + homepage-v7.css, so the site's global design tokens (--parchment, --forest, --sienna, --ink, --rule, etc.) and the Fraunces / DM Sans / IBM Plex Mono fonts are available globally. To be robust if a global token is missing, an aliases block (scoped on #workspace-pane-root) defines every token the mockup used that isn't global. NOT PORTED (intentionally — see the per-section notes): · the mockup's .tour / .tour__* coachmark CSS → separate Phase-C module (wt-prefixed CSS file, its own concern) · the mockup's .nav site-nav styling → the real nav is the dashboard's, already styled · the mockup's [data-tip] tooltip primitive → production uses the shared js/tooltip.js (window.GCTooltip), which brings its own CSS ╔════════════════════════════════════════════════════════════════════════════╗ ║ CLASS-NAME MAPPING — mockup class → production (wsp-) class ║ ║ (Task B2 ports the mockup's HTML structure using these names.) ║ ╠════════════════════════════════════════════════════════════════════════════╣ ║ Shell / containers ║ ║ .wsp → .wsp-layout (the centered grid) ║ ║ .strip → .wsp-back-strip ║ ║ .strip__inner → .wsp-back-strip__inner ║ ║ .strip__back → .wsp-back-strip__back (the back button) ║ ║ .strip__divider → .wsp-back-strip__divider ║ ║ .strip__title → .wsp-back-strip__title ║ ║ .strip__deadline → .wsp-back-strip__deadline ║ ║ .mob-tabs → .wsp-mob-tabs (mobile top tab bar) ║ ║ .mob-tabs button .is-active → .wsp-mob-tabs button.is-active ║ ║ ║ ║ Rail (left column — your pipeline) ║ ║ .rail → .wsp-rail ║ ║ .rail__group → .wsp-rail__group ║ ║ .rail__label → .wsp-rail__label ║ ║ .rail__item → .wsp-rail__item ║ ║ .rail__item.is-active → .wsp-rail__item.is-active ║ ║ .rail__title → .wsp-rail__title ║ ║ .rail__stage → .wsp-rail__stage ║ ║ .rail__stage--submitted → .wsp-rail__stage--submitted ║ ║ .rail__stage--drafting → .wsp-rail__stage--drafting ║ ║ .rail__hub → .wsp-rail__hub ║ ║ .rail__hub a / button.hublink → .wsp-rail__hub a / button.wsp-hublink ║ ║ .rail__profile → .wsp-rail__profile ║ ║ .rail__profile-icon → .wsp-rail__profile-icon ║ ║ .rail__profile-text → .wsp-rail__profile-text ║ ║ .rail__profile-cta → .wsp-rail__profile-cta ║ ║ ║ ║ Outline (middle column — sections / documents / other) ║ ║ .outline → .wsp-outline ║ ║ .outline__head → .wsp-outline__head ║ ║ .outline__title → .wsp-outline__title ║ ║ .outline__meta → .wsp-outline__meta ║ ║ .outline__meta-stage → .wsp-outline__meta-stage ║ ║ .outline__meta-dot → .wsp-outline__meta-dot ║ ║ .outline__section → .wsp-outline__section ║ ║ .outline__section-label → .wsp-outline__section-label ║ ║ .outline__section-count → .wsp-outline__section-count ║ ║ .row → .wsp-row ║ ║ .row.is-active → .wsp-row.is-active ║ ║ .row.is-done → .wsp-row.is-done ║ ║ .row.is-progress → .wsp-row.is-progress ║ ║ .row__check → .wsp-row__check ║ ║ .row__title → .wsp-row__title ║ ║ .row__title small → .wsp-row__title small ║ ║ .row__meta → .wsp-row__meta ║ ║ ║ ║ Editor (right column) ║ ║ .editor → .wsp-editor ║ ║ .editor__hgroup → .wsp-editor__hgroup ║ ║ .editor__breadcrumb → .wsp-editor__breadcrumb ║ ║ .editor__breadcrumb .sep → .wsp-editor__breadcrumb .sep ║ ║ .editor__h1 → .wsp-editor__h1 ║ ║ .editor__sub → .wsp-editor__sub ║ ║ ║ ║ Persistent intel ribbon ║ ║ .ribbon → .wsp-ribbon ║ ║ .ribbon__cell → .wsp-ribbon__cell ║ ║ .ribbon__cell--ev → .wsp-ribbon__cell--ev ║ ║ .ribbon__cell--deadline → .wsp-ribbon__cell--deadline ║ ║ .ribbon__label → .wsp-ribbon__label ║ ║ .ribbon__label .qmark → .wsp-ribbon__label .wsp-qmark ║ ║ .ribbon__value → .wsp-ribbon__value ║ ║ .ribbon__detail → .wsp-ribbon__detail ║ ║ .ribbon__bar → .wsp-ribbon__bar ( > i inner fill kept) ║ ║ ║ ║ "Your next move" callout (dismissible) ║ ║ .nextmove → .wsp-nextmove ║ ║ .nextmove.is-dismissed → .wsp-nextmove.is-dismissed ║ ║ .nextmove__icon → .wsp-nextmove__icon ║ ║ .nextmove__body → .wsp-nextmove__body ║ ║ .nextmove__label → .wsp-nextmove__label ║ ║ .nextmove__title → .wsp-nextmove__title ║ ║ .nextmove__why → .wsp-nextmove__why ║ ║ .nextmove__cta → .wsp-nextmove__cta ║ ║ .nextmove__dismiss → .wsp-nextmove__dismiss ║ ║ .nextmove-pill → .wsp-nextmove-pill ║ ║ body.is-nextmove-dismissed → body.wsp-is-nextmove-dismissed ║ ║ ║ ║ Smart guidance ("Reviewer wants" accordion) ║ ║ .guide-smart → .wsp-guide ║ ║ .guide-smart.is-open → .wsp-guide.is-open ║ ║ .guide-smart__head → .wsp-guide__head ║ ║ .guide-smart__label → .wsp-guide__label ║ ║ .guide-smart__one-line → .wsp-guide__one-line ║ ║ .guide-smart__caret → .wsp-guide__caret ║ ║ .guide-smart__body → .wsp-guide__body (p / ol / li / strong kept) ║ ║ ║ ║ Write surface (the textarea + footer) ║ ║ .write → .wsp-write ║ ║ .write__area → .wsp-write__area ║ ║ .write__foot → .wsp-write__foot ║ ║ .write__count → .wsp-write__count ( strong / .target kept) ║ ║ .write__progress → .wsp-write__progress ( > i inner fill kept) ║ ║ .write__saved → .wsp-write__saved ║ ║ ║ ║ AI co-pilot (bar + quota + suggestion panel) ║ ║ .copilot → .wsp-copilot ║ ║ .copilot__head → .wsp-copilot__head ║ ║ .copilot__label → .wsp-copilot__label ║ ║ .copilot__label-dot → .wsp-copilot__label-dot ║ ║ .copilot__quota → .wsp-copilot__quota ( strong kept) ║ ║ .copilot__quota .quota-track → .wsp-copilot__quota .wsp-quota-track ( > i) ║ ║ .copilot__bar → .wsp-copilot__bar ║ ║ .copilot__btn → .wsp-copilot__btn ( svg kept) ║ ║ .copilot__panel → .wsp-copilot__panel ║ ║ .copilot__panel-foot → .wsp-copilot__panel-foot ( a kept) ║ ║ .sugg → .wsp-sugg ║ ║ .sugg__head → .wsp-sugg__head ║ ║ .sugg__badge → .wsp-sugg__badge ( .dot kept) ║ ║ .sugg__badge--profile → .wsp-sugg__badge--profile ║ ║ .sugg__conf → .wsp-sugg__conf ║ ║ .sugg__text → .wsp-sugg__text ( strong kept) ║ ║ .sugg__actions → .wsp-sugg__actions ( button / .is-primary) ║ ║ ║ ║ Production-only (kept from the OLD workspace-pane.css — no mockup equiv): ║ ║ #workspace-pane-root the pane root / scroll container ║ ║ #workspace-pane-root[hidden] no-space when closed ║ ║ body.wsp-pane-open takeover-active body flag ║ ║ .wsp-empty "no app selected" placeholder ║ ║ #workspace-pane-root[data-wsp-mobtab] active mobile tab (B4) — drives ║ ║ which single pane is visible <960px / short ║ ║ .wsp-ai-copilot-mount empty mount point the co-pilot renders to ║ ╚════════════════════════════════════════════════════════════════════════════╝ ──────────────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════════ 1. PANE ROOT + TAKEOVER MECHANISM (production — preserved from the old CSS) ════════════════════════════════════════════════════════════════════════════ */ #workspace-pane-root { width: 100%; margin-top: 24px; /* ── Token aliases scoped to the pane ─────────────────────────────────────── These shadow the global tokens so the pane renders correctly even if main.css / homepage-v7.css didn't define one. The mockup's local names (--paper, --forest-l, --amber, --rail-w, etc.) live here so the rest of this file reads exactly like the mockup's