/* ============================================================
   TolRx - calm, readable health-tool aesthetic
   ============================================================ */
:root {
  --color-bg:          #f8f7f4;
  --color-bg-subtle:   #f0ede8;
  --color-surface:     #ffffff;
  --color-border:      #e2ddd8;
  --color-text:        #2d2926;
  --color-text-muted:  #7a736b;
  --color-primary:     #4a7c6f;
  --color-primary-h:   #3a6459;
  --color-danger:      #b85450;
  --color-danger-bg:   #fdf0f0;
  --color-safe:        #4a7c6f;
  --color-safe-bg:     #f0f7f5;
  --color-warn:        #b87a40;
  --color-warn-bg:     #fdf3e7;
  --radius:            6px;
  --shadow-sm:         0 1px 3px rgba(0,0,0,.08);
  --max-width:         860px;
  --nav-height:        52px;
}

/* ── Dark theme ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  --color-bg:          #1c1a18;
  --color-bg-subtle:   #302c28;
  --color-surface:     #252220;
  --color-border:      #3c3732;
  --color-text:        #ede9e3;
  --color-text-muted:  #9a9088;
  --color-primary:     #5eac9d;
  --color-primary-h:   #4e9c8d;
  --color-danger:      #d47470;
  --color-danger-bg:   #301a19;
  --color-safe:        #5eac9d;
  --color-safe-bg:     #1a2e2a;
  --color-warn:        #d49a60;
  --color-warn-bg:     #2e2014;
  --shadow-sm:         0 1px 3px rgba(0,0,0,.4);
  --color-plan-supporter:    #d4aa30;
  --color-plan-supporter-bg: #2a2200;
  --color-plan-founder:      #a080d0;
  --color-plan-founder-bg:   #1e1530;
  color-scheme: dark;
}
/* Invert tooltip to light-on-dark-bg contrast in dark mode */
:root[data-theme="dark"] .tooltip-box { background: #ede9e3; color: #1c1a18; }
:root[data-theme="dark"] .tooltip-box::before { border-bottom-color: #ede9e3; }
:root[data-theme="dark"] .tooltip-box--above::before { border-top-color: #ede9e3; border-bottom-color: transparent; }

/* ── High-contrast / colorblind-friendly theme ───────────── */
/* Replaces red/green pair with vermillion/teal - safe for deuteranopia */
:root[data-theme="high-contrast"] {
  --color-bg-subtle:   #ece9e4;
  --color-border:      #b0a8a0;
  --color-text:        #1a1714;
  --color-text-muted:  #575250;
  --color-primary:     #0066aa;
  --color-primary-h:   #005599;
  --color-danger:      #cc3311;
  --color-danger-bg:   #fdeee8;
  --color-safe:        #009988;
  --color-safe-bg:     #e8f7f4;
  --color-warn:        #c97000;
  --color-warn-bg:     #fef6e4;
  --color-plan-supporter:    #a07800;
  --color-plan-supporter-bg: #fdf7e0;
  --color-plan-founder:      #6b4fa0;
  --color-plan-founder-bg:   #f4f0fc;
}

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

html { font-size: 16px; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-brand {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
  text-decoration: none;
  margin-right: .25rem;
  flex-shrink: 0;
}
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a {
  font-size: .9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a.active,
.nav-links a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.nav-email { font-size: .82rem; color: var(--color-text-muted); }

/* ── Buttons ──────────────────────────────────────────────── */
button, .btn-primary, .btn-ghost, .btn-danger {
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  transition: background .15s, opacity .15s;
}
button:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-h); border-color: var(--color-primary-h); }

.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-ghost:hover:not(:disabled) { background: var(--color-border); }

.btn-danger { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-bg); }

.btn-sm { font-size: .82rem; padding: .25rem .7rem; white-space: nowrap; }
@media (pointer: coarse) {
  .btn-sm { min-height: 2.75rem; padding-top: .4rem; padding-bottom: .4rem; }
}
.btn-full { width: 100%; justify-content: center; }

/* ── Form elements ────────────────────────────────────────── */
input, textarea, select {
  font-family: inherit;
  font-size: .95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .45rem .75rem;
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-primary); }
textarea { resize: vertical; }

label {
  display: block;
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-bottom: .3rem;
}
.label-hint     { font-weight: 400; font-size: .8rem; }
.label-required { font-size: .8rem; color: var(--color-danger); }

.field { display: flex; flex-direction: column; gap: .3rem; }

.radio-group  { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .15rem; }
.radio-option { display: flex; align-items: center; gap: .4rem; font-size: .95rem; cursor: pointer; }

/* ── Layout ───────────────────────────────────────────────── */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
h1 { font-size: 1.3rem; font-weight: 700; margin-bottom: .25rem; }
h2 { font-size: 1rem; font-weight: 600; }

.page-desc {
  color: var(--color-text-muted);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}
.page-desc--sm { font-size: .85rem; margin-bottom: .75rem; }

.stack { display: flex; flex-direction: column; gap: 1rem; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.card-actions { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; }

.med-name   { font-weight: 600; font-size: 1rem; }
.med-sub    { color: var(--color-text-muted); font-size: .88rem; }
.med-meta   { color: var(--color-text-muted); font-size: .8rem; }
.med-ndc    { font-family: monospace; letter-spacing: .02em; }

.empty-state {
  text-align: center;
  padding: 2.75rem 1.5rem;
}
.empty-state-icon {
  display: block;
  margin: 0 auto 1.25rem;
  color: var(--color-primary);
  opacity: .65;
}
.empty-state-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .5rem;
}
.empty-state-desc {
  font-size: .9rem;
  color: var(--color-text-muted);
  max-width: 380px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}
.empty-state-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Symptom notes ────────────────────────────────────────── */
.symptom-notes {
  margin-top: .65rem;
  font-size: .88rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  white-space: pre-wrap;
}

/* ── Inline edit form ─────────────────────────────────────── */
.edit-form {
  margin-top: .85rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.med-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .73rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  margin: .4rem 0 .5rem;
}
.med-badge::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.med-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.med-badge--danger::before { background: var(--color-danger); }
.med-badge--warn   { background: var(--color-warn-bg);   color: var(--color-warn); }
.med-badge--warn::before   { background: var(--color-warn); }
.med-badge--safe   { background: var(--color-safe-bg);   color: var(--color-safe); }
.med-badge--safe::before   { background: var(--color-safe); }
.med-badge--neutral { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.med-badge--neutral::before { background: var(--color-text-muted); }

/* ---- Account plan badge ---- */
.plan-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.plan-row-desc {
  font-size: .875rem;
  color: var(--color-text-muted);
}
.plan-row-link {
  font-size: .8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.plan-badge--free {
  color: var(--color-text-muted);
  background: transparent;
  border-color: var(--color-border);
}
.plan-badge--premium {
  color: var(--color-safe);
  background: var(--color-safe-bg);
  border-color: var(--color-safe);
}
.plan-badge--supporter {
  color: var(--color-plan-supporter);
  background: var(--color-plan-supporter-bg);
  border-color: var(--color-plan-supporter);
}
.plan-badge--founder {
  color: var(--color-plan-founder);
  background: var(--color-plan-founder-bg);
  border-color: var(--color-plan-founder);
}

.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .15rem .45rem;
  border-radius: 4px;
}
.badge-active {
  background: var(--color-safe-bg);
  color: var(--color-safe);
  border: 1px solid var(--color-safe);
}
.inline-details summary {
  cursor: pointer;
  list-style: none;
}
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details[open] summary { opacity: .7; }

.report-link {
  margin-top: .6rem;
  font-size: .75rem;
  color: var(--color-danger);
  border-color: var(--color-danger);
  opacity: .85;
}
.report-link:hover:not(:disabled) {
  background: var(--color-danger-bg);
  opacity: 1;
}
.report-form {
  margin-top: .85rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.report-confirmation {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.btn-row { display: flex; gap: .5rem; }

/* ── Ingredient tags ──────────────────────────────────────── */
.ingredient-section { margin-top: .85rem; }
.ingredient-label {
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: .4rem;
}
.ingredient-label .count { margin-left: .2rem; }
.ingredient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.tag {
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid transparent;
  position: relative;
}
.tag-neutral  { background: var(--color-border);    color: var(--color-text-muted); }
.tag-trigger  { background: var(--color-danger-bg); color: var(--color-danger);     border-color: var(--color-danger); }
.tag-safe     { background: var(--color-safe-bg);   color: var(--color-safe);       border-color: var(--color-safe); }
.tag-warn     { background: var(--color-warn-bg);   color: var(--color-warn);       border-color: var(--color-warn); }
/* Dashed border = community-flagged trigger, not yet reviewed personally */
.tag-known    { background: var(--color-warn-bg);   color: var(--color-warn);       border-color: var(--color-warn); border-style: dashed; }

.tag-clickable { cursor: pointer; user-select: none; }
.tag-clickable:hover { filter: brightness(.94); }

/* JS-positioned tooltip - appended to body so it's never clipped by overflow */
.tooltip-box {
  position: absolute;
  background: #2d2926;
  color: #fff;
  font-size: .75rem;
  line-height: 1.45;
  padding: .35rem .65rem;
  border-radius: 5px;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  animation: tooltip-in .12s ease;
}
@keyframes tooltip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* Arrow: default points up (tooltip below element) */
.tooltip-box::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #2d2926;
}
/* Flipped: arrow points down (tooltip above element) */
.tooltip-box--above::before {
  top: auto;
  bottom: -9px;
  border-bottom-color: transparent;
  border-top-color: #2d2926;
}

/* Tooltip hint on trigger page ingredient names */
.ingredient-name[data-tooltip] { cursor: help; border-bottom: 1px dotted var(--color-text-muted); }

/* ── Search page ──────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.search-bar input { max-width: 440px; }
.search-filters { margin-bottom: 1rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.filter-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filter-group--checks { gap: .25rem .875rem; }
.filter-label { font-size: .8125rem; color: var(--color-text-muted); white-space: nowrap; }
.filter-group select {
  font-size: .8125rem; padding: .25rem .5rem;
  border: 1px solid var(--color-border); border-radius: .375rem;
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.filter-check { display: flex; align-items: center; gap: .3rem; font-size: .8125rem; cursor: pointer; white-space: nowrap; }
.filter-check input[type="checkbox"] { cursor: pointer; accent-color: var(--color-primary); }
.results-count { font-size: .85rem; color: var(--color-text-muted); margin-bottom: .9rem; }
.empty-state-inline { color: var(--color-text-muted); font-size: .9rem; padding: .5rem 0; }
.no-results-fallback { margin-top: .6rem; font-size: .85rem; color: var(--color-text-muted); }
.no-results-fallback a { color: var(--color-primary); text-decoration: none; }
.no-results-fallback a:hover { text-decoration: underline; }
.recent-searches { display: none; margin: .6rem 0 .25rem; }
.recent-searches-label { font-size: .78rem; color: var(--color-text-muted); margin-right: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.recent-search-chip {
  display: inline-flex; align-items: center;
  font-size: .82rem; padding: .2rem .65rem;
  background: var(--color-bg-subtle); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
  cursor: pointer; margin: .2rem .2rem .2rem 0;
  transition: background .12s;
}
.recent-search-chip:hover { background: var(--color-border); }
.result-card { margin-bottom: .75rem; }
@keyframes pill-spin { to { transform: rotate(360deg); } }
.htmx-indicator { display: none; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-text-muted); }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: inline-flex; }
.htmx-indicator .spinner {
  width: .85rem; height: .85rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: pill-spin .7s linear infinite;
  flex-shrink: 0;
}
.load-more-container { margin-top: 1rem; text-align: center; }

/* ── Tabs ─────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1rem;
}
.tab-btn {
  background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: .55rem 1.1rem; font-size: .9rem; cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: .35rem;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn--active { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab-count {
  background: var(--color-border); color: var(--color-text-muted);
  border-radius: 999px; font-size: .7rem; padding: .1rem .45rem; font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel--active { display: block; }

/* ── Overview tab ─────────────────────────────────────── */
.overview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
}
.overview-widget {
  display: flex; flex-direction: column; gap: .4rem;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .15s;
  cursor: pointer;
}
.overview-widget:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}
.overview-widget-header { display: flex; align-items: baseline; gap: .5rem; }
.overview-big-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.overview-big-num--danger { color: var(--color-danger); }
.overview-big-num--warn   { color: var(--color-warn); }
.overview-big-num--safe   { color: var(--color-safe); }
.overview-widget-label { font-size: .82rem; color: var(--color-text-muted); }
.overview-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 120px; overflow-y: auto; flex: 1;
}
.overview-list-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem 0; font-size: .87rem;
  border-bottom: 1px solid var(--color-border);
}
.overview-list-item:last-child { border-bottom: none; }
.overview-list-more { color: var(--color-text-muted); font-style: italic; }
.overview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.overview-dot--danger { background: var(--color-danger); }
.overview-dot--warn   { background: var(--color-warn); }
.overview-none { font-size: .85rem; color: var(--color-text-muted); margin: 0; flex: 1; }
.overview-widget-cta {
  font-size: .8rem; color: var(--color-primary); margin-top: auto; padding-top: .5rem;
  font-weight: 500;
}
@media (max-width: 580px) { .overview-grid { grid-template-columns: 1fr; } }

