/* Workflow Visualizer — Mobile-first timeline + panel */

.wv-flow{
  --wv-bg: transparent;
  --wv-surface: #0f172a;
  --wv-surface-2:#111827;
  --wv-border: rgba(148,163,184,.22);
  --wv-text:#e5e7eb;
  --wv-muted: rgba(226,232,240,.75);
  --wv-accent:#f59e0b;
  --wv-sep: rgba(226,232,240,.38);
  --wv-dot-off:#ef4444;
  --wv-dot-on:#22c55e;
  /* Frame (requested) */
  --wv-frame: rgba(255,255,255,.26);
  --wv-panel-bg: color-mix(in srgb, var(--wv-surface) 90%, transparent);
  --wv-node-bg: color-mix(in srgb, var(--wv-surface) 92%, transparent);
  --wv-media-bg: color-mix(in srgb, var(--wv-surface-2) 92%, transparent);
  --wv-tag-bg: color-mix(in srgb, var(--wv-accent) 22%, transparent);
  --wv-tag-text: var(--wv-text);
  background: var(--wv-wrap-bg, var(--wv-bg));
  border: 4px solid var(--wv-frame);
  border-radius: 48px;
  padding: 20px;
}

.wv-flow[data-scheme="light"]{
  --wv-surface:#ffffff;
  --wv-surface-2:#f8fafc;
  --wv-border: rgba(15,23,42,.12);
  --wv-text:#0f172a;
  --wv-muted: rgba(15,23,42,.72);
  --wv-sep: rgba(15,23,42,.32);
  --wv-tag-bg: color-mix(in srgb, var(--wv-accent) 18%, transparent);
  --wv-tag-text: var(--wv-text);
  --wv-frame: rgba(15,23,42,.14);
}

.wv-wrap{ max-width: 1200px; margin: 0 auto; padding: 24px 16px; overflow-x: hidden; }

/* Narrow pages: never overflow */
.wv-flow, .wv-flow *{ box-sizing: border-box; }

.wv-head{ text-align:center; margin-bottom: 16px; }
.wv-title{ margin:0; font-size: clamp(22px, 2.2vw, 34px); line-height:1.15; color: var(--wv-text); }
.wv-subtitle{ margin:8px auto 0; max-width: 60ch; color: var(--wv-muted); font-size: 15px; }

/* Tabs: desktop only; scroll instead of wrapping */
.wv-tabs{ display:none; gap:12px; padding: 8px 2px 12px; flex-wrap:wrap; overflow: hidden; }
.wv-tab{ flex: 1 1 0; min-width: 0; text-align:left; border:1px solid var(--wv-border); background: color-mix(in srgb, var(--wv-surface) 85%, transparent); color: var(--wv-text); border-radius: 14px; padding: 14px 14px; line-height:1.2; }
.wv-tab__label{ display:block; font-size: 14px; font-weight: 600; }
.wv-tab__label{ overflow-wrap: anywhere; word-break: break-word; }
.wv-tab.is-active{ outline: none; border-color: color-mix(in srgb, var(--wv-accent) 70%, var(--wv-border)); background: color-mix(in srgb, var(--wv-accent) 16%, var(--wv-surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wv-accent) 35%, transparent); }
.wv-tab.is-active .wv-tab__label{ color: var(--wv-text); }

.wv-cta {
    background-color: #9caa1b;
    text-align: center;
}

/* Flow select: mobile/tablet */
.wv-flow-select{ margin: 10px 0 14px; }
.wv-flow-select select{ width:100%; max-width: 720px; margin: 0 auto; display:block; border-radius: 12px; border:1px solid var(--wv-border); background: var(--wv-node-bg); color: var(--wv-text); padding: 10px 12px; font-size: 14px; }

/* Pane */
.wv-flow-pane{ display:none; }
.wv-flow-pane.is-active{ display:block; }

/* Panel */
.wv-panel{ display:grid; grid-template-columns: 1fr; gap: 14px; background: var(--wv-panel-bg); border:1px solid var(--wv-border); border-radius: 18px; padding: 14px; }
.wv-panel__nav{ display:flex; gap:10px; justify-content:flex-end; }
.wv-panel__btn{ width:40px; height:40px; border-radius: 12px; border:1px solid var(--wv-border); background: var(--wv-media-bg); color: var(--wv-text); font-size: 22px; line-height: 1; cursor:pointer; }
.wv-panel__label{ display:inline-flex; align-items:center; gap:6px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: var(--wv-tag-bg); color: var(--wv-tag-text); border: 1px solid color-mix(in srgb, var(--wv-accent) 35%, var(--wv-border)); }
.wv-panel__title{ margin: 6px 0 0; font-size: 18px; color: var(--wv-text); }
.wv-panel__context{ margin: 8px 0 0; color: var(--wv-muted); font-size: 14px; }
.wv-panel__list{ margin: 10px 0 0; padding-left: 18px; color: var(--wv-text); font-size: 14px; }
.wv-panel__media{ border:1px solid var(--wv-border); border-radius: 14px; background: var(--wv-media-bg); min-height: 160px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.wv-panel__img{ width:100%; height:100%; object-fit: cover; display:block; }
.wv-panel__img--ph{ width:100%; height: 220px; background: repeating-linear-gradient(45deg, rgba(148,163,184,.12), rgba(148,163,184,.12) 10px, rgba(148,163,184,.06) 10px, rgba(148,163,184,.06) 20px); }

/* Timeline (mobile-first vertical) */
.wv-timeline{ list-style:none; padding: 14px 0 0; margin: 0; display:flex; flex-direction: column; gap: 10px; justify-content: center;}
.wv-node{ display:block; cursor:pointer; }
.wv-node__card{ border:1px solid var(--wv-border); border-radius: 14px; padding: 12px 12px; background: var(--wv-node-bg); }
.wv-node__title{ font-weight: 700; color: var(--wv-text); font-size: 14px; display:flex; align-items:flex-start; gap: 10px; }
.wv-node__statusdot{ width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; margin-top: 4px; background: var(--wv-dot-off); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wv-dot-off) 22%, transparent); }
.wv-node.is-selected .wv-node__statusdot{ background: var(--wv-dot-on); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wv-dot-on) 22%, transparent); }
.wv-node__desc{ margin-top: 6px; color: var(--wv-muted); font-size: 13px; line-height: 1.35; }
.wv-node.is-selected .wv-node__card{ border-color: color-mix(in srgb, var(--wv-accent) 60%, var(--wv-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wv-accent) 20%, transparent); }

/* Vertical line segments */
.wv-line{ display:none; }

/* Desktop: horizontal timeline and wider panel */
@media (min-width: 992px){
  .wv-tabs{ display:flex; }
  .wv-flow-select{ display:none; }

  .wv-panel{ grid-template-columns: 1.35fr .65fr; align-items: stretch; }
  .wv-panel__nav{ grid-column: 1 / -1; justify-content:flex-start; }

  .wv-timeline{ flex-direction: row; align-items: stretch; gap: 14px; padding-top: 18px; }
  .wv-node{ width: 240px; }

  /* Horizontal connector lines */
  .wv-line{ display:block; width: 32px; height: 2px; align-self: center; background: var(--wv-sep); border-radius: 2px; }
}

/* Tablet: keep vertical, but more space */
@media (min-width: 768px) and (max-width: 991px){
  .wv-wrap{ padding: 28px 18px; }
  .wv-panel{ padding: 16px; }
}

/* Prevent narrow column clipping */
.wv-flow-pane{ max-width: 100%; }