/* =========================================================
FAQ & Stakeholder Tabs
   ========================================================= */

.faq-section {
    display: none;
  }
  
  .faq-section.active {
    display: block;
  }
  
  .faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
  }
  
  .faq-question {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    color: #333;
  }
  
  .faq-question:hover {
    background-color: #f9fafb;
  }
  
  .faq-question::after {
    content: '▼';
    font-size: 0.8rem;
    transition: transform 0.2s ease;
  }
  
  .faq-question.active::after {
    transform: rotate(180deg);
  }
  
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0 1rem;
  }
  
  .faq-answer.active {
    max-height: 1000px;
    padding: 1rem;
  }
  
  .faq-answer p {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }

  .stakeholder-section {
    display: none;
  }
  
  .stakeholder-section.active {
    display: block;
  }

  /* =========================================================
   MEDISENSE SYSTEM DIAGRAM
   ========================================================= */

  .dg-section             { background: #e6efff; border-top: 1px solid #cfe0ff; border-bottom: 1px solid #cfe0ff; padding: 48px 16px 56px; }
    .dg-outer               { max-width: 1360px; margin: 0 auto; }
  .dg-header              { text-align: center; margin-bottom: 36px; }
  .dg-header h2           { font-size: 1.875rem; font-weight: 800; color: #111827; margin-bottom: 8px; }
  .dg-header p            { font-size: 1rem; color: #6b7280; }

  /* ── Side-by-side: diagram left, panel right ── */
    .dg-layout              { display: flex; gap: 40px; align-items: flex-start; }
  .dg-canvas-col          { flex: 1; min-width: 0; }

  /* Canvas */
    .dg-canvas              { position: relative; width: 100%; height: 720px; }
  .dg-svg                 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; overflow: visible; }

  /* ── Node cards ── */
  .dg-node                { position: absolute; border-radius: 16px; padding: 22px 16px 16px; text-align: center; background: white; color: #111827; box-shadow: 0 4px 20px rgba(0,0,0,0.09); cursor: pointer; z-index: 10; border: 2px solid transparent; transition: box-shadow 0.2s, border-color 0.2s; }
  .dg-node.dg-active      { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29,78,216,0.12), 0 4px 20px rgba(0,0,0,0.09); }

  /* Member & Provider: 185px wide */
  .dg-node-member         { top: 44px; left: 16px; width: 185px; }
  .dg-node-provider       { top: 44px; right: 16px; width: 185px; }

  /* Govt: 210px wide, centered */
  .dg-node-govt           { bottom: 28px; left: 50%; transform: translateX(-50%); width: 210px; }
  .dg-node-govt.dg-active { border-color: #1d4ed8; }

  /* ── Medisense: horizontal expansion ── */
  .dg-node-medisense      { top: 50%; left: 50%; transform: translate(-50%,-50%); background: #1d4ed8; color: white; display: flex; flex-direction: row; align-items: center; padding: 22px 16px 16px; width: auto; }
  .dg-node-medisense.dg-active { border-color: white; box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 4px 24px rgba(0,0,0,0.18); }

  /* Fixed-width core: icon + label */
  .dg-ms-core             { width: 175px; flex-shrink: 0; text-align: center; }

  /* Wings expand outward */
  .dg-ms-wing             { overflow: hidden; max-width: 0; opacity: 0; display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; transition: max-width 0.35s ease, opacity 0.28s ease, padding 0.28s ease; }
  .dg-node-medisense.dg-active .dg-ms-wing  { max-width: 148px; opacity: 1; }
  .dg-node-medisense.dg-active .dg-ms-left  { padding-right: 14px; }
  .dg-node-medisense.dg-active .dg-ms-right { padding-left: 14px; }
  .dg-ms-wing .dg-btn     { white-space: normal; width: 120px; text-align: center; line-height: 1.35; }

  /* ── Typography ── */
  .dg-icon                { font-size: 2.2rem; margin-bottom: 7px; }
  .dg-label               { font-weight: 800; font-size: 1.05rem; }
  .dg-sublabel            { font-size: 0.78rem; margin-top: 4px; opacity: 0.6; line-height: 1.35; }
  .dg-node-medisense .dg-sublabel { opacity: 0.82; }

  /* ── Flow buttons (Member / Provider / Govt) ── */
  .dg-flows               { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; display: flex; flex-direction: column; gap: 6px; transition: max-height 0.35s ease, opacity 0.28s ease, margin-top 0.28s ease; }
  .dg-node.dg-active .dg-flows { max-height: 240px; opacity: 1; margin-top: 12px; }

  .dg-btn                 { background: rgba(29,78,216,0.08); border: 1px solid rgba(29,78,216,0.2); border-radius: 999px; padding: 5px 10px; font-size: 0.74rem; font-weight: 600; color: #1d4ed8; cursor: pointer; text-align: center; white-space: nowrap; line-height: 1.4; transition: background 0.15s, color 0.15s, border-color 0.15s; }
  .dg-btn:hover,
  .dg-btn.dg-btn-active   { background: #1d4ed8; color: white; border-color: #1d4ed8; }

  .dg-node-medisense .dg-btn             { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.38); color: white; }
  .dg-node-medisense .dg-btn:hover,
  .dg-node-medisense .dg-btn.dg-btn-active { background: white; color: #1d4ed8; border-color: white; }

  /* ── Info panel (right column) ── */
    .dg-panel               { width: 450px; flex-shrink: 0; height: 720px; /* matches canvas */ background: #1e3a8a; border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 8px 32px rgba(30,58,138,0.18); }
  .dg-panel-inner         { text-align: center; }
  .dg-panel-icon          { font-size: 2.4rem; margin-bottom: 16px; opacity: 0.9; }
  .dg-panel-title         { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #93c5fd; margin-bottom: 12px; }
  .dg-panel-body          { font-size: 0.97rem; color: #dbeafe; line-height: 1.7; }
  .dg-panel-body strong   { color: white; }
  .dg-panel-body em       { color: #bfdbfe; font-style: normal; }
  .dg-hint                { margin-top: 10px; font-size: 0.72rem; color: #9ca3af; font-style: italic; text-align: center; }

  /* ── Mobile stakeholder tabs ── */
  .hiw-mobile             { display: none; background: #e6efff; border-top: 1px solid #cfe0ff; border-bottom: 1px solid #cfe0ff; padding: 32px 12px 40px; }
  .sh-section             { max-width: 760px; margin: 0 auto; }
  .sh-header              { text-align: center; margin-bottom: 16px; }
  .sh-header h2           { font-size: 1.55rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
  .sh-header p            { font-size: 0.95rem; color: #6b7280; }
  .sh-tabs                { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
  .sh-tabs::-webkit-scrollbar { display: none; }
  .sh-tab                 { flex: 0 0 auto; scroll-snap-align: start; border: 1px solid #bfdbfe; background: white; color: #1d4ed8; border-radius: 9999px; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
  .sh-tab.active          { background: #1d4ed8; color: white; border-color: #1d4ed8; }
  .sh-panel               { display: none; }
  .sh-panel.active        { display: block; }
  .sh-step                { display: flex; gap: 10px; margin-bottom: 10px; padding: 12px; border: 1px solid #dbeafe; border-radius: 12px; background: white; }
  .sh-step-num            { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 9999px; background: #1d4ed8; color: white; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
  .sh-step-text h4        { color: #111827; font-size: 0.94rem; font-weight: 700; margin-bottom: 2px; }
  .sh-step-text p         { color: #4b5563; font-size: 0.84rem; line-height: 1.45; }
  .sh-card                { margin-top: 12px; padding: 14px; border-radius: 14px; background: white; border: 1px solid #bfdbfe; }
  .sh-card-label          { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2563eb; margin-bottom: 8px; }
  .sh-card h4             { color: #1f2937; font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
  .sh-card-row            { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 0.86rem; color: #4b5563; }
  .sh-card-note           { margin-top: 8px; font-size: 0.78rem; color: #6b7280; }
  .sh-card-list           { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .sh-card-list li        { display: flex; gap: 8px; align-items: flex-start; color: #374151; font-size: 0.86rem; }
  .sh-check               { color: #2563eb; font-weight: 700; }
  .sh-card-stat           { border: 1px solid #dbeafe; border-radius: 10px; padding: 10px; margin-bottom: 8px; }
  .sh-card-stat-label     { color: #6b7280; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; }
  .sh-card-stat-value     { color: #1f2937; font-size: 1.15rem; font-weight: 800; line-height: 1.2; margin: 3px 0; }
  .sh-card-stat-value.blue  { color: #1d4ed8; }
  .sh-card-stat-value.green { color: #15803d; }
  .sh-card-stat-sub       { color: #6b7280; font-size: 0.78rem; }

  /* Mobile shows stakeholder tabs only; tablet/desktop shows system diagram only */
  @media (max-width: 767px) {
    .dg-section { display: none; }
    .hiw-mobile { display: block; }
  }
  @media (min-width: 768px) {
    .dg-section { display: block; }
    .hiw-mobile { display: none; }
  }


    /* =========================================================
   About page
   ========================================================= */
  /* ── Email obfuscation ── */
        .email-hidden { display: none; }

        /* ── Profile photo ── */
        .about-photo {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 8px 32px rgba(29,78,216,0.18);
            border: 4px solid white;
            flex-shrink: 0;
        }

        /* Placeholder shown when no photo uploaded yet */
        .about-photo-placeholder {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: #dbeafe;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 8px 32px rgba(29,78,216,0.18);
            border: 4px solid white;
            font-size: 5rem;
        }

        /* ── Contact card ── */
        .contact-card {
            background: #f0f7ff;
            border: 1.5px solid #bfdbfe;
            border-radius: 16px;
            padding: 28px 32px;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .contact-icon {
            width: 48px;
            height: 48px;
            background: #1d4ed8;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .email-obfuscated {
            font-family: 'Courier New', monospace;
            font-size: 1rem;
            font-weight: 600;
            color: #1d4ed8;
            letter-spacing: 0.01em;
        }

        /* ── Divider ── */
        .section-divider {
            height: 3px;
            width: 48px;
            background: #2563eb;
            border-radius: 999px;
            margin: 16px 0 20px;
        }

        /* ── Responsive bio layout ── */
        @media (max-width: 640px) {
            .bio-layout { flex-direction: column; align-items: center; text-align: center; }
            .about-photo, .about-photo-placeholder { width: 160px; height: 160px; }
            .contact-card { flex-direction: column; text-align: center; }
        }