/* ── Auth pages ───────────────────────────────────────────── */
.auth-card {
  max-width: 400px;
  margin: 3rem auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-card h1 { margin-bottom: 0; }
.subtitle { color: var(--color-text-muted); font-size: .88rem; margin-top: -.5rem; }
.auth-link { font-size: .88rem; color: var(--color-text-muted); }
.auth-card form { display: flex; flex-direction: column; gap: .9rem; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-text-muted);
  font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: #3c4043;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn-google:hover {
  background: #f8f8f8;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.alert {
  padding: .6rem .85rem;
  border-radius: var(--radius);
  font-size: .88rem;
}
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert-info  { background: var(--color-safe-bg);   color: var(--color-safe); }

/* ── Trigger summary page ─────────────────────────────────── */
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  align-items: start;
}
.trigger-card { padding: 1rem 1.2rem; }
.trigger-card .section-heading { margin-bottom: .6rem; }

.section-heading { margin-bottom: .75rem; }
.section-heading--danger { color: var(--color-danger); }
.section-heading--warn   { color: var(--color-warn); }
.section-heading--safe   { color: var(--color-safe); }
.section-heading .count  { font-weight: 400; font-size: .88rem; margin-left: .3rem; color: var(--color-text-muted); }
.trigger-list { display: flex; flex-direction: column; gap: .35rem; }

