/* Volunteering Dashboard – Modern Redesign */

/* ==========================================================================
   THEME HEADER: KPI-style centred title + wave date subtitle (like summary page)
   ========================================================================== */

   .volunteering-theme-header {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 calc(-1 * var(--space-8)) var(--space-6);
    padding: var(--space-5) var(--space-8);
    background: var(--surface-elevated, #fff);
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  
  .volunteering-theme-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  
  /* Centred section header (same style as summary "Key Performance Indicators") */
  .volunteering-theme-header .volunteering-section-header {
    flex: 1;
    min-width: 0;
    text-align: center;
    margin-bottom: 0;
  }
  
  .volunteering-theme-header .section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-black);
    background: linear-gradient(135deg, #1f2937, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.025em;
  }
  
  .volunteering-theme-header .section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    margin: 0;
  }
  
  .volunteering-wave-selector {
    flex-shrink: 0;
    padding: var(--space-1) 0;
  }
  
  .volunteering-wave-select {
    min-width: 160px;
    padding: 10px 14px;
    font-size: var(--text-base, 0.9375rem);
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    background: var(--surface, #fafbfc);
    border: 2px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-lg, 10px);
    cursor: pointer;
    appearance: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .volunteering-wave-select:hover {
    border-color: var(--primary-300, rgba(99, 102, 241, 0.4));
    background: var(--white, #fff);
  }
  
  .volunteering-wave-select:focus {
    outline: none;
    border-color: var(--primary-500, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  }
  
  /* Coming soon (other waves – each wave has its own theme) */
  .volunteering-coming-soon-section {
    margin-top: 0;
  }
  
  .volunteering-coming-soon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 360px;
    padding: var(--space-12) var(--space-8);
    background: linear-gradient(135deg, var(--surface-elevated, #fff) 0%, var(--surface, #f8fafc) 100%);
    border: 2px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-2xl, 16px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  }
  
  .volunteering-coming-soon-icon {
    color: var(--text-muted, #94a3b8);
    margin-bottom: var(--space-5);
  }
  
  .volunteering-coming-soon-title {
    margin: 0 0 var(--space-3);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
  }
  
  .volunteering-coming-soon-text {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base, 1rem);
    color: var(--text-secondary, #475569);
    max-width: 440px;
    line-height: 1.6;
  }
  
  .volunteering-coming-soon-text strong {
    color: var(--text-primary, #1e293b);
  }
  
  .volunteering-coming-soon-hint {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-tertiary, #64748b);
  }
  
  /* ==========================================================================
     WAVE RESOURCES (seminar video + report link)
     ========================================================================== */
  
  .wave-resources-section {
    margin-bottom: var(--space-8);
  }
  
  .wave-resources-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-2xl, 16px);
    background: linear-gradient(135deg, #f9fafb 0%, #eef2ff 100%);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    /* Smooth transition - but don't animate position to prevent layout thrashing */
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
  }
  
  /* ==========================================================================
     PICTURE-IN-PICTURE
     The iframe stays in the DOM at all times. Adding pip-active makes it
     position:fixed so it floats to the corner — no reload, no interruption.
     ========================================================================== */

  /* Floating iframe in PiP mode */
  .wave-resources-iframe.pip-active {
    position: fixed !important;
    right: 16px;
    bottom: 16px;
    top: auto !important;
    left: auto !important;
    width: 320px !important;
    height: 180px !important;
    border-radius: 0 0 10px 10px;
    z-index: 9998;
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 60px rgba(99, 102, 241, 0.2);
    transition: box-shadow 0.25s ease;
  }

  /* Controls bar sits directly above the floating iframe */
  .pip-controls-bar {
    position: fixed;
    right: 16px;
    bottom: 196px; /* 16px gap + 180px video height */
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.97);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 -4px 20px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
      opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.25s;
    will-change: transform, opacity;
  }

  .pip-controls-bar.pip-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .pip-controls-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
  }

  .pip-controls-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .pip-controls-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .pip-controls-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .pip-controls-btn:active {
    transform: scale(0.92);
  }

  /* Placeholder shown in the original video slot when video is floating */
  .wave-resources-aspect.pip-video-active::after {
    content: "Playing in mini player";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.82);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-medium, 500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: inherit;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .pip-controls-bar {
      transition: opacity 0.1s, visibility 0.1s;
      transform: translateY(0);
    }
    .pip-controls-btn {
      transition: none;
    }
  }

  /* Mobile: smaller PiP */
  @media (max-width: 480px) {
    .wave-resources-iframe.pip-active {
      width: 240px !important;
      height: 135px !important;
      right: 8px;
      bottom: 8px;
    }
    .pip-controls-bar {
      width: 240px;
      right: 8px;
      bottom: 143px; /* 8px + 135px */
    }
    .pip-controls-title {
      font-size: 12px;
    }
  }

  /* Hide legacy PiP control elements if present */
  .wave-resources-pip-controls,
  .wave-resources-pip-title {
    display: none !important;
  }
  
  /* ==========================================================================
     WAVE RESOURCES - Default State (Non-floating)
     ========================================================================== */
  
  .wave-resources-media {
    width: 100%;
  }
  
  .wave-resources-aspect {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
    background: #000;
  }

  .wave-resources-placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  }

  .wave-resources-placeholder-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #64748b;
  }

  .wave-resources-placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  .wave-resources-placeholder-title {
    margin: 0;
    font-size: 14px;
  }
  
  .wave-resources-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  .wave-resources-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4, 16px);
  }
  
  .wave-resources-title {
    margin: 0;
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-bold, 700);
    color: var(--text-primary, #1e293b);
  }
  
  .wave-resources-text {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #475569);
    line-height: 1.6;
  }
  
  .wave-resources-fallback {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
  }
  
  .wave-resources-fallback a {
    color: var(--primary-600, #4f46e5);
    text-decoration: underline;
  }
  
  .wave-resources-fallback a:hover {
    color: var(--primary-700, #4338ca);
  }
  
  /* ==========================================================================
     WAVE RESOURCES - Action Buttons (View Report / Download Report)
     ========================================================================== */
  
  .wave-resources-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin-top: var(--space-2, 8px);
  }
  
  .wave-resources-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: 12px 20px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-lg, 10px);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    line-height: 1;
  }
  
  /* Primary Button - Download Report */
  .wave-resources-actions .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  }
  
  .wave-resources-actions .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
    transform: translateY(-2px);
  }
  
  .wave-resources-actions .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  }
  
  /* Secondary Button - View Report */
  .wave-resources-actions .btn-secondary {
    background: var(--surface-elevated, #fff);
    color: var(--text-primary, #1e293b);
    border: 2px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  
  .wave-resources-actions .btn-secondary:hover {
    background: var(--surface, #f8fafc);
    border-color: var(--primary-300, rgba(99, 102, 241, 0.4));
    color: var(--primary-600, #4f46e5);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
  }
  
  .wave-resources-actions .btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  /* Button icons */
  .wave-resources-actions .btn i,
  .wave-resources-actions .btn svg {
    font-size: 1em;
    flex-shrink: 0;
  }
  
  /* Prevent global spinner/loading behavior on resource buttons */
  .wave-resources-actions .btn.loading,
  .wave-resources-actions .btn.is-loading,
  .wave-resources-actions .btn.btn-loading,
  .wave-resources-actions .btn[disabled] {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }
  
  .wave-resources-actions .btn .spinner,
  .wave-resources-actions .btn .loading-spinner,
  .wave-resources-actions .btn .fa-spinner {
    display: none !important;
  }
  
  /* Ensure icons stay visible */
  .wave-resources-actions .btn .fa-eye,
  .wave-resources-actions .btn .fa-download,
  .wave-resources-actions .btn .fa-file-powerpoint {
    display: inline-block !important;
    animation: none !important;
  }
  
  /* Responsive: theme header padding when dashboard-content padding changes */
  @media (max-width: 1024px) {
    .volunteering-theme-header {
      margin-left: calc(-1 * var(--space-6));
      margin-right: calc(-1 * var(--space-6));
      padding-left: var(--space-6);
      padding-right: var(--space-6);
    }
  }
  
  @media (max-width: 768px) {
    .volunteering-theme-header {
      margin-left: calc(-1 * var(--space-4));
      margin-right: calc(-1 * var(--space-4));
      padding: var(--space-3) var(--space-4);
    }
  
    .volunteering-theme-header-inner {
      flex-direction: column;
      gap: var(--space-3);
    }
  
    .volunteering-theme-header .section-title {
      font-size: var(--text-2xl);
    }
  
    .volunteering-wave-selector {
      width: 100%;
      justify-content: center;
    }
  
    .volunteering-wave-select {
      min-width: 140px;
      flex: 1;
      max-width: 200px;
    }
  
    .wave-resources-card {
      grid-template-columns: 1fr;
    }
  
    .wave-resources-actions {
      flex-direction: column;
    }
  
    .wave-resources-actions .btn {
      width: 100%;
      justify-content: center;
    }
  
    /* Smaller PiP on mobile */
    .wave-resources-card.wave-resources-floating {
      width: 280px;
      right: var(--space-2, 8px);
      bottom: var(--space-2, 8px);
    }
  }
  
  /* ==========================================================================
     LAYOUT STRUCTURE
     ========================================================================== */
  
     .vol-row-group {
      display: grid;
      gap: 20px;
      margin-bottom: 24px;
    }
    
    /* Two-column layouts */
    .vol-row-kpi,
    .vol-row-two-col {
      grid-template-columns: repeat(2, 1fr);
    }
    
    /* Full-width layouts */
    .vol-row-wide {
      grid-template-columns: 1fr;
    }
    
    /* Settlement layout: smaller + larger card */
    .vol-row-settlement {
      grid-template-columns: 1fr 1.8fr;
      align-items: stretch;
    }
    
    /* Combined card styling */
    .dashboard-card--combined {
      padding: 0 !important;
    }
    
    .card-combined-inner {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      height: 100%;
    }
    
    .card-combined-section {
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
    }
    
    .card-combined-divider {
      background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.08) 50%, transparent 90%);
    }
    
    /* Card variants */
    .dashboard-card--kpi .chart-container {
      min-height: 140px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
    }
  
    /* Center the donut chart (Dedicated Volunteer Manager) */
    #vol_managerBars.chart-container {
      justify-content: center;
      align-items: center;
    }
    
    .dashboard-card--wide .chart-container {
      min-height: 100px;
    }
    
    .dashboard-card--capacity .chart-container {
      min-height: 200px;
    }
    
    .vol-row-two-col .chart-container {
      min-height: 240px;
    }
    
    /* ==========================================================================
       TOOLTIP
       ========================================================================== */
    
    .vol-chart-tooltip {
      position: fixed;
      background: linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.95));
      backdrop-filter: blur(12px);
      color: #f8fafc;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 9999;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
      max-width: 280px;
      line-height: 1.5;
    }
    
    .vol-chart-tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .vol-chart-tooltip .tooltip-label {
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .vol-chart-tooltip .tooltip-pct {
      color: #a78bfa;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    
    /* ==========================================================================
       COLOUR PALETTE
       ========================================================================== */
    
    :root {
      --vol-color-0: #6366f1;
      --vol-color-1: #10b981;
      --vol-color-2: #f59e0b;
      --vol-color-3: #ef4444;
      --vol-color-4: #8b5cf6;
      --vol-color-5: #06b6d4;
      --vol-color-6: #ec4899;
      --vol-color-7: #14b8a6;
      --vol-color-8: #f97316;
      --vol-color-9: #64748b;
    }
    
    .vol-bar-0 { background: linear-gradient(90deg, #6366f1, #4f46e5); }
    .vol-bar-1 { background: linear-gradient(90deg, #10b981, #059669); }
    .vol-bar-2 { background: linear-gradient(90deg, #f59e0b, #d97706); }
    .vol-bar-3 { background: linear-gradient(90deg, #ef4444, #dc2626); }
    .vol-bar-4 { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
    .vol-bar-5 { background: linear-gradient(90deg, #06b6d4, #0891b2); }
    .vol-bar-6 { background: linear-gradient(90deg, #ec4899, #db2777); }
    .vol-bar-7 { background: linear-gradient(90deg, #14b8a6, #0d9488); }
    .vol-bar-8 { background: linear-gradient(90deg, #f97316, #ea580c); }
    .vol-bar-9 { background: linear-gradient(90deg, #64748b, #475569); }
    
    /* ==========================================================================
       HORIZONTAL BAR LIST (Workforce-style: Change in Paid Staff)
       Enough Volunteers, Change in Volunteer Time, Volunteering & Settlement Policy
       ========================================================================== */
    
    .vol-horizontal-bars {
      display: flex;
      flex-direction: column;
      gap: var(--space-4, 16px);
      width: 100%;
    }
    
    .vol-horizontal-item {
      display: flex;
      align-items: center;
      gap: var(--space-4, 16px);
      padding: 4px 0;
      cursor: pointer;
      transition: background 0.2s;
      border-radius: 6px;
    }
    
    .vol-horizontal-item:hover {
      background: rgba(99, 102, 241, 0.06);
    }
    
    .vol-horizontal-label {
      font-size: var(--text-sm, 14px);
      font-weight: 600;
      color: var(--text-primary, #334155);
      min-width: 200px;
      width: 200px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vol-horizontal-container {
      flex: 1;
      height: 24px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 9999px;
      overflow: hidden;
      position: relative;
    }
    
    .vol-horizontal-fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
      width: 0%;
      position: relative;
    }
    
    .vol-horizontal-fill::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      animation: vol-shimmer 2s infinite;
    }
    
    .vol-horizontal-pct {
      font-size: var(--text-sm, 14px);
      font-weight: 700;
      color: var(--text-primary, #1e293b);
      min-width: 40px;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    
    @keyframes vol-shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    
    /* ==========================================================================
       DONUT CHART (Dedicated Volunteer Manager) – larger, refined
       ========================================================================== */
    
    .vol-donut-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 16px 0;
    }
    
    .vol-donut-chart {
      position: relative;
      width: 220px;
      height: 220px;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
    }
    
    .vol-donut-svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    
    .vol-donut-segment {
      transition: stroke-width 0.2s, filter 0.2s;
      cursor: pointer;
    }
    
    .vol-donut-segment:hover {
      stroke-width: 36;
      filter: brightness(1.12);
    }
    
    .vol-donut-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      width: 80%;
      max-width: 140px;
    }
    
    .vol-donut-center-value {
      display: block;
      font-size: 32px;
      font-weight: 800;
      color: var(--text-primary, #1e293b);
      line-height: 1.1;
      letter-spacing: -0.02em;
      /* Mild 3D: light top-left highlight, soft bottom-right shadow */
      text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.08);
    }
    
    .vol-donut-center-label {
      display: block;
      font-size: 12px;
      color: var(--text-secondary, #64748b);
      margin-top: 4px;
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vol-donut-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 18px;
    }
    
    .vol-donut-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary, #64748b);
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .vol-donut-legend-item:hover {
      background: rgba(99, 102, 241, 0.08);
    }
    
    .vol-donut-legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      flex-shrink: 0;
    }
    
    .vol-donut-legend-label {
      font-weight: 500;
    }
    
    .vol-donut-legend-pct {
      font-weight: 700;
      color: var(--text-primary, #334155);
    }
    
    /* ==========================================================================
       LOLLIPOP CHART (Recruitment & Retention – same as looking-ahead page)
       ========================================================================== */
    
    .vertical-lollipop-chart {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 300px;
      padding: var(--space-4, 16px) 0;
      gap: var(--space-2, 8px);
      position: relative;
    }
    
    .vertical-lollipop-chart .lollipop-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      height: 100%;
      position: relative;
      cursor: pointer;
      min-width: 0;
      justify-content: flex-end;
    }
    
    .vertical-lollipop-chart .lollipop-stick-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      width: 100%;
      justify-content: flex-end;
    }
    
    .vertical-lollipop-chart .lollipop-line {
      width: 4px;
      min-height: 0;
      border-radius: var(--radius-full, 9999px);
      transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
      height: 0;
      position: relative;
      overflow: hidden;
    }
    
    .vertical-lollipop-chart .lollipop-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
      transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
      transform: scale(0);
      margin-top: -2px;
      flex-shrink: 0;
    }
    
    .vertical-lollipop-chart .lollipop-percentage {
      font-size: var(--text-sm, 14px);
      font-weight: var(--font-bold, 700);
      color: var(--text-primary, #334155);
      margin-top: var(--space-2, 8px);
      opacity: 0;
      transition: opacity 0.5s ease;
      flex-shrink: 0;
    }
    
    .vertical-lollipop-chart .lollipop-label {
      font-size: var(--text-xs, 12px);
      font-weight: var(--font-medium, 500);
      color: var(--text-secondary, #64748b);
      text-align: center;
      line-height: var(--leading-tight, 1.25);
      max-width: 80px;
      margin-top: var(--space-1, 4px);
      flex-shrink: 0;
    }
    
    /* Volunteering lollipop colours (vol-bar-0..9) */
    .vertical-lollipop-chart .lollipop-item.vol-bar-0 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-0 .lollipop-dot {
      background: linear-gradient(to top, #4f46e5, #6366f1);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-1 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-1 .lollipop-dot {
      background: linear-gradient(to top, #059669, #10b981);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-2 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-2 .lollipop-dot {
      background: linear-gradient(to top, #d97706, #f59e0b);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-3 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-3 .lollipop-dot {
      background: linear-gradient(to top, #dc2626, #ef4444);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-4 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-4 .lollipop-dot {
      background: linear-gradient(to top, #7c3aed, #8b5cf6);
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-5 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-5 .lollipop-dot {
      background: linear-gradient(to top, #0891b2, #06b6d4);
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-6 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-6 .lollipop-dot {
      background: linear-gradient(to top, #db2777, #ec4899);
      box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-7 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-7 .lollipop-dot {
      background: linear-gradient(to top, #0d9488, #14b8a6);
      box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-8 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-8 .lollipop-dot {
      background: linear-gradient(to top, #ea580c, #f97316);
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    }
    .vertical-lollipop-chart .lollipop-item.vol-bar-9 .lollipop-line,
    .vertical-lollipop-chart .lollipop-item.vol-bar-9 .lollipop-dot {
      background: linear-gradient(to top, #475569, #64748b);
      box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
    }
    
    /* ==========================================================================
       PILL STAT (Binary/KPI questions)
       Large percentage + pill breakdown
       ========================================================================== */
    
    .vol-pill-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 12px 0;
    }
    
    .vol-pill-hero {
      text-align: center;
    }
    
    .vol-pill-hero-value {
      font-size: 48px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .vol-pill-hero-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary, #64748b);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    
    .vol-pill-bar-wrapper {
      width: 100%;
      max-width: 280px;
    }
    
    .vol-pill-bar {
      display: flex;
      height: 10px;
      border-radius: 5px;
      overflow: hidden;
      background: rgba(0,0,0,0.06);
    }
    
    .vol-pill-segment {
      height: 100%;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      min-width: 3px;
    }
    
    .vol-pill-segment:hover {
      filter: brightness(1.15);
      transform: scaleY(1.3);
    }
    
    .vol-pill-legend {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    
    .vol-pill-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary, #64748b);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background 0.2s;
    }
    
    .vol-pill-legend-item:hover {
      background: rgba(99, 102, 241, 0.08);
    }
    
    .vol-pill-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    
    .vol-pill-legend-pct {
      font-weight: 700;
      color: var(--text-primary, #334155);
    }
    
    /* ==========================================================================
       GAUGE CHART (Likert/Difficulty scales)
       Semi-circle gauge with pointer
       ========================================================================== */
    
    .vol-gauge-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0;
    }
    
    .vol-gauge-wrapper {
      position: relative;
      width: 180px;
      height: 100px;
    }
    
    .vol-gauge-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    
    .vol-gauge-track {
      fill: none;
      stroke: rgba(0,0,0,0.06);
      stroke-width: 16;
      stroke-linecap: round;
    }
    
    .vol-gauge-segment {
      fill: none;
      stroke-width: 16;
      stroke-linecap: round;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .vol-gauge-segment:hover {
      stroke-width: 20;
      filter: brightness(1.1);
    }
    
    .vol-gauge-center-text {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
    
    .vol-gauge-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--text-primary, #1e293b);
      line-height: 1;
    }
    
    .vol-gauge-label {
      font-size: 11px;
      color: var(--text-secondary, #64748b);
      margin-top: 2px;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vol-gauge-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 14px;
      margin-top: 12px;
      max-width: 320px;
    }
    
    .vol-gauge-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-secondary, #64748b);
      padding: 3px 6px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .vol-gauge-legend-item:hover {
      background: rgba(99, 102, 241, 0.08);
    }
    
    .vol-gauge-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    
    .vol-gauge-legend-pct {
      font-weight: 700;
      color: var(--text-primary, #334155);
    }
    
    /* ==========================================================================
       DIVERGING BAR (Change/Increase-Decrease questions)
       Centered bars going left/right from center
       ========================================================================== */
    
    .vol-diverging-container {
      padding: 8px 0;
    }
    
    .vol-diverging-bars {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 4px;
      height: 56px;
      max-width: 100%;
    }
    
    .vol-diverging-side {
      display: flex;
      align-items: center;
      flex: 1;
      max-width: 45%;
    }
    
    .vol-diverging-side--left {
      justify-content: flex-end;
    }
    
    .vol-diverging-side--right {
      justify-content: flex-start;
    }
    
    .vol-diverging-bar {
      height: 40px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      min-width: 50px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
    }
    
    .vol-diverging-bar:hover {
      transform: scaleY(1.1);
      filter: brightness(1.1);
    }
    
    .vol-diverging-bar--negative {
      background: linear-gradient(90deg, #ef4444, #f87171);
      border-radius: 6px 0 0 6px;
    }
    
    .vol-diverging-bar--neutral {
      background: linear-gradient(180deg, #94a3b8, #64748b);
      border-radius: 4px;
      min-width: 60px;
    }
    
    .vol-diverging-bar--positive {
      background: linear-gradient(90deg, #22c55e, #4ade80);
      border-radius: 0 6px 6px 0;
    }
    
    .vol-diverging-legend {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 14px;
    }
    
    .vol-diverging-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary, #64748b);
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 6px;
      transition: background 0.2s;
    }
    
    .vol-diverging-legend-item:hover {
      background: rgba(0,0,0,0.04);
    }
    
    .vol-diverging-legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
    
    .vol-diverging-legend-dot--negative { background: #ef4444; }
    .vol-diverging-legend-dot--neutral { background: #64748b; }
    .vol-diverging-legend-dot--positive { background: #22c55e; }
    
    .vol-diverging-legend-label {
      font-weight: 500;
    }
    
    .vol-diverging-legend-pct {
      font-weight: 700;
      color: var(--text-primary, #334155);
    }
    
    /* ==========================================================================
       RANKED BARS (Multi-select with many options)
       Clean horizontal bars with rank indicators
       ========================================================================== */
    
    .vol-ranked-bars {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .vol-ranked-item {
      display: grid;
      grid-template-columns: 24px 1fr 50px;
      gap: 10px;
      align-items: center;
      padding: 6px 8px;
      border-radius: 8px;
      transition: background 0.2s;
      cursor: pointer;
      opacity: 0;
      transform: translateY(8px);
      animation: rankSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    .vol-ranked-item:hover {
      background: rgba(99, 102, 241, 0.06);
    }
    
    @keyframes rankSlideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .vol-ranked-rank {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-tertiary, #94a3b8);
      text-align: center;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: rgba(0,0,0,0.04);
    }
    
    .vol-ranked-item:nth-child(1) .vol-ranked-rank {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #fff;
    }
    
    .vol-ranked-item:nth-child(2) .vol-ranked-rank {
      background: linear-gradient(135deg, #94a3b8, #64748b);
      color: #fff;
    }
    
    .vol-ranked-item:nth-child(3) .vol-ranked-rank {
      background: linear-gradient(135deg, #d97706, #b45309);
      color: #fff;
    }
    
    .vol-ranked-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    
    .vol-ranked-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary, #334155);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .vol-ranked-track {
      height: 6px;
      background: rgba(0,0,0,0.06);
      border-radius: 3px;
      overflow: hidden;
    }
    
    .vol-ranked-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .vol-ranked-pct {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary, #1e293b);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  
    /* ==========================================================================
       TOP 3 KPI CARDS (for ranked multi-select charts)
       ========================================================================== */
    
    .vol-ranked-kpi-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .vol-ranked-kpi-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    
    .vol-ranked-kpi-card {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
      border: 1px solid rgba(99, 102, 241, 0.12);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    
    .vol-ranked-kpi-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
      border-color: rgba(99, 102, 241, 0.25);
    }
    
    .vol-ranked-kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 12px 12px 0 0;
    }
    
    .vol-ranked-kpi-card:nth-child(1)::before {
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
    }
    
    .vol-ranked-kpi-card:nth-child(2)::before {
      background: linear-gradient(90deg, #94a3b8, #64748b);
    }
    
    .vol-ranked-kpi-card:nth-child(3)::before {
      background: linear-gradient(90deg, #d97706, #b45309);
    }
    
    .vol-ranked-kpi-rank {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-tertiary, #94a3b8);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .vol-ranked-kpi-card:nth-child(1) .vol-ranked-kpi-rank {
      color: #f59e0b;
    }
    
    .vol-ranked-kpi-card:nth-child(2) .vol-ranked-kpi-rank {
      color: #64748b;
    }
    
    .vol-ranked-kpi-card:nth-child(3) .vol-ranked-kpi-rank {
      color: #b45309;
    }
    
    .vol-ranked-kpi-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--text-primary, #1e293b);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    
    .vol-ranked-kpi-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary, #64748b);
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .vol-ranked-rest-header {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-tertiary, #94a3b8);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    
    .vol-ranked-rest-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    /* ==========================================================================
       STACKED BAR (Fallback for 2-6 options)
       ========================================================================== */
    
    .vol-stacked-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .vol-stacked-bar {
      display: flex;
      height: 36px;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(0,0,0,0.05);
    }
    
    .vol-stacked-segment {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
      min-width: 4px;
      position: relative;
    }
    
    .vol-stacked-segment::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
      pointer-events: none;
    }
    
    .vol-stacked-segment:hover {
      transform: scaleY(1.15);
      filter: brightness(1.1);
      z-index: 2;
    }
    
    .vol-stacked-segment-pct {
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      opacity: 0;
      transition: opacity 0.2s;
    }
    
    .vol-stacked-segment[data-show-label="true"] .vol-stacked-segment-pct {
      opacity: 1;
    }
    
    .vol-stacked-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
    }
    
    .vol-stacked-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .vol-stacked-legend-item:hover {
      background: rgba(99, 102, 241, 0.08);
    }
    
    .vol-stacked-legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    
    .vol-stacked-legend-label {
      color: var(--text-primary, #374151);
      font-weight: 500;
    }
    
    .vol-stacked-legend-pct {
      font-weight: 700;
      color: var(--text-secondary, #64748b);
      margin-left: 2px;
    }
    
    /* ==========================================================================
       EMPTY STATE
       ========================================================================== */
    
    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      color: var(--text-secondary, #64748b);
      font-size: 13px;
      background: rgba(0,0,0,0.02);
      border-radius: 8px;
      border: 1px dashed rgba(0,0,0,0.1);
    }
    
    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    
    @media (max-width: 1024px) {
      .vol-row-settlement {
        grid-template-columns: 1fr;
      }
      
      .vol-ranked-kpi-cards {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 768px) {
      .vol-row-kpi,
      .vol-row-two-col {
        grid-template-columns: 1fr;
      }
      
      .card-combined-inner {
        grid-template-columns: 1fr;
      }
      
      .card-combined-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent 10%, rgba(0,0,0,0.08) 50%, transparent 90%);
      }
      
      .vol-pill-hero-value {
        font-size: 40px;
      }
      
      .vol-diverging-bars {
        flex-direction: column;
        height: auto;
        gap: 8px;
      }
      
      .vol-diverging-side {
        max-width: 100%;
        justify-content: center !important;
      }
      
      .vol-diverging-bar {
        border-radius: 6px !important;
      }
      
      .vol-ranked-item {
        grid-template-columns: 20px 1fr 44px;
      }
      
      .vol-horizontal-bars .vol-horizontal-label {
        min-width: 150px;
        width: 150px;
        font-size: var(--text-xs, 12px);
      }
      
      .vol-horizontal-bars .vol-horizontal-container {
        height: 20px;
      }
      
      .vol-donut-chart {
        width: 200px;
        height: 200px;
      }
      
      .vol-ranked-kpi-cards {
        grid-template-columns: 1fr;
      }
      
      .vol-ranked-kpi-value {
        font-size: 24px;
      }
    }
    
    @media (max-width: 480px) {
      .vol-row-group {
        gap: 16px;
        margin-bottom: 16px;
      }
      
      .vol-pill-hero-value {
        font-size: 36px;
      }
      
      .vol-gauge-wrapper {
        width: 140px;
        height: 80px;
      }
      
      .vol-gauge-value {
        font-size: 22px;
      }
    }
    
    /* ==========================================================================
       ACCESSIBILITY
       ========================================================================== */
    
    .vol-pill-segment:focus-visible,
    .vol-gauge-segment:focus-visible,
    .vol-diverging-bar:focus-visible,
    .vol-ranked-item:focus-visible,
    .vol-stacked-segment:focus-visible,
    .vol-horizontal-item:focus-visible,
    .vertical-lollipop-chart .lollipop-item:focus-visible,
    .vol-donut-segment:focus-visible,
    .vol-ranked-kpi-card:focus-visible {
      outline: 2px solid #6366f1;
      outline-offset: 2px;
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .vol-pill-segment,
      .vol-gauge-segment,
      .vol-diverging-bar,
      .vol-ranked-fill,
      .vol-stacked-segment {
        transition: none;
      }
      
      .vol-ranked-item {
        animation: none;
        opacity: 1;
        transform: none;
      }
  
      .wave-resources-card.wave-resources-floating {
        animation: none;
      }
    }
  

/* ==========================================================================
   WAVE 14 – Government & Sector Relationships
   Aligned with dashboard card system + Wave 13 chart patterns
   ========================================================================== */

.w14-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.w14-section-heading {
  margin: var(--space-10) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid rgba(99, 102, 241, 0.12);
  text-align: center;
}

.w14-section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  background: linear-gradient(135deg, #1f2937, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.025em;
}

.w14-section-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary, #475569);
  margin: 0;
  font-weight: var(--font-medium);
}

.w14-changes-card .chart-container {
  display: flex;
  justify-content: center;
}

.w14-changes-card .vol-pill-stat {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.w14-changes-note {
  font-size: var(--text-sm);
  color: var(--text-secondary, #475569);
  line-height: 1.65;
  text-align: center;
  max-width: 520px;
  margin: var(--space-2) auto 0;
}

/* Engagement Ladder */
.w14-ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-2) 0;
}

.w14-ladder-row {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-2xl, 16px);
  padding: var(--space-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.5s ease forwards;
}

.w14-ladder-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.w14-ladder-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

.w14-ladder-row:hover::before {
  opacity: 1;
}

.w14-ladder-level {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary, #1e293b);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.w14-ladder-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

.w14-ladder-step {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-xl, 12px);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  background: var(--surface, #f8fafc);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.w14-ladder-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.w14-ladder-step[data-step="0"] { border-color: rgba(99, 102, 241, 0.35); background: #eef2ff; }
.w14-ladder-step[data-step="1"] { border-color: rgba(56, 189, 248, 0.35); background: #f0f9ff; }
.w14-ladder-step[data-step="2"] { border-color: rgba(245, 158, 11, 0.35); background: #fffbeb; }
.w14-ladder-step[data-step="3"] { border-color: rgba(239, 68, 68, 0.35); background: #fff1f2; }
.w14-ladder-step[data-step="4"] { border-color: rgba(148, 163, 184, 0.35); background: #f8fafc; }

.w14-ladder-step--active {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.w14-ladder-pct {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.w14-ladder-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  line-height: 1.3;
}

/* Relationship Heatmap */
.w14-heatmap {
  overflow-x: auto;
  padding: var(--space-1) 0;
}

.w14-heatmap-grid {
  min-width: 560px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(3, 120px);
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.w14-heatmap-head {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.02em;
}

.w14-heatmap-head:last-child {
  border-right: none;
}

.w14-heatmap-row-label {
  background: linear-gradient(90deg, #f8fafc, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 0.82rem;
  font-weight: 600;
  padding: var(--space-4);
  border-right: 1px solid var(--border, #e2e8f0);
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.w14-heatmap-cell {
  padding: var(--space-4) var(--space-2);
  border-right: 1px solid var(--border, #e2e8f0);
  border-top: 1px solid var(--border, #e2e8f0);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.w14-heatmap-cell:hover {
  transform: scale(1.04);
  z-index: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.w14-heat-risk   { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.w14-heat-warn   { background: linear-gradient(135deg, #fef9c3, #fde68a); }
.w14-heat-good   { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.w14-heat-strong { background: linear-gradient(135deg, #bbf7d0, #86efac); }

.w14-heatmap-pct {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.w14-heatmap-sublabel {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Overall relationship — 3×5 matrix (tiers × Likert responses) */
.w14-relationship-matrix-wrap {
  overflow-x: auto;
  padding: var(--space-1) 0;
  -webkit-overflow-scrolling: touch;
}

.w14-relationship-matrix {
  min-width: 720px;
  display: grid;
  grid-template-columns: minmax(168px, 1.35fr) repeat(5, minmax(88px, 1fr));
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 32px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.04);
  background: #fff;
}

/* Column headers */
.w14-rel-matrix-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-4) var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.02em;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.w14-rel-matrix-head:last-child {
  border-right: none;
}

.w14-rel-matrix-head--corner {
  align-items: flex-start;
  text-align: left;
  padding-left: var(--space-4);
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.w14-rel-matrix-head-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.w14-rel-matrix-head--sa {
  background: linear-gradient(180deg, #f0fdf4, #dcfce7);
  color: #14532d;
}
.w14-rel-matrix-head--sa .w14-rel-matrix-head-dot { background: linear-gradient(135deg, #15803d, #16a34a); }

.w14-rel-matrix-head--a {
  background: linear-gradient(180deg, #ecfdf5, #d1fae5);
  color: #166534;
}
.w14-rel-matrix-head--a .w14-rel-matrix-head-dot { background: linear-gradient(135deg, #22c55e, #4ade80); }

.w14-rel-matrix-head--n {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  color: #475569;
}
.w14-rel-matrix-head--n .w14-rel-matrix-head-dot { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }

.w14-rel-matrix-head--d {
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
  color: #92400e;
}
.w14-rel-matrix-head--d .w14-rel-matrix-head-dot { background: linear-gradient(135deg, #f59e0b, #fbbf24); }

.w14-rel-matrix-head--sd {
  background: linear-gradient(180deg, #fff1f2, #ffe4e6);
  color: #991b1b;
  border-right: none;
}
.w14-rel-matrix-head--sd .w14-rel-matrix-head-dot { background: linear-gradient(135deg, #ef4444, #f87171); }

/* Row labels */
.w14-rel-matrix-row-label {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  line-height: 1.35;
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.w14-relationship-matrix > .w14-rel-matrix-row-label:last-of-type {
  border-bottom: none;
}

/* Data cells */
.w14-rel-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-2);
  min-height: 76px;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: default;
  position: relative;
  opacity: 0;
  transform: scale(0.96);
  animation: w14MatrixCellIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

@keyframes w14MatrixCellIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.w14-rel-matrix-cell:nth-child(6n) {
  border-right: none;
}

.w14-relationship-matrix > .w14-rel-matrix-cell:nth-last-child(-n+5) {
  border-bottom: none;
}

.w14-rel-matrix-cell:hover {
  transform: scale(1.04);
  z-index: 2;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  filter: brightness(1.03);
}

.w14-rel-matrix-pct {
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.w14-rel-matrix-cell--sa {
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.18) 0%, rgba(21, 128, 61, 0.1) 100%);
}
.w14-rel-matrix-cell--a {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
}
.w14-rel-matrix-cell--n {
  background: linear-gradient(145deg, rgba(203, 213, 225, 0.35) 0%, rgba(241, 245, 249, 0.6) 100%);
}
.w14-rel-matrix-cell--d {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.22) 0%, rgba(245, 158, 11, 0.1) 100%);
}
.w14-rel-matrix-cell--sd {
  background: linear-gradient(145deg, rgba(248, 113, 113, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
}

/* Emphasise higher values subtly */
.w14-rel-matrix-cell[data-pct="0"] .w14-rel-matrix-pct {
  color: #94a3b8;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Future Expectations Matrix */
.w14-future-table {
  overflow-x: auto;
  padding: var(--space-1) 0;
}

.w14-future-grid {
  min-width: 560px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) repeat(3, 130px);
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.w14-future-head {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  border-right: 1px solid var(--border, #e2e8f0);
  letter-spacing: 0.02em;
}

.w14-future-head.row-label-head {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.w14-future-head.improve-head     { background: linear-gradient(180deg, #f0fdf4, #dcfce7); color: #166534; }
.w14-future-head.same-head        { background: linear-gradient(180deg, #f8fafc, #f1f5f9); color: #334155; }
.w14-future-head.deteriorate-head { background: linear-gradient(180deg, #fff1f2, #fee2e2); color: #991b1b; }

.w14-future-row-label {
  background: linear-gradient(90deg, #f8fafc, #fff);
  color: var(--text-primary, #1e293b);
  font-size: 0.82rem;
  font-weight: 600;
  padding: var(--space-4);
  border-right: 1px solid var(--border, #e2e8f0);
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.w14-future-cell {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  border-right: 1px solid var(--border, #e2e8f0);
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  cursor: default;
}

.w14-future-cell:hover {
  background: rgba(99, 102, 241, 0.04);
}

.w14-future-cell.improve-col     { background: #f0fdf4; }
.w14-future-cell.same-col        { background: #f8fafc; }
.w14-future-cell.deteriorate-col { background: #fff7f7; }

.w14-future-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-variant-numeric: tabular-nums;
}

.w14-future-cell:hover .w14-future-circle {
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.w14-circle-improve     { background: linear-gradient(135deg, #16a34a, #22c55e); }
.w14-circle-same        { background: linear-gradient(135deg, #64748b, #94a3b8); }
.w14-circle-deteriorate { background: linear-gradient(135deg, #dc2626, #ef4444); }

/* Priority Cards */
.w14-priority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
  width: 100%;
}

.w14-priority-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.w14-priority-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.w14-priority-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.w14-priority-header {
  padding: var(--space-5);
  color: #fff;
}

.w14-priority-header--high   { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.w14-priority-header--medium { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.w14-priority-header--low    { background: linear-gradient(135deg, #64748b, #94a3b8); }

.w14-priority-card-title {
  font-size: var(--text-base);
  font-weight: 800;
  margin: 0 0 var(--space-1);
  letter-spacing: -0.02em;
}

.w14-priority-card-note {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.w14-priority-list {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.w14-priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg, 10px);
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.w14-priority-item:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.15);
  transform: translateX(4px);
}

.w14-priority-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  line-height: 1.4;
  flex: 1;
}

.w14-priority-pct {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .w14-ladder-scale { grid-template-columns: repeat(3, 1fr); }
  .w14-priority-grid,
  .w14-priority-grid--two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .w14-ladder-scale { grid-template-columns: repeat(2, 1fr); }
  .w14-section-title { font-size: var(--text-xl); }
}