/* ==========================================================================
   Shared Magnum course engine workbook chrome, Momentum
   ==========================================================================
   Shared CSS for the interactive workbook dropped into any Magnum course's
   module pages, between the RAMPUP MATERIALS START/END markers. RAMP UP is
   this engine's first consumer; nothing below is specific to RAMP UP. Real
   cached file, linked with an absolute path (/assets/course-workbook.css)
   and never inlined into any course document.

   Every selector below is scoped under .rw (the workbook root) so nothing
   bleeds into the shell's own header (#mn-*), breadcrumb (#mn-back-bar), the
   dashboard, or course.css's own .ru- chrome classes. No bare element
   selectors anywhere in this file (no *, body, h1, h2, h3, h4, ul, ul li,
   textarea, button) - dropped into the shell as-is a bare rule here would
   reach the MVP header and breadcrumb above it.

   NO em dashes, NO italics, NO pill radii (999px/9999px/50% on any control).
   Squared or 6-10px control radii, 14px panel radius, matching course.css's
   own tokens below. Mobile first: base rules target 375px, wider layout
   arrives via min-width media queries only.
   ========================================================================== */

/* ---- Workbook root -------------------------------------------------------
   Self-contained panel: does not rely on being nested inside course.css's
   .ru-panel, so this file works whether or not that wrapper is present. */
.rw {
  position: relative;
  background: var(--mom-bg-panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-panel);
  /* Bottom padding matches the top/side padding again, 2026-08-08: this used
     to run wider (58px, before that 84px) to clear the fixed .rw-sticky-bar,
     which is gone outright now (see course-workbook.js's own "SAVE/DOWNLOAD/
     EMAIL ACTIONS" header note) - Save/Download/Email live in the 05
     PREVIOUS/NEXT footer panel instead, a normal in-flow block nothing here
     needs to clear. No more dead space reserved under content that no
     longer floats. */
  padding: 16px 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  font-family: var(--ru-font-body);
  /* DENSITY PASS, 2026-08-07. Anric's own words on the Becoming Unstoppable
     player: "you might as well use the full width and not make it so big and
     clunky", "burning up too much space and too much scrolling".
     Root cause of a lot of this: .rw never declared its own
     font-size, so every `Xem` rule below it (question labels, help text,
     card copy) was riding the browser's UA default of 16px, not a real
     token. Every font-size in this file is now a fixed px value chosen
     against THIS explicit base (14px, --mom-text-md - the same "primary
     body/row text" tier the rest of Momentum already uses) rather than an
     em relative to an undeclared ancestor, so hierarchy is intentional, not
     an accident of inheritance. */
  font-size: var(--mom-text-md);
  color: var(--mom-text);
}
.rw::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 193, 115, 0.6), transparent);
  pointer-events: none;
}
.rw * {
  box-sizing: border-box;
}

/* ---- Welcome banner, DEMOTED 2026-08-08 -----------------------------------
   Fix 5, approved direction (see this file's own top-of-file era comments
   for the flattening pass this belongs to): was a full-width, centered,
   gradient-filled slab shouting the module's own opening line in uppercase
   gold - competing with the real heading above it for attention on every
   single module page. Demoted to the same quiet register as everything
   else in the flattened workbook: left aligned (never centered - "one
   alignment, left, across banner, sections, questions and cards"), small,
   muted body text, a thin 2px gold left rule instead of a full box. */
.rw-banner {
  margin: 0 0 16px;
  padding: 6px 0 6px 14px;
  background: none;
  border: none;
  border-left: 2px solid rgba(240, 193, 115, 0.45);
  border-radius: 0;
  color: var(--mom-text-muted);
  font-family: var(--ru-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.2px;
}

/* ---- Tabs -------------------------------------------------------------
   Static in normal flow, never sticky/fixed: the source's sticky sub-nav
   collided with the MVP header, so this one never gets that treatment.
   Adopts the dashboard's PORTALS rail idiom (momentum.css section 11,
   .mom-nav-item / .nav-icon): a squared two-character badge ahead of the
   label, gold left-edge glow + tinted fill on the active row. The badge is a
   ::before pseudo-element reading a data-rw-badge attribute rather than a
   real child node, so course-workbook.js's existing
   `footBtn.textContent = topBtn.textContent` (foot-nav generation, unchanged
   logic) still copies plain section-name text with no badge characters
   folded in - the badge only ever paints on the top tab bar (.rw-tabs), not
   the generated foot strip, since foot buttons carry no data-rw-badge. */
/* FULL WIDTH, NUMBERED TABS, 2026-08-08. Anric, on the live player: "if there
   are three tabs, divide the whole width of the page into three tabs and
   number them... it's not clear that the sections on the far right [the old
   04 SECTIONS rail] belong to the notes down below." Two changes from the
   original wrapping-chip design: (1) .rw-tab goes from content-sized
   (inline-flex, its own padding decides its width) to `flex: 1 1 0`, so
   whatever real section count a page has - 3, 5, 10, whatever
   [data-rw-section-btn] the module's own markup renders - splits the row's
   full width evenly with zero counting logic anywhere in this file; (2) this
   bar is no longer suppressed at 901px+ (see the old "Desktop rail takeover"
   media query further down, now trimmed to just .rw-progress/.rw-foot-nav) -
   it is the only section navigation now, at every width, since the right
   rail's duplicate jump list is gone (course-nav.js, course.css). Wraps to
   a second row rather than squeezing every tab into one illegible sliver at
   375px: .rw-tab's own min-width (below) is the trigger, not a breakpoint,
   so it works the same whether a page has 3 sections (always fits one row)
   or 10 (rampup-8, wraps into multiple even rows at any width narrow enough
   to need it) - no hardcoded section count, no hardcoded breakpoint either. */
.rw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mom-border-faint);
}
.rw-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mom-bg-inset);
  color: var(--mom-text-soft);
  border: 1px solid var(--mom-border-soft);
  border-left: 2px solid transparent;
  border-radius: var(--mom-radius-xs);
  padding: 8px 12px 8px 8px;
  font-family: var(--ru-font-body);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-left-color 0.18s ease, color 0.18s ease;
}
/* Even division, top tab bar only - .rw-foot-tab (the bottom-of-section
   clone, "Foot navigation" below) reuses .rw-tab's base look but keeps its
   own content-sized `flex: 0 1 auto`, so this rule is scoped to .rw-tabs's
   own children and never reaches the foot strip. min-width is what forces a
   wrap at 375px instead of N slivers - 108px comfortably fits a 22px badge
   plus a short label ("Overview", "01 SECTIONS") without truncating; a
   longer authored title ("Your REAP Experience") wraps to two lines inside
   its own tab rather than forcing the whole row narrower. */
.rw-tabs .rw-tab {
  flex: 1 1 0;
  min-width: 108px;
  justify-content: center;
  text-align: center;
}
.rw-tab:hover,
.rw-tab:focus-visible {
  background: var(--mom-gold-dim);
  border-left-color: var(--mom-border-strong);
}
/* FOCUS SWEEP, 2026-08-08. Anric already reported browser-default blue on
   this player once (the rail link underlines, course.css's :where(.ru-wrap)
   a rule). Same class of bug here: this selector set background/border-left
   but never touched outline, so the browser's own default blue ring still
   painted on top whenever a tab was keyboard-focused. Never outline: none
   with nothing replacing it - that would silently kill keyboard
   accessibility - so a real, visible gold ring goes on the :focus-visible
   state specifically (not :hover, which already has its own signal). */
