/**
 * V3 Request Counter Styles
 * 
 * Bottom-anchored case request management bar
 * - Slides up from footer when cases are requested
 * - Cube-flip CTAs matching footer extension system
 * - Persistent storage with localStorage
 * - Email generation functionality
 */

/* ===========================================
   Request Counter Container
   =========================================== */

/* CLEAN-FIX-V2PORT-POSITIONING-START */
/* V2 Port - Bottom-Right Corner Positioning
   Solves footer blocking by moving counter OUT of footer's vertical space

   PROBLEM: Phase 6.7 compact layout (CLEAN-FIX-COMPACT-LAYOUT-REVERTED lines 86-314)
   tried reducing height but failed because counter at bottom:0 with ANY height >88px
   overlaps footer extensions at bottom:88px (geometric impossibility)

   SOLUTION: Move counter to bottom-right corner (bottom:120px = 32px clearance above footer)
   Reference: test-request-modal-v2.html lines 88-90

   To revert: Search CLEAN-FIX-V2PORT-POSITIONING, delete between START/END markers,
   uncomment ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - full-width bottom bar):
   .case-request-counter {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       background: var(--black);
       border-top: 1px solid var(--dark);
       transform: translateY(100%);
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
       z-index: 1100;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 -4px 24px rgba(0, 0, 0, 0.4);
       clip-path: polygon(0% 0%, 100% 0%, 99% 100%, 1% 100%);
   }
*/

/* START CLEAN-FIX-PHASE8-REQUESTMODAL-SIZING */
/* Right-Edge Positioning + Width Scaling
   To revert: Search CLEAN-FIX-PHASE8-REQUESTMODAL-SIZING and delete between START/END markers
   ORIGINAL: right: 20px; (non-6n compliant)
   FIXED: right: var(--spacing-24); (24px - 4×6 compliant for desktop) */
.case-request-counter {
    position: fixed;
    bottom: 120px;  /* CHANGED: Above footer safe zone (88px + 32px clearance) */
    right: var(--spacing-24);    /* FIXED: was 20px → 24px (4×6 compliant) */
    /* REMOVED: left: 0; - No longer full-width */
    background: var(--black);
    border: 2px solid var(--warm);  /* CHANGED: Full border (not just top), warm color for badge visibility */
    /* REMOVED: transform: translateY(100%); - No longer slides up, uses dimension changes */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* CHANGED: 'all' instead of 'transform' for width/height transitions */
    /* CLEAN-FIX-Z-INDEX-START */
    /* Z-index Fix - Raise counter above footer backdrop
       User issue (Image #2): Counter hidden below footer overlay
       ORIGINAL: z-index: 950; (below footer at 1000)
       To revert: Change 1050 back to 950 */
    z-index: 1050;  /* CHANGED: Above footer (1000) to prevent hiding */
    /* CLEAN-FIX-Z-INDEX-END */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 24px rgba(0, 0, 0, 0.6);  /* CHANGED: Bottom shadow (not top) for corner position */
    clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);  /* CHANGED: 5% chamfer (was 1%) for stronger brutalist aesthetic */

    /* CLEAN-FIX-DEFAULT-VISIBILITY-START */
    /* Visibility Cleanup - Hide counter when 0 cases
       User requirement: "expanded nor collapsed request modal should be visible when count # is 0"

       PROBLEM: Base selector has no display property, so counter shows all content when
       JavaScript removes .active and .collapsed classes (requestedCases.size === 0)

       SOLUTION: Add display:none to base selector, override with state classes

       To revert: Delete display:none line below, search CLEAN-FIX-DEFAULT-VISIBILITY */
    display: none;  /* ADDED: Hide by default (0 cases = no state classes) */
    /* CLEAN-FIX-DEFAULT-VISIBILITY-END */
}
/* CLEAN-FIX-V2PORT-POSITIONING-END */

/* CLEAN-FIX-V2PORT-ACTIVE-STATE-START */
/* V2 Port - Expanded State Dimensions

   PROBLEM: .active only had transform:translateY(0), no sizing defined
   With dimension-based states (not transform-based), active = expanded panel at full width

   SOLUTION: Add fixed width (280px) + padding (24px), remove transform
   Reference: test-request-modal-v2.html lines 118-122

   To revert: Search CLEAN-FIX-V2PORT-ACTIVE-STATE, delete between START/END,
   restore ORIGINAL BACKUP below

   ORIGINAL BACKUP:
   .case-request-counter.active {
       transform: translateY(0);
   }
*/
/* START CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
/* Case Tags Vertical Centering (Round 3.1 corrective pass)
   Root cause: display: block + auto height = zero surplus space for justify-content
   Fix: flex-column + min-height creates surplus → flex:1 on .counter-cases centers tags
   Margin collapsing correction: block layout collapsed child margins (18px+6px→18px);
   flex layout stacks them (24px). gap: 18px on parent replaces child margins.
   To revert: Search CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER → restore display: block,
   remove flex-direction/gap/min-height; restore .counter-cases margin-bottom: 18px
   and .counter-summary margin: 6px 0 */
.case-request-counter.active {
    width: 280px;      /* Fixed panel width */
    padding: 24px;     /* Panel padding (6n design system: 24 = 4×6) */

    /* CLEAN-FIX-STATE-POSITIONING-ACTIVE-START */
    bottom: 156px;  /* Push up 36px (120+36) to prevent blocking footer buttons (26×6 = 6n compliant) */
    /* CLEAN-FIX-STATE-POSITIONING-ACTIVE-END */

    display: flex;              /* CHANGED: block → flex (enables flex centering on children) */
    flex-direction: column;     /* NEW: vertical stacking */
    gap: 18px;                  /* NEW: replaces margin-bottom on children (3×6n) */
    min-height: 360px;          /* NEW: 60×6n — creates surplus space for centering */
}

/* Child margin reset in active state — prevents 6px silent increase from margin stacking in flex */
.case-request-counter.active .counter-cases {
    margin-bottom: 0;  /* Gap on parent replaces child margins */
}
.case-request-counter.active .counter-summary {
    margin: 0;  /* Gap on parent replaces child margins */
}
/* END CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
/* CLEAN-FIX-V2PORT-ACTIVE-STATE-END */

