/* ═══════════════════════════════════════════════════════════════
   PROTOCOL AUDIT — AI Audit My Longevity Protocol
   ═══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.protocol-audit{background:var(--bg-alt,#f4f4f2);border-top:1px solid var(--border,#e4e4e0);border-bottom:1px solid var(--border,#e4e4e0);padding:80px 40px}
.protocol-audit-inner{max-width:800px;margin:0 auto}

/* Header */
.protocol-audit .section-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy,#1b2a4a);margin-bottom:12px;font-weight:700}
.audit-headline{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--navy-deep,#0f1a30);line-height:1.1;margin-bottom:14px}
.audit-subtext{color:var(--text-dim,#666660);font-size:.92rem;line-height:1.6;margin-bottom:36px;max-width:520px}

/* Textarea */
.audit-textarea-wrap{position:relative;margin-bottom:16px}
.audit-textarea{width:100%;min-height:180px;padding:18px 20px;border:2px solid var(--navy,#1b2a4a);border-radius:4px;font-family:'Inter',system-ui,sans-serif;font-size:.9rem;color:var(--text,#1a1a1a);background:var(--white,#fff);resize:vertical;outline:none;line-height:1.6;transition:border-color .2s,box-shadow .2s}
.audit-textarea:focus{border-color:var(--navy-deep,#0f1a30);box-shadow:0 0 0 3px rgba(27,42,74,.1)}
.audit-textarea::placeholder{color:var(--text-muted,#999990)}

/* Example hint */
.audit-hint{font-size:.75rem;color:var(--text-muted,#999990);line-height:1.6;margin-bottom:24px;padding:14px 18px;border-left:2px solid var(--border-dark,#d0d0cc);background:var(--white,#fff)}
.audit-hint strong{color:var(--text-dim,#666660);font-weight:600;display:block;margin-bottom:4px;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem}

/* Submit button */
.audit-btn{padding:16px 36px;background:var(--navy,#1b2a4a);color:var(--white,#fff);border:none;border-radius:3px;font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:'Inter',system-ui,sans-serif;transition:background .2s,opacity .2s;display:inline-flex;align-items:center;gap:10px}
.audit-btn:hover{background:var(--navy-deep,#0f1a30)}
.audit-btn:disabled{opacity:.55;cursor:not-allowed}
.audit-btn--loading{opacity:.75}

/* Status line */
.audit-status{font-size:.82rem;color:var(--text-dim,#666660);margin-top:14px;display:none}
.audit-status-text{margin-right:4px}
.audit-dots::after{content:'';animation:auditdots 1.4s steps(4) infinite}
@keyframes auditdots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ── Results area ──────────────────────────────────────────────── */
.audit-results{display:none;margin-top:48px}

/* Section block */
.audit-section{margin-bottom:48px}
.audit-section-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy,#1b2a4a);font-weight:700;margin-bottom:10px}
.audit-section-title{font-size:1.15rem;font-weight:700;color:var(--navy-deep,#0f1a30);letter-spacing:-.01em;margin-bottom:24px;line-height:1.3}

/* ── Evidence strength table ───────────────────────────────────── */
.audit-table-wrap{overflow-x:auto;border:1px solid var(--border,#e4e4e0);border-radius:4px}
.audit-table{width:100%;border-collapse:collapse;font-size:.84rem}
.audit-table thead{background:var(--navy-deep,#0f1a30);color:var(--white,#fff)}
.audit-table thead th{padding:12px 16px;text-align:left;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.audit-table tbody tr{border-bottom:1px solid var(--border,#e4e4e0);background:var(--white,#fff);transition:background .12s}
.audit-table tbody tr:last-child{border-bottom:none}
.audit-table tbody tr:hover{background:var(--bg-alt,#f4f4f2)}
.audit-table td{padding:14px 16px;vertical-align:middle}
.audit-table-name{font-weight:600;color:var(--navy-deep,#0f1a30)}
.audit-table-type{color:var(--text-dim,#666660);font-size:.8rem}
.audit-table-count{color:var(--text-muted,#999990);font-size:.8rem;text-align:center}

/* ── Evidence badges ───────────────────────────────────────────── */
.evidence-badge{display:inline-block;padding:3px 10px;border-radius:2px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.badge--high{background:rgba(22,163,74,.12);color:#15803d;border:1px solid rgba(22,163,74,.25)}
.badge--moderate{background:rgba(234,179,8,.12);color:#a16207;border:1px solid rgba(234,179,8,.3)}
.badge--weak{background:rgba(220,38,38,.1);color:#b91c1c;border:1px solid rgba(220,38,38,.2)}
.badge--mixed{background:rgba(109,40,217,.1);color:#6d28d9;border:1px solid rgba(109,40,217,.2)}

/* ── Per-intervention cards ────────────────────────────────────── */
.audit-cards{display:flex;flex-direction:column;gap:1px;background:var(--border,#e4e4e0);border:1px solid var(--border,#e4e4e0);border-radius:4px}
.audit-card{background:var(--white,#fff);padding:28px 28px 24px;border-left:3px solid transparent}
.audit-card--high{border-left-color:#15803d}
.audit-card--moderate{border-left-color:#a16207}
.audit-card--weak{border-left-color:#b91c1c}
.audit-card--mixed{border-left-color:#6d28d9}

/* Collapsible details — expanded by default on desktop */
.audit-card-details-toggle{display:none}
.audit-card-details{}
.audit-card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.audit-card-name{font-size:.95rem;font-weight:700;color:var(--navy-deep,#0f1a30)}
.audit-card-summary{font-size:.88rem;color:var(--text-dim,#666660);line-height:1.65;margin-bottom:14px}
.audit-card-meta{font-size:.78rem;margin-bottom:10px;line-height:1.5}
.audit-meta-label{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-muted,#999990);margin-right:6px}
.audit-meta-val{color:var(--text-dim,#666660)}
.audit-studies-label{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy,#1b2a4a);margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--border,#e4e4e0)}
.audit-studies{list-style:none;display:flex;flex-direction:column;gap:8px}
.audit-study{display:flex;gap:10px;align-items:flex-start}
.audit-study-num{font-size:.7rem;font-weight:700;color:var(--navy,#1b2a4a);min-width:22px;padding-top:2px;flex-shrink:0}
.audit-study-info{display:flex;flex-direction:column;gap:2px}
.audit-study-info a{font-size:.83rem;font-weight:500;color:var(--navy,#1b2a4a);line-height:1.4;text-decoration:none;transition:opacity .15s}
.audit-study-info a:hover{text-decoration:underline;opacity:.8}
.audit-study-meta{font-size:.7rem;color:var(--text-muted,#999990);letter-spacing:.02em}

/* ── Recommendations ───────────────────────────────────────────── */
.audit-section--recs{background:var(--navy-deep,#0f1a30);padding:32px;border-radius:4px}
.audit-section--recs .audit-section-label{color:rgba(255,255,255,.45)}
.audit-section--recs .audit-section-title{color:var(--white,#fff);font-size:.95rem;font-weight:600;margin-bottom:20px;line-height:1.5}
.audit-recs{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.audit-rec{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.6;padding-left:20px;position:relative}
.audit-rec::before{content:'→';position:absolute;left:0;color:rgba(255,255,255,.45);font-weight:700}
.audit-disclaimer{font-size:.7rem;color:rgba(255,255,255,.3);font-style:italic;line-height:1.6;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}

/* ── Error state ───────────────────────────────────────────────── */
.audit-error{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);border-radius:4px;padding:20px 24px;font-size:.88rem;color:#b91c1c;line-height:1.5}

/* ── Mobile ────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Section spacing */
  .protocol-audit{padding:48px 16px}
  .protocol-audit-inner{max-width:100%}

  /* Headline + subtext */
  .audit-headline{font-size:1.6rem;margin-bottom:12px}
  .audit-subtext{font-size:.9rem;margin-bottom:28px;line-height:1.6}

  /* Textarea — shorter default, full-width, 16px prevents iOS zoom */
  .audit-textarea{min-height:160px;padding:14px 14px;font-size:16px;border-width:1.5px}

  /* Hint — compact */
  .audit-hint{font-size:.72rem;padding:12px 14px;margin-bottom:20px}

  /* Submit button — full-width, tall touch target */
  .audit-btn{width:100%;justify-content:center;padding:18px 24px;font-size:.82rem;min-height:52px}

  /* Status text */
  .audit-status{font-size:.78rem}

  /* ── Evidence Table → stacked card layout on mobile ── */
  .audit-table-wrap{border:none;border-radius:0;overflow:visible}
  .audit-table,.audit-table thead,.audit-table tbody,.audit-table th,.audit-table td,.audit-table tr{display:block;width:100%}
  .audit-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .audit-table tbody{background:none}
  .audit-table tbody tr{border:1px solid var(--border,#e4e4e0);border-radius:8px;margin-bottom:12px;padding:16px;background:var(--white,#fff);display:block}
  .audit-table tbody tr:last-child{margin-bottom:0}
  .audit-table td{padding:6px 0;border:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .audit-table td::before{content:attr(data-label);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-muted,#999990);flex-shrink:0}
  .audit-table-name{font-size:.92rem}
  .audit-table td:first-child{padding-bottom:10px;border-bottom:1px solid var(--border,#e4e4e0);margin-bottom:6px}
  .audit-table td:first-child::before{display:none}  /* Don't show "Intervention" label — name is self-evident */
  /* Hide evidence type on mobile */
  .audit-table td:nth-child(3){display:none}
  .audit-table-count{text-align:right}

  /* ── Per-intervention cards ── */
  .audit-cards{border:none;border-radius:0;gap:12px;background:none}
  .audit-card{padding:18px 16px;border:1px solid var(--border,#e4e4e0);border-radius:8px;border-left:4px solid transparent}
  .audit-card--high{border-left-color:#15803d}
  .audit-card--moderate{border-left-color:#a16207}
  .audit-card--weak{border-left-color:#b91c1c}
  .audit-card--mixed{border-left-color:#6d28d9}

  /* Collapsible details on mobile */
  .audit-card-details-toggle{display:block;margin:12px 0 0}
  .audit-toggle-btn{background:none;border:1px solid var(--border,#e4e4e0);border-radius:4px;padding:8px 16px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy,#1b2a4a);cursor:pointer;font-family:'Inter',system-ui,sans-serif;width:100%;transition:background .15s}
  .audit-toggle-btn:hover,.audit-toggle-btn:active{background:var(--bg-alt,#f4f4f2)}
  .audit-card-details{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .audit-card-details.audit-expanded{max-height:2000px;margin-top:14px}
  .audit-card-header{gap:8px}
  .audit-card-name{font-size:.88rem}
  .audit-card-summary{font-size:.82rem;line-height:1.6}
  .audit-card-meta{font-size:.75rem}
  .audit-studies-label{font-size:.62rem;margin:14px 0 8px}
  .audit-study-num{font-size:.66rem;min-width:20px}
  .audit-study-info a{font-size:.78rem}
  .audit-study-meta{font-size:.66rem}

  /* ── Recommendations ── */
  .audit-section--recs{padding:22px 18px;border-radius:6px}
  .audit-section--recs .audit-section-title{font-size:.88rem}
  .audit-rec{font-size:.82rem;padding-left:18px}
  .audit-disclaimer{font-size:.66rem}

  /* ── Section titles ── */
  .audit-section{margin-bottom:36px}
  .audit-section-title{font-size:1rem;margin-bottom:18px}

  /* ── Error ── */
  .audit-error{padding:16px 18px;font-size:.82rem}
}

/* Small phones (375px and below) */
@media(max-width:390px){
  .protocol-audit{padding:40px 12px}
  .audit-headline{font-size:1.35rem}
  .audit-subtext{font-size:.85rem}
  .audit-textarea{min-height:150px;padding:12px;font-size:16px} /* 16px: iOS zoom prevention */
  .audit-hint{padding:10px 12px;font-size:.7rem}
  .audit-card{padding:14px 12px}
  .audit-section--recs{padding:18px 14px}
  .audit-btn{padding:16px 20px;font-size:.8rem}
}

/* ══════════════════════════════════════════════════════════════ */
/* Q&A Answer Mode */
.qa-answer{display:none;text-align:left;margin-bottom:24px}
.qa-answer.visible{display:block}
.qa-question{font-size:1.1rem;font-weight:700;margin-bottom:20px;line-height:1.4;padding-bottom:16px;border-bottom:2px solid var(--border, #e4e4e0)}
.qa-body{font-size:.95rem;line-height:1.8;margin-bottom:24px}
.qa-body p,.qa-body{margin-bottom:12px}
.qa-citation{color:var(--navy, #1b2a4a);font-weight:700;font-size:.78rem;text-decoration:none;vertical-align:super;padding:0 1px;transition:opacity .15s}
.qa-citation:hover{opacity:.7;text-decoration:underline}
.qa-studies-header{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px;padding-top:16px;border-top:1px solid var(--border, #e4e4e0)}
.qa-studies{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.qa-study{display:flex;gap:10px;align-items:flex-start}
.qa-study-num{font-size:.72rem;font-weight:700;color:var(--navy, #1b2a4a);min-width:22px;padding-top:2px}
.qa-study-info{display:flex;flex-direction:column;gap:2px}
.qa-study-info a{font-size:.85rem;font-weight:500;line-height:1.4;text-decoration:none;transition:text-decoration .15s}
.qa-study-info a:hover{text-decoration:underline}
.qa-study-meta{font-size:.72rem;letter-spacing:.02em}
.qa-disclaimer{font-size:.7rem;font-style:italic;padding-top:12px;border-top:1px solid var(--border, #e4e4e0)}
.qa-loading{font-size:.88rem;padding:16px 0}
.qa-dots::after{content:'';animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.qa-also-search{font-size:.82rem;font-weight:600;text-decoration:none;letter-spacing:.02em;color:var(--navy, var(--accent, #1b2a4a))}
.qa-also-search:hover{text-decoration:underline}

/* Color inheritance — uses page CSS variables */
.qa-question{color:var(--text, var(--white, #1a1a1a))}
.qa-body{color:var(--text-dim, #666660)}
.qa-studies-header{color:var(--navy, var(--accent, #1b2a4a))}
.qa-study-info a{color:var(--navy, var(--white, #1b2a4a))}
.qa-study-meta{color:var(--text-muted, #999990)}
.qa-disclaimer{color:var(--text-muted, #999990)}
.qa-loading{color:var(--text-dim, #666660)}