/* ============================================================================
   AcidBase — UI-tour clone styles.  Namespace: .ab-
   Pixel-faithful to ~/Desktop/AcidBase-App (Clinical Teal #0E7490, Geist,
   glassmorphism over a teal/violet aurora, subtle 3D buttons).
   Renders inside a 375x812 phone frame → ~351x788 scrollable viewport.
   ALL selectors are prefixed .ab- — no bare element selectors, no leakage.
   ============================================================================ */

.ab-screen {
  /* Design tokens (scoped to the clone) */
  --ab-primary: #0E7490;
  --ab-primary-light: #0891B2;
  --ab-primary-dark: #155E75;
  --ab-bg: #F4F9FB;
  --ab-fg: #101828;
  --ab-text-secondary: #475467;
  --ab-text-muted: #98A2B3;
  --ab-border: rgba(16, 24, 40, 0.08);
  --ab-safe: #228B22;      --ab-safe-bg: #F0FFF0;
  --ab-danger: #B22222;    --ab-danger-bg: #FDF2F2;
  --ab-caution: #B45309;   --ab-caution-bg: #FFFBEB;
  --ab-acid: #C2410C;      --ab-acid-bg: #FFF4ED;
  --ab-base: #7C3AED;
  --ab-shadow-card: 0 2px 8px rgba(16,24,40,0.06), 0 0 1px rgba(16,24,40,0.1);
  --ab-shadow-glass: 0 8px 32px rgba(16,24,40,0.08);

  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-geist, "Geist", -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif);
  color: var(--ab-fg);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(8,145,178,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(124,58,237,0.07), transparent 55%),
    var(--ab-bg);
  -webkit-font-smoothing: antialiased;
}

.ab-screen *,
.ab-screen *::before,
.ab-screen *::after { box-sizing: border-box; }

.ab-screen svg { width: 100%; height: 100%; display: block; }

/* Bottom-sheet screens lock to the frame viewport so the sheet pins to the
   visible bottom (the engine's .ui-tour-screen is the scroll container). */
.ab-screen--sheet { height: 100%; overflow: hidden; }

/* ── Header (sticky glass) ──────────────────────────────────────────────── */
/* NOTE: clone z-indexes stay below 10 — the tour engine's hotspot dots are
   z-index:10 and must paint above all clone chrome (header, dock, sheets). */
.ab-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.ab-header__brand { display: flex; align-items: center; gap: 10px; }
.ab-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0891B2, #155E75);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,116,144,0.25);
}
.ab-logo svg { width: 18px; height: 18px; }
.ab-header__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--ab-fg);
}
.ab-header__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ab-text-secondary);
  margin-top: 3px;
}
.ab-formulas-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  min-height: 40px;
  border: none;
  border-radius: 9999px;
  background: rgba(14,116,144,0.1);
  color: var(--ab-primary-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ab-formulas-btn svg { width: 15px; height: 15px; }

/* ── Main scroll column ─────────────────────────────────────────────────── */
.ab-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The dock is sticky (in-flow), so only modest bottom clearance is needed. */
  padding: 16px 16px 24px;
}
.ab-main--dim { filter: saturate(0.9); }

/* ── Glass card ─────────────────────────────────────────────────────────── */
.ab-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: var(--ab-shadow-card);
}

/* ── Example chips (horizontal scroll) ──────────────────────────────────── */
.ab-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ab-chips::-webkit-scrollbar { display: none; }
.ab-chip {
  flex-shrink: 0;
  min-width: 118px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  box-shadow: var(--ab-shadow-card);
  font-family: inherit;
  cursor: pointer;
}
.ab-chip--active {
  border-color: rgba(14,116,144,0.4);
  box-shadow: 0 0 0 2px rgba(14,116,144,0.15), var(--ab-shadow-card);
}
.ab-chip__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ab-primary-dark);
}
.ab-chip__sub {
  display: block;
  font-size: 11px;
  color: var(--ab-text-muted);
  margin-top: 2px;
}

/* ── Input form ─────────────────────────────────────────────────────────── */
.ab-form { padding: 20px; }
.ab-group { margin-bottom: 16px; }
.ab-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ab-group__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ab-primary-dark);
}
.ab-group__rule { height: 1px; flex: 1; background: var(--ab-border); }

.ab-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ab-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 4px;
}
.ab-field__name { font-size: 13px; font-weight: 600; color: var(--ab-fg); }
.ab-field__unit { font-size: 10px; font-weight: 500; color: var(--ab-text-muted); }
.ab-field__hint { margin-top: 4px; font-size: 10px; line-height: 1.3; color: var(--ab-text-muted); }