/* CLEAN-FIX-V2PORT-COLLAPSED-STATE-START */
/* V2 Port - Dimension-Based Collapsed State
   Replaces Phase 6.7 transform slide-up approach with fixed dimensions

   PROBLEM: transform: translateY() incompatible with corner positioning
   Previous CLEAN-FIX-HOVER-EXPANSION slid counter up from bottom:0, but corner
   position (bottom:120px) doesn't need vertical movement - counter stays in place
   and shrinks to badge size

   SOLUTION: Fixed dimensions (110×70px) + flexbox centering for badge
   Reference: test-request-modal-v2.html lines 98-106

   To revert: Search CLEAN-FIX-V2PORT-COLLAPSED-STATE, delete between START/END,
   restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - transform slide):
   .case-request-counter.collapsed {
       transform: translateY(calc(100% - 48px));
       cursor: pointer;
   }
   .case-request-counter.collapsed:hover {
       transform: translateY(0);
   }
*/
.case-request-counter.collapsed {
    /* CLEAN-FIX-BADGE-WIDTH-150PX-START */
    /* Final Polish - Widen badge for better text padding
       User Feedback: "need to make the container a bit wider" and
       "need 'requests' to have a bit more horizontal padding to appear more cleanly"

       PROBLEM: Previous 132px (22×6) functional but visually cramped per user feedback.
       "Requests" text needs more horizontal breathing room for polished appearance.

       SOLUTION: Increase to 150px (25×6) adds 18px total width (9px per side).
       Maintains 6n compliance while improving visual spacing.

       To revert: Change 150px back to 132px, search CLEAN-FIX-BADGE-WIDTH-150PX

       PROGRESSION:
       - 110px (original): Non-6n compliant, too narrow
       - 132px (22×6): First 6n-compliant adjustment, fits text
       - 150px (25×6): Final polish for visual breathing room
    */
    width: 150px;     /* CHANGED: 150px (25×6) from 132px - better horizontal padding */
    /* CLEAN-FIX-BADGE-WIDTH-150PX-END */
    height: 70px;     /* CHANGED: Fixed badge height */
    padding: 12px;    /* CHANGED: Badge padding */

    /* CLEAN-FIX-UNIFIED-BOTTOM-POSITION-START */
    bottom: 156px;  /* CHANGED: from 138px - match active state for seamless hover transition
                       User Issue (Image #2): Badge needed 18px higher (138+18=156)
                       6n compliant: 156px = 26×6
                       Unified positioning: Collapsed and active states now share same bottom value
                       Benefits: Eliminates visual jump during hover, enables smooth CSS transition

                       To revert: Change back to 138px, search CLEAN-FIX-UNIFIED-BOTTOM-POSITION */
    /* CLEAN-FIX-UNIFIED-BOTTOM-POSITION-END */

    cursor: pointer;  /* KEPT: Still clickable */
    display: flex;    /* NEW: Flexbox for centering */
    align-items: center;
    justify-content: center;
    /* REMOVED: transform - no longer sliding */
}

/* CLEAN-FIX-V2PORT-COLLAPSED-STATE-END */

/* CLEAN-FIX-REMOVE-HOVER-STATE-START */
/* Hover State Deletion - Remove CSS-driven 3rd state
   User Issue (Image #1): Hover showing "broken/incorrect secondary expanded state"

   PROBLEM: CSS :hover pseudo-class created ephemeral 3rd state distinct from .active
   User requirement: Only 2 states allowed: .active (expanded), .collapsed (badge)
   "We do NOT want the collapse/badge to have its own expanded state on active hover"
   "Hover must EXPAND AND TRANSITION INTO the full expanded state"

   ROOT CAUSE: CSS :hover creates temporary state that conflicts with JavaScript state management
   - .collapsed = badge (150×70px at bottom:156px)
   - .collapsed:hover = 3rd state (280px width, auto height, 156px bottom) ← UNWANTED
   - .active = proper expanded state (280px width, 24px padding, 156px bottom)

   SOLUTION: Delete ALL .collapsed:hover CSS rules, replace with JavaScript event listeners (Action 3)
   - mouseenter on .collapsed → call expand() → adds .active class
   - mouseleave on .active → call collapse() → adds .collapsed class
   - Hover now uses same expanded state as add-case action (true 2-state system)

   BENEFITS:
   - Eliminates visual confusion (no 3rd state appearance)
   - Centralizes state management in JavaScript (V3Component pattern)
   - Enables precise control over expansion/collapse behavior
   - Aligns with user requirement for "expand and transition" behavior

   To revert: Search CLEAN-FIX-REMOVE-HOVER-STATE, uncomment ORIGINAL BACKUP below, delete this comment block

   ORIGINAL BACKUP (complete CSS hover rules - all deleted):
   .case-request-counter.collapsed:hover {
       width: 280px;
       height: auto;
       padding: 24px;
       bottom: 156px;
   }

   .case-request-counter.collapsed:hover .counter-header,
   .case-request-counter.collapsed:hover .counter-cases,
   .case-request-counter.collapsed:hover .counter-summary {
       display: block;
   }

   .case-request-counter.collapsed:hover .modal-count-badge {
       display: none;
   }
*/
/* CLEAN-FIX-REMOVE-HOVER-STATE-END */

/* CLEAN-FIX-V2PORT-VISIBILITY-CONTROL-START */
/* V2 Port - Show/Hide Badge & Content Sections

   NET-NEW ADDITION (not editing existing code)
   JUSTIFICATION: Production has no badge element or visibility toggle CSS.
   V2 requires showing badge when collapsed, hiding when expanded (and vice versa).
   Cannot edit existing CSS as these selectors/elements don't exist in production.

   Reference: test-request-modal-v2.html lines 108-132

   To revert: Search CLEAN-FIX-V2PORT-VISIBILITY-CONTROL, delete entire START/END block
*/

/* Collapsed State - Show only badge */
.case-request-counter.collapsed .counter-header,
.case-request-counter.collapsed .counter-cases,
.case-request-counter.collapsed .counter-summary,
.case-request-counter.collapsed .counter-actions {
    display: none;
}

.case-request-counter.collapsed .modal-count-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Expanded/Active State - Hide badge, show content */
.case-request-counter.active .modal-count-badge {
    display: none;
}

/* CLEAN-FIX-ACTIVE-CTA-DISPLAY-START */
/* Final Polish - Fix active state CTA display type
   User Issue (Image #3): CTAs completely invisible in expanded state

   PROBLEM: Grouped rule (deleted) set display:block for ALL sections including
   .counter-actions, breaking flexbox button row layout. Display type conflict:
   - Base rule (line 471): .counter-actions { display: flex; }
   - Visibility rule: .active .counter-actions { display: block; } ← WRONG
   Block display breaks flex layout, making buttons stack vertically + lose gap spacing

   SOLUTION: Separate .counter-actions from grouped rule, set display:flex explicitly

   To revert: Delete between START/END markers, restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (broken - buttons invisible):
   .case-request-counter.active .counter-header,
   .case-request-counter.active .counter-cases,
   .case-request-counter.active .counter-summary,
   .case-request-counter.active .counter-actions {
       display: block;
   }
*/

/* Show block-level content sections in active state */
.case-request-counter.active .counter-header,
.case-request-counter.active .counter-summary {
    display: block;
}

/* START CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
/* Active .counter-cases: flex-column centering + grow to fill surplus space
   Replaces Round 3 VCENTER block (failed: parent was display:block, no surplus to center in)
   Now parent is flex-column + min-height → surplus exists → flex:1 fills it
   To revert: Search CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER, restore display: flex without
   flex-direction/justify-content/flex, restore margin-bottom: 18px */