.rw-tab:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}
.rw-tab.is-active {
  background: rgba(240, 193, 115, 0.12);
  color: var(--mom-gold);
  border-color: var(--mom-border-soft);
  border-left-color: var(--mom-gold);
  box-shadow: inset 0 0 0 1px rgba(240, 193, 115, 0.12);
}
/* Squared badge, top tab bar only: see the block comment above. */
.rw-tabs .rw-tab::before {
  content: attr(data-rw-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--mom-gold-dim);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  font-family: var(--ru-font-head);
  font-weight: 900;
  font-size: 10px;
  color: var(--mom-gold-ops);
  letter-spacing: 0.5px;
}
.rw-tabs .rw-tab.is-active::before {
  background: var(--mom-gold);
  color: #000;
  border-color: var(--mom-gold);
}

/* ---- Foot navigation ----------------------------------------------------
   The same section buttons repeated at the foot of every section, generated
   by course-workbook.js so a member reading to the bottom of a section on a
   phone can jump straight to another section without scrolling back to the
   top tab bar. Reuses .rw-tab for the buttons themselves (squared/6-10px
   radii, never a pill) and wraps the same way the top bar does, so at
   375px this is a compact wrapping row, never a stack of full-width
   blocks. */
.rw-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--mom-border-faint);
}
.rw-foot-tab {
  flex: 0 1 auto;
}

/* ---- Progress tracker, VISIBLE BAR REMOVED 2026-08-08 ---------------------
   Anric, on the live player: "the progress bar should go, I don't think it
   adds any value." Hidden here, not deleted from any page's markup (same
   idiom course.css already uses for the old 04 SECTIONS shell - see that
   file's own .ru-rail-sections comment): display:none on the one base
   selector, !important because several later, more specific rules elsewhere
   in this file and in course.css un-suppress .rw-progress for one layout or
   course at a time (the REAP 901px+ override below, .ru-layout-workbook-right,
   .ru-layout-two-column) - each of those was written to restore the ONLY
   on-screen progress indicator for a page whose right-rail mirror is hidden,
   which was correct when the bar added value; now that Anric has said it
   doesn't, one !important here retires all of them at once without having
   to hunt down and edit every layout-specific exception across two files.
   The underlying tracking (course-workbook.js's dataFields/updateProgress(),
   completely unchanged) still runs and still writes into this hidden DOM -
   "other things may read it" per Anric's own instruction - only the visible
   bar is gone. course-nav.js's right-rail PROGRESS mirror is hidden the same
   way, see course.css's own .ru-progress-mirror rule. */
.rw-progress {
  display: none !important;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-panel);
  padding: 14px 16px;
  margin-bottom: 16px;
  text-align: center;
}
.rw-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}
.rw-progress-head h3 {
  color: var(--mom-text);
  font-family: var(--ru-font-head);
  font-size: 13px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.rw-progress-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--mom-gold);
}
.rw-progress-track {
  width: 100%;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--mom-radius-lg);
  overflow: hidden;
  position: relative;
}
.rw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mom-gold) 0%, var(--mom-gold-ops) 100%);
  border-radius: var(--mom-radius-lg);
  transition: width 0.3s ease;
  /* Just enough to keep a visible sliver of fill painted at 0% - no longer
     sized to fit the milestone label (see the rule below), so this can be
     small again. */
  min-width: 4px;
}
/* MILESTONE LABEL, FIXED 2026-08-08. Anric: the "Let's Begin!" label at 0%
   was clipped and overlapping the track. Root cause: the label lived
   INSIDE .rw-progress-fill's own box, centered by that box's flex rules -
   fine once the fill was a real width, but at 0% the fill has none, and
   only rendered at all because of a min-width floor (was 40px, existing
   only to give the label somewhere to sit). Every milestone string this
   file writes ("Building Momentum!", "Nearly Complete!", ...) is wider than
   40px, so this never actually fit at ANY percentage low enough to matter,
   not only 0% - the floor just made the overflow least obvious at mid-range
   fills where the real bar width happened to be close to the text's own
   width already.

   Fixed by decoupling the label from the fill's own shrinking box: it is
   absolutely positioned against .rw-progress-track (the track, already
   position: relative above - not the fill, which stays a plain static
   box), so the label always spans and centers on the FULL track regardless
   of what percentage the fill itself is painting - it can never again be
   squeezed narrower than its own text. Because the label now sits over
   BOTH the gold fill portion and the plain dark track portion at once (or
   straddles the boundary between them), a flat black-on-gold color (the
   old choice, only ever correct while the label was guaranteed to sit
   fully inside the gold fill) no longer works on its own - light text plus
   a dark text-shadow keeps it legible either way. */
.rw-progress-fill [data-rw-progress-text] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mom-text);
  font-weight: 700;
  font-size: 10.5px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.rw-last-saved {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--mom-text-muted);
}

/* ---- Sections ------------------------------------------------------------ */
.rw-section {
  display: none;
}
.rw-section.is-active {
  display: block;
}

/* HIDDEN 2026-08-08, Fix 5, approved direction: "the active tab already
   names the section" - .rw-tabs (above) is the section's own real, always-
   visible navigation, marking the current one .is-active; this gradient-
   filled restatement directly under it ("SECTION 1: FOUNDATION") repeated
   the exact same information the tab a member just clicked already gave
   them. Hidden, not deleted from any of the 26+ shipped module pages that
   carry this markup - same idiom this codebase already uses for the old 04
   SECTIONS rail shell (course.css's own .ru-rail-sections comment): no
   properties below matter once display:none applies, kept only so a future
   un-hide is a one-line revert, not a rewrite. */
