/* ================================================================
   PORTFOLIO — WINDOWS 95 REINTERPRETED
   ================================================================ */


/* ================================================================
   DESIGN TOKENS — Purple Dark System
   WCAG 2.2 target: AAA (7:1) for primary text, AA (4.5:1) minimum.

   Contrast verified pairs (approximate):
     --text-primary  on --bg-base      ≈ 18:1  (AAA)
     --text-primary  on --bg-window    ≈ 15:1  (AAA)
     --text-primary  on --bg-elevated  ≈ 12:1  (AAA)
     --text-secondary on --bg-window   ≈ 10:1  (AAA)
     --text-muted    on --bg-window    ≈  7:1  (AAA)
     --accent-focus  on --bg-base      ≈  9:1  (AAA — safe for focus rings)

   Accent (#9A7BFF) is NOT used as text — only for borders,
   highlights, and interactive chrome.
   ================================================================ */

:root {

  /* ----------------------------------------------------------------
     BACKGROUNDS
     Layered depth: base → window → elevated → hover
     ---------------------------------------------------------------- */
  --bg-base:              #0B0B12;   /* body, desktop canvas          */
  --bg-window:            #131320;   /* window / panel surface         */
  --bg-elevated:          #1A1A2B;   /* taskbar, controls, panels      */
  --bg-taskbar:           #0F1020;   /* taskbar specifically           */
  --bg-hover:             #21213A;   /* hover state on elevated items  */

  /* ----------------------------------------------------------------
     TITLE BAR
     Active: left-to-right gradient (dark purple → deep purple).
     Inactive: flat muted tone for background windows (Phase 6+).
     ---------------------------------------------------------------- */
  --titlebar-start:       #241A45;
  --titlebar-end:         #35256F;
  --titlebar-inactive:    #22263C;

  /* ----------------------------------------------------------------
     TEXT
     All values are near-white — purple tones ONLY in text-muted,
     which still meets AAA on dark backgrounds.
     NEVER use --accent-interactive as text color.
     ---------------------------------------------------------------- */
  --text-primary:         #F5F7FF;   /* body text, titles, labels — AAA everywhere  */
  --text-secondary:       #D7DBF5;   /* supporting text — AAA on bg-window+         */
  --text-muted:           #B8BEDF;   /* timestamps, meta — AAA on bg-window+        */

  /* ----------------------------------------------------------------
     BORDERS
     Three-stop scale used in bevels, dividers, and panel edges.
     ---------------------------------------------------------------- */
  --border-light:         #3A3D5A;   /* bevel highlight, top/left edges */
  --border-mid:           #262941;   /* dividers, separator lines       */
  --border-dark:          #05060A;   /* bevel shadow, bottom/right edges */

  /* ----------------------------------------------------------------
     ACCENT
     Purple — used ONLY for: focus rings, active chrome, borders,
     interactive highlights, and icons. Never as body text.
     ---------------------------------------------------------------- */
  --accent-interactive:   #9A7BFF;   /* active states, hover borders, icon tints  */
  --accent-focus:         #C7B8FF;   /* focus rings — high-contrast light purple  */

  /* ----------------------------------------------------------------
     BEVEL SYSTEM
     Derived from border tokens + two outer inset stops.
     Raised:  light top/left, dark bottom/right
     Pressed: inverted (dark top/left, light bottom/right)
     ---------------------------------------------------------------- */
  --bevel-light:          var(--border-light);   /* #3A3D5A — raised highlight  */
  --bevel-dark:           var(--border-dark);    /* #05060A — raised shadow     */
  --bevel-outer-light:    #4A4E6A;               /* 1px inset highlight layer   */
  --bevel-outer-dark:     #030305;               /* 1px inset shadow layer      */

  /* ----------------------------------------------------------------
     BACKWARDS-COMPAT ALIASES
     Existing CSS uses --color-* names; these aliases bridge to the
     new token names without touching every rule.
     ---------------------------------------------------------------- */
  --color-bg:             var(--bg-base);
  --color-surface:        var(--bg-window);
  --color-elevated:       var(--bg-elevated);
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-accent:         var(--accent-interactive);
  --color-focus:          var(--accent-focus);

  /* ----------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------- */
  --font-system:          system-ui, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-size-title:      16px;
  --font-size-body:       14px;
  --font-size-meta:       12px;
  --font-weight-bold:     700;
  --font-weight-normal:   400;

  /* ----------------------------------------------------------------
     SPACING  (8px grid)
     ---------------------------------------------------------------- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;

  /* ----------------------------------------------------------------
     DIMENSIONS
     ---------------------------------------------------------------- */
  --taskbar-height:       52px;
  --icon-size:            56px;    /* desktop icon graphic area  */
  --tray-icon-size:       40px;    /* taskbar tray icon target   */

}


/* ================================================================
   RESET & BASE
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;           /* full-screen desktop — no scroll */
}

body {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: 1.5;
  /* Prevent text selection on desktop interaction elements */
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection inside window content (Phase 2+) */
.window-region {
  -webkit-user-select: text;
  user-select: text;
}


/* ================================================================
   FOCUS STYLES (WCAG 2.2 — visible, high contrast)
   Applied globally; removed from mouse interaction via :focus-visible.
   ================================================================ */

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Remove default outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}


/* ================================================================
   DESKTOP
   Full viewport minus taskbar. Uses CSS Grid for icon placement.
   ================================================================ */

.desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-height) 0;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(11, 11, 18, 0.40), rgba(11, 11, 18, 0.40)),
    url('../assets/images/et-bg-edit.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* ================================================================
   DESKTOP ICONS
   Icon grid — top-left, vertical flow.
   ================================================================ */

.desktop-icons {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  /* Icons sit in top-left corner, above window region */
  position: relative;
  z-index: 10;
  width: fit-content;
}


/* ----------------------------------------------------------------
   Individual desktop icon button
   min 44×44 touch target, icon + label stacked vertically.
   ---------------------------------------------------------------- */

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;

  /* Reset button defaults */
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-meta);

  /* Fixed width so labels align across icons */
  width: 88px;
  padding: var(--space-1);
  border-radius: 2px;

  /* Ensure minimum 44px touch target (padding included in width) */
  min-height: 44px;

  /* Subtle 1px transparent border to hold layout on :focus-visible */
  border: 1px solid transparent;

  transition: background-color 100ms ease;
}

.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.desktop-icon:active {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Focus override for desktop icons — box around the whole tile */
.desktop-icon:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: transparent;
}

/* Active state — window is currently open for this icon */
.desktop-icon.is-active {
  background-color: rgba(154, 123, 255, 0.15);
  border-color: var(--accent-interactive);
}

.desktop-icon.is-active .icon-label {
  color: var(--accent-focus);
}


/* ----------------------------------------------------------------
   Icon graphic wrapper — fixed size, centered SVG
   ---------------------------------------------------------------- */

.icon-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  /* Win95 desktop icons: naked image, no border/box around the graphic */
}

.icon-graphic svg,
.icon-graphic img {
  width: 56px;
  height: 56px;
  /* Preserve pixel-art crispness if icons are low-res */
  image-rendering: pixelated;
}


/* ----------------------------------------------------------------
   Icon label
   ---------------------------------------------------------------- */

.icon-label {
  display: block;
  text-align: center;
  line-height: 1.2;
  color: var(--color-text-primary);

  /* Subtle text shadow for legibility on any desktop background */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);

  /* Prevent wrapping — ellipsis if needed */
  max-width: 84px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ================================================================
   WINDOW REGION
   Phase 1 placeholder — full desktop area behind icons.
   Windows will render here in Phase 2.
   ================================================================ */

.window-region {
  position: absolute;
  inset: 0;
  z-index: 50; /* above desktop icons (10), below taskbar (100) */
  pointer-events: none; /* region itself is transparent to clicks */
}

.window-region .window {
  pointer-events: auto; /* only the actual window captures input */
}


/* ================================================================
   TASKBAR
   Fixed bottom bar — Start button left, tray right.
   Classic double bevel on top edge.
   ================================================================ */

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--taskbar-height);

  background-color: var(--bg-taskbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1);
  gap: var(--space-1);

  /* Classic raised taskbar top edge */
  border-top: 2px solid var(--bevel-light);
  box-shadow: inset 0 1px 0 var(--bevel-outer-light);

  z-index: 100;
}


/* ================================================================
   START BUTTON
   Raised bevel, accent-colored, prominent.
   ================================================================ */

.taskbar-start {
  display: flex;
  align-items: center;
  gap: 6px;

  background-color: var(--color-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;

  /* Min 44px touch target height */
  padding: 4px var(--space-2);
  height: 42px;

  /* Raised bevel */
  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-light),
    inset -1px -1px 0 var(--bevel-outer-dark);

  transition: background-color 80ms ease;
}

.taskbar-start:hover {
  background-color: var(--bg-hover);
}

/* Pressed state — inverted bevel */
.taskbar-start:active,
.taskbar-start[aria-expanded="true"] {
  background-color: var(--color-surface);
  border-color:
    var(--bevel-dark)
    var(--bevel-light)
    var(--bevel-light)
    var(--bevel-dark);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-dark),
    inset -1px -1px 0 var(--bevel-outer-light);
}

.start-logo {
  flex-shrink: 0;
  border-radius: 3px;
}

.start-label {
  white-space: nowrap;
}


/* ================================================================
   TASKBAR TRAY (right side)
   Social links + clock, grouped with inner left bevel.
   ================================================================ */

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 0;
  height: 42px;

  /* Inset bevel — recessed look for the tray area */
  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-dark)
    var(--bevel-light)
    var(--bevel-light)
    var(--bevel-dark);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-dark),
    inset -1px -1px 0 var(--bevel-outer-light);

  padding: 0 var(--space-1);
}


/* ================================================================
   TRAY SOCIAL LINKS
   Icon-only links, 32px targets, tooltip via aria-label.
   ================================================================ */

.tray-social {
  display: flex;
  align-items: center;
  /* Subtle divider between social nav and clock */
  padding-right: var(--space-1);
  margin-right: var(--space-1);
  border-right: 1px solid var(--bevel-dark);
}

.tray-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tray-icon-size);
  height: var(--tray-icon-size);
  border-radius: 2px;
  text-decoration: none;
  position: relative;

  transition: background-color 100ms ease;
}

/* Custom tooltip — shown on hover via data-tooltip attribute */
.tray-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  white-space: nowrap;
  padding: 3px 8px;
  pointer-events: none;

  border-style: solid;
  border-width: 1px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);

  opacity: 0;
  transition: opacity 120ms ease;
}

.tray-icon[data-tooltip]:hover::after,
.tray-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
}

.tray-icon img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated; /* nearest-neighbor: preserves crisp pixel art at any size */
}

.tray-icon:hover {
  background-color: rgba(154, 123, 255, 0.12);
}

.tray-icon:hover img {
  filter: brightness(1.35) saturate(0.7);
}

.tray-icon:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}


/* ================================================================
   SYSTEM CLOCK
   ================================================================ */

.tray-clock {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  white-space: nowrap;
  padding: 0 6px;
  min-width: 70px;
  text-align: center;
  letter-spacing: 0.02em;
}


/* ================================================================
   START MENU (Phase 4 — structure present, hidden for now)
   ================================================================ */

.start-menu {
  position: fixed;
  bottom: var(--taskbar-height);
  left: 0;
  background-color: var(--color-elevated);
  min-width: 240px;
  z-index: 200;

  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-light),
    inset -1px -1px 0 var(--bevel-outer-dark);
}

/* [hidden] attribute hides the element */
.start-menu[hidden] {
  display: none;
}

.start-menu ul {
  list-style: none;
  padding: var(--space-1) 0;
}

.start-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-title);
  text-align: left;
  cursor: pointer;
  min-height: 52px;
}

.start-menu button img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.start-menu button:hover {
  background-color: var(--titlebar-end);
  color: var(--color-text-primary);
}

.start-menu button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}


/* ================================================================
   WINDOW SYSTEM
   Single active window, centered in the desktop region.
   ================================================================ */

/* Window shell — raised bevel, drop shadow */
.window {
  position: absolute;
  background-color: var(--color-surface);
  width: 620px;
  display: flex;
  flex-direction: column;

  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-light),
    inset -1px -1px 0 var(--bevel-outer-dark),
    6px 6px 0 rgba(0, 0, 0, 0.5);

  animation: window-open 150ms ease-out;
}

@keyframes window-open {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}


/* ----------------------------------------------------------------
   Title bar
   ---------------------------------------------------------------- */

.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 8px;
  height: 28px;
  flex-shrink: 0;
  cursor: move;

  /* Gradient left→right — classic Win95 active title bar */
  background: linear-gradient(90deg, var(--titlebar-start) 0%, var(--titlebar-end) 100%);
  color: var(--color-text-primary);
}

.window-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}

.window-title-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.window-title-text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button — raised bevel, square */
.window-close {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;

  background-color: var(--color-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: 11px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-light),
    inset -1px -1px 0 var(--bevel-outer-dark);

  transition: background-color 80ms ease;
}

.window-close:hover {
  background-color: var(--bg-hover);
}

.window-close:active {
  border-color:
    var(--bevel-dark)
    var(--bevel-light)
    var(--bevel-light)
    var(--bevel-dark);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-dark),
    inset -1px -1px 0 var(--bevel-outer-light);
}

.window-close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -1px;
}

/* Resize grip — bottom-right corner, Win95 diagonal dots */
.window-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  /* Three diagonal dots */
  background-image:
    radial-gradient(circle 1.5px, var(--bevel-outer-light) 100%, transparent 0),
    radial-gradient(circle 1.5px, var(--bevel-outer-light) 100%, transparent 0),
    radial-gradient(circle 1.5px, var(--bevel-outer-light) 100%, transparent 0);
  background-position: 4px 12px, 8px 8px, 12px 4px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}


/* ----------------------------------------------------------------
   Address bar (folder windows only)
   ---------------------------------------------------------------- */

.window-addressbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-1);
  height: 32px;
  flex-shrink: 0;
  background-color: var(--color-elevated);
  border-bottom: 1px solid var(--bevel-dark);
}

.window-back {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-1);
  min-height: 24px;

  background-color: var(--color-elevated);
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  cursor: pointer;

  border-style: solid;
  border-width: 2px;
  border-color:
    var(--bevel-light)
    var(--bevel-dark)
    var(--bevel-dark)
    var(--bevel-light);
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-light),
    inset -1px -1px 0 var(--bevel-outer-dark);
}

.window-back:hover {
  background-color: var(--bg-hover);
}

.window-back[hidden] {
  display: none;
}

.window-back:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.window-path {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}


/* ----------------------------------------------------------------
   Window body
   ---------------------------------------------------------------- */

.window-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  min-height: 240px;

  /* Inset bevel — content area sits "inside" the frame */
  box-shadow:
    inset 1px 1px 0 var(--bevel-outer-dark),
    inset -1px -1px 0 var(--bevel-outer-light);
}


.window-body--iframe {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   Folder grid — icon layout inside folder windows
   ---------------------------------------------------------------- */

.folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
}

/* Folder item — mirrors desktop-icon style */
.folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  padding: var(--space-1);

  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  color: var(--color-text-primary);
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  text-align: center;

  transition: background-color 100ms ease;
}

.folder-item:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.folder-item:active {
  opacity: 0.75;
}

.folder-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.folder-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  /* Win95 folder icons: naked image, no border box */
}

.folder-item-icon img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

.folder-item-icon svg {
  width: 48px;
  height: 48px;
}

/* Contact window: smaller icon wrapper to match desktop icon visual weight */
.contact-grid .folder-item-icon {
  width: 32px;
  height: 32px;
}

.contact-grid .folder-item-icon img {
  width: 32px;
  height: 32px;
}

/* Allow <a> elements to use folder-item styles */
a.folder-item {
  text-decoration: none;
}

.folder-item-label {
  display: block;
  line-height: 1.2;
  max-width: 92px;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}



/* ----------------------------------------------------------------
   Project placeholder (individual case study stub)
   ---------------------------------------------------------------- */

.project-placeholder {
  padding: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.project-placeholder strong {
  display: block;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* Protected work notice */
.protected-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-elevated);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.protected-notice strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}


/* ================================================================
   ABOUT WINDOW
   ================================================================ */

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  container-type: inline-size;
}

/* Hero row: photo + intro side by side */
.about-hero {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

/* Narrow window (desktop resize): stack photo above text */
@container (max-width: 520px) {
  .about-hero {
    flex-direction: column;
    align-items: center;
  }

  .about-photo {
    height: 140px;
  }

  .about-intro {
    text-align: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile viewport fallback (covers phones where container query may not fire) */
@media (max-width: 600px) {
  .about-hero {
    flex-direction: column;
    align-items: center;
  }

  .about-photo {
    height: 140px;
  }

  .about-intro {
    text-align: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }
}

.about-photo {
  height: 160px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(1px 4px 8px rgba(0, 0, 0, 0.6));
  image-rendering: auto;
}

.about-intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

.about-headline {
  font-family: var(--font-system);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.01em;
}

.about-tagline {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--accent-interactive);
  margin: 0;
}

.about-bio {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Win95-style pressed/inset divider */
.about-divider {
  border: none;
  border-top: 1px solid var(--bevel-dark);
  border-bottom: 1px solid var(--bevel-light);
  margin: 0;
}

/* Win95 inset quote panel */
.about-quote {
  border-style: solid;
  border-width: 1px;
  border-color:
    var(--bevel-dark)
    var(--bevel-light)
    var(--bevel-light)
    var(--bevel-dark);
  background-color: var(--bg-base);
  padding: var(--space-2);
  margin: 0;
  font-family: var(--font-system);
  font-style: italic;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  text-align: center;
}

/* Two-column grid for education + skills */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.about-section-title {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-1);
}

.about-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-section ul li {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}

.about-section ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--accent-interactive);
}

.about-section ul li small {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-meta);
}

.about-personal {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}


