/* Heliconflow Docs — styled to match the Heliconflow app design system
 * (journey-viral-frontend/src/styles/globals.css): Plus Jakarta Sans, violet
 * accent, dark-first with a data-theme light/dark toggle.
 * Fonts (Plus Jakarta Sans + JetBrains Mono) are loaded via <link> in each page head. */

:root {
  --bg-app:     #07070c;
  --bg-base:    #0e0e16;
  --bg-card:    #1a1a26;
  --bg-card2:   #1f1f2e;
  --bg-hover:   #22222f;
  --bg-input:   #13131e;

  --border:     rgba(255,255,255,0.07);
  --border-mid: rgba(255,255,255,0.12);

  --tx-primary:   #f0f0f8;
  --tx-secondary: #dcdcf4;
  --tx-muted:     #b8b8d8;
  --tx-faint:     #9090b8;

  --violet:      #8b6dff;
  --violet-dim:  #6b50d4;
  --violet-soft: rgba(139,109,255,0.12);
  --violet-glow: rgba(139,109,255,0.20);

  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius-card: 18px;
  --radius-md:   10px;
  --radius-sm:   7px;
  --radius-pill: 100px;
  --shadow-card: 0 2px 24px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);

  /* Accent palette for section badges, role badges, and flowchart nodes */
  --c-purple-bg: rgba(139,109,255,0.16); --c-purple-bd: rgba(139,109,255,0.55); --c-purple-tx: #b9a6ff;
  --c-teal-bg:   rgba(64,196,168,0.15);  --c-teal-bd:   rgba(64,196,168,0.50);  --c-teal-tx:   #5fd3b8;
  --c-coral-bg:  rgba(212,133,90,0.16);  --c-coral-bd:  rgba(212,133,90,0.50);  --c-coral-tx:  #e0986a;
  --c-green-bg:  rgba(77,170,112,0.16);  --c-green-bd:  rgba(77,170,112,0.50);  --c-green-tx:  #66c98a;
  --c-amber-bg:  rgba(212,168,85,0.15);  --c-amber-bd:  rgba(212,168,85,0.50);  --c-amber-tx:  #e0b766;
  --c-gray-bg:   rgba(120,120,170,0.15); --c-gray-bd:   rgba(120,120,170,0.45); --c-gray-tx:   #a0a0c8;
  --c-blue-bg:   rgba(84,153,212,0.16);  --c-blue-bd:   rgba(84,153,212,0.50);  --c-blue-tx:   #6fb0e8;
  --c-red-bg:    rgba(212,85,85,0.16);   --c-red-bd:    rgba(212,85,85,0.50);   --c-red-tx:    #e07070;
}

[data-theme="light"] {
  --bg-app:    #eeeef6;
  --bg-base:   #f5f5fb;
  --bg-card:   #ffffff;
  --bg-card2:  #ededf5;
  --bg-hover:  #e4e4ef;
  --bg-input:  #f0f0f8;

  --border:     rgba(0,0,0,0.08);
  --border-mid: rgba(0,0,0,0.14);

  --tx-primary:   #0d0d18;
  --tx-secondary: #3a3a52;
  --tx-muted:     #7070a0;
  --tx-faint:     #9a9ac0;

  --violet:      #7c5df5;
  --violet-dim:  #6448d0;
  --violet-soft: rgba(124,93,245,0.10);
  --violet-glow: rgba(124,93,245,0.18);

  --shadow-card: 0 2px 18px rgba(80,80,140,0.10);
  --shadow-lg:   0 8px 26px rgba(80,80,140,0.14), 0 2px 6px rgba(80,80,140,0.08);

  --c-purple-bg: rgba(124,93,245,0.12); --c-purple-bd: rgba(124,93,245,0.45); --c-purple-tx: #6448d0;
  --c-teal-bg:   rgba(15,110,86,0.10);  --c-teal-bd:   rgba(15,110,86,0.40);  --c-teal-tx:   #0f6e56;
  --c-coral-bg:  rgba(153,60,29,0.10);  --c-coral-bd:  rgba(153,60,29,0.40);  --c-coral-tx:  #993c1d;
  --c-green-bg:  rgba(59,109,17,0.10);  --c-green-bd:  rgba(59,109,17,0.40);  --c-green-tx:  #3b6d11;
  --c-amber-bg:  rgba(133,79,11,0.10);  --c-amber-bd:  rgba(133,79,11,0.40);  --c-amber-tx:  #854f0b;
  --c-gray-bg:   rgba(95,94,90,0.10);   --c-gray-bd:   rgba(95,94,90,0.35);   --c-gray-tx:   #5f5e5a;
  --c-blue-bg:   rgba(24,95,165,0.10);  --c-blue-bd:   rgba(24,95,165,0.40);  --c-blue-tx:   #185fa5;
  --c-red-bg:    rgba(163,45,45,0.10);  --c-red-bd:    rgba(163,45,45,0.40);  --c-red-tx:    #a32d2d;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 34px 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
p  { margin: 0 0 16px; }
a  { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dim); }
code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; color: var(--tx-secondary);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 100px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-thumb:hover { background: var(--tx-faint); }