.ab-input {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--ab-border);
  background: #fff;
  padding: 0 14px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ab-fg);
  font-variant-numeric: tabular-nums;
}
.ab-input--sm { min-height: 46px; font-size: 16px; }
.ab-input--abnormal {
  border-color: var(--ab-caution);
  box-shadow: inset 0 0 0 1px rgba(180,83,9,0.15);
}
.ab-input::placeholder { color: var(--ab-text-muted); font-weight: 500; }

/* ── Chronicity toggle (unknown | acute | chronic) ──────────────────────── */
.ab-toggle-block { margin-top: 16px; }
.ab-toggle-block__label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ab-fg); }
.ab-toggle { display: flex; gap: 8px; }
.ab-toggle__btn {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(16,24,40,0.05);
  color: var(--ab-text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
}
.ab-toggle__btn--active { background: var(--ab-primary); color: #fff; }

/* ── 3D buttons ─────────────────────────────────────────────────────────── */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 14px 24px;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.ab-btn svg { width: 16px; height: 16px; }
.ab-btn--neutral {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F4F7 40%, #E4E7EC 100%);
  color: var(--ab-fg);
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 2px 8px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.ab-btn--primary {
  background: linear-gradient(180deg, #0891B2 0%, #0E7490 45%, #155E75 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,116,144,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ── Pills ──────────────────────────────────────────────────────────────── */
.ab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  min-height: 28px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ab-pill--primary { background: rgba(14,116,144,0.12); color: var(--ab-primary-dark); }
.ab-pill--danger  { background: rgba(178,34,34,0.12);  color: var(--ab-danger); }
.ab-pill--safe    { background: rgba(34,139,34,0.12);  color: var(--ab-safe); }
.ab-pill--caution { background: rgba(180,83,9,0.12);   color: var(--ab-caution); }
.ab-pill--muted   { background: rgba(16,24,40,0.05);   color: var(--ab-text-secondary); }

/* ── Diagnosis headline card ────────────────────────────────────────────── */
.ab-dx { overflow: hidden; }
.ab-dx__bar { height: 6px; background: var(--ab-acid); }
.ab-dx__body { padding: 20px; }
.ab-dx__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ab-dx__headline {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ab-fg);
}
.ab-dx__list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.ab-dx__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ab-text-secondary);
}
.ab-dx__dot { color: var(--ab-acid); font-weight: 700; }

/* ── Section card ───────────────────────────────────────────────────────── */
.ab-section { padding: 20px; }
.ab-section__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ab-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(14,116,144,0.12);
  color: var(--ab-primary-dark);
}
.ab-section__icon svg { width: 16px; height: 16px; }
.ab-section__title { font-size: 15px; font-weight: 700; color: var(--ab-fg); }
.ab-section__lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ab-text-secondary);
}
.ab-section__lead b { color: var(--ab-fg); }

/* ── Why (ordered rationale) ────────────────────────────────────────────── */
.ab-why { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
.ab-why li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ab-text-secondary);
}
.ab-why b { color: var(--ab-fg); font-weight: 700; }

/* ── Calculated-value tiles ─────────────────────────────────────────────── */
.ab-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ab-tile {
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 12px;
}
.ab-tile--normal   { background: rgba(255,255,255,0.6); }
.ab-tile--abnormal { background: var(--ab-caution-bg); }
.ab-tile--danger   { background: var(--ab-danger-bg); }
.ab-tile__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ab-tile__name { font-size: 12px; font-weight: 600; color: var(--ab-text-secondary); }
.ab-tile__value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ab-fg); }
.ab-tile--abnormal .ab-tile__value { color: var(--ab-caution); }
.ab-tile--danger .ab-tile__value { color: var(--ab-danger); }
.ab-tile__unit { font-size: 11px; font-weight: 600; }
.ab-tile__note { margin-top: 2px; font-size: 11px; color: var(--ab-text-muted); }

/* ── Differential bucket ────────────────────────────────────────────────── */
.ab-bucket { overflow: hidden; }
.ab-bucket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.ab-bucket__head-left { display: flex; align-items: center; gap: 8px; }
.ab-bucket__title { font-size: 15px; font-weight: 700; color: var(--ab-fg); }
.ab-bucket__chev { width: 20px; height: 20px; color: var(--ab-text-muted); flex-shrink: 0; }
.ab-bucket__chev--open { transform: rotate(180deg); }
.ab-bucket__body { padding: 0 20px 20px; }

.ab-mnemonic {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(14,116,144,0.06);
}
.ab-mnemonic__mech { font-size: 13px; line-height: 1.5; color: var(--ab-text-secondary); }
.ab-mnemonic__key { margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--ab-primary-dark); }
.ab-mnemonic__key b { font-weight: 700; }

