/* ================================================================
   BiteSignal — Quiet Intelligence
   Warm editorial aesthetic. Research journal meets personal science.
   ================================================================ */

:root {
  --bg: #F9F8F5;
  --surface: #FFFFFF;
  --surface-hover: #FCFBF9;
  --text-1: #1F1D1B;
  --text-2: #6E6A65;
  --text-3: #A8A29E;
  --teal: #0D7C66;
  --teal-soft: rgba(13, 124, 102, 0.07);
  --teal-medium: rgba(13, 124, 102, 0.14);
  --gold: #B8860B;
  --gold-soft: rgba(184, 134, 11, 0.07);
  --coral: #C4533A;
  --coral-soft: rgba(196, 83, 58, 0.07);
  --sage: #5B8A72;
  --sage-soft: rgba(91, 138, 114, 0.07);
  --border: #ECEAE6;
  --border-light: #F3F1ED;
  --shadow-xs: 0 1px 2px rgba(31, 29, 27, 0.03);
  --shadow-sm: 0 1px 3px rgba(31, 29, 27, 0.05);
  --shadow: 0 4px 12px rgba(31, 29, 27, 0.06);
  --shadow-lg: 0 8px 30px rgba(31, 29, 27, 0.1);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, 'SF Pro Text', 'Plus Jakarta Sans', BlinkMacSystemFont, system-ui, sans-serif;
  --sans-display: 'Plus Jakarta Sans', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --mono: 'SF Mono', 'IBM Plex Mono', 'Consolas', monospace;
}

/* Animated gradient for signal cards */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

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

html { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  line-height: 1.5;
}

/* ================================================================
   Layout & Pages
   ================================================================ */

.page {
  display: none;
  padding: 0 20px;
  padding-bottom: 160px;
  max-width: 430px;
  margin: 0 auto;
}

.page.active {
  display: block;
  animation: pageIn 0.3s ease;
}

/* Findings page — clear the floating pill */
#page-findings {
  padding-bottom: 120px;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Page Headers
   ================================================================ */

.page-top {
  padding-top: max(20px, calc(env(safe-area-inset-top) + 12px));
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.brand {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.page-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.settings-gear {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.settings-gear:active {
  background: var(--border-light);
  color: var(--text-2);
  transform: scale(0.94);
}
.settings-gear svg { width: 16px; height: 16px; }
.settings-footer {
  text-align: center;
  padding: 20px 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.page-sub {
  font-size: 14px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ================================================================
   Date Navigation
   ================================================================ */

.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 16px;
}

.date-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.date-arrow:active { background: var(--border-light); transform: scale(0.95); }
.date-arrow:disabled { opacity: 0.25; pointer-events: none; }
.date-arrow svg { width: 14px; height: 14px; }

.date-current {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  min-width: 80px;
  text-align: center;
}

/* ================================================================
   Feed
   ================================================================ */

.feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -- Signal Insight Card (at top of feed) -- */
.insight-card {
  position: relative;
  background: var(--surface);
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background-clip: padding-box;
  cursor: pointer;
  transition: transform 0.15s;
  overflow: hidden;
}

.insight-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from var(--gradient-angle), var(--teal), var(--gold), var(--sage), var(--teal));
  z-index: -1;
  animation: rotate-gradient 6s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

.insight-card:active { transform: scale(0.985); }

.checkin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--teal);
}

.checkin-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.checkin-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--teal-soft, #e8f5f0);
  color: var(--teal);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.checkin-btn:active { opacity: 0.7; }

.insight-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 8px;
}

.insight-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text-1);
  margin-bottom: 4px;
}

.insight-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.insight-link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  margin-top: 10px;
  display: inline-block;
  letter-spacing: 0.02em;
}

/* -- Feed Entry Cards -- */
.entry-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 3px solid transparent;
  box-shadow: var(--shadow-xs);
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer;
}

.entry-card:active {
  transform: scale(0.985);
  box-shadow: none;
}

.entry-card.food { border-left-color: var(--teal); }
.entry-card.symptom { border-left-color: var(--coral); }

.entry-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}

.entry-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.entry-food-emoji {
  margin-right: 5px;
  font-size: 16px;
  vertical-align: -1px;
}

.entry-time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  flex-shrink: 0;
  margin-left: 12px;
  padding-top: 2px;
}

.entry-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.entry-compounds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

.compound-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.4;
}

.compound-pill.high {
  color: var(--coral);
  background: var(--coral-soft);
}