/* ---------- Top navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: rgba(14,14,22,0.85);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(10px);
}
[data-theme="light"] .topnav { background: rgba(245,245,251,0.85); }
.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: var(--tx-primary); white-space: nowrap; flex-shrink: 0;
}
.nav-logo::before {
  content: 'HF';
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--violet-soft); border: 1px solid var(--violet-glow);
  color: var(--violet); font-size: 12px; font-weight: 700; letter-spacing: -0.03em;
}
.nav-logo .dot { color: var(--violet); font-weight: 600; }
.nav-links {
  display: flex; gap: 2px; margin-left: auto;
  overflow-x: auto; scrollbar-width: thin;
}
.nav-links a {
  display: inline-block; padding: 7px 11px;
  font-size: 13px; font-weight: 500; color: var(--tx-secondary);
  border-radius: var(--radius-sm); white-space: nowrap;
  border: 1px solid transparent; transition: all 0.15s;
}
.nav-links a:hover { background: var(--bg-hover); color: var(--tx-primary); }
.nav-links a.active {
  background: var(--violet-soft); border-color: var(--violet-glow);
  color: var(--violet); font-weight: 600;
}
.theme-toggle, .nav-toggle {
  flex-shrink: 0;
  background: var(--bg-card); color: var(--tx-secondary);
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1; padding: 6px 10px; cursor: pointer;
  font-family: var(--font); transition: all 0.15s;
}
.theme-toggle:hover, .nav-toggle:hover { background: var(--bg-hover); color: var(--tx-primary); }
.nav-toggle { display: none; }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin-left: 0;
    background: var(--bg-base); border-bottom: 1px solid var(--border);
    padding: 8px; max-height: 72vh; overflow-y: auto; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; font-size: 14px; }
}

/* ---------- Page layout ---------- */
.page-content { max-width: 1080px; margin: 0 auto; padding: 34px 24px 90px; }
.section-header { margin-bottom: 26px; }
.section-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.section-intro { color: var(--tx-muted); font-size: 15.5px; max-width: 780px; }

/* Accent themes (section badges) */
.theme-purple { background: var(--c-purple-bg); color: var(--c-purple-tx); }
.theme-teal   { background: var(--c-teal-bg);   color: var(--c-teal-tx); }
.theme-coral  { background: var(--c-coral-bg);  color: var(--c-coral-tx); }
.theme-green  { background: var(--c-green-bg);  color: var(--c-green-tx); }
.theme-amber  { background: var(--c-amber-bg);  color: var(--c-amber-tx); }
.theme-gray   { background: var(--c-gray-bg);   color: var(--c-gray-tx); }
.theme-blue   { background: var(--c-blue-bg);   color: var(--c-blue-tx); }
.theme-red    { background: var(--c-red-bg);    color: var(--c-red-tx); }

/* ---------- Flowchart ---------- */
.flowchart-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 14px 14px;
  margin-bottom: 38px;
  overflow-x: auto;
}
.flowchart-container svg { display: block; margin: 0 auto; max-width: 100%; }
.fc-node { cursor: default; }
.fc-shape { transition: filter .12s ease, stroke-width .12s ease; stroke-width: 1.4; }
.fc-node[data-node-id]:hover .fc-shape, .fc-node[style*="cursor"] .fc-shape { }
.fc-node:hover .fc-shape { filter: brightness(1.12); stroke-width: 2.4; }
.fc-node.active .fc-shape { stroke-width: 3; filter: brightness(1.15); }
.fc-label { font-family: var(--font); font-weight: 600; font-size: 13px; pointer-events: none; }
.fc-sub   { font-family: var(--font); font-weight: 400; font-size: 10.5px; pointer-events: none; }
.fc-edge  { fill: none; stroke: var(--border-mid); stroke-width: 1.6; }
.fc-edge.dashed { stroke-dasharray: 5 4; }
.fc-arrow { fill: var(--tx-faint); }
.fc-edge-label { font-family: var(--font); font-size: 10px; fill: var(--tx-faint); }
.fc-hint { text-align: center; color: var(--tx-faint); font-size: 12.5px; margin-top: 10px; }

