/* ===========================
   Zap Health — frontend styles (with utility shim)
   =========================== */

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #f8fafc; /* slate-50 */
  color: #0f172a;      /* slate-900 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ---- Minimal utility shim ---- */
.max-w-3xl { max-width: 48rem; }
.max-w-md  { max-width: 28rem; }
.mx-auto   { margin-left:auto; margin-right:auto; }
.p-4 { padding: 1rem; } .p-8 { padding: 2rem; }
.mb-5 { margin-bottom: 1.25rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: .25rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.flex { display:flex; }
.flex-col { flex-direction: column; }
.items-start { align-items:flex-start; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-3 { gap: .75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-extrabold { font-weight: 800; }
.text-slate-600 { color: #475569; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.w-28 { width: 7rem; } /* Age input */
.text-left { text-align: left; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

@media (min-width: 768px){
  .md\:p-8 { padding: 2rem; }
  .md\:mb-8 { margin-bottom: 2rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
}

/* ---- Theme tokens ---- */
:root {
  --accent: #4f46e5;       /* indigo-600 */
  --accent-dark: #4338ca;  /* indigo-700 */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-600: #475569;
  --ring: rgba(99,102,241,.25);
}

/* -------- Buttons -------- */
.btn{
  width:100%;
  padding:1rem;
  border-radius:1rem;
  font-weight:600;
  border:1px solid var(--slate-200);
  background:#fff;
  color:#0f172a;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .2s, transform .05s, box-shadow .2s, opacity .2s;
  cursor:pointer;
  
  /* Flexbox Centering Fix */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.btn:hover { background: var(--slate-50); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-dark); }

/* --- UNIFIED AMBER FOCUS FOR ALL BUTTONS --- */
/* This ensures Tab key, Click, and Keyboard Nav all look identical */
.btn:focus, 
.btn:focus-visible,
.wizard-toggle:focus,
.wizard-toggle:focus-visible,
.keyboard-focused,
#sexButtons button:focus,
#sexButtons button:focus-visible,
#sexButtons button.keyboard-focused {
  outline: none !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.5) !important;
  transform: scale(1.02) !important;
  z-index: 20 !important;
  position: relative !important;
  transition: all 0.1s ease !important;
}

/* Answer button stacks */
.btn-stack{ display:flex; flex-direction:column; gap:.5rem; }

/* Select-all clarity */
.btn-choice.selected,
.btn-choice.btn-choice-selected{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring) inset;
}

/* Loading / Thinking… */
.btn-loading{ position: relative; opacity:.95; }

/* Updated Spinner (Clean Version) */
.spinner{
  width: 1.25rem; 
  height: 1.25rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Toggle buttons (Sex/Age units) */
.btn-toggle-group{ display:flex; gap:.5rem; }
.btn-toggle{ width:auto; padding:.6rem 1rem; border-radius:.75rem; }
.btn-toggle-active{
  background:#eef2ff; border-color:#c7d2fe; box-shadow:0 0 0 2px #c7d2fe inset;
}

/* Inputs */
.input{
  width:100%;
  padding:.95rem 1rem;
  border:1px solid var(--slate-200);
  border-radius:.75rem;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{ color:#94a3b8; }

/* UNIFIED AMBER FOCUS FOR INPUTS */
.input:focus {
  border-color: #d97706 !important; /* Solid Dark Amber Border */
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.4) !important; /* Thick Amber Glow */
  z-index: 10;
}

/* Cards & section titles */
.card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  padding:1.25rem 1.5rem;
}
.section-title{ font-size:1.125rem; font-weight:700; margin-bottom:.75rem; }

/* Utility */
.blur-locked{ filter:blur(5px); user-select:none; -webkit-user-select:none; }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-card{ background:#fff; border-radius:1rem; padding:1.25rem; width:100%; max-width:28rem; }

/* Icon buttons (Copy/Email) */
.icon-btn{
  width:auto;
  padding:.5rem;
  border-radius:.65rem;
  border:1px solid var(--slate-200);
  background:#fff;
  color:#1f2937;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  cursor:pointer;
  transition:background .15s, transform .05s, box-shadow .15s;
}
.icon-btn:hover{ background:#f9fafb; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.icon-btn:active{ transform:translateY(1px); }

/* Markdown niceties in cards (default list styling) */
.card ul { padding-left: 1.25rem; margin: .25rem 0 .5rem; }
.card ol { padding-left: 1.25rem; margin: .25rem 0 .5rem; }
.card p  { margin: .25rem 0 .75rem; line-height: 1.6; }
.card h3 { font-weight: 700; margin-top: .5rem; margin-bottom: .25rem; }
.card code { background:#f1f5f9; padding:.1rem .3rem; border-radius:.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Small helper */
.mt-3{ margin-top:.75rem; }

/* Busy/disabled submit button look */
.btn:disabled,
.btn.btn-busy { opacity: .7; cursor: not-allowed; }

/* ===========================
   Tabs (multi-case)
   =========================== */
.tabstrip { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.tab-pill {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .7rem; border-radius:9999px;
  background:#fff; border:1px solid #e2e8f0; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tab-pill.active { border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.tab-pill .x { margin-left:.25rem; opacity:.6; font-weight:700; }
.tab-pill .x:hover { opacity:1; }
.tab-pill[disabled] { opacity:.5; cursor:not-allowed; }
.tab-add { background:#eef2ff; border-color:#c7d2fe; }

/* ===========================
   Collapsible summary (no bullets in the 3 sections)
   =========================== */
#sec-diff ul, #sec-diff ol,
#sec-zebra ul, #sec-zebra ol,
#sec-recs ul, #sec-recs ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.li-collapsible { border-radius: .5rem; }
.li-collapsible > summary {
  list-style: none;
  display:flex; align-items:center; gap:.5rem;
  cursor:pointer; user-select:none;
  padding:.2rem .3rem; border-radius:.5rem;
}
.li-collapsible > summary:hover { background:#f8fafc; }
.li-body { padding:.15rem .35rem .35rem; color:#334155; }

/* ===========================
   Encircled + / − icon (font-agnostic, perfectly centered)
   =========================== */
.pm{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  font-size: 0;      /* ignore text baselines */
  line-height: 0;
  user-select: none;
  vertical-align: -1px; /* minor optical tweak next to headings */
}
.pm::before,
.pm::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
/* horizontal bar */
.pm::before{ width:10px; height:2px; }
/* vertical bar (hidden when open → minus) */
.pm::after { width:2px; height:10px; }
.li-collapsible[open] .pm::after{ display:none; }

/* color themes per section */
.pm-indigo { background:#e0e7ff; color:#3730a3; border:1px solid #c7d2fe; }  /* Differential */
.pm-rose   { background:#ffe4e6; color:#9f1239; border:1px solid #fecdd3; }  /* Zebras */
.pm-emerald{ background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }  /* Diagnostics */

@media (max-width: 420px){
  .pm{ width:16px; height:16px; }
  .pm::before{ width:9px; height:2px; }
  .pm::after { width:2px; height:9px; }
}

/* ===========================
   Results Palette (grid chips + notes)
   =========================== */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  align-items: start;
}
.results-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 9999px;
  background: #f1f5f9;             /* slate-100 */
  color: #0f172a;                   /* slate-900 */
  cursor: pointer;
  user-select: none;
  border: 1px solid #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.results-chip:hover { transform: translateY(-1px); }
.results-chip.normal {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
  box-shadow: 0 0 0 2px rgba(16,185,129,.15);
}
.results-chip.abnormal {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
  box-shadow: 0 0 0 2px rgba(244,63,94,.15);
}
.results-chip.pending {
  background-color: #fef3c7; 
  color: #92400e;           
  border-color: #f59e0b;    
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); /* Matches the amber border */
}
.results-chip .icon { width: 14px; height: 14px; display:inline-block; }
.results-chip .dot  { border-radius: 9999px; background: #94a3b8; } /* slate-400 */
.results-chip.normal .dot   { background: #10b981; }   /* emerald-500 */
.results-chip.abnormal .dot { background: #ef4444; }   /* red-500 */
.results-note { width: 100%; margin-top: 6px; }
.results-note input { width: 100%; }

/* ===========================
   Show/Collapse Reasoning Button
   =========================== */
.section-controls { display:flex; gap:.5rem; align-items:center; margin:.25rem 0 .25rem; }
.section-controls .chip-toggle {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1; /* slate-300 */
  background-color: #f8fafc; /* slate-50 */
  color: #334155; /* slate-700 */
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.section-controls .chip-toggle:hover {
  background-color: #e0e7ff; /* indigo-100 hover */
  border-color: #a5b4fc;     /* indigo-300 */
  color: #1e3a8a;            /* indigo-900 */
}
.section-controls .chip-toggle:active {
  background-color: #c7d2fe; /* indigo-200 active */
  transform: scale(0.98);
}

/* --- Auth box right-align + compact button --- */
.auth-right{ margin-left:auto; display:flex; align-items:center; }
#authbox .btn { width:auto; padding:.6rem 1rem; border-radius:.9rem; }
#authbox .btn.btn-sm { width:auto; padding:.55rem 1rem; }

/* ===========================
   New Keyboard & Wizard Styles
   =========================== */

/* Wizard Animations */
.intake-step {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(8px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* Clean Toggle Group (No box, just pills) */
.wizard-toggle-group {
  display: flex;
  gap: 0.75rem; /* Space between buttons */
  justify-content: center;
  margin-top: 0.5rem;
}

/* The individual toggle buttons */
.wizard-toggle {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--slate-200);
  border-radius: 9999px; /* Pill shape */
  background: #fff;
  color: var(--slate-600);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.wizard-toggle:hover {
  background: var(--slate-50);
  transform: translateY(-1px);
}

/* Active State (Indigo) */
.wizard-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}

/* Keyboard hint text */
.kb-hint {
  font-size: 0.8rem;
  color: #94a3b8; /* slate-400 */
  margin-top: 1.5rem;
}
.kb-key {
  font-weight: 700;
  border: 1px solid #e2e8f0;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: #f8fafc;
  font-family: monospace;
}

/* Arrow Button Styling */
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem !important; /* Fixed width for square look */
  height: 3.5rem;
  padding: 0;
  border-radius: 50%; /* Circle shape */
  font-size: 1.5rem;
}
.btn-nav svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2.5;
}
/* Helper to align the nav bar */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}
/* Right align if only Next button exists */
.nav-row.end { justify-content: flex-end; }