.compound-pill.moderate {
  color: var(--gold);
  background: var(--gold-soft);
}

.compound-pill.low {
  color: var(--text-3);
  background: rgba(164, 162, 158, 0.08);
}

/* Legacy inline compound styles (kept for confirm modal) */
.cmp { letter-spacing: 0.01em; }
.cmp.high { color: var(--coral); }
.cmp.moderate { color: var(--gold); }
.cmp.low { color: var(--text-3); }

.cmp-sep {
  color: var(--border);
  margin: 0 6px;
  user-select: none;
}

/* Symptom entry specifics */
.entry-severity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sev-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  max-width: 120px;
}

.sev-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.sev-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}

.entry-notes {
  font-size: 13px;
  font-style: italic;
  color: var(--text-2);
  margin-top: 4px;
}

/* -- Empty State -- */
.empty-feed {
  text-align: center;
  padding: 64px 24px 32px;
}

.empty-dot {
  width: 6px;
  height: 6px;
  background: var(--border);
  border-radius: 50%;
  margin: 0 auto 20px;
}

.empty-feed h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 6px;
}

.empty-feed p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ================================================================
   Input Bar
   ================================================================ */

/* Meal suggestion chips */
.suggestions-row {
  position: fixed;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  display: none;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 110;
}
.suggestions-row::-webkit-scrollbar { display: none; }
.suggestions-row.visible { display: flex; }

.suggestion-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  box-shadow: var(--shadow-xs);
  -webkit-tap-highlight-color: transparent;
}
.suggestion-chip:active {
  background: var(--teal-soft);
  border-color: var(--teal);
  transform: scale(0.96);
}

.input-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  background: rgba(249, 248, 245, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light);
  z-index: 50;
}

.ib-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ib-icon:active {
  background: var(--border-light);
  color: var(--text-2);
  transform: scale(0.94);
}

.ib-icon svg { width: 18px; height: 18px; }

.ib-field {
  flex: 1;
  min-width: 0;
  position: relative;
}

.ib-field input {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text-1);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ib-field input::placeholder { color: var(--text-3); }

/* Autocomplete dropdown */
.autocomplete-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  z-index: 60;
  -webkit-overflow-scrolling: touch;
}
.autocomplete-dropdown.visible { display: block; }
.autocomplete-dropdown:empty { display: none; }

.ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-light);
  -webkit-tap-highlight-color: transparent;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:active { background: var(--teal-soft); }

.ac-emoji {
  font-size: 16px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.ac-text {
  flex: 1;
  min-width: 0;
}

.ac-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 1px;
}

.ac-highlight {
  color: var(--teal);
  font-weight: 600;
}

.ib-field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.ib-action {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(13, 124, 102, 0.25);
}

.ib-action:active { transform: scale(0.93); }
.ib-action svg { width: 18px; height: 18px; }

.ib-action.recording {
  background: var(--coral);
  box-shadow: 0 2px 8px rgba(196, 83, 58, 0.25);
  animation: mic-pulse 1.6s ease infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(196, 83, 58, 0.25); }
  50% { box-shadow: 0 2px 16px rgba(196, 83, 58, 0.45); }
}

/* ================================================================
   Navigation — Floating Pill
   ================================================================ */

.nav-pill {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 28px;
  box-shadow:
    0 1px 3px rgba(31, 29, 27, 0.06),
    0 6px 20px rgba(31, 29, 27, 0.08),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(236, 234, 230, 0.6);
  z-index: 100;
  transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* When Journal tab is active, pill sits snug above the input bar */
.nav-pill.with-input-bar {
  bottom: calc(62px + max(10px, env(safe-area-inset-bottom, 10px)));
}

/* When suggestions are showing, pill moves above them */
.nav-pill.with-suggestions {
  bottom: calc(62px + 48px + max(10px, env(safe-area-inset-bottom, 10px)));
}

/* Sliding indicator behind active button */
.nav-pill-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--teal);
  border-radius: 24px;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 2px 8px rgba(13, 124, 102, 0.3);
  z-index: 0;
}

/* Slide right when findings is active */
.nav-pill[data-active="findings"] .nav-pill-slider {
  transform: translateX(calc(100% + 4px));
}

.nav-pill-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-3);
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 24px;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.nav-pill-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-pill-btn.active {
  color: #fff;
}

.nav-pill-btn:not(.active):active {
  color: var(--text-2);
}