/* ================================================================
   SCREEN-READER ONLY UTILITY
   Visually hidden but accessible to assistive technology.
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ================================================================
   PASSWORD PROMPT
   ================================================================ */

.password-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  text-align: center;
}

.password-prompt img {
  image-rendering: pixelated;
  opacity: 0.7;
}

.password-prompt-title {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.password-prompt-hint {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  margin: 0;
}

.password-form {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.password-input {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-primary);
  background: var(--bg-base);
  border: none;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  border-style: solid;
  border-width: 1px;
  padding: 3px var(--space-1);
  width: 160px;
  outline: none;
}

.password-input:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}

.password-submit {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-style: solid;
  border-width: 1px;
  border-color: var(--bevel-outer-light) var(--bevel-outer-dark) var(--bevel-outer-dark) var(--bevel-outer-light);
  padding: 3px var(--space-2);
  cursor: pointer;
}

.password-submit:hover {
  background: var(--bg-hover);
}

.password-submit:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}

.password-error {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: #FF6B6B;
  margin: 0;
}


/* ================================================================
   CASE STUDY
   ================================================================ */

.case-study {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.case-study-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-mid);
}

.case-study-title {
  font-family: var(--font-system);
  font-size: var(--font-size-title);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.case-study-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.case-study-meta li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
}

.meta-key {
  color: var(--text-muted);
  margin-right: 4px;
}

.case-study-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study-section + .case-study-section {
  border-top: 1px solid #8B5CC8;
  padding-top: var(--space-3);
}

.case-study-section h3 {
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-focus);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.case-study-placeholder {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.case-study-process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.case-study-process li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  padding: 2px var(--space-2);
  counter-increment: step;
}

.case-study-process li::before {
  content: counter(step) ". ";
  color: var(--text-muted);
}

.case-study-process {
  counter-reset: step;
}

.case-study-section p {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.6;
}

.case-study-section p:last-child {
  margin-bottom: 0;
}

.case-study-section h4 {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  margin: var(--space-1) 0 4px 0;
  text-transform: none;
  letter-spacing: 0;
}

.case-study-section h4:first-child,
.case-study-section h3 + h4 {
  margin-top: 0;
}

.case-study-problems {
  margin: var(--space-1) 0 0 0;
  padding-left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-study-problems li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.5;
}

.case-study-decisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-decision {
  border-left: 2px solid var(--accent-interactive);
  padding-left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-decision h4 {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.case-decision p {
  margin: 0 !important;
}

.case-study-quote {
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--accent-interactive);
  background: var(--bg-elevated);
  border-radius: 0 2px 2px 0;
}

.case-study-quote p {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 4px 0 !important;
  line-height: 1.5;
}

.case-study-quote cite {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: normal;
}


/* ================================================================
   CASE STUDY PROBLEM DIAGRAM
   Before-state system diagram used in project sections.
   ================================================================ */

.cs-problem-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.cs-problem-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  overflow: visible;
}

.cs-problem-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  text-align: center;
  max-width: 56ch;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}


/* ================================================================
   CASE STUDY CONSTRAINTS CARDS
   ================================================================ */

.cs-constraints {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-constraints-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-constraints .cs-constraints-title {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  margin: 0 0 4px 0;
  text-transform: none;
  letter-spacing: 0;
}

.cs-constraints-intro {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-constraints-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #8B5CC8;
}

.cs-constraint-row {
  display: grid;
  grid-template-columns: 72px 140px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid #8B5CC8;
}

.cs-cr-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-cr-value {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.cs-cr-desc {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .cs-constraint-row {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }

  .cs-cr-desc {
    grid-column: 2;
    margin-top: 2px;
  }
}

/* ── System Architecture ─────────────────────────────── */
.cs-arch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-arch-diagram {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-base);
}

/* Actors */
.cs-arch-actor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 12px;
  min-width: 96px;
  max-width: 120px;
  text-align: center;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.cs-arch-actor-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.cs-arch-actor-desc {
  font-family: var(--font-system);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Connectors */
.cs-arch-connectors {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--space-1) 8px;
  flex-shrink: 0;
}

.cs-arch-connector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.cs-arch-connector-label {
  font-family: var(--font-system);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.cs-arch-connector-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--accent-focus);
}

.cs-arch-connector--rev .cs-arch-connector-label {
  color: var(--text-muted);
}

.cs-arch-connector--rev .cs-arch-connector-arrow {
  color: #9180C4;
}

/* Core System */
.cs-arch-system {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-2);
  border-left: 2px solid var(--accent-interactive);
  border-right: 2px solid var(--accent-interactive);
  background: color-mix(in srgb, var(--accent-interactive) 6%, var(--bg-window));
}

.cs-arch-system-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  text-align: center;
}

.cs-arch-modules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-arch-module {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent-interactive);
  border-radius: 3px;
}

.cs-arch-module-name {
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-arch-module-desc {
  font-family: var(--font-system);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Caption */
.cs-arch-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* Mobile: stack vertically */
@media (max-width: 560px) {
  .cs-arch-diagram {
    flex-direction: column;
  }

  .cs-arch-actor {
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
  }

  .cs-arch-connectors {
    flex-direction: row;
    padding: 6px var(--space-1);
    gap: var(--space-2);
  }

  .cs-arch-system {
    border-left: none;
    border-right: none;
    border-top: 2px solid var(--accent-interactive);
    border-bottom: 2px solid var(--accent-interactive);
  }
}

/* ── Key Decisions Editorial ─────────────────────────── */
.cs-kd {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-kd-rule {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-4) 0;
}

.cs-kd-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-kd-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}


.cs-kd-num {
  font-size: 56px;
  font-weight: 100;
  line-height: 0.9;
  color: var(--accent-interactive);
  opacity: 0.75;
  font-family: monospace;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  margin-top: -4px;
}

.cs-kd-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
  padding-top: 6px;
}

.cs-kd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding-left: calc(56px + var(--space-2));
}


.cs-kd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-kd-flabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: monospace;
  font-weight: 700;
}

.cs-kd-ftext {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-kd-field--tradeoff .cs-kd-flabel {
  color: var(--accent-focus);
}

.cs-kd-field--tradeoff .cs-kd-ftext {
  font-style: italic;
}

.cs-kd-field--impact .cs-kd-flabel {
  color: var(--accent-focus);
}

@media (max-width: 560px) {
  .cs-kd-fields {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .cs-kd-num {
    font-size: 40px;
  }

  .cs-kd-title {
    font-size: 17px;
  }
}

/* ══ Key Product Decisions ══════════════════════════════════════ */
.cs-kpd {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-kpd-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-kpd-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-kpd-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-kpd-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-kpd-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-kpd-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.3);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}

.cs-kpd-panel-head {
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-kpd-panel-num {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.65);
}

.cs-kpd-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.cs-kpd-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-kpd-row {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-kpd-row:last-child {
  border-bottom: none;
}

.cs-kpd-row--decision {
  background: rgba(139, 92, 200, 0.05);
}

.cs-kpd-row--impact {
  background: rgba(139, 92, 200, 0.07);
}

.cs-kpd-row-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-kpd-row--decision .cs-kpd-row-label {
  color: rgba(154, 123, 255, 0.85);
}

.cs-kpd-row--impact .cs-kpd-row-label {
  color: rgba(199, 184, 255, 0.85);
}

.cs-kpd-row-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.cs-kpd-row--impact .cs-kpd-row-text {
  color: var(--text-primary);
}

@media (max-width: 680px) {
  .cs-kpd-panels {
    grid-template-columns: 1fr;
  }
}

/* ══ Design Execution (cs-de) ═══════════════════════════════════ */
.cs-de {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-de-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-de-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-de-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-de-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-de-areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Area card */
.cs-de-area {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: 3px;
  overflow: hidden;
}

.cs-de-area--hero {
  border-top-color: rgba(139, 92, 200, 0.5);
}

/* Area header */
.cs-de-area-meta {
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-de-area--hero .cs-de-area-meta {
  background: rgba(139, 92, 200, 0.03);
}

.cs-de-area-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cs-de-area-num {
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  min-width: 20px;
  padding-top: 2px;
  flex-shrink: 0;
}

.cs-de-area-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.cs-de-area-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  margin: 3px 0 0;
  font-family: monospace;
}

.cs-de-area-insight {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  padding-left: 32px;
}

/* Area body layout */
.cs-de-area-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.cs-de-body--lineup {
  grid-template-columns: 1.6fr 1fr;
}

.cs-de-body--part {
  grid-template-columns: 1fr 1.2fr;
}

/* Screen pane */
.cs-de-screen {
  padding: var(--space-2);
  border-right: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-de-screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.cs-de-body--part .cs-de-screen {
  border-right: none;
  border-left: 1px solid var(--border-mid);
}

/* Annotations pane */
.cs-de-anns {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.cs-de-anns--lineup {
  gap: 12px;
}

.cs-de-ann {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cs-de-ann-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.45);
  border: 1px solid rgba(139, 92, 200, 0.25);
  flex-shrink: 0;
  margin-top: 4px;
}

.cs-de-ann-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.85);
  margin-bottom: 3px;
}

.cs-de-ann-text {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Team Home mockup ─────────── */
.cs-de-home {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.cs-de-home-nav {
  display: flex;
  border-bottom: 1px solid var(--border-mid);
  padding: 0 6px;
}

.cs-de-home-nav-tab {
  padding: 7px 9px;
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.cs-de-home-nav-tab--active {
  color: var(--text-primary);
  border-bottom-color: rgba(139, 92, 200, 0.7);
}

.cs-de-home-game {
  padding: 10px 12px;
  background: rgba(139, 92, 200, 0.06);
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-home-game-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(154, 123, 255, 0.7);
  margin-bottom: 5px;
}

.cs-de-home-game-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.cs-de-home-game-opp {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-de-home-game-time {
  font-size: 9px;
  color: var(--text-muted);
  font-family: monospace;
}

.cs-de-home-game-actions {
  display: flex;
  gap: 5px;
}

.cs-de-home-game-btn {
  padding: 4px 9px;
  font-size: 8.5px;
  font-family: monospace;
  border-radius: 2px;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
}

.cs-de-home-game-btn--primary {
  background: rgba(139, 92, 200, 0.18);
  border-color: rgba(139, 92, 200, 0.35);
  color: rgba(199, 184, 255, 0.9);
}

.cs-de-home-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cs-de-home-mod {
  padding: 9px 12px;
  border-right: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-de-home-mod:last-child { border-right: none; }

.cs-de-home-mod-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cs-de-home-mod-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Lineup mockup ────────────── */
.cs-de-lu {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.cs-de-lu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-lu-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
}

.cs-de-lu-meta {
  font-size: 8.5px;
  color: var(--text-muted);
  font-family: monospace;
}

.cs-de-lu-inning-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 12px 4px;
  background: rgba(11, 11, 18, 0.5);
}

.cs-de-lu-rows {
  display: flex;
  flex-direction: column;
}

.cs-de-lu-row {
  display: grid;
  grid-template-columns: 22px 1fr 28px 12px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(38, 41, 65, 0.7);
}

.cs-de-lu-row:last-child { border-bottom: none; }
.cs-de-lu-row--bench    { opacity: 0.6; }

.cs-de-lu-num {
  font-size: 9.5px;
  font-weight: 700;
  font-family: monospace;
  color: rgba(154, 123, 255, 0.7);
  text-align: right;
}

.cs-de-lu-num--bench {
  color: var(--text-muted);
  font-weight: 400;
}

.cs-de-lu-player { font-size: 10px; color: var(--text-primary); }

.cs-de-lu-pos {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--text-muted);
  text-align: right;
}

.cs-de-lu-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  justify-self: center;
}

.cs-de-lu-status--active { background: rgba(72, 187, 120, 0.7); }
.cs-de-lu-status--sub    { background: rgba(246, 173, 85, 0.7); }
.cs-de-lu-status--bench  { background: var(--border-light); }

.cs-de-lu-bench { border-top: 1px solid var(--border-mid); }

/* ── Participation mockup ─────── */
.cs-de-part {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.cs-de-part-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-part-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.12);
  border: 1px solid rgba(139, 92, 200, 0.28);
  flex-shrink: 0;
}

.cs-de-part-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-de-part-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-de-part-role {
  font-size: 8.5px;
  color: var(--text-muted);
  font-family: monospace;
}

.cs-de-part-badge {
  font-size: 7.5px;
  font-weight: 700;
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.cs-de-part-badge--active {
  background: rgba(72, 187, 120, 0.1);
  color: rgba(72, 187, 120, 0.82);
  border: 1px solid rgba(72, 187, 120, 0.2);
}

.cs-de-part-group {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-de-part-group:last-child { border-bottom: none; }

.cs-de-part-group-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.65);
}

.cs-de-part-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cs-de-part-field-label {
  font-size: 9px;
  color: var(--text-muted);
}

.cs-de-part-toggle {
  display: flex;
  gap: 2px;
}

.cs-de-part-toggle-opt {
  font-size: 8px;
  padding: 3px 6px;
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  color: var(--text-muted);
  font-family: monospace;
  white-space: nowrap;
}

.cs-de-part-toggle-opt--on {
  background: rgba(72, 187, 120, 0.1);
  border-color: rgba(72, 187, 120, 0.25);
  color: rgba(72, 187, 120, 0.82);
}

.cs-de-part-val {
  font-size: 9px;
  color: var(--text-secondary);
  font-family: monospace;
}

.cs-de-part-val--confirmed { color: rgba(72, 187, 120, 0.78); }
.cs-de-part-val--muted     { color: var(--text-muted); }

@media (max-width: 680px) {
  .cs-de-area-body,
  .cs-de-body--lineup,
  .cs-de-body--part {
    grid-template-columns: 1fr;
  }
  .cs-de-screen {
    border-right: none;
    border-bottom: 1px solid var(--border-mid);
  }
  .cs-de-body--part .cs-de-screen {
    border-left: none;
    border-top: 1px solid var(--border-mid);
    order: 2;
  }
  .cs-de-body--part .cs-de-anns {
    order: 1;
  }
}

/* ══ Equity Map (cs-em) ═════════════════════════════════════════ */
.cs-em {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-em-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-em-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-em-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-em-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-em-views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-em-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-em-view-label {
  font-size: 8.5px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.6);
}

.cs-em-img-frame {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.cs-em-img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-em-onboarding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: 3px;
  overflow: hidden;
}

.cs-em-onb-copy {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.cs-em-onb-label {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.65);
}

.cs-em-onb-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-em-onb-points {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-em-onb-points li {
  font-size: 10px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}

.cs-em-onb-points li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.6);
  font-size: 13px;
  line-height: 1.2;
}

.cs-em-onb-screen {
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-mid);
}

.cs-em-popup-img {
  width: auto;
  max-width: 160px;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

@media (max-width: 680px) {
  .cs-em-views,
  .cs-em-onboarding { grid-template-columns: 1fr; }
  .cs-em-onb-screen { border-left: none; border-top: 1px solid var(--border-mid); }
}

/* ══ Validation & Iteration (cs-vi) ════════════════════════════ */
.cs-vi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-vi-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-vi-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-vi-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-vi-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-vi-findings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-vi-finding {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: 3px;
  overflow: hidden;
}

.cs-vi-finding-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-vi-finding-num {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.6);
  min-width: 20px;
  padding-top: 2px;
  flex-shrink: 0;
}

.cs-vi-finding-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.cs-vi-finding-body {
  display: block;
}

.cs-vi-rows {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-mid);
}

.cs-vi-row {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cs-vi-row:last-child { border-bottom: none; }
.cs-vi-row--ref { background: rgba(139, 92, 200, 0.04); }

.cs-vi-row-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 62px;
  padding-top: 2px;
}

.cs-vi-row-label--friction { color: rgba(246, 173, 85, 0.8); }
.cs-vi-row-label--ref      { color: rgba(154, 123, 255, 0.85); }
.cs-vi-row-label--impact   { color: rgba(72, 187, 120, 0.8); }

.cs-vi-row-text {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.cs-vi-callout {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.cs-vi-callout-tag {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(139, 92, 200, 0.6);
  border-top: 1px solid var(--border-mid);
  padding-top: 8px;
}

.cs-vi-mini-lu,
.cs-vi-mini-profile,
.cs-vi-mini-home {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  overflow: hidden;
  flex: 1;
}

.cs-vi-mini-row {
  display: grid;
  grid-template-columns: 18px 1fr 24px;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(38, 41, 65, 0.7);
}

.cs-vi-mini-row:last-child { border-bottom: none; }
.cs-vi-mini-row--dim { opacity: 0.5; }

.cs-vi-mini-num {
  font-family: monospace;
  font-weight: 700;
  color: rgba(154, 123, 255, 0.7);
  text-align: right;
  font-size: 8.5px;
}

.cs-vi-mini-name { font-size: 9px; color: var(--text-primary); }
.cs-vi-mini-pos  { font-size: 8px; color: var(--text-muted); font-family: monospace; text-align: right; }

.cs-vi-mini-profile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-vi-mini-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.15);
  border: 1px solid rgba(139, 92, 200, 0.25);
  flex-shrink: 0;
}

.cs-vi-mini-pname {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-vi-mini-prole { font-size: 8px; color: var(--text-muted); font-family: monospace; }

.cs-vi-mini-group {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-vi-mini-glabel {
  font-size: 7.5px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.6);
}

.cs-vi-mini-field {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--text-muted);
}

.cs-vi-mini-val--on { color: rgba(72, 187, 120, 0.8); font-weight: 600; }

.cs-vi-mini-home-game {
  padding: 8px;
  background: rgba(139, 92, 200, 0.06);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-vi-mini-home-label {
  font-size: 7.5px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.65);
}

.cs-vi-mini-home-cta {
  font-size: 8.5px;
  font-family: monospace;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(139, 92, 200, 0.18);
  border: 1px solid rgba(139, 92, 200, 0.35);
  color: rgba(199, 184, 255, 0.9);
  display: inline-block;
  width: fit-content;
}