.rw-section-title {
  display: none;
  background: linear-gradient(135deg, rgba(240, 193, 115, 0.18), rgba(240, 193, 115, 0.06));
  color: var(--mom-gold);
  border: 1px solid var(--mom-border-soft);
  font-family: var(--ru-font-head);
  font-size: 15px;
  margin: 0 0 10px;
  padding: 9px 14px;
  border-radius: var(--mom-radius-lg);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* DENSITY PASS, 2026-08-07 (2): h3 padding was 7px 10px (7 off scale, nearest
   --mom-space-2, 8px). h4 margin-bottom was 5px (off scale, nearest
   --mom-space-1, 4px). */
.rw h3 {
  color: var(--mom-text);
  font-family: var(--ru-font-head);
  font-size: 13.5px;
  margin: 12px 0 8px;
  padding: var(--mom-space-2) var(--mom-space-3);
  background: var(--mom-bg-inset);
  border-left: 4px solid var(--mom-gold);
  border-radius: 0 var(--mom-radius-xs) var(--mom-radius-xs) 0;
}
/* LEADER LINES, REMOVED, 2026-08-08, rampup-1 only. Anric, on the live
   Overview and Experiences sections: "on the left of every box, you have
   these weird leader lines... those lines do not serve any purpose... in
   some places there are three layers of vertical lines next to the text."
   Every h3 in this file's workbook carried its own 4px gold left rule
   (base rule above), so a card holding a heading plus a list underneath it
   painted two separate vertical lines down the same left margin, one after
   another. Scoped to .ru-layout-v2 (rampup-1's own wrapper class, set in
   that page's own markup, course.css) rather than edited on the shared
   base rule above: course-workbook.css is loaded by every course page
   still on the pre-flatten look (REAP, Accelerator, Unstoppable), and
   Anric has not signed off on this removal for those yet. The squared-off
   left corners (0 ... 0 above) existed only to sit flush against that
   border - both corners go back to the same radius every other panel in
   this file uses once the border is gone, so the box reads as a plain
   quiet heading strip, not a different kind of line. */
.ru-layout-v2 .rw h3 {
  border-left: none;
  border-radius: var(--mom-radius-xs);
}

.rw h4 {
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 12.5px;
  margin: 10px 0 var(--mom-space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Cards / callouts -----------------------------------------------------
   Vertical rhythm tightened 2026-08-07 (Anric, repeated across RAMP UP, REAP
   and now Becoming Unstoppable: "you're just burning up too much space and
   too much scrolling... be aggressive about removing wasted vertical
   space"). Every padding/margin value below only shrinks vertical whitespace
   between and inside blocks - no control shrinks below a readable/tappable
   size, no font-size drops, the 8px spacing scale is kept throughout
   (values are still 6/8/10/12/14/16/18px, the same scale course-workbook.css
   already used, just choosing tighter numbers off it). */
/* SHADING, NOT LINES, 2026-08-08 (2). The UNIFIED pass below this comment
   (Fix 5) replaced three previously-distinct boxes (.rw-card, .rw-highlight,
   .rw-details) with one shared 2px gold left-rule treatment, on top of
   .rw-question and .rw-banner already using the same rule - Anric's next
   note on the live player was the direct result: "we have a lot of lines on
   the left-hand side that I don't know serve what purpose... differentiate
   the boxes with a little bit of a lighter shading." The left rule is
   removed from all four block types below (.rw-question, .rw-card,
   .rw-highlight, .rw-details); each instead gets its OWN tone - never the
   same value as another type, so the four are told apart by background
   alone, at a glance, without reading the copy inside them:
     QUESTION   (.rw-question)  rgba(240,193,115,0.045) - faintest warm
                wash, quiet by default, brightens slightly on :focus-within
                (below) so a member can still see which question their
                cursor is in, without the old border-color swap.
     TEACHING   (.rw-card)      var(--mom-bg-inset), rgba(0,0,0,0.4) - the
                one COOL/neutral tone of the four, unchanged from before
                this pass (it was already this color, just also carried a
                now-removed left rule) - reads as "read this," not "notice
                this" or "type here."
     QUOTE      (.rw-highlight) rgba(240,193,115,0.10) - warmer/brighter
                than the question wash (over double the alpha), so a short
                emphasized line visibly stands out from a plain teaching
                card, the same "stand out" job the old left rule tried to do
                with a line instead of a tone.
     COLLAPSIBLE (.rw-details)  var(--mom-bg-panel-dim), rgba(8,8,12,0.62) -
                a third, distinct dark tone (lighter and slightly bluer than
                the pure-black .rw-card inset), its own identity as "tap to
                reveal," not a fourth near-copy of the teaching card.
   Every one of the four keeps a small squared radius (--mom-radius-xs, 3px)
   instead of the old border-radius: 0 - enough to read as a soft block edge
   against the tone shift, never the heavy bordered/shadowed nested-card
   look Anric separately rejected earlier this same day (Fix 5's own
   comment, preserved below): no border, no drop shadow, no pill radius on
   any of the four. */
.rw-card {
  background: var(--mom-bg-inset);
  border: none;
  border-radius: var(--mom-radius-xs);
  padding: 12px 14px;
  margin: 10px 0;
}

.rw-nugget,
.rw-critical {
  position: relative;
  padding: 16px 14px 12px;
  margin: 16px 0 14px;
  border-radius: var(--mom-radius-lg);
}
.rw-nugget {
  background: var(--mom-bg-inset);
}
/* LEADER LINES, REMOVED EVERYWHERE, 2026-08-08 (3). Anric, on
   unstoppable-3 live: "look at these leader lines that you're creating on
   the left-hand side. One of them is a curved line right next to
   Lauralouise's own words. That's now messing up some of those tick box
   bullets." The POWER NUGGET's own gold left rule (base rule above, was
   border-left: 4px solid var(--mom-gold)) sat directly beside the nugget's
   own text - including her own literal checkmark bullets (the pre-wrap
   paragraph's leading "check mark" characters) - and, with the panel's
   border-radius, read as a curved line crowding them. This was already
   scoped off for rampup-1 only (.ru-layout-v2 .rw-nugget, previously here)
   pending Anric's sign-off for every other page; he has now seen and flagged
   it on Becoming Unstoppable specifically, so the border is removed from the
   BASE rule instead of adding a second scoped override - it is the same
   shared component on RAMP UP (10 pages), REAP (12 pages) and Becoming
   Unstoppable alike, and this is the course template he is standardising
   on. Padding was already symmetric (14px both sides) before the border ate
   into the left side only, so nothing else needs to move; border-radius was
   already uniform on every corner (never flush-left like .rw-check below),
   so nothing needs resetting there either. VERIFY after this change: every
   RAMP UP and REAP module's own POWER NUGGET reads the same way, one clean
   dark card with no bar on its left edge. */
.rw-critical {
  background: rgba(220, 20, 60, 0.08);
  border: 1px solid rgba(220, 20, 60, 0.4);
}
.rw-nugget-tag,
.rw-critical-tag {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 3px 10px;
  border-radius: var(--mom-radius-xs);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rw-nugget-tag {
  background: var(--mom-gold);
  color: #000;
}
.rw-critical-tag {
  background: var(--mom-red);
  color: #fff;
}
/* DENSITY PASS: these three paragraph selectors carried no font-size at
   all before this pass, so every teaching paragraph in every nugget,
   critical callout and plain card - the single most common piece of
   content in any module, far more frequent than a question - rendered at
   the browser's undeclared 16px default, one full tier above the
   question label it was supposed to sit underneath. Explicit 13.5px (still
   comfortably above the 13px body-text floor) plus a tighter line-height
   and bottom margin is most of this pass's real vertical-space win, because
   it repeats on every teaching block on every module. */
.rw-nugget p,
.rw-critical p,
.rw-card p {
  margin: 0 0 8px;
  line-height: 1.55;
  font-size: 13.5px;
  color: var(--mom-text-soft);
}
.rw-nugget p:last-child,
.rw-critical p:last-child,
.rw-card p:last-child {
  margin-bottom: 0;
}
.rw-nugget strong,
.rw-critical strong,
.rw-card strong {
  color: var(--mom-text);
}

/* ---- Question / textarea blocks, SHADED not RULED, 2026-08-08 (2) --------
   See .rw-card's own "SHADING, NOT LINES" comment above for the full four-
   way tone system this belongs to. Was a left-rule-only treatment (Fix 5,
   preserved in spirit below): no background, no border, a 2px gold line that
   brightened on :focus-within. Anric's follow-up flagged that exact pattern,
   repeated across every block type, as "a bunch of lines... AI-generated" -
   the fix is the faintest of the four tones (rgba(240,193,115,0.045)), a
   background wash rather than an edge, so a QUESTION reads as its own quiet
   zone without competing with the brighter QUOTE tone or fighting the
   textarea's own deliberately-bright cream well beneath it (that well's
   contrast is untouched, still the brightest thing in a question block, per
   Anric's own earlier "the original used white inputs, ours are hard to see
   where to type" note). Padding moves from left-only (4px 0 4px 14px, sized
   to clear the old rule's own offset) to a real full padding on every side,
   since the block is now a tinted rectangle, not a line with text hanging
   off it. :focus-within still marks which question a member's cursor is in
   - the same signal as before, now a small background brighten instead of a
   border-color swap. */
.rw-question {
  position: relative;
  background: rgba(240, 193, 115, 0.045);
  border: none;
  border-radius: var(--mom-radius-xs);
  padding: var(--mom-space-3) var(--mom-space-4);
  margin: var(--mom-space-4) 0;
  transition: background-color 0.18s ease;
}
.rw-question:focus-within {
  background: rgba(240, 193, 115, 0.085);
}
/* FIX 3, 2026-08-08 (badge/label overlap). Was position:absolute, top:-13px
   - a tag straddling the old boxed card's top border, cleared from the
   label beneath it only because that card's own 16px padding-top (removed
   above) reserved the room. Flattening away the box removes that reserved
   room too, and the badge would then land right on top of whatever came
   next - the exact overlap Anric saw on the live player. Fixed at the root
   instead of re-tuning offsets against the new padding: the badge is back
   in NORMAL FLOW, a small inline-flex tag that sits on its own line with
   margin-bottom below it. A normal-flow block can never overlap the
   sibling after it, at any width, regardless of what padding .rw-question
   carries now or ever carries in the future - and it works identically
   whichever element happens to follow the badge in a given question's own
   markup (a label directly, or an <h3> first, both patterns ship today). */
.rw-question-num {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin: 0 0 6px;
  padding: 0 var(--mom-space-2);
  background: var(--mom-gold);
  color: #000;
  border-radius: var(--mom-radius-xs);
  font-size: 11px;
  font-weight: 700;
}
/* DENSITY PASS, question label vs help text: measured before this pass at
   1440px, .rw-question-label rendered 15.2px and the very next .rw-question
   p (help text, see below) rendered 16px WHITE, unstyled - the help copy
   was both bigger and brighter than the label it was supporting, the exact
   "mush, no hierarchy" defect Anric flagged against the old GoHighLevel
   build. Label now fixed at 14px/700/gold; help text fixed smaller, lighter
   weight, muted grey (see .rw-question p) - the gap between them is now a
   deliberate three-part signal (size, weight, color), not an accident of
   two different unstyled defaults landing close together. */
.rw-question-label {
  color: var(--mom-gold);
  font-weight: 700;
  font-size: 14px;
  /* DENSITY PASS, 2026-08-07 (2): was 11px, off the space scale (nearest is
     --mom-space-3, 10px). */
  margin-top: var(--mom-space-3);
  display: block;
}
/* FIX 3: the badge above now reserves its own clearance via its own
   margin-bottom, not via this label's top margin - a first label sitting
   directly under the badge needs no extra top offset of its own. */
.rw-question-label:first-of-type {
  margin-top: 0;
}
/* This selector did not exist before this pass - the help line under a
   question label was a bare, unstyled <p>, so it rendered at the browser's
   16px default in full-bright --mom-text (white), one tier ABOVE its own
   label. Small, muted, tight: the same visual demotion the old build gave
   its own help text (14px grey against a 16px white bold label) but tuned
   to this file's tighter base. */
.rw-question p {
  /* DENSITY PASS, 2026-08-07 (2): top was 3px (off scale, nearest is
     --mom-space-1, 4px). */
  margin: var(--mom-space-1) 0 var(--mom-space-3);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--mom-text-muted);
}

/* Input contrast, 2026-08-07 (Anric, comparing against the old build):
   "the original used white inputs... ours are hard to see where to type."
   Measured before that pass: .rw-textarea painted rgba(0,0,0,0.5) on top of
   the panel's own rgba(8,8,12,0.74) - two near-identical near-black values,
   so the field had no visible boundary against the panel behind it. Fixed
   at the time by giving the field a near-cream "paper" well, rgba(244, 240,
   232, 0.94) with #1a1a1a text - real contrast, but the brightest thing on
   the whole page, on every one of a module's 10-20+ questions at once,
   which is its own defect: it pulls the eye off the question text and onto
   the box.

   REVISED 2026-08-08. Same problem (a visible boundary against the panel
   behind it), different solution: a real dark surface, not a light one,
   distinguished by its OWN border and depth rather than by brightness -
   the Momentum idiom the rest of the estate already uses (.rw-copy-textarea
   a few hundred lines below is this exact recipe, already shipped, already
   proven readable). rgba(0, 0, 0, 0.55) composites over .rw-question's own
   rgba(0, 0, 0, 0.4) background, which composites over .rw's own panel
   background, which composites over the page - measured in-browser at
   roughly #020203, essentially opaque black regardless of what page it
   sits on. --mom-text-soft (#cfcfcf) against that measures 13.3:1 by the
   WCAG relative-luminance formula, comfortably clear of the 4.5:1 body-text
   floor (small, unbolded copy) - about the same margin the old cream field
   had (#1a1a1a on rgba(244,240,232,0.94) was roughly 14.8:1), so this
   trades "brightest box on the page" for "clearly bordered, still easy to
   read," not contrast for looks. The border carries the boundary now
   (var(--mom-border-strong), the same gold-tinted line every other control
   in this file already uses) instead of a brightness jump; the gold focus
   ring is unchanged. */
.rw-textarea {
  width: 100%;
  /* DENSITY PASS, 2026-08-07 (2): was 104px. The textarea is the single
     biggest piece of visual mass in the most-repeated block on the page
     (see .rw-question above), and the hold list keeps it a real light
     writing well, "less tall and less padded" - 84px still comfortably
     shows 3-4 lines of text before scrolling, same width, same contrast,
     same border. */
  min-height: 84px;
  /* was 11px 12px, top off the space scale (nearest --mom-space-3, 10px). */
  padding: var(--mom-space-3) var(--mom-space-4);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-lg);
  color: var(--mom-text-soft);
  font-family: var(--ru-font-body);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  /* was 6px, off scale (nearest --mom-space-1, 4px). Repeats once per
     question, same as the padding/min-height trims above. */
  margin-top: var(--mom-space-1);
}
.rw-textarea:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-textarea::placeholder {
  color: var(--mom-text-muted);
}

/* ---- Lists ------------------------------------------------------------ */
.rw-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* DENSITY PASS, 2026-08-07 (2): padding was 7px (off scale, nearest
   --mom-space-2, 8px); margin was 3px (off scale, nearest --mom-space-1, 4px). */
.rw-list li {
  padding: var(--mom-space-2) var(--mom-space-3);
  margin: var(--mom-space-1) 0;
  background: var(--mom-bg-inset);
  border-left: 3px solid var(--mom-gold);
  border-radius: 0 var(--mom-radius-xs) var(--mom-radius-xs) 0;
  color: var(--mom-text-soft);
  font-size: 13px;
}
/* LEADER LINES, REMOVED, 2026-08-08, rampup-1 only - see the matching
   .ru-layout-v2 .rw h3 comment above for Anric's full note. This is the
   one he most likely meant by "three layers": a .rw-card holding an h3
   directly above a .rw-list stacked two of these left rules one after
   another in the same box (Zone of Genius, Iconic Brand Statements). Same
   fix as the h3 override above - border gone, left/right padding matches
   again, corners go back to the uniform radius every other panel uses. */
.ru-layout-v2 .rw-list li {
  border-left: none;
  border-radius: var(--mom-radius-xs);
}
.rw-list li strong {
  color: var(--mom-text);
}

/* ---- ACF diagram -------------------------------------------------------- */
.rw-acf {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-panel);
  padding: 18px;
  margin: 16px 0;
  text-align: center;
}
.rw-acf-rings {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.rw-acf-rings li {
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-lg);
  padding: 9px 16px;
  margin: 5px auto;
  max-width: 460px;
  font-weight: 600;
  font-size: 13px;
  color: var(--mom-text-soft);
}

/* ---- Formula box --------------------------------------------------------- */
.rw-formula {
  background: rgba(0, 0, 0, 0.55);
  color: var(--mom-gold);
  padding: 14px;
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-lg);
  text-align: center;
  font-family: var(--ru-font-head);
  font-size: 14.5px;
  margin: 12px 0;
}

/* ---- Highlight block -----------------------------------------------------
   Generic quote / emphasis callout, used inside a card or question when a
   short line needs to stand out without a full nugget badge. Replaces the
   source pattern's italic treatment: Momentum forbids italics everywhere,
   so emphasis here comes from font weight and its own warm tone instead
   (SHADING, NOT LINES, see .rw-card's own comment above for the full
   four-way system) - the brightest, warmest of the four tones
   (rgba(240,193,115,0.10), more than double .rw-question's wash) is what
   makes a QUOTE visibly "stand out" now, the job the old left rule used to
   try to do with a line. */
.rw-highlight {
  background: rgba(240, 193, 115, 0.1);
  border: none;
  border-radius: var(--mom-radius-xs);
  padding: 12px 14px;
  margin: 10px 0;
}
.rw-highlight p {
  margin: 0;
  color: var(--mom-text);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---- Choice picker ---------------------------------------------------
   Generic clickable option-card control. Behaviour lives in
   course-workbook.js, fully data-driven and not specific to any one
   workbook: a container marked data-rw-choice="<field-name>" holds any
   number of options marked data-rw-choice-value="<value>". Selecting an
   option marks it, clears its siblings, and the picker counts as one
   answered field, same contract as a textarea. Squared corners only, no
   pill radii, no scale/translateY hover jump (Momentum tap-target rule). */
.rw-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
.rw-choice-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--ru-font-body);
}
.rw-choice-option.is-selected {
  border-color: var(--mom-gold);
  background: linear-gradient(135deg, rgba(240, 193, 115, 0.16), rgba(240, 193, 115, 0.05));
}
/* FOCUS SWEEP, 2026-08-08: no focus style existed here at all (not even an
   incomplete one) - a native <button> with author-set colors so the
   browser's own default outline was the only signal a keyboard user had. */
