/* Redstitch — Recruiting journey (session 3)
 * Static visual diagram. Vertical phases, horizontal branch columns inside
 * phases. Tokens mirror dashboard.css / crm.css for visual continuity. The
 * channel palette is local: muted blue/purple/tan/green/gray pills + a
 * thin left border on each node card.
 */

:root {
  --bg-app: #faf9f5;
  --bg-surface: #ffffff;
  --bg-muted: #f5f4ef;

  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-tertiary: #999999;

  --border-faint: rgba(0, 0, 0, 0.08);
  --border-muted: rgba(0, 0, 0, 0.14);
  --border-strong: rgba(0, 0, 0, 0.24);

  --brand: #c8102e;
  --brand-deep: #a30d26;
  --brand-tint: #fdebee;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Channel palette — pill bg, pill text, node accent border */
  --ch-email-bg:       #eef4fa;
  --ch-email-text:     #345a7e;
  --ch-email-border:   #9ab8d2;

  --ch-sms-bg:         #f1edf7;
  --ch-sms-text:       #5a4878;
  --ch-sms-border:     #b0a3c8;

  --ch-phone-bg:       #faf2e6;
  --ch-phone-text:     #7a5520;
  --ch-phone-border:   #c9a878;

  --ch-inperson-bg:    #eef4e6;
  --ch-inperson-text:  #3d5527;
  --ch-inperson-border:#9ab882;

  --ch-auto-bg:        #ecebe5;
  --ch-auto-text:      #5a5a52;
  --ch-auto-border:    #b8b5a8;

  --ch-owner-bg:       #e3e1d8;
  --ch-owner-text:     #3a3a32;
  --ch-owner-border:   #807a6e;

  /* Outcomes */
  --outcome-joined-bg:   #eaf3de;
  --outcome-joined-text: #173404;
  --outcome-neutral-bg:  #ecebe5;
  --outcome-neutral-text:#5a5a52;

  /* Phase header tints */
  --phase-1-accent: #b8b5a8;  /* mostly automated → neutral */
  --phase-2-accent: #c9a878;  /* owner-led → warm tan */
  --phase-3-accent: #c8102e;  /* high-touch → brand red */
  --phase-4-accent: #9ab882;  /* onboarding → soft green */

  --connector-color: rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg-app);
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;
}

/* ─── App header (matches dashboard / crm exactly) ───────────── */

.app-header {
  background: var(--bg-surface);
  border-bottom: 0.5px solid var(--border-faint);
}
.app-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.wordmark-logo {
  height: 32px;
  width: auto;
  display: block;
}
.wordmark-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.back-link {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}
.back-link:hover { color: var(--text-primary); }

/* ─── Page shell ─────────────────────────────────────────────── */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.page-title { margin-bottom: 24px; }
.page-title h1 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 4px;
}
.page-title .subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

/* ─── Legend ─────────────────────────────────────────────────── */

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-faint);
  border-radius: var(--radius-md);
  margin-bottom: 36px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.legend-divider {
  width: 1px;
  height: 18px;
  background: var(--border-faint);
}

/* ─── Channel pills ──────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg-muted);
  color: var(--text-secondary);
}
.pill--email    { background: var(--ch-email-bg);    color: var(--ch-email-text); }
.pill--sms      { background: var(--ch-sms-bg);      color: var(--ch-sms-text); }
.pill--phone    { background: var(--ch-phone-bg);    color: var(--ch-phone-text); }
.pill--inperson { background: var(--ch-inperson-bg); color: var(--ch-inperson-text); }
.pill--auto     { background: var(--ch-auto-bg);     color: var(--ch-auto-text); }
.pill--owner    { background: var(--ch-owner-bg);    color: var(--ch-owner-text); }
.pill--joined   { background: var(--outcome-joined-bg);  color: var(--outcome-joined-text); }
.pill--neutral  { background: var(--outcome-neutral-bg); color: var(--outcome-neutral-text); }

/* Branch diamond glyph for legend & decision markers */
.diamond {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--text-secondary);
  transform: rotate(45deg);
}

/* ─── Phase ──────────────────────────────────────────────────── */

.phase { margin-bottom: 56px; }
.phase:last-child { margin-bottom: 0; }

.phase-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-faint);
  border-left: 3px solid var(--phase-1-accent);
  border-radius: var(--radius-md);
  margin-bottom: 32px;
}
.phase--2 .phase-header { border-left-color: var(--phase-2-accent); }
.phase--3 .phase-header { border-left-color: var(--phase-3-accent); }
.phase--4 .phase-header { border-left-color: var(--phase-4-accent); }

