/**
 * V3 Overview Overlay Styles
 * Panel-style overlay within project-info-column
 */

/* Overlay container - positioned within project-info-column */
.overview-expanded-container {
    position: absolute;
    top: auto; /* Will be set dynamically via JavaScript */
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: var(--darkest);
    border: none; /* No border in collapsed state */
    z-index: 100;
    opacity: 0;
    pointer-events: none; /* Disabled when collapsed */
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 0.3s ease,
                border 0.3s ease,
                top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* START CLEAN-FIX-P5-S7A-V3-SHADOW-DEPTH
       Baseline depth shadow only. Accent inner-glow moved to .overview-content-vertical
       because clip-path on .overview-shape-default clips box-shadow on this container.
       Was: box-shadow: 0 4px 20px rgba(0,0,0,0.3);
       To revert: Restore original single-layer baseline shadow. */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* END CLEAN-FIX-P5-S7A-V3-SHADOW-DEPTH */
    margin: 0;
    padding: 0;
    /* CLEAN-FIX-PENTAGON-SHAPE-BASE-REMOVAL
       Removed: clip-path: polygon(0% 0, 100% 0, 100% 100%, 1% 100%);
       Reason: Moved to .overview-shape-default class for explicit control
       This prevents specificity conflicts between different overlay shapes */
}

/* CLEAN-FIX-PENTAGON-SHAPE-CSS-START */
/* Explicit shape classes for overlay clip-paths
   JavaScript applies the appropriate class based on overlay type */

/* Default shape: Subtle angular clip-path on bottom-left corner
   Used by: Large overlays (project2-6), Medium overlays (project1 case study) */
.overview-shape-default {
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 1% 100%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 1% 100%);
}

/* Pentagon shape: Top-left indent with bottom-left corner
   Used by: Small overlays (project1 & project6 overview-trigger) */
.overview-shape-pentagon {
    clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%, 0% 80%);
    -webkit-clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%, 0% 80%);
}
/* CLEAN-FIX-PENTAGON-SHAPE-CSS-END */

.overview-expanded-container.active {
    opacity: 1;
    border: 1px solid var(--dark);
    pointer-events: auto; /* Enable interactions when active */
}

/* CLEAN-FIX-SELECTIVE-CLIPPATH-START */
/* Remove parent clip-path for overlays that define their own clip-path:
   - Design Process overlay has its own right-side clip-path
   - Small overlays (no-scroll-needed) have their own pentagon clip-path
   Both need parent clip-path removed to prevent compound clipping
   Uses :has() pseudo-class for selective targeting (95%+ browser support)
   TO REVERT: Change back to .project-column.active:has(.process-overlay-dark) only

   [CLEAN-FIX-P5-S7C2-COLUMN-TRANSITION-SMOOTHING, 2026-04-15]
   Updated `clip-path: none !important` → identity polygon to fix P1/P6
   jerky expand/collapse. Browsers cannot interpolate polygon → none
   transitions; they snap to the final value instead of animating. Identity
   polygon `polygon(0 0, 100% 0, 100% 100%, 0 100%)` is functionally
   equivalent to no clipping (the polygon is the full rectangle) but is a
   valid polygon value that transitions smoothly with the collapsed
   trapezoid. See project-column-styles.css §
   CLEAN-FIX-P5-S7C2-COLUMN-TRANSITION-SMOOTHING for full rationale. */
.project-column.active:has(.process-overlay-dark),
.project-column.active:has(.no-scroll-needed) {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; /* Justified: Override parent with high specificity */
}
/* CLEAN-FIX-SELECTIVE-CLIPPATH-END */

/* Header */
.overview-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* START CLEAN-FIX-P5-S5C-PADDING */
    /* 6n-compliant: 18/24/18/30 = 3×6 / 4×6 / 3×6 / 5×6. Left 30px preserved for clip-path angle compensation.
       Was: 15px 25px 15px 30px (non-6n on 15 and 25)
       To revert: Change back to 15px 25px 15px 30px */
    padding: 18px 24px 18px 30px;
    /* END CLEAN-FIX-P5-S5C-PADDING */
    border-bottom: 1px solid var(--dark);
    background-color: var(--darkest);
    height: 80px; /* Increased for two-line layout */
    gap: 20px;
    position: relative;
}

.overview-expanded-title {
    font-size: var(--font-size-standard);
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-primary);
}