.rw-choice-option:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}
.rw-choice-option-title {
  display: block;
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.rw-choice-option-desc {
  display: block;
  color: var(--mom-text-soft);
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 600px) {
  .rw-choice {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Checklist item ---------------------------------------------------
   Generic checkbox field. Behaviour lives in course-workbook.js: any
   <input type="checkbox" data-rw-checkbox="<field-name>"> is a data field,
   true/false, restored on load and counted toward progress, the same
   generic contract a textarea or a choice picker already has. The native
   checkbox is kept (styled via accent-color) rather than a custom SVG
   toggle: fewer moving parts, and a native control is never a pill by
   default. The label wraps the whole row so the entire strip is the tap
   target, not just the small box.
   LEADER LINE, REMOVED, 2026-08-08 (3): the same "leader lines... clutter
   and noise" note that took the gold rule off .rw-nugget (above) named this
   row too - Anric, on Becoming Unstoppable's own checklist: "messing up
   some of those tick box bullets." border-radius goes back to uniform on
   every corner (was flush-left, 0 on the left two, to sit flush against the
   now-removed border) - the same reset this file's own
   ".ru-layout-v2 .rw-list li" override already applies for the identical
   left-rule-plus-squared-corner shape, just applied to every course page
   here rather than scoped to one. */
.rw-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* padding kept close to its old value (was 12px 14px) - unlike most
     spacing in this pass, this row's own padding is most of its 40px
     minimum tap target, so it is not a candidate for the same trim. */
  padding: 11px 12px;
  margin: 6px 0;
  background: var(--mom-bg-inset);
  border-radius: var(--mom-radius-xs);
  cursor: pointer;
}
.rw-check-input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--mom-gold);
  cursor: pointer;
}
/* FOCUS SWEEP, 2026-08-08: native checkbox, no focus style at all - same
   gold ring every other control in this sweep uses. */