.cs-vi-mini-home-mods {
  display: flex;
  border-top: 1px solid var(--border-mid);
}

.cs-vi-mini-home-mods span {
  flex: 1;
  padding: 5px 8px;
  border-right: 1px solid var(--border-mid);
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  text-align: center;
}

.cs-vi-mini-home-mods span:last-child { border-right: none; }

@media (max-width: 680px) {
  .cs-vi-rows { border-right: none; border-bottom: 1px solid var(--border-mid); }
}

/* ── Speech Gym — Key Decisions & Tradeoffs ─────────── */
.cs-decisions-log {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-decision-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.cs-decision-entry + .cs-decision-entry {
  border-top: 1px solid #8B5CC8;
}

/* Scoped to avoid conflict with ONC .cs-de-header (flex-column) */
.cs-decision-entry .cs-de-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-de-num {
  font-size: 56px;
  font-weight: 100;
  line-height: 0.9;
  color: var(--accent-interactive);
  opacity: 0.35;
  font-family: monospace;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  margin-top: -4px;
}

.cs-de-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
  padding-top: 6px;
}

.cs-de-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding-left: calc(56px + var(--space-2));
}

.cs-de-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-de-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: monospace;
  font-weight: 700;
}

.cs-de-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-de-field--tradeoff .cs-de-label {
  color: var(--accent-focus);
}

.cs-de-field--tradeoff .cs-de-text {
  font-style: italic;
}

.cs-de-field--impact .cs-de-label {
  color: var(--accent-focus);
}

/* ── Validation & Iteration (ONC) ───────────────────── */
.cs-vit {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-vit-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.cs-vit-intro {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-vit-finding {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
}

.cs-vit-finding + .cs-vit-finding {
  border-top: 1px solid #8B5CC8;
}

.cs-vit-finding--rev {
  flex-direction: row-reverse;
}

/* Image side */
.cs-vit-img-side {
  flex: 0 0 44%;
  position: relative;
  padding-top: 10px;
}

.cs-vit-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-interactive);
  color: var(--bg-base);
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  z-index: 1;
  border-radius: 1px;
}

.cs-vit-frame {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 12px rgba(154, 123, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.cs-vit-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text side */
.cs-vit-text-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cs-vit-num {
  font-size: 44px;
  font-weight: 100;
  color: var(--accent-interactive);
  opacity: 0.72;
  font-family: monospace;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: -6px;
}

.cs-vit-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.cs-vit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-vit-flabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: monospace;
  font-weight: 700;
}

.cs-vit-ftext {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-vit-field--friction .cs-vit-flabel { color: var(--text-muted); }
.cs-vit-field--friction .cs-vit-ftext  { color: var(--text-muted); font-style: italic; }
.cs-vit-field--impact .cs-vit-flabel   { color: var(--accent-focus); }

.cs-vit-pillar {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  font-family: monospace;
}

@media (max-width: 520px) {
  .cs-vit-finding,
  .cs-vit-finding--rev {
    flex-direction: column;
  }

  .cs-vit-img-side {
    flex: none;
    width: 100%;
  }
}


/* ── Design Execution Progression ───────────────────── */
.cs-de {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-de-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-de-intro {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-de-rows {
  display: flex;
  flex-direction: column;
}

.cs-de-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.cs-de-row + .cs-de-row {
  border-top: 1px solid #8B5CC8;
}

.cs-de-row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-de-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: monospace;
}

.cs-de-row-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Three-stage progression row */
.cs-de-stages {
  display: flex;
  align-items: flex-start;
}

.cs-de-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.cs-de-stage-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: monospace;
  font-weight: 700;
}

.cs-de-stage--existing .cs-de-stage-label  { color: var(--text-muted); }
.cs-de-stage--wireframe .cs-de-stage-label { color: var(--text-secondary); }
.cs-de-stage--hifi .cs-de-stage-label      { color: var(--accent-focus); }

.cs-de-stage-frame {
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
}

.cs-de-stage--existing .cs-de-stage-frame {
  border: 1px solid var(--border-mid);
  opacity: 0.55;
  filter: grayscale(30%);
}

.cs-de-stage--wireframe .cs-de-stage-frame {
  border: 1px dashed var(--border-light);
}

.cs-de-stage--hifi .cs-de-stage-frame {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 10px rgba(154, 123, 255, 0.15);
}

.cs-de-stage-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Placeholder shown before real images are inserted */
.cs-de-placeholder {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  font-size: 8px;
  color: var(--border-light);
  font-family: monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Arrow connector — offset by label height so it meets the frame */
.cs-de-connector {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17px 5px 0;
  color: var(--accent-interactive);
  opacity: 0.4;
}

.cs-de-connector svg {
  display: block;
}

.cs-de-caption {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-mid);
}

@media (max-width: 520px) {
  .cs-de-stages {
    flex-direction: column;
    gap: var(--space-2);
  }

  .cs-de-connector {
    flex-direction: row;
    padding: 0;
    transform: rotate(90deg);
    align-self: center;
  }

}

/* ── Workflow Transformation ─────────────────────────── */
.cs-workflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-wf-divider {
  background: #8B5CC8;
  align-self: stretch;
  min-height: 80px;
}

.cs-wf-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-wf-title {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--text-muted);
}

.cs-wf-col--after .cs-wf-title {
  color: var(--accent-focus);
}

.cs-wf-steps {
  display: flex;
  flex-direction: column;
}

.cs-wf-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cs-wf-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  align-self: stretch;
}

.cs-wf-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-system);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.cs-wf-col--before .cs-wf-num {
  border: 1px solid var(--accent-interactive);
  color: var(--text-muted);
  background: transparent;
}

.cs-wf-col--after .cs-wf-num {
  background: var(--accent-interactive);
  color: var(--bg-base);
}

.cs-wf-line {
  width: 1px;
  min-height: 8px;
  flex: 1;
  margin: 2px 0;
}

.cs-wf-col--before .cs-wf-line {
  border-left: 1px dotted var(--accent-interactive);
}

.cs-wf-col--after .cs-wf-line {
  border-left: 1px solid var(--accent-interactive);
}

.cs-wf-text {
  font-family: var(--font-system);
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 0 8px;
}

.cs-wf-col--before .cs-wf-text {
  color: var(--text-muted);
}

.cs-wf-col--after .cs-wf-text {
  color: var(--text-secondary);
}

.cs-wf-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

.cs-wf-col--before .cs-wf-label {
  color: var(--accent-focus);
}

.cs-wf-col--after .cs-wf-label {
  color: var(--accent-focus);
}

.cs-workflow-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .cs-workflow-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .cs-wf-divider {
    display: none;
  }

  .cs-wf-col--after {
    border-top: 1px solid #8B5CC8;
    padding-top: var(--space-2);
  }
}

/* ── Design Execution ────────────────────────────────── */
.cs-exec {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-exec-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-exec-row-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  margin: 0;
}

.cs-exec-stages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cs-exec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.cs-exec-stage--hifi {
  flex: 1;
}

.cs-exec-img-wrap {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
}

.cs-exec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-exec-stage--sketch .cs-exec-img-wrap {
  opacity: 0.55;
  filter: grayscale(30%);
  border: 1px solid var(--border-mid);
}

.cs-exec-stage--mid .cs-exec-img-wrap {
  opacity: 0.8;
  border: 1px solid var(--border-light);
}

.cs-exec-stage--hifi .cs-exec-img-wrap {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-interactive) 30%, transparent),
              0 4px 16px color-mix(in srgb, var(--accent-interactive) 15%, transparent);
}

.cs-exec-stage-label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.cs-exec-stage--hifi .cs-exec-stage-label {
  color: var(--accent-focus);
}

.cs-exec-arrow {
  font-size: 12px;
  color: var(--border-light);
  flex-shrink: 0;
  margin-bottom: 22px;
}

.cs-exec-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .cs-exec-stages {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-exec-arrow {
    display: none;
  }

  .cs-exec-img-wrap {
    height: 140px;
  }
}


/* ================================================================
   VALIDATION & ITERATION — editorial critique panels
   ================================================================ */

.cs-vi {
  display: flex;
  flex-direction: column;
}

.cs-vi-panel + .cs-vi-panel {
  border-top: 1px solid #8B5CC8;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.cs-vi-hd {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-vi-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-interactive);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
  width: 28px;
  letter-spacing: 0.02em;
}

.cs-vi-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-vi-topic {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.cs-vi-finding {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Image left / content right layout */
.cs-vi-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-vi-img-btn {
  flex: 0 0 44%;
  width: 44%;
}

.cs-vi-frame {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-base);
}

.cs-vi-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cs-vi-change-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-vi-frame--before {
  opacity: 0.6;
  filter: grayscale(20%);
  border: 1px solid var(--border-mid);
}

.cs-vi-frame--after {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 10px rgba(154, 123, 255, 0.12);
}

/* Override cs-img-btn img defaults inside vi frames */
.cs-vi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* Annotation notes */
.cs-vi-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-vi-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.cs-vi-note::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 3px;
}

.cs-vi-note--issue::before   { background: #C4845A; }
.cs-vi-note--resolve::before { background: var(--accent-focus); }

/* Outcome strip */
.cs-vi-outcome {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.cs-vi-outcome-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  white-space: nowrap;
  flex-shrink: 0;
}

.cs-vi-outcome-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 520px) {
  .cs-vi-body {
    flex-direction: column;
  }
  .cs-vi-img-btn {
    flex: none;
    width: 100%;
  }
}


/* ================================================================
   OUTCOMES & IMPACT — editorial impact summary
   ================================================================ */

.cs-oi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Statement + before/after group */
.cs-oi-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-mid);
}

/* Specificity (0,2,0) beats .case-study-section p (0,1,1) */
.cs-oi .cs-oi-statement {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

/* Before / After strip */
.cs-oi-ba {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.cs-oi-ba-before {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.cs-oi-ba-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-oi-ba-after {
  font-weight: 700;
  color: var(--accent-focus);
}

/* Outcomes 2×2 grid */
.cs-oi-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) 24px;
}

.cs-oi-out-item {
  border-left: 2px solid #8B5CC8;
  padding: 8px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 150ms ease;
}

.cs-oi-out-item:hover {
  border-left-color: var(--accent-focus);
}

.cs-oi-out-num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-oi-out-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oi-out-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 520px) {
  .cs-oi-outcomes {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   NEXT STEPS
   Closing editorial section — minimal, reflective, generous whitespace.
   ================================================================ */
.cs-ns {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ns-title {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
}

.cs-ns-forward {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ns-forward-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-ns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ns-list li {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ns-list li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-focus);
}


/* ================================================================
   STATS GRID
   Research/problem space stat display. 2-col grid with accent number.
   ================================================================ */
.cs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.cs-stat {
  border-left: 2px solid #8B5CC8;
  padding: 8px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-focus);
  line-height: 1;
}

.cs-stat-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .cs-stats { grid-template-columns: 1fr; }
}


/* ================================================================
   VALIDATION FINDINGS
   Text-only usability finding rows with numbered label, title,
   description, and resolution note.
   ================================================================ */
.cs-findings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-finding {
  border-left: 2px solid var(--border-light);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-finding-num {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-finding-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-finding-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cs-finding-res {
  font-size: 10px;
  color: var(--accent-focus);
  line-height: 1.5;
  font-style: italic;
}

/* ================================================================
   CONSTRAINTS LANDSCAPE
   Editorial horizontal constraint display. Used in ONC case study.
   4 items with staggered vertical offset and thin purple dividers.
   ================================================================ */
.cs-cl { display: flex; flex-direction: column; gap: var(--space-2); }

.cs-cl-header { display: flex; flex-direction: column; gap: 8px; }

.cs-cl-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-mid);
}

.cs-cl-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 12px;
  min-width: 0;
}

.cs-cl-item:first-child { padding-left: 0; }
.cs-cl-item:last-child { padding-right: 0; }

.cs-cl-item--alt { padding-top: 20px; }

.cs-cl-divider {
  width: 1px;
  background: #8B5CC8;
  align-self: stretch;
  flex-shrink: 0;
  opacity: 0.45;
}

.cs-cl-num {
  font-size: 22px;
  font-weight: 200;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.cs-cl-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-cl .cs-cl-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 520px) {
  .cs-cl-grid { flex-direction: column; gap: 0; }
  .cs-cl-divider { width: auto; height: 1px; }
  .cs-cl-item { padding: 12px 0; }
  .cs-cl-item:first-child { padding-top: 0; }
  .cs-cl-item--alt { padding-top: 12px; }
}


/* ================================================================
   CONSTRAINT EDITORIAL
   Typography-driven editorial layout. Staggered horizontal rows
   with large ghost numbers, separator rules, and asymmetric rhythm.
   Used in ONC case study Constraints section.
   ================================================================ */
.cs-ce {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ce-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ce-header p {
  margin: 0;
}

.cs-ce-items {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Faint civic-tech grid overlay */
  background-image:
    linear-gradient(rgba(154, 123, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 123, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cs-ce-item {
  border-top: 1px solid var(--border-mid);
  padding: var(--space-2) 0;
}

.cs-ce-item:last-child {
  border-bottom: 1px solid var(--border-mid);
}


.cs-ce-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-ce-num {
  font-size: 38px;
  font-weight: 200;
  color: var(--accent-interactive);
  line-height: 1;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  width: 54px;
  text-align: right;
}

.cs-ce-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 5px; /* optical alignment with number cap height */
}

.cs-ce-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.cs-ce .cs-ce-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}



/* ================================================================
   INFORMATION ARCHITECTURE STRATEGY
   Split before/after navigation hierarchy visualization.
   Left: deep, tangled tree (4+ levels). Right: 3-pillar structure.
   Used in ONC case study Information Architecture section.
   ================================================================ */

.cs-ia {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ia-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ia-header p {
  margin: 0;
}

/* Diagram frame */
.cs-ia-diagram {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  overflow: hidden;
  min-height: 230px;
}

/* Side panels */
.cs-ia-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-2);
  min-width: 0;
}

.cs-ia-panel--before {
  background: var(--bg-window);
}

.cs-ia-panel--after {
  background-image:
    linear-gradient(rgba(154, 123, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 123, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: var(--bg-elevated);
}

.cs-ia-panel-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-ia-panel--after .cs-ia-panel-label {
  color: var(--accent-focus);
}

/* BEFORE: SVG spaghetti visualization */
.cs-ia-chaos {
  flex: 1;
  min-height: 175px;
}

.cs-ia-chaos-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* SVG lines — primary structural paths */
.ia-l {
  stroke: var(--accent-interactive);
  stroke-width: 0.8;
  fill: none;
  opacity: 0.55;
}

/* SVG lines — tangled cross/duplicate paths */
.ia-lx {
  stroke: var(--accent-interactive);
  stroke-width: 0.5;
  fill: none;
  stroke-dasharray: 3 3;
  opacity: 0.28;
}

/* Node rects — solid outline, uniform appearance */
.ia-nr { fill: var(--bg-window); stroke: var(--border-light); stroke-width: 0.75; }

/* Node text */
.ia-t { fill: var(--text-secondary); font-size: 8px; font-family: monospace; }

/* Depth indicator */
.cs-ia-depth {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cs-ia-depth-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.cs-ia-depth-bar {
  display: block;
  width: 4px;
  height: 14px;
  background: var(--border-light);
  border-radius: 1px;
  opacity: 0.55;
}

.cs-ia-depth-bar--fade   { opacity: 0.18; }
.cs-ia-depth-bar--active { background: var(--accent-interactive); opacity: 0.65; }

.cs-ia-depth-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
}

.cs-ia-depth-label--clean { color: var(--accent-focus); }

/* Tags strip (before/after descriptors) */
.cs-ia-tags {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.cs-ia-tags span {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.3;
}

.cs-ia-tags--after span {
  color: var(--accent-focus);
  opacity: 0.7;
}

/* AFTER: three-pillar structure */
.cs-ia-pillars {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex: 1;
}

.cs-ia-pillar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.cs-ia-pillar-head {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--accent-interactive);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 6px rgba(154, 123, 255, 0.1);
  letter-spacing: 0.01em;
}

.cs-ia-pillar-spine {
  width: 1px;
  height: 8px;
  background: var(--accent-interactive);
  opacity: 0.35;
}

.cs-ia-pillar-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--accent-interactive);
  border-radius: 2px;
  overflow: hidden;
}

.cs-ia-pillar-items span {
  display: block;
  font-size: 9px;
  color: var(--text-secondary);
  padding: 3px 5px;
  border-bottom: 1px solid rgba(154, 123, 255, 0.3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-ia-pillar-items span:last-child {
  border-bottom: none;
}

/* Center separator */
.cs-ia-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 18px;
}

.cs-ia-sep-line {
  flex: 1;
  width: 1px;
  background: var(--border-mid);
}

.cs-ia-sep-glyph {
  font-size: 16px;
  color: var(--accent-focus);
  line-height: 1;
}

/* Core IA Improvements strip */
.cs-ia-strip {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  overflow: hidden;
}

.cs-ia-strip-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-mid);
}

.cs-ia-strip-item:last-child {
  border-right: none;
}

.cs-ia-strip-glyph {
  font-size: 11px;
  color: var(--accent-focus);
  flex-shrink: 0;
  opacity: 0.6;
}

.cs-ia-strip-text {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.3;
}

@media (max-width: 520px) {
  .cs-ia-diagram {
    flex-direction: column;
    min-height: auto;
  }

  .cs-ia-sep {
    flex-direction: row;
    padding: var(--space-1) var(--space-2);
  }

  .cs-ia-sep-line {
    flex: 1;
    width: auto;
    height: 1px;
  }

  .cs-ia-strip {
    flex-wrap: wrap;
  }

  .cs-ia-strip-item {
    flex: 0 0 50%;
  }

  .cs-ia-strip-item:nth-child(2) {
    border-right: none;
  }

  .cs-ia-strip-item:nth-child(3),
  .cs-ia-strip-item:nth-child(4) {
    border-top: 1px solid var(--border-mid);
  }
}


