/* Barlow fonts are loaded from process-flow.php (matches v4 standalone doc). */

html { scroll-behavior: smooth; }

/* ── Full-viewport chart only (/web/process-flow.php) ── */
html.pf-process-flow-doc,
body.pf-process-flow-fullscreen {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

body.pf-process-flow-fullscreen {
  min-height: 100vh;
  min-height: 100dvh;
}

#pf-root.pf-chart-only {
  --page-bg: #fff;
  --bg: #fff;
  background: #fff;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: none;
}

#pf-root.pf-chart-only::before {
  display: none;
}

#pf-root.pf-chart-only .diagram,
#pf-root.pf-chart-only .pf-v5-diagram {
  position: relative;
  z-index: 1;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  display: grid;
  place-items: center;
  line-height: 0;
  overflow: hidden;
}

/* 1600×900 viewBox — scale to fit viewport without scroll */
#pf-root.pf-chart-only .pf-v5-diagram svg {
  display: block;
  width: min(100vw, calc(100dvh * 1600 / 900));
  width: min(100vw, calc(100vh * 1600 / 900));
  height: min(100dvh, calc(100vw * 900 / 1600));
  height: min(100vh, calc(100vw * 900 / 1600));
  max-width: 100vw;
  max-height: 100dvh;
  max-height: 100vh;
  min-width: 0;
}

/* Process flow — palette + typography aligned with docs/PARALLEL_ProcessFlow_v5.html */
#pf-root {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  --navy: #1b4f8a;
  --cyan: #29abe2;
  --navy-dim: rgba(27, 79, 138, 0.10);
  --cyan-dim: rgba(41, 171, 226, 0.07);
  --page-bg: #edf3f9;
  --bg: var(--page-bg);
  --bg2: #fff;
  --teal: var(--navy);
  --teal-dim: var(--navy-dim);
  --teal-glow: rgba(41, 171, 226, 0.35);
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.16);
  --blue: var(--cyan);
  --blue-dim: var(--cyan-dim);
  --purple: #4338ca;
  --purple-dim: rgba(67, 56, 202, 0.12);
  --green: #047857;
  --green-dim: rgba(4, 120, 87, 0.1);
  --red: #dc2626;
  --muted: #6a8faa;
  --text: #0e2a45;
  --text-mid: #2d5070;
  --text-dim: #6a8faa;
  --border: rgba(27, 79, 138, 0.15);
  --mono: 'Barlow Condensed', system-ui, sans-serif;
  --sans: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  text-align: left;
  overflow-x: auto;
}

#pf-root *,
#pf-root *::before,
#pf-root *::after {
  box-sizing: border-box;
}