.case-request-counter.active .counter-cases {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* Center tags vertically within available space */
    flex: 1 1 0px;              /* Grow to fill space between header and summary */
    margin-bottom: 0;           /* Gap on parent replaces margin */
}
/* END CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */

/* CLEAN-FIX-DELETE-BROKEN-FLEX-ACTIVE-START */
/* DELETED: Broken active flex rule from previous session

   This rule set display:flex WITHOUT flex-direction:column, causing horizontal layout.
   Root cause fixed by adding flex-direction:column to base .counter-actions rule (Action 1).

   ORIGINAL BACKUP (deleted - caused horizontal button layout):
   .case-request-counter.active .counter-actions {
       display: flex;
   }
*/
/* CLEAN-FIX-DELETE-BROKEN-FLEX-ACTIVE-END */
/* CLEAN-FIX-ACTIVE-CTA-DISPLAY-END */

/* Default State - Badge hidden until collapsed */
.modal-count-badge {
    display: none;
}
/* CLEAN-FIX-V2PORT-VISIBILITY-CONTROL-END */

/* CLEAN-FIX-V2PORT-BADGE-STYLING-START */
/* V2 Port - Badge Count & Label Styling

   NET-NEW ADDITION (not editing existing code)
   JUSTIFICATION: Production has no badge element. V2 requires styled badge with
   count number and "Requests" label. These are completely new selectors/elements
   that don't exist in production codebase.

   Reference: test-request-modal-v2.html lines 135-152

   To revert: Search CLEAN-FIX-V2PORT-BADGE-STYLING, delete entire START/END block
*/

/* Badge Count Display - Large number in collapsed state */
/* Typography Token Alignment - Badge Count
   ORIGINAL: font-size: 1.5rem; (24px - hardcoded)
   FIXED: font-size: var(--font-size-large); (1.1rem/17.6px - design system compliant)
   USER CONFIRMED: Use --font-size-large for proper proportional sizing */
.modal-count-badge {
    font-family: var(--font-secondary);
    font-size: var(--font-size-large);  /* FIXED: was 1.5rem hardcoded */
    font-weight: 900;
    color: var(--warm);
    text-align: center;
    line-height: 1.2;
}

.badge-count {
    display: block;
}

/* START CLEAN-FIX-PHASE8-REQUESTMODAL-TYPOGRAPHY */
/* Typography Token Alignment - Badge Label
   To revert: Search CLEAN-FIX-PHASE8-REQUESTMODAL-TYPOGRAPHY and delete between START/END markers
   ORIGINAL: font-size: var(--font-size-tiny); (undefined token)
   FIXED: font-size: var(--font-size-small); (0.8rem - design system compliant) */
.badge-label {
    display: block;
    font-size: var(--font-size-small);  /* FIXED: was var(--font-size-tiny) which is undefined */
    font-weight: 400;
    color: var(--medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* CLEAN-FIX-6N-BADGE-MARGIN-START */
    /* Task 2.3 - Fix badge label margin to 6n compliance
       To revert: Change 6px back to 2px
       ORIGINAL: margin-top: 2px; */
    margin-top: 6px;  /* CHANGED: 6px (1×6) from 2px (non-compliant) */
    /* CLEAN-FIX-6N-BADGE-MARGIN-END */
}
/* CLEAN-FIX-V2PORT-BADGE-STYLING-END */

/* Notification flash effect */
.case-request-counter.notification {
    animation: notification-flash 0.5s ease;
}

@keyframes notification-flash {
    0%, 100% { 
        border-top-color: var(--dark);
    }
    50% { 
        border-top-color: var(--warm);
        box-shadow: 0 -4px 32px rgba(255, 255, 255, 0.2);
    }
}

/* ===========================================
   Counter Header
   =========================================== */

/* CLEAN-FIX-COMPACT-LAYOUT-REVERTED-HEADER-START */
/* Compact Layout REVERTED - Spacing reduction failed to solve footer blocking

   REASON FOR REVERSION:
   Compact layout reduced spacing by ~76px (246px → 170px) but counter still blocked
   footer due to geometric impossibility: counter at bottom:0 with ANY height > 88px
   overlaps footer extensions at bottom:88px.

   Solution requires BEHAVIORAL change (auto-collapse to badge), not spacing reduction.
   Restoring original spacing aligns with 6n design system (18px = 3×6n, 24px = 4×6n).

   To re-apply compact layout: Delete between START/END markers, uncomment COMPACT VERSION below

   COMPACT VERSION (failed approach):
   .counter-header {
       padding: 12px 18px;
   }
   .counter-title {
       font-size: var(--font-size-small);
   }
   .counter-count {
       padding: 0 8px;
   }
*/

.counter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px; /* RESTORED: Original spacious padding */
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--dark);
}