/* ================================================================
   PROBLEM SPACE VISUALIZATION
   Split editorial diagram: fragmented ecosystem (left) vs
   redesigned platform (right). Used in the ONC case study.
   ================================================================ */
.cs-ps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ps-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ps-diagram {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-height: 220px;
}

/* Side panels */
.cs-ps-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cs-ps-side-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: center;
}

.cs-ps-side--before {
  flex: 0 1 210px;
}

.cs-ps-side--after {
  flex: 0 1 210px;
  align-items: center;
}

.cs-ps-side--after .cs-ps-side-label {
  color: var(--accent-focus);
}

/* LEFT: scattered/fragmented cards */
.cs-ps-chaos {
  position: relative;
  min-height: 200px;
  max-width: 210px;
  margin: auto 0;
  overflow: visible;
}

.cs-ps-frag-card {
  position: absolute;
  padding: 5px 9px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-light);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 1;
  line-height: 1.3;
}

/* CENTER: vertical separator with arrow */
.cs-ps-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 22px 0 4px;
}

.cs-ps-sep-line {
  flex: 1;
  width: 1px;
  background: var(--border-mid);
}

.cs-ps-sep-arr {
  font-size: 20px;
  color: var(--accent-focus);
  line-height: 1;
}


/* RIGHT: clean organized hierarchy */
.cs-ps-order {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: auto 0;
}

.cs-ps-org-card {
  padding: 6px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-interactive);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(154, 123, 255, 0.08);
}

.cs-ps-org-conn {
  width: 1px;
  height: 13px;
  background: var(--accent-interactive);
  margin-left: 20px;
  opacity: 0.45;
}

/* Mobile */
@media (max-width: 520px) {
  .cs-ps-diagram {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    gap: 16px;
  }

  .cs-ps-chaos {
    height: 200px;
  }

  .cs-ps-sep {
    flex-direction: row;
    padding: 0;
    align-self: auto;
  }

  .cs-ps-sep-line {
    flex: 1;
    width: auto;
    height: 1px;
  }
}


/* ================================================================
   ENGAGEMENT SYSTEM DESIGN
   Circular civic engagement loop: Discover → Understand →
   Participate → Return. Arc connectors with arrowheads.
   Used in ONC case study Engagement System Design section.
   ================================================================ */

.cs-es {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-es-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-es-header p {
  margin: 0;
}

.cs-es-loop {
  display: flex;
  justify-content: center;
}

.cs-es-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}

/* Guide ring */
.es-ring {
  fill: none;
  stroke: var(--border-mid);
  stroke-width: 0.5;
  opacity: 0.5;
}

/* Arc connectors */
.es-arc {
  fill: none;
  stroke: var(--accent-interactive);
  stroke-width: 1.2;
  opacity: 0.6;
}

/* Stage node circles */
.es-node {
  fill: var(--bg-elevated);
  stroke: var(--accent-interactive);
  stroke-width: 1;
}

/* Stage number */
.es-num {
  fill: var(--accent-interactive);
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.05em;
}

/* Stage name */
.es-label {
  fill: var(--text-primary);
  font-size: 9px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.01em;
}

/* Center labels */
.es-center-line {
  fill: var(--text-muted);
  font-size: 8px;
  font-family: sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.es-center-loop {
  fill: var(--accent-focus);
  font-size: 7px;
  font-family: monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Supporting strip */
.cs-es-strip {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  overflow: hidden;
}

.cs-es-strip-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-mid);
}

.cs-es-strip-item:last-child {
  border-right: none;
}

.cs-es-snum {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-interactive);
  font-family: monospace;
  flex-shrink: 0;
  padding-top: 1px;
}

.cs-es-sbody {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cs-es-slabel {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.cs-es-sdesc {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .cs-es-strip {
    flex-wrap: wrap;
  }

  .cs-es-strip-item {
    flex: 0 0 50%;
  }

  .cs-es-strip-item:nth-child(2) {
    border-right: none;
  }

  .cs-es-strip-item:nth-child(3),
  .cs-es-strip-item:nth-child(4) {
    border-top: 1px solid var(--border-mid);
  }
}


/* ================================================================
   CASE STUDY HERO
   Rich, image-led header for case studies with a CASE_STUDY_HERO entry.
   Breaks out of .case-study padding to span the full content area width.
   ================================================================ */

/* When hero is present, remove top padding from the article — hero owns it */
.case-study--has-hero {
  padding-top: 0;
}

.cs-hero {
  /* Cancel .case-study's 24px side + top padding to reach the content edges */
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
  padding: var(--space-4) var(--space-3);

  background: linear-gradient(135deg, var(--bg-base) 0%, #13092E 100%);
  border-bottom: 1px solid var(--border-mid);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: center;
}

.cs-hero-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-hero-eyebrow {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-focus);   /* #C7B8FF */
}

.cs-hero-title {
  font-family: var(--font-system);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 4px 0 0;
}

.cs-hero-sub {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
  max-width: 36ch;
}

.cs-hero-meta {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cs-hero-meta li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
}

.cs-hero-meta-key {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
}

.cs-hero-img-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* In-section images — auto-wrapped by wrapCaseStudyImages() after render */
.cs-img-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  line-height: 0;
  max-width: 100%;
}

.cs-img-btn:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

.cs-img-btn img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.50);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.cs-img-btn:hover img {
  box-shadow:
    0 0 40px rgba(154, 123, 255, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.65);
  transform: scale(1.01);
}

/* ---- Coming Soon image placeholder ---- */
.cs-img-placeholder {
  width: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(154,123,255,0.03);
  border: 1px dashed rgba(154,123,255,0.18);
  box-sizing: border-box;
}
.cs-img-placeholder-text {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(154,123,255,0.38);
}
/* No zoom cursor when frame holds a placeholder */
.cs-vnc-wf-frame--placeholder {
  cursor: default;
}
/* Smaller height for thumbnail-size containers */
.cs-vnc-opp-card-img .cs-img-placeholder {
  min-height: 130px;
  border-radius: 3px;
}

/* Clickable image button — strip button chrome */
.cs-hero-img-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
}

.cs-hero-img-btn:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
}

.cs-hero-img-btn img {
  max-width: 100%;
  max-height: 340px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow:
    0 0 40px rgba(154, 123, 255, 0.20),
    0 4px 24px rgba(0, 0, 0, 0.60);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.cs-hero-img-btn:hover img {
  box-shadow:
    0 0 56px rgba(154, 123, 255, 0.35),
    0 6px 28px rgba(0, 0, 0, 0.70);
  transform: scale(1.02);
}

/* ----------------------------------------------------------------
   Image overlay — full-viewport lightbox
   ---------------------------------------------------------------- */

#img-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 48px 32px;
  box-sizing: border-box;
}

#img-overlay[hidden] { display: none; }

.img-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.img-overlay-panel {
  position: relative;
  z-index: 1;
  width: fit-content;
  height: fit-content;
}

.img-overlay-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 82vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(154, 123, 255, 0.25),
    0 16px 64px rgba(0, 0, 0, 0.75);
}

.img-overlay-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease, color 100ms ease;
}

.img-overlay-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.img-overlay-close:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}

/* Stack vertically inside narrow windows or small screens */
@media (max-width: 640px) {
  .cs-hero {
    grid-template-columns: 1fr;
  }

  .cs-hero-img-wrap {
    justify-content: center;
  }

  .cs-hero-sub {
    max-width: none;
  }
}


/* ================================================================
   PHOTOS GALLERY
   ================================================================ */

.photos-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  align-content: start;
}

.photo-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.photo-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border-mid);
  display: block;
}

.photo-item figcaption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  text-align: center;
}

.photos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  text-align: center;
}

.photos-empty img {
  image-rendering: pixelated;
  opacity: 0.4;
}

.photos-empty p {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--text-muted);
  margin: 0;
}

.photos-empty-hint {
  font-size: var(--font-size-meta) !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}

.photos-empty code {
  font-family: var(--font-mono, monospace);
  background: var(--bg-elevated);
  padding: 1px 4px;
  border: 1px solid var(--border-mid);
}


/* ================================================================
   ROSTER CHAMP — Case Study Components
   .cs-rc-* classes used in CASE_STUDY_CONTENT['rosterchamp']
   ================================================================ */

/* NDA note */
.cs-rc-nda {
  font-size: 10px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-left: 2px solid var(--accent-interactive);
  padding: 4px 10px;
  margin-bottom: var(--space-2);
  opacity: 0.7;
}

/* Challenge grid — 2-col list */
.cs-rc-challenges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--space-2);
  margin: var(--space-2) 0;
}

.cs-rc-ch {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}

.cs-rc-ch::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-interactive);
  font-size: 10px;
}

/* Closing focus paragraph */
.cs-rc-focus {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border-mid);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

/* IA Before / After layout */
.cs-rc-ia {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin: var(--space-2) 0;
}

.cs-rc-ia-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  background: var(--bg-elevated);
}

.cs-rc-ia-col--before {
  border-color: var(--border-light);
  opacity: 0.7;
}

.cs-rc-ia-col--after {
  border-color: var(--accent-interactive);
  box-shadow: 0 0 8px rgba(154, 123, 255, 0.1);
}

.cs-rc-ia-label {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cs-rc-ia-col--after .cs-rc-ia-label {
  color: var(--accent-focus);
}

.cs-rc-ia-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.cs-rc-ia-items span {
  font-size: 11px;
  color: var(--text-secondary);
  padding-left: 10px;
  position: relative;
}

.cs-rc-ia-items span::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent-interactive);
}

.cs-rc-ia-tag {
  display: inline-block;
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  padding: 2px 6px;
  margin-top: auto;
  align-self: flex-start;
}

.cs-rc-ia-col--after .cs-rc-ia-tag {
  color: var(--accent-focus);
  border-color: var(--accent-interactive);
}

/* IA separator arrow */
.cs-rc-ia-sep {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--accent-interactive);
  opacity: 0.4;
  padding: 0 4px;
}

/* Operational Workflow 2-col */
.cs-rc-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.cs-rc-ops-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
}

.cs-rc-ops-heading {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.cs-rc-ops-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-rc-ops-list span {
  font-size: 11px;
  color: var(--text-secondary);
  padding-left: 10px;
  position: relative;
}

.cs-rc-ops-list span::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--border-light);
}

.cs-rc-ops-list--accent span::before {
  color: var(--accent-interactive);
}

.cs-rc-ops-list--accent span {
  color: var(--text-primary);
}


/* ================================================================
   TACTICAL LINEUP BOARD — Roster Champ signature visualization
   .cs-tlb-* classes
   ================================================================ */

.cs-tlb {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-tlb-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  margin-bottom: 6px;
}

.cs-tlb-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
}

/* 3-col layout: left panel | center board | right panel */
.cs-tlb-board-wrap {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: var(--space-2);
  align-items: start;
}

/* ── Side panels ─────────────────────────────────────── */
.cs-tlb-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-tlb-panel-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

/* Left panel: roster stats */
.cs-tlb-game-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

.cs-tlb-game-time {
  font-family: monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-focus);
  text-align: center;
  letter-spacing: 0.04em;
}

.cs-tlb-roster-divider {
  border: none;
  border-top: 1px solid var(--border-mid);
  margin: 2px 0;
}

.cs-tlb-roster-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-secondary);
}

.cs-tlb-roster-stat-val {
  font-family: monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-primary);
}

.cs-tlb-roster-stat-val--active  { color: #5BFF8F; }
.cs-tlb-roster-stat-val--sub     { color: var(--accent-interactive); }
.cs-tlb-roster-stat-val--unavail { color: rgba(255, 100, 100, 0.8); }

/* Right panel: substitutions */
.cs-tlb-sub-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-tlb-sub-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: monospace;
  color: var(--text-secondary);
}

.cs-tlb-sub-tag {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 1px;
  flex-shrink: 0;
}

.cs-tlb-sub-tag--out {
  background: rgba(255, 100, 100, 0.12);
  color: rgba(255, 120, 120, 0.9);
  border: 1px solid rgba(255, 100, 100, 0.25);
}

.cs-tlb-sub-tag--in {
  background: rgba(154, 123, 255, 0.12);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.3);
}

.cs-tlb-sub-time {
  font-size: 8px;
  color: var(--text-muted);
  font-family: monospace;
  margin-top: 1px;
}

.cs-tlb-sub-monitor {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
}

.cs-tlb-sub-monitor-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-tlb-sub-monitor-name {
  font-size: 10px;
  font-family: monospace;
  color: var(--text-secondary);
}

/* ── Center board ────────────────────────────────────── */
.cs-tlb-center {
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
}

.cs-tlb-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-mid);
}

.cs-tlb-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5BFF8F;
}

.cs-tlb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5BFF8F;
  animation: tlb-pulse 2s ease-in-out infinite;
}

.cs-tlb-topbar-time {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Zones */
.cs-tlb-zone {
  padding: 10px 10px 8px;
}

.cs-tlb-zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cs-tlb-zone-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-tlb-zone-count {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
}

/* Formation grid: 3 rows × 3 cols */
.cs-tlb-formation {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-tlb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Zone divider */
.cs-tlb-zone-divider {
  border: none;
  border-top: 1px dashed var(--border-mid);
  margin: 0;
}

/* Bench row: 4 cols */
.cs-tlb-bench-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* ── Player tokens ───────────────────────────────────── */
.cs-tlb-token {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-tlb-token--active {
  border-color: var(--border-light);
}

.cs-tlb-token--sub {
  border-color: rgba(154, 123, 255, 0.45);
  background: rgba(154, 123, 255, 0.05);
  animation: tlb-glow 3s ease-in-out infinite;
}

.cs-tlb-token--sub-in {
  border-color: rgba(199, 184, 255, 0.4);
  background: rgba(199, 184, 255, 0.04);
}

.cs-tlb-token--bench {
  opacity: 0.55;
}

.cs-tlb-token--unavailable {
  opacity: 0.3;
  border-color: rgba(255, 90, 90, 0.2);
}

.cs-tlb-token-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cs-tlb-token-num {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  color: var(--text-muted);
}

.cs-tlb-token-pos {
  font-size: 7px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-tlb-token-name {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cs-tlb-token-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.cs-tlb-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-tlb-status-dot--active  { background: #5BFF8F; }
.cs-tlb-status-dot--sub     { background: var(--accent-interactive); }
.cs-tlb-status-dot--sub-in  { background: var(--accent-focus); }
.cs-tlb-status-dot--bench   { background: var(--border-light); }
.cs-tlb-status-dot--unavail { background: rgba(255, 100, 100, 0.6); }

.cs-tlb-token-state {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-tlb-token--sub    .cs-tlb-token-state { color: var(--accent-interactive); }
.cs-tlb-token--sub-in .cs-tlb-token-state { color: var(--accent-focus); }

/* ── Legend ──────────────────────────────────────────── */
.cs-tlb-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-mid);
}

.cs-tlb-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Animations ──────────────────────────────────────── */
@keyframes tlb-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.75); }
}

@keyframes tlb-glow {
  0%, 100% { box-shadow: 0 0 0   rgba(154, 123, 255, 0);    }
  50%       { box-shadow: 0 0 10px rgba(154, 123, 255, 0.18); }
}

/* ── Responsive: collapse panels on narrow viewports ─── */
@media (max-width: 580px) {
  .cs-tlb-board-wrap {
    grid-template-columns: 1fr;
  }

  .cs-tlb-panel--left,
  .cs-tlb-panel--right {
    display: none;
  }

  .cs-tlb-bench-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   WORKFLOW COMPRESSION — Roster Champ
   3-lane operational transformation. cs-wc-* classes.
   ================================================================ */

.cs-wc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-wc-intro {
  grid-column: 1 / -1;
}

.cs-wc-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  margin-bottom: 6px;
}

.cs-wc-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
}

/* ── Lanes ───────────────────────────────────────────── */
.cs-wc-lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--border-mid);
  border-radius: 3px;
  padding: 12px;
}

.cs-wc-lane--primary {
  border-top-color: rgba(154, 123, 255, 0.4);
}


.cs-wc-lane-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-wc-lane-num {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-wc-lane-title {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  letter-spacing: -0.02em;
}

.cs-wc-lane-focus {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-wc-lane-primary-tag {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.1);
  border: 1px solid rgba(154, 123, 255, 0.3);
  padding: 2px 7px;
  border-radius: 1px;
  align-self: center;
}

/* 3-col: original | arrow | redesign */
.cs-wc-lane-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-wc-lane-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-wc-side-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 1px;
  align-self: flex-start;
}

.cs-wc-side-label--original {
  color: rgba(255, 110, 110, 0.85);
  background: rgba(220, 70, 70, 0.08);
  border: 1px solid rgba(220, 70, 70, 0.22);
}

.cs-wc-side-label--redesign {
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.08);
  border: 1px solid rgba(154, 123, 255, 0.25);
}

.cs-wc-side-label--explore {
  color: rgba(200, 178, 108, 0.75);
  background: rgba(200, 165, 88, 0.07);
  border: 1px solid rgba(200, 165, 88, 0.22);
}

