img,svg {
 max-width: 100%;
 height: auto;
}

/* .team-modal > .tabs__panel {
  display: none !important;
} */

.pipeline-container {
    background: var(--primary-ultra-dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--primary-ultra-light);
    padding: 2rem 1rem;
    box-sizing: border-box;
    border-radius: 16px;

box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 10px 20px -5px rgba(0, 0, 0, 0.03),
    0 25px 50px -12px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 60px -10px rgba(178, 255, 247, 0.35);
}

.pipeline-container *, .pipeline-container *::before, .pipeline-container *::after {
    box-sizing: border-box;
}

.pipeline-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pipeline-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-l);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.program-badge {
    font-family: 'Inter', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    background: rgba(178, 255, 247, 0.15);
    color: #b2fff7;
    border: 1px solid rgba(178, 255, 247, 0.3);
    flex-shrink: 0;
}

.info-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 1px;
    background: #1e3a52;
    border: 1px solid #1e3a52;
    border-radius: 8px;
    overflow: hidden;
}

.info-grid.top {
    margin-bottom: 2rem;
}

.info-cell {
    background: #0d2137;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

.info-value .line {
    display: block;
}

.info-value .pill {
    display: inline-block;
    background: rgba(178, 255, 247, 0.15);
    color: #FFFFFF;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    border: 1px solid rgba(178, 255, 247, 0.3);
    font-family: 'Inter', monospace;
    font-size: 1rem;
    font-weight: 800;
}

.info-cell.with-pill {
    padding-top: 0.75rem;
    align-items: center;
}

.info-cell.with-pill .info-label {
    margin-bottom: 0.5rem;
}

.info-value.highlight {
    color: #b2fff7;
}

.status-block {
    display: flex;
    margin-top: 2rem;
    background: #1e3a52;
    border: 1px solid #1e3a52;
    border-radius: 8px;
    overflow: hidden;
}

.status-label-vertical {
    background: #0d2137;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-right: 1px solid #1e3a52;
}

.status-label-vertical span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.status-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: #1e3a52;
}

.timeline {
    position: relative;
    padding-left: 0;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.indicator-node {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.indicator-node.complete {
    background: rgba(178, 255, 247, 0.15);
    border: 1.5px solid #b2fff7;
    color: #b2fff7;
}

.indicator-node.in-progress {
    background: var(--tertiary);
    border: 1.5px solid #FC6044;
    color: #000;
    box-shadow: 0 0 20px rgba(252, 96, 68, 0.15);
}

.indicator-node.pending {
    background: #0d2137;
    border: 1.5px solid #1e3a52;
    color: #d0d0d0;
}

.pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #808080;
}

.connector {
    width: 3px;
    flex: 1;
    min-height: 20px;
    margin-top: 8px;
    background-image: repeating-linear-gradient(to bottom, #1e3a52 0px, #1e3a52 6px, transparent 6px, transparent 12px);
    border-radius: 2px;
    position: relative;
    margin-bottom: 12px;
}

.connector::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #1e3a52;
}

.connector.complete, .connector.to-in-progress {
    background-image: repeating-linear-gradient(to bottom, #b2fff7 0px, #b2fff7 6px, transparent 6px, transparent 12px);
}

.connector.complete::after, .connector.to-in-progress::after {
    border-top-color: #b2fff7;
}

.connector.in-progress {
    background-image: repeating-linear-gradient(to bottom, #FC6044 0px, #FC6044 6px, transparent 6px, transparent 12px);
}

.connector.in-progress::after {
    border-top-color: #FC6044;
}

.timeline-content {
    background: #0d2137;
    border: 1px solid #1e3a52;
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
    transition: all 0.3s ease;
    min-height: 140px;
}

.timeline-content:hover {
    border-color: #2a4a6a;
    transform: translateX(4px);
}

.complete > .timeline-content {
    border: 1px solid #B2FFF7;
}

.content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.stage-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0;
}

.stage-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #AAA;
}

.stage-badge.complete {
    background: rgba(178, 255, 247, 0.15);
    color: #b2fff7;
}

.stage-badge.in-progress {
    background: var(--tertiary);
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(252, 96, 68, 0.5), 0 0 24px rgba(252, 96, 68, 0.25);
}

.stage-badge.pending {
    background: #132a42;
    color: #a0a0a0;
}

.stage-description {
    font-size: 0.875rem;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.stage-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.stage-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #b0b0b0;
}

.meta-icon {
    width: 14px;
    height: 14px;
}

.inline-progress {
    flex: 1;
    min-width: 100px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.progress-location-icon {
    width: 24px;
    height: 24px;
    color: #FC6044;
    flex-shrink: 0;
    margin-right: -2px;
}

.inline-progress-bar {
    flex: 1;
    height: 3px;
    /* background: repeating-linear-gradient(to right, #132a42 0px, #132a42 6px, transparent 6px, transparent 12px); */
    border-radius: 2px;
    overflow: visible;
    position: relative;
    margin-right: 12px;
}

.inline-progress-fill {
    height: 100%;
    background: repeating-linear-gradient(to right, #FC6044 0px, #FC6044 6px, transparent 6px, transparent 12px);
    border-radius: 2px 0 0 2px;
    position: relative;
}

.inline-progress-fill::before {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 9px solid #FC6044;
}

.in-progress-highlight{
  border: 1px solid var(--tertiary);
  background: var(--primary-dark);
}


/* .spinner svg {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
} */

@media (max-width: 480px) {
    .pipeline-container { padding: 1.5rem 1rem; }
    .info-grid { grid-template-columns: 1fr; }
    .status-grid { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 40px 1fr; gap: 0.75rem; }
    .indicator-node { width: 38px; height: 38px; border-radius: 10px; }
    .timeline-content { padding: 1rem; }
    .content-header { flex-direction: column; gap: 0.5rem; }
    .stage-badge { align-self: flex-start; }
    .stage-footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .inline-progress { width: 100%; }
}


/* WP-parity: the WordPress site's ACSS emits these six neutral shades as malformed oklch() values
   (copied verbatim below). Browsers treat any property that uses them as invalid, so it falls back
   (colour inherits, borders/shadows/backgrounds disappear) and var() fallbacks are NOT used.
   Kept here so Studio renders identically to WP. Delete this block to use the real neutral shades. */
:root:root {
  --neutral-dark: oklch(0.3714949436 -6.6152899073E 89.8755633012);
  --neutral-light: oklch(0.8853053083 -4.7001133695E 89.8755633647);
  --neutral-semi-dark: oklch(0.4640021401 -6.270478625E 89.875562675);
  --neutral-semi-light: oklch(0.7251571623 -5.2970494901E 89.8755629815);
  --neutral-ultra-dark: oklch(0.217786501 -0.8822269133E 89.8755622173);
  --neutral-ultra-light: oklch(0.9611513604 -4.4174048234E 89.8755630407);
}