/* Flowchart node colors (theme-aware via CSS vars) */
.fc-c-purple .fc-shape { fill: var(--c-purple-bg); stroke: var(--c-purple-bd); }
.fc-c-purple .fc-label, .fc-c-purple .fc-sub { fill: var(--c-purple-tx); }
.fc-c-teal .fc-shape { fill: var(--c-teal-bg); stroke: var(--c-teal-bd); }
.fc-c-teal .fc-label, .fc-c-teal .fc-sub { fill: var(--c-teal-tx); }
.fc-c-coral .fc-shape { fill: var(--c-coral-bg); stroke: var(--c-coral-bd); }
.fc-c-coral .fc-label, .fc-c-coral .fc-sub { fill: var(--c-coral-tx); }
.fc-c-green .fc-shape { fill: var(--c-green-bg); stroke: var(--c-green-bd); }
.fc-c-green .fc-label, .fc-c-green .fc-sub { fill: var(--c-green-tx); }
.fc-c-amber .fc-shape { fill: var(--c-amber-bg); stroke: var(--c-amber-bd); }
.fc-c-amber .fc-label, .fc-c-amber .fc-sub { fill: var(--c-amber-tx); }
.fc-c-gray .fc-shape { fill: var(--c-gray-bg); stroke: var(--c-gray-bd); }
.fc-c-gray .fc-label, .fc-c-gray .fc-sub { fill: var(--c-gray-tx); }
.fc-c-blue .fc-shape { fill: var(--c-blue-bg); stroke: var(--c-blue-bd); }
.fc-c-blue .fc-label, .fc-c-blue .fc-sub { fill: var(--c-blue-tx); }
.fc-c-red .fc-shape { fill: var(--c-red-bg); stroke: var(--c-red-bd); }
.fc-c-red .fc-label, .fc-c-red .fc-sub { fill: var(--c-red-tx); }

/* ---------- Steps + feature cards ---------- */
.step { margin-bottom: 14px; scroll-margin-top: 76px; }
.step > p { color: var(--tx-muted); max-width: 780px; }
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px; margin: 16px 0 10px;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px 17px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s, transform 0.1s;
}
.feature-card:hover { border-color: var(--border-mid); }
.feature-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 7px;
}
.feature-name { font-size: 14.5px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.feature-name .hint { font-weight: 400; color: var(--tx-faint); font-size: 12px; }
.role-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.role-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.role-admin        { background: var(--c-purple-bg); color: var(--c-purple-tx); }
.role-power-user   { background: var(--c-purple-bg); color: var(--c-purple-tx); opacity: 0.92; }
.role-qual-reviewer{ background: var(--c-blue-bg);   color: var(--c-blue-tx); }
.role-editor       { background: var(--c-teal-bg);   color: var(--c-teal-tx); }
.role-shoot-lead   { background: var(--c-teal-bg);   color: var(--c-teal-tx); opacity: 0.92; }
.role-post-lead    { background: var(--c-amber-bg);  color: var(--c-amber-tx); }
.role-manager      { background: var(--c-gray-bg);   color: var(--c-gray-tx); }
.role-writer       { background: var(--c-coral-bg);  color: var(--c-coral-tx); }
.role-client-user  { background: var(--c-gray-bg);   color: var(--c-gray-tx); }
.role-talent       { background: var(--c-gray-bg);   color: var(--c-gray-tx); }
.role-all          { background: var(--violet); color: #fff; }
.role-editable     { background: var(--c-green-bg);  color: var(--c-green-tx); }
.role-owner        { background: var(--c-gray-bg);   color: var(--c-gray-tx); border: 1px dashed var(--border-mid); }
.feature-description { font-size: 13.5px; color: var(--tx-muted); margin: 0; }
.feature-description ul { margin: 6px 0; padding-left: 18px; }
.feature-trigger { font-size: 12.5px; color: var(--tx-faint); margin-top: 9px; }
.trigger-label { font-weight: 600; color: var(--tx-muted); }
.feature-notification {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 11px;
  padding: 9px 11px;
  background: var(--violet-soft);
  border: 1px solid var(--violet-glow);
  border-radius: var(--radius-sm);
  color: var(--tx-secondary); font-size: 12.5px; line-height: 1.5;
}
.feature-notification .notification-icon { flex-shrink: 0; color: var(--violet); }

/* Notes / callouts */
.callout {
  background: var(--violet-soft);
  border: 1px solid var(--violet-glow);
  border-left: 3px solid var(--violet);
  border-radius: var(--radius-sm);
  padding: 12px 15px; margin: 16px 0; font-size: 13.5px; color: var(--tx-secondary);
}
.callout p:last-child { margin-bottom: 0; }

/* Data tables */
.table-wrap { overflow-x: auto; margin: 16px 0; border-radius: var(--radius-md); }
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.data-table th, .data-table td {
  padding: 9px 13px; text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.data-table th {
  background: var(--bg-card2); font-weight: 600; white-space: nowrap;
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-secondary);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td.cell-yes { color: var(--c-green-tx); font-weight: 700; }
.data-table td.cell-no  { color: var(--tx-faint); }
.data-table td.cell-scoped { color: var(--c-amber-tx); font-weight: 600; }

.step ul { color: var(--tx-muted); font-size: 14px; }

/* ---------- Inline glossary term ---------- */
.term { border-bottom: 1px dotted var(--violet); cursor: help; color: inherit; }
.term:hover { color: var(--violet); }

/* ---------- Glossary modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: var(--radius-card); max-width: 480px; width: 100%;
  padding: 26px; position: relative; box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 16px; right: 18px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--tx-faint); cursor: pointer;
}
.modal-close:hover { color: var(--tx-primary); }
.modal-term { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.modal-definition { color: var(--tx-muted); }
.modal-section { margin-top: 14px; }
.modal-label {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--violet); margin-bottom: 3px;
}
.modal-section p { margin: 0; color: var(--tx-muted); font-size: 13.5px; }
.modal-link { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; }

/* ---------- Index: section cards ---------- */
.section-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px;
}
@media (min-width: 720px) { .section-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .section-cards { grid-template-columns: repeat(4, 1fr); } }
.section-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); border-top: 3px solid var(--tx-faint);
  padding: 17px; text-decoration: none; color: var(--tx-primary);
  box-shadow: var(--shadow-card); transition: transform .12s ease, border-color .12s ease;
}
.section-card:hover { transform: translateY(-3px); border-color: var(--border-mid); }
.section-card.accent-purple { border-top-color: var(--c-purple-bd); }
.section-card.accent-teal   { border-top-color: var(--c-teal-bd); }
.section-card.accent-coral  { border-top-color: var(--c-coral-bd); }
.section-card.accent-green  { border-top-color: var(--c-green-bd); }
.section-card.accent-amber  { border-top-color: var(--c-amber-bd); }
.section-card.accent-gray   { border-top-color: var(--c-gray-bd); }
.section-card.accent-blue   { border-top-color: var(--c-blue-bd); }
.section-card-name { font-weight: 700; font-size: 15px; margin-bottom: 5px; letter-spacing: -0.01em; }
.section-card-desc { font-size: 12.5px; color: var(--tx-muted); margin-bottom: 10px; }
.section-card-arrow { font-size: 13px; color: var(--violet); font-weight: 600; }