/* Tactile press feedback on the whole pill */
.nav-pill:active {
  transform: translateX(-50%) scale(0.97);
}

/* ================================================================
   Modals
   ================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 29, 27, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 430px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 8px 24px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  animation: sheetUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-lg);
}

.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.modal-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-1);
  margin-bottom: 20px;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ================================================================
   Food Confirm Modal
   ================================================================ */

.decomp-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.2;
}

.decomp-compounds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.decomp-section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 10px;
}

.ing-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.ing-row:last-child { border-bottom: none; }

.ing-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
}

.ing-minor {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
}

.ing-compounds {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.5;
}

.decomp-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alcohol-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

.alcohol-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.followup-box {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 20px;
}

.followup-box p {
  font-size: 15px;
  color: var(--text-1);
  margin-bottom: 14px;
  line-height: 1.5;
}

.followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.followup-chip {
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.followup-chip:active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

/* ================================================================
   Symptom Modal
   ================================================================ */

.symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.symptom-btn {
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.12s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.symptom-btn:active { background: var(--bg); }

.symptom-btn.selected {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-soft);
}

.feeling-fine-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--teal-soft);
  color: var(--teal);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.feeling-fine-btn:active {
  background: var(--teal-medium);
}

.symptom-btn.symptom-back {
  border-color: var(--text-primary);
  color: var(--text-primary);
  font-weight: 600;
}

#symptom-detail {
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
}

.sev-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sev-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text-1);
}

.sev-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--teal);
  min-width: 24px;
  text-align: right;
}

.sev-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  margin-bottom: 6px;
}

.sev-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(13, 124, 102, 0.3);
}

.sev-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 16px;
}

/* ================================================================
   Barcode Scanner
   ================================================================ */

#barcode-reader { border-radius: var(--radius-sm); overflow: hidden; }
#barcode-reader video { border-radius: var(--radius-sm); }

.scan-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  margin-top: 12px;
}

/* ================================================================
   Signals Page
   ================================================================ */

.maturity-section {
  margin-bottom: 24px;
}

.maturity-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.maturity-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.maturity-bar-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.8s ease;
}

.maturity-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 36px;
  text-align: right;
}

.maturity-phase {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}

.maturity-phase.foundation { background: var(--teal-soft); color: var(--teal); }
.maturity-phase.emerging { background: var(--gold-soft); color: var(--gold); }
.maturity-phase.precision { background: var(--sage-soft); color: var(--sage); }

.maturity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--text-3);
}

.maturity-stats span {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-2);
}

/* -- Signal Cards (analysis results) -- */
.signal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-xs);
}

.signal-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

.signal-badge.high, .signal-badge.likely { background: var(--sage-soft); color: var(--sage); }
.signal-badge.possible { background: var(--gold-soft); color: var(--gold); }
.signal-badge.investigating { background: rgba(168, 162, 158, 0.1); color: var(--text-3); }

.signal-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text-1);
  margin-bottom: 8px;
  line-height: 1.2;
}

.signal-narrative {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 14px;
}

.signal-conf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.signal-conf-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.signal-conf-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease;
}

.signal-conf-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

.signal-stats {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.signal-stats strong {
  font-weight: 600;
  color: var(--text-2);
}

/* -- Suspect Cards (early signals) -- */
.suspect-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.suspect-body { flex: 1; min-width: 0; }

.suspect-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}

.suspect-detail {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

.suspect-conf {
  width: 48px;
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.suspect-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.suspect-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.suspect-pct {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

/* -- Section Labels -- */
.section-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 12px;
}

/* -- Elimination Card -- */
.elim-card {
  background: var(--teal-soft);
  border: 1px solid var(--teal-medium);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 12px;
}

.elim-card .section-label { color: var(--teal); }

.elim-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

/* -- Insights Card -- */
.insights-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 12px;
}

.insights-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 8px;
}

.insights-card p:last-child { margin-bottom: 0; }

.insights-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* ================================================================
   You Page
   ================================================================ */

.you-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
}

.you-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.you-row:last-child { border-bottom: none; }

.you-row .label {
  font-size: 14px;
  color: var(--text-2);
}

.you-row .val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.you-footer {
  text-align: center;
  padding: 32px 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.06em;
}