/* Header title container - groups title and reading time */
.overview-header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* Reading time indicator */
.overview-reading-time {
    font-size: var(--font-size-small);
    font-weight: 400; /* Lighter weight for secondary info */
    color: var(--light); /* Light color as requested */
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Controls container */
.overview-controls {
    display: flex;
    gap: 0; /* Buttons connect like mockups-header */
    align-self: center; /* Center vertically in header */
}

/* Control buttons - dark theme version of mockups-header styling */
.control-btn {
    height: 30px;
    padding: 0 15px;
    background-color: var(--darkest);
    border: 0.5px solid var(--dark);
    border-left: 2px solid var(--white);
    color: var(--white);
    font-size: var(--font-size-small);
    font-weight: 600;
    font-family: var(--font-primary);
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* First button has left border */
/* First button already has left border from base style */

.control-btn:hover:not(.active) {
    background-color: var(--dark);
    color: var(--white);
}

.control-btn.active {
    background-color: var(--lightest);
    color: var(--darkest);
}

/* Speed buttons specific */
.speed-btn {
    min-width: 50px;
}

/* Pause button specific - scoped to overview overlay only */
.overview-expanded-container .pause-btn {
    min-width: 40px;
    font-size: var(--font-size-standard);
    margin-left: var(--spacing-12); /* 12px gap using 6n system */
    border: 0.5px solid var(--dark);
    border-left: 2px solid var(--white);
}

.overview-expanded-container .pause-btn::before {
    content: '||';
    letter-spacing: -2px;
}

.overview-expanded-container .pause-btn.paused::before {
    content: '▶';
    letter-spacing: 0;
}

/* START CLEAN-FIX-VI-B2-V3OO-HEADER-CONTROL-LAYOUT (2026-05-07)
   ============================================================================
   V3OO overlay-header control button layout cleanup at MD-larger / LG / XL.
   Picks up audit work from V.6 surfaced item "V3OO control button grouping +
   per-overlay visibility scope" (PROJECT_PHASE_TRACKER.md line 2581 V.6 list).

   Two interventions:
   (1) Explicit `.restart-btn` discipline matching sibling pause-btn pattern
       (margin-left + min-width). Restart was added at IV.5 cleanup commit
       `1cd43d9` with class `control-btn restart-btn` (V3OverviewOverlay.js:442)
       but NO companion CSS rule — restart inherited `.control-btn` baseline only.
       This rule adds the 12px margin-left gap (matching pause-btn) and 36px
       min-width (matching uc-type-toggle) for visual rhythm consistency.

   (2) MD-larger (768-991) density compression: tighter button rhythm at the
       smallest larger-impl breakpoint where header competes most aggressively
       with overlay title + min-read text. Reduces control-btn padding from
       0 15px to 0 12px (saves ~30px across 5 buttons), and reduces non-
       connecting margin-left from 12px to 6px on pause/restart/Aa (saves ~18px).
       Together: ~48px reclaimed for title + min-read at MD-larger 820-991.

   Honors CLEAN-FIX-PERMANENT-NO-SCROLL invariant (V3OverviewOverlay.js:237-241):
   does NOT touch the no-scroll-needed visibility logic at lines 668/686.
   Per-button hide selectors (`.no-scroll-needed .overview-controls .pause-btn`
   + `.process-overlay-dark .overview-controls .pause-btn`) preserved as-is.

   ZERO new !important. Specificity-based wins:
     - `.overview-expanded-container .restart-btn` = (0,2,0) > base .control-btn (0,1,0)
     - MD-larger @media compression rules don't conflict with !important rules
       (none at this scope intersection per L8 grep verification).

   To revert: search CLEAN-FIX-VI-B2-V3OO-HEADER-CONTROL-LAYOUT, delete between
   START/END markers. Restart button falls back to .control-btn baseline (works
   but loses margin-left + min-width discipline — visible asymmetry vs siblings).
   ============================================================================ */

/* (1) Restart button — matches pause-btn margin-left + uc-type-toggle min-width pattern */
.overview-expanded-container .restart-btn {
    min-width: 36px;
    margin-left: var(--spacing-12); /* 12px gap using 6n system — matches pause-btn pattern */
    /* Inherits .control-btn base (height 30px, padding 0 15px, dark theme,
       border 0.5px var(--dark), border-left 2px var(--white) connect-stripe).
       Restart glyph ↻ centered via flex from .control-btn. */
}

/* (2) MD-larger density compression — covers 768-991 only.
       LG (992-1199) and XL (1200+) keep canonical 15px padding + 12px margins. */
@media (min-width: 768px) and (max-width: 991px) {
    .overview-expanded-container .control-btn {
        padding: 0 12px; /* was 0 15px — saves 6px per button × 5 buttons = 30px */
    }
    .overview-expanded-container .pause-btn,
    .overview-expanded-container .restart-btn,
    .overview-expanded-container .uc-type-toggle {
        margin-left: var(--spacing-6); /* was 12px — saves 6px × 3 gaps = 18px */
    }
}
/* END CLEAN-FIX-VI-B2-V3OO-HEADER-CONTROL-LAYOUT */


/* START CLEAN-FIX-P5-S6A-DESKTOP-TYPE-TOGGLE */
/* Aa type toggle in desktop overview header — separate from mobile f.sec implementation
   To revert: Delete between START/END markers */

/* Toggle button styling — matches control-btn pattern with left-border separator */
.overview-expanded-container .uc-type-toggle {
    min-width: 36px;
    height: 30px;
    margin-left: var(--spacing-12);
    border: 0.5px solid var(--dark);
    border-left: 2px solid var(--white);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Active state — inverted colors when large type is on */
.overview-expanded-container .uc-type-toggle.type-active {
    background-color: var(--lightest);
    color: var(--darkest);
}

/* Large type effect on desktop overview content */
/* CLEAN-FIX-P5-S6.5c-IV5-AA-LARGE-TYPE-P-FONT-SIZE-BUG (modify-in-place 2026-05-01)
   Bug surfaced via Gate Zero verification (criterion #6 fail): Aa toggle visible on P1/P6
   default overlays (per Fix 2 `e486ec9`) but clicks produced NO visible paragraph change.
   Root cause: `.uc-type-large p` was set to `--font-size-standard` — IDENTICAL to the base
   `.overview-content-vertical p` rule at line 260. Net effect of toggling: zero visible diff.
   The handler at V3OverviewOverlay.js:317-323 toggles the class correctly; the CSS rule's
   target token was a copy-paste error from when the rule was authored.
   Fix: bump from `--font-size-standard` (0.9rem / 14.4px) to `--font-size-large`
   (1.1rem / 17.6px) — ~22% larger, visibly different, parity with the h3 large rule below.
   This is a modify-in-place edit inside the existing CLEAN-FIX-P5-S6A-DESKTOP-TYPE-TOGGLE
   block (Phase III pattern: refining a value inside an existing fenced block via inline
   annotation rather than adding an additive override). Net !important delta: zero.
   To revert: change `var(--font-size-large)` back to `var(--font-size-standard)`. */
.overview-content-vertical.uc-type-large p {
    font-size: var(--font-size-large);
}

.overview-content-vertical.uc-type-large h3 {
    font-size: var(--font-size-large);
}
/* END CLEAN-FIX-P5-S6A-DESKTOP-TYPE-TOGGLE */

/* Content area */
.overview-expanded-content {
    padding: var(--spacing-24) var(--spacing-30) var(--spacing-24) var(--spacing-30); /* 24px 30px using 6n system */
    height: calc(100% - 80px); /* Updated for new header height */
    overflow: hidden;
    position: relative;
    color: var(--white);
    /* START CLEAN-FIX-P5-S7A-V3-CONTENT-GLOW
       Option 5: Multi-layer L2 — top accent line at header/content edge + subtle ambient glow.
       Applied on .overview-expanded-content (not container) because container's clip-path clips box-shadow.
       Top accent (2px) sits at the boundary between header and content area — per-project accent color.
       Ambient glow (42px inset) uses --light for neutral depth with visible contrast against --darkest background.
       Note: --cool-rgb (48, 51, 51) was too close to --darkest (#121212) for visible contrast.
       --accent-rgb cascades from #projectN root (project-column-styles.css CLEAN-FIX-P5-S7A-V3-ACCENT-RGB-TOKEN).
       To revert: Delete this box-shadow declaration between START/END markers. */
    box-shadow: inset 0 2px 0 rgba(var(--accent-rgb, 121, 126, 128), 0.25),
                inset 0 0 42px rgba(var(--light-rgb, 209, 209, 209), 0.12);
    /* END CLEAN-FIX-P5-S7A-V3-CONTENT-GLOW */
}

/* Overview content text styles */
.overview-content-vertical {
    color: var(--white);
    font-family: var(--font-secondary);
    /* CLEAN-FIX-P5-S7A-V3-INNER-GLOW: Removed — glow moved to .overview-expanded-content (L2)
       via CLEAN-FIX-P5-S7A-V3-CONTENT-GLOW. L4 no longer needs its own shadow. */
}

.overview-content-vertical p {
    color: var(--white);
    font-size: var(--font-size-standard);
    line-height: 1.6;
    margin-bottom: var(--spacing-18); /* 18px = 3×6 */
    opacity: 0.9;
}

.overview-content-vertical strong {
    color: var(--lightest);
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
    display: inline-block;
}

/* Overview section titles - matching timeline markers */
.overview-content-vertical h3.overview-section-title,
.overview-content-vertical h3 {
    color: var(--lightest);
    font-family: var(--font-primary);
    font-size: var(--font-size-standard);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: var(--spacing-30) 0 var(--spacing-24) 0; /* 30px 0 24px 0 using 6n system */
    padding-left: var(--spacing-24); /* 24px = 4×6 */
    position: relative;
}

/* Geometric accent for section titles */
.overview-content-vertical h3.overview-section-title::before,
.overview-content-vertical h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--white);
    border: 2px solid var(--dark);
}

/* Project-specific accent colors for section titles */
#project2 .overview-content-vertical h3.overview-section-title::before,
#project2 .overview-content-vertical h3::before {
    background-color: var(--blue);
}

#project2 .overview-content-vertical h3.overview-section-title,
#project2 .overview-content-vertical h3 {
    /* Consistent text-decoration underline approach */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#project3 .overview-content-vertical h3.overview-section-title::before,
#project3 .overview-content-vertical h3::before {
    background-color: var(--pink);
}

#project3 .overview-content-vertical h3.overview-section-title,
#project3 .overview-content-vertical h3 {
    /* Consistent text-decoration underline approach */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#project4 .overview-content-vertical h3.overview-section-title::before,
#project4 .overview-content-vertical h3::before {
    background-color: var(--purple);
}

#project4 .overview-content-vertical h3.overview-section-title,
#project4 .overview-content-vertical h3 {
    /* Consistent text-decoration underline approach */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--purple);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#project5 .overview-content-vertical h3.overview-section-title::before,
#project5 .overview-content-vertical h3::before {
    background-color: var(--darkblue);
}

#project5 .overview-content-vertical h3.overview-section-title,
#project5 .overview-content-vertical h3 {
    /* Consistent text-decoration underline approach */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--darkblue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Project 1 and 6 specific h3 styling */
#project1 .overview-content-vertical h3 {
    /* Consistent text-decoration underline approach */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--warm);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#project6 .overview-content-vertical h3 {
    /* Option 6: Bottom border with text-decoration */
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Static content (projects 1 & 6) */
.overview-content-vertical.static {
    padding-right: var(--spacing-24); /* 24px = 4×6 */
    max-height: 100%;
    overflow-y: auto;
}