.rw-check-input:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}
.rw-check-text {
  color: var(--mom-text-soft);
  font-size: 13px;
  line-height: 1.45;
}
.rw-check-input:checked ~ .rw-check-text {
  color: var(--mom-text);
  font-weight: 600;
}

/* ---- Table --------------------------------------------------------------
   Generic reference table (a benchmark, a cost breakdown, a weekly plan).
   Wrapped in .rw-table-wrap with its own horizontal scroll so a wide table
   never forces the page itself to scroll sideways at 375px. */
.rw-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--mom-border-faint);
  border-radius: var(--mom-radius-lg);
}
.rw-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
/* DENSITY PASS, 2026-08-07 (2): was 9px (off scale, nearest --mom-space-2, 8px). */
.rw-table th,
.rw-table td {
  padding: var(--mom-space-2) var(--mom-space-4);
  text-align: left;
  border-bottom: 1px solid var(--mom-border-faint);
  color: var(--mom-text-soft);
}
.rw-table tr:last-child td {
  border-bottom: none;
}
.rw-table th {
  background: var(--mom-bg-inset);
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* Same input-contrast fix as .rw-textarea above: a real light writing
   surface instead of near-black-on-near-black. */
.rw-table td input[type="text"] {
  width: 100%;
  min-width: 60px;
  padding: 6px 8px;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-xs);
  color: #1a1a1a;
  font-size: 13.5px;
}
.rw-table td input[type="text"]:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}

/* ---- Data grid (fourth control type) --------------------------------------
   Generic grid/matrix DATA FIELD, behaviour lives in course-workbook.js
   (data-rw-grid). NOT the same thing as .rw-table above: that class is a
   static reference table (a benchmark, unsaved scratch numbers); .rw-
   datagrid is a saved, restored, progress-counted workbook field, one
   localStorage entry for the whole table. Also not the same thing as
   .rw-grid (the framework-overview info-card layout further down this
   file) - the two names are unrelated on purpose, this control needed its
   own prefix rather than overloading either existing class.

   375px rule: the table itself is never restacked into a card-per-row
   layout. It keeps its real row/column shape (a member reading "Step 3,
   Platform used, Drop-off rate" needs to see the column headers line up
   with the cells, exactly the reason a restack was rejected here), and
   instead scrolls horizontally inside its own .rw-datagrid-scroll
   container, so a wide grid never forces the page itself to scroll
   sideways. Same technique .rw-table-wrap already uses above. */