.trigger-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-radius: var(--radius);
  padding: .5rem .65rem;
}
.trigger-row--danger { background: var(--color-danger-bg); }
.trigger-row--safe   { background: var(--color-safe-bg); }
.trigger-row--warn   { background: var(--color-warn-bg); }

.ingredient-name { font-weight: 500; font-size: .88rem; }
.status-buttons  { display: flex; gap: .3rem; flex-wrap: wrap; }

.status-btn {
  font-size: .78rem;
  padding: .2rem .6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  transition: background .12s;
}
.status-btn:disabled { cursor: default; }

.status-btn--trigger { border-color: var(--color-danger); color: var(--color-danger); }
.status-btn--trigger.status-btn--active,
.status-btn--trigger:not(:disabled):hover { background: var(--color-danger-bg); }

.status-btn--warn { border-color: var(--color-warn); color: var(--color-warn); }
.status-btn--warn.status-btn--active,
.status-btn--warn:not(:disabled):hover { background: var(--color-warn-bg); }

.status-btn--safe { border-color: var(--color-safe); color: var(--color-safe); }
.status-btn--safe.status-btn--active,
.status-btn--safe:not(:disabled):hover { background: var(--color-safe-bg); }

.status-btn--unreviewed { color: var(--color-text); border-color: var(--color-text-muted); }
.status-btn--unreviewed.status-btn--active,
.status-btn--unreviewed:not(:disabled):hover { background: var(--color-border); }