.cs-wc-lane-img {
  overflow: hidden;
  border-radius: 2px;
  line-height: 0;
  height: 180px;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-wc-lane-side--original .cs-wc-lane-img {
  border: 1px solid var(--border-mid);
  filter: grayscale(18%) brightness(0.88);
}

.cs-wc-lane-side--redesign .cs-wc-lane-img {
  border: 1px solid rgba(154, 123, 255, 0.45);
  box-shadow: 0 0 14px rgba(154, 123, 255, 0.12);
}

.cs-wc-lane--primary .cs-wc-lane-side--redesign .cs-wc-lane-img {
  border-color: var(--accent-interactive);
  box-shadow: 0 0 20px rgba(154, 123, 255, 0.18);
}

.cs-wc-lane-side--explore .cs-wc-lane-img {
  border: 1px dashed rgba(190, 168, 96, 0.28);
  background: rgba(190, 168, 96, 0.03);
  box-shadow: none;
}



/* Wireframe placeholder */
.cs-wc-wireframe-ph {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cs-wc-wireframe-ph-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(190, 168, 96, 0.38);
}

.cs-wc-lane-img img {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.cs-wc-lane-arrow {
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Annotation tags below each image */
.cs-wc-overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-wc-overlay-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 1px;
}

.cs-wc-overlay-tag--friction {
  color: rgba(255, 100, 100, 0.7);
  background: rgba(220, 70, 70, 0.06);
  border: 1px solid rgba(220, 70, 70, 0.18);
}

.cs-wc-overlay-tag--gain {
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.06);
  border: 1px solid rgba(154, 123, 255, 0.2);
}

.cs-wc-overlay-tag--process {
  color: rgba(178, 172, 218, 0.65);
  background: rgba(138, 128, 198, 0.05);
  border: 1px solid rgba(138, 128, 198, 0.16);
}

/* (old 2-col compare rules removed — replaced by lane system above)
.cs-wc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
}

.cs-wc-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-wc-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-wc-col-tag {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 1px;
}

.cs-wc-col-tag--before {
  background: rgba(220, 70, 70, 0.1);
  color: rgba(255, 110, 110, 0.9);
  border: 1px solid rgba(220, 70, 70, 0.28);
}

.cs-wc-col-tag--after {
  background: rgba(154, 123, 255, 0.1);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.28);
}

.cs-wc-col-subtitle {
  font-size: 10px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Annotation rows (above/below screens) ───────────── */
.cs-wc-annot-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.cs-wc-annotation {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 1px;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.cs-wc-annotation--friction {
  background: rgba(220, 70, 70, 0.08);
  color: rgba(255, 110, 110, 0.75);
  border: 1px solid rgba(220, 70, 70, 0.2);
}

.cs-wc-annotation--gain {
  background: rgba(154, 123, 255, 0.08);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.22);
}

/* ── Screen zone (position: relative for SVG overlay) ── */
.cs-wc-screen-zone {
  position: relative;
}

/* ── 2×2 simulated screen grid (before side) ─────────── */
.cs-wc-screen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cs-wc-screen {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-wc-screen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-mid);
}

.cs-wc-screen-dots {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.cs-wc-screen-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-light);
  font-style: normal;
}

.cs-wc-screen-label {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.cs-wc-step-badge {
  font-size: 7px;
  font-family: monospace;
  font-weight: 700;
  color: rgba(220, 70, 70, 0.75);
  background: rgba(220, 70, 70, 0.08);
  border: 1px solid rgba(220, 70, 70, 0.2);
  padding: 0 3px;
  border-radius: 1px;
}

.cs-wc-screen-body {
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.cs-wc-screen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--text-secondary);
  padding: 2px 0;
}

.cs-wc-screen-row--warn { opacity: 0.6; }

.cs-wc-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  font-style: normal;
  flex-shrink: 0;
}

.cs-wc-dot--active { background: #5BFF8F; }
.cs-wc-dot--warn   { background: rgba(255, 120, 70, 0.75); }
.cs-wc-dot--sub    { background: var(--accent-interactive); }

.cs-wc-screen-stat {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.cs-wc-screen-badge {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  padding: 1px 3px;
  border-radius: 1px;
}

.cs-wc-screen-badge--out {
  background: rgba(220, 70, 70, 0.1);
  color: rgba(255, 100, 100, 0.8);
  border: 1px solid rgba(220, 70, 70, 0.2);
}

.cs-wc-screen-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-muted);
  border: 1px dashed var(--border-mid);
  padding: 2px 4px;
  border-radius: 1px;
}

.cs-wc-screen-pos {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-wc-screen-empty {
  font-size: 8px;
  color: var(--border-light);
  font-style: italic;
}

.cs-wc-screen-btn {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border-mid);
  border-radius: 1px;
  padding: 3px 6px;
  text-align: center;
  margin-top: 2px;
}

.cs-wc-screen-event {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
  font-size: 8px;
  color: var(--text-secondary);
}

.cs-wc-screen-event-time {
  font-family: monospace;
  color: var(--text-muted);
  font-size: 7px;
}

/* SVG tangled arrow overlay */
.cs-wc-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* ── Summary tags ────────────────────────────────────── */
.cs-wc-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cs-wc-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 1px;
}

.cs-wc-tag--friction {
  color: rgba(255, 100, 100, 0.7);
  border: 1px solid rgba(220, 70, 70, 0.2);
  background: rgba(220, 70, 70, 0.06);
}

.cs-wc-tag--gain {
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.22);
  background: rgba(154, 123, 255, 0.06);
}

/* ── Unified screen (after side) ─────────────────────── */
.cs-wc-unified {
  background: var(--bg-base);
  border: 1px solid var(--accent-interactive);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(154, 123, 255, 0.1);
}

.cs-wc-unified-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-mid);
}

.cs-wc-unified-bar-title {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
  flex: 1;
}

.cs-wc-unified-bar-meta {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
}

.cs-wc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5BFF8F;
  animation: tlb-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.cs-wc-unified-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cs-wc-unified-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
}

.cs-wc-unified-col:first-child {
  border-right: 1px solid var(--border-mid);
}

.cs-wc-unified-col-label {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.cs-wc-unified-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--text-secondary);
  padding: 1px 0;
}

.cs-wc-lineup-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--text-secondary);
  padding: 3px 5px;
  border-radius: 1px;
  margin-bottom: 2px;
}

.cs-wc-lineup-slot--filled {
  background: rgba(154, 123, 255, 0.06);
  border: 1px solid rgba(154, 123, 255, 0.18);
}

.cs-wc-lineup-slot--pending {
  background: rgba(199, 184, 255, 0.04);
  border: 1px dashed rgba(154, 123, 255, 0.25);
  color: var(--text-muted);
}

.cs-wc-lineup-pos {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 24px;
}

.cs-wc-unified-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-mid);
}

.cs-wc-unified-action-btn {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 1px;
}

.cs-wc-unified-action-btn:first-child {
  background: rgba(154, 123, 255, 0.14);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.32);
}

.cs-wc-unified-action-btn--secondary {
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
}

/* ── Step compression bar ────────────────────────────── */
.cs-wc-stepbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  padding: var(--space-2) var(--space-3);
  flex-wrap: wrap;
}

.cs-wc-stepbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 80px;
}

.cs-wc-stepbar-num {
  font-size: 30px;
  font-weight: 100;
  font-family: monospace;
  line-height: 1;
  letter-spacing: -0.03em;
}

.cs-wc-stepbar-num--before { color: rgba(220, 70, 70, 0.65); }
.cs-wc-stepbar-num--after  { color: #5BFF8F; }

.cs-wc-stepbar-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.cs-wc-stepbar-arrow {
  font-size: 16px;
  color: var(--text-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

.cs-wc-stepbar-divider {
  width: 1px;
  height: 44px;
  background: var(--border-mid);
  flex-shrink: 0;
}
*/

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 720px) {
  .cs-wc { grid-template-columns: 1fr; }
  .cs-wc-lane-compare { grid-template-columns: 1fr; }
  .cs-wc-lane--primary .cs-wc-lane-compare { grid-template-columns: 1fr; }
  .cs-wc-lane-arrow { display: none; }
}


/* ================================================================
   OPERATIONAL CONSTRAINTS LANDSCAPE — cs-ocl-*
   RC case study section: 4 environmental operational zones
   ================================================================ */

.cs-ocl {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Intro block */
.cs-ocl-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-ocl-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-ocl-title {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-ocl-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* 2×2 zone grid */
.cs-ocl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Individual zone card */
.cs-ocl-zone {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid transparent;
  border-radius: 3px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ocl-zone--time    { border-top-color: rgba(255, 120, 80, 0.45); }
.cs-ocl-zone--mobile  { border-top-color: rgba(80, 180, 255, 0.35); }
.cs-ocl-zone--mobile .cs-ocl-zone-body { align-items: center; }
.cs-ocl-zone--density { border-top-color: rgba(139, 92, 200, 0.5);  }
.cs-ocl-zone--roles   { border-top-color: rgba(80, 220, 160, 0.35); }

/* Zone header */
.cs-ocl-zone-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cs-ocl-zone-num {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 1px;
}

.cs-ocl-zone-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cs-ocl-zone-sub {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Zone body */
.cs-ocl-zone-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Tags shared */
.cs-ocl-zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.cs-ocl-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  padding: 2px 6px;
  border-radius: 1px;
}

/* ── Zone 01: Timeline ─────────────────────────────────── */
.cs-ocl-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ocl-tl-track {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ocl-tl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  padding: 5px 8px;
  position: relative; /* for ::after pulse */
}

/* Bar fill is a background gradient */
.cs-ocl-tl-bar--1 { background: linear-gradient(90deg, rgba(255,120,80,0.22) 100%, transparent 100%); }
.cs-ocl-tl-bar--2 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  68%, transparent  68%); }
.cs-ocl-tl-bar--3 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  84%, transparent  84%); }
.cs-ocl-tl-bar--4 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  52%, transparent  52%); }

/* Pulsing dot at end of gradient bar */
.cs-ocl-tl-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 120, 80, 0.9);
  animation: ocl-pulse-time 2s ease-in-out infinite;
  pointer-events: none;
}

.cs-ocl-tl-bar--1::after { left: calc(100% - 7px); }
.cs-ocl-tl-bar--2::after { left: calc( 68% - 7px); animation-delay: 0.4s; }
.cs-ocl-tl-bar--3::after { left: calc( 84% - 7px); animation-delay: 0.8s; }
.cs-ocl-tl-bar--4::after { left: calc( 52% - 7px); animation-delay: 1.2s; }

.cs-ocl-tl-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes ocl-pulse-time {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateY(-50%) scale(1.35); }
}

.cs-ocl-tl-axis {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  font-family: monospace;
  color: rgba(255,120,80,0.4);
  border-top: 1px solid rgba(255,120,80,0.15);
  padding-top: 4px;
}

/* ── Zone 02: Device reach map ─────────────────────────── */
.cs-ocl-device {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-ocl-device-frame {
  width: 64px;
  flex-shrink: 0;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 6px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cs-ocl-device-screen {
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-window);
  height: 100px;
  display: flex;
  flex-direction: column;
}

.cs-ocl-reach-map {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-ocl-reach-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.cs-ocl-reach-zone--hard    { background: rgba(255,80,80,0.08); flex: 0.6; }
.cs-ocl-reach-zone--stretch { background: rgba(255,180,60,0.07); flex: 0.8; }
.cs-ocl-reach-zone--easy    { background: rgba(80,220,160,0.1); flex: 1; }

.cs-ocl-reach-label {
  font-size: 6px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.7;
  text-align: center;
}

.cs-ocl-device-signal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.cs-ocl-signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(80, 180, 255, 0.5);
  animation: ocl-signal 1.8s ease-in-out infinite;
}

.cs-ocl-signal-dot--2 { animation-delay: 0.6s; }
.cs-ocl-signal-dot--3 { animation-delay: 1.2s; }

@keyframes ocl-signal {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.9; }
}

/* ── Zone 03: Density lanes ────────────────────────────── */
.cs-ocl-density-lanes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ocl-dl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ocl-dl-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  width: 44px;
  flex-shrink: 0;
}

.cs-ocl-dl-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ocl-dl-bar {
  height: 7px;
  border-radius: 2px;
  background: var(--border-mid);
  position: relative;
  overflow: hidden;
}

.cs-ocl-dl-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1px;
  animation: ocl-fill 3s ease-in-out infinite;
}

.cs-ocl-dl--1 .cs-ocl-dl-bar::after { background: rgba(99, 179, 237, 0.72);  animation-delay: 0s; }   /* Roster — blue */
.cs-ocl-dl--2 .cs-ocl-dl-bar::after { background: rgba(246, 173, 85, 0.72);  animation-delay: 0.3s; } /* Schedule — amber */
.cs-ocl-dl--3 .cs-ocl-dl-bar::after { background: rgba(72, 187, 120, 0.72);  animation-delay: 0.6s; } /* Lineup — green */

@keyframes ocl-fill {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ── Zone 04: Role network ─────────────────────────────── */
.cs-ocl-roles {
  flex: 1;
}

.cs-ocl-spoke-diagram {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.cs-ocl-spoke-diagram svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .cs-ocl-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   INFORMATION ARCHITECTURE STRATEGY — cs-ia-*
   RC case study: Before→After operational IA transformation
   ================================================================ */

.cs-ia {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ia-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-ia-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-ia-title {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-ia-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* Before → After layout */
.cs-ia-transform {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-ia-arrow {
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.35;
  padding-top: 32px;
  flex-shrink: 0;
}

/* Shared side styles */
.cs-ia-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ia-side-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ia-side-chip {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 1px;
}

.cs-ia-side-chip--before {
  color: rgba(255,100,100,0.85);
  background: rgba(220,70,70,0.08);
  border: 1px solid rgba(220,70,70,0.22);
}

.cs-ia-side-chip--after {
  color: var(--accent-focus);
  background: rgba(154,123,255,0.08);
  border: 1px solid rgba(154,123,255,0.25);
}

.cs-ia-side-meta {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Before: Feature silos ─────────────────────────────── */
.cs-ia-silos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.cs-ia-silo {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  padding: 6px 8px;
  text-align: center;
  opacity: 0.75;
}

.cs-ia-silo-noise {
  height: 40px;
  margin: -6px 0;
}

.cs-ia-silo-noise svg {
  width: 100%;
  height: 100%;
}

.cs-ia-friction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-ia-ftag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,100,100,0.65);
  background: rgba(220,70,70,0.06);
  border: 1px solid rgba(220,70,70,0.15);
  padding: 2px 6px;
  border-radius: 1px;
}

/* ── After: Task clusters ──────────────────────────────── */
.cs-ia-clusters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cs-ia-cluster {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.55);
  border-radius: 2px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ia-cluster-title {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9B8FCC;
}

.cs-ia-cluster-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-ia-cluster-items span {
  font-size: 9px;
  color: var(--text-muted);
  padding-left: 8px;
  position: relative;
}

.cs-ia-cluster-items span::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.5);
}

.cs-ia-gain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-ia-gtag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-focus);
  background: rgba(154,123,255,0.06);
  border: 1px solid rgba(154,123,255,0.2);
  padding: 2px 6px;
  border-radius: 1px;
}

/* ── Supporting strip ──────────────────────────────────── */
.cs-ia-strip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-left: 2px solid rgba(139, 92, 200, 0.5);
  border-radius: 3px;
  padding: 12px var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-ia-strip-label {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9B8FCC;
}

.cs-ia-strip-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.cs-ia-strip-items span {
  font-size: 11px;
  color: var(--text-secondary);
  position: relative;
  padding-left: 12px;
  line-height: 1.4;
}

.cs-ia-strip-items span::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.7);
  font-size: 13px;
  line-height: 1.3;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 580px) {
  .cs-ia-transform {
    grid-template-columns: 1fr;
  }
  .cs-ia-arrow {
    text-align: center;
    padding-top: 0;
    font-size: 24px;
    transform: rotate(90deg);
  }
  .cs-ia-clusters { grid-template-columns: 1fr; }
}

/* ================================================================
   OPERATIONAL SCANNING RHYTHM — cs-osr-*
   RC case study: redesigned screens + scanning hierarchy overlays
   ================================================================ */

.cs-osr {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-osr-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-osr-title {
  font-size: 13px;
  font-weight: 700;
  color: #9B8FCC;
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-osr-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* Editorial screen composition */
.cs-osr-composition {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-osr-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Screen card */
.cs-osr-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-img-wrap {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  background: var(--bg-base);
  line-height: 0;
}

.cs-osr-screen--primary .cs-osr-img-wrap {
  border-color: rgba(139, 92, 200, 0.35);
  box-shadow: 0 0 20px rgba(139, 92, 200, 0.1);
}

.cs-osr-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.92);
}

/* Top hierarchy glow strip */
.cs-osr-scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cs-osr-scan-bar--top {
  top: 0;
  height: 22%;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 200, 0.08) 0%,
    transparent 100%
  );
  animation: osr-scan-pulse 4s ease-in-out infinite;
}

@keyframes osr-scan-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}

/* Annotation chips */
.cs-osr-ann {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-family: monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-focus);
  background: rgba(13, 11, 24, 0.82);
  border: 1px solid rgba(154, 123, 255, 0.3);
  padding: 3px 7px;
  border-radius: 1px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.cs-osr-ann-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-focus);
  flex-shrink: 0;
  animation: osr-dot-pulse 2s ease-in-out infinite;
}

@keyframes osr-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; box-shadow: 0 0 4px rgba(154,123,255,0.4); }
}

.cs-osr-ann--tl { top: 8px;  left:  8px; }
.cs-osr-ann--bl { bottom: 8px; left: 8px; }
.cs-osr-ann--tr { top: 8px;  right: 8px; }
.cs-osr-ann--br { bottom: 8px; right: 8px; }

.cs-osr-screen-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-left: 2px;
}

/* Scanning metrics strip */
.cs-osr-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-mid);
}

.cs-osr-metrics-label {
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cs-osr-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-metric {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
}

.cs-osr-metric-name {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-osr-metric-bar {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 1px;
  overflow: hidden;
}

.cs-osr-metric-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(139,92,200,0.7), rgba(154,123,255,0.3));
  border-radius: 1px;
  animation: osr-fill-in 1.2s ease-out both;
}

