/* grant-connect-deploy/css/workspace-pane.css
   ────────────────────────────────────────────────────────────────────────────
   WORKSPACE PANE — V2-REFINED DESIGN, PRODUCTION PORT (Task B1).

   Ported from the approved standalone mockup
       grant-connect-deploy/mockups/workspace-v2-final.html
   adapted to the real viewport-takeover-overlay context on dashboard.html.

   The workspace pane is rendered into  <div id="workspace-pane-root">  on
   dashboard.html by WorkspacePane (js/workspace-pane.src.js). When open,
   <body> 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 <style>. */
  --wsp-parchment:    var(--parchment, #FAF7F2);
  --wsp-paper:        #FFFEF9;
  --wsp-paper-2:      #F4EFDE;
  --wsp-ink:          var(--ink, #1f2a24);
  --wsp-ink-2:        var(--ink-2, #3a4a42);
  /* QA polish round 2 (A3): bumped from #6a7770 (≈4.38:1 on parchment — just
     under AA) to ≈5.0:1. --wsp-ink-4 went from #98a39c (≈2.5:1 — well under AA
     for any text) to ≈4.6:1; it's only used on faint counts / conf labels /
     placeholders, but several of those are real text so they need to clear AA. */
  --wsp-ink-3:        #5e6b63;
  --wsp-ink-4:        #717e76;
  --wsp-forest:       var(--forest, #2D6A4F);
  --wsp-forest-d:     #1f4f3a;
  --wsp-forest-l:     #e6efe9;
  --wsp-forest-ll:    #f0f5f1;
  --wsp-sienna:       var(--sienna, #C4532B);
  --wsp-sienna-d:     #a4421e;
  --wsp-sienna-l:     #f7e9e0;
  --wsp-amber:        #b08300;
  --wsp-amber-l:      #f6efd6;
  --wsp-rule:         var(--rule, #e3decf);
  --wsp-rule-2:       var(--rule-2, #d3ccba);
  --wsp-paper-shadow: 0 1px 2px rgba(31,42,36,.04), 0 6px 22px -10px rgba(31,42,36,.09);
  --wsp-pop-shadow:   0 4px 28px -6px rgba(31,42,36,.22);

  --wsp-content-max:  1320px;     /* matches the dashboard nav's centered max-width — used by .wsp back-strip only */
  /* Sprint 2026-05-14: separate cap for the 3-column GRID, distinct from
     the back-strip cap. The grid expands with viewport so wider monitors /
     zoomed-out users get more usable space rather than fixed 1320px columns
     surrounded by whitespace. 1680px is a comfortable upper bound — it lines
     up with common "max app width" picks (Linear, Notion). Reading-comfort
     for the writing surface is enforced separately at .wsp-editor (820px). */
  --wsp-layout-max:   min(1680px, calc(100% - 32px));
  /* Column widths — match the v2-final mockup (commit ca9705a20). The
     drag handles sit in separate tracks (see grid-template-columns below)
     so these widths are the actual content widths. User-overrideable via
     the C5 column drag handles. */
  --wsp-rail-w:       208px;
  --wsp-outline-w:    324px;
  /* V2.1.1 (2026-05-14): inter-column gutter. Mockup used a 36px grid
     gap between rail | outline | write. Deployed previously had 4px
     drag-handle tracks + 0 column-gap which made the columns sit
     visually flush. New approach: wider handle TRACKS (24px) so the
     handle's visible 4px line is centered within a generous gutter. */
  --wsp-col-gutter:   24px;
  --wsp-nav-h:        56px;       /* the production fixed nav is 56px (mockup used 62) */
  --wsp-strip-h:      44px;

  /* spacing scale — used consistently so nothing sits flush against anything */
  --sp-1: 6px;  --sp-2: 10px; --sp-3: 14px; --sp-4: 20px;
  --sp-5: 28px; --sp-6: 36px; --sp-7: 48px;

  /* fonts (loaded globally on dashboard.html) */
  --wsp-font-display: "Fraunces", Georgia, serif;
  --wsp-font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --wsp-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* `hidden` attribute is the canonical "pane closed" signal (set by
   WorkspacePane.init/show/hide) → take no space. */
#workspace-pane-root[hidden] {
  display: none;
}

/* ── Viewport-takeover mode ──────────────────────────────────────────────────
   Applied via body.wsp-pane-open (toggled by _openPane / the workspace:closed
   listener in dashboard.src.js). The pane covers everything below the 56px
   fixed nav so the user focuses entirely on the workspace. Dashboard content
   scrolls back into view when the pane closes and the class is removed.
   #workspace-pane-root is the scroll container; on mobile it's a flex column so
   the back-strip + mob-tabs pin at the top and .wsp-layout fills the rest. */
body.wsp-pane-open {
  overflow: hidden;
}
/* QA polish round 2 (A1): while the workspace overlay is open, the marketing
   nav items are visually dimmed (the JS also sets [inert] on them so they're
   removed from the tab order / SR). The logo + the profile/account chip
   (.auth-buttons) stay fully visible — the workspace still "lives inside" the
   nav per the design decision, just with the exit ramps de-emphasised. */
body.wsp-pane-open #siteNav .nav__link,
body.wsp-pane-open #siteNav .nav-dropdown {
  opacity: 0.38;
  pointer-events: none;
  transition: opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  body.wsp-pane-open #siteNav .nav__link,
  body.wsp-pane-open #siteNav .nav-dropdown { transition: none; }
}
body.wsp-pane-open #workspace-pane-root {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background: var(--wsp-parchment);
  display: flex;
  flex-direction: column;
  /* body font + smoothing for everything inside the pane */
  font-family: var(--wsp-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--wsp-ink);
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100dvh) {
  body.wsp-pane-open #workspace-pane-root {
    max-height: calc(100dvh - 56px);
  }
}

/* Reset box model + link/button defaults inside the pane only. */
#workspace-pane-root *,
#workspace-pane-root *::before,
#workspace-pane-root *::after { box-sizing: border-box; }
#workspace-pane-root button { font-family: inherit; cursor: pointer; }
#workspace-pane-root a { color: inherit; text-decoration: none; }

/* "No application selected" placeholder. */
.wsp-empty {
  padding: 56px 40px;
  text-align: center;
  color: var(--wsp-ink-3);
  font-size: 14px;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. BACK STRIP  (forest bar pinned at the top of the takeover pane)
      mockup .strip → .wsp-back-strip
   ════════════════════════════════════════════════════════════════════════════ */

.wsp-back-strip {
  background: var(--wsp-forest);
  color: #fff;
  flex-shrink: 0;
  /* #workspace-pane-root is the scroll container; pin the back-strip at its
     top so "Back to dashboard" stays reachable while the editor scrolls. */
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Full-width forest bar; inner content is a centered max-width container so it
   lines up with the dashboard nav above. */
.wsp-back-strip__inner {
  max-width: var(--wsp-content-max);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--wsp-strip-h);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
}
.wsp-back-strip__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.86);
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
  /* generous hit area without changing the 44px-tall strip's look */
  min-height: var(--wsp-strip-h);
}
.wsp-back-strip__back:hover { color: #fff; }
.wsp-back-strip__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}
.wsp-back-strip__back svg { width: 15px; height: 15px; flex-shrink: 0; }
.wsp-back-strip__divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
.wsp-back-strip__title {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -.005em;
  /* allow long grant titles to truncate rather than push the deadline off */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* V2.1.1 round 4 polish (2026-05-14): the back-strip title is now a link
   to the official /grants/<slug> page. Style it as an inline link with a
   subtle hover underline + an opening-arrow icon — keeps the strip clean
   while signalling "this opens elsewhere". */
.wsp-back-strip__title--link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.wsp-back-strip__title--link:hover,
.wsp-back-strip__title--link:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.55);
}
.wsp-back-strip__title--link:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 3px; border-radius: 2px; }
.wsp-back-strip__title-icon {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  opacity: .75;
  transform: translateY(-1px);
}
/* V2.1.1 round 5 (2026-05-14): "Read intel" button in the back-strip.
   Always visible (across all section views), so users have a persistent
   path to the grant's curated intel — the round-4 empty-state CTA card
   was unreachable because the workspace auto-opens a section. */
.wsp-back-strip__intel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 5px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-family: var(--wsp-font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.wsp-back-strip__intel:hover,
.wsp-back-strip__intel:focus-visible {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}
.wsp-back-strip__intel:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; }
.wsp-back-strip__intel-icon {
  display: inline-block;
  font-size: 13px;
  color: var(--wsp-sienna);
  filter: brightness(1.4);  /* boost contrast on the dark green strip */
}
/* Locked Game Plan button (free users): the PDF is a premium deliverable, so
   this routes to upgrade. A subtle sienna tint makes it read as an inviting
   unlock CTA (not a dead/disabled control); the lock icon keeps it honest. */