.counter-title {
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    /* Title Typography - +1 notch from original, brighter color
       ORIGINAL: font-size: var(--font-size-standard); color: var(--warm);
       To revert: Change font-size back to --font-size-standard, color back to var(--warm) */
    font-size: var(--font-size-large);  /* CHANGED: +1 notch (0.9rem → 1.1rem) per user feedback */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* 8.1 Title adopts counter summary's previous prominent settings
       ORIGINAL: font-weight: 700; color: var(--lightest);
       To revert: Change font-weight back to 700, color back to var(--lightest) */
    font-weight: 900;  /* CHANGED: 700 → 900 (adopts counter summary's heavy weight) */
    color: var(--white);  /* CHANGED: var(--lightest) → var(--white) (adopts counter summary's bright color) */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.counter-count {
    font-size: var(--font-size-large);
    font-weight: 900;
    color: var(--white);
    min-width: 30px;
    text-align: center;
    padding: 0 12px; /* RESTORED: Original padding */
    background: var(--warm);
    color: var(--black);
    border-radius: 3px;
}
/* CLEAN-FIX-COMPACT-LAYOUT-REVERTED-HEADER-END */

/* ===========================================
   Cases List
   =========================================== */

/* CLEAN-FIX-V2PORT-CASES-CONTAINER-START */
/* V2 Port - Vertical Stacking Cases Container
   Editing existing .counter-cases selector

   PROBLEM: Production uses flex-wrap:wrap for horizontal tag-style layout
   V2 requires vertical stacking with full-width rows

   SOLUTION: Change flex-wrap to flex-direction:column
   Reference: test-request-modal-v2.html lines 178-185

   To revert: Search CLEAN-FIX-V2PORT-CASES-CONTAINER, restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - horizontal wrapping):
   .counter-cases {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       padding: 18px 24px;
       max-height: 120px;
       overflow-y: auto;
       background: var(--black);
   }
*/

.counter-cases {
    display: flex;
    flex-direction: column;  /* CHANGED: Vertical stacking instead of horizontal wrap */
    gap: 12px;
    padding: 18px;  /* CHANGED: Reduced from 24px horizontal for narrower panel (280px) */
    margin-bottom: 18px;  /* NEW: Space before actions section */
    /* CLEAN-FIX-CASES-HEIGHT-4PLUS-START */
    /* Final Polish - Increase max-height for 4+ cases without scroll
       User Issue (Image #4): 4th case "METIS" cut off, requires scroll

       PROBLEM: Previous 204px (34×6) sufficient for 3 cases but cuts off 4th case.
       Each case item ~48px height + 12px gap = ~60px per case.
       4 cases = 240px content + 12px buffer = 252px needed.

       SOLUTION: Increase to 252px (42×6) to show 4 cases fully without scroll.
       Counter positioned at bottom:120px, expansion goes upward from anchor.

       To revert: Change 252px back to 204px, search CLEAN-FIX-CASES-HEIGHT-4PLUS

       ORIGINAL BACKUP (Task 2.4 - 3 cases):
       max-height: 204px; (34×6) - from 200px non-compliant
    */
    max-height: 252px;  /* CHANGED: 252px (42×6) from 204px - fits 4 cases without scroll */
    /* CLEAN-FIX-CASES-HEIGHT-4PLUS-END */
    overflow-y: auto;
    background: var(--black);
}
/* CLEAN-FIX-V2PORT-CASES-CONTAINER-END */

/* Custom scrollbar */
.counter-cases::-webkit-scrollbar {
    width: 6px;
}

.counter-cases::-webkit-scrollbar-track {
    background: var(--dark);
}

.counter-cases::-webkit-scrollbar-thumb {
    background: var(--warm);
    border-radius: 3px;
}

/* CLEAN-FIX-V2PORT-CASE-ITEMS-START */
/* V2 Port - Full-Width Row Layout for Case Items
   Editing existing .counter-case-item selector

   PROBLEM: Production uses inline-flex for compact tag-style items
   V2 requires full-width rows with name left, remove button right

   SOLUTION: Change to display:flex + justify-content:space-between, increase padding
   Reference: test-request-modal-v2.html lines 187-196

   To revert: Search CLEAN-FIX-V2PORT-CASE-ITEMS, restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - inline tag style):
   .counter-case-item {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 6px 12px;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid var(--dark);
       border-radius: 3px;
       transition: all var(--transition-fast) ease;
   }
*/

/* Case items */
.counter-case-item {
    display: flex;  /* CHANGED: Full-width from inline-flex */
    align-items: center;
    justify-content: space-between;  /* NEW: Name left, button right */
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    text-align: center;  /* Center-align case tag text - visual refinement per user feedback */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    /* CLEAN-FIX-6N-CASE-GAP-START */
    /* Task 2.1 - Fix case item gap to 6n compliance
       To revert: Change 12px back to 8px
       ORIGINAL: gap: 8px; */
    gap: 12px;  /* CHANGED: 12px (2×6) from 8px (non-compliant) for better spacing */
    /* CLEAN-FIX-6N-CASE-GAP-END */
    /* START CLEAN-FIX-PHASE8-XICON-PARENT-PADDING */
    /* Round 3 Fix: Use parent padding instead of child margin
       (margin-right ignored by justify-content: space-between)
       ORIGINAL: padding: 12px 18px;
       To revert: Change back to 12px 18px */
    padding: 12px 24px;  /* CHANGED: horizontal 18px → 24px (symmetric, 4×6) for X icon breathing room */
    /* END CLEAN-FIX-PHASE8-XICON-PARENT-PADDING */
    background: rgba(255, 255, 255, 0.02);  /* CHANGED: Subtle from 0.05 */
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    /* Border Prominence Reduction - Let CTAs dominate visual hierarchy
       ORIGINAL: border: 1px solid var(--dark);
       To revert: Change border back to 1px solid var(--dark) */
    border: 1px solid rgba(48, 51, 51, 0.3);  /* CHANGED: 0.3 opacity for reduced prominence */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-VISUAL-REFINEMENTS */
    border-left: 3px solid var(--blue);  /* NEW: Accent border (overridden by data-case below) */
    border-radius: 0;  /* CHANGED: Sharp corners for brutalist aesthetic */
    transition: all var(--transition-fast) ease;
}
/* CLEAN-FIX-V2PORT-CASE-ITEMS-END */

.counter-case-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--light);
}

/* CLEAN-FIX-CASE-ACCENT-BORDERS-START */
/* Phase 6.7 Task 5 - Case-specific accent color borders
   To revert: Delete between START/END markers
   Case 01 (t.i.m.E) = blue, Case 02 ([a.i.]rbnb) = pink
   Case 03 (Saving Face) = purple, Case 04 (Metis) = lightest */

.counter-case-item[data-case="01"] {
    border-color: var(--blue);
}

.counter-case-item[data-case="02"] {
    border-color: var(--pink);
}

.counter-case-item[data-case="03"] {
    border-color: var(--purple);
}

.counter-case-item[data-case="04"] {
    border-color: var(--lightest);
}
/* CLEAN-FIX-CASE-ACCENT-BORDERS-END */