@keyframes osr-fill-in {
  from { width: 0 !important; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 580px) {
  .cs-osr-composition {
    grid-template-columns: 1fr;
  }
  .cs-osr-secondary {
    flex-direction: row;
  }
  .cs-osr-secondary .cs-osr-screen {
    flex: 1;
  }
  .cs-osr-metric {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .cs-osr-metric-name { white-space: normal; }
}

/* ================================================================
   OPERATIONAL ENVIRONMENTS VISUAL  (cs-oe-*)
   Blue Origin UI — Operational Context section
   ================================================================ */

.cs-oe {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.cs-oe-eyebrow {
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Outer frame — one unified surface */
.cs-oe-frame {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  min-height: 300px;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

/* Subtle orbital grid overlay */
.cs-oe-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,123,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,123,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Vertical dividers */
.cs-oe-vdiv {
  background: var(--border-mid);
  position: relative;
  z-index: 1;
}

/* Zone base */
.cs-oe-zone {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  position: relative;
  z-index: 1;
}

/* Zone header */
.cs-oe-zone-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-oe-zone-id {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  background: rgba(154,123,255,0.1);
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid rgba(154,123,255,0.2);
  margin-bottom: 5px;
}

.cs-oe-zone-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oe-zone-sub {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* ── Zone 1: RFI — enterprise table ──────────────────────── */

.cs-oe-filter {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  align-items: center;
}

.cs-oe-filter-bar {
  flex: 1;
  height: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 5px;
}

.cs-oe-filter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}

.cs-oe-filter-text {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  opacity: 0.5;
}

.cs-oe-filter-chip {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(154,123,255,0.1);
  color: var(--accent-focus);
  border: 1px solid rgba(154,123,255,0.2);
  white-space: nowrap;
}

.cs-oe-tbl {
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}

.cs-oe-tbl-head {
  display: grid;
  grid-template-columns: 72px 1fr 62px 42px;
  background: var(--bg-elevated);
  padding: 5px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-oe-tbl-hc {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-oe-tbl-row {
  display: grid;
  grid-template-columns: 72px 1fr 62px 42px;
  padding: 5px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-dark);
  align-items: center;
}

.cs-oe-tbl-row:last-child { border-bottom: none; }
.cs-oe-tbl-row--hi        { background: rgba(154,123,255,0.04); }

.cs-oe-tbl-c {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-oe-tbl-c--id {
  color: var(--text-primary);
  font-weight: 700;
}

.cs-oe-badge {
  display: inline-flex;
  align-items: center;
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

.cs-oe-badge--active  { background: rgba(78,201,144,0.12);  color: #5ed4a0; border: 1px solid rgba(78,201,144,0.25);  }
.cs-oe-badge--pending { background: rgba(224,160,48,0.12);  color: #dba640; border: 1px solid rgba(224,160,48,0.25);  }
.cs-oe-badge--hold    { background: rgba(224,80,80,0.12);   color: #e06060; border: 1px solid rgba(224,80,80,0.25);   }
.cs-oe-badge--review  { background: rgba(100,160,255,0.12); color: #7ab0f5; border: 1px solid rgba(100,160,255,0.25); }

.cs-oe-prog {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 1px;
  overflow: hidden;
}

.cs-oe-prog-fill {
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(154,123,255,0.5), rgba(199,184,255,0.3));
}

/* ── Zone 2: S2K — mobile frame ──────────────────────────── */

.cs-oe-zone--s2k {
  background: rgba(154,123,255,0.015);
  padding-left: 8px;
  padding-right: 8px;
}

.cs-oe-phone-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cs-oe-phone {
  width: 110px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-oe-phone-notch {
  width: 26px;
  height: 3px;
  background: var(--border-mid);
  border-radius: 2px;
  margin: 0 auto 3px;
}

.cs-oe-scan-zone {
  border: 1px dashed rgba(154,123,255,0.35);
  border-radius: 4px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(154,123,255,0.04);
  position: relative;
  overflow: hidden;
}

.cs-oe-scan-zone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(154,123,255,0.55);
  animation: oe-scan-beam 2.4s ease-in-out infinite;
}

@keyframes oe-scan-beam {
  0%   { top: 15%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 85%; opacity: 0; }
}

.cs-oe-scan-bars {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 20px;
}

.cs-oe-scan-bar {
  width: 2px;
  background: var(--border-light);
  border-radius: 1px;
}

.cs-oe-scan-label {
  font-size: 6px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(154,123,255,0.6);
}

.cs-oe-task-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-oe-task-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  background: var(--bg-base);
  border-radius: 2px;
  border: 1px solid var(--border-dark);
}

.cs-oe-task-item--active {
  border-color: rgba(154,123,255,0.25);
  background: rgba(154,123,255,0.04);
}

.cs-oe-task-check {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.cs-oe-task-check--done   { background: rgba(78,201,144,0.3);  border-color: rgba(78,201,144,0.5);  }
.cs-oe-task-check--active { border-color: rgba(154,123,255,0.5); }

.cs-oe-task-text {
  font-size: 7px;
  font-family: monospace;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-oe-task-text--active { color: var(--text-secondary); }

.cs-oe-phone-btn {
  background: rgba(154,123,255,0.15);
  border: 1px solid rgba(154,123,255,0.3);
  border-radius: 3px;
  padding: 4px 0;
  text-align: center;
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
}

/* ── Zone 3: Blue Moon — mission telemetry ───────────────── */

.cs-oe-orbital-wrap {
  flex: 1;
  min-height: 100px;
  margin-bottom: 8px;
}

.cs-oe-telem {
  display: flex;
  flex-direction: column;
}

.cs-oe-telem-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-dark);
  gap: 8px;
}

.cs-oe-telem-row:last-child { border-bottom: none; }

.cs-oe-telem-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-oe-telem-val {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  color: var(--text-primary);
}

.cs-oe-telem-val--nominal { color: #5ed4a0; }
.cs-oe-telem-val--caution { color: #dba640; }
.cs-oe-telem-val--active  { color: var(--accent-focus); }

.cs-oe-status-bar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: var(--bg-elevated);
  border-radius: 2px;
  border: 1px solid var(--border-mid);
}

.cs-oe-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5ed4a0;
  flex-shrink: 0;
  animation: oe-pulse 2s ease-in-out infinite;
}

@keyframes oe-pulse {
  0%, 100% { opacity: 0.5; box-shadow: none; }
  50%       { opacity: 1;   box-shadow: 0 0 4px rgba(94,212,160,0.5); }
}

.cs-oe-status-text {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* ── Shared UX thread ────────────────────────────────────── */

.cs-oe-thread {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cs-oe-thread-accent {
  width: 2px;
  min-height: 36px;
  background: linear-gradient(180deg, rgba(154,123,255,0.6), rgba(154,123,255,0.1));
  border-radius: 1px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cs-oe-thread-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

/* ── Image display containers ────────────────────────────── */

.cs-oe-img-single {
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-oe-img-single img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.cs-oe-img-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.cs-oe-img-screens--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-oe-img-screen {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.cs-oe-img-screen img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-oe-img-dual {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.cs-oe-img-flight {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
  min-height: 0;
}

.cs-oe-img-flight img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: top;
  display: block;
  min-height: 0;
}

.cs-oe-img-label {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 3px 6px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-mid);
  display: block;
  text-align: center;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .cs-oe-frame {
    grid-template-columns: 1fr;
  }
  .cs-oe-vdiv {
    width: 100%;
    height: 1px;
  }
  .cs-oe-phone-wrap {
    padding: var(--space-1) 0;
  }
}

/* ================================================================
   SHARED RESEARCH INSIGHTS  cs-sri-*
   Blue Origin UI > Research Insights section — editorial systems map
   ================================================================ */

.cs-sri {
  margin-top: var(--space-2);
}

.cs-sri-eyebrow {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-sri-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-sri-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Map container --- */
.cs-sri-map {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-base);
}

/* --- Tier 1: Initiatives --- */
.cs-sri-initiatives {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--bg-base);
}

.cs-sri-init {
  background: var(--bg-elevated);
  padding: 16px 18px;
  border-left: 2px solid transparent;
  border-right: 1px solid var(--border-light);
}
.cs-sri-init:last-child { border-right: none; }

.cs-sri-init--rfi { border-left-color: rgba(154, 123, 255, 0.6); }
.cs-sri-init--s2k { border-left-color: rgba(72,  187, 120, 0.6); }
.cs-sri-init--bm  { border-left-color: rgba(99,  179, 237, 0.6); }

.cs-sri-init-id {
  display: block;
  font-size: 10px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cs-sri-init--rfi .cs-sri-init-id { color: rgba(154, 123, 255, 0.85); }
.cs-sri-init--s2k .cs-sri-init-id { color: rgba(72,  187, 120, 0.85); }
.cs-sri-init--bm  .cs-sri-init-id { color: rgba(99,  179, 237, 0.85); }

.cs-sri-init-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- SVG connectors --- */
.cs-sri-connector {
  display: block;
  width: 100%;
  height: 32px;
  flex-shrink: 0;
  background: var(--bg-base);
}

.cs-sri-connector line {
  stroke: rgba(154, 123, 255, 0.65);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  animation: cs-sri-flow 3.5s linear infinite;
}

.cs-sri-connector--diverge line {
  animation-direction: reverse;
}

@keyframes cs-sri-flow {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0;  }
}

/* --- Hub --- */
.cs-sri-hub {
  background: linear-gradient(180deg, rgba(154, 123, 255, 0.04) 0%, rgba(154, 123, 255, 0.09) 100%);
  border-top: 1px solid rgba(154, 123, 255, 0.18);
  border-bottom: 1px solid rgba(154, 123, 255, 0.18);
  padding: 18px 24px;
  text-align: center;
  animation: cs-sri-pulse 5s ease-in-out infinite;
}

@keyframes cs-sri-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(154, 123, 255, 0); }
  50%       { box-shadow: inset 0 0 24px 0 rgba(154, 123, 255, 0.06); }
}

.cs-sri-hub-label {
  font-size: 0.72rem;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-focus);
  margin-bottom: 4px;
}

.cs-sri-hub-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* --- Tier 3: Insight clusters --- */
.cs-sri-clusters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: var(--bg-base);
}

.cs-sri-cluster {
  background: var(--bg-elevated);
  padding: 16px 18px;
  border-right: 1px solid var(--border-light);
  border-top: 2px solid rgba(154, 123, 255, 0.12);
}
.cs-sri-cluster:last-child { border-right: none; }

.cs-sri-cluster-num {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  margin-bottom: 6px;
}

.cs-sri-cluster-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.cs-sri-cluster-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .cs-sri-initiatives {
    grid-template-columns: 1fr;
  }
  .cs-sri-init {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-sri-init:last-child { border-bottom: none; }

  .cs-sri-connector { display: none; }

  .cs-sri-clusters {
    grid-template-columns: 1fr 1fr;
  }
  .cs-sri-cluster:nth-child(even) { border-right: none; }
  .cs-sri-cluster:nth-child(n+3) {
    border-top: 1px solid var(--border-light);
  }
}

/* ================================================================
   RFI INITIATIVE  cs-rfi-*
   Blue Origin UI > RFI Initiative section
================================================================ */

.cs-rfi {
  margin-top: var(--space-2);
}

.cs-rfi-eyebrow {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-rfi-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-rfi-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Moments grid --- */
.cs-rfi-moments {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

/* --- Single moment --- */
.cs-rfi-moment {
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-light);
}
.cs-rfi-moment:last-child { border-right: none; }

.cs-rfi-moment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-rfi-moment-num {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(154, 123, 255, 0.55);
}

.cs-rfi-moment-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Stage (simulated UI crop) --- */
.cs-rfi-stage {
  flex: 1;
  padding: 12px 12px 6px;
  position: relative;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

/* --- Filter chips --- */
.cs-rfi-filter-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cs-rfi-chip {
  font-size: 8px;
  font-family: monospace;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  background: var(--bg-elevated);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.cs-rfi-chip--active {
  border-color: rgba(154, 123, 255, 0.45);
  color: rgba(154, 123, 255, 0.85);
  background: rgba(154, 123, 255, 0.07);
}
.cs-rfi-chip--add {
  color: rgba(154, 123, 255, 0.5);
  border-style: dashed;
  border-color: rgba(154, 123, 255, 0.25);
  background: transparent;
}

/* --- Table simulation --- */
.cs-rfi-tbl {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  font-family: monospace;
  font-size: 9px;
}

.cs-rfi-tbl-head {
  display: grid;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-mid);
  padding: 5px 8px;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-items: center;
}

.cs-rfi-tbl-row {
  display: grid;
  padding: 6px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  align-items: center;
}
.cs-rfi-tbl-row:last-child { border-bottom: none; }

.cs-rfi-tbl-row--hi      { background: rgba(154, 123, 255, 0.04); }
.cs-rfi-tbl-row--dim     { opacity: 0.4; }
.cs-rfi-tbl-row--flagged {
  background: rgba(246, 173, 85, 0.05);
  border-left: 2px solid rgba(246, 173, 85, 0.5);
  padding-left: 6px;
}

/* Column counts per stage */
.cs-rfi-stage--filter .cs-rfi-tbl-head,
.cs-rfi-stage--filter .cs-rfi-tbl-row  { grid-template-columns: 2fr 2fr 1.5fr 0.8fr; }

.cs-rfi-stage--flag .cs-rfi-tbl-head,
.cs-rfi-stage--flag .cs-rfi-tbl-row    { grid-template-columns: 2fr 2fr 0.5fr; }

.cs-rfi-stage--frozen .cs-rfi-tbl-head,
.cs-rfi-stage--frozen .cs-rfi-tbl-row  { grid-template-columns: 2fr 1.2fr 0.5fr 0.8fr 1.5fr; }

/* --- Status badges --- */
.cs-rfi-badge {
  display: inline-block;
  font-size: 8px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 2px;
  line-height: 1;
}
.cs-rfi-badge--open {
  background: rgba(99,  179, 237, 0.1);
  color:      rgba(99,  179, 237, 0.85);
  border: 1px solid rgba(99, 179, 237, 0.2);
}
.cs-rfi-badge--hi {
  background: rgba(246, 173, 85, 0.1);
  color:      rgba(246, 173, 85, 0.85);
  border: 1px solid rgba(246, 173, 85, 0.2);
}

/* --- CSS flag icon --- */
.cs-rfi-flag {
  display: inline-block;
  width: 10px;
  height: 12px;
  position: relative;
}
.cs-rfi-flag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: rgba(246, 173, 85, 0.85);
  border-radius: 1px;
}
.cs-rfi-flag::after {
  content: '';
  position: absolute;
  left: 1.5px;
  top: 1px;
  width: 8px;
  height: 6px;
  background: rgba(246, 173, 85, 0.85);
  clip-path: polygon(0 0, 100% 30%, 0 100%);
}

/* --- Commentary modal --- */
.cs-rfi-modal {
  position: absolute;
  right: 10px;
  top: 56px;
  width: 148px;
  background: var(--bg-elevated);
  border: 1px solid rgba(154, 123, 255, 0.35);
  border-radius: 5px;
  padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(154, 123, 255, 0.06);
  z-index: 2;
}
.cs-rfi-modal-hd {
  font-size: 8px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--accent-focus);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.3;
}
.cs-rfi-modal-row {
  margin-bottom: 5px;
}
.cs-rfi-modal-row:last-child { margin-bottom: 0; }

.cs-rfi-modal-lbl {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cs-rfi-modal-val {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--text-secondary);
  line-height: 1.4;
}
.cs-rfi-modal-val--warn {
  color: rgba(246, 173, 85, 0.85);
  font-weight: 600;
}

/* --- Frozen identifier column --- */
.cs-rfi-col--id {
  color: rgba(154, 123, 255, 0.75);
  font-weight: 600;
  border-right: 1px solid rgba(154, 123, 255, 0.2);
  padding-right: 6px;
  margin-right: 2px;
}

/* --- Annotation strip --- */
.cs-rfi-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  padding: 6px 0 4px;
  letter-spacing: 0.02em;
  margin-top: auto;
}
.cs-rfi-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(154, 123, 255, 0.5);
}

/* --- Moment caption --- */
.cs-rfi-moment-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-rfi-moments {
    grid-template-columns: 1fr;
  }
  .cs-rfi-moment {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-rfi-moment:last-child { border-bottom: none; }
}

/* ================================================================
   S2K INITIATIVE  cs-s2k-*
   Blue Origin UI > S2K Initiative section
================================================================ */

.cs-s2k {
  margin-top: var(--space-2);
}

.cs-s2k-eyebrow {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-s2k-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-s2k-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Flow container --- */
.cs-s2k-flow {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: start;
}

/* --- Arrow connector --- */
.cs-s2k-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 52px;
}

/* --- Single step --- */
.cs-s2k-step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.cs-s2k-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-s2k-step-num {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(72, 187, 120, 0.55);
}

.cs-s2k-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Mobile screen simulation --- */
.cs-s2k-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

.cs-s2k-screen-bar {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-s2k-screen-title {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.cs-s2k-screen-sub {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
}

.cs-s2k-screen-bar--warn {
  background: rgba(246, 173, 85, 0.05);
  border-bottom-color: rgba(246, 173, 85, 0.2);
}
.cs-s2k-screen-bar--warn .cs-s2k-screen-title {
  color: rgba(246, 173, 85, 0.85);
}

/* --- Progress (Step 1) --- */
.cs-s2k-progress-wrap {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-light);
}

.cs-s2k-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  margin-bottom: 5px;
  letter-spacing: 0.03em;
}

.cs-s2k-progress-track {
  height: 3px;
  background: var(--border-mid);
  border-radius: 2px;
  overflow: hidden;
}

.cs-s2k-progress-fill {
  height: 100%;
  background: rgba(72, 187, 120, 0.65);
  border-radius: 2px;
}

/* --- Task list (Step 1) --- */
.cs-s2k-tasklist { padding: 5px 0; }

.cs-s2k-task {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 9px;
  font-family: monospace;
}

.cs-s2k-task--done    { opacity: 0.5; }
.cs-s2k-task--active  { background: rgba(72, 187, 120, 0.07); }
.cs-s2k-task--pending { opacity: 0.3; }

.cs-s2k-task-name { color: var(--text-secondary); }
.cs-s2k-task-qty  { font-size: 8px; color: var(--text-muted); }

.cs-s2k-task-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(72, 187, 120, 0.65);
  display: block;
  position: relative;
  flex-shrink: 0;
}
.cs-s2k-task-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 2.5px;
  width: 4px;
  height: 2px;
  border-left: 1.5px solid rgba(0, 0, 0, 0.55);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
  transform: rotate(-45deg);
}

.cs-s2k-task-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(72, 187, 120, 0.85);
  display: block;
  flex-shrink: 0;
}

.cs-s2k-task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  display: block;
  flex-shrink: 0;
}

/* --- Scan zone (Step 2) --- */
.cs-s2k-scan-zone {
  flex: 1;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cs-s2k-scan-icon {
  width: 38px;
  height: 26px;
  border: 1.5px solid rgba(72, 187, 120, 0.4);
  border-radius: 3px;
  position: relative;
  margin-bottom: 2px;
}
.cs-s2k-scan-icon::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; right: 5px;
  height: 1.5px;
  background: rgba(72, 187, 120, 0.6);
}
.cs-s2k-scan-icon::after {
  content: '';
  position: absolute;
  left: 5px; top: 12px; right: 5px;
  height: 1.5px;
  background: rgba(72, 187, 120, 0.3);
}

.cs-s2k-scan-label {
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.cs-s2k-scan-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: 3px;
  padding: 6px 8px;
  margin-top: 4px;
}

.cs-s2k-scan-cursor {
  font-size: 9px;
  font-family: monospace;
  color: rgba(72, 187, 120, 0.8);
  letter-spacing: 0.02em;
}
.cs-s2k-scan-cursor::after {
  content: '|';
  color: rgba(72, 187, 120, 0.55);
  animation: cs-s2k-blink 1.1s step-end infinite;
}

@keyframes cs-s2k-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Confirm button (Step 2) --- */
.cs-s2k-confirm-btn {
  margin: 8px 12px 12px;
  padding: 8px 0;
  background: rgba(72, 187, 120, 0.12);
  border: 1px solid rgba(72, 187, 120, 0.32);
  border-radius: 4px;
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(72, 187, 120, 0.85);
  text-align: center;
}

/* --- Alert (Step 3) --- */
.cs-s2k-alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(246, 173, 85, 0.05);
  border-bottom: 1px solid rgba(246, 173, 85, 0.12);
}

.cs-s2k-alert-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 173, 85, 0.7);
  position: relative;
}
.cs-s2k-alert-icon::before {
  content: '!';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 700;
  font-family: monospace;
  color: rgba(246, 173, 85, 0.85);
  line-height: 1;
}