.status-btn--remove { color: var(--color-text); }
.status-btn--remove:not(:disabled):hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); }

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: .6rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  margin-left: .3rem;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.help-icon:hover { background: var(--color-text-muted); color: #fff; }

/* ── Compare page ─────────────────────────────────────────── */
.compare-controls {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.compare-controls .field { flex: 1; min-width: 180px; }
.compare-vs {
  font-size: .9rem;
  color: var(--color-text-muted);
  padding-bottom: .5rem;
  flex-shrink: 0;
}

.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  margin-top: 1rem;
}
.diff-col--shared { grid-column: 1 / -1; }

.diff-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.diff-col--a { border-color: var(--color-danger); }
.diff-col--b { border-color: var(--color-warn); }

.diff-heading {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .65rem;
}
.diff-col--a .diff-heading { color: var(--color-danger); }
.diff-col--b .diff-heading { color: var(--color-warn); }
.diff-col--shared .diff-heading { color: var(--color-text-muted); }

.diff-list { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.diff-list li { font-size: .88rem; }
.diff-list--shared li { color: var(--color-text-muted); }

.muted { color: var(--color-text-muted); font-size: .88rem; }
.count { color: var(--color-text-muted); font-weight: 400; font-size: .88rem; }

/* ── Discontinued medications ─────────────────────────────── */
.discontinued-section-heading {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 1.5rem 0 .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.med-card--discontinued {
  opacity: .65;
  border-style: dashed;
}
.med-card--discontinued:hover { opacity: .85; }

/* ── Bulk import ──────────────────────────────────────────── */
.header-actions { display: flex; gap: .5rem; align-items: center; }

.bulk-result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.bulk-result-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: .9rem;
}
.bulk-ndc {
  font-family: monospace;
  font-size: .82rem;
  color: var(--color-text-muted);
  min-width: 9rem;
  flex-shrink: 0;
}
.bulk-status--added     { color: var(--color-safe); }
.bulk-status--duplicate { color: var(--color-text-muted); }
.bulk-status--not-found { color: var(--color-danger); }
.bulk-status--error     { color: var(--color-danger); }

/* ── Profile page ─────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.profile-col { display: flex; flex-direction: column; gap: 1.25rem; }
.card-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 1rem 0;
}
.condition-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .5rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: background .12s;
  width: 100%;
}
.condition-option:hover { background: var(--color-bg); }
.condition-option input[type="checkbox"] { width: auto; accent-color: var(--color-primary); }
.condition-label { font-weight: 600; font-size: .9rem; min-width: 3rem; }
.condition-desc  { font-size: .82rem; color: var(--color-text-muted); }
.context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}
.context-chip {
  position: relative;
  cursor: pointer;
}
.context-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.context-chip-label {
  display: block;
  padding: .35rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.context-chip input:checked + .context-chip-label {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.context-chip:hover .context-chip-label { border-color: var(--color-primary); }

/* ── Find safer formulations link ────────────────────────── */
.find-safer-link {
  display: inline-block;
  font-size: .8rem;
  color: var(--color-primary);
  margin-top: .3rem;
  margin-bottom: .1rem;
  text-decoration: none;
}
.find-safer-link::after { content: ' \2192'; }
.find-safer-link:hover { text-decoration: underline; }

/* ── No ingredient data note ──────────────────────────────── */
.no-data-note {
  font-size: .82rem;
  color: var(--color-text-muted);
  padding: .5rem 0 .25rem;
  font-style: italic;
}

/* ── Onboarding flow ──────────────────────────────────────── */
.onboarding-wrap {
  max-width: 600px;
  margin: 0 auto;
}
.onboarding-wrap h1 { margin-bottom: .5rem; }

.ob-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
}
.ob-step {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  background: var(--color-border);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.ob-step--active {
  background: var(--color-primary);
  color: #fff;
}
.ob-step--done {
  background: var(--color-safe);
  color: #fff;
}
.ob-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
}
.ob-line--done {
  background: var(--color-safe);
}

.ob-trigger-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .5rem;
}
.ob-trigger-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .1s;
}
.ob-trigger-row:hover { background: var(--color-bg); }
.ob-trigger-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}
.ob-trigger-info { flex: 1; min-width: 0; }
.ob-trigger-name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-text);
}
.ob-trigger-reason {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: .1rem;
  line-height: 1.4;
}