.case-name {
    font-size: var(--font-size-small);
    color: var(--cool);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CLEAN-FIX-GEOMETRIC-X-BUTTON-START */
/* Geometric-Brutalist Refinement - Octagonal 'x' button (not rounded)
   User requirement: "jagged edges (with sharp corners)/not rounded"
   Reference: work categories design with minimal border-radius

   To revert: Delete between START/END markers, uncomment ORIGINAL BACKUP below

   ORIGINAL BACKUP (circular):
   .case-clear-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 20px;
       height: 20px;
       padding: 0;
       background: transparent;
       border: 1px solid var(--dark);
       border-radius: 50%;
       color: var(--warm);
       font-size: var(--font-size-standard);
       font-weight: 700;
       cursor: pointer;
       transition: all var(--transition-fast) ease;
   }
*/

.case-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLEAN-FIX-6N-BUTTON-SIZE-START */
    /* Task 2.2 - Fix remove button size to 6n compliance
       To revert: Change 24px back to 22px
       ORIGINAL: width: 22px; height: 22px; */
    width: 24px;  /* CHANGED: 24px (4×6) from 22px (non-compliant) - improves clickability */
    height: 24px;
    /* CLEAN-FIX-6N-BUTTON-SIZE-END */
    /* START CLEAN-FIX-PHASE8-XICON-SQUARE */
    /* X Icon Square Enforcement
       User Issue: Icon appears oval due to flexbox stretch/shrink
       Root Cause: No aspect-ratio constraint, flexbox compressing width
       To revert: Delete between START and END markers */
    aspect-ratio: 1;
    flex-shrink: 0;
    min-width: 18px;
    align-self: center;
    /* END CLEAN-FIX-PHASE8-XICON-SQUARE */
    padding: 0;
    /* START CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */
    /* Ghost Octagon: regular octagon polygon (29.3% insets ≈ 1-1/√2)
       Round 3.1: var(--clip-octagon) 15% insets too subtle at 24px — looked like squares
       Cascades to all breakpoints: Desktop 24px, SM 24px, XS 18px
       Note: Diverges from --clip-octagon token (15% insets). Consider adding
       --clip-octagon-regular to v3-design-system.css for future standardization.
       To revert: Restore clip-path: var(--clip-octagon); */
    background: rgba(var(--dark-rgb), 0.12);
    border: none;
    clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
    /* END CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */
    color: var(--warm);
    font-size: var(--font-size-standard);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
/* CLEAN-FIX-GEOMETRIC-X-BUTTON-END */

/* START CLEAN-FIX-PHASE8-XICON-HOVER */
/* X Icon Hover - REMOVED scale transform (caused clip-path distortion)
   ORIGINAL: transform: scale(1.1);
   Round 2 Fix: Removed scale to maintain square aspect ratio on hover
   To revert: Add transform: scale(1.1); back to this rule */
.case-clear-btn:hover {
    /* START CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */
    /* Ghost Octagon hover: opacity progression 0.12 → 0.5 (no border to distort)
       To revert: Restore background: var(--lightest); color: var(--darkest); border-color: var(--warm); */
    background: rgba(var(--lightest-rgb), 0.5);  /* Opacity progression: 0.12 → 0.5 */
    color: var(--darkest);
    border: none;                                 /* Maintain borderless */
    /* END CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */
    /* REMOVED: transform: scale(1.1); - causes distortion with octagonal clip-path */
}
/* END CLEAN-FIX-PHASE8-XICON-HOVER */

/* ===========================================
   Counter Summary (Count Display)
   =========================================== */

/* CLEAN-FIX-COUNT-SUMMARY-SECTION-START */
/* Task 1.2 - Geometric-Brutalist count summary section
   Positioned between cases and actions per user requirement
   User: "need the '# cases' string to move below to modal's cta/button section"

   To revert: Delete entire block between START/END markers
*/

/* Counter Summary Section - Between cases and actions */
.counter-summary {
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* 8.4 Reduce counter summary container prominence (metadata treatment)
       ORIGINAL: padding: 18px; margin: 12px 0;
       To revert: Change padding back to 18px, margin back to 12px 0 */
    padding: 12px;  /* CHANGED: 18px → 12px (6n: 2×6) - reduced footprint */
    margin: 6px 0;  /* CHANGED: 12px 0 → 6px 0 (6n: 1×6) - reduced prominence */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* START CLEAN-FIX-PHASE8-SUMMARY-OPACITY */
    /* Summary Background Opacity - Subtle metadata treatment
       ORIGINAL: background: rgba(255, 255, 255, 0.03);
       To revert: Change back to 0.03 */
    background: rgba(255, 255, 255, 0.02);  /* CHANGED: 0.03 → 0.02 (SM/MD/LG subtle) */
    /* END CLEAN-FIX-PHASE8-SUMMARY-OPACITY */
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-XS-REFINEMENTS */
    /* 9.3 Counter Summary Borders - Top/Bottom only for visual differentiation from full-bordered CTAs/case items
       ORIGINAL: border: 2px solid rgba(121, 126, 128, 0.3); border-left-width: 4px;
       To revert: Restore border shorthand and add border-left-width: 4px */
    border: none;
    border-top: 2px solid rgba(121, 126, 128, 0.3);
    border-bottom: 2px solid rgba(121, 126, 128, 0.3);
    /* REMOVED: border-left-width: 4px (was accent emphasis, now removed for top/bottom only divider effect) */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-XS-REFINEMENTS */
    clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);  /* Angular brutalist edges - PRESERVED */
    display: flex;
    justify-content: center;
    align-items: center;
}

.counter-summary .counter-count {
    font-family: var(--font-secondary);  /* Chivo Mono */
    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* 8.3 Counter summary becomes metadata treatment (yields prominence to title)
       ORIGINAL: font-size: var(--font-size-large); font-weight: 900; color: var(--white);
       To revert: Change font-size back to --font-size-large, font-weight to 900, color to var(--white) */
    font-size: var(--font-size-small);  /* CHANGED: --font-size-large → --font-size-small (matches case items) */
    /* START CLEAN-FIX-PHASE8-SUMMARY-WEIGHT */
    /* Counter Summary Font Weight - Match case item tag typography
       ORIGINAL: font-weight: 700;
       To revert: Change back to 700 */
    font-weight: 400;  /* CHANGED: 700 → 400 (match case item copy weight) */
    /* END CLEAN-FIX-PHASE8-SUMMARY-WEIGHT */
    color: var(--cool);  /* CHANGED: var(--white) → var(--cool) (muted metadata color) */
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);  /* 0.1em */
    background: transparent;  /* Remove old badge background */
    border-radius: 0;  /* Sharp corners */
    padding: 0;  /* Remove old badge padding */
    min-width: auto;  /* Remove old min-width constraint */
}
/* CLEAN-FIX-COUNT-SUMMARY-SECTION-END */

/* ===========================================
   Counter Actions (Cube-Flip CTAs)
   =========================================== */

/* CLEAN-FIX-V2PORT-CTA-ACTIONS-START */
/* V2 Port - Equal-Width CTA Buttons
   Editing existing .counter-actions selector

   PROBLEM: Production has 24px gap and flex-end justification
   V2 requires tighter 12px gap and equal-width buttons (flex:1)

   SOLUTION: Reduce gap, remove flex-end justification (buttons will stretch equally)
   Reference: test-request-modal-v2.html lines 154-158

   To revert: Search CLEAN-FIX-V2PORT-CTA-ACTIONS, restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - wide gap, right-aligned):
   .counter-actions {
       display: flex;
       gap: 24px;
       justify-content: flex-end;
       padding: 18px 24px;
       background: rgba(255, 255, 255, 0.02);
       border-top: 1px solid var(--dark);
   }
*/

.counter-actions {
    display: flex;
    /* CLEAN-FIX-VERTICAL-CTA-STACK-START */
    flex-direction: column;  /* ADDED: Vertical stacking for buttons (not horizontal row) - fixes root cause */
    /* CLEAN-FIX-VERTICAL-CTA-STACK-END */
    gap: 12px;  /* CHANGED: Tighter gap from 24px for V2 compact design (6n: 2×6) */
    /* REMOVED: justify-content:flex-end - buttons stretch with flex:1 below */
    /* START CLEAN-FIX-PHASE8-CTA-FULLWIDTH */
    /* CTA Full Width - Edge-to-edge buttons
       ORIGINAL: padding: 12px;
       To revert: Change back to 12px */
    padding: 0;  /* CHANGED: 12px → 0 (edge-to-edge CTAs) */
    /* END CLEAN-FIX-PHASE8-CTA-FULLWIDTH */
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--dark);
}
/* CLEAN-FIX-V2PORT-CTA-ACTIONS-END */