.rw-datagrid {
  margin-top: 10px;
}
.rw-datagrid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mom-border-faint);
  border-radius: var(--mom-radius-lg);
}
.rw-datagrid-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
/* DENSITY PASS, 2026-08-07 (2): was 9px (off scale, nearest --mom-space-2, 8px). */
.rw-datagrid-table th,
.rw-datagrid-table td {
  padding: var(--mom-space-2) var(--mom-space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mom-border-faint);
  border-right: 1px solid var(--mom-border-faint);
}
.rw-datagrid-table th:last-child,
.rw-datagrid-table td:last-child {
  border-right: none;
}
.rw-datagrid-table tr:last-child td,
.rw-datagrid-table tr:last-child th {
  border-bottom: none;
}
.rw-datagrid-table thead th {
  background: var(--mom-bg-inset);
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.rw-datagrid-table tbody th[scope="row"] {
  background: var(--mom-bg-inset);
  color: var(--mom-text);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.rw-datagrid-table td {
  background: rgba(0, 0, 0, 0.25);
}
/* Same input-contrast fix as .rw-textarea above. */
.rw-datagrid-cell-input {
  width: 100%;
  min-width: 110px;
  padding: 8px 10px;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-xs);
  color: #1a1a1a;
  font-family: var(--ru-font-body);
  font-size: 13.5px;
}
.rw-datagrid-cell-textarea {
  width: 100%;
  min-width: 160px;
  min-height: 66px;
  padding: 8px 10px;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-xs);
  color: #1a1a1a;
  font-family: var(--ru-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  resize: vertical;
}
.rw-datagrid-cell-input:focus,
.rw-datagrid-cell-textarea:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-datagrid-cell-input::placeholder,
.rw-datagrid-cell-textarea::placeholder {
  color: rgba(26, 26, 26, 0.5);
}
/* Static caption inside a cell (e.g. the REAP Grid's ELIMINATE/AMPLIFY
   quadrant names): plain markup, not a data field, never read by
   course-workbook.js - purely a label sitting above that cell's own
   input/textarea. */
.rw-datagrid-tag {
  display: block;
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

/* ---- Collapsible reference block -----------------------------------------
   Native <details>/<summary>, no JavaScript needed for the expand/collapse
   itself. Used for reference material that is not a data field (a template,
   a spec sheet, a resource list) so it can sit closed by default without
   crowding the page. Squared corners, no pill, no scale/translateY jump.
   Its own tone (var(--mom-bg-panel-dim), rgba(8,8,12,0.62)) is the fourth
   and last of the SHADING, NOT LINES system - see .rw-card's own comment
   above - a third, distinct dark value from .rw-card's pure-black inset,
   giving COLLAPSIBLE its own identity as "tap to reveal" rather than a
   fourth copy of the teaching-card tone. */
.rw-details {
  margin: 10px 0;
  border: none;
  border-radius: var(--mom-radius-xs);
  background: var(--mom-bg-panel-dim);
  overflow: hidden;
}
/* EXPAND AFFORDANCE, FIXED 2026-08-08 (2). Anric, on the live REAP labs:
   "neither are the plus signs that expand the panel [clear]." The old +/-
   was a bare character glyph sitting in the row - no box, no background, no
   hover or open-state feedback beyond the character itself swapping - easy
   to miss as a control at all. Three changes, all below: (1) the whole
   summary row gets a hover tint and cursor: pointer was already set, so
   passing the mouse anywhere over the label (not just the tiny +/-
   character) now visibly responds, and the summary text itself brightens
   on hover, reading as clickable the same way a link does; (2) the +/-
   moves from a bare ::after character to a real squared control - a 26px
   bordered box, the same "small squared badge" idiom .rw-tabs .rw-tab
   ::before already uses elsewhere in this file for its own numbered badge,
   not a new visual language; (3) STATEFUL: closed is a dim outline badge
   (gold-dim fill, gold-ops text, same resting look as an inactive tab),
   open is a solid gold badge with black text plus a light tint on the
   summary row itself - a real visual state change, not just the character
   swap alone, so "clearly a control, visibly different when open versus
   closed" holds even at a glance. Row padding is unchanged (13px 14px,
   already a real >=40px tap target, see the preserved note below) - only
   the affordance inside that row changes. */
.rw-details > summary {
  cursor: pointer;
  /* padding kept close to its old value - this is the header a member
     clicks to expand a teaching block, so it stays a real >=40px tap
     target rather than following the same trim as purely decorative
     chrome elsewhere in this pass. */
  padding: 13px 14px;
  font-family: var(--ru-font-head);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mom-gold);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.rw-details > summary:hover {
  background: rgba(240, 193, 115, 0.07);
  color: var(--mom-gold-hot);
}
.rw-details[open] > summary {
  background: rgba(240, 193, 115, 0.05);
}
.rw-details > summary::-webkit-details-marker {
  display: none;
}
.rw-details > summary::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--mom-gold-dim);
  border: 1px solid var(--mom-border-ops);
  border-radius: var(--mom-radius-xs);
  font-family: var(--ru-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--mom-gold-ops);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rw-details[open] > summary::after {
  content: '\2212';
  background: var(--mom-gold);
  color: #000;
  border-color: var(--mom-gold);
}
.rw-details > summary:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: -2px;
}
.rw-details-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--mom-border-faint);
  padding-top: 12px;
}

/* ---- Resource link --------------------------------------------------------
   The "Get X ->" style anchor inside a .rw-grid-card pointing at an
   external tool or vendor page. */
.rw-resource-link {
  color: var(--mom-gold);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  margin-top: 6px;
}
.rw-resource-link:hover {
  text-decoration: underline;
}
/* FOCUS SWEEP, 2026-08-08: anchor had a :hover treatment but no
   :focus-visible at all. */
.rw-resource-link:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}

/* ---- Metric grid -----------------------------------------------------------
   A big-number stat tile (a percentage split, a tracked metric), reusing
   the same card surface as .rw-grid-card but sized for one short number
   instead of a paragraph of copy. Not a data field unless it also carries
   an <input> for the member's own number (Success Metrics Dashboard uses
   this for scratch, unsaved figures, matching the source's own behaviour:
   those numbers were never persisted there either). */
.rw-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
}
.rw-metric-card {
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-lg);
  padding: 15px;
  text-align: center;
}
.rw-metric-value {
  font-family: var(--ru-font-head);
  font-size: 22px;
  color: var(--mom-gold);
}
.rw-metric-card input[type="text"],
.rw-metric-card input[type="number"] {
  width: 80%;
  padding: 7px;
  margin: 4px 0 6px;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-xs);
  color: #1a1a1a;
  font-size: 14px;
  text-align: center;
}
/* FOCUS SWEEP, 2026-08-08: same cream input family as .rw-textarea/
   .rw-table td input/.rw-datagrid-cell-input above, but this one had no
   :focus rule at all - same real replacement (never outline: none alone). */
.rw-metric-card input[type="text"]:focus,
.rw-metric-card input[type="number"]:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-metric-label {
  color: var(--mom-text-muted);
  font-size: 11px;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
@media (min-width: 600px) {
  .rw-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* ---- Calculator result -----------------------------------------------------
   The SSI-score reach-impact readout: hidden until the member calculates,
   then a short gold-on-black result strip. Not a data field, transient. */
.rw-calc-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 11px;
  margin: 8px 0;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-lg);
  color: #1a1a1a;
  font-size: 14px;
}
.rw-calc-input:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-calc-result {
  background: var(--mom-gold);
  color: #000;
  padding: 14px;
  border-radius: var(--mom-radius-lg);
  text-align: center;
  font-weight: 700;
  margin-top: 12px;
}