.wsp-back-strip__gameplan--lock {
  background: rgba(196, 83, 43, .16);
  border-color: rgba(196, 83, 43, .42);
}
.wsp-back-strip__gameplan--lock:hover,
.wsp-back-strip__gameplan--lock:focus-visible {
  background: rgba(196, 83, 43, .30);
  border-color: rgba(196, 83, 43, .66);
  color: #fff;
}
/* On narrow viewports, drop the label and show icon only. */
@media (max-width: 720px) {
  .wsp-back-strip__intel { padding: 5px 10px; }
  .wsp-back-strip__intel-label { display: none; }
}
.wsp-back-strip__deadline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wsp-font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.wsp-back-strip__deadline svg { width: 12px; height: 12px; flex-shrink: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   3. MOBILE TOP TAB BAR  (Outline / Write / Intel / Pipeline — <960px / short)
      mockup .mob-tabs → .wsp-mob-tabs   (B4 added the 4th "Pipeline" tab so the
      rail — app-switcher + hub links + founder-profile prompt — stays reachable
      on mobile without leaving the workspace.)

      Pane visibility on mobile is driven by #workspace-pane-root[data-wsp-mobtab]
      (set by the JS — see _setMobileView). The rules live in the responsive
      block (§10). No JS sets inline display anymore.
   ════════════════════════════════════════════════════════════════════════════ */

.wsp-mob-tabs { display: none; }   /* desktop: hidden — see the mobile block in §10 */


/* ════════════════════════════════════════════════════════════════════════════
   4. WORKSPACE SHELL  —  the 3-pane grid
      mockup .wsp → .wsp-layout
   ════════════════════════════════════════════════════════════════════════════ */

.wsp-layout {
  flex: 1;                                  /* fill the rest of the flex-column pane root */
  width: 100%;
  /* Sprint 2026-05-14: GRID grows to var(--wsp-layout-max) (~1680px), not
     the back-strip's --wsp-content-max (1320px). Wider monitors / zoomed
     screens get a more spacious editor instead of fixed whitespace gutters.
     Reading-comfort cap for textarea is at .wsp-write below. */
  max-width: var(--wsp-layout-max);
  margin: 0 auto;
  padding: var(--sp-6) 28px var(--sp-7);
  display: grid;
  /* V2.1.1 (2026-05-14): bumped the handle tracks 4px → var(--wsp-col-gutter)
     (24px) so columns get visual breathing room. The handle's visible 4px
     line is still centered within the wider track (see .wsp-col-handle::after).
     Mockup intent was a 36px gutter; 24px feels right with the handle line
     still drawing attention to draggability. */
  grid-template-columns:
    var(--wsp-rail-w) var(--wsp-col-gutter)
    var(--wsp-outline-w) var(--wsp-col-gutter)
    1fr;
  column-gap: 0;                            /* gutter is in the track size */
  row-gap: var(--sp-6);
  align-items: start;                       /* so the sticky rail/outline don't stretch */
}

/* ── Column drag handles (C5) ───────────────────────────────────────────────
   A 4px-wide interactive divider between rail|outline and outline|editor.
   Visual: thin parchment-rule line, widens to a sienna accent on hover/focus.
   On mobile (<960px) handles are hidden and pointer-events disabled so the
   4-tab single-pane layout is unaffected. */
.wsp-col-handle {
  width: 4px;
  align-self: stretch;
  /* V2.1.1 (2026-05-14): centered in the 24px gutter track. The visible
     4px line stays a thin divider even though the gutter is wider. */
  justify-self: center;
  cursor: col-resize;
  position: relative;
  /* Invisible base — only the ::after pseudo carries the visible line. */
  background: transparent;
  user-select: none;
  touch-action: none;
  /* Keyboard focus ring */
  outline: none;
  border-radius: 2px;
}
/* Expand the hit area to cover the entire 24px gutter. V2.1.1: was -6/+6
   = 16px hit area; the wider gutter benefits from a wider grab zone. */
.wsp-col-handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -10px; right: -10px;
}
/* The visible line */
.wsp-col-handle::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 1px; right: 1px;
  background: var(--wsp-rule);
  opacity: .6;
  border-radius: 2px;
  transition: background 0.15s ease, opacity 0.15s ease, left 0.1s ease, right 0.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wsp-col-handle::after { transition: none; }
}
.wsp-col-handle:hover::after,
.wsp-col-handle.is-dragging::after {
  background: var(--wsp-sienna);
  opacity: .75;
  left: 0px; right: 0px;
}
.wsp-col-handle:focus-visible {
  box-shadow: 0 0 0 2px var(--wsp-sienna);
}
.wsp-col-handle:focus-visible::after {
  background: var(--wsp-sienna);
  opacity: .75;
}
/* During an active drag, suppress transition so the line tracks the pointer
   without lag. The .is-dragging class is added by JS on pointerdown. */
.wsp-col-handle.is-dragging::after {
  transition: none;
}

/* ── Faint column dividers ───────────────────────────────────────────────────
   C5: column dividers are now provided by the .wsp-col-handle elements which
   sit in their own 4px grid tracks. The ::after pseudo approach is retired so
   the handle's own ::after can serve as the visual indicator without overlap. */
.wsp-rail,
.wsp-outline { position: relative; }
/* ::after pseudos removed — handles provide the visual divider line. */

/* C5: suppress ALL CSS transitions during an active pointer drag so the grid
   tracks the pointer without visible lag. Applied to #workspace-pane-root by JS
   when a handle's pointerdown fires; removed on pointerup. */
#workspace-pane-root.wsp-col-dragging,
#workspace-pane-root.wsp-col-dragging * {
  transition: none !important;
  user-select: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. RAIL  (left — your pipeline)
      mockup .rail → .wsp-rail
   ════════════════════════════════════════════════════════════════════════════ */

/* Sticky + independently-scrolling: the rail stays attached just below the
   pipeline list (its hub-links + founder-profile card no longer float to the
   bottom of a tall editor column) and scrolls on its own when it overflows.
   Sticky relative to #workspace-pane-root, which is the scroll container. */
.wsp-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: sticky;
  top: var(--wsp-strip-h);            /* clears the sticky back-strip */
  /* V2.1.1 (2026-05-14): subtract an extra 24px so content has breathing
     room at the bottom — previously content was clipped mid-text by the
     hard 100vh - 100px boundary. Plus padding-bottom so the last item
     isn't flush against the column edge. */
  max-height: calc(100vh - var(--wsp-nav-h) - var(--wsp-strip-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;       /* don't bubble scroll to the page */
  scrollbar-width: thin;              /* Firefox: thin scrollbar */
  /* small right padding so the divider ::after never overlaps content */
  padding-right: 2px;
  padding-bottom: var(--sp-6);
}
/* V2.1.1 (2026-05-14): always-visible thin scrollbar on inner-scroll
   columns. macOS overlay scrollbars hide unless actively scrolling, which
   was masking the scroll affordance and making content look "cropped"
   to the user — see screenshot reported 2026-05-14. */
.wsp-rail::-webkit-scrollbar,
.wsp-outline::-webkit-scrollbar { width: 6px; }
.wsp-rail::-webkit-scrollbar-track,
.wsp-outline::-webkit-scrollbar-track { background: transparent; }
.wsp-rail::-webkit-scrollbar-thumb,
.wsp-outline::-webkit-scrollbar-thumb { background: var(--wsp-rule-2); border-radius: 3px; }
.wsp-rail::-webkit-scrollbar-thumb:hover,
.wsp-outline::-webkit-scrollbar-thumb:hover { background: var(--wsp-ink-4); }
@supports (height: 100dvh) {
  .wsp-rail { max-height: calc(100dvh - var(--wsp-nav-h) - var(--wsp-strip-h)); }
}

.wsp-rail__group { display: flex; flex-direction: column; gap: 4px; }
.wsp-rail__label {
  font-family: var(--wsp-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wsp-ink-3);
  padding: 0 6px 8px;
}
.wsp-rail__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: baseline;
  padding: 11px 12px;
  border-radius: 9px;
  color: var(--wsp-ink-2);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  border: 1px solid transparent;
}
.wsp-rail__item:hover { background: var(--wsp-paper); }
.wsp-rail__item.is-active {
  background: var(--wsp-paper);
  border-color: var(--wsp-rule);
  color: var(--wsp-ink);
  box-shadow: var(--wsp-paper-shadow);
}
.wsp-rail__item.is-active .wsp-rail__title { color: var(--wsp-ink); font-weight: 500; }
.wsp-rail__item:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-rail__title {
  font-size: 14px;
  line-height: 1.3;
  color: var(--wsp-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wsp-rail__stage {
  font-family: var(--wsp-font-mono);
  font-size: 10.5px;
  color: var(--wsp-ink-3);
  letter-spacing: .03em;
  text-transform: lowercase;
  justify-self: end;
}
.wsp-rail__item.is-active .wsp-rail__stage { color: var(--wsp-forest); }
.wsp-rail__stage--submitted { color: var(--wsp-forest); }
.wsp-rail__stage--drafting  { color: var(--wsp-sienna); }

/* Hub links — sit below the pipeline with a top divider. Because .wsp-rail is
   a sticky scroll container, margin-top:auto would push them to the bottom of
   the visible viewport (not what we want), so we DON'T use auto margins —
   they flow naturally after the pipeline group. */
.wsp-rail__hub {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--wsp-rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wsp-rail__hub a,
.wsp-rail__hub button.wsp-hublink {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--wsp-ink-3);
  font-size: 13.5px;
  transition: background .12s, color .12s;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.wsp-rail__hub a:hover,
.wsp-rail__hub button.wsp-hublink:hover { background: var(--wsp-paper); color: var(--wsp-ink); }
.wsp-rail__hub a:focus-visible,
.wsp-rail__hub button.wsp-hublink:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-rail__hub svg { width: 15px; height: 15px; stroke-width: 1.6; flex-shrink: 0; }

/* Founder-profile card. */
.wsp-rail__profile {
  margin: var(--sp-2) 0 0;
  padding: 13px;
  background: var(--wsp-paper);
  border: 1px dashed var(--wsp-rule-2);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  cursor: pointer;
}
.wsp-rail__profile:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-rail__profile-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wsp-forest-l);
  color: var(--wsp-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wsp-rail__profile-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wsp-rail__profile-text strong { color: var(--wsp-ink); font-weight: 500; font-size: 13.5px; }
.wsp-rail__profile-text small  { color: var(--wsp-ink-3); font-size: 11.5px; }
.wsp-rail__profile-cta {
  margin-left: auto;
  font-family: var(--wsp-font-mono);
  font-size: 10.5px;
  color: var(--wsp-sienna);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. OUTLINE  (middle — navigation only: sections / documents / other)
      mockup .outline → .wsp-outline
   ════════════════════════════════════════════════════════════════════════════ */

/* Sticky + independently-scrolling, same as the rail. */
.wsp-outline {
  display: flex;
  flex-direction: column;
  /* V2.1.1 round 4 polish (2026-05-14): set gap to 20px — single source of
     truth for inter-card spacing. Previously this was 36px AND .mk-phase
     children had margin-top: 18px, totalling 54px between phase cards
     which felt too airy (closed phases 4 / 5 / 5.5 / 6 looked floating).
     Removed the per-card margin in roadmap-view.css; 20px here gives a
     comfortable rhythm without negative space dominating the column. */
  gap: 20px;
  position: sticky;
  top: var(--wsp-strip-h);            /* clears the sticky back-strip */
  /* V2.1.1: subtract an extra 24px so content doesn't clip mid-text against
     the 100vh - 100px boundary. Plus padding-bottom so the last item isn't
     flush against the bottom edge. Scrollbar styling shared with .wsp-rail
     above. */
  max-height: calc(100vh - var(--wsp-nav-h) - var(--wsp-strip-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* room for the divider ::after on the right, plus a touch of breathing room */
  padding-right: var(--sp-1);
  padding-bottom: var(--sp-6);
}
/* V2.1.1 critical fix (2026-05-14): prevent flex-shrink on outline children.
   Without this, when total natural content height exceeds max-height, flex
   shrinks ALL children proportionally instead of letting overflow:auto scroll.
   This was the cause of the "empty pill" bug — phase cards 3-7 (closed, head
   only ~50px tall) were being squeezed to 25px each, clipping the top half
   of their titles. The same shrink affected expanded phases 1-2 (350px →
   175px), masking the issue partially. With flex-shrink: 0, every child
   keeps its natural height and the column scrolls cleanly. */
.wsp-outline > * { flex-shrink: 0; }
.wsp-rail > * { flex-shrink: 0; }
@supports (height: 100dvh) {
  .wsp-outline { max-height: calc(100dvh - var(--wsp-nav-h) - var(--wsp-strip-h)); }
}

.wsp-outline__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 0 4px var(--sp-3);
  border-bottom: 1px solid var(--wsp-rule);
}
.wsp-outline__title {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--wsp-ink);
  letter-spacing: -.005em;
}
.wsp-outline__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-family: var(--wsp-font-mono);
  font-size: 11.5px;
  color: var(--wsp-ink-3);
  letter-spacing: .03em;
}
.wsp-outline__meta-stage {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--wsp-forest-l);
  color: var(--wsp-forest);
  text-transform: lowercase;
  font-weight: 500;
}
.wsp-outline__meta-dot { color: var(--wsp-rule-2); }

.wsp-outline__section { display: flex; flex-direction: column; gap: 3px; }
.wsp-outline__section-label {
  font-family: var(--wsp-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wsp-ink-3);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px 10px;
}
.wsp-outline__section-count { font-size: 10.5px; color: var(--wsp-ink-3); font-weight: 400; } /* a11y 2026-06-06: ink-4 #717e76 was ~4.0:1 on paper (axe serious); ink-3 #5e6b63 clears AA 4.5:1 */
/* Earlier drafts (2026-09-24): drafts the outline has no row for. One quiet line under the label. */
.wsp-outline__earlier-note { font-size: 12px; line-height: 1.45; color: var(--wsp-ink-3); margin: -4px 4px 8px; }
.wsp-outline__section[data-outline-group="earlier"] { margin-top: 14px; }

/* The clickable section / document / other rows. */
.wsp-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 11px 11px 9px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--wsp-ink-2);
  font-size: 14px;
  line-height: 1.35;
  transition: background .12s, border-color .12s;
}
.wsp-row:hover { background: var(--wsp-paper); }
.wsp-row.is-active {
  background: var(--wsp-paper);
  border-color: var(--wsp-rule);
  color: var(--wsp-ink);
  box-shadow: var(--wsp-paper-shadow);
}
.wsp-row:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-row__check {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--wsp-rule-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wsp-forest);
  background: transparent;
  transition: background .12s, border-color .12s;
}
.wsp-row.is-done .wsp-row__check {
  background: var(--wsp-forest);
  border-color: var(--wsp-forest);
  color: #fff;
}
.wsp-row.is-progress .wsp-row__check { border-color: var(--wsp-sienna); position: relative; }
.wsp-row.is-progress .wsp-row__check::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wsp-sienna);
}
.wsp-row__title { color: inherit; min-width: 0; }
.wsp-row.is-active .wsp-row__title { font-weight: 500; }
.wsp-row__title small {
  display: block;
  color: var(--wsp-ink-4);
  font-size: 11.5px;
  line-height: 1.2;
  font-family: var(--wsp-font-mono);
  letter-spacing: .01em;
  margin-top: 3px;
}
.wsp-row__meta {
  font-family: var(--wsp-font-mono);
  font-size: 11px;
  color: var(--wsp-ink-3);
  letter-spacing: .03em;
  text-align: right;
  line-height: 1.2;
}
.wsp-row.is-active .wsp-row__meta { color: var(--wsp-forest); }
.wsp-row.is-done   .wsp-row__meta { color: var(--wsp-forest); }