/* CLEAN-FIX-V2PORT-CTA-BUTTONS-START */
/* V2 Port - Equal-Width Flex CTA Buttons
   Editing existing .counter-btn selector

   PROBLEM: Production uses min-width:140px for right-aligned buttons
   V2 requires equal-width stretching buttons (flex:1)

   SOLUTION: Replace min-width with flex:1 for equal split
   Reference: test-request-modal-v2.html lines 160-171

   To revert: Search CLEAN-FIX-V2PORT-CTA-BUTTONS, restore ORIGINAL BACKUP below

   ORIGINAL BACKUP (Phase 6.7 - min-width):
   .counter-actions .counter-btn {
       position: relative;
       min-width: 140px;
       height: 48px;
       padding: 0;
       background: transparent;
       border: 1px solid var(--dark);
       cursor: pointer;
       overflow: hidden;
       perspective: 1000px;
       transition: border-color var(--transition-fast) ease;
   }
*/

/* Reuse cube-flip styles from footer extensions */
.counter-actions .counter-btn {
    position: relative;
    width: 100%;  /* RESTORED: Base width (SM media query handles responsive override) */
    height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--dark);
    cursor: pointer;
    overflow: hidden;
    perspective: 1000px;
    transition: border-color var(--transition-fast) ease;
}

.counter-actions .counter-btn:hover {
    border-color: var(--light);
}
/* CLEAN-FIX-V2PORT-CTA-BUTTONS-END */

/* START CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-ALIGN */
/* Phase 8 CTA Alignment - Match Footer Stage 2 Preview Patterns
   Send Request (primary) = Cases Stage 2 Primary CTA (.preview-btn)
   Clear All (secondary) = Cases Stage 2 Secondary CTA (.request-writeup-btn)

   To revert: Search CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-ALIGN and delete between START/END markers
   Reference: v3-footer-extensions-clean.css lines 948-1064, 1252-1396
*/

/* Cube wrapper - aligned with Stage 2 perspective */
.counter-actions .cube-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;  /* CHANGED: from relative + 1000px to match Stage 2 pattern */
}

/* Cube container for 3D transforms */
.counter-actions .cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-medium) cubic-bezier(0.16, 1, 0.3, 1);  /* Stage 2 easing */
}

/* Cube faces - using design system CTA variables */
.counter-actions .cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-small);
}

.counter-actions .cube-face.front {
    transform: translateZ(12px);  /* Stage 2 depth */
    background: var(--cta-cube-bg-front);  /* Design system: rgba(18, 18, 18, 0.05) */
    border: none;
    /* START CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY */
    /* CTA Front Typography - User confirmed: bright white text
       ORIGINAL: color: var(--cta-cube-text-color-front);
       To revert: Change back to var(--cta-cube-text-color-front) */
    color: var(--white);  /* CHANGED: User confirmed - bright white for visibility */
    /* END CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY */
    font-family: var(--font-secondary);
    font-weight: 400;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}

.counter-actions .cube-face.back {
    background: var(--cta-cube-bg-back);  /* Design system: rgba(18, 18, 18, 0.3) */
    border: none;
    color: var(--cta-cube-text-color-back);  /* Design system: var(--white) */
    font-family: var(--font-primary);
    /* START CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY */
    /* CTA Back Typography - User confirmed: 600 for SM/MD/LG (XS override below)
       ORIGINAL: font-weight: 700;
       To revert: Change back to 700 */
    font-weight: 600;  /* CHANGED: Refined weight for SM/MD/LG (XS gets 800 below) */
    /* END CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY */
    position: relative;
    padding-left: var(--cta-text-padding-left);
    padding-right: var(--cta-text-padding-right);
}

/* Primary CTA (Send Request) - X-axis rotation matching .preview-btn */
.counter-actions .counter-btn.primary .cube-face.back {
    transform: rotateX(180deg) translateZ(12px);
}

.counter-actions .counter-btn.primary:hover .cube {
    transform: rotateX(-180deg);  /* Stage 2 uses negative rotation */
}

/* Secondary CTA (Clear All) - Y-axis rotation matching .request-writeup-btn */
.counter-actions .counter-btn:not(.primary) .cube-face.back {
    transform: rotateY(180deg) translateZ(12px);
}

.counter-actions .counter-btn:not(.primary):hover .cube {
    transform: rotateY(180deg);
}

/* Secondary CTA scale transform on hover (Stage 2 pattern) */
.counter-actions .counter-btn:not(.primary):hover {
    transform: scale(1.05);
}

/* Hover border and shadow - matching Stage 2 site-wide CTA standards */
.counter-actions .counter-btn:hover {
    border: 1.2px solid var(--warm);
    box-shadow: var(--shadow-module-hover);  /* 0 0 6px rgba(250, 250, 250, 0.16) */
}

/* Dual accent lines - matching Stage 2 sweep animation pattern */
.counter-actions .cube-face.back::before,
.counter-actions .cube-face.back::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    opacity: 0;
    transition: none;  /* Animation only */
}

/* Top accent line (::before) - right-to-left sweep */
.counter-actions .cube-face.back::before {
    top: 3px;
    right: 0;
    left: auto;
    background-color: var(--white);  /* Default - overridden by specific CTA selectors below */
}

/* Bottom accent line (::after) - left-to-right sweep */
.counter-actions .cube-face.back::after {
    bottom: 3px;
    left: 0;
    right: auto;
    background-color: var(--white);  /* Default - overridden by specific CTA selectors below */
}

/* START CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-COLORS */
/* CTA Accent Color Overrides - USER CONFIRMED
   To revert: Search CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-COLORS and delete between START/END markers
   Primary (Clear): warm for both top and bottom
   Secondary (Send): dark for top, cool for bottom */

/* Primary CTA (Clear) - warm accent color for both lines */
.counter-actions .counter-btn.primary .cube-face.back::before,
.counter-actions .counter-btn.primary .cube-face.back::after {
    background-color: var(--warm);  /* User spec: warm (#797E80) */
}

/* Secondary CTA (Send) - dark top, cool bottom */
.counter-actions .counter-btn:not(.primary) .cube-face.back::before {
    background-color: var(--dark);  /* User spec: dark (#303333) for top */
}

.counter-actions .counter-btn:not(.primary) .cube-face.back::after {
    background-color: var(--cool);  /* User spec: cool (#a9b0b2) for bottom */
}
/* END CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-COLORS */

/* Primary CTA accent animation - 100% width (Stage 2 primary pattern) */
.counter-actions .counter-btn.primary:hover .cube-face.back::before {
    width: 100%;
    animation: accent-right-to-left var(--transition-medium) var(--easing-concrete) 600ms both;
}

.counter-actions .counter-btn.primary:hover .cube-face.back::after {
    width: 100%;
    animation: accent-left-to-right var(--transition-medium) var(--easing-concrete) 600ms both;
}

/* Secondary CTA accent animation - 50% width (Stage 2 secondary pattern) */
.counter-actions .counter-btn:not(.primary):hover .cube-face.back::before {
    width: 50%;
    animation: accent-right-to-left var(--transition-medium) var(--easing-concrete) 600ms both;
}