/* ---------- Roles page ---------- */
.role-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 16px 0 28px;
}
.role-ref-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 15px 17px; box-shadow: var(--shadow-card);
}
.role-ref-card h3 { margin: 0 0 6px; }
.role-ref-card p { margin: 0; font-size: 13.5px; color: var(--tx-muted); }

/* ---------- Glossary page ---------- */
.glossary-search {
  width: 100%; padding: 13px 15px; font-size: 15px; font-family: var(--font);
  border: 1px solid var(--border-mid); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--tx-primary); margin: 10px 0 22px;
  outline: none;
}
.glossary-search:focus { border-color: var(--violet-glow); }
.glossary-search::placeholder { color: var(--tx-faint); }
.glossary-list { display: flex; flex-direction: column; gap: 8px; }
.glossary-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.glossary-term-btn {
  width: 100%; text-align: left; background: none; border: none;
  padding: 15px 17px; font-family: var(--font); font-size: 15px; font-weight: 600;
  color: var(--tx-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.glossary-term-btn:hover { color: var(--violet); }
.glossary-term-btn .chev { color: var(--tx-faint); font-size: 12px; transition: transform .15s ease; }
.glossary-item.open .chev { transform: rotate(90deg); color: var(--violet); }
.glossary-body { display: none; padding: 0 17px 17px; }
.glossary-item.open .glossary-body { display: block; }
.glossary-body .definition { color: var(--tx-muted); margin: 0 0 10px; }
.glossary-body .sub-label {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--violet); margin-bottom: 3px;
}
.glossary-body .sub-text { margin: 0 0 10px; font-size: 13.5px; color: var(--tx-muted); }
.glossary-empty { color: var(--tx-faint); padding: 20px 4px; }

/* footer */
.docs-footer {
  max-width: 1080px; margin: 0 auto; padding: 26px 24px 56px;
  color: var(--tx-faint); font-size: 12px; border-top: 1px solid var(--border);
}