.ob-severity {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ob-severity--high     { background: var(--color-danger-bg); color: var(--color-danger); }
.ob-severity--moderate { background: var(--color-warn-bg);   color: var(--color-warn); }
.ob-severity--low      { background: var(--color-border);    color: var(--color-text-muted); }

/* ── Disclaimers ──────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 1rem 1.5rem;
  margin-top: 3rem;
  font-size: .75rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}
.site-footer-links {
  margin-top: .4rem;
}
.site-footer-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: .75rem;
}
.site-footer-links a:hover { text-decoration: underline; }
.footer-sep { margin: 0 .35rem; color: var(--color-border); }
.disclaimer-note {
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: .75rem;
}

/* ── FAQ / How it works ───────────────────────────────── */
.faq-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.faq-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-border);
}
.faq-qa { margin-bottom: 1rem; }
.faq-qa:last-child { margin-bottom: 0; }
.faq-q {
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 .3rem;
}
.faq-a, .faq-body {
  font-size: .88rem;
  line-height: 1.6;
  margin: 0 0 .5rem;
}
.faq-note {
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: .75rem;
  font-style: italic;
}
.faq-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: .75rem;
}
@media (max-width: 580px) {
  .faq-source-grid { grid-template-columns: 1fr; }
}
.faq-source-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}
.faq-source-name {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.faq-source-desc {
  font-size: .82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.faq-source-link {
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.faq-source-link:hover { text-decoration: underline; }
.faq-source-list {
  margin: .4rem 0 .75rem 1.25rem;
  font-size: .88rem;
  line-height: 1.8;
}
.faq-source-list a {
  color: var(--color-primary);
  text-decoration: none;
}
.faq-source-list a:hover { text-decoration: underline; }
.faq-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: .65rem;
  overflow: hidden;
}
.faq-group-summary {
  padding: .7rem 1rem;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  background: var(--color-bg);
  list-style: none;
  user-select: none;
}
.faq-group-summary::-webkit-details-marker { display: none; }
.faq-group-summary::before {
  content: '▶';
  font-size: .6rem;
  margin-right: .55rem;
  display: inline-block;
  transition: transform .15s;
  vertical-align: middle;
}
details[open] > .faq-group-summary::before { transform: rotate(90deg); }
.faq-group-body {
  padding: .9rem 1rem;
  font-size: .85rem;
  line-height: 1.65;
  border-top: 1px solid var(--color-border);
}
.faq-group-body p { margin: 0 0 .6rem; }
.faq-group-body p:last-of-type { margin-bottom: 0; }
.faq-cite-list {
  margin: .65rem 0 0 1.25rem;
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.faq-cite-list a {
  color: var(--color-primary);
  text-decoration: none;
}
.faq-cite-list a:hover { text-decoration: underline; }
.faq-condition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 580px) {
  .faq-condition-grid { grid-template-columns: 1fr; }
}
.faq-condition-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}
.faq-condition-name {
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .4rem;
}
.faq-condition-desc {
  font-size: .82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 .5rem;
}
.faq-condition-card a {
  font-size: .8rem;
  color: var(--color-primary);
  text-decoration: none;
}
.faq-condition-card a:hover { text-decoration: underline; }

/* ── Medication-level trigger banner ─────────────────────── */
.med-trigger-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: .75rem;
  border-left: 3px solid transparent;
}
.med-trigger-banner--danger  { background: var(--color-danger-bg); border-left-color: var(--color-danger); }
.med-trigger-banner--warn    { background: var(--color-warn-bg);   border-left-color: var(--color-warn); }
.med-trigger-banner--safe    { background: var(--color-safe-bg);   border-left-color: var(--color-safe); }
.med-trigger-banner--neutral { background: var(--color-bg);        border-left-color: var(--color-border); }
.med-trigger-banner-text { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.med-trigger-banner-actions { display: flex; gap: .25rem; flex-shrink: 0; align-items: flex-start; }
.med-trigger-notes { color: var(--color-text-muted); font-style: italic; font-size: .82rem; }

/* ── Medication flag form ─────────────────────────────────── */
.med-flag-form { padding: .75rem 0 .5rem; }
.med-flag-form-label { font-size: .82rem; color: var(--color-text-muted); margin-bottom: .5rem; }
.flag-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  margin-bottom: .5rem;
}
.flag-status-option {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: .82rem;
  cursor: pointer;
  transition: background .1s;
}
.flag-status-option input[type="radio"] { width: auto; accent-color: var(--color-primary); flex-shrink: 0; }
.flag-status-option:hover { background: var(--color-bg); }
.flag-status-option--danger.flag-status-option--selected  { background: var(--color-danger-bg); border-color: var(--color-danger); }
.flag-status-option--warn.flag-status-option--selected    { background: var(--color-warn-bg);   border-color: var(--color-warn); }
.flag-status-option--safe.flag-status-option--selected    { background: var(--color-safe-bg);   border-color: var(--color-safe); }
.flag-status-option.flag-status-option--selected          { background: var(--color-bg);        border-color: var(--color-text-muted); }