.ab-narrow { margin-bottom: 16px; }
.ab-narrow__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ab-fg);
}
.ab-narrow__head svg { width: 14px; height: 14px; }
.ab-narrow__list { display: flex; flex-direction: column; gap: 6px; }
.ab-narrow__list li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ab-text-secondary);
}
.ab-arrow { color: var(--ab-primary); font-weight: 700; }

.ab-causes { display: flex; flex-direction: column; gap: 12px; }
.ab-cause {
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.6);
}
.ab-cause__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ab-cause__name { font-size: 14px; font-weight: 700; color: var(--ab-fg); }
.ab-cause__line { font-size: 13px; line-height: 1.5; color: var(--ab-text-secondary); margin-top: 4px; }
.ab-cause__lbl { font-weight: 600; color: var(--ab-fg); }
.ab-treat {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ab-safe-bg);
}
.ab-treat__icon { color: var(--ab-safe); flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
.ab-treat__text { font-size: 13px; line-height: 1.5; color: var(--ab-text-secondary); }
.ab-treat__lbl { font-weight: 700; color: #1B6E1B; }
.ab-bucket__cite { margin-top: 12px; font-size: 11px; color: var(--ab-text-muted); }

/* ── Bottom tool dock ───────────────────────────────────────────────────── */
.ab-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(16,24,40,0.08);
  box-shadow: var(--ab-shadow-glass);
}
.ab-dock__row {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.ab-dock__row::-webkit-scrollbar { display: none; }
.ab-dock__item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 12px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--ab-text-secondary);
  font-family: inherit;
  cursor: pointer;
}
.ab-dock__item--active {
  background: rgba(14,116,144,0.10);
  color: var(--ab-primary-dark);
}
.ab-dock__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--ab-primary);
}
.ab-dock__icon svg { width: 20px; height: 20px; }
.ab-dock__item--active .ab-dock__icon { color: var(--ab-primary-dark); }
.ab-dock__label { font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* ── Bottom-sheet modal (calculator / reference) ────────────────────────── */
.ab-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(16,24,40,0.45);
}
.ab-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.5);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--ab-shadow-glass);
  overflow: hidden;
}
.ab-sheet--ref { max-height: 85%; }
.ab-sheet__grabber { display: flex; justify-content: center; padding-top: 8px; }
.ab-sheet__grabber span { width: 40px; height: 4px; border-radius: 9999px; background: rgba(16,24,40,0.18); }
.ab-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
}
.ab-sheet__head-left { display: flex; align-items: center; gap: 10px; }
.ab-logo--sheet { width: 36px; height: 36px; }
.ab-logo--sheet svg { width: 18px; height: 18px; }
.ab-sheet__title { font-size: 16px; font-weight: 800; line-height: 1.15; color: var(--ab-fg); }
.ab-sheet__title--lg { font-size: 18px; }
.ab-sheet__sub { font-size: 11px; font-weight: 500; color: var(--ab-text-secondary); }
.ab-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9999px;
  background: rgba(16,24,40,0.06);
  color: var(--ab-fg);
  cursor: pointer;
}
.ab-sheet__close svg { width: 18px; height: 18px; }
.ab-sheet__body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 20px 32px;
  scrollbar-width: none;
}
.ab-sheet__body::-webkit-scrollbar { display: none; }

/* ── Result rows (calculator) ───────────────────────────────────────────── */
.ab-result { border-radius: 12px; padding: 12px; }
.ab-result--neutral { background: rgba(16,24,40,0.04); }
.ab-result--caution { background: var(--ab-caution-bg); }
.ab-result--danger  { background: var(--ab-danger-bg); }
.ab-result--safe    { background: var(--ab-safe-bg); }
.ab-result__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ab-result__name { font-size: 13px; font-weight: 600; color: var(--ab-text-secondary); }
.ab-result__value { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ab-fg); }
.ab-result--caution .ab-result__value { color: var(--ab-caution); }
.ab-result--danger .ab-result__value { color: var(--ab-danger); }
.ab-result__unit { font-size: 12px; font-weight: 600; }
.ab-result__note { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ab-text-secondary); }

/* ── Reference blocks ───────────────────────────────────────────────────── */
.ab-refblock { display: flex; flex-direction: column; gap: 6px; }
.ab-refblock__head {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ab-primary-dark);
  margin-bottom: 2px;
}
.ab-formula {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.6);
}
.ab-formula__name { font-size: 12px; font-weight: 700; color: var(--ab-fg); }
.ab-formula__value {
  font-family: var(--font-geist-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 12px;
  color: var(--ab-text-secondary);
}
.ab-steps { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; }
.ab-steps li { font-size: 13px; line-height: 1.5; color: var(--ab-text-secondary); }
.ab-sources { font-size: 12px; line-height: 1.5; color: var(--ab-text-muted); }