/* ---- Info-card grid -------------------------------------------------------
   Generic 1-then-2-column grid of small explanatory cards, used for a
   framework overview sitting between a workbook's questions (a set of
   zones, pillars or stages a member reads before answering). Not a data
   field, purely explanatory. Protocol 4 uses it for its six Football Field
   zones and its four Trust pillars; any later protocol with a similar
   framework overview can reuse it instead of inventing another grid.
   .rw-grid-badge is a squared corner marker (a letter, number or icon),
   never a circle. */
.rw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0;
}
.rw-grid-card {
  position: relative;
  background: var(--mom-bg-inset);
  border: 1px solid var(--mom-border-faint);
  border-radius: var(--mom-radius-lg);
  padding: 14px;
}
.rw-grid-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--mom-gold);
  color: #000;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--mom-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ru-font-head);
  font-weight: 700;
  font-size: 12.5px;
}
.rw-grid-title {
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 42px 4px 0;
}
.rw-grid-sub {
  color: var(--mom-text-muted);
  font-size: 11px;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* Same unstyled-paragraph bug as .rw-nugget/.rw-critical/.rw-card above -
   this one had no font-size either. */
.rw-grid-card p {
  margin: 0 0 8px;
  color: var(--mom-text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.rw-grid-card p:last-child {
  margin-bottom: 0;
}
.rw-grid-card .rw-list {
  margin-top: 4px;
}
@media (min-width: 600px) {
  .rw-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Template block -------------------------------------------------------
   Generic monospaced example block (an email signature template, a bio
   template) inside a .rw-card, preserving the source's line breaks without
   an italic treatment. Not a data field. Protocol 6 uses it for its two
   positioning templates; any later protocol with a similar copy-paste
   template can reuse it instead of inventing another block. */
.rw-template {
  font-family: var(--mom-font-mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mom-border-faint);
  border-radius: var(--mom-radius-lg);
  padding: 12px 14px;
  margin: 8px 0 0;
  color: var(--mom-text-soft);
  line-height: 1.55;
}

/* ---- Final / closing section ---------------------------------------------
   DENSITY PASS, 2026-08-07 (2): padding was 17px 16px, margin 15px 0 - both
   off scale (nearest --mom-space-6, 16px both times). */
.rw-final {
  background: linear-gradient(135deg, rgba(240, 193, 115, 0.16), rgba(240, 193, 115, 0.04));
  border: 1px solid var(--mom-border-soft);
  color: var(--mom-text);
  padding: var(--mom-space-6);
  border-radius: var(--mom-radius-panel);
  margin: var(--mom-space-6) 0;
  text-align: center;
}
.rw-final h2 {
  font-family: var(--ru-font-head);
  color: var(--mom-gold);
  font-size: 19px;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
/* Same unstyled-paragraph bug as .rw-nugget/.rw-card/.rw-grid-card p above. */
.rw-final p {
  margin: 0 0 8px;
  color: var(--mom-text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.rw-final p:last-child {
  margin-bottom: 0;
}
.rw-final strong {
  color: var(--mom-text);
}

/* ---- Action buttons ------------------------------------------------------ */
.rw-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.rw-btn {
  padding: 13px 24px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ru-font-body);
  border: 1px solid transparent;
  border-radius: var(--mom-radius-lg);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.rw-btn-save {
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--mom-green);
}
.rw-btn-email {
  background: var(--mom-gold);
  border-color: var(--mom-gold);
  color: #000;
}
.rw-btn-secondary {
  background: var(--mom-bg-inset);
  border-color: var(--mom-border-soft);
  color: var(--mom-text-soft);
}
.rw-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* FOCUS SWEEP, 2026-08-08: .rw-btn (save/download/email/secondary, the
   footer's own compact buttons, and every email-dialog button - Send,
   Cancel, Copy to clipboard - all reuse this one class) had no focus style
   at all. One rule covers every button in the workbook that isn't already
   covered above. */
.rw-btn:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}

/* ---- Sticky save/email bar, REMOVED 2026-08-08 -----------------------------
   Shipped 2026-08-06, slimmed 2026-08-08, removed outright the same day.
   Anric: "the save, download, email button can actually go into the footer
   area... and not have to be a sticky artifact that possibly conflicts with
   other functionality" - he separately reported the page header becoming
   unclickable and suspected this bar. Save/Download/Email now live in the 05
   PREVIOUS/NEXT footer panel (course-nav.js's renderFoot(), a generic
   [data-rw-actions-host] every course page gets for free), rendered by
   .rw-actions-inline below - never floated, never position:fixed, so it can
   never again sit on top of the header or anything else. .rw-btn-compact
   (the small-footprint button size the removed bar introduced) survives
   below: the footer's buttons reuse it too, same reasoning, still a real
   button. */
/* DENSITY, 2026-08-08: was padding 10px 14px / font-size 0.78em / min-height
   40px - a full-size tap target where a small utility strip reads better.
   30px still clears the ~28px floor most touch guidance treats as a hard
   minimum for a low-frequency, low-consequence action (Save/Download/Email,
   never a destructive one). */
.rw-btn-compact {
  padding: 6px 10px;
  font-size: 0.68em;
  min-height: 30px;
}

/* ---- In-column actions block, THE one home, 2026-08-06, REVISED 2026-08-08
   See course-workbook.js's own "SAVE/DOWNLOAD/EMAIL ACTIONS" header comment:
   buildInlineActions() renders Save/Download/Email into whichever
   [data-rw-actions-host] element the page provides - never floated, never
   position:fixed. Base rule here is the narrow-column shape (stacked, full
   width buttons) this started life for (public/unstoppable-4/index.html's
   own left column - nothing here names that page or course). The 05
   PREVIOUS/NEXT footer host (course-nav.js's renderFoot()) is full width,
   not a narrow column, so .ru-foot-actions overrides this to a single row
   instead - see that selector in course.css. */
.rw-actions-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-actions-inline-status {
  font-family: var(--ru-font-body);
  font-size: 12px;
  color: var(--mom-text-muted);
}
.rw-actions-inline-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rw-actions-inline-buttons .rw-btn {
  width: 100%;
}

/* ---- Email dialog ---------------------------------------------------------
   Fixed overlay/dialog: intentionally NOT scoped visually inside .rw's own
   panel bounds (position: fixed escapes it by design), but the selectors
   themselves stay under the .rw- namespace.

   HARDENED, 2026-08-08 (Anric: "something is definitely preventing the
   header... from being clickable" - investigated across rampup-1 and reap-1
   in a real browser via document.elementFromPoint at the center of every
   header button, in every reachable state: fresh load, dialog opened, dialog
   closed, scrolled deep into the workbook. Every check landed on the
   button's own label span in every state tried; no reproduction found in the
   committed engine as it stands today. The named prime suspect was this
   exact overlay - a position:fixed, inset:0, full-viewport layer sitting at
   z-index 999, well under #mn-bar's own 9999, but ONLY as long as it is
   actually display:none while [hidden]. Before this pass, "hidden" was
   carried by exactly one signal: the [hidden] IDL attribute, reflected only
   through the browser's own UA stylesheet default plus one matching
   .rw-overlay[hidden]/.rw-dialog[hidden] rule - correct today, but a single
   point of failure. Any future edit to this shared file (or a page that
   copies this pattern) that adds one unscoped .rw-overlay/.rw-dialog rule
   ABOVE these two with its own display value, or that toggles the class
   instead of the attribute, silently repaints a full-viewport click-catcher
   over the whole page, including the header, with no visual sign anything is
   wrong. Two independent, redundant defenses now stand in for that one
   signal: (1) display:none is the OWN base value on .rw-overlay/.rw-dialog,
   not just a value applied when [hidden] happens to match, so nothing needs
   to add up to display:none - it already is; (2) pointer-events:none while
   hidden ensures that even if some future display override slips past #1
   (a `display: flex` "for centering" is the single most common way this
   exact bug reappears across GHL-derived overlays - see the original ported
   source), the layer still cannot swallow a click meant for anything real on
   the page. Neither changes the show/hide contract: course-workbook.js still
   only ever sets/clears the `hidden` IDL property (openEmailDialog/
   closeEmailDialog, unchanged), which continues to add/remove the reflected
   HTML attribute exactly as before. */
.rw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
  display: none;
  pointer-events: none;
}
.rw-overlay:not([hidden]) {
  display: block;
  pointer-events: auto;
}
.rw-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0d0d0d;
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-panel);
  padding: 26px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  max-width: 540px;
  width: 92%;
  max-height: 86vh;
  overflow-y: auto;
  display: none;
  pointer-events: none;
}
.rw-dialog:not([hidden]) {
  display: block;
  pointer-events: auto;
}
.rw-dialog h3 {
  background: none;
  border: none;
  padding: 0;
  color: var(--mom-gold);
  font-family: var(--ru-font-head);
  margin: 0 0 12px;
}
.rw-dialog p {
  color: var(--mom-text-soft);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
}
/* Same input-contrast fix as .rw-textarea above - this is the member's own
   name/email capture field, the same "where do I type" problem applies. */
.rw-dialog-field {
  width: 100%;
  padding: 10px 11px;
  margin: 0 0 12px;
  background: rgba(244, 240, 232, 0.94);
  border: 1px solid var(--mom-border-strong);
  border-radius: var(--mom-radius-lg);
  color: #1a1a1a;
  font-size: 13.5px;
}
.rw-dialog-field:focus {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-dialog-field::placeholder {
  color: rgba(26, 26, 26, 0.5);
}
.rw-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--mom-text-soft);
  font-size: 13px;
}
.rw-checkbox-row input {
  width: auto;
  margin: 0;
}
/* FOCUS SWEEP, 2026-08-08: the CC-to-partners@magnumvault.com checkbox in
   the email dialog, bare native input, no focus style at all. */
.rw-checkbox-row input:focus-visible {
  outline: 2px solid var(--mom-gold);
  outline-offset: 2px;
}
.rw-copy-note {
  font-size: 0.8em;
  color: var(--mom-text-muted);
  margin: 0 0 8px;
}
.rw-copy-textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--mom-border-soft);
  border-radius: var(--mom-radius-lg);
  color: var(--mom-text-soft);
  font-family: var(--mom-font-mono);
  font-size: 0.78em;
  line-height: 1.5;
  margin-bottom: 14px;
  resize: vertical;
}
/* FOCUS SWEEP, 2026-08-08: readonly, but still a real focusable element
   (a keyboard user can Tab to it to select-all and copy manually) - no
   focus style existed. */