/* Trend Charts */
.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.trend-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text-1);
}
.trend-period {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.trend-chart-area {
  position: relative;
  width: 100%;
}
.trend-chart-area svg {
  display: block;
  width: 100%;
  height: auto;
}
.trend-week-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 0 0;
}
.trend-week-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.trend-toggles {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.trend-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.trend-toggle:active { transform: scale(0.96); }
.trend-toggle.active {
  border-color: var(--text-2);
  color: var(--text-1);
  background: var(--bg);
}
.trend-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.trend-toggle.active .trend-toggle-dot {
  opacity: 1;
}
.trend-summary {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.trend-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trend-stat-val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.trend-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ================================================================
   Forms & Buttons
   ================================================================ */

.text-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-family: var(--sans);
  color: var(--text-1);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 12px;
}

.text-input::placeholder { color: var(--text-3); }

.text-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  transition: opacity 0.12s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.35; cursor: default; transform: none; }

.btn-outline {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.btn-outline:active { background: var(--bg); }

.btn-danger {
  width: 100%;
  padding: 13px;
  border: 1px solid rgba(196, 83, 58, 0.15);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--coral);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
}

.btn-danger:active { background: var(--coral-soft); }

/* ================================================================
   Toggle Switch
   ================================================================ */

/* ================================================================
   Profile Flow
   ================================================================ */

.profile-prompt-card {
  background: rgba(184, 134, 11, 0.10);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid rgba(184, 134, 11, 0.25);
  cursor: pointer;
}

.profile-prompt-card:active { transform: scale(0.97); }

.profile-prompt-card .prompt-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--surface);
  background: var(--gold);
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.modal-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: -8px 0 16px;
}

.profile-question {
  margin-bottom: 20px;
}

.profile-options {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.profile-options.profile-wrap {
  flex-wrap: wrap;
}

.profile-opt {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.profile-opt.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
  font-weight: 600;
}

.profile-opt:active { transform: scale(0.95); }

.profile-tip {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  border-radius: 8px;
  padding: 12px;
  line-height: 1.5;
  margin-top: 8px;
}

/* ================================================================
   Toggle Switch
   ================================================================ */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.toggle-label {
  font-size: 14px;
  color: var(--text-primary);
}

.toggle-btn {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--border);
  border: none;
  padding: 2px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.toggle-btn.on {
  background: var(--teal);
}

.toggle-knob {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.toggle-btn.on .toggle-knob {
  transform: translateX(18px);
}

/* ================================================================
   Loading States
   ================================================================ */

.loading-state {
  text-align: center;
  padding: 48px 0;
}

.loading-state p {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 12px;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.dots span {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: dot-pulse 1.4s ease infinite;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.15; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.error-text {
  color: var(--coral);
  font-size: 13px;
  padding: 16px 0;
  text-align: center;
}

/* ================================================================
   Feed Entry — Research Journal Style
   ================================================================ */

.feed-entry {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.12s, box-shadow 0.12s;
  cursor: pointer;
  border: 1px solid var(--border-light);
}
.feed-entry:active { transform: scale(0.98); }

.edit-time-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  box-sizing: border-box;
}

/* Type indicator dot */
.feed-entry::before {
  content: '';
  position: absolute;
  top: 16px;
  left: -1px;
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
}
.feed-entry.food::before { background: var(--teal); }
.feed-entry.symptom::before { background: var(--coral); }

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
}

/* Severity mini bar for symptoms */
.entry-severity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.entry-severity-track {
  flex: 1;
  height: 3px;
  background: var(--border-light);
  border-radius: 2px;
  max-width: 100px;
}

.entry-severity-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--coral);
  transition: width 0.3s ease;
}

.entry-severity-fill.low { opacity: 0.5; }
.entry-severity-fill.medium { opacity: 0.75; }
.entry-severity-fill.high { opacity: 1; }

.entry-severity-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

.entry-note {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 4px;
}

/* Expandable ingredient detail */
.entry-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
  margin-top: 0;
}

.feed-entry.expanded .entry-detail {
  max-height: 500px;
  opacity: 1;
  margin-top: 10px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
}