.cs-s2k-alert-msg {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* --- Exception actions (Step 3) --- */
.cs-s2k-exception-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px 12px;
}

.cs-s2k-btn {
  padding: 7px 0;
  border-radius: 3px;
  font-size: 8px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.cs-s2k-btn--ghost {
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  background: transparent;
}
.cs-s2k-btn--primary {
  background: rgba(72, 187, 120, 0.11);
  border: 1px solid rgba(72, 187, 120, 0.3);
  color: rgba(72, 187, 120, 0.85);
}

/* --- Annotation strip --- */
.cs-s2k-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  padding: 7px 14px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-s2k-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(72, 187, 120, 0.5);
}

/* --- Step caption --- */
.cs-s2k-step-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-s2k-flow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cs-s2k-arrow {
    padding-top: 0;
    justify-content: center;
    transform: rotate(90deg);
  }
}

/* ================================================================
   OUTCOMES & FEEDBACK  cs-of-*
   Blue Origin UI > Outcomes & Feedback section
================================================================ */

.cs-of {
  margin-top: var(--space-2);
}

.cs-of-eyebrow {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-of-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-of-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Card grid --- */
.cs-of-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--border-light);
}

/* --- Individual card --- */
.cs-of-card {
  background: var(--bg-elevated);
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Card top: badge + status --- */
.cs-of-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Initiative badge --- */
.cs-of-badge {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-of-badge--rfi { color: rgba(154, 123, 255, 0.85); }
.cs-of-badge--s2k { color: rgba(72,  187, 120, 0.85); }
.cs-of-badge--bm  { color: rgba(99,  179, 237, 0.85); }

/* --- Status chip --- */
.cs-of-status {
  font-size: 8px;
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
}
.cs-of-status--beta  {
  background: rgba(154, 123, 255, 0.08);
  color: rgba(154, 123, 255, 0.75);
  border: 1px solid rgba(154, 123, 255, 0.2);
}
.cs-of-status--pilot {
  background: rgba(72,  187, 120, 0.08);
  color: rgba(72,  187, 120, 0.75);
  border: 1px solid rgba(72,  187, 120, 0.2);
}
.cs-of-status--proto {
  background: rgba(99,  179, 237, 0.08);
  color: rgba(99,  179, 237, 0.75);
  border: 1px solid rgba(99,  179, 237, 0.2);
}

/* --- Divider rule per initiative --- */
.cs-of-divider {
  width: 28px;
  height: 1px;
}
.cs-of-card--rfi .cs-of-divider { background: rgba(154, 123, 255, 0.3); }
.cs-of-card--s2k .cs-of-divider { background: rgba(72,  187, 120, 0.3); }
.cs-of-card--bm  .cs-of-divider { background: rgba(99,  179, 237, 0.3); }

/* --- Card text --- */
.cs-of-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.cs-of-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .cs-of-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }
  .cs-of-card {
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }
  .cs-of-card:last-child { border-bottom: none; }
}

/* ================================================================
   BLUE MOON INITIATIVE  cs-bm-*
   Blue Origin UI > Blue Moon Initiative section
================================================================ */

.cs-bm {
  margin-top: var(--space-2);
}

.cs-bm-eyebrow {
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-bm-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-bm-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Moments container --- */
.cs-bm-moments {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
}

/* --- Moment base --- */
.cs-bm-moment {
  display: flex;
  flex-direction: column;
}

.cs-bm-moment--hero {
  border-bottom: 1px solid var(--border-light);
}

/* --- Lower pair --- */
.cs-bm-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cs-bm-moment--half {
  border-right: 1px solid var(--border-light);
}
.cs-bm-moment--half:last-child { border-right: none; }

/* --- Moment head --- */
.cs-bm-moment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-bm-moment-num {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(99, 179, 237, 0.5);
}

.cs-bm-moment-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Stage base --- */
.cs-bm-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

/* --- Orbit stage --- */
.cs-bm-stage--orbit {
  background: radial-gradient(ellipse at 50% 0%, rgba(99, 179, 237, 0.04) 0%, transparent 65%),
              var(--bg-base);
}

.cs-bm-orbit-wrap {
  flex: 1;
  padding: 14px 14px 4px;
}
.cs-bm-orbit-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.cs-bm-orbit-readouts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(99, 179, 237, 0.07);
}

.cs-bm-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-bm-readout-lbl {
  font-size: 7px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-bm-readout-val {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.cs-bm-readout-val--ok { color: rgba(72, 187, 120, 0.7); }

/* --- Image stages --- */
.cs-bm-stage--img {
  overflow: hidden;
  padding: 0;
}

.cs-bm-img-hero {
  flex: 1;
  overflow: hidden;
}
.cs-bm-img-hero img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cs-bm-img-half {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
}
.cs-bm-img-half img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* --- Telemetry stage --- */
.cs-bm-stage--telem {
  padding: 12px 14px 0;
}

.cs-bm-telem-group { margin-bottom: 2px; }

.cs-bm-telem-group-lbl {
  font-size: 7px;
  font-family: monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(99, 179, 237, 0.4);
  margin-bottom: 5px;
}

.cs-bm-telem-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  font-family: monospace;
}
.cs-bm-telem-row:last-child { border-bottom: none; }

.cs-bm-telem-name {
  font-size: 8px;
  color: var(--text-secondary);
}
.cs-bm-telem-val {
  font-size: 8px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.cs-bm-telem-state {
  font-size: 7px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: 2px;
  min-width: 28px;
  text-align: center;
}
.cs-bm-state--ok {
  background: rgba(72,  187, 120, 0.07);
  color:      rgba(72,  187, 120, 0.6);
  border: 1px solid rgba(72, 187, 120, 0.14);
}
.cs-bm-state--warn {
  background: rgba(246, 173, 85, 0.1);
  color:      rgba(246, 173, 85, 0.8);
  border: 1px solid rgba(246, 173, 85, 0.2);
}

.cs-bm-telem-divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

/* --- Control stage --- */
.cs-bm-stage--control {
  padding: 14px 14px 0;
  gap: 12px;
}

.cs-bm-ctrl-mode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-bm-ctrl-mode-lbl {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-bm-ctrl-toggle {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  overflow: hidden;
  font-family: monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cs-bm-ctrl-opt {
  padding: 4px 10px;
  color: var(--text-muted);
}
.cs-bm-ctrl-opt--active {
  background: rgba(99, 179, 237, 0.14);
  color: rgba(99, 179, 237, 0.85);
}

.cs-bm-ctrl-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cs-bm-ctrl-status-label {
  font-size: 8.5px;
  font-family: monospace;
  color: var(--text-secondary);
}
.cs-bm-ctrl-status-sub {
  font-size: 7.5px;
  font-family: monospace;
  color: var(--text-muted);
}

.cs-bm-ctrl-override {
  padding: 7px 0;
  background: transparent;
  border: 1px solid rgba(99, 179, 237, 0.2);
  border-radius: 3px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(99, 179, 237, 0.55);
  text-align: center;
}

/* --- Annotation strip --- */
.cs-bm-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-family: monospace;
  color: var(--text-muted);
  padding: 7px 14px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
  margin-top: auto;
}
.cs-bm-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(99, 179, 237, 0.45);
}

/* --- Moment caption --- */
.cs-bm-moment-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-bm-pair {
    grid-template-columns: 1fr;
  }
  .cs-bm-moment--half {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-bm-moment--half:last-child { border-bottom: none; }
}

/* ================================================================
   CASE STUDY — BLUE ORIGIN VIRTUAL NESTED CONTAINERS  cs-vnc-*
   ================================================================ */

/* --- Overview / TL;DR --- */
.cs-vnc-tldr {
  margin-bottom: var(--space-3);
}
.cs-vnc-tldr p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  max-width: 680px;
}
.cs-vnc-tldr p:last-child { margin-bottom: 0; }

/* --- Section label --- */
.cs-vnc-label {
  font-size: 10px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

/* --- Research stats row --- */
.cs-vnc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.cs-vnc-stat {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-stat-num {
  font-size: 26px;
  font-weight: 700;
  font-family: monospace;
  color: var(--accent-interactive);
  line-height: 1;
  margin-bottom: 5px;
}
.cs-vnc-stat-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* --- Facility grid --- */
.cs-vnc-fac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-fac {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-fac-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light);
}
.cs-vnc-fac-id {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  margin-bottom: 3px;
}
.cs-vnc-fac-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-vnc-fac-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cs-vnc-fac-body {
  padding: 8px 14px 12px;
}
.cs-vnc-fac-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.cs-vnc-fac-row:last-child { border-bottom: none; }
.cs-vnc-fac-row-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cs-vnc-fac-row-val {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Friction grid --- */
.cs-vnc-friction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-friction {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-friction-num {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  opacity: 1;
  margin-bottom: 5px;
}
.cs-vnc-friction-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-friction-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Opportunity grid --- */
.cs-vnc-opp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-opp {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-opp-num {
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  opacity: 0.55;
  margin-bottom: 5px;
}
.cs-vnc-opp-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-opp-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Outcome cards --- */
.cs-vnc-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-outcome {
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--accent-interactive);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-outcome-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-outcome-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Workflow modules --- */
.cs-vnc-wf {
  margin-top: var(--space-3);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-wf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-meta { flex: 1; min-width: 0; }
.cs-vnc-wf-eyebrow {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  display: block;
  margin-bottom: 5px;
}
.cs-vnc-wf-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 5px;
}
.cs-vnc-wf-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.cs-vnc-wf-states {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.cs-vnc-wf-state {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.cs-vnc-wf-state--current {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
}
.cs-vnc-wf-state--future {
  background: rgba(154,123,255,0.10);
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.25);
}
/* Image frame */
.cs-vnc-wf-frame {
  position: relative;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-mid);
  overflow: hidden;
  cursor: zoom-in;
}
.cs-vnc-wf-frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.cs-vnc-wf-frame:hover img { transform: scale(1.015); }
.cs-vnc-wf-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 16px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events: none;
}
.cs-vnc-wf-overlay-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.4);
}
/* Annotation tags — two-column group layout */
.cs-vnc-wf-anns {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-anns-group {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cs-vnc-wf-anns-group + .cs-vnc-wf-anns-group {
  border-left: 1px solid var(--border-mid);
}
.cs-vnc-wf-anns-lbl {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  line-height: 1;
}
.cs-vnc-wf-anns-lbl--prob { color: var(--text-muted); }
.cs-vnc-wf-anns-lbl--opp  { color: var(--accent-interactive); }
.cs-vnc-wf-anns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs-vnc-wf-ann {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  background: rgba(255,255,255,0.03);
}
.cs-vnc-wf-ann--opp {
  color: var(--accent-interactive);
  border-color: rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
}

/* Flow legend key */
.cs-vnc-wf-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px 3px;
  background: var(--bg-base);
}
.cs-vnc-wf-legend-item {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.cs-vnc-wf-legend-item::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 1px;
  flex-shrink: 0;
}
.cs-vnc-wf-legend-item--step {
  color: var(--text-muted);
}
.cs-vnc-wf-legend-item--step::before {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
}
.cs-vnc-wf-legend-item--gap {
  color: rgba(255,168,80,0.90);
}
.cs-vnc-wf-legend-item--gap::before {
  background: rgba(255,168,80,0.06);
  border: 1px dashed rgba(255,168,80,0.40);
}

/* Flow strip */
.cs-vnc-wf-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px 10px;
  background: var(--bg-base);
  overflow-x: auto;
}
.cs-vnc-wf-strip-step {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-vnc-wf-strip-step--gap {
  color: rgba(255,168,80,0.92);
  border: 1px dashed rgba(255,168,80,0.38);
  background: rgba(255,168,80,0.05);
}
.cs-vnc-wf-strip-arrow {
  font-size: 11px;
  color: var(--border-mid);
  padding: 0 6px;
  flex-shrink: 0;
}
/* Nested container callout */
.cs-vnc-wf-nested {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-nested-visual { flex-shrink: 0; width: 200px; }
.cs-vnc-wf-nested-visual img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
}
.cs-vnc-wf-nested-text { flex: 1; min-width: 0; padding-top: 2px; }
.cs-vnc-wf-nested-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-interactive);
  margin-bottom: 6px;
}
.cs-vnc-wf-nested-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Standalone opportunity callout card */
.cs-vnc-opp-card {
  margin-top: var(--space-2);
  border: 1px solid rgba(154,123,255,0.32);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-opp-card-header {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(154,123,255,0.18);
  background: rgba(154,123,255,0.06);
}
.cs-vnc-opp-card-eyebrow {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  display: block;
  margin-bottom: 5px;
}
.cs-vnc-opp-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-vnc-opp-card-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
}
.cs-vnc-opp-card-img {
  flex-shrink: 0;
  width: 200px;
}
.cs-vnc-opp-card-img img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(154,123,255,0.22);
  border-radius: 3px;
}
.cs-vnc-opp-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
  min-width: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .cs-vnc-wf-anns          { flex-direction: column; }
  .cs-vnc-wf-anns-group + .cs-vnc-wf-anns-group { border-left: none; border-top: 1px solid var(--border-mid); }
  .cs-vnc-opp-card-body    { flex-direction: column; }
  .cs-vnc-opp-card-img     { width: 100%; }
}

/* --- Operational signal strip --- */
.cs-vnc-signals {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0;
  background: var(--bg-elevated);
}
.cs-vnc-signal {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-mid);
}
.cs-vnc-signal:last-child { border-bottom: none; }
.cs-vnc-signal-val {
  font-size: 17px;
  font-weight: 700;
  font-family: monospace;
  color: var(--accent-interactive);
  flex-shrink: 0;
  min-width: 60px;
  line-height: 1.2;
}
.cs-vnc-signal-label {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Inventory lifecycle map --- */
.cs-vnc-lifecycle {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0;
}
.cs-vnc-lc-stage {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-elevated);
}
.cs-vnc-lc-stage:last-child { border-bottom: none; }
.cs-vnc-lc-stage:nth-child(even) { background: var(--bg-panel); }
.cs-vnc-lc-num {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.cs-vnc-lc-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cs-vnc-lc-friction {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.cs-vnc-lc-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: start;
  flex-shrink: 0;
}

/* --- Finding → Opportunity signal tag --- */
.cs-vnc-opp-signal {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border-mid);
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 7px;
  background: rgba(255,255,255,0.03);
}

/* ================================================================
   BO-UX: RESEARCH DISCOVERY — OPERATIONAL SIGNALS (cs-rdos-*)
   Horizontal lifecycle flow + editorial signal panels
   ================================================================ */

/* Section eyebrow label */
.cs-rdos-eyebrow {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  margin-bottom: 10px;
  display: block;
}

/* Lifecycle flow — 2×3 grid */
.cs-rdos-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--border-mid);
}
.cs-rdos-flow-stage {
  padding: 16px 14px 14px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-rdos-flow-stage:nth-child(n+4) {
  background: var(--bg-panel);
}
.cs-rdos-fs-num {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.cs-rdos-fs-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-rdos-fs-insight {
  font-size: 9.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}
.cs-rdos-fs-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}
.cs-rdos-fs-vis {
  height: 26px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 4px;
}
/*
  Lifecycle card visual abstractions — each maps to the operational friction of its stage.
  All are pure CSS (background gradients / grid), no extra markup needed.
*/

/* Stage 01 — Shipment Initiation: staggered document rows → fragmented, misaligned records */
.cs-rdos-fs-vis--init {
  background:
    linear-gradient(to right, rgba(154,123,255,0.42) 63%, transparent 63%) 0 4px / 100% 3px no-repeat,
    linear-gradient(to right, transparent 14%, rgba(154,123,255,0.22) 14%, rgba(154,123,255,0.22) 79%, transparent 79%) 0 12px / 100% 3px no-repeat,
    linear-gradient(to right, rgba(154,123,255,0.32) 47%, transparent 47%) 9px 20px / 91% 3px no-repeat;
}

/* Stage 02 — Transit: solid left node → dashed path → dim right node → signal absent in transit */
.cs-rdos-fs-vis--transit {
  background:
    radial-gradient(circle at 7px 50%, rgba(154,123,255,0.55) 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 7px) 50%, rgba(154,123,255,0.18) 4px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(154,123,255,0.28) 0px, rgba(154,123,255,0.28) 5px, transparent 5px, transparent 10px) 16px 50% / calc(100% - 32px) 1px no-repeat;
}

/* Stage 03 — Receiving: uniform grid (all solid) → items arriving and being individually counted */
.cs-rdos-fs-vis--grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
.cs-rdos-fs-vis--grid span { background: rgba(154,123,255,0.22); border-radius: 1px; }
.cs-rdos-fs-vis--grid span.dim { background: rgba(154,123,255,0.05); }

/* Stage 04 — Storage: checkerboard dim grid → container contents present but obscured */
/* (uses --grid with .dim spans — handled via HTML span variants) */

/* Stage 05 — Return to Inventory: forward path + shorter reverse path → disjointed, incomplete return */
.cs-rdos-fs-vis--return {
  background:
    linear-gradient(to right, rgba(154,123,255,0.45) 0%, rgba(154,123,255,0.45) 65%, transparent 65%) 0 7px / 100% 2px no-repeat,
    linear-gradient(to left, rgba(154,123,255,0.20) 0%, rgba(154,123,255,0.20) 46%, transparent 46%) 0 16px / 100% 2px no-repeat;
}

/* Stage 06 — Audit: uneven bar columns → mismatched record counts, discrepancies across the ledger */
.cs-rdos-fs-vis--audit {
  background:
    linear-gradient(to top, rgba(154,123,255,0.45) 72%, transparent 72%) 16% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.20) 38%, transparent 38%) 30% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.40) 58%, transparent 58%) 44% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.14) 22%, transparent 22%) 58% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.35) 47%, transparent 47%) 72% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.25) 63%, transparent 63%) 86% 0 / 7px 100% no-repeat;
}

/* --nodes kept for backwards compat, replaced by --transit / --return in lifecycle cards */
.cs-rdos-fs-vis--nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  position: relative;
}
.cs-rdos-fs-vis--nodes::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
  border-top: 1px dashed rgba(154,123,255,0.25);
  transform: translateY(-50%);
}
.cs-rdos-fs-vis--nodes::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154,123,255,0.45);
  flex-shrink: 0;
}
.cs-rdos-fs-node-r {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154,123,255,0.12);
  border: 1px dashed rgba(154,123,255,0.35);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Signal panels grid */
.cs-rdos-signals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
  background: var(--border-mid);
}
.cs-rdos-sp {
  padding: 16px 18px 18px;
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden;
}
.cs-rdos-sp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(154,123,255,0.50) 0%, transparent 60%);
}
/* glyph watermark removed */
.cs-rdos-sp-val {
  font-size: 20px;
  font-weight: 700;
  font-family: monospace;
  color: var(--accent-interactive);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cs-rdos-sp-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 9px;
}
.cs-rdos-sp-desc {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Fifth signal panel spans full width */
.cs-rdos-sp--full {
  grid-column: 1 / -1;
}

/* Responsive: stack signals on narrow viewports */
@media (max-width: 560px) {
  .cs-rdos-signals {
    grid-template-columns: 1fr;
  }
  .cs-rdos-sp--full {
    grid-column: 1;
  }
  .cs-rdos-flow {
    grid-template-columns: 1fr;
  }
  .cs-rdos-flow-stage:nth-child(n+4) {
    background: var(--bg-elevated);
  }
  .cs-rdos-flow-stage:nth-child(even) {
    background: var(--bg-panel);
  }
}

/* Role card spaced modifier — Research Discovery */
.cs-kd--spaced {
  gap: 0;
}
.cs-kd--spaced .cs-kd-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-mid);
  gap: var(--space-3);
}
.cs-kd--spaced .cs-kd-item:first-child {
  border-top: none;
  padding-top: 0;
}
.cs-kd--spaced .cs-kd-num {
  color: var(--accent-interactive);
  opacity: 0.90;
  line-height: 0.85;
}
.cs-kd--spaced .cs-kd-fields {
  padding-left: calc(56px + var(--space-2));
}
@media (max-width: 560px) {
  .cs-kd--spaced .cs-kd-fields {
    padding-left: 0;
  }
}

/* ================================================================
   BO-UX: CROSS-FACILITY WORKFLOW ANALYSIS (cs-cfw-*)
   Three-panel facility comparison + synthesis strip
   ================================================================ */

/* Three-column facility panel grid */
.cs-cfw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-mid);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-cfw-panel {
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
}

/* Journey map image crop frame */
.cs-cfw-frame {
  position: relative;
  height: 185px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-base);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-mid);
}

/* cs-img-btn wrapper is injected by wrapCaseStudyImages() — must fill frame */
.cs-cfw-frame .cs-img-btn {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  border-radius: 0;
}

.cs-cfw-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  transition: transform 0.40s ease;
  filter: brightness(0.82) contrast(1.05) saturate(0.75);
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

.cs-cfw-frame:hover img,
.cs-cfw-frame .cs-img-btn:hover img {
  transform: scale(1.055);
  box-shadow: none;
}

/* Facility code badge — sits inside the frame */
.cs-cfw-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-family: monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 3px 9px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  line-height: 1.5;
  z-index: 1;
}

/* Zoom-hint label on frame hover */
.cs-cfw-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.cs-cfw-frame:hover .cs-cfw-hint {
  opacity: 1;
}

/* Bottom gradient fade inside frame */
.cs-cfw-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(0,0,0,0.50) 0%, transparent 100%);
  pointer-events: none;
}

/* Panel text body */
.cs-cfw-body {
  padding: 14px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.cs-cfw-facility {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-interactive);
  font-weight: 700;
}

.cs-cfw-obs {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.62;
  flex: 1;
}

.cs-cfw-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.025);
  padding: 2px 8px;
  border-radius: 2px;
  display: inline-block;
  align-self: flex-start;
}

/* Synthesis strip */
.cs-cfw-syn {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.cs-cfw-syn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-mid);
}

.cs-cfw-syn-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  font-weight: 700;
  white-space: nowrap;
}

.cs-cfw-syn-rule {
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

.cs-cfw-syn-count {
  font-size: 9px;
  font-family: monospace;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cs-cfw-syn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-mid);
}

.cs-cfw-syn-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}

.cs-cfw-syn-num {
  font-size: 9px;
  font-family: monospace;
  color: var(--accent-interactive);
  opacity: 1;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 16px;
}

.cs-cfw-syn-text {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.58;
}

/* Traceability gaps divider within tab */
.cs-cfw-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--space-3) 0 var(--space-2);
}

.cs-cfw-divider-label {
  font-size: 9px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  white-space: nowrap;
  font-weight: 700;
}

.cs-cfw-divider-rule {
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

/* Lightbox overlay for full-map view */
.cs-cfw-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 32px;
}

.cs-cfw-lightbox.active {
  display: flex;
}

.cs-cfw-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.60);
}

.cs-cfw-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 10px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-cfw-grid {
    grid-template-columns: 1fr;
  }
  .cs-cfw-frame {
    height: 160px;
  }
  .cs-cfw-syn-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   BO-UX: STRATEGIC DESIGN OPPORTUNITIES (cs-sdo-*)
   3-column pathway table: Research Signal → UX Opportunity → Operational Value
   ================================================================ */

.cs-sdo-table {
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-sdo-thead {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-mid);
  padding: 11px 0;
}

.cs-sdo-th {
  padding: 0 18px;
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.cs-sdo-th-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--accent-interactive);
  opacity: 0.28;
  line-height: 1;
}

.cs-sdo-rows {
  display: flex;
  flex-direction: column;
}

.cs-sdo-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}

.cs-sdo-row:last-child {
  border-bottom: none;
}

.cs-sdo-cell {
  background: var(--bg-elevated);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background 0.18s ease;
}

.cs-sdo-row:hover .cs-sdo-cell {
  background: var(--bg-hover, rgba(154,123,255,0.04));
}

.cs-sdo-cell-idx {
  font-size: 9px;
  font-family: monospace;
  color: rgba(154,123,255,0.75);
  letter-spacing: 0.08em;
  line-height: 1;
}

.cs-sdo-cell-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.cs-sdo-cell-body {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Column accent tones */
.cs-sdo-cell--signal .cs-sdo-cell-label {
  color: var(--text-secondary);
}

.cs-sdo-cell--opp .cs-sdo-cell-label {
  color: var(--accent-interactive);
}

.cs-sdo-cell--value .cs-sdo-cell-label {
  color: rgba(110,200,160,0.85);
}

/* Responsive */
@media (max-width: 680px) {
  .cs-sdo-thead {
    display: none;
  }
  .cs-sdo-row {
    grid-template-columns: 1fr;
  }
  .cs-sdo-cell--signal::before {
    content: 'Research Signal';
    font-size: 8px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
  }
  .cs-sdo-cell--opp::before {
    content: 'UX Opportunity';
    font-size: 8px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-interactive);
    opacity: 0.60;
    display: block;
    margin-bottom: 4px;
  }
  .cs-sdo-cell--value::before {
    content: 'Operational Value';
    font-size: 8px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(110,200,160,0.60);
    display: block;
    margin-bottom: 4px;
  }
}

/* ================================================================
   BO-UX: SHARED UX PRINCIPLES (cs-uxp-*)
   Full-width editorial principle entries with abstract CSS visual cues
   ================================================================ */

.cs-uxp-list {
  margin: var(--space-2) 0 var(--space-3);
}

.cs-uxp-item {
  display: grid;
  grid-template-columns: 44px 1fr 60px;
  gap: 0 20px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-mid);
  align-items: start;
}

.cs-uxp-item:first-child {
  border-top: none;
  padding-top: 0;
}

.cs-uxp-idx {
  font-size: 22px;
  font-family: monospace;
  font-weight: 700;
  color: rgba(154,123,255,0.78);
  line-height: 1.1;
  text-align: right;
  padding-top: 2px;
}

.cs-uxp-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-uxp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.cs-uxp-principle {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.cs-uxp-implication {
  font-size: 11px;
  line-height: 1.60;
  color: var(--text-muted);
  border-left: 2px solid rgba(154,123,255,0.22);
  padding-left: 12px;
}

.cs-uxp-implication-label {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(154,123,255,0.48);
  display: block;
  margin-bottom: 5px;
}

/* ---- Visual cue box (56×56 abstract CSS illustrations) ---- */

.cs-uxp-vis {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  opacity: 1;
  transition: transform 0.30s ease;
}

.cs-uxp-item:hover .cs-uxp-vis {
  transform: scale(1.06);
}

/* 01: Visibility Before Action
   Three horizontal bars, bright top → dim bottom: metadata "unlocking" */
.cs-uxp-vis--visibility {
  background:
    linear-gradient(90deg, rgba(154,123,255,0.72), rgba(154,123,255,0.48))  0 6px  / 56px 4px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.18))  0 19px / 44px 3px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.14), rgba(154,123,255,0.06))  0 30px / 32px 3px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.06), rgba(154,123,255,0.02))  0 40px / 22px 2px  no-repeat;
}

/* 02: Traceability Across Movement
   4 nodes connected by a fading dashed path — continuous chain */
.cs-uxp-vis--traceability {
  background:
    radial-gradient(circle 4px at  4px 28px, rgba(154,123,255,0.72) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 20px 28px, rgba(154,123,255,0.46) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 36px 28px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 52px 28px, rgba(154,123,255,0.18) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30))  9px 27px / 6px 2px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 25px 27px / 6px 2px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.14), rgba(154,123,255,0.14)) 41px 27px / 6px 2px no-repeat;
}

/* 03: Reduce Manual Confirmation
   5 uneven scan bars, left → connector → 1 consolidated bar, right */
.cs-uxp-vis--consolidate {
  background:
    linear-gradient(180deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30))  4px 20px / 3px 14px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.25), rgba(154,123,255,0.25)) 10px 22px / 3px 10px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 16px 24px / 3px  8px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.20), rgba(154,123,255,0.20)) 22px 22px / 3px 10px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.17), rgba(154,123,255,0.17)) 28px 23px / 3px  9px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.16), rgba(154,123,255,0.42))  33px 27px / 10px 2px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.75), rgba(154,123,255,0.42)) 46px 12px / 5px 30px no-repeat;
}

/* 04: Metadata as Operational Infrastructure
   3-level tree: root node → 2 branches → 6 leaf nodes */
.cs-uxp-vis--metadata {
  background:
    radial-gradient(circle 4px at 28px  6px, rgba(154,123,255,0.70) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.42), rgba(154,123,255,0.42)) 27px 10px / 2px 12px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30)) 11px 22px / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.26), rgba(154,123,255,0.26)) 11px 23px / 1px 14px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.26), rgba(154,123,255,0.26)) 45px 23px / 1px 14px no-repeat,
    radial-gradient(circle 3px at 11px 40px, rgba(154,123,255,0.50) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 45px 40px, rgba(154,123,255,0.38) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.18), rgba(154,123,255,0.18))  3px 43px / 16px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.18), rgba(154,123,255,0.18)) 37px 43px / 16px 1px no-repeat,
    radial-gradient(circle 2px at  3px 47px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 11px 47px, rgba(154,123,255,0.22) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 19px 47px, rgba(154,123,255,0.16) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 37px 47px, rgba(154,123,255,0.22) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 45px 47px, rgba(154,123,255,0.16) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 53px 47px, rgba(154,123,255,0.12) 100%, transparent 100%) 0 0 no-repeat;
}

/* 05: Design for Role-Specific Clarity
   One source node → spine → 4 branching role paths with endpoints */
.cs-uxp-vis--roles {
  background:
    radial-gradient(circle 4px at 10px 28px, rgba(154,123,255,0.70) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.45), rgba(154,123,255,0.45)) 14px 27px / 14px 2px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.28), rgba(154,123,255,0.28)) 27px  9px /  2px 38px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.34), rgba(154,123,255,0.34)) 29px  9px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.28), rgba(154,123,255,0.28)) 29px 21px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 29px 33px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.16), rgba(154,123,255,0.16)) 29px 46px / 14px 1px no-repeat,
    radial-gradient(circle 3px at 46px  9px, rgba(154,123,255,0.55) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 21px, rgba(154,123,255,0.42) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 33px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 46px, rgba(154,123,255,0.20) 100%, transparent 100%) 0 0 no-repeat;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-uxp-item {
    grid-template-columns: 36px 1fr;
  }
  .cs-uxp-vis {
    display: none;
  }
  .cs-uxp-idx {
    font-size: 18px;
  }
}

/* ================================================================
   BO-UX: OUTCOMES & ORGANIZATIONAL IMPACT (cs-oi-*)
   2×2 editorial impact panel grid — no KPIs, no inflated claims
   ================================================================ */

.cs-oi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-mid);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-oi-panel {
  background: var(--bg-elevated);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  transition: background 0.18s ease;
}

/* Top accent strip */
.cs-oi-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(154,123,255,0.52) 0%, rgba(154,123,255,0.06) 100%);
}

.cs-oi-panel:hover {
  background: var(--bg-hover);
}

.cs-oi-idx {
  font-size: 9px;
  font-family: monospace;
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  line-height: 1;
}

.cs-oi-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oi-body {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
  margin: 0;
}

.cs-oi-tag {
  font-size: 8px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.45);
  border-radius: 2px;
  padding: 3px 8px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 640px) {
  .cs-oi-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   BO-UX: REFLECTION (cs-ref-*)
   Large-number editorial layout — spacious, typographic, restrained
   ================================================================ */

.cs-ref-list {
  margin: var(--space-3) 0 var(--space-2);
}

.cs-ref-item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-mid);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  align-items: start;
}

.cs-ref-item:first-child {
  border-top: none;
  padding-top: 0;
}

.cs-ref-num {
  font-size: 40px;
  font-family: monospace;
  font-weight: 700;
  color: rgba(154,123,255,0.65);
  line-height: 1;
  text-align: right;
  padding-top: 1px;
  letter-spacing: -0.03em;
}

.cs-ref-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-ref-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-ref-text {
  font-size: 12px;
  line-height: 1.70;
  color: var(--text-secondary);
  margin: 0;
}

/* Closing statement */
.cs-ref-close {
  border-top: 1px solid var(--border-mid);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.70;
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-ref-item {
    grid-template-columns: 40px 1fr;
    gap: 0 14px;
  }
  .cs-ref-num {
    font-size: 28px;
  }
}

/* ================================================================
   REDUCED MOTION
   All transitions and animations disabled when user prefers.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}


/* ================================================================
   RESPONSIVE SAFETY
   Minimal adjustments — the OS metaphor is inherently desktop-first.
   On small screens, maintain functionality.
   ================================================================ */

@media (max-width: 600px) {
  .desktop-icons {
    gap: 4px;
    padding: var(--space-1);
  }

  .desktop-icon {
    width: 72px;
  }

  .icon-graphic {
    width: 48px;
    height: 48px;
  }

  .icon-graphic svg,
  .icon-graphic img {
    width: 40px;
    height: 40px;
  }

  .start-label {
    /* Hide text on very small screens, keep icon */
    display: none;
  }
}