/* ════════════════════════════════════════════════════════════════════════════
   7. EDITOR  (right — the tallest column; scrolls with #workspace-pane-root)
      mockup .editor → .wsp-editor
   ════════════════════════════════════════════════════════════════════════════ */

.wsp-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;             /* allow flex/grid child to shrink and wrap long content */
  /* Sprint 2026-05-14: reading-comfort cap on the editor content so that on
     wide viewports (where .wsp-layout grows to 1680px), the writing surface +
     ribbon + AI copilot stay at comfortable line-length rather than
     stretching to 1000+ px. Centered within the wider grid column. The cap
     is generous (920px) to give the 4-column ribbon room and prevent
     premature 2-col wrap; the textarea inside .wsp-write has its own
     internal padding which gives ~820px of typing surface (65-75 chars). */
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
}

/* ── Persistent intel ribbon ──────────────────────────────────────────────── */
.wsp-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wsp-rule);
  border: 1px solid var(--wsp-rule);
  border-radius: 11px;
  overflow: hidden;
}
.wsp-ribbon__cell {
  background: var(--wsp-paper);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* 2026-05-15 (Khalid screenshot + sprint-2 verification): the 4-col ribbon
   was unreadable on phones — the 23px Fraunces value would overflow the
   cell ("$113K" clipped, "$938" partly visible), labels wrapped to 4
   lines, and the ? hint glyph crowded adjacent values. Switch to a 2x2
   grid at the typical phone breakpoint and a 1-col stack at very-narrow
   viewports where even 2x2 is too cramped.

   PLACEMENT MATTERS — these media queries MUST sit AFTER the base
   .wsp-ribbon__cell rule above. CSS source-order decides when specificity
   is equal; earlier placement made the base `flex-direction: column`
   win at <420px even though my @media rule set `row`. Verified via the
   Sprint 2 live QA on 2026-05-15. */
@media (max-width: 599px) {
  .wsp-ribbon { grid-template-columns: repeat(2, 1fr); }
  .wsp-ribbon__cell { padding: var(--sp-3) 14px; }
  .wsp-ribbon__value { font-size: 21px; }
  .wsp-ribbon__detail { font-size: 11px; }
}
@media (max-width: 419px) {
  .wsp-ribbon { grid-template-columns: 1fr; }
  /* Cells go full-width — value can reclaim horizontal space so the
     Fraunces glyph isn't crowded by the small-caps label.
     `flex-wrap: wrap` lets the progress bar (when present on the EV cell)
     wrap to a new row underneath the label+value pair. */
  .wsp-ribbon__cell {
    padding: 12px 14px;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wsp-ribbon__value { font-size: 20px; white-space: nowrap; }
  .wsp-ribbon__detail { font-size: 11px; margin-top: 0; text-align: right; flex-shrink: 0; }
  /* Progress bar under EV: full-width on its own row beneath the label/value. */
  .wsp-ribbon__bar { width: 100%; margin-top: 6px; }
}
.wsp-ribbon__label {
  font-family: var(--wsp-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wsp-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wsp-ribbon__label .wsp-qmark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--wsp-rule);
  color: var(--wsp-ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  cursor: help;
  flex-shrink: 0;
  /* The visible glyph stays 13px, but the clickable/focusable hit area is grown
     to ≥44×44px via an absolutely-positioned ::before pseudo. position:relative +
     an out-of-flow pseudo means the ribbon-cell label layout doesn't reflow. */
  position: relative;
}
.wsp-ribbon__label .wsp-qmark::before {
  content: '';
  position: absolute;
  inset: -16px;            /* 13px + 2×16px ≈ 45px square hit target */
  border-radius: 50%;
}
.wsp-ribbon__label .wsp-qmark:hover { background: var(--wsp-ink-4); color: #fff; }
/* Focus ring sits on the visible glyph (the pseudo is invisible) — slightly
   offset so it reads as a ring around the dot, not a fill. */
.wsp-ribbon__label .wsp-qmark:focus-visible {
  outline: 2px solid var(--wsp-forest);
  outline-offset: 2px;
}
.wsp-ribbon__value {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.1;
  color: var(--wsp-ink);
  letter-spacing: -.005em;
}
.wsp-ribbon__cell--ev       .wsp-ribbon__value { color: var(--wsp-forest); }
.wsp-ribbon__cell--deadline .wsp-ribbon__value { color: var(--wsp-sienna); }
.wsp-ribbon__detail { font-size: 11.5px; color: var(--wsp-ink-3); margin-top: 2px; }
.wsp-ribbon__bar {
  height: 3px;
  background: var(--wsp-rule);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.wsp-ribbon__bar > i { display: block; height: 100%; background: var(--wsp-forest); border-radius: 2px; }

/* ── "Your next move" callout — dismissible ───────────────────────────────── */
.wsp-nextmove {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: linear-gradient(180deg, var(--wsp-paper-2) 0%, var(--wsp-paper) 100%);
  border: 1px solid var(--wsp-rule-2);
  border-left: 3px solid var(--wsp-sienna);
  border-radius: 12px;
  padding: var(--sp-4);
  position: relative;
}
.wsp-nextmove__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--wsp-rule);
  color: var(--wsp-sienna);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wsp-nextmove__body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding-right: var(--sp-4); min-width: 0; }
.wsp-nextmove__label {
  font-family: var(--wsp-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wsp-sienna-d);
}
.wsp-nextmove__title { font-family: var(--wsp-font-display); font-weight: 500; font-size: 16px; color: var(--wsp-ink); line-height: 1.35; }
.wsp-nextmove__why { font-size: 13px; color: var(--wsp-ink-3); line-height: 1.5; }
.wsp-nextmove__cta {
  align-self: center;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--wsp-forest);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  border: 0;
  transition: background .12s;
  flex-shrink: 0;
}
.wsp-nextmove__cta:hover { background: var(--wsp-forest-d); }
.wsp-nextmove__cta:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-nextmove__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--wsp-ink-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.wsp-nextmove__dismiss:hover { background: rgba(31,42,36,.06); color: var(--wsp-ink-2); }
.wsp-nextmove__dismiss:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-nextmove.is-dismissed { display: none; }

.wsp-nextmove-pill {
  display: none;            /* shown only when body.wsp-is-nextmove-dismissed */
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  font-size: 12.5px;
  color: var(--wsp-ink-3);
  transition: background .12s, color .12s;
}
.wsp-nextmove-pill:hover { background: var(--wsp-paper-2); color: var(--wsp-ink-2); }
.wsp-nextmove-pill:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-nextmove-pill svg { width: 13px; height: 13px; color: var(--wsp-sienna); }

body.wsp-is-nextmove-dismissed #workspace-pane-root .wsp-nextmove   { display: none; }
body.wsp-is-nextmove-dismissed #workspace-pane-root .wsp-nextmove-pill { display: inline-flex; }

/* ── Editor heading group ─────────────────────────────────────────────────── */
.wsp-editor__hgroup { display: flex; flex-direction: column; gap: 5px; }
.wsp-editor__breadcrumb {
  font-family: var(--wsp-font-mono);
  font-size: 11.5px;
  color: var(--wsp-ink-3);
  letter-spacing: .03em;
  /* V2.1.1 round 3 polish (2026-05-14): clean single-line ellipsis so the
     breadcrumb never truncates mid-word (was "Techn..." on mobile per blind-
     reviewer find). The crumb still wraps to multi-line at <520px where
     we override below — but on a single line, ellipsis wins over mid-word. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wsp-editor__breadcrumb span { color: var(--wsp-ink-2); }
.wsp-editor__breadcrumb .sep { padding: 0 6px; color: var(--wsp-rule-2); }
/* Mobile: let the breadcrumb wrap to multiple lines instead of hiding the
   section title via ellipsis (the section name is the most important crumb,
   so a 2-line wrap is better than truncating it). */
@media (max-width: 520px) {
  .wsp-editor__breadcrumb { white-space: normal; word-break: normal; overflow-wrap: break-word; }
}
.wsp-editor__h1 {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw, 32px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--wsp-ink);
  margin: 0;
}
.wsp-editor__sub { font-size: 14px; color: var(--wsp-ink-3); margin: 0; max-width: 64ch; line-height: 1.5; }

/* ── Smart guidance ("Reviewer wants" accordion) ──────────────────────────── */
.wsp-guide {
  background: var(--wsp-forest-ll);
  border: 1px solid var(--wsp-rule);
  border-left: 3px solid var(--wsp-forest);
  border-radius: 11px;
}
.wsp-guide__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-4);
  cursor: pointer;
  user-select: none;
}
/* Keyboard focus ring for the ARIA-button guidance accordion head (a11y wave 2026-07-24). */
.wsp-guide__head:focus-visible {
  outline: 2px solid var(--wsp-forest, #2d6a4f);
  outline-offset: -2px;
  border-radius: 6px;
}
.wsp-guide__label {
  font-family: var(--wsp-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wsp-forest);
  flex-shrink: 0;
}
.wsp-guide__one-line {
  font-size: 13.5px;
  color: var(--wsp-ink-2);
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wsp-guide.is-open .wsp-guide__one-line { white-space: normal; overflow: visible; text-overflow: clip; }
.wsp-guide__caret { color: var(--wsp-ink-3); transition: transform .15s; flex-shrink: 0; }
.wsp-guide.is-open .wsp-guide__caret { transform: rotate(180deg); }
.wsp-guide__body {
  display: none;
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wsp-ink-2);
}
.wsp-guide.is-open .wsp-guide__body { display: block; }
.wsp-guide__body p  { margin: 0 0 10px; }
.wsp-guide__body ol { margin: 8px 0 0; padding-left: 22px; }
.wsp-guide__body li { margin-bottom: 5px; }
.wsp-guide__body strong { color: var(--wsp-ink); font-weight: 600; }

/* ── Known problems first (2026-10-13) ────────────────────────────────────── */
/* Top of the editor, above every writing tool: what the member's own answers already say
   stands in the way (--miss), or one line offering the check when it was never run.
   Same row shape as the import bar below so the pane keeps one notice language. */
.wsp-known {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(45, 106, 79, 0.05);
  border: 1px solid rgba(45, 106, 79, 0.22);
  border-radius: 10px;
}
.wsp-known--miss {
  background: var(--wsp-amber-l, #f6efd6);
  border-color: rgba(176, 131, 0, 0.45);
  border-left: 3px solid var(--wsp-amber, #b08300);
}
.wsp-known__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 280px; min-width: 0; }
.wsp-known__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b5200;
}
.wsp-known__msg { font-size: 13.5px; color: var(--wsp-ink); line-height: 1.45; overflow-wrap: anywhere; }
/* May shrink and wrap: at 320px the two buttons are wider than the pane, and a fixed-width
   row pushed the editor sideways (caught by workspace-known-problems-test.js). */
.wsp-known__actions { display: flex; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.wsp-known__go,
.wsp-known__skip {
  padding: 7px 14px;
  min-height: 34px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wsp-known__go { border: 0; background: var(--wsp-forest); color: #fff; }
.wsp-known__go:hover { filter: brightness(1.08); }
.wsp-known__skip { border: 1px solid rgba(28, 25, 23, 0.25); background: transparent; color: var(--wsp-ink); }
.wsp-known__skip:hover { background: rgba(28, 25, 23, 0.05); }
.wsp-known__go:focus-visible,
.wsp-known__skip:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
@media (pointer: coarse) {
  .wsp-known__go, .wsp-known__skip { min-height: 44px; }
}

/* ── Draft-surface import bar (2026-08-30) ────────────────────────────────── */
/* Offers the grant page's free draft into an empty section. One row, quiet,
   dismissible; gone forever once inserted or declined. */
.wsp-import {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: rgba(45, 106, 79, 0.06);
  border: 1px solid rgba(45, 106, 79, 0.25);
  border-radius: 10px;
}
.wsp-import__msg { font-size: 13.5px; color: var(--wsp-ink); line-height: 1.4; }
.wsp-import__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.wsp-import__insert {
  padding: 7px 14px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--wsp-forest);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wsp-import__insert:hover { filter: brightness(1.08); }
.wsp-import__dismiss {
  padding: 7px 10px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--wsp-ink-2, #5c5c56);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.wsp-import__dismiss:hover { color: var(--wsp-ink); }
.wsp-import__insert:focus-visible,
.wsp-import__dismiss:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
@media (pointer: coarse) {
  .wsp-import__insert, .wsp-import__dismiss { min-height: 44px; }
}

/* ── Write surface (full width — no margin annotations) ───────────────────── */
/* "Your first costs" (free-member emails v2, plan 3): the costs the day-5 email asks for, above the answer they feed */
.wsp-costs {
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  border-left: 3px solid var(--wsp-forest);
  border-radius: 12px;
  padding: 14px 18px 12px;
  margin: 0 0 var(--sp-4);
}
.wsp-costs__label { display: block; font-family: var(--wsp-font-body); font-weight: 700; font-size: 15px; color: var(--wsp-ink); margin: 0 0 4px; }
.wsp-costs__hint { font-size: 13.5px; line-height: 1.5; color: var(--wsp-ink-3, var(--wsp-ink)); margin: 0 0 10px; }
.wsp-costs__input {
  width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px 12px;
  border: 1px solid var(--wsp-rule); border-radius: 8px; background: transparent;
  font-family: var(--wsp-font-body); font-size: 15px; line-height: 1.55; color: var(--wsp-ink); resize: vertical;
}
.wsp-costs__input::placeholder { color: var(--wsp-ink-4); }
.wsp-costs__input:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-costs__saved { display: block; min-height: 18px; margin-top: 4px; font-size: 12.5px; color: var(--wsp-ink-4); }
.wsp-write {
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  border-radius: 12px;
  box-shadow: var(--wsp-paper-shadow);
  overflow: hidden;
}
.wsp-write__area {
  width: 100%;
  min-height: 400px;
  border: 0;
  background: transparent;
  padding: var(--sp-5) 26px;
  font-family: var(--wsp-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--wsp-ink);
  resize: vertical;
  outline: none;
}
.wsp-write__area::placeholder { color: var(--wsp-ink-4); }
.wsp-write__area:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: -2px; }
.wsp-write__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px 26px 14px;
  border-top: 1px solid var(--wsp-rule);
  font-family: var(--wsp-font-mono);
  font-size: 11.5px;
  color: var(--wsp-ink-3);
}
.wsp-write__count { color: var(--wsp-ink-2); }
.wsp-write__count strong { color: var(--wsp-ink); font-weight: 500; }
.wsp-write__count .target { color: var(--wsp-ink-3); }
.wsp-write__progress {
  flex: 1;
  max-width: 220px;
  height: 4px;
  background: var(--wsp-rule);
  border-radius: 2px;
  overflow: hidden;
}
.wsp-write__progress > i { display: block; height: 100%; width: 31%; background: var(--wsp-sienna); border-radius: 2px; }
.wsp-write__saved { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--wsp-forest); transition: opacity .2s ease; }
.wsp-write__saved svg { flex-shrink: 0; }
/* V2.1.1 round 3 polish (2026-05-14): low-emphasis persistent "All changes
   saved" state. After the 4s "Saved just now" prompt fades, _saveDraft sets
   this class instead of clearing — gives the user permanent reassurance
   their work is safe without being visually noisy. */
.wsp-write__saved.is-saved--idle { opacity: .55; font-weight: 400; }

/* ── AI co-pilot — bar + quota indicator + suggestion panel below ─────────── */
.wsp-copilot { display: flex; flex-direction: column; gap: var(--sp-3); }
.wsp-copilot__head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 2px; flex-wrap: wrap; }
.wsp-copilot__label {
  font-family: var(--wsp-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wsp-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wsp-copilot__label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wsp-forest); }
.wsp-copilot__quota {
  margin-left: auto;
  font-family: var(--wsp-font-mono);
  font-size: 11px;
  color: var(--wsp-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wsp-copilot__quota strong { color: var(--wsp-ink-2); font-weight: 500; }
.wsp-copilot__quota .wsp-quota-track {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--wsp-rule);
  overflow: hidden;
}
.wsp-copilot__quota .wsp-quota-track > i { display: block; height: 100%; width: 80%; background: var(--wsp-forest); border-radius: 2px; }
/* minmax(0, 1fr) — NOT 1fr. A bare 1fr track floors at min-content, so the four
   button labels can force the grid wider than its container (the 2026-07-13
   mobile sideways-scroll bug). minmax(0, …) lets the labels wrap instead. */
.wsp-copilot__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.wsp-copilot__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  border-radius: 10px;
  color: var(--wsp-ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.wsp-copilot__btn:hover {
  background: var(--wsp-forest-ll);
  border-color: var(--wsp-forest);
  color: var(--wsp-forest-d);
  transform: translateY(-1px);
}
.wsp-copilot__btn:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-copilot__btn svg { width: 17px; height: 17px; stroke-width: 1.6; color: var(--wsp-forest); flex-shrink: 0; }

/* ── Suggestion panel — appears below the bar after a tool is invoked ─────── */
.wsp-copilot__panel { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.wsp-sugg {
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  border-left: 2px solid var(--wsp-forest);
  border-radius: 11px;
  padding: var(--sp-3) var(--sp-4);
}
.wsp-sugg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wsp-sugg__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wsp-font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wsp-ink-3);
  background: var(--wsp-paper-2);
  border: 1px solid var(--wsp-rule);
  padding: 3px 8px;
  border-radius: 999px;
}
.wsp-sugg__badge--profile { color: var(--wsp-forest-d); background: var(--wsp-forest-ll); border-color: var(--wsp-forest-l); }
.wsp-sugg__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.wsp-sugg__conf { margin-left: auto; font-family: var(--wsp-font-mono); font-size: 10.5px; color: var(--wsp-ink-4); }
.wsp-sugg__text { font-size: 14px; line-height: 1.55; color: var(--wsp-ink-2); }
.wsp-sugg__text strong { color: var(--wsp-ink); font-weight: 600; }
.wsp-sugg__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.wsp-sugg__actions button {
  background: transparent;
  border: 1px solid var(--wsp-rule);
  color: var(--wsp-ink-2);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  transition: background .12s, color .12s, border-color .12s;
}
.wsp-sugg__actions button:hover { background: var(--wsp-forest-l); border-color: var(--wsp-forest); color: var(--wsp-forest); }
.wsp-sugg__actions button:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }
.wsp-sugg__actions button.is-primary { background: var(--wsp-forest); color: #fff; border-color: var(--wsp-forest); }
.wsp-sugg__actions button.is-primary:hover { background: var(--wsp-forest-d); }
.wsp-copilot__panel-foot { font-size: 12px; color: var(--wsp-ink-3); padding: 0 2px; }
.wsp-copilot__panel-foot a { color: var(--wsp-forest); }

/* ── Finish line (2026-09-30): Strengthen verdict, before/after fixes, done state ──
   The verdict line leads the panel; each fix shows the member's own text and the replacement side by side with a
   one-click Replace. "Done" is the member's call and hands over the next section. */
.wsp-verdict {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--wsp-paper-2); border: 1px solid var(--wsp-rule); border-radius: 11px;
  padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.5; color: var(--wsp-ink-2);
}
.wsp-verdict__head { flex: 1 1 260px; min-width: 0; }
.wsp-verdict__head strong { color: var(--wsp-ink); font-weight: 600; margin-right: 4px; }
.wsp-verdict__sum { color: var(--wsp-ink-2); }
.wsp-verdict--ready { background: var(--wsp-forest-ll); border-color: var(--wsp-forest-l); }
.wsp-verdict--ready strong { color: var(--wsp-forest-d); }
.wsp-verdict--work { background: var(--wsp-amber-l); border-color: #eadfb8; }
.wsp-verdict__btn {
  background: var(--wsp-forest); color: #fff; border: 1px solid var(--wsp-forest); border-radius: 8px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; min-height: 44px; flex: 0 0 auto;
}
.wsp-verdict__btn:hover { background: var(--wsp-forest-d); }
.wsp-verdict__btn:focus-visible { outline: 2px solid var(--wsp-forest-d); outline-offset: 2px; }
.wsp-verdict__alt {
  background: transparent; border: 1px solid var(--wsp-rule-2); color: var(--wsp-ink-2); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; min-height: 36px; flex: 0 0 auto;
}
.wsp-verdict__alt:hover { border-color: var(--wsp-forest); color: var(--wsp-forest-d); }
.wsp-verdict__alt:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wsp-verdict__stale { flex-basis: 100%; font-size: 12.5px; color: var(--wsp-ink-3); }
.wsp-copilot__panel.is-stale .wsp-verdict { opacity: .72; }
.wsp-sugg__tag {
  font-family: var(--wsp-font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wsp-ink-3); background: var(--wsp-paper-2); border: 1px solid var(--wsp-rule); padding: 3px 8px; border-radius: 999px;
}
.wsp-sugg--fix .wsp-sugg__head:empty { display: none; }
.wsp-sugg__change { margin-top: var(--sp-3); display: grid; gap: 6px; }
.wsp-sugg__was, .wsp-sugg__new { font-size: 13.5px; line-height: 1.55; border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.wsp-sugg__was { background: transparent; border: 1px solid var(--wsp-rule); color: var(--wsp-ink-2); }
/* Neutral, not green: an EXAMPLE to check, never the endorsed "right answer" next to a wrong one (round-two review). */
.wsp-sugg__new { background: var(--wsp-paper-2); border: 1px solid var(--wsp-rule); color: var(--wsp-ink); }
.wsp-sugg__lbl { display: block; font-family: var(--wsp-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--wsp-ink-4); margin-bottom: 2px; }
.wsp-sugg.is-replaced { border-left-color: var(--wsp-forest-l); }
.wsp-sugg__actions button { min-height: 36px; }
.wsp-ambient-line { font-size: 13px; color: var(--wsp-ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsp-ambient-line button { background: transparent; border: 1px solid var(--wsp-rule); border-radius: 7px; padding: 4px 10px; font-size: 12.5px; color: var(--wsp-forest); min-height: 32px; }
.wsp-copilot__done-note { font-size: 13px; color: var(--wsp-ink-3); padding: 0 2px; }
.wsp-write__done {
  font-family: var(--wsp-font-body); letter-spacing: 0; text-transform: none;
  margin-left: var(--sp-2); background: transparent; border: 1px solid var(--wsp-rule-2); color: var(--wsp-ink-2);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; min-height: 36px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* #workspace-pane-root button { font-family: inherit } (1,0,1) outranks a lone class, and the foot is monospace. */
#workspace-pane-root .wsp-write__done { font-family: var(--wsp-font-body); }
.wsp-write__done:hover { border-color: var(--wsp-forest); color: var(--wsp-forest-d); background: var(--wsp-forest-ll); }
.wsp-write__done:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-write__done.is-done { color: var(--wsp-forest-d); background: var(--wsp-forest-ll); border-color: var(--wsp-forest-l); }
.wsp-write__done svg { width: 14px; height: 14px; }
.wsp-toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 10050;   /* above the page's own bottom notes (gc-premium-failed-note is 10002 at bottom:16px) — an Undo nobody can click is no Undo */
  display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  background: var(--wsp-ink); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-family: var(--wsp-font-body);
  box-shadow: var(--wsp-pop-shadow);
}
.wsp-toast__msg { min-width: 0; overflow-wrap: anywhere; }
.wsp-toast__undo { font-family: inherit; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 7px; padding: 4px 10px; font-size: 13px; min-height: 32px; flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) { .wsp-toast { animation: wsp-toast-in .18s ease-out; } }
@keyframes wsp-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── AI co-pilot mount point (production — Task 22+) ──────────────────────────
   Empty by default; the co-pilot renderer injects .wsp-copilot into it. */
.wsp-ai-copilot-mount { margin-top: var(--sp-3); }
.wsp-ai-copilot-mount:empty { display: none; }

/* ── B3: quota "capped" state (set by ai-copilot.js after a 429) ─────────────
   When the monthly free cap is exhausted: full amber bar + amber text so the
   "0 of N left" reads as a soft warning, not an error. (Minimal — B5 can
   refine.) */
.wsp-copilot__quota.is-capped { color: var(--wsp-amber); }
.wsp-copilot__quota.is-capped strong { color: var(--wsp-amber); font-weight: 600; }
.wsp-copilot__quota.is-capped .wsp-quota-track { background: var(--wsp-amber-l); }
.wsp-copilot__quota.is-capped .wsp-quota-track > i { background: var(--wsp-amber); width: 100% !important; }

/* ── B3: suggestion-card fade-out on dismiss/insert ──────────────────────────
   Matches the legacy .ai-copilot-suggestion--fading transition timing (150ms). */
.wsp-sugg { transition: opacity .15s ease, transform .15s ease; }
.wsp-sugg.wsp-sugg--fading { opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* ── B3: Documents upload zone (rendered into .wsp-editor when a doc row is the
   active outline item). Dashed drop-area styling matching the mockup's rail
   profile-prompt look (1px dashed --wsp-rule-2). Stub picker for now — B4/B5
   wire a real <input type=file> + the uploads schema. */
.wsp-doc-zone {
  margin-top: var(--sp-2);
  border: 1.5px dashed var(--wsp-rule-2);
  border-radius: 14px;
  background: var(--wsp-paper);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.wsp-doc-zone__icon { color: var(--wsp-forest); }
.wsp-doc-zone__icon svg { width: 30px; height: 30px; }
.wsp-doc-zone__name { font-size: 16px; font-weight: 600; color: var(--wsp-ink); }
.wsp-doc-zone__sub { font-size: 13.5px; line-height: 1.5; color: var(--wsp-ink-3); max-width: 460px; }
.wsp-doc-zone__actions { display: flex; gap: var(--sp-2); margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.wsp-doc-zone__upload {
  background: var(--wsp-forest); color: #fff; border: 1px solid var(--wsp-forest);
  border-radius: 8px; padding: 9px 18px; font-size: 13.5px; font-weight: 500;
  transition: background .12s;
}
.wsp-doc-zone__upload:hover { background: var(--wsp-forest-d); }
.wsp-doc-zone__upload:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-doc-zone__skip {
  background: transparent; color: var(--wsp-ink-2); border: 1px solid var(--wsp-rule-2);
  border-radius: 8px; padding: 9px 18px; font-size: 13.5px;
  transition: background .12s, border-color .12s, color .12s;
}
.wsp-doc-zone__skip:hover { background: var(--wsp-forest-l); border-color: var(--wsp-forest); color: var(--wsp-forest); }
.wsp-doc-zone__skip:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-doc-zone__hint { font-size: 12.5px; color: var(--wsp-ink-4); margin-top: 4px; max-width: 420px; }

/* Active Documents row in the outline (mirrors .wsp-row.is-active for section rows). */
.wsp-row--doc.is-active .wsp-row__title { font-weight: 500; }
.wsp-row--doc.is-active .wsp-row__meta { color: var(--wsp-forest); }


/* ════════════════════════════════════════════════════════════════════════════
   8. SMALL-TEXT FALLBACKS — rail / outline loading + empty states
   ════════════════════════════════════════════════════════════════════════════ */

/* Loading + empty placeholders rendered by the JS (_renderGen during fetch, and
   the "no apps tracked yet" rail state). */
.wsp-rail-empty,
.wsp-outline-loading,
.wsp-rail-loading {
  color: var(--wsp-ink-3);
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 4px;
}

/* "No section selected / no guidance yet" prompt in the editor (B2 renders it;
   B4 styles it). Centered, generous — it's the in-between state on the Write tab
   plus the genuine "guidance coming soon" state. */
.wsp-editor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: var(--sp-7) var(--sp-4);
  min-height: 200px;
}
.wsp-editor-empty h3,
.wsp-editor-empty__h {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--wsp-ink);
  margin: 0;
  line-height: 1.3;
}
.wsp-editor-empty p { font-size: 14px; color: var(--wsp-ink-3); margin: 0; max-width: 38ch; line-height: 1.5; }
.wsp-editor-empty p strong { color: var(--wsp-ink-2); font-weight: 600; }
.wsp-editor-empty__hint { margin-top: var(--sp-4); }

/* V2.1.1 round 4 polish (2026-05-14): Intel-discoverability CTA card on
   the editor empty state. Surfaces the program overview / success factors
   / approval-rate intel at the moment the user first opens the workspace
   — before they pick a section to draft. Bold parchment card with a
   sienna arrow indicator + hover-lift to invite the click. */
.wsp-editor-empty__intel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  text-align: left;
  text-decoration: none;
  color: var(--wsp-ink);
  background: var(--wsp-paper);
  border: 1px solid var(--wsp-rule);
  border-radius: 12px;
  padding: var(--sp-4) var(--sp-5);
  max-width: 460px;
  width: 100%;
  margin-top: var(--sp-3);
  box-shadow: var(--wsp-paper-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wsp-editor-empty__intel:hover,
.wsp-editor-empty__intel:focus-visible {
  transform: translateY(-1px);
  border-color: var(--wsp-sienna);
  box-shadow: var(--wsp-pop-shadow);
}
.wsp-editor-empty__intel:focus-visible { outline: 2px solid var(--wsp-sienna); outline-offset: 2px; }
.wsp-editor-empty__intel-h {
  font-family: var(--wsp-font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: var(--wsp-ink);
  grid-column: 1;
}
.wsp-editor-empty__intel-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--wsp-ink-3);
  grid-column: 1;
  grid-row: 2;
}
.wsp-editor-empty__intel-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 22px;
  color: var(--wsp-sienna);
  transition: transform .15s ease;
}
.wsp-editor-empty__intel:hover .wsp-editor-empty__intel-arrow { transform: translateX(3px); }

/* "Guidance coming soon" empty state inside the outline's Sections group. */
.wsp-outline-empty {
  padding: 12px 4px;
  font-size: 13px;
  color: var(--wsp-ink-3);
  line-height: 1.55;
}
.wsp-outline-empty p { margin: 0 0 8px; }
.wsp-outline-empty .wsp-outline-empty-link { color: var(--wsp-forest); font-weight: 500; }
.wsp-outline-empty .wsp-outline-empty-link:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet / narrow desktop: tighter columns, 2-up ribbon + co-pilot ───────
   Active in the 960–1080px band (below 960 it's the single-pane mob-tabs mode
   — see _isMobile()). The narrow rails leave the editor at ≈392px @960 / wider
   above, which is workable; below 960 it'd be ~250–310px which isn't, hence the
   raised mobile breakpoint (QA polish round 2 — A4). */
/* 2026-05-15 (Lens 4 P1-C + sprint-2 verification): bumped the awkward-
   tablet zone up so iPad portrait (768) + 12.9" iPad Pro portrait (1024)
   both fall into mobile-tabs cleanly. The mobile-tabs query uses
   max-width: 1024px (inclusive of 1024), so the awkward zone starts at
   min-width: 1025px to avoid both rules firing at exactly 1024. */
@media (min-width: 1025px) and (max-width: 1199px) {
  #workspace-pane-root {
    --wsp-rail-w: 184px;
    --wsp-outline-w: 296px;
    --sp-6: 26px;
  }
  /* C5: no gap change — handles provide the visual gap; keep padding adjustment */
  .wsp-layout { padding-left: 22px; padding-right: 22px; }
  .wsp-ribbon { grid-template-columns: repeat(2, 1fr); }
  .wsp-copilot__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── MOBILE  (≤959px wide OR ≤520px tall — matches _isMobile() in the JS) ─────
   The 3-pane grid collapses to one column. Pane VISIBILITY is driven entirely
   by #workspace-pane-root[data-wsp-mobtab="…"] (set by _setMobileView in the
   JS) — no JS sets inline display anymore (B4). The four mob-tabs map:
     outline  → .wsp-outline
     write    → .wsp-editor   (editor renders the section/doc/other view)
     intel    → .wsp-editor   (editor renders the intel page — same element)
     pipeline → .wsp-rail     (your apps + hub links + founder-profile prompt)
   ─────────────────────────────────────────────────────────────────────────── */
/* 2026-05-15 (Lens 4 P1-C + sprint-2 verification): bumped from 959px to
   1024px (inclusive) so 12.9" iPad Pro portrait (1024×1366) — exactly
   at 1024 — renders mobile-tabs cleanly instead of a squeezed 3-col
   where the editor shrinks to 202px. Landscape iPad (1366×1024) at
   width 1366 still gets desktop 3-col. The awkward-tablet zone starts
   at min-width: 1025px to avoid both queries firing at exactly 1024. */
@media (max-width: 1024px), (max-height: 520px) {
  /* #workspace-pane-root is already display:flex/column (takeover mode). Stack:
     back-strip → mob-tabs → layout; let the layout fill the rest so a short
     (landscape) viewport never shows blank space below the content. */
  .wsp-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 40px;
    flex: 1;                 /* fill remaining height under the back-strip + tabs */
    min-height: 0;
  }

  /* Default: every pane hidden — the active mob-tab attr re-shows exactly one.
     Fallback (no attr yet on first paint): show the outline. */
  .wsp-rail,
  .wsp-outline,
  .wsp-editor { display: none; }
  #workspace-pane-root:not([data-wsp-mobtab]) .wsp-outline { display: flex; }
  #workspace-pane-root[data-wsp-mobtab="outline"]  .wsp-outline { display: flex; }
  #workspace-pane-root[data-wsp-mobtab="write"]    .wsp-editor  { display: flex; }
  #workspace-pane-root[data-wsp-mobtab="intel"]    .wsp-editor  { display: flex; }
  #workspace-pane-root[data-wsp-mobtab="pipeline"] .wsp-rail    { display: flex; }

  /* No grid → the sticky/scroll setup on rail+outline is meaningless; reset.
     C5: hide drag handles entirely on mobile — 4-tab layout manages columns. */
  .wsp-rail,
  .wsp-outline {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  /* C5: hide drag handles on mobile */
  .wsp-col-handle {
    display: none;
    pointer-events: none;
  }

  /* Each visible pane gets a comfortable single-column padding. */
  .wsp-editor  { padding: var(--sp-3) 16px 0; gap: var(--sp-4); }
  .wsp-outline { padding: var(--sp-3) 16px 0; gap: var(--sp-5); }
  .wsp-rail    { padding: var(--sp-3) 16px 24px; gap: var(--sp-5); }

  .wsp-editor__h1 { font-size: 24px; }

  /* Back-strip: hide the deadline pill (re-shown in the ribbon); the centered
     max-width inner is moot — go full-width with side padding + a tighter gap so
     a long grant title still gets room to ellipsis-clip on a 320px screen. */
  .wsp-back-strip__deadline { display: none; }
  .wsp-back-strip__inner { max-width: none; padding: 0 14px; gap: 12px; }
  .wsp-back-strip__back { white-space: nowrap; flex-shrink: 0; }
  /* .wsp-back-strip__title already clips (overflow/ellipsis/nowrap/min-width:0). */

  /* "Your next move" stacks vertically (icon · body · CTA in a column). */
  .wsp-nextmove { flex-direction: column; align-items: stretch; }
  .wsp-nextmove__body { padding-right: var(--sp-5); }   /* clear the × dismiss */
  .wsp-nextmove__cta { align-self: flex-start; }
  /* Make the × dismiss a real 44px tap target (visual box stays small). */
  .wsp-nextmove__dismiss {
    width: 44px; height: 44px; top: 2px; right: 2px;
    display: inline-flex; align-items: flex-start; justify-content: flex-end;
    padding: 8px 8px 0 0;
  }

  /* Comfortable textarea on phones — the soft keyboard eats ~half the screen,
     so don't let it be too tall on initial paint. resize:vertical still works. */
  .wsp-write__area { min-height: 240px; padding: var(--sp-4) 18px; font-size: 15px; }
  .wsp-write__foot { padding: 11px 18px 12px; gap: var(--sp-3); flex-wrap: wrap; }
  .wsp-write__progress { max-width: 120px; }

  /* Co-pilot bar goes 2-up on phones.
     ⚠ This rule MUST live here. The other 2-up rule is scoped to
     @media (min-width:1025px) and (max-width:1199px) — a tablet-only BAND, so it
     never reached phones. That left the bar at repeat(4, 1fr) on mobile, and the
     four labels ("Strengthen this section" is the widest) forced ~453px of
     min-content into a ~290px editor: the pane scrolled sideways and the content
     ran off-screen. Regression test: dev-tools/workspace-mobile-overflow-test.js
     (2026-07-13). */
  .wsp-copilot__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Labels wrap rather than blow out the track; the icon must not shrink. */
  .wsp-copilot__btn { min-width: 0; text-align: left; }

  /* Tap targets → ≥44px on mobile:
       - section / doc / other rows + the rail's clickable items
       - co-pilot bar buttons (2-up, set just above)
       - the "Keep writing" next-move CTA + the guide accordion toggle
       - doc-zone Upload/Skip buttons + AI-suggestion action buttons */
  .wsp-row,
  .wsp-rail__item,
  .wsp-rail__hub a,
  .wsp-rail__hub button.wsp-hublink,
  .wsp-rail__profile,
  .wsp-copilot__btn,
  .wsp-nextmove__cta,
  .wsp-nextmove-pill,
  .wsp-guide__head,
  .wsp-doc-zone__upload,
  .wsp-doc-zone__skip,
  .wsp-sugg__actions button { min-height: 44px; }
  /* The next-move CTA + doc-zone buttons are inline-flex — center their label
     vertically now that they're taller. */
  .wsp-nextmove__cta,
  .wsp-doc-zone__upload,
  .wsp-doc-zone__skip { display: inline-flex; align-items: center; justify-content: center; }

  /* Doc-zone padding is generous on desktop; tighten so it doesn't overflow. */
  .wsp-doc-zone { padding: var(--sp-5) var(--sp-4); }

  /* ── Mobile top tab bar — sticky at the top of the scrolling pane ──────── */
  .wsp-mob-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--wsp-paper);
    border-bottom: 1px solid var(--wsp-rule);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
  }
  .wsp-mob-tabs button {
    flex: 1 1 0;
    min-width: 0;            /* allow shrink below content width at 320px */
    padding: 13px 4px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--wsp-ink-3);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wsp-mob-tabs button.is-active { color: var(--wsp-forest); border-bottom-color: var(--wsp-forest); font-weight: 600; }
  .wsp-mob-tabs button:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: -2px; }
}
/* (≥960px wide AND ≥521px tall: .wsp-mob-tabs stays at its §3 base `display:none` —
   no explicit override needed; the mobile query above simply doesn't match.) */

/* ── Narrow phones (≤414px): the 4 mob-tabs get tight — shrink the type so
   "Pipeline" stays whole instead of truncating to "Pipelni..." (blind-reviewer
   find, V2.1.1 round 3). Bumped from ≤360px to ≤414px because the user's
   iPhone 12 Pro (390) was still showing truncation. ─────────────────────── */
@media (max-width: 414px) {
  .wsp-mob-tabs button { font-size: 12px; padding: 13px 2px; letter-spacing: -0.01em; }
}
@media (max-width: 360px) {
  .wsp-editor,
  .wsp-outline { padding-left: 13px; padding-right: 13px; }
  .wsp-rail { padding-left: 13px; padding-right: 13px; }
  .wsp-write__area { padding-left: 15px; padding-right: 15px; }
  .wsp-write__foot { padding-left: 15px; padding-right: 15px; }
  .wsp-editor__h1 { font-size: 22px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   11. REDUCED MOTION  — disable all workspace transitions
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #workspace-pane-root *,
  #workspace-pane-root *::before,
  #workspace-pane-root *::after {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   12. PROGRAM INTEL BRIEF (2026-06-06) — decision-intel sections on the on-demand
   "Read intel" page. Depth lives in [data-tip] tooltips, so the surface stays a
   ~10-second scan. None of this appears in the default workspace view.
   ════════════════════════════════════════════════════════════════════════════ */
.wsp-isec { margin: 0 0 16px; }
.wsp-isec__h { font-family: var(--f-mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wsp-forest); margin-bottom: 8px; }
.wsp-isec__h--edge { color: var(--wsp-amber); }
.wsp-isec--edge { border-top: 1px solid var(--wsp-rule, #e3decf); padding-top: 14px; }

/* "Should you apply?" chips */
.wsp-ic-row { display: flex; gap: 7px; flex-wrap: wrap; }
.wsp-ic { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--wsp-forest-l, #e6efe9); background: var(--wsp-forest-ll, #f0f5f1); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; color: var(--wsp-ink-2, #3a4a42); cursor: help; }
.wsp-ic b { color: var(--wsp-ink, #1f2a24); font-weight: 600; }
.wsp-ic--warn { border-color: #e7d9c9; background: #fdf8f1; }
.wsp-ic__sub { color: var(--wsp-ink-4, #717e76); font-size: 11px; }
.wsp-ic:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }

/* "What it funds" — two columns */
.wsp-funds { display: flex; gap: 18px; }
.wsp-funds__col { flex: 1; min-width: 0; }
.wsp-funds__sign { font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.wsp-funds__col--ok .wsp-funds__sign { color: var(--wsp-forest); }
.wsp-funds__col--no .wsp-funds__sign { color: var(--wsp-sienna); }
.wsp-funds ul { list-style: none; margin: 0; padding: 0; }
.wsp-funds li { font-size: 11.5px; color: var(--wsp-ink-2, #3a4a42); line-height: 1.45; padding: 2px 0 2px 12px; position: relative; }
.wsp-funds li::before { content: "·"; position: absolute; left: 2px; color: var(--wsp-ink-4, #717e76); }
.wsp-funds__more { color: var(--wsp-forest); cursor: help; font-weight: 500; }
.wsp-funds__more:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 1px; }

/* Timing */
.wsp-itime { font-size: 12px; color: var(--wsp-ink-2, #3a4a42); line-height: 1.5; }
.wsp-itrend { color: var(--wsp-forest); font-weight: 600; cursor: help; }

/* The winning edge — insider tip (premium real / free locked) */
.wsp-iedge { font-size: 12.5px; color: var(--wsp-ink-2, #3a4a42); line-height: 1.55; background: #fdf8f1; border: 1px solid #e7d9c9; border-radius: 9px; padding: 11px 13px; }
.wsp-iedge--gated { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 12.5px; transition: background .15s ease, border-color .15s ease; }
.wsp-iedge--gated:hover { background: #f9efe2; border-color: #dcc6ab; }
.wsp-iedge__cta { color: var(--wsp-amber); font-weight: 600; white-space: nowrap; }

/* Metric ribbon tiles as an entry point to the intel brief */
.wsp-ribbon__cell--link { position: relative; cursor: pointer; transition: background .12s ease; }
.wsp-ribbon__cell--link:hover { background: var(--wsp-forest-ll, #f0f5f1); }
.wsp-ribbon__go { position: absolute; top: 8px; right: 9px; color: var(--wsp-ink-4, #717e76); font-size: 13px; line-height: 1; opacity: .5; transition: opacity .12s ease, transform .12s ease; }
.wsp-ribbon__cell--link:hover .wsp-ribbon__go { opacity: 1; transform: translateX(2px); color: var(--wsp-forest); }

/* ── Notes editor + Activity log (F2/F3, 2026-07-23) — replaced the "coming soon"
   stubs. Tokens match the pane (--wsp-*). ────────────────────────────────────── */
.wsp-notes { display: flex; flex-direction: column; gap: 10px; }
.wsp-notes__lbl { font-size: 13px; color: var(--wsp-ink-3, #5a6a62); margin: 0; line-height: 1.5; }
.wsp-notes__ta {
  width: 100%; box-sizing: border-box; min-height: 220px; resize: vertical;
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--wsp-ink, #1f2a24);
  padding: 12px 14px; border: 1px solid var(--wsp-rule, #e3decf); border-radius: 10px;
  background: var(--wsp-paper, #fff);
}
.wsp-notes__ta:focus { outline: none; border-color: var(--wsp-forest, #2D6A4F); box-shadow: 0 0 0 3px var(--wsp-forest-ll, #f0f5f1); }
.wsp-notes__foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--wsp-ink-4, #717e76); }
.wsp-notes__status { color: var(--wsp-forest, #2D6A4F); }
.wsp-notes__count { font-variant-numeric: tabular-nums; }
.wsp-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wsp-activity__item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wsp-rule, #e3decf); }
.wsp-activity__item:last-child { border-bottom: 0; }
.wsp-activity__label { font-size: 14px; color: var(--wsp-ink, #1f2a24); }
.wsp-activity__when { font-size: 12px; color: var(--wsp-ink-4, #717e76); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Document "gathered" checklist state (2026-07-23) — the doc-row check toggles a
   persistent gathered state (app.docsChecked). */
.wsp-row--doc .wsp-row__check { cursor: pointer; }
.wsp-row--doc.is-gathered .wsp-row__check { color: var(--wsp-forest, #2D6A4F); }
.wsp-row--doc.is-gathered .wsp-row__title { color: var(--wsp-ink-3, #5a6a62); }
.wsp-row--doc.is-gathered .wsp-row__meta { color: var(--wsp-forest, #2D6A4F); }
.wsp-row--doc .wsp-row__check:focus-visible { outline: 2px solid var(--wsp-forest, #2D6A4F); outline-offset: 2px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   Completable application steps (2026-07-29)

   `.wsp-row--step` used to be a bare div rendered in the same `wsp-row`
   language as `.wsp-row--doc` — which IS a control. Two adjacent lists that
   look identical, one of which responds to a tap. The steps are now real
   controls, so they must also LOOK like the documents beside them: a pointer,
   a hover, a focus ring, and a done state that reads at a glance.
   ⚠ `.wsp-row.is-done` already exists (line ~879) for a different row family;
   these selectors are scoped to `--step` so they cannot leak into it.
   ═══════════════════════════════════════════════════════════════════════ */
.wsp-row--step { cursor: pointer; }
.wsp-row--step:hover { background: var(--wsp-cream, rgba(26, 23, 20, 0.03)); }
.wsp-row--step:focus-visible {
  outline: 2px solid var(--wsp-forest, #2D6A4F);
  outline-offset: -2px;
  border-radius: 6px;
}
.wsp-row--step .wsp-row__check--step {
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.wsp-row--step.is-done .wsp-row__check--step {
  color: var(--wsp-forest, #2D6A4F);
  border-color: var(--wsp-forest, #2D6A4F);
}
.wsp-row--step.is-done .wsp-row__title {
  color: var(--wsp-ink-3, #5a6a62);
}
.wsp-row--step.is-done .wsp-row__meta {
  color: var(--wsp-forest, #2D6A4F);
  font-weight: 600;
}
/* A thumb needs a target. The step rows carry multi-line titles so they clear
   44px on their own at every width we render, but pin the floor anyway rather
   than relying on content length. */
@media (pointer: coarse) {
  .wsp-row--step { min-height: 44px; }
}
/* Respect the system setting — this is a state change, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .wsp-row--step .wsp-row__check--step { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Step detail zone (2026-08-29)

   Clicking a step ROW now opens its full detail in the editor pane, mirroring
   the document rows (row opens, check toggles). The zone is a READING surface
   first: the full untruncated program-guide text, then a working mark-done
   control and next-step navigation. Content-first, so unlike .wsp-doc-zone it
   is left-aligned prose, not a centered drop-target card.
   ═══════════════════════════════════════════════════════════════════════ */
.wsp-step-zone {
  margin-top: var(--sp-2);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.wsp-step-zone__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wsp-ink-2, #3d4a43);
  margin: 0;
}
.wsp-step-zone__desc--none { color: var(--wsp-ink-3, #5a6a62); font-style: italic; }
.wsp-step-zone__desc--none a,
.wsp-step-zone__foot a { color: var(--wsp-forest, #2D6A4F); text-decoration: underline; }
.wsp-step-zone__actions { display: flex; gap: var(--sp-2); margin-top: 2px; flex-wrap: wrap; }
.wsp-step-zone__done {
  background: var(--wsp-forest); color: #fff; border: 1px solid var(--wsp-forest);
  border-radius: 8px; padding: 9px 18px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .12s;
}
.wsp-step-zone__done:hover { background: var(--wsp-forest-d); }
.wsp-step-zone__done:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-step-zone__done.is-done {
  background: transparent; color: var(--wsp-forest); border-color: var(--wsp-forest);
}
.wsp-step-zone__done.is-done:hover { background: var(--wsp-forest-l, rgba(45,106,79,.08)); }
.wsp-step-zone__next {
  background: transparent; color: var(--wsp-ink-2); border: 1px solid var(--wsp-rule-2);
  border-radius: 8px; padding: 9px 18px; font-size: 13.5px;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.wsp-step-zone__next:hover { background: var(--wsp-forest-l); border-color: var(--wsp-forest); color: var(--wsp-forest); }
.wsp-step-zone__next:focus-visible { outline: 2px solid var(--wsp-forest); outline-offset: 2px; }
.wsp-step-zone__foot { font-size: 12.5px; color: var(--wsp-ink-4, #717e76); margin: 4px 0 0; }
@media (pointer: coarse) {
  .wsp-step-zone__done, .wsp-step-zone__next { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* The step CHECK is now its own control inside an openable row — it needs its
   own affordance and, on touch, its own target floor (the row around it opens
   the detail, so a fat-finger must not silently do the OTHER action). */
.wsp-row--step .wsp-row__check--step { cursor: pointer; }
.wsp-row--step .wsp-row__check--step:hover { border-color: var(--wsp-forest, #2D6A4F); color: var(--wsp-forest, #2D6A4F); }
.wsp-row--step .wsp-row__check--step:focus-visible { outline: 2px solid var(--wsp-forest, #2D6A4F); outline-offset: 2px; border-radius: 50%; }
.wsp-row--step.is-active { background: var(--wsp-forest-l, rgba(45, 106, 79, 0.07)); }
.wsp-row--step.is-active .wsp-row__meta { color: var(--wsp-forest, #2D6A4F); }
@media (pointer: coarse) {
  .wsp-row--step .wsp-row__check--step { min-width: 32px; min-height: 32px; position: relative; }
  /* Expand the tap target past the painted circle without moving layout. */
  .wsp-row--step .wsp-row__check--step::before { content: ''; position: absolute; inset: -8px; }
}

/* "Ready" state for the doc zone's primary button (now a real toggle that
   persists docsChecked — it was a dead control that only revealed a hint). */
.wsp-doc-zone__upload.is-ready {
  background: transparent; color: var(--wsp-forest); border-color: var(--wsp-forest);
}
.wsp-doc-zone__upload.is-ready:hover { background: var(--wsp-forest-l, rgba(45,106,79,.08)); }

/* Clickable "Steps" breadcrumb segment — the step detail's way back to the
   list (on mobile the outline is a separate tab, so without this the detail
   was a one-way tunnel until the last step). Styled as a link, sized as text
   so the breadcrumb line does not grow. */
.wsp-crumb-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.wsp-crumb-link:hover { color: var(--wsp-forest, #2D6A4F); }
.wsp-crumb-link:focus-visible { outline: 2px solid var(--wsp-forest, #2D6A4F); outline-offset: 2px; border-radius: 3px; }
/* Focus target for the zone heading (focused programmatically on open) —
   no ring on mouse focus, standard ring for keyboard via focus-visible. */
.wsp-editor__h1[tabindex="-1"]:focus { outline: none; }
.wsp-editor__h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--wsp-forest, #2D6A4F); outline-offset: 3px; border-radius: 4px; }

/* ── What's left before you can submit (2026-09-24) ─────────────────────────────
   The first block in the outline column. One quiet card: a heading, a short list of counts that each
   open where the work gets done, and (where a rule sheet exists) one eligibility question at a time. */
.wsp-left { background: var(--wsp-paper, #fff); border: 1px solid var(--wsp-rule, #e3e6e1); border-radius: 12px; padding: 14px 14px 12px; margin: 0 0 16px; }
.wsp-left__h { font-family: var(--wsp-font-body, inherit); font-size: 14px; font-weight: 700; color: var(--wsp-ink, #1b2a22); margin: 0 0 8px; line-height: 1.35; }
.wsp-left__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wsp-left__item { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 36px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: var(--wsp-ink-2, #2e3d35); cursor: pointer; }
.wsp-left__item b { color: var(--wsp-forest, #1f5c3f); font-weight: 700; margin-right: 2px; }
.wsp-left__item:hover, .wsp-left__item:focus-visible { background: var(--wsp-forest-ll, #eef5f0); }
.wsp-left__item:focus-visible, .wsp-left__ans:focus-visible, .wsp-left__btn:focus-visible, .wsp-left__link:focus-visible { outline: 2px solid var(--wsp-forest, #1f5c3f); outline-offset: 2px; }
.wsp-left__deadline { margin: 8px 8px 0; font-size: 12.5px; color: var(--wsp-sienna, #a3401f); font-weight: 600; }
.wsp-left__ready, .wsp-left__done { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--wsp-ink-2, #2e3d35); }
.wsp-left__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wsp-left .wsp-left__btn, .wsp-left a.wsp-left__btn:visited { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; background: var(--wsp-forest, #1f5c3f); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; }
.wsp-left .wsp-left__btn.wsp-left__btn--quiet { background: transparent; color: var(--wsp-forest, #1f5c3f); border: 1px solid var(--wsp-rule, #e3e6e1); }
.wsp-left__fail { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fbeee9; color: #7a2e16; font-size: 13px; line-height: 1.45; }
.wsp-left__link { all: unset; cursor: pointer; color: var(--wsp-forest, #1f5c3f); text-decoration: underline; font-weight: 600; }
.wsp-left__rules[hidden] { display: none; }
.wsp-left__rules { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wsp-rule, #e3e6e1); }
.wsp-left__rule p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--wsp-ink, #1b2a22); }
.wsp-left__rule small { display: block; margin: -4px 0 8px; font-size: 12px; color: var(--wsp-ink-3, #5e6b63); }
.wsp-left__ansrow { display: flex; flex-wrap: wrap; gap: 6px; }
.wsp-left__ans { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--wsp-forest, #1f5c3f); background: #fff; color: var(--wsp-forest, #1f5c3f); font-size: 13px; font-weight: 600; cursor: pointer; }
.wsp-left__ans--quiet { border-color: var(--wsp-rule, #e3e6e1); color: var(--wsp-ink-2, #2e3d35); font-weight: 500; }
.wsp-left__ans:disabled { opacity: .55; cursor: default; }
.wsp-left__msg { margin: 6px 0 0 !important; font-size: 12.5px !important; color: #7a2e16 !important; }
.wsp-left__msg:empty { display: none; }
.wsp-left__more { margin: 8px 0 0; font-size: 12px; color: var(--wsp-ink-3, #5e6b63); }
/* The portal link is an <a>, and `#workspace-pane-root a { color: inherit }` (an ID rule) beats any class-only
   selector — it rendered dark text on the forest button. Scope under the same ID. */
#workspace-pane-root .wsp-left a.wsp-left__btn:not(.wsp-left__btn--quiet), #workspace-pane-root .wsp-left a.wsp-left__btn:not(.wsp-left__btn--quiet):hover { color: #fff; }