.entry-ingredients {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry-ing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.entry-ing-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

.entry-ing-compounds {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
}

.entry-edit-btn {
  display: block;
  margin-top: 10px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.entry-edit-btn:active { color: var(--teal); }

/* Compound tooltip */
.compound-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  box-shadow: var(--shadow);
  animation: tooltipIn 0.15s ease;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.compound-tooltip-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
  text-transform: lowercase;
}

.compound-tooltip-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Make compound pills look tappable */
.compound-pill {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.compound-pill:active {
  transform: scale(0.95);
}

/* Tappable compound names on Findings page */
.compound-tappable {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--text-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.compound-tappable:active {
  text-decoration-color: var(--teal);
}

.compound-high { color: var(--coral); }
.compound-moderate { color: var(--gold); }
.compound-low { color: var(--text-3); }

.cdot {
  color: var(--border);
  user-select: none;
}

.empty-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--text-2);
  margin-bottom: 6px;
}

.empty-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ================================================================
   Food Confirm Modal (new classes)
   ================================================================ */

.confirm-compounds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.ingredient-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.ingredient-item:last-child { border-bottom: none; }

.ingredient-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
}

.ingredient-compounds {
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.5;
}

/* Editable ingredient row */
.ingredient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ingredient-remove {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ingredient-remove:hover,
.ingredient-remove:active {
  opacity: 1;
  color: var(--coral);
}

/* Add ingredient input */
.add-ingredient-row {
  padding: 8px 0 4px;
}

.add-ingredient-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-1);
  background: transparent;
  outline: none;
  transition: border-color 0.2s;
}
.add-ingredient-input::placeholder { color: var(--text-3); }
.add-ingredient-input:focus {
  border-color: var(--teal);
  border-style: solid;
}

/* Re-describe link */
.redescribe-link {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.redescribe-link:hover,
.redescribe-link:active {
  color: var(--teal);
}

.redescribe-row {
  margin-bottom: 8px;
}

.modal-question {
  font-size: 15px;
  color: var(--text-1);
  line-height: 1.5;
  margin-bottom: 16px;
}

.followup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.followup-btn {
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.followup-btn:active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

/* ================================================================
   Signals Page (new classes used by JS)
   ================================================================ */

.card-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 12px;
}

.card-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 14px;
}

.maturity-row {
  margin-bottom: 16px;
}

.maturity-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.8s ease;
}

.maturity-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-top: 6px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-item { text-align: center; }

.stat-val {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
}

.stat-label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* -- Signals: Hero + Expandable List -- */
.signals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}
.empty-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.empty-ring-label {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-2);
}

/* Exposure summary (building state) */
.exposure-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 20px;
  width: 100%;
  text-align: left;
}
.exposure-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.exposure-row + .exposure-row { border-top: 1px solid var(--border); }
.exposure-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}
.exposure-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Finding card (hero) */
.finding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  animation: findingIn 0.5s ease forwards;
  animation-delay: 0.05s;
}
@keyframes findingIn {
  to { opacity: 1; transform: translateY(0); }
}
.finding-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.finding-compound {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--text-1);
  line-height: 1.15;
}

/* Strength indicator */
.strength {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  margin-left: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.strength::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.strength.strong { color: var(--teal); }
.strength.strong::before { background: var(--teal); }
.strength.possible { color: var(--gold); }
.strength.possible::before { background: var(--gold); }
.strength.watching { color: var(--gold); }
.strength.watching::before { background: var(--gold); }

/* Proportion bars */
.finding-bars { margin-bottom: 14px; }
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bar-row:last-child { margin-bottom: 0; }
.bar-symptom {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  width: 72px;
  flex-shrink: 0;
}
.bar-track {
  flex: 1;
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  animation: barGrow 0.8s ease forwards;
}
.bar-fill.teal { background: var(--teal); }
.bar-fill.gold { background: var(--gold); }
.bar-row:nth-child(1) .bar-fill { animation-delay: 0.3s; }
.bar-row:nth-child(2) .bar-fill { animation-delay: 0.45s; }
.bar-row:nth-child(3) .bar-fill { animation-delay: 0.6s; }
@keyframes barGrow { to { width: var(--w); } }
.bar-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* Found in foods */
.found-in {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 14px;
  line-height: 1.5;
}
.found-in strong { font-weight: 500; color: var(--text-2); }

/* Card footer */
.finding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}
.ev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.ev-toggle:active { color: var(--text-2); }
.ev-toggle svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.bridge-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s;
}
.bridge-link:active { color: var(--teal); }
.bridge-link svg { width: 11px; height: 11px; }

/* Evidence drawer */
.ev-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.ev-drawer.open { max-height: 400px; }
.ev-inner { padding: 14px 0 2px; }
.ev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.ev-name {
  font-size: 12px;
  color: var(--text-2);
  width: 68px;
  flex-shrink: 0;
}
.ev-dots {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.hit { background: var(--teal); }
.dot.miss { border: 1.5px solid var(--border); }
.ev-frac {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}
.ev-timing {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

/* Other signals label */
.other-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 0 4px;
  margin-bottom: 8px;
  opacity: 0;
  animation: findingIn 0.4s ease forwards;
  animation-delay: 0.2s;
}

/* Compact list */
.compact-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  animation: findingIn 0.5s ease forwards;
  animation-delay: 0.25s;
}
.compact-item {
  border-bottom: 1px solid var(--border-light);
}
.compact-item:last-child { border-bottom: none; }
.compact-row {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.compact-row:active { background: var(--bg); }
.compact-item.expanded .compact-row { background: var(--bg); }
.compact-left { flex: 1; min-width: 0; }
.compact-compound {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.compact-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.compact-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}
.compact-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform 0.2s ease;
}
.compact-item.expanded .compact-chevron { transform: rotate(90deg); }

/* Compact detail (expanded) */
.compact-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.compact-detail.open { max-height: 500px; }
.compact-detail-inner {
  padding: 16px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}
.compact-detail-inner .finding-bars { margin-bottom: 12px; }
.compact-detail-inner .found-in { margin-bottom: 12px; }
.compact-detail-inner .finding-footer {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Analysis wrap */
.sig-analysis-wrap { padding: 12px 0 0; }
.sig-analysis-btn { width: 100%; text-align: center; }

/* Analysis results */
.corr-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 10px;
}

.corr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.corr-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text-1);
}

.corr-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.corr-badge.high, .corr-badge.likely { background: var(--sage-soft); color: var(--sage); }
.corr-badge.possible { background: var(--gold-soft); color: var(--gold); }
.corr-badge.investigating { background: rgba(168, 162, 158, 0.1); color: var(--text-3); }

.corr-stats {
  display: flex;
  gap: 16px;
}

.corr-stat {
  text-align: center;
}

.corr-stat .val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}

.corr-stat .label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elim-suggestion {
  background: var(--teal-soft);
  border: 1px solid var(--teal-medium);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 12px;
}

.elim-suggestion p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ================================================================
   You Page (additional)
   ================================================================ */

.you-label {
  font-size: 14px;
  color: var(--text-2);
}

.you-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

/* ================================================================
   Entry Animations
   ================================================================ */

.feed-entry, .insight-card, .signal-card {
  animation: entryIn 0.3s ease both;
}

@keyframes entryIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger feed entries */
.feed > :nth-child(1) { animation-delay: 0s; }
.feed > :nth-child(2) { animation-delay: 0.04s; }
.feed > :nth-child(3) { animation-delay: 0.08s; }
.feed > :nth-child(4) { animation-delay: 0.12s; }
.feed > :nth-child(5) { animation-delay: 0.16s; }
.feed > :nth-child(6) { animation-delay: 0.2s; }
.feed > :nth-child(7) { animation-delay: 0.24s; }
.feed > :nth-child(8) { animation-delay: 0.28s; }

/* ================================================================
   PWA
   ================================================================ */

@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .page-top { padding-top: 12px; }
}

::-webkit-scrollbar { width: 0; }

/* ================================================================
   Auth Screen
   ================================================================ */

#page-auth {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-container {
  width: 100%;
  max-width: 380px;
  padding: 0 24px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 32px;
}

.auth-title {
  font-family: 'Instrument Serif', serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--text-1);
  margin: 0;
}

.auth-tagline {
  font-size: 14px;
  color: var(--text-2);
  margin: 6px 0 0;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.auth-tab.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: var(--shadow-xs);
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--text-1);
  background: var(--surface);
  margin-bottom: 10px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.auth-input:focus {
  border-color: var(--teal);
}

.auth-input::placeholder {
  color: var(--text-3);
}

select.auth-input {
  color: var(--text-2);
}

select.auth-input:has(option:checked:not([value=""])) {
  color: var(--text-1);
}

.auth-submit {
  width: 100%;
  margin-top: 6px;
}

.auth-error {
  background: rgba(196, 83, 58, 0.08);
  color: var(--coral);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  margin-bottom: 14px;
}

.auth-skip {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  text-align: center;
}

.auth-skip:hover {
  color: var(--text-2);
}

.auth-loading .auth-submit {
  opacity: 0.6;
  pointer-events: none;
}

.settings-user-info {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.settings-user-email {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 500;
}

.settings-user-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}