/* Vertical marquee container */
.overview-marquee-vertical {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Marquee track for vertical scrolling */
.overview-marquee-track-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Ensure no CSS animation - JavaScript controls scrolling */
    animation: none !important;
}

/* Visual separator between duplicated content */
.overview-content-vertical + .overview-content-vertical::before {
    content: '';
    display: block;
    height: 40px;
    margin: 20px 0;
    border-top: 1px solid var(--dark);
    opacity: 0.3;
}

/* Marquee animation */
@keyframes overview-marquee-scroll-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* Blur effect for background content */
.project-info-column.overview-active > *:not(.overview-expanded-container) {
    opacity: 0.3;
    filter: blur(1px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Project-specific text colors (all white on dark background) */
#project1 .overview-content-vertical,
#project2 .overview-content-vertical,
#project3 .overview-content-vertical,
#project4 .overview-content-vertical,
#project5 .overview-content-vertical,
#project6 .overview-content-vertical {
    color: var(--white);
}

#project1 .overview-content-vertical p,
#project2 .overview-content-vertical p,
#project3 .overview-content-vertical p,
#project4 .overview-content-vertical p,
#project5 .overview-content-vertical p,
#project6 .overview-content-vertical p {
    color: var(--white);
}

/* Responsive adjustments */
/* START CLEAN-FIX-PHASE8-BREAKPOINT-OVERLAY */
/* SM Breakpoint - Large Phones/Small Tablets */
/* START CLEAN-FIX-8A-B2-PROJCOL-PORT — Non-6n fixes: 10→12, 15→18, 50→48
   Ported from iframe-project-columns-v8-production.html
   6n compliance: 12px (2×6n), 18px (3×6n), 48px (8×6n)
   To revert: Restore 10px, 15px, 50px values */
@media (max-width: 767px) {
    .overview-expanded-header {
        padding: 12px 18px;  /* 2×6n 3×6n (was 10px 15px) */
        height: 48px;  /* 8×6n (was 50px) */
    }

    .overview-expanded-content {
        padding: 18px;  /* 3×6n (was 15px) */
        height: calc(100% - 48px);  /* Match new header height (was 50px) */
    }

    .overview-expanded-title {
        font-size: var(--font-size-small);
    }
}
/* END CLEAN-FIX-8A-B2-PROJCOL-PORT */
/* END CLEAN-FIX-PHASE8-BREAKPOINT-OVERLAY */

/* START CLEAN-FIX-8A-B2-PROJCOL-PORT — B8 Overview XS responsive padding
   Ported from iframe-project-columns-v8-production.html (CLEAN-FIX-V8-G8-OVERVIEW-XS-RESPONSIVE)
   Reduces overview padding on XS screens (<600px) for better content density
   NOTE: Targets north star DOM classes — will activate when base f.e code is ported
   To revert: Delete between START/END CLEAN-FIX-8A-B2-PROJCOL-PORT markers */

/* B8: Overview XS responsive — reduced padding for content density */
@media (max-width: 599px) {
    .tab-content[data-tab="overview"].active { padding: var(--spacing-12) 0; }  /* Top/bottom only on XS */
    /* Non-scrolling frame for XS screens */
    .responsive-overview-container {
        padding: 0 var(--spacing-18);
        border-top: var(--spacing-18) solid var(--darkest);
        border-bottom: var(--spacing-18) solid var(--darkest);
    }
    /* Scroll indicator aligned with XS frame */
    #overviewContent .responsive-overview-scroll-indicator {
        top: var(--spacing-18);    /* XS screens use 18px frame */
        bottom: var(--spacing-18);
    }
}

/* END CLEAN-FIX-8A-B2-PROJCOL-PORT — B8 Overview XS responsive */

/* START CLEAN-FIX-8A-B2-PROJCOL-PORT — B9 P6 centering + short screen title hide
   Ported from iframe-project-columns-v8-production.html (G8G9R8-FIX2)
   P6 overview: vertically center short content + hide title heading on short screens
   Breakpoint: 678px = 113×6n, covers standard 667px phone viewports
   NOTE: Targets north star DOM classes — will activate when base f.e code is ported
   To revert: Delete between START/END CLEAN-FIX-8A-B2-PROJCOL-PORT markers */

/* B9: P6 overview — top-aligned for consistent position across type toggle states.
   Originally justify-content:center, changed to flex-start so small and large type
   share the same vertical starting point. Bounce animation on large type reveals overflow below.
   To revert: Change flex-start back to center. */
.overview-content.responsive-overview-container[data-active-project="6"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* B9: Hide title heading on short screens (≤678px = 113×6n) */
@media (max-height: 678px) {
    .overview-content.responsive-overview-container[data-active-project="6"] h3:first-child {
        display: none;
    }
}

/* END CLEAN-FIX-8A-B2-PROJCOL-PORT — B9 P6 centering */

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .overview-expanded-container {
        transition: none;
    }
    
    .overview-marquee-track-vertical {
        animation: none !important;
    }
    
    .project-info-column.overview-active > *:not(.overview-expanded-container) {
        filter: none;
    }
}

/* START CLEAN-FIX-P5-S6B-DESKTOP-V5-SCROLL */
/* V5 Geometric Scroll Indicator — bracket caps + accent-colored thumb borders
   Matches mobile V5 design from v3-project-columns-responsive.css lines 2268-2318
   To revert: Replace this section with the original 4 rules (indicator, track, thumb, thumb::before) */

/* Indicator container — inset from edges for breathing room */
.overview-scroll-indicator {
    position: absolute;
    right: var(--spacing-6);
    top: var(--spacing-18);
    bottom: var(--spacing-18);
    width: 4px;
    z-index: 10;
    pointer-events: none;
}

/* Track with transparent tinted background */
.overview-scroll-track {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: color-mix(in srgb, var(--dark) 20%, transparent);
    opacity: 1;
}

/* START CLEAN-FIX-P5-SESSION7-V-S9-PER-PROJECT-ACCENT
   Closes V-S9 aha-moment surfaced by @ui-ninja review 2026-05-11. Previously the
   bracket caps + thumb borders were hardcoded `var(--warm)` (P1's accent) — read as
   intentional warm-everywhere because the original implementation only fired on P1
   default overlay. With V-S9 polish now landing across P1-P6 (per Issue #1 fix
   `fe6cb33` expanding to .process-overlay-dark variant), the indicator should
   inherit the active project's accent for cross-project visual coherence with the
   established #projectN { --accent-rgb: ... } cascade at project-column-styles.css
   :2835-2840 (P1 warm / P2 blue / P3 pink / P4 purple / P5 darkblue / P6 cyan,
   matching the canonical projectsData.js:282 color: field). Pattern: rgb(var(--accent-rgb,
   var(--warm-rgb))) — defensive --warm-rgb fallback ensures graceful degradation if
   --accent-rgb isn't set on the closest ancestor (e.g., during init race or DOM
   detachment). ZERO new !important.
   To revert: search for CLEAN-FIX-P5-SESSION7-V-S9-PER-PROJECT-ACCENT and delete
   between START and END (restores 8 hardcoded var(--warm) references). */

/* Top bracket cap ⊓ */
.overview-scroll-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-top: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    border-left: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    border-right: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
}

/* Bottom bracket cap ⊔ */
.overview-scroll-track::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-bottom: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    border-left: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    border-right: 1px solid rgb(var(--accent-rgb, var(--warm-rgb)));
}

/* Thumb — accent-colored borders, GPU-accelerated positioning */
.overview-scroll-thumb {
    position: absolute;
    width: 4px;
    min-height: 24px;
    background-color: var(--lightest);
    border-left: none;
    border-right: none;
    border-top: 2px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    border-bottom: 2px solid rgb(var(--accent-rgb, var(--warm-rgb)));
    transform: translateY(0);
    transition: transform 0.1s linear;
    will-change: transform;
}
/* END CLEAN-FIX-P5-SESSION7-V-S9-PER-PROJECT-ACCENT */