.counter-actions .counter-btn:not(.primary):hover .cube-face.back::after {
    width: 50%;
    animation: accent-left-to-right var(--transition-medium) var(--easing-concrete) 600ms both;
}

/* Sweep animation keyframes */
@keyframes accent-right-to-left {
    0% { width: 0; opacity: 0; right: 0; left: auto; }
    100% { width: inherit; opacity: 1; right: 0; left: auto; }
}

@keyframes accent-left-to-right {
    0% { width: 0; opacity: 0; left: 0; right: auto; }
    100% { width: inherit; opacity: 1; left: 0; right: auto; }
}

/* Disabled state when no cases */
.counter-actions .counter-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}
/* END CLEAN-FIX-PHASE8-REQUESTMODAL-CTA-ALIGN */

/* ===========================================
   Empty State
   =========================================== */

.counter-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--cool);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    opacity: 0.6;
}

/* ===========================================
   Mobile Responsive
   =========================================== */

/* START CLEAN-FIX-PHASE8-BREAKPOINT-COUNTER */
/* SM Breakpoint - Large Phones/Small Tablets */
@media (max-width: 767px) {
    /* Responsive Sizing - Counter Container at SM
       Per plan: 216px width (36×6), 12px right (2×6) */
    .case-request-counter {
        right: var(--spacing-12);  /* SM: 12px (2×6) from right edge */
    }

    /* START CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
    .case-request-counter.active {
        width: 216px;                             /* SM: 36×6 (down from 288px desktop) */
        min-height: 312px;                        /* SM: 52×6n */
        max-height: calc(100dvh - 312px);         /* Safety cap: viewport minus footer offset + padding */
    }
    /* END CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */

    .case-request-counter.collapsed {
        width: 126px;  /* SM: 21×6 (down from 150px desktop) */
    }

    .counter-header {
        padding: var(--spacing-12);  /* FIXED: 12px 16px → 12px (6n compliant) */
        /* START CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
        /* SM single-column centering: mirrors XS pattern (lines 1183-1186)
           Root cause: base flex-direction: row + justify-content: space-between prevents title centering
           Without column direction, width: 100% on title pushes counter-count off-screen
           To revert: Remove flex-direction and align-items lines */
        flex-direction: column;
        align-items: center;
        /* END CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
    }

    .counter-title {
        /* START CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
        /* SM/XS Title Abbreviation - Shorter text prevents 3-line wrap
           ORIGINAL: font-size: var(--font-size-standard);
           To revert: Delete font-size:0, remove ::after rule below, restore original font-size */
        font-size: 0;  /* Hide original "Case Write-ups Requested" text */
        /* END CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
        /* START CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
        /* SM title centering: full-width + text-align center (mirrors XS pattern)
           To revert: Remove text-align and width lines */
        text-align: center;
        width: 100%;
        /* END CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
    }

    /* START CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
    /* SM/XS Title Abbreviation - Display shortened title via pseudo-element
       ORIGINAL: (no ::after existed)
       To revert: Delete everything between START and END markers */
    .counter-title::after {
        content: 'CASES REQUESTED';
        font-size: var(--font-size-standard);  /* 0.9rem - matches SM title size */
        display: block;
        /* START CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
        /* SM ::after centering: ensures pseudo-element text is centered
           To revert: Remove text-align line */
        text-align: center;
        /* END CLEAN-FIX-PHASE8A-R3-TITLE-CENTER-SM */
        /* Inherits: font-weight: 900, color: var(--white), text-transform, letter-spacing from base */
    }
    /* END CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */

    /* START CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
    .counter-cases {
        padding: 12px 18px;    /* CHANGED: 16px → 18px horizontal (3×6n compliant) */
        max-height: none;      /* CHANGED: 80px → none — allow flex:1 growth for centering */
    }
    /* END CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */

    /* START CLEAN-FIX-PHASE8A-R3.1-LEFT-BORDER-SM */
    /* SM: Left-only accent border — prevents all-side accent at responsive
       Root cause: [data-case] rules set border-color on ALL sides; base border-width: 1px
       is fine at desktop, but SM inherits it. Explicit left-only ensures consistent appearance.
       3px = --spacing-3 token (0.5×6n), consistent across all breakpoints.
       To revert: Delete this block */
    .counter-case-item {
        border-width: 0 0 0 3px;  /* Left-only: 3px accent */
    }
    /* END CLEAN-FIX-PHASE8A-R3.1-LEFT-BORDER-SM */

    /* START CLEAN-FIX-PHASE8-CTA-MATCH-SUMMARY */
    /* Round 3 Fix: Match counter-summary padding model for equal CTA width
       ORIGINAL: padding: 12px 16px;
       To revert: Change back to 12px 16px */
    .counter-actions {
        /* START CLEAN-FIX-PHASE8-CTA-FULLWIDTH */
        /* SM CTA Full Width - Edge-to-edge buttons (matches base rule)
           To revert: Change back to 12px */
        padding: 0;  /* CHANGED: 12px → 0 (edge-to-edge CTAs at SM) */
        /* END CLEAN-FIX-PHASE8-CTA-FULLWIDTH */
        flex-direction: column;
        gap: 12px;
    }
    /* END CLEAN-FIX-PHASE8-CTA-MATCH-SUMMARY */

    .counter-actions .cta-primary,
    .counter-actions .cta-secondary {
        width: 100%;
    }

    /* CLEAN-FIX-REMOVE-FAILED-MOBILE-TRANSFORM-START */
    /* Visibility Cleanup - Remove failed mobile transform attempt

       FAILED ATTEMPT: Phase 6.7 used transform slide for mobile collapsed state
       CONFLICT: V2 port (lines 103-136) replaced transform with dimension-based states
       SOLUTION: Delete mobile transform, let mobile inherit V2 port dimension approach

       To revert: Uncomment ORIGINAL BACKUP below

       ORIGINAL BACKUP (failed approach):
       .case-request-counter.collapsed {
           transform: translateY(calc(100% - 48px));
       }
    */
    /* Mobile now inherits dimension-based collapsed state from desktop (lines 127-136) */
    /* CLEAN-FIX-REMOVE-FAILED-MOBILE-TRANSFORM-END */
}