.rw-copy-textarea:focus-visible {
  outline: none;
  border-color: var(--mom-gold);
  box-shadow: 0 0 0 3px rgba(240, 193, 115, 0.28);
}
.rw-dialog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rw-dialog-actions .rw-btn {
  flex: 1 1 auto;
}
.rw-copy-status {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8em;
  color: var(--mom-green);
}

/* ---- Wider layout, 600px and up ------------------------------------------- */
@media (min-width: 600px) {
  .rw {
    /* Bottom matches top/side again, same reason as the base rule above -
       no floating .rw-sticky-bar left to clear. */
    padding: 22px 26px;
  }
  .rw-actions {
    justify-content: flex-start;
  }
}

/* ---- Desktop rail takeover, 901px and up ----------------------------------
   REVISED 2026-08-08 (04 SECTIONS removed, see .rw-tabs's own top-of-file
   comment): only .rw-progress is suppressed here now. Progress still has a
   real duplicate above 900px - the right rail's PROGRESS mirror
   (course-nav.js's wireProgressMirror(), course.css's .ru-progress-mirror) -
   so the in-panel progress bar stays redundant and hidden exactly as before.
   .rw-tabs is the numbered full-width tab bar now (see above) and is the
   ONLY section navigation at every width, so it is never hidden here anymore.
   .rw-foot-nav (the same [data-rw-section-btn] control repeated at the
   bottom of every section, "Foot navigation" above) used to be hidden here
   too because the right rail's 04 SECTIONS list did its job in full view of
   the page; with that rail gone, a member scrolled deep into a long section
   has no other quick jump back to the (static, non-sticky) top tab bar, so
   the foot strip is genuinely useful again at this width and stays visible.
   Both stay fully in the DOM regardless: course-workbook.js's own
   `root.querySelectorAll('[data-rw-section-btn]')` (unmodified) is scoped to
   this element's own subtree, not to on-screen visibility. Below 900px (no
   right rail, see course.css) all three stay visible, exactly as they were
   before this pass - this rule never applies there. */
@media (min-width: 901px) {
  .rw-progress {
    display: none;
  }
}

/* ---- REAP: un-suppress the in-panel progress bar, 2026-08-08 -------------
   course.css's own REAP-specific layout pass ("drop the right-rail PROGRESS
   mirror...") hides .ru-rail-right (the mirror this file's own "Desktop
   rail takeover" rule above was suppressing .rw-progress in favor of) for
   every REAP page at this same 901px+ floor. With the mirror gone, REAP
   would otherwise show no progress indicator at all above 900px - the
   real bar is un-hidden here instead, same substitution
   .ru-layout-workbook-right already makes in course.css for the identical
   reason (mirror gone there too, real bar takes its place). Scoped to
   .rw[data-course="reap"] (every shipped REAP page's .rw root already
   carries this attribute, see BUILD-NOTES.md) so RAMP UP and Becoming
   Unstoppable, which still show the mirror, are unaffected - this
   selector's specificity (0,2,0) beats the bare .rw-progress rule above
   (0,1,0) regardless of source order. */
@media (min-width: 901px) {
  .rw[data-course="reap"] .rw-progress {
    display: block;
  }
}

/* ---- Print --------------------------------------------------------------
   Restyled for Momentum in place of the source's red/white scheme. Not a
   PDF library, no window.print() call added here, this only styles the
   browser's own print output if a member chooses File > Print. */
@media print {
  .rw-tabs,
  .rw-foot-nav,
  .rw-actions,
  .rw-actions-inline,
  .rw-overlay,
  .rw-dialog {
    display: none;
  }
  .rw-question {
    break-inside: avoid;
    border: 1px solid #ccc;
    background: #fff;
  }
  .rw-question-label,
  .rw h3,
  .rw-section-title {
    color: #000;
  }
  .rw-nugget,
  .rw-critical {
    background: #f0f0f0;
    color: #000;
    border: 1px solid #ccc;
  }
  .rw-textarea {
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
  }
  .rw-datagrid-scroll {
    overflow-x: visible;
    border-color: #ccc;
  }
  .rw-datagrid-table th,
  .rw-datagrid-table td {
    border-color: #ccc;
    color: #000;
  }
  .rw-datagrid-table thead th,
  .rw-datagrid-table tbody th[scope="row"] {
    background: #f0f0f0;
    color: #000;
  }
  .rw-datagrid-table td {
    background: #fff;
  }
  .rw-datagrid-cell-input,
  .rw-datagrid-cell-textarea {
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
  }
}