/* Nested square — V5 geometric center mark */
.overview-scroll-thumb::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--darkest);
}
/* END CLEAN-FIX-P5-S6B-DESKTOP-V5-SCROLL */

/* START CLEAN-FIX-P5-V-S9-SCROLL-INDICATOR-POLISH (2026-05-11)
   Three coordinated CSS additions backing V3OverviewOverlay.js V-S9 sub-fences a + c.
   Sub-fence (b) is JS-only (inline element.style.height; no CSS rule needed).
   Triggered by `container.dataset.wrapEvent = 'true'` toggle in JS at the wrap-reset
   moment (V3OverviewOverlay.js startManualScroll() wrap-trigger ~line 1768); cleanup
   setTimeout(800ms) removes the attribute after both animations complete (0.4s thumb
   + 0.6s pulse). Honors CLEAN-FIX-PERMANENT-NO-SCROLL: JS toggle skips on
   `.no-scroll-needed` containers, so neither rule fires on P1 default / P6 default.
   To revert: delete entire START/END block. */

/* V-S9 sub-fence-a: smooth thumb wrap-reset bridge.
   Replaces the prior baseline transition (transform 0.1s linear at line 683) during
   the wrap-event window. Combined with progress overshoot to 1.2 in updateScrollIndicator
   math, produces a smooth fall-past-bottom-then-return-to-top motion (~0.4s ease-out)
   instead of the prior instant snap. Specificity (0,2,0) wins over baseline (0,1,0). */
.overview-expanded-container[data-wrap-event="true"] .overview-scroll-thumb {
    transition: transform 0.4s ease-out;
}

/* V-S9 sub-fence-c: visual feedback pulse on wrap-reset.
   Subtle brightness flash on the track at the wrap moment so users see content
   has looped (not stalled). Uses var(--lightest) tinting against the baseline
   var(--dark) 20% transparent — visible but minimal per geometric-brutalist character. */
@keyframes wrap-pulse {
    0%   { background-color: color-mix(in srgb, var(--dark) 20%, transparent); }
    30%  { background-color: color-mix(in srgb, var(--lightest) 35%, transparent); }
    100% { background-color: color-mix(in srgb, var(--dark) 20%, transparent); }
}

.overview-expanded-container[data-wrap-event="true"] .overview-scroll-track {
    animation: wrap-pulse 0.6s ease-out;
}
/* END CLEAN-FIX-P5-V-S9-SCROLL-INDICATOR-POLISH */

/* START CLEAN-FIX-P5-SESSION7-V-S9-REDUCED-MOTION
   Closes V-S9 reduced-motion gap surfaced by @ui-ninja review 2026-05-11 (ui-tactics
   ⚠️ Consider). The V-S9 sub-fence (a) wrap-reset transition (`transform 0.4s ease-out`)
   and sub-fence (c) wrap-pulse animation (`0.6s ease-out`) above are motion that should
   respect user a11y preferences. Pattern mirrors V3 site convention (per Session-7
   Step 3 v3-navigation-hub.css addition + adjacent component reduced-motion gates).
   For users with prefers-reduced-motion enabled, wrap-event still toggles
   dataset.wrapEvent='true' on the container (state-tracking preserved), but the
   visual transition+animation snap to end-state instantly. Honors CLEAN-FIX-PERMANENT-
   NO-SCROLL invariant: the runtime guard at V3OverviewOverlay.js:1898 + CSS:749
   already prevents V-S9 polish on .no-scroll-needed overlays, so this @media block
   only affects overlays where V-S9 actually fires.
   To revert: search for CLEAN-FIX-P5-SESSION7-V-S9-REDUCED-MOTION and delete between
   START and END. */
@media (prefers-reduced-motion: reduce) {
    .overview-expanded-container[data-wrap-event="true"] .overview-scroll-thumb {
        transition: none !important;
    }
    .overview-expanded-container[data-wrap-event="true"] .overview-scroll-track {
        animation: none !important;
    }
}
/* END CLEAN-FIX-P5-SESSION7-V-S9-REDUCED-MOTION */

/* Hide scroll indicator for no-scroll overlays with higher specificity.
   CLEAN-FIX-P5-V-S9-A1.4.A-FIX-P1-PROCESS-INDICATOR-VISIBILITY 2026-05-11 —
   added `:not(.process-overlay-dark)` exception on the #project1 hide-selector
   below so P1 Design Process variant (which DOES scroll, ~800-word content)
   renders the V-S9 scroll indicator polish from `2a8aaec`. Issue #1 surfaced
   during V-S9 A.1.4.A user verification: the prior catch-all
   `#project1 .overview-expanded-container .overview-scroll-indicator` was too
   broad (authored when P1 only had Designer Overview); P1 Design Process
   was added later as `.process-overlay-dark` variant but the hide-selector
   wasn't scoped to exclude it. P6 selector unchanged (no .process-overlay-dark
   variant on P6). Modify-in-place pattern (per Phase III R4-V6-VERTICAL-COMPRESS
   `6ab06f2` precedent). L7 honor: orthogonal to CLEAN-FIX-PERMANENT-NO-SCROLL
   (line 219+718) which protects the `.no-scroll-needed` system at lines 701-706
   (lines below). To revert: remove `:not(.process-overlay-dark)` substring from
   the #project1 selector line below. */
.overview-expanded-container.no-scroll-needed .overview-scroll-indicator,
.overview-expanded-container.overview-short .overview-scroll-indicator,
#project1 .overview-expanded-container:not(.process-overlay-dark) .overview-scroll-indicator,
#project6 .overview-expanded-container .overview-scroll-indicator {
    display: none;
}

/* START CLEAN-FIX-P5-S6.5c-IV5-NO-SCROLL-OVERLAY-AA-EXPOSURE
   Issue: P1 default + P6 default overlays were registered with `.no-scroll-needed`,
   which previously hid the entire .overview-controls container — burying the Aa
   type-size toggle that users need to enlarge text for accessibility.
   Fix: keep the controls container rendered on no-scroll-needed overlays;
   hide ONLY the irrelevant speed/pause controls + reading-time bar (no scroll →
   no rate to control → no remaining duration to display). Aa toggle remains
   visible because it is NOT in the per-button hide selectors below.
   This approach (per code-review-analyst review 2026-04-30) avoids the impossible
   "child unsetting parent display:none" trap of the prior 0.5-B Fix 2 spec.
   Honors `CLEAN-FIX-PERMANENT-NO-SCROLL` invariant at V3OverviewOverlay.js:237-241
   — the .no-scroll-needed class itself is NOT removed dynamically; only Aa is exposed.
   To revert: search for CLEAN-FIX-P5-S6.5c-IV5-NO-SCROLL-OVERLAY-AA-EXPOSURE and delete
   everything between START and END markers; restore the original
   `.no-scroll-needed .overview-controls, .no-scroll-needed .overview-reading-time { display: none; }`
   single rule + the parallel `display: flex` override for process-overlay-dark. */
.no-scroll-needed .overview-reading-time {
    display: none;
}
.no-scroll-needed .overview-controls .speed-btn,
.no-scroll-needed .overview-controls .pause-btn {
    display: none;
}
/* END CLEAN-FIX-P5-S6.5c-IV5-NO-SCROLL-OVERLAY-AA-EXPOSURE */

/* Override for process overlay - show reading-time despite being on project1 */
/* Note: process-overlay-dark does NOT have .no-scroll-needed; this override is a
   defensive belt-and-suspenders to ensure controls + reading-time remain visible
   if both classes ever co-apply. Per IV.5 Fix 2 (2026-04-30), the .overview-controls
   parent is no longer hidden under .no-scroll-needed, so the override on .overview-controls
   is now redundant for the common case but preserved for defensive composition. */
.overview-expanded-container.process-overlay-dark .overview-controls,
.overview-expanded-container.process-overlay-dark .overview-reading-time {
    display: flex; /* Process overlay needs all controls even though it's on project1 */
}
/* Process-overlay-dark is a scrolling overlay — re-expose speed/pause buttons that
   would otherwise be hidden by the per-button selectors above (when both classes co-apply): */