/* XS Breakpoint - Mobile Phones */
@media (max-width: 599px) {
    /* Responsive Sizing - Counter Container at XS
       Per plan: 180px width (30×6, USER CONFIRMED Compact), 12px right (2×6) */
    /* START CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */
    .case-request-counter.active {
        width: 180px;      /* XS: 30×6 (USER CONFIRMED: Compact sizing ~48% of 375px viewport) */
        min-height: 264px; /* XS: 44×6n — aspect ratio 1:1.47 matches SM proportion */
    }
    /* END CLEAN-FIX-PHASE8A-R3.1-CASE-CENTER */

    .case-request-counter.collapsed {
        width: 108px;  /* XS: 18×6 (down from 126px SM) */
    }

    /* START CLEAN-FIX-PHASE8A-GATE-COUNTER-CENTER */
    /* XS single-column centering: flex-direction column + centered alignment
       Root cause: flex + space-between prevents text-align: center from centering visually
       To revert: Delete everything between START and END markers */
    .counter-header {
        flex-direction: column;
        align-items: center;
    }
    /* END CLEAN-FIX-PHASE8A-GATE-COUNTER-CENTER */

    /* Typography Scaling at XS - Step down all elements */
    .counter-title {
        /* START CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
        /* XS Title Abbreviation - Maintain hidden original text (inherits ::after from SM)
           ORIGINAL: font-size: var(--font-size-standard);
           To revert: Change back to var(--font-size-standard) */
        font-size: 0;  /* Keep original text hidden; ::after displays "CASES REQUESTED" */
        /* END CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
        /* START CLEAN-FIX-PHASE8-TITLE-CENTER-XS */
        /* XS Title Center Alignment - Center for narrow modal
           To revert: Delete between START and END markers */
        text-align: center;
        /* END CLEAN-FIX-PHASE8-TITLE-CENTER-XS */
        /* START CLEAN-FIX-PHASE8A-GATE-COUNTER-CENTER */
        /* XS single-column centering: full-width title so text-align: center has context
           Root cause: parent .counter-header uses flex + space-between, so title doesn't span full width
           To revert: Delete everything between START and END markers */
        width: 100%;
        /* END CLEAN-FIX-PHASE8A-GATE-COUNTER-CENTER */
    }

    /* START CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */
    /* XS Title ::after - Explicit font-size for abbreviated title at XS */
    .counter-title::after {
        font-size: var(--font-size-standard);  /* 0.9rem - same as SM */
    }
    /* END CLEAN-FIX-PHASE8-TITLE-ABBREVIATION */

    .counter-count {
        font-size: var(--font-size-small);  /* XS: step down from standard */
    }

    .counter-actions .cube-face {
        font-size: var(--font-size-specialized);  /* XS: step down from small */
    }

    /* START CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY-XS */
    /* XS CTA Back Typography - Bolder weight for small screen visibility
       To revert: Delete between START and END markers */
    .counter-actions .cube-face.back {
        font-weight: 800;  /* XS: Bolder for visibility on small screens */
    }
    /* END CLEAN-FIX-PHASE8-CTA-TYPOGRAPHY-XS */

    /* Typography Token Alignment - Case Item at XS
       ORIGINAL: font-size: var(--font-size-tiny); (undefined token)
       FIXED: font-size: var(--font-size-specialized); (0.65rem - smallest design system token) */
    .counter-case-item {
        font-size: var(--font-size-specialized);  /* FIXED: was var(--font-size-tiny) which is undefined */
        /* START CLEAN-FIX-PHASE8-XICON-PARENT-PADDING */
        /* Round 3 Fix: XS horizontal padding to match base (24px symmetric)
           ORIGINAL: padding: var(--spacing-6) var(--spacing-18);
           To revert: Change back to var(--spacing-6) var(--spacing-18) */
        padding: var(--spacing-6) var(--spacing-24);  /* CHANGED: horizontal 18px → 24px (symmetric, 4×6) */
        /* END CLEAN-FIX-PHASE8-XICON-PARENT-PADDING */
        /* START CLEAN-FIX-PHASE8-CASEITEM-RESPONSIVE */
        /* Case Item Responsive Styling - XS variant
           XS (≤599px): Tighter gap, flex-start alignment, bolder border
           To revert: Delete between START and END markers */
        gap: 6px;  /* XS: 1×6 (down from 12px SM+) */
        align-items: flex-start;  /* XS: Top-align for taller items */
        /* START CLEAN-FIX-PHASE8A-R3.1-LEFT-BORDER-XS */
        /* XS: Left-only 3px border — consistent with SM (was: 2px all sides + override color)
           REMOVED: border-color: rgba(48, 51, 51, 0.6) — accent color from [data-case] rules applies to visible left border
           To revert: Restore border-width: 2px; border-color: rgba(48, 51, 51, 0.6); */
        border-width: 0 0 0 3px;  /* Left-only: 3px consistent across all breakpoints */
        /* END CLEAN-FIX-PHASE8A-R3.1-LEFT-BORDER-XS */
        /* END CLEAN-FIX-PHASE8-CASEITEM-RESPONSIVE */
    }

    /* START CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */
    .case-clear-btn {
        width: 18px;   /* FIXED: 16px → 18px (3×6 compliant) */
        height: 18px;  /* FIXED: 16px → 18px (3×6 compliant) */
        font-size: var(--font-size-small);
        background: rgba(var(--dark-rgb), 0.2);   /* XS: Higher opacity for visibility at small size */
    }
    /* END CLEAN-FIX-PHASE8A-R3.1-GHOST-OCTAGON */

    /* START CLEAN-FIX-PHASE8-SUMMARY-OPACITY-XS */
    /* XS Summary Background - Even more subtle for mobile
       To revert: Delete between START and END markers */
    .counter-summary {
        background: rgba(255, 255, 255, 0.01);  /* XS: 0.01 (even more subtle for mobile) */
    }
    /* END CLEAN-FIX-PHASE8-SUMMARY-OPACITY-XS */

    /* START CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
    /* 8.3 XS override - Counter summary matches case item sizing at XS
       ORIGINAL: (no XS override existed)
       To revert: Delete this entire .counter-summary .counter-count block */
    .counter-summary .counter-count {
        font-size: var(--font-size-specialized);  /* ADDED: matches case items at XS (0.65rem) */
    }
    /* END CLEAN-FIX-PHASE8-REQUESTMODAL-HIERARCHY-FINAL */
}
/* END CLEAN-FIX-PHASE8-REQUESTMODAL-TYPOGRAPHY */
/* END CLEAN-FIX-PHASE8-BREAKPOINT-COUNTER */

/* ===========================================
   Accessibility
   =========================================== */

.counter-actions .cta-primary:focus-visible,
.counter-actions .cta-secondary:focus-visible,
.case-clear-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Keyboard navigation for collapsed state */
.case-request-counter.collapsed:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
}

/* ===========================================
   Animations for Micro-interactions
   =========================================== */

/* Case added animation */
@keyframes case-added {
    0% { 
        transform: translateX(-20px);
        opacity: 0;
    }
    50% {
        transform: translateX(5px);
    }
    100% { 
        transform: translateX(0);
        opacity: 1;
    }
}

.counter-case-item {
    animation: case-added 0.3s ease-out;
}

/* Case removed animation */
@keyframes case-removed {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    100% { 
        transform: scale(0.8);
        opacity: 0;
    }
}

.counter-case-item.removing {
    animation: case-removed 0.2s ease-out forwards;
}

/* ===========================================
   Dark Mode Support
   =========================================== */

@media (prefers-color-scheme: light) {
    /* Future light mode adjustments */
}

/* ===========================================
   Print Styles
   =========================================== */

@media print {
    .case-request-counter {
        display: none !important;
    }
}