#pf-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27, 79, 138, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

  /* Swimlane diagram (extracted from docs/PARALLEL_ProcessFlow_v5.html) */
  #pf-root .diagram,
  #pf-root .pf-v5-diagram {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(27, 79, 138, 0.07);
    margin-bottom: 0;
    line-height: 0;
  }
  #pf-root .pf-v5-diagram svg {
    display: block;
    min-width: 1600px;
    width: 1600px;
    height: auto;
    max-width: none;
  }
  @media (prefers-reduced-motion: reduce) {
    #pf-root .pf-v5-diagram svg .pf-v5-flow-line {
      animation: none !important;
    }
  }

  .page { position:relative; z-index:1; max-width:1700px; margin:0 auto; padding:28px 24px 60px; }

  /* ── Header (v5) ── */
  .header{display:flex;align-items:center;gap:20px;margin-bottom:24px;
    padding-bottom:18px;border-bottom:2.5px solid var(--navy);}
  .wordmark{font-family:var(--mono);font-size:38px;font-weight:700;
    letter-spacing:-0.01em;line-height:1;flex-shrink:0;}
  .wp{color:var(--navy);} .ws{color:var(--cyan);letter-spacing:-0.05em;} .we{color:var(--navy);}
  .header-text{flex:1;}
  .header-text h2{font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:0.22em;color:var(--cyan);margin-bottom:3px;text-transform:uppercase;}
  .header-text p{font-size:12px;font-weight:300;color:var(--text-mid);line-height:1.5;}
  .header-badge{font-family:var(--mono);font-size:9px;letter-spacing:0.14em;
    color:var(--navy);background:var(--navy-dim);border:1px solid rgba(27,79,138,0.2);
    padding:5px 11px;border-radius:2px;text-align:center;flex-shrink:0;}
  .header-badge span{display:block;font-size:14px;font-weight:700;color:var(--cyan);}

  /* ── Layer System ── */
  .layers { display:flex; flex-direction:column; gap:0; }

  .layer {
    position:relative; border-radius:8px; padding:24px 24px 28px;
    border:1px solid var(--border); margin-bottom:0;
    background: rgba(255,255,255,0.72);
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .layer:hover { border-color: rgba(27,79,138,0.28); box-shadow: 0 4px 20px rgba(27,79,138,0.06); }

  .layer-label {
    font-family:var(--mono); font-size:10px; letter-spacing:0.22em;
    font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:10px;
    color: var(--text-mid);
  }
  .layer-label::after {
    content:''; flex:1; height:1px; background:var(--border);
  }
  .layer-label-parallel { font-size:11px; letter-spacing:0.18em; }

  /* Layer colour themes (tints harmonised with v4 navy/cyan lanes) */
  .layer-dev {
    background: linear-gradient(135deg, rgba(27,79,138,0.06) 0%, rgba(255,255,255,0.85) 55%);
  }
  .layer-dev .layer-label { color: var(--text-dim); letter-spacing:0.2em; }
  .layer-cloud   { background: linear-gradient(135deg, rgba(41,171,226,0.07) 0%, rgba(255,255,255,0.9) 55%); }
  .layer-cloud .layer-label   { color: var(--navy); }
  .layer-flexus  { background: linear-gradient(135deg, rgba(67,56,202,0.08) 0%, rgba(255,255,255,0.9) 55%); }
  .layer-flexus .layer-label  { color: var(--purple); }
  .layer-edge    { background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(255,255,255,0.92) 55%); }
  .layer-edge .layer-label    { color: var(--amber); }
  .layer-parallel{
    background: linear-gradient(135deg, rgba(27,79,138,0.08) 0%, rgba(41,171,226,0.05) 50%, rgba(255,255,255,0.92) 100%);
    border-color: rgba(27,79,138,0.2);
  }
  .layer-parallel .layer-label{ color: var(--navy); }
  .layer-physical{ background: linear-gradient(135deg, rgba(4,120,87,0.08) 0%, rgba(255,255,255,0.92) 55%); }
  .layer-physical .layer-label{ color: var(--green); }

  /* ── Cards ── */
  .cards { display:flex; flex-wrap:wrap; gap:12px; }
  .card {
    border-radius:8px; padding:14px 16px; border:1px solid var(--border);
    background: #fff; flex:1; min-width:160px;
    cursor:pointer; transition: all 0.25s; position:relative; overflow:hidden;
    box-shadow: 0 2px 10px rgba(27,79,138,0.04);
  }
  .card::before {
    content:''; position:absolute; inset:0; opacity:0; transition:opacity 0.3s;
  }
  .card:hover { transform:translateY(-2px); border-color:rgba(27,79,138,0.22); box-shadow: 0 6px 20px rgba(27,79,138,0.08); }
  .card:hover::before { opacity:1; }

  .card-icon { font-size:22px; margin-bottom:8px; }
  .card-title { font-family:var(--mono); font-size:12px; font-weight:700; margin-bottom:4px; }
  .card-desc  { font-size:11px; color:var(--text-dim); line-height:1.5; }
  .card-tag   {
    display:inline-block; font-family:var(--mono); font-size:9px;
    letter-spacing:0.15em; padding:2px 6px; border-radius:2px; margin-top:6px;
  }

  /* Card colour variants */
  .card-purple { border-color:rgba(67,56,202,0.28); }
  .card-purple::before { background:var(--purple-dim); }
  .card-purple .card-title { color:var(--purple); }
  .card-purple .card-tag { background:var(--purple-dim); color:var(--purple); }

  .card-blue { border-color:rgba(41,171,226,0.35); }
  .card-blue::before { background:var(--blue-dim); }
  .card-blue .card-title { color:var(--navy); }
  .card-blue .card-tag { background:var(--cyan-dim); color: var(--navy); }

  .card-amber { border-color:rgba(245,166,35,0.25); }
  .card-amber::before { background:var(--amber-dim); }
  .card-amber .card-title { color:var(--amber); }
  .card-amber .card-tag { background:var(--amber-dim); color:var(--amber); }

  .card-teal { border-color:rgba(27,79,138,0.28); }
  .card-teal::before { background:var(--teal-dim); }
  .card-teal .card-title { color:var(--navy); }
  .card-teal .card-tag { background:var(--cyan-dim); color: var(--navy); }

  .card-green { border-color:rgba(46,204,113,0.25); }
  .card-green::before { background:var(--green-dim); }
  .card-green .card-title { color:var(--green); }
  .card-green .card-tag { background:var(--green-dim); color:var(--green); }

  .card-red { border-color:rgba(231,76,60,0.25); }
  .card-red::before { background:rgba(231,76,60,0.1); }
  .card-red .card-title { color:var(--red); }
  .card-red .card-tag { background:rgba(231,76,60,0.15); color:var(--red); }

  /* ── Arrow connectors between layers ── */
  .connector {
    display:flex; align-items:center; justify-content:center;
    gap:0; padding:0; position:relative; z-index:2; margin: -1px 0;
  }
  .conn-inner {
    display:flex; align-items:center; gap:16px;
    padding:10px 20px; background:#fff;
    border-radius:24px; border:1px solid var(--border);
    font-family:var(--mono); font-size:10px;
    letter-spacing:0.06em;
    box-shadow: 0 2px 12px rgba(27,79,138,0.05);
  }
  .conn-arrow { display:flex; flex-direction:column; align-items:center; gap:4px; }
  .conn-line  { width:2px; height:20px; position:relative; }
  .conn-line-down  { background: linear-gradient(to bottom, transparent, var(--teal)); }
  .conn-line-up    { background: linear-gradient(to top, transparent, var(--amber)); }
  .conn-arrowhead-down { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--teal); }
  .conn-arrowhead-up   { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid var(--amber); }

  .flow-label { color:var(--text-dim); letter-spacing:0.1em; font-size:10px; }
  .flow-down  { color:var(--navy);  }
  .flow-up    { color:var(--amber); }

  /* ── PARA//EL detail grid inside layer ── */
  .parallel-grid {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px;
  }
  @media(max-width:900px) { .parallel-grid { grid-template-columns:1fr 1fr; } }
  @media(max-width:600px) { .parallel-grid { grid-template-columns:1fr; } }

  /* ── Process steps inside PARA//EL ── */
  .steps-row {
    display:flex; flex-wrap:wrap; gap:0; margin-top:20px;
    border:1px solid rgba(27,79,138,0.18); border-radius:8px; overflow:hidden;
    background: #fff;
  }
  .step {
    flex:1; min-width:120px; padding:12px 14px;
    border-right:1px solid rgba(27,79,138,0.1);
    position:relative;
  }
  .step:last-child { border-right:none; }
  .step-num {
    font-family:var(--mono); font-size:9px; color:var(--cyan);
    letter-spacing:0.15em; margin-bottom:4px;
  }
  .step-title { font-size:11px; font-weight:600; margin-bottom:3px; }
  .step-desc  { font-size:10px; color:var(--text-dim); line-height:1.4; }
  .step::after {
    content:'▶'; position:absolute; right:-8px; top:50%; transform:translateY(-50%);
    color:var(--navy); font-size:10px; z-index:1;
  }
  .step:last-child::after { display:none; }

  /* ── Data flow (v5) ── */
  .flow-section{margin-top:28px;}
  .flow-table{width:100%;border-collapse:collapse;font-size:11.5px;}
  .flow-table th {
    font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
    color:#fff;background:var(--navy);text-align:left;padding:8px 10px;font-weight:600;
    border-bottom:1px solid var(--border);
  }
  .flow-table td {
    padding:7px 10px;border-bottom:1px solid var(--border);
    vertical-align:top;line-height:1.5;color:var(--text-mid);
  }
  .flow-table tr:nth-child(even) td { background: rgba(27,79,138,0.02); }
  .flow-table tr:hover td { background: var(--cyan-dim); }

  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
  .dot-teal   { background:var(--navy); }
  .dot-amber  { background:var(--amber); }
  .dot-blue   { background:var(--blue); }
  .dot-purple { background:var(--purple); }

  /* ── Animations ── */
  @keyframes pulse-teal  { 0%,100%{box-shadow:0 0 0 0 var(--teal-glow)}  50%{box-shadow:0 0 0 8px transparent} }
  @keyframes flow-down   { 0%{transform:translateY(-4px);opacity:0} 100%{transform:translateY(4px);opacity:1} }

  .pulse { animation: pulse-teal 2.5s infinite; }

  /* ── Data pulses on connectors ── */
  .data-pulse {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    animation: blink 1.8s ease-in-out infinite;
  }
  .data-pulse.teal   { background:var(--teal);  }
  .data-pulse.amber  { background:var(--amber); animation-delay:0.4s; }
  .data-pulse.blue   { background:var(--blue);  animation-delay:0.8s; }

  @keyframes blink { 0%,100%{opacity:0.2} 50%{opacity:1} }

  /* Section divider */
  .section-title {
    font-family:var(--mono);font-size:10px;letter-spacing:0.22em;
    color:var(--text-dim);margin-bottom:10px;font-weight:600;
    display:flex;align-items:center;gap:10px;
  }
  .section-title::before,.section-title::after {
    content:'';flex:1;height:1px;background:var(--border);
  }

  .page > footer {
    text-align:center;margin-top:32px;font-family:var(--mono);font-size:10px;
    letter-spacing:0.13em;color:var(--text-dim);padding-top:14px;
    border-top:1px solid var(--border);
  }

  @media (max-width: 720px) {
    .header { flex-wrap: wrap; }
    .header-badge { margin-left: auto; }
  }