.phase-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.phase-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}
.phase-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.phase-meta .dot { margin: 0 6px; color: var(--text-tertiary); }

.phase-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── Node card ──────────────────────────────────────────────── */

.node {
  width: 250px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-faint);
  border-left: 3px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.node--email    { border-left-color: var(--ch-email-border); }
.node--sms      { border-left-color: var(--ch-sms-border); }
.node--phone    { border-left-color: var(--ch-phone-border); }
.node--inperson { border-left-color: var(--ch-inperson-border); }
.node--auto     { border-left-color: var(--ch-auto-border); }
.node--owner    {
  border-left-color: var(--ch-owner-border);
  border-left-width: 4px;
}

.node-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.node-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.node-timing {
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.node-preview {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.45;
}
.node-preview + .node-preview { margin-top: 2px; }
.node-preview .label {
  font-style: normal;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-right: 4px;
}

/* Token highlights inside content previews */
.token {
  font-style: normal;
  color: var(--ch-email-text);
  background: var(--ch-email-bg);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ─── Branch decision marker ─────────────────────────────────── */

.decision {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 0.5px dashed var(--border-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.decision .diamond { width: 8px; height: 8px; background: var(--text-tertiary); }

/* ─── Connectors (vertical lines between elements) ───────────── */

.connector {
  width: 1px;
  height: 28px;
  background: var(--connector-color);
  margin: 0 auto;
}
.connector--short { height: 16px; }
.connector--tall  { height: 40px; }
.connector--dashed {
  background: transparent;
  border-left: 1px dashed var(--connector-color);
  width: 0;
}

/* ─── Branch container ──────────────────────────────────────── */

.branch {
  width: 100%;
  display: grid;
  gap: 0 20px;
  position: relative;
}
.branch--2 { grid-template-columns: 1fr 1fr; }
.branch--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Horizontal fan-out bar at the top of every branch container */
.branch::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc((100% / var(--cols, 2)) / 2);
  right: calc((100% / var(--cols, 2)) / 2);
  height: 1px;
  background: var(--connector-color);
}
.branch--2 { --cols: 2; }
.branch--3 { --cols: 3; }

.branch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 0;
}
/* Short vertical stub from horizontal bar down to the column header */
.branch-col::before {
  content: '';
  display: block;
  width: 1px;
  height: 14px;
  background: var(--connector-color);
}

.branch-col-header {
  margin-top: 6px;
  margin-bottom: 12px;
  padding: 5px 12px;
  background: var(--bg-muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 100%;
}
.branch-col-header em {
  font-style: normal;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ─── Outcome / terminal nodes ───────────────────────────────── */

.outcome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border: 0.5px solid var(--border-faint);
  background: var(--outcome-neutral-bg);
  color: var(--outcome-neutral-text);
  max-width: 280px;
}
.outcome--joined {
  background: var(--outcome-joined-bg);
  color: var(--outcome-joined-text);
}
.outcome--driff-kill {
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-weight: 500;
}
.outcome-note {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 6px;
  text-align: center;
  max-width: 280px;
  line-height: 1.4;
}

/* "exits to Phase X" arrow label */
.exit-arrow {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* ─── Entry node (single, centered, at top of diagram) ───────── */

.entry-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.entry-node .node { text-align: center; align-items: center; }
.entry-node .node-title { text-align: center; }

/* ─── Convergence cap (shown below a branch when columns merge) */

.converge-cap {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 28px;
}
.converge-cap::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc((100% / var(--cols, 2)) / 2);
  right: calc((100% / var(--cols, 2)) / 2);
  height: 1px;
  background: var(--connector-color);
}
.converge-cap--3 { --cols: 3; }
.converge-cap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--connector-color);
}

/* ─── Handoff (dashed) ──────────────────────────────────────── */

.handoff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ─── Footer note ───────────────────────────────────────────── */

.journey-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 0.5px solid var(--border-faint);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}

/* ─── Responsive: collapse 3-col to stacked on narrow screens ── */

@media (max-width: 900px) {
  .branch--3, .branch--2 { grid-template-columns: 1fr; }
  .branch::before, .branch-col::before { display: none; }
  .branch-col { margin-bottom: 24px; }
  .converge-cap::before { display: none; }
  .node { width: 100%; max-width: 320px; }
}