/* ── Triggers page: flagged meds section ─────────────────── */
.trigger-card--full { grid-column: 1 / -1; }
.med-flag-summary { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.med-flag-status-label { font-size: .8rem; color: var(--color-text-muted); font-style: italic; }

/* ── Mobile responsive ────────────────────────────────────── */

/* Ingredient tag collapse: hide tags beyond 10 on small screens */
@media (max-width: 640px) {
  .ingredient-tags:not(.tags-expanded) .tag:nth-child(n+11) { display: none; }
  .tags-show-more {
    display: inline-block;
    font-size: .75rem;
    color: var(--color-primary);
    cursor: pointer;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: transparent;
    margin-top: .3rem;
    font-family: inherit;
  }
  .tags-show-more:hover { background: var(--color-safe-bg); }
}
@media (min-width: 641px) { .tags-show-more { display: none; } }

/* Status buttons: 3-column grid on mobile so they don't wrap raggedly */
@media (max-width: 480px) {
  .status-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .status-btn { text-align: center; }
}

/* Onboarding trigger list: more breathing room on mobile */
@media (max-width: 640px) {
  .ob-trigger-list { gap: .6rem; }
  .ob-trigger-row { padding: .75rem; }
}

/* ---- Utility ---- */
.hidden { display: none !important; }

/* ---- Theme picker ---- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .75rem;
}
.theme-option {
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: .75rem .5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.theme-option:hover { border-color: var(--color-primary); }
.theme-option--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-safe-bg);
}
.theme-preview {
  height: 38px;
  width: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(0,0,0,.12);
}
.theme-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.theme-name { font-size: .82rem; font-weight: 600; color: var(--color-text); }
.theme-desc { font-size: .72rem; color: var(--color-text-muted); line-height: 1.3; }

/* ---- Data & privacy section ---- */
.btn-danger-ghost {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-danger-ghost:hover { background: var(--color-danger-bg); }

.privacy-card { padding: 0; overflow: hidden; }

.privacy-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.privacy-action-title { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.privacy-action-desc  { font-size: .85rem; color: var(--color-text-muted); }

.privacy-divider { border: none; border-top: 1px solid var(--color-border); margin: 0; }

.privacy-confirm-form {
  padding: 1rem 1.25rem 1.25rem;
  background: var(--color-danger-bg);
  border-top: 1px solid var(--color-border);
}
.privacy-confirm-warning {
  font-size: .875rem;
  color: var(--color-danger);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.privacy-confirm-form .field { margin-bottom: 1rem; }
.privacy-confirm-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---- FDA recall banner ---- */
.recall-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  margin-bottom: .75rem;
}
.recall-banner-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
  min-width: 0;
}
.recall-banner-title {
  font-weight: 700;
  font-size: .88rem;
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.recall-classification {
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--color-danger);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.recall-firm {
  font-size: .82rem;
  color: var(--color-danger);
  font-style: italic;
}
.recall-reason {
  font-size: .82rem;
  color: var(--color-text);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---- Safe medication list page ---- */
.sml-page {
  max-width: 680px;
}
.sml-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.sml-action-row {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: .25rem;
}
.sml-doc-header {
  margin-bottom: .75rem;
}
.sml-doc-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
}
.sml-doc-meta {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}
.sml-rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}
.sml-section {
  margin-bottom: .25rem;
}
.sml-section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .6rem 0;
}
.sml-section-heading--warn { color: var(--color-warn); }
.sml-subsection-heading {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin: 0 0 .45rem 0;
}
.sml-section-note {
  font-size: .825rem;
  color: var(--color-text-muted);
  margin: 0 0 .75rem 0;
}
.sml-empty-note {
  font-size: .9rem;
  color: var(--color-text-muted);
}
.sml-disclaimer-inline {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin: .75rem 0 0 0;
  font-style: italic;
}
.sml-trigger-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sml-trigger-item {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  padding: .2rem .6rem;
  font-size: .85rem;
  font-weight: 500;
}
.sml-trigger-item--suspected {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border-color: var(--color-warn);
}
.sml-trigger-item--safe {
  background: var(--color-safe-bg);
  color: var(--color-safe);
  border-color: var(--color-safe);
}
.sml-trigger-item--ctx {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.sml-trigger-ctx-tag {
  font-size: .8em;
  font-weight: 400;
  opacity: .75;
  white-space: nowrap;
}
.sml-context-group-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 .35rem 0;
}
.sml-med-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sml-med-item {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .5rem .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .9rem;
}
.sml-med-name {
  font-weight: 600;
  color: var(--color-text);
}
.sml-med-generic {
  color: var(--color-text-muted);
  font-size: .85rem;
}
.sml-med-ndc {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-family: monospace;
  letter-spacing: .02em;
}
.sml-med-discontinued {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: .1rem .4rem;
}
.sml-disclaimer {
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media print {
  .no-print { display: none !important; }
  .site-nav, .site-footer { display: none !important; }
  body { background: white !important; color: black !important; }
  .page-container { padding: 0 !important; max-width: none !important; }
  .sml-page { max-width: none; }
  .sml-doc-title { font-size: 1.4rem; }
  .sml-trigger-item {
    background: transparent !important;
    color: black !important;
    border-color: #aaa !important;
  }
  .sml-med-item {
    background: transparent !important;
    border-color: #ccc !important;
  }
  .sml-med-name, .sml-med-generic, .sml-med-ndc { color: black !important; }
  .sml-med-discontinued { color: #555 !important; border-color: #aaa !important; }
  .sml-trigger-item--suspected { background: transparent !important; color: #555 !important; border-color: #aaa !important; }
  .sml-trigger-item--safe { background: transparent !important; color: #555 !important; border-color: #aaa !important; }
  .sml-trigger-ctx-tag { background: transparent !important; opacity: 1 !important; color: #555 !important; }
  .sml-context-group-label { color: #555 !important; }
  .sml-section-heading--warn { color: black !important; }
  .sml-subsection-heading { color: #555 !important; }
  .sml-disclaimer-inline { color: #777 !important; }
  .sml-rule { border-color: #ccc !important; }
  .sml-disclaimer { color: #555 !important; }
  a { color: black !important; text-decoration: none !important; }
}

/* ---- Ingredient index page ---- */
.ingredient-index-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ingredient-index-row {
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ingredient-index-main {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ingredient-index-name {
  font-weight: 600;
  font-size: .93rem;
}
.ingredient-index-meds {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.ingredient-med-chip {
  font-size: .78rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ── Plans page ──────────────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; }
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.plan-card--premium {
  border-color: var(--color-safe);
  box-shadow: 0 0 0 1px var(--color-safe);
}
.plan-card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.plan-current-tag {
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .15rem .45rem;
  letter-spacing: .03em;
}
.plan-card-price {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .35rem;
  line-height: 1;
}
.plan-card-tagline {
  font-size: .88rem;
  color: var(--color-text-muted);
  margin: 0 0 1.1rem;
}
.plan-features-label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin: 0 0 .6rem;
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.plan-feature {
  font-size: .88rem;
  padding-left: 1.35rem;
  position: relative;
  line-height: 1.45;
}
.plan-feature::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-safe);
  font-weight: 700;
  font-size: .85rem;
}
.plan-feature--premium::before {
  color: var(--color-safe);
}
.plans-special-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .plans-special-grid { grid-template-columns: 1fr; }
}
.plans-special-card {
  display: flex;
  flex-direction: column;
}

/* ── Data table ───────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.data-table th {
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.data-table td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg); }
.data-table tbody tr.row--used td { color: var(--color-text-muted); }
.code-cell { font-family: monospace; font-size: .95rem; letter-spacing: .03em; }
.muted-cell { color: var(--color-text-muted); font-size: .85rem; }
.status-badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
}
.status-badge--unused { background: var(--color-safe-bg); color: var(--color-safe); }
.status-badge--used   { background: var(--color-border);  color: var(--color-text-muted); }
.input-sm {
  width: auto;
  font-size: .88rem;
  padding: .3rem .6rem;
}
.alert-success {
  background: var(--color-safe-bg);
  color: var(--color-safe);
  border: 1px solid var(--color-safe);
  border-radius: var(--radius);
  padding: .6rem .9rem;
  font-size: .9rem;
}

/* ── Shareable safe list ─────────────────────────────────── */
.share-link-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.share-link-input {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: .85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .35rem .65rem;
  color: var(--color-text-muted);
}

/* ── Reaction Journal ─────────────────────────────────────── */
.journal-entry {
  margin-bottom: 1rem;
}
.journal-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.journal-entry-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.journal-date {
  font-weight: 600;
  font-size: .95rem;
}
.journal-entry-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
}
.journal-symptoms {
  font-size: .9rem;
  color: var(--color-text);
  margin: .25rem 0 .5rem;
  white-space: pre-wrap;
}
.journal-meds {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}

/* Severity badge */
.severity-badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
}
.severity-1 { background: var(--color-safe-bg);   color: var(--color-safe); }
.severity-2 { background: #e8f4e8;                color: #3a7c3a; }
.severity-3 { background: var(--color-warn-bg);   color: var(--color-warn); }
.severity-4 { background: #fde8e8;                color: #c0392b; }
.severity-5 { background: var(--color-danger-bg); color: var(--color-danger); }

/* Severity radio buttons */
.severity-radios {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.severity-radio {
  cursor: pointer;
}
.severity-radio input[type="radio"] {
  display: none;
}
.severity-radio-label {
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.severity-radio input[type="radio"]:checked + .severity-radio-label {
  border-color: transparent;
}
.severity-radio-label--1 { background: var(--color-safe-bg);   color: var(--color-safe); }
.severity-radio-label--2 { background: #e8f4e8;                color: #3a7c3a; }
.severity-radio-label--3 { background: var(--color-warn-bg);   color: var(--color-warn); }
.severity-radio-label--4 { background: #fde8e8;                color: #c0392b; }
.severity-radio-label--5 { background: var(--color-danger-bg); color: var(--color-danger); }
.severity-radio input[type="radio"]:not(:checked) + .severity-radio-label {
  background: transparent;
}
.severity-radio input[type="radio"]:checked + .severity-radio-label {
  opacity: 1;
}
.severity-legend {
  display: flex;
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: .3rem;
}

/* Journal form layout */
.journal-form-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: .75rem;
}
@media (max-width: 520px) {
  .journal-form-row { grid-template-columns: 1fr; }
}

/* Med checkboxes in journal form */
.med-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.med-checkbox {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .88rem;
  transition: border-color .15s, background .15s;
}
.med-checkbox:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Custom medication tag input */
.custom-med-input-area {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.custom-med-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-height: 0;
}
.custom-med-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--radius);
  font-size: .85rem;
}
.custom-med-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}
.custom-med-tag-remove:hover { color: var(--color-danger); }
.custom-med-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.custom-med-row input {
  flex: 1;
  min-width: 0;
}

/* Profiles page - profile rows with caregiver sections */
.profile-row-block {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.profile-row-block:last-child { border-bottom: none; }
.profile-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-row-name { font-weight: 500; }
.profile-row-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.caregiver-section { margin-top: .75rem; }
.caregiver-section-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-muted);
  font-size: .875rem;
  user-select: none;
}
.caregiver-section-toggle::-webkit-details-marker { display: none; }
.caregiver-section-toggle::before {
  content: '▶';
  font-size: .6rem;
  transition: transform .15s;
}
details[open] .caregiver-section-toggle::before { transform: rotate(90deg); }
.caregiver-count {
  background: var(--color-border);
  border-radius: 999px;
  padding: .05rem .45rem;
  font-size: .78rem;
  color: var(--color-text-muted);
}
.caregiver-section-body {
  margin-top: .75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
}
.caregiver-list-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  margin-bottom: .35rem;
}
.caregiver-list { display: flex; flex-direction: column; gap: .4rem; }
.caregiver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9rem;
}
.caregiver-invite-form { margin-top: .5rem; }

/* Correlation list */
.correlation-list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.correlation-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.correlation-count {
  font-size: .83rem;
  color: var(--color-text-muted);
}