.overview-expanded-container.process-overlay-dark .overview-controls .speed-btn,
.overview-expanded-container.process-overlay-dark .overview-controls .pause-btn {
    display: flex;
}

/* START CLEAN-FIX-P5-V-S10v3-P1-PROCESS-FULL-HEADER
   Restores standard 80px column-layout header for #project1's scrollable Design Process
   overlay (process-overlay-dark variant). Without this exception, the broader #project1
   short-overlay rule cluster at lines 748-778 bleeds onto the process-overlay-dark
   variant, collapsing it to 50px row-layout intended only for short overlays (P1 default
   no-scroll + P6 default no-scroll).

   Diagnosed 2026-05-05: P1 process inherits incorrect 50px row-layout because the
   #project1 .overview-expanded-container selectors at lines 749, 755, 763, 775
   (specificity 1,1,1) match BOTH P1 default and P1 process. Test harness
   `test-aha-v6-vs10-overview-header-variations.html` confirmed that P1 process renders
   cleanly at 80px column-layout when the broader #project1 cluster doesn't match (test
   container has no id="project1" parent).

   Specificity (1,2,1) wins over the (1,1,1) #project1 cluster because of the additional
   .process-overlay-dark class qualifier. ZERO new !important. P1 default no-scroll +
   P6 default no-scroll are unchanged (those overlays don't have .process-overlay-dark).

   FUTURE MAINTAINER NOTE: this exception block carves process-overlay-dark out of the
   #project1 cluster at lines 748-778. If a third P1 overlay variant ever lands, consider
   tightening that cluster's selectors to `:not(.process-overlay-dark):not(.future-variant)`
   or — better — replacing the bare #project1 selectors with `.overview-expanded-container.overview-short`
   (existing class-based pattern at line 748) so V3OO.js controls which overlays get
   short-layout treatment via class application, not blanket #project1 ID match.

   3-agent pre-author review 2026-05-05 (Plan + code-review-analyst + ui-ninja) all green:
   • Plan: strategy (c) additive exception block, fence-placement refinement (d) at line 689
   • code-review-analyst: L7 invariant respected (process never gets .no-scroll-needed via
     V3OO.js:322-323 guard); R5 width independent; V.5 phase-click targets default overlay
     not process; M7+V-S9 self-correcting via live getBoundingClientRect; zero literal
     header-height assumptions in V3OO.js
   • ui-ninja: green-light; aesthetic improvement; consistent with V3 brutalist register
     (proper P1 two-tier treatment is systematic, not inconsistent)

   To revert: search for CLEAN-FIX-P5-V-S10v3-P1-PROCESS-FULL-HEADER and delete everything
   between START and END markers (including this comment block). */
#project1 .overview-expanded-container.process-overlay-dark .overview-expanded-header {
    height: 80px;
}
#project1 .overview-expanded-container.process-overlay-dark .overview-header-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
#project1 .overview-expanded-container.process-overlay-dark .overview-expanded-content {
    height: calc(100% - 80px);
}
#project1 .overview-expanded-container.process-overlay-dark .overview-reading-time {
    font-size: var(--font-size-small);
}
/* END CLEAN-FIX-P5-V-S10v3-P1-PROCESS-FULL-HEADER */

/* CLEAN-FIX-P5-V-S7-P6-OVERLAY-HEIGHT-VISUAL-WEIGHT — BORDER-TOP SUB-SPEC RETIRED 2026-05-07
   Original Chunk 7 (commit 0e7e332) shipped a cyan 6px border-top override at this location:
       #project6 .overview-expanded-container.active { border-top: 6px solid var(--cyan); }
   Production VI.1 sweep at MD-larger / LG / XL viewports surfaced that the cyan stripe read
   as visual noise / off-design-system rather than the brutalist "weight signal" originally
   intended. User direction 2026-05-07: revert border-top override; let base R5 `.active`
   border (line 61 — 1px solid var(--dark)) fire alone for P6 (matching P1-P5 baseline).
   The +20% height bump (420 → 504) at V3OverviewOverlay.js:1272+1307 ternary REMAINS as the
   load-bearing P6 visual-weight signal — the height is the "different/heavier" cue, not
   the border. To restore the cyan stripe override: re-add the 3-line block above this
   comment with name CLEAN-FIX-P5-V-S7-P6-BORDER-TOP-CYAN. */

/* No-scroll overlay class applied by JavaScript based on content */
/* Height is set by JavaScript inline styles, so min-height rules won't work */

/* CLEAN-FIX-PENTAGON-SHAPE-OLD-RULE-REMOVED
   Removed old pentagon rule (was at lines 488-502):
   .overview-expanded-container.no-scroll-needed:not(.process-overlay-dark)
   Reason: Replaced with explicit .overview-shape-pentagon class (see lines 34-51)
   The class-based approach avoids specificity conflicts and timing issues */

.no-scroll-needed .overview-expanded-header {
    height: 60px; /* Reduced height when only title shown */
}

.no-scroll-needed .overview-header-info {
    justify-content: center;
    align-items: center;
}

/* START CLEAN-FIX-FINAL-3 - Vertical centering fix for project1/6 overlays */
/* To revert: Replace with original values: height: auto; min-height: calc(100% - 60px); align-items: flex-start; padding-top: 40px; */
.no-scroll-needed .overview-expanded-content {
    height: calc(100% - 60px); /* Full height minus header (was: auto) */
    display: flex;
    align-items: center; /* Center vertically (was: flex-start) */
    justify-content: center;
    padding: 0; /* Symmetric spacing (was: padding-top: 40px) */
}
/* END CLEAN-FIX-FINAL-3 */

.no-scroll-needed .overview-content {
    max-width: 100%;
    padding: 0;
}

/* Hide scrolling elements for no-scroll overlays */
.no-scroll-needed .overview-marquee-track-vertical {
    animation: none;
    transform: none;
}

.no-scroll-needed .overview-marquee-vertical {
    height: auto;
    overflow: visible;
}

.no-scroll-needed .overview-content-vertical {
    padding: 0 40px;
    max-height: none;
    overflow: visible;
}

/* Highlight styling for emphasis */
.overview-content .highlight {
    font-weight: 700;
    color: var(--white);
}

/* Short overlay variant for project1 and project6 with higher specificity */
.overview-expanded-container.overview-short .overview-expanded-header,
#project1 .overview-expanded-container .overview-expanded-header,
#project6 .overview-expanded-container .overview-expanded-header {
    height: 50px; /* Reduced height for short overlays */
}

.overview-expanded-container.overview-short .overview-header-info,
#project1 .overview-expanded-container .overview-header-info,
#project6 .overview-expanded-container .overview-header-info {
    flex-direction: row; /* Side by side for short overlays */
    align-items: center;
    gap: 10px;
}

.overview-expanded-container.overview-short .overview-expanded-content,
#project1 .overview-expanded-container .overview-expanded-content,
#project6 .overview-expanded-container .overview-expanded-content {
    height: calc(100% - 50px); /* Adjust for smaller header */
    /* START CLEAN-FIX-P5-S5C-PADDING */
    /* 6n-compliant: 18/24/18/30 = 3×6 / 4×6 / 3×6 / 5×6. Left 30px preserved for visual alignment with header.
       Was: 15px 25px 15px 30px (non-6n)
       To revert: Change back to 15px 25px 15px 30px */
    padding: 18px 24px 18px 30px;
    /* END CLEAN-FIX-P5-S5C-PADDING */
}

.overview-expanded-container.overview-short .overview-reading-time,
#project1 .overview-expanded-container .overview-reading-time,
#project6 .overview-expanded-container .overview-reading-time {
    font-size: var(--font-size-specialized); /* Smaller font for compact layout */
}

/* Scrollbar styling for static content */
.overview-content-vertical.static::-webkit-scrollbar {
    width: 6px;
}

.overview-content-vertical.static::-webkit-scrollbar-track {
    background: var(--dark);
}

.overview-content-vertical.static::-webkit-scrollbar-thumb {
    background: var(--lightest);
    border-radius: 3px;
}

.overview-content-vertical.static::-webkit-scrollbar-thumb:hover {
    background: var(--white);
}

/* START CLEAN-FIX-PROCESS-OVERLAY-STYLES */
/* CLEAN-FIX-PROCESS-DARK-BG-FIX-START */
/* Process Overlay Specific Styling - Uses class selector instead of data attribute
   Fixed: Was [data-project="01"] but JavaScript sets data-project-id="project1"
   Solution: Use overlayClass directly on container for reliable targeting
   TO REVERT: Delete between START/END markers and restore attribute selector */
.overview-expanded-container.process-overlay-dark {
    background-color: var(--dark); /* Dark background per user specification */
}

.overview-expanded-container.process-overlay-dark .overview-expanded-header {
    background-color: var(--dark); /* Match container background */
    border-bottom: 1px solid var(--lightest);
}
/* CLEAN-FIX-PROCESS-DARK-BG-FIX-END */

/* CLEAN-FIX-PROCESS-BUTTONS-DARK-START */
/* Dark buttons for process overlay - blend with dark background in default state
   Buttons should blend into dark overlay when not active, but still be visible on hover/active
   TO REVERT: Delete between START/END markers */
.process-overlay-dark .control-btn {
    background-color: var(--dark); /* Match overlay background */
    border-color: var(--darkest);
}

.process-overlay-dark .control-btn:hover:not(.active) {
    background-color: var(--darkest);
    border-color: var(--light);
}

.process-overlay-dark .control-btn.active {
    background-color: var(--light);
    color: var(--dark);
}
/* CLEAN-FIX-PROCESS-BUTTONS-DARK-END */

/* Process content typography */
.process-overview-content {
    padding: var(--spacing-24) 0;
}

.process-overview-content h4 {
    color: var(--lightest);
    font-family: var(--font-primary);
    font-size: var(--font-size-standard);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: var(--spacing-30) 0 var(--spacing-18) 0;
    padding-left: var(--spacing-24);
    position: relative;
    text-decoration: underline;
    text-decoration-color: var(--warm);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Geometric accent for h4 headings */
.process-overview-content h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--warm);
    border: 2px solid var(--darkest);
}

.process-overview-content h5 {
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: var(--font-size-standard);
    font-weight: 600;
    margin: var(--spacing-24) 0 var(--spacing-12) 0;
    padding-left: var(--spacing-12);
    border-left: 2px solid var(--warm);
}

/* Gateway markers - emphasized text */
.process-overview-content strong {
    color: var(--lightest);
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;
    border-radius: 0; /* Brutalist approach - no rounded corners */
    display: inline-block;
    margin: 0 2px;
}

/* Process methods and questions */
.process-overview-content ul {
    list-style: none;
    padding-left: var(--spacing-24);
    margin: var(--spacing-12) 0;
}

.process-overview-content ul li {
    color: var(--white);
    font-family: var(--font-secondary);
    font-size: var(--font-size-standard);
    line-height: 1.8;
    margin-bottom: var(--spacing-6);
    position: relative;
    padding-left: var(--spacing-18);
}

/* Brutalist bullet points */
.process-overview-content ul li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: var(--warm);
    font-size: var(--font-size-standard);
}

/* Question lists - special styling */
.process-overview-content .question-list li {
    font-style: italic;
    opacity: 0.95;
}

.process-overview-content .question-list li::before {
    content: '?';
    font-style: normal;
    font-weight: 700;
    color: var(--warm);
}

/* Project process sections */
.process-overview-content .process-section {
    margin-bottom: var(--spacing-30);
    padding-bottom: var(--spacing-24);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.process-overview-content .process-section:last-child {
    border-bottom: none;
}

/* Ensure proper text color inheritance */
.overview-expanded-container[data-project="01"] .overview-content-vertical p,
.overview-expanded-container[data-project="01"] .overview-content-vertical {
    color: var(--white);
    opacity: 0.95;
}

/* Override project1 warm color for process overlay */
#project1 .process-overlay-dark .overview-content-vertical h3::before {
    background-color: var(--warm);
}
/* END CLEAN-FIX-PROCESS-OVERLAY-STYLES */

/* CLEAN-FIX-PROCESS-OVERLAY-SEMANTIC-START */
/* Emphasis styling for process questions (<em> tags)
   Previously used <del> (semantically incorrect) - now using proper <em> tags
   TO REVERT: Delete this entire rule block */
.process-overview-content em {
    font-style: italic;
    color: var(--lightest);
    font-weight: 500;
    opacity: 0.95;
    text-decoration: none;
}

.process-overview-content .process-questions em {
    display: inline-block;
    margin: 2px 0;
}

/* CLEAN-FIX-PROCESS-CLIPPATH-RIGHT-START */
/* Process overlay specific clip-path - Horizontally flipped from normal overlays
   Normal overlays: Angle on LEFT side (starts indented, moves outward to ~80%, then straight)
   Process overlay: Angle on RIGHT side (starts indented at 98%, reaches full edge at 80%, then straight)
   TO REVERT: Change back to polygon(0% 0, 99% 0, 100% 100%, 0% 100%) */
.process-overlay-dark {
    clip-path: polygon(0% 0, 98% 0, 100% 80%, 100% 100%, 0% 100%);
}
/* CLEAN-FIX-PROCESS-CLIPPATH-RIGHT-END */

/* CLEAN-FIX-P5-V-S9-A1.4.A-FIX2-PROCESS-CLIP-CLEARANCE (2026-05-11) — scroll-indicator
   right-offset override for .process-overlay-dark variant. The horizontally-flipped
   clip-path above (line 1147) insets the right edge by 2% for the upper 80% of the
   overlay height. At typical overlay widths (1000-1440px), 2% = 20-29px of right-edge
   clipping in the upper region — exactly where the scroll-indicator lives. Baseline
   `.overview-scroll-indicator { right: var(--spacing-6) }` (line 627, 6px) places the
   indicator INSIDE the clipped strip, partially obscuring it (visible in user
   verification screenshot 2026-05-11 PM).
   Fix: bump right-offset to 30px (= 5×6, 6n-compliant) for the .process-overlay-dark
   variant — clears the 2% clip-inset at the widest overlay width (XL ~1440px × 0.02 =
   28.8px) with 1.2px safety margin. Pattern parallels A.1.4.A-fix Issue #1 modify-in-place
   variant-override discipline (see CLEAN-FIX-P5-V-S9-A1.4.A-FIX-P1-PROCESS-INDICATOR-VISIBILITY
   at line 734). ZERO new !important. Specificity (0,3,0) wins over baseline (0,1,0).
   L7 honor: orthogonal to CLEAN-FIX-PERMANENT-NO-SCROLL (different chain, different concern).
   To revert: delete this 2-rule block (selector + declaration). */
.overview-expanded-container.process-overlay-dark .overview-scroll-indicator {
    right: var(--spacing-30);
}
/* END CLEAN-FIX-P5-V-S9-A1.4.A-FIX2-PROCESS-CLIP-CLEARANCE */
/* CLEAN-FIX-PROCESS-OVERLAY-SEMANTIC-END */

/* START CLEAN-FIX-OVERLAY-HOVER-FEEDBACK */
/* Visual feedback for overlay trigger hover (800ms delay needs indication) */
.overview-trigger:hover {
    opacity: 0.9;  /* Subtle visual feedback on hover */
    transition: opacity 0.15s ease;  /* Quick transition for responsiveness */
}

/* NOTE: Previous override `.overview-trigger:hover .cube { transform: rotateX(-90deg) scale(0.98) }`
   was REMOVED in Phase 5-S5A (2026-04-09). That rule showed the cube's empty top face on hover,
   conflicting with the D1 Conservative animation which requires the cube to snap to the BACK face
   (180deg) for the typewriter reveal. The production 180deg rotation from project-column-styles.css
   line 2258 now takes effect cleanly. Typewriter reveal handled by CLEAN-FIX-P5-S5A-HOVER-TYPEWRITER below. */
/* END CLEAN-FIX-OVERLAY-HOVER-FEEDBACK */

/* START CLEAN-FIX-P5-S5A-HOVER-TYPEWRITER */
/* D1 Conservative Staggered & Organic — hover typewriter reveal on cube back face
   Sequence on hover:
     1. Existing rule rotates cube to rotateX(180deg) (back face visible) — project-column-styles.css:2258
     2. ::after mask flashes to width:100% (covering back text) then animates to width:0% (left→right reveal)
     3. animation-fill-mode: forwards keeps mask hidden after completion
     4. 800ms overlay delay completes → overlay expands and covers the cube
   IDLE STATE: Mask width:0% by default so back face is VISIBLE during the 7s idle cube rotation
   (otherwise the continuous cube rotation would show a blank white back face).
   Gated to (hover: hover) devices — tablets 820-991px get static back face on tap
   To revert: Delete between START/END markers */
@media (hover: hover) {
    .overview-trigger .cube-face.back {
        position: relative;
        overflow: hidden;
    }

    /* Default: mask is NOT visible (width:0) so idle cube rotation shows back face text */
    .overview-trigger .cube-face.back::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        width: 0%;
        pointer-events: none;
    }

    /* On hover: animation flashes mask to 100% at keyframe 0%, then sweeps to 0% over 1.2s */
    .overview-trigger:hover .cube-face.back::after {
        animation: typewriter-back-reveal 1.2s var(--easing-concrete) forwards;
    }
}

@keyframes typewriter-back-reveal {
    0%   { width: 100%; }
    100% { width: 0%; }
}
/* END CLEAN-FIX-P5-S5A-HOVER-TYPEWRITER */

/* START CLEAN-FIX-P5-S7E2-V8-992-H3-SCALING
   V8 Proportional Info Scaling — 992px tier (h3-first hierarchy preservation).

   Scales .overview-content-vertical h3 to 1.2x at (min-width: 992px).
   Sibling to P5-S7E1-V8-820-SCALING (h2/subtitle/impact at 1.1x, lives in
   v3-project-columns-responsive.css end-of-file).

   Scope revision from blueprint: REVISED post-@ui-ninja tri-review to
   "h3-first hierarchy-preserving" approach — h3 scales to 1.2x while
   h2/subtitle/impact stay at 1.1x from 7E-1. Rationale: flat 1.2x on all
   four elements at LG min 992×700 flattens typographic hierarchy AND hits
   HIGH vertical overflow risk for minimal visual gain. h3-first keeps h3
   as the clear hierarchy anchor and reduces risk to MED.
   Stretch goal (deferred): extend full 1.2x to h2/subtitle/impact only if
   992×700 post-flight shows >24px vertical headroom AND @ui-ninja re-
   approves — would ship as a SEPARATE new marker, not mutate this one.

   File placement deviation from original plan: Originally blueprinted for
   v3-project-columns-responsive.css end-of-file (same as 7E-1). Relocated
   here after 2026-04-13 cascade audit: v3-overview-overlay.css loads at
   index.html:35, AFTER v3-project-columns-responsive.css at :31, AFTER
   project-column-styles.css at :27. Base h3 rule at this file line 267
   (`.overview-content-vertical h3 { font-size: var(--font-size-standard) }`)
   has same specificity as the scaling rule (0,2,1), so cascade order
   decides the winner. Placing the 7E-2 rule in responsive.css would LOSE
   cascade to the base rule in overlay.css. Placing it here (sibling to
   base rule, end-of-file) guarantees cascade win without specificity
   escalation or !important.

   Per-project h3 overrides exist at lines 294–371 of this file, but they
   only set text-decoration (NOT font-size), so they compose cleanly with
   this scaling rule.

   Defensibility: 1.2x via calc() off existing --font-size-standard token.
   No magic numbers, no new tokens, no !important, no specificity fight.
   6n spacing/box-sizing untouched (type scales are exempt from strict 6n).

   Evidence: Step 2 Cat C aha decision (15/16 accepted, @ui-ninja reviewed,
   commit `643be6a`); revised h3-first hierarchy approach locked 2026-04-13
   during tri-review (see ~/.claude/plans/synchronous-herding-valley.md
   Step 7E-2 section and `docs(phase-8a-b8-P5): Step 0.5 — Option C`).

   If not effective: (1) Confirm 992px media-query fires via diagnostic
   console.log in V3ExpandedController.transitionToExpanded() — h3fs should
   read 17.28px at viewport ≥992. (2) Inspect computed h3 font-size in
   DevTools for per-project overrides (lines 294–371 set text-decoration
   only, but verify no regressed sibling rules). (3) Check that --font-size-
   standard resolves to 0.9rem / 14.4px. (4) Check match992 diagnostic flag.

   Stopping condition: If LG min 992×700 overflows vertically after this
   lands, ship P5-S7E2-4A-DELTA marker (Tier 2 padding compression at
   max-height:720px) in a SEPARATE NEW marker — do NOT mutate
   P5-S4A-VERTICAL-FIT. If Tier 2 delta cannot resolve overflow, pause and
   decide: (a) defer 7E-2 entirely (keep 7E-1 1.1x only), (b) reduce h3
   scale to 1.15x instead of 1.2x (still preserves hierarchy, less compress).

   Verification: Pre-flight at LG min 992×700 (PRIMARY pass/fail), LG max
   1199×800, XL min 1200×800, 1920×1080. Step 4A Tier 2 markers must still
   engage at ≤720px height. V2 letter-spacing at 992px+ from 7A must still
   apply (different property, should compose cleanly).

   To revert: Search CLEAN-FIX-P5-S7E2-V8-992-H3-SCALING in
   v3-overview-overlay.css, delete everything between START and END markers. */
@media (min-width: 992px) {
    .overview-content-vertical h3.overview-section-title,
    .overview-content-vertical h3 {
        font-size: calc(var(--font-size-standard) * 1.2);
    }
}
/* END CLEAN-FIX-P5-S7E2-V8-992-H3-SCALING */

/* START CLEAN-FIX-P5-S6.5c-IV2.2-R5-OVERLAY-WIDTH-INVERSE-SCALING
   Per-tier overlay width inverse-scaling — overlay extends progressively into
   mockups-column area as viewport narrows, preserving "stay XL-sized" priority.

   Architecture (locked 2026-04-29 P.M. per plan
   ~/.claude/plans/hi-we-are-tingly-walrus.md § Phase IV.2.2, user Q1 decision):
     - XL (≥1200px):  width 100% of .project-info-column  (UNCHANGED — base rule)
     - LG (992–1199): width 150% (= 100% info + 50% mockups footprint)
     - MD-larger (820–991): width calc(200% − 12px) (= cumulative-cap with 12px breathing margin)

   Why fractional extension (vs fixed-pixel anchor):
     Fractional extension avoids cumulative-cap clashes at MD-larger and
     preserves user Priority 1 ("stay close to XL size"). The 12px reduction
     at MD-larger honors user Priority 3 ("never overrun cumulative expanded
     column width"). LG cap is dormant because 150% < cumulative-cap at all
     LG presets (validated against 992/1199 viewports). Fixed-pixel anchor
     would force permanent clamping at MD-larger and break visual proportion
     at XL Baseline 1440. Plan agent (3-agent review 2026-04-29 P.M.)
     evaluated alternatives in § Defensibility Bundle (a) of plan file.

   Cascade-order tail-win:
     Selector chain `.project-info-column .overview-expanded-container` has
     specificity (0,2,0) — equal to `.overview-expanded-container.active` at
     line 59. Source-order-later wins (this rule placed at file-end). Same
     pattern as Phase III R4-OVERVIEW-TRIGGER-LEFT-ALIGN precedent. ZERO new
     `!important`; no specificity escalation.

   No conflict with .overview-expanded-container.active rule at line 59:
     that rule touches opacity/border/pointer-events only; this rule touches
     width/right/max-width only. Properties disjoint.

   Parent clip-path: .project-column { clip-path: polygon(2% 0, 98% 0, ...) }
     is overridden on active at min-width: 820px by the identity polygon at
     project-column-styles.css:3603-3607 (CLEAN-FIX-P5-S7BX-ACTIVE-CLIP-PATH-NONE).
     Overlays extending past info-column into mockups area at MD-larger / LG
     are NOT clipped by parent. No additional :has() work needed.

   Per-child scaling: every overlay child uses width-agnostic 6n-compliant px
     padding OR %-based clip-paths OR width-independent typography media queries.
     Zero per-child rules required by this chunk. h3 1.2x scaling at line 1055
     fires at LG/XL only (≥992); composes cleanly with both 100% (XL) and 150%
     (LG) widths. MD-larger uses base h3 size — the wider overlay gives more
     horizontal text room without altering hierarchy.

   P1 dual-overlay parity: .case-study-cta and .overview-trigger both register
     via V3OverviewOverlay.registerTrigger() and converge on the same
     .overview-expanded-container DOM node (V3OverviewOverlay.js:114, 154).
     Width rules apply identically. Smoke-test gate: ±1px equality at 3 tier
     viewports (MD Max 991, LG Max 1199, XL Baseline 1440).

   Verification at FINAL preset viewports (computed widths):
     MD-larger 820×900    → 476 px (= cumulative-cap)
     iPad Air 834×1194    → 485 px
     MD Max 991×900       → 581 px
     LG Min 992×600       → 445 px
     LG Short 992×700     → 445 px
     LG Max 1199×800      → 540 px
     XL Min 1200×800      → 360 px (base rule unchanged)
     XL Baseline 1440×900 → 433 px (base rule unchanged)
     XL Wide 1920×1080    → 580 px (base rule unchanged)

   Known breakpoint-transition behavior (live-resize only; not visible to
   static-viewport users): overlay shifts at 991→992 (581→445 px = -23%) and
   1199→1200 (540→360 px = -33%). If IV.5 6×6 sweep flags these as visually
   disruptive, follow-up R5 chunk would shift to pixel-anchor variant
   `min(580px, cumulative-cap)` for smoother continuity.

   Diagnostic logging (// remove after testing): if rendered widths don't
   match the verification table above, open DevTools → select
   .overview-expanded-container.active → Computed → check width AND right
   AND max-width values. Verify .project-column.active has computed clip-path
   = polygon(0 0, 100% 0, 100% 100%, 0 100%) (identity, NOT trapezoid). If
   trapezoid, the @media (min-width: 820px) S7BX rule failed to engage.

   To revert: Search CLEAN-FIX-P5-S6.5c-IV2.2-R5-OVERLAY-WIDTH-INVERSE-SCALING
   in v3-overview-overlay.css, delete everything between START and END markers.
   Single file, two @media blocks. Atomic git revert via the chunk's commit SHA.

   2026-05-07 SUPERSESSION NOTE: XL row of the verification table above is SUPERSEDED
   by CLEAN-FIX-P5-V-S7-XL-OVERLAY-WIDTH-FIX (separate fence below this END marker).
   R5's LG + MD-larger blocks remain authoritative; XL is no longer base-100% (was 360px
   at 1200×800), now follows min(150%, 660px) per user direction 2026-05-07. */

/* MD-larger 820–991px: overlay binds to cumulative-column-cap minus 12px breathing margin */
@media (min-width: 820px) and (max-width: 991px) {
    .project-info-column .overview-expanded-container {
        width: calc(200% - 12px);
        right: auto;
    }
}

/* LG 992–1199px: overlay extends 50% into mockups footprint; defensive cumulative-cap dormant */
@media (min-width: 992px) and (max-width: 1199px) {
    .project-info-column .overview-expanded-container {
        width: 150%;
        right: auto;
        max-width: calc(200% - 12px); /* Defensive cumulative-cap; dormant at LG (150% < cap) */
    }
}

/* END CLEAN-FIX-P5-S6.5c-IV2.2-R5-OVERLAY-WIDTH-INVERSE-SCALING */

/* START CLEAN-FIX-P5-V-S7-XL-OVERLAY-WIDTH-FIX 2026-05-07
   SUPERSEDES R5-OVERLAY-WIDTH-INVERSE-SCALING (2026-04-29 lock) at the XL tier per user
   direction 2026-05-07. Original R5 design intent ("stay close to XL size" by leaving XL
   at base 100%-of-column width) caused two functional problems in production:
     (1) -33% width drop at 1199→1200 transition (R5 verification table line 1226 documents
         540px → 360px), perceived by user as "overlay overflows into mockups column at
         1200+" (actually: overlay shrinks at 1200+, leaving more empty space to its right,
         visually appearing as the mockups column overflowing INTO the overlay's space);
     (2) thinnest XL widths (1200×800 → 360px overlay) cannot fit overview header layout
         (title + 5 control buttons [slow/fast/pause/restart/Aa] + min-read text) without
         cramping/wrap.

   Fix: extend R5's LG `width: 150%` pattern into XL with a px cap to prevent absurd widths
   at very wide monitors (1920+). Cap = 660px = 110×6n (6n-compliant).

   Computed widths post-fix:
     1199×800   → 540px (R5 LG block fires, unchanged)
     1200×800   → 540px (8a fires; smooth handoff from LG max — zero visual jump)
     1300×900   → 595px
     1440×900   → 650px
     1600×1000  → 660px (cap kicks in)
     1920×1080  → 660px (cap)

   Specificity: (0,2,0) — same as R5 LG block at line 1256. Source-order tail-win since
   this block is placed after R5 LG block. ZERO new !important.

   To revert (restore R5 inverse-scaling at XL): delete this entire block; XL falls back
   to base width: 100% rule at line 13 (= 360px at 1200×800). Atomic single-fence revert.
   Also remove the "2026-05-07 SUPERSESSION NOTE" paragraph from R5's revert-instruction
   comment (line 1243-1250) to keep R5's documentation self-consistent. */
@media (min-width: 1200px) {
    .project-info-column .overview-expanded-container {
        width: min(150%, 660px);
        right: auto;
        max-width: calc(200% - 12px); /* Defensive cumulative-cap; mirrors R5 LG block precedent */
    }
}
/* END CLEAN-FIX-P5-V-S7-XL-OVERLAY-WIDTH-FIX */

/* START CLEAN-FIX-P5-S7D-V2-M7-PARALLAX-HEADERS (V.2 M7-V2 'Progressive Depth' — CSS prep)
   M7 Parallax: pinned-per-element threshold reveal on first <h3> of overview-content-vertical.
   Each h3 stays IDLE until its top edge crosses 6px from container top, then begins
   coordinated half-shift translateY + opacity fade as it moves toward fully out-of-frame.
   Bidirectional on scroll-up. Per-h3 individual pinning (NOT all-at-once parallax).
   Pass 2 ITERATE refinement 2026-05-04: original V2 was continuous-drift on first 2 h3;
   refined to pinned-per-element with 6px threshold, half-shift translateY, opacity 1.0→0.

   This CSS block does ONLY GPU-prep. The pinning math is JS-driven in V3OverviewOverlay
   .expandOverlay (M7 closure). Inline JS styles set transform + opacity dynamically during
   pin animation. Reduced-motion + min-height: 900px LG gate handled in JS (register-time
   skip via this._reducedMotion + window.innerHeight check) — CSS cannot use !important
   per locked constraint, and JS-driven gate is sufficient (matchMedia CHANGE event unregisters
   active M7 + resets inline styles, preventing mid-session reduced-motion drift).
   To revert: search marker, delete this block + V3OverviewOverlay.js M7 fences. */
.overview-content-vertical h3.m7-parallax-target {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: opacity 200ms ease-out;
}
/* END CLEAN-FIX-P5-S7D-V2-M7-PARALLAX-HEADERS */