/* PeptiLogger app styles — clinical dark UI system (aligned with Kinetics samples) */
/* v1.91-r14 (security P7): fonts self-hosted. Inter + JetBrains Mono were
 * loaded from fonts.googleapis.com / fonts.gstatic.com — two third-party
 * origins in the CSP trust set, every visitor's IP sent to Google on every
 * load, and an availability dependency. Files are the OFL-licensed woff2
 * builds from @fontsource 5.3.0 (latin subset; the same glyph data Google
 * serves), checksummed in assets/fonts/SHA256SUMS. Fallback stacks are
 * unchanged, so a missing file degrades to system fonts exactly as before. */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/source-sans-3-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/bitter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
body { font-family: 'Source Sans 3', system-ui, sans-serif; }
/* v3.0-r3: product name is set in Bitter 800 (brand rule: the name only). */
.pl-brand-name { font-family: 'Bitter', Georgia, serif; font-weight: 800; letter-spacing: 0; }
.mono { font-family: 'JetBrains Mono', monospace; }
.card-hover { transition: all 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.tab-btn { border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.tab-btn.active, .tab-btn.tab-active { border-bottom-color: #B5652D; color: #C4703A; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.vial-fill { transition: height 0.4s ease; }
.progress-bar { transition: width 0.5s ease; }
.tab-active { border-bottom: 3px solid #B5652D; color: #B5652D; }
.ai-bubble { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
input[type=number]::-webkit-inner-spin-button { opacity: 1; }

/* Panels are shown/hidden via Tailwind .hidden toggled in switchTab */
.tab-panel.hidden { display: none !important; }

/* ========== Shared clinical UI (Kinetics-aligned) ========== */
.pl-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #EAE8E3;
  letter-spacing: -0.01em;
}
.pl-page-sub {
  font-size: 0.875rem;
  color: #A39F97;
  margin-top: 0.125rem;
}
.pl-card {
  background: rgba(31,29,26, 0.72);
  border: 1px solid #2A2723;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.pl-card-hover {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pl-card-hover:hover {
  border-color: #3A3631;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
/* Kinetics card metrics — 3 compact cells side-by-side (mockup layout) */
.pl-metric-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #2A2723;
}
.pl-metric-cell {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0.55rem 0.35rem;
  border-radius: 0.65rem;
  background: rgba(31,29,26, 0.55);
  border: 1px solid #2A2723;
}
.pl-metric-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A39F97;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.pl-metric-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #EAE8E3;
  line-height: 1.25;
  word-break: break-word;
}
@media (max-width: 420px) {
  .pl-metric-row { flex-direction: column; }
}
.pl-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  background: #1F1D1A;
  border: 1px solid #2A2723;
  border-radius: 0.75rem;
  padding: 3px;
}
.pl-segment button {
  border: none;
  background: transparent;
  color: #A39F97;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pl-segment button:hover { color: #DCD9D3; }
.pl-segment button.pl-seg-active {
  background: #9C5526;
  color: #fff;
  box-shadow: 0 1px 2px rgba(156,85,38, 0.35);
}
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: 9999px;
  background: #2A2723;
  color: #BDB9B1;
  border: 1px solid #3A3631;
}
.pl-chip-ok {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
}
.pl-chip-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}
.pl-chip-info {
  background: rgba(181,101,45, 0.12);
  color: #C4703A;
  border-color: rgba(196,112,58, 0.35);
}
.pl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.pl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #BDB9B1;
  padding: 0.3rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid #3A3631;
  background: rgba(31,29,26, 0.5);
}
.pl-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pl-btn-ghost {
  background: #2A2723;
  color: #BDB9B1;
  border: 1px solid #3A3631;
}
.pl-btn-ghost:hover { background: #3A3631; color: #EAE8E3; }
.pl-btn-primary {
  background: #9C5526;
  color: #fff;
  border: 1px solid transparent;
}
.pl-btn-primary:hover { background: #B5652D; }
.pl-section-rule {
  border-top: 1px solid #2A2723;
  margin-top: 1.5rem;
  padding-top: 1rem;
}
/* Soften default card shells site-wide when using common Tailwind combo */
.bg-slate-900.border.border-slate-800.rounded-2xl,
.bg-slate-900\/60.border.border-slate-800.rounded-2xl {
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
/* ========== v1.06 nav restructure: 5 grouped destinations ========== */
.pl-nav-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 1px solid #2A2723;
  margin-bottom: 1.5rem;
  position: relative;
}
.pl-nav-btn {
  padding: 0.75rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #A39F97;
  white-space: nowrap;
  border-radius: 0.5rem 0.5rem 0 0;
  background: transparent;
}
.pl-nav-btn:hover { color: #fff; }
.pl-more-wrap { position: relative; }
.pl-more-caret { font-size: 0.65em; opacity: 0.7; }
.pl-more-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  min-width: 170px;
  background: #1F1D1A;
  border: 1px solid #2A2723;
  border-radius: 0.85rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 0.35rem;
}
.pl-more-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #BDB9B1;
  padding: 0.6rem 0.7rem;
  border-radius: 0.55rem;
  background: transparent;
}
.pl-more-item:hover { background: #2A2723; color: #fff; }
.pl-more-item.tab-active { background: rgba(156,85,38,0.25); color: #D68A57; }
.pl-more-divider { height: 1px; background: #2A2723; margin: 0.3rem 0.2rem; }

/* Insights sub-nav (Dashboard | Kinetics | Stack analysis | Clinician report) */
.pl-insights-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.75rem 0 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #2A2723;
}
.pl-insights-subnav.hidden { display: none; }
.pl-subtab-btn {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #A39F97;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid #2A2723;
  background: rgba(31,29,26,0.6);
}
.pl-subtab-btn:hover { color: #DCD9D3; border-color: #3A3631; }
.pl-subtab-btn.tab-active {
  background: rgba(156,85,38,0.22);
  border-color: rgba(196,112,58,0.5);
  color: #D68A57;
}

#appNavTabs { gap: 0.15rem; border-bottom-color: #2A2723; }

/* ========== Mobile bottom tab bar + floating quick-log (v1.06) ========== */
.pl-bottom-nav {
  display: none;
  position: fixed;
  /* v1.91-r4: floating dock — detached from the edges, rounded, above the
     safe area by its own margin rather than padding stuffed inside the bar. */
  left: 0.7rem; right: 0.7rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  /* v1.91-r2: below BOTH modal layers (z-40 base, z-50 stacked). At the
     original 45 the bar painted over every z-40 modal — occluding e.g. the
     peptideModal Save button with no way to scroll past it. Page content is
     z-auto, so 30 still clears everything in-flow. */
  z-index: 30;
  align-items: center;
  background: rgba(31,29,26, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #3A3631;
  border-radius: 1.4rem;
  padding: 0.4rem 0.5rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.pl-bnav-btn, .pl-bnav-fab-slot {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.1rem;
  color: #A39F97;
  border-radius: 0.65rem;
  min-width: 0;
  /* Apple HIG minimum tappable target is 44pt. The previous layout computed to
     ~43.6px, i.e. marginally under, which is a plausible contributor to the
     bottom bar feeling unreliable to hit. */
  min-height: 50px;
  -webkit-tap-highlight-color: transparent;
}
.pl-bnav-btn:active { background: rgba(42,39,35,0.6); }
/* v1.91-r4: active tab = tint + soft pill (buttons already carry a radius) */
.pl-bnav-btn.tab-active { color: #C4703A; background: rgba(196,112,58,0.12); border-radius: 1rem; }
.pl-bnav-icon { font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pl-bnav-icon svg { width: 22px; height: 22px; } /* v1.91-r4: inline stroke SVGs replaced the emoji */
.pl-bnav-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.01em; }
.pl-bnav-btn.tab-active .pl-bnav-label { font-weight: 700; }

/* The FAB is centered within its OWN flex slot, so it always lines up with the
   gap in the bar regardless of item count, horizontal padding, or safe-area
   inset. The old approach pinned it to left:50% of the whole bar while the gap
   sat at ~41.7% (3rd of 6 slots) — a fixed ~29px rightward offset on a 390px
   screen. Anchoring both to the same element removes the arithmetic entirely. */
/* v1.91-r4: the FAB docks IN-FLOW inside its slot — no overhang above the bar,
   so nothing collides with content and the dock reads as one object. The slot
   keeps the even-slot centring property described in the r-era comment above;
   it just no longer needs absolute positioning to do it. */
.pl-bnav-fab-slot { position: relative; pointer-events: none; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 0.3rem; }
.pl-bnav-fab {
  position: static;
  transform: none;
  pointer-events: auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 9999px;
  background: #9C5526;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(156,85,38,0.4);
}
.pl-bnav-fab-plus svg { width: 22px; height: 22px; display: block; }
.pl-bnav-fab:active { background: #7F4520; transform: scale(0.94); } /* v1.91-r4: FAB is in-flow, no translate to preserve */
.pl-bnav-fab-plus { display: flex; align-items: center; justify-content: center; } /* v1.91-r4: wraps the plus SVG */

/* Mobile "More" sheet — separate from the desktop dropdown; see index.html comment.
 * Hidden entirely on desktop; on mobile, shown only when its own .hidden class is off. */
.pl-more-sheet {
  display: none;
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  /* Sits clear of the (now taller) bar plus the home indicator. Kept in sync
     with the body padding-bottom in the mobile breakpoint below. */
  bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px)); /* v1.91-r4: clears the floating dock (~4.4rem incl. its own bottom margin) plus a gap */
  z-index: 31; /* v1.91-r2: just above the bar (30), below all modals — a modal opened from More covers the sheet */
  background: #1F1D1A;
  border: 1px solid #2A2723;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 0.4rem;
  max-height: 60vh;
  overflow-y: auto;
}
.pl-more-sheet-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #BDB9B1;
  padding: 0.95rem 0.9rem;
  border-radius: 0.65rem;
  background: transparent;
  min-height: 50px; /* comfortably above the 44pt HIG minimum */
  -webkit-tap-highlight-color: transparent;
}
.pl-more-sheet-item:active { background: #2A2723; }
.pl-more-sheet-item.tab-active { background: rgba(156,85,38,0.25); color: #D68A57; }
.pl-more-sheet-divider { height: 1px; background: #2A2723; margin: 0.4rem 0.2rem; }
@media (max-width: 767px) {
  .pl-more-sheet:not(.hidden) { display: block; }
}

/* ========== Staleness banner (v1.11) ========== */
.pl-stale-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: rgba(156,85,38,0.15);
  border: 1px solid rgba(196,112,58,0.35);
  border-radius: 0.85rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
}
.pl-stale-banner.hidden { display: none; }
.pl-health-banner {
  background: rgba(16,185,129,0.12);
  border-color: rgba(52,211,153,0.35);
}
.pl-health-banner .pl-stale-text { color: #a7f3d0; }
.pl-health-banner .pl-stale-btn { background: #10b981; color: #052e1f; }
.pl-health-banner .pl-stale-btn:hover { background: #34d399; }
.pl-health-banner .pl-stale-dismiss { color: #6ee7b7; }
.pl-health-banner .pl-stale-dismiss:hover { background: rgba(16,185,129,0.15); }
.pl-stale-text { font-size: 0.8125rem; color: #E8B58F; flex: 1 1 auto; }
.pl-stale-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1F1D1A;
  background: #C4703A;
  padding: 0.4rem 0.8rem;
  border-radius: 0.55rem;
  white-space: nowrap;
}
.pl-stale-btn:hover { background: #D68A57; }
.pl-stale-dismiss {
  font-size: 0.75rem;
  color: #D68A57;
  padding: 0.3rem 0.4rem;
  border-radius: 0.4rem;
}
.pl-stale-dismiss:hover { background: rgba(196,112,58,0.15); }

/* ========== Today: missed prepared doses alert (v1.1) ========== */
.pl-missed-wrap {
  border-radius: 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(69,26,3,0.25);
  border: 1px solid rgba(245,158,11,0.4);
}
.pl-missed-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pl-missed-count {
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(245,158,11,0.3);
  color: #fde68a;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
}
.pl-missed-sub { font-size: 0.75rem; color: #A39F97; margin: 0.25rem 0 0.75rem; }
.pl-missed-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(31,29,26,0.6);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  margin-top: 0.6rem;
}
.pl-missed-name { font-size: 0.9375rem; font-weight: 600; color: #EAE8E3; }
.pl-missed-time { font-size: 0.75rem; color: #fbbf24; margin-left: 0.35rem; }
.pl-missed-meta { font-size: 0.75rem; color: #A39F97; margin-top: 0.2rem; }
.pl-missed-actions { display: flex; gap: 0.5rem; flex-shrink: 0; width: 100%; }
@media (min-width: 480px) {
  .pl-missed-actions { width: auto; }
}
.pl-missed-btn { flex: 1; font-size: 0.8125rem; font-weight: 600; padding: 0.55rem 1rem; border-radius: 0.7rem; white-space: nowrap; }
.pl-missed-btn-take { background: rgba(16,185,129,0.25); color: #6ee7b7; border: 1px solid rgba(52,211,153,0.4); }
.pl-missed-btn-take:hover { background: rgba(16,185,129,0.4); }
.pl-missed-btn-dispose { background: #2A2723; color: #A39F97; border: 1px solid #3A3631; }
.pl-missed-btn-dispose:hover { background: #3A3631; color: #DCD9D3; }

/* ========== Today: shared-household collaborator strip (v1.1) ========== */
.pl-collab-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}
.pl-collab-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  background: #2A2723;
  border: 1px solid #3A3631;
  border-radius: 9999px;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
}
.pl-collab-chip:hover { border-color: #4E4943; }
.pl-collab-chip-active {
  border-color: #C4703A;
  border-width: 2px;
  padding: calc(0.3rem - 1px) calc(0.7rem - 1px) calc(0.3rem - 1px) calc(0.3rem - 1px);
  background: rgba(156,85,38,0.3);
  box-shadow: 0 0 0 3px rgba(196,112,58,0.18), 0 2px 8px rgba(156,85,38,0.35);
}
.pl-collab-chip-active .pl-collab-avatar {
  box-shadow: 0 0 0 2px #C4703A;
}
.pl-collab-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #9C5526;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pl-collab-name { font-size: 0.75rem; color: #DCD9D3; white-space: nowrap; }
.pl-collab-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: #34d399; flex-shrink: 0; }

/* ========== Today: hero "next dose" card (v1.06) ========== */
.pl-hero-card {
  border-radius: 1.25rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, rgba(156,85,38,0.22), rgba(31,29,26,0.9));
  border: 1px solid rgba(196,112,58,0.35);
  box-shadow: 0 10px 30px rgba(156,85,38,0.12);
}
.pl-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.pl-hero-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #D68A57; }
.pl-hero-state { font-size: 0.6875rem; font-weight: 600; color: #E8B58F; background: rgba(156,85,38,0.3); padding: 0.2rem 0.55rem; border-radius: 9999px; }
.pl-hero-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pl-hero-name { font-size: 1.25rem; font-weight: 700; color: #F2F1ED; }
.pl-hero-time { font-size: 0.8rem; font-weight: 500; color: #D68A57; margin-left: 0.4rem; }
/* The dose is a VALUE, not a status. Amber means "due / borderline"
   everywhere else in the app, and green means "in range / taken" — a dose
   figure is neither. Emphasis now comes from size and weight, which frees
   both semantic colours to mean only what they mean. */
.pl-hero-dose { font-size: 1.0625rem; color: #EAE8E3; font-weight: 700; margin-top: 0.15rem; }
.pl-hero-units { font-size: 0.8125rem; color: #D68A57; margin-top: 0.15rem; font-weight: 600;   line-height: 1.45;
}
.pl-hero-meta { font-size: 0.75rem; color: #A39F97; margin-top: 0.35rem; }
.pl-hero-cta {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: #9C5526;
  padding: 0.85rem 1.6rem;
  border-radius: 0.9rem;
  box-shadow: 0 6px 18px rgba(156,85,38,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.pl-hero-cta:hover { background: #B5652D; }
.pl-hero-done { background: rgba(16,185,129,0.1); border-color: rgba(52,211,153,0.3); box-shadow: none; }
.pl-hero-done-msg { font-size: 0.9375rem; color: #6ee7b7; font-weight: 500; }

/* ========== Today: inventory pressure banner strip (v1.06) ========== */
.pl-banner-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid #2A2723;
  background: rgba(31,29,26,0.6);
  font-size: 0.8125rem;
}
.pl-banner-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; background: #77726A; }
.pl-banner-text { color: #BDB9B1; flex: 1 1 auto; min-width: 0; }
.pl-banner-chevron { color: #A39F97; font-size: 0.75rem; flex-shrink: 0; }
.pl-banner-ok .pl-banner-dot { background: #34d399; }
.pl-banner-ok .pl-banner-text { color: #A39F97; }
.pl-banner-watch { border-color: #3A3631; }
.pl-banner-warn { border-color: rgba(245,158,11,0.4); background: rgba(69,26,3,0.3); }
.pl-banner-warn .pl-banner-dot { background: #fbbf24; }
.pl-banner-danger { border-color: rgba(239,68,68,0.45); background: rgba(69,10,10,0.35); }
.pl-banner-danger .pl-banner-dot { background: #f87171; }

/* ========== Injection site body map (v1.2) ========== */
.pl-body-wrap {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  background: rgba(31,29,26,0.5);
  border: 1px solid #2A2723;
  border-radius: 0.85rem;
  padding: 0.6rem 0.4rem 0.4rem;
}
.pl-body-col { flex: 1 1 0; min-width: 0; text-align: center; }
.pl-body-cap {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A39F97;
  margin-bottom: 0.15rem;
}
.pl-body-svg { width: 100%; height: auto; max-height: 230px; display: block; margin: 0 auto; }
/* Generous hit area: the visible dot is small, but taps land reliably. */
.pl-site-hit { cursor: pointer; }
.pl-site-static { cursor: default; }
.pl-site-hit circle { transition: opacity 0.12s ease; }
.pl-site-hit:hover circle { opacity: 0.82; }
.pl-body-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  color: #A39F97;
}
.pl-body-legend span { display: flex; align-items: center; gap: 0.25rem; }
.pl-body-legend i { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.pl-body-note {
  font-size: 0.625rem;
  color: #A39F97;
  text-align: center;
  margin-top: 0.3rem;
  line-height: 1.35;
}

/* ========== Inventory: filter chips (v1.06) ========== */
.pl-filter-chips {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}
.pl-filter-chip {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #A39F97;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #2A2723;
  background: rgba(31,29,26,0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.pl-filter-chip:hover { color: #DCD9D3; border-color: #3A3631; }
.pl-filter-chip-active {
  background: rgba(156,85,38,0.25);
  border-color: rgba(196,112,58,0.5);
  color: #D68A57;
}
.pl-filter-chips.hidden { display: none; }

/* The health-tab picker sits INLINE in the header row next to "+ Add check-in"
 * (v1.8-r6), not stacked above the content like every other use of
 * .pl-filter-chips. That shared rule carries margin-bottom:1.1rem for the
 * stacked case; inside a `flex items-center` row the margin is part of the box
 * being centred, so the chips ride up ~0.65rem and the button reads as
 * misaligned. Scoped to the container so no other chip row is affected. */
#healthTabResearcherPicker .pl-filter-chips {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Vial card: remaining % + doses-left line under the progress bar */
.pl-vial-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: #A39F97;
  margin-top: 0.3rem;
}

/* Peptide-detail vial lot rows: on narrow screens the action-button group wraps
 * onto its own line below the vial info (outer row already has flex-wrap) — but
 * without a width constraint that line has no boundary to wrap ITS OWN buttons
 * against, so they overflow past the card edge instead of stacking. Force it to
 * the card's full width below the breakpoint so its own flex-wrap can work. */
@media (max-width: 767px) {
  .pl-lot-actions { width: 100%; }
}

@media (max-width: 767px) {
  .pl-filter-chips { flex-wrap: nowrap; }
}

/* ========== Insights / Dashboard: stat row + responsive table↔cards (v1.06) ========== */
.pl-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.5rem;
}
@media (min-width: 640px) {
  .pl-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pl-stat-card {
  background: rgba(31,29,26,0.72);
  border: 1px solid #2A2723;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}
.pl-stat-card-warn { border-color: rgba(245,158,11,0.4); background: rgba(69,26,3,0.2); }
.pl-stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #A39F97; }
.pl-stat-value { font-size: 1.375rem; font-weight: 700; color: #EAE8E3; margin-top: 0.2rem; }
.pl-stat-card-warn .pl-stat-value { color: #fbbf24; }

/* Desktop-only / mobile-only helpers (raw CSS — compiled Tailwind is purged, so we
 * don't rely on md:/lg: utilities that may not be present in the built bundle) */
.pl-desktop-only { display: block; }
.pl-mobile-only { display: none; }
@media (max-width: 767px) {
  .pl-desktop-only { display: none; }
  .pl-mobile-only { display: block; }
}

/* Breakpoint: below 768px, swap top nav chrome for the bottom tab bar */
@media (max-width: 767px) {
  #appNavTabs { display: none; }
  .pl-insights-subnav { -webkit-overflow-scrolling: touch; overflow-x: auto; flex-wrap: nowrap; }
  .pl-bottom-nav { display: flex; }
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } /* v1.91-r4: dock height + its 0.75rem float margin + breathing room */
}


/* ========== Clinician report (screen + print / PDF) ========== */
#clinicianReport {
  background: #EAE8E3;
  padding: 1.25rem;
}
.clinician-report-inner {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  color: #1F1D1A;
  background: #ffffff;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 2.25rem 1.75rem;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(31,29,26, 0.12);
  border: 1px solid #DCD9D3;
}
.cr-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 2px solid #403A33;
  margin-bottom: 1rem;
}
.cr-brand { display: flex; gap: 0.75rem; align-items: flex-start; }
.cr-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #DCD9D3;
  box-shadow: 0 2px 8px rgba(31,29,26, 0.08);
  flex-shrink: 0;
}
.cr-logo-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #B5652D 0%, #403A33 100%);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(181,101,45, 0.35);
}
.cr-brand-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9C5526;
  margin-bottom: 0.15rem;
}
.cr-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #403A33;
  margin: 0 0 0.2rem;
  line-height: 1.25;
}
.cr-subtitle {
  font-size: 0.85rem;
  color: #77726A;
  margin: 0;
}
.cr-meta {
  font-size: 0.75rem;
  color: #4E4943;
  text-align: right;
  line-height: 1.55;
}
.cr-meta span {
  display: inline-block;
  min-width: 5.5rem;
  color: #A39F97;
  font-weight: 500;
  text-align: left;
}
.cr-disclaimer {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin: 0 0 1.25rem;
}
.cr-section { margin-bottom: 1.35rem; page-break-inside: avoid; }
.cr-section h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #403A33;
  margin: 0 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid #B5652D;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #403A33;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cr-dim { color: #6b7280; font-size: 0.85em; }
.cr-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #2A2723;
  margin: 0 0 0.5rem;
}
.cr-summary-line {
  font-size: 0.8rem;
  color: #77726A;
  margin: 0 0 0.75rem;
}
.cr-phys-note {
  background: #F2F1ED;
  border: 1px solid #BDB9B1;
  border-left: 4px solid #B5652D;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.5rem;
}
.cr-phys-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9C5526;
  margin-bottom: 0.25rem;
}
.cr-phys-note p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #2A2723;
}
.cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 0.25rem 0 0.5rem;
}
.cr-table th {
  background: #403A33;
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 1px solid #403A33;
}
.cr-table td {
  padding: 0.45rem 0.6rem;
  border: 1px solid #BDB9B1;
  color: #2A2723;
  background: #fff;
  vertical-align: top;
}
.cr-table tbody tr:nth-child(even) td { background: #F2F1ED; }
.cr-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.75rem; }
.cr-muted { color: #77726A; font-size: 0.8rem; }
.cr-intent-intro { margin: 0 0 0.75rem; }
.cr-intent-grid { display: flex; flex-direction: column; gap: 0.65rem; }
.cr-intent-card {
  border: 1px solid #DCD9D3;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  background: #F2F1ED;
  page-break-inside: avoid;
}
.cr-intent-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #403A33;
}
.cr-intent-stats {
  font-size: 0.72rem;
  color: #77726A;
  margin: 0.2rem 0 0.45rem;
}
.cr-intent-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #3A3631;
}
.cr-intent-list li { margin-bottom: 0.2rem; }
.cr-footer {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #DCD9D3;
  font-size: 0.7rem;
  color: #A39F97;
  text-align: center;
}

@media print {
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #clinicianReport, #clinicianReport * { visibility: visible !important; }
  #clinicianReport {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .clinician-report-inner {
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    padding: 0.5in !important;
  }
  .cr-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cr-num, .cr-logo-mark, .cr-disclaimer, .cr-intent-card, .cr-table tbody tr:nth-child(even) td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* v1.05 — literature research summary */
.pl-research-card {
  border: 1px solid rgba(119,114,106, 0.35);
  background: rgba(31,29,26, 0.55);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}
.pl-research-link {
  font-size: 0.7rem;
  color: #D68A57;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pl-research-link:hover {
  color: #E8B58F;
}
.pl-chip-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.pl-chip-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

/* Insights body map: larger than the in-modal version, which is constrained */
#ouchieBody .pl-body-wrap { padding: 1rem 0.75rem 0.75rem; }
#ouchieBody .pl-body-svg { max-height: 340px; }

/* Idle-timeout warning banner */
.pl-idle-banner { background: rgba(180,83,9,0.18); border-color: rgba(251,191,36,0.35); }
.pl-idle-banner .pl-stale-text { color: #fde68a; }
.pl-idle-banner .pl-stale-btn { background: #f59e0b; color: #422006; }
.pl-idle-banner .pl-stale-btn:hover { background: #fbbf24; }

/* ===== Clinician report: laboratory section ===== */
.cr-lab-charts { margin-top: 0.9rem; }
.cr-lab-chart { margin-bottom: 0.9rem; page-break-inside: avoid; break-inside: avoid; }
.cr-lab-chart h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.cr-lab-chart svg { width: 100%; max-width: 620px; height: auto; }

@media print {
  /* Charts are the point of this section for a clinician, so force the browser
     to print the SVG fills/strokes rather than dropping them as "backgrounds". */
  .cr-lab-chart, .cr-lab-charts {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cr-lab-chart { page-break-inside: avoid; break-inside: avoid; }
}

.cr-rel { font-size: 0.75rem; line-height: 1.3; }
.cr-rel-note { font-size: 0.75rem; color: #4E4943; margin: 0 0 0.2rem; }

/* ===== Clinician report: lab row status ===== */
/* Colour is a SECOND signal only — the Flag column always states the status in
   words, so the table still reads correctly in greyscale or photocopied. */
.cr-table tr.cr-row-in  td { background: #FBF1E8; }            /* clinical blue */
.cr-table tr.cr-row-out td { background: #fef2f2; }            /* out of range */
.cr-table tr.cr-row-in  td:first-child { box-shadow: inset 3px 0 0 #B5652D; }
.cr-table tr.cr-row-out td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.cr-table tr.cr-row-out td.cr-flag { color: #b91c1c; font-weight: 600; }
.cr-table tr.cr-row-in  td.cr-flag { color: #9C5526; }
.cr-table tr.cr-row-none td { background: #F2F1ED; }
.cr-table tr.cr-row-none td.cr-flag { color: #77726A; }

.cr-lab-summary { margin: 0 0 0.5rem; font-size: 0.8125rem; }
.cr-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  border: 1px solid transparent;
}
.cr-chip-out  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cr-chip-in   { background: #FBF1E8; color: #9C5526; border-color: #E8B58F; }
.cr-chip-none { background: #F2F1ED; color: #4E4943; border-color: #DCD9D3; }

@media print {
  /* Browsers drop table cell backgrounds as "decoration" unless told otherwise,
     which would erase the entire in/out distinction on paper. */
  .cr-table tr.cr-row-in td,
  .cr-table tr.cr-row-out td,
  .cr-table tr.cr-row-none td,
  .cr-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cr-table tr { page-break-inside: avoid; break-inside: avoid; }
}

/* Hero card actions: primary CTA plus a quieter Skip, matching the list cards.
   Skip is deliberately understated — it should be reachable without competing
   with Prepare/Take for attention. */
.pl-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pl-hero-skip {
  font-size: 0.75rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem;
  background: rgba(42,39,35, 0.8);
  color: #A39F97;
  white-space: nowrap;
  min-height: 44px;
}
.pl-hero-skip:hover { background: #2A2723; color: #BDB9B1; }
@media (max-width: 640px) {
  .pl-hero-actions { width: 100%; }
  .pl-hero-actions .pl-hero-cta { flex: 1 1 auto; }
}

/* ==========================================================================
   Tailwind utilities missing from the pruned css/tailwind.css build.
   tailwind.css is a generated, content-pruned artifact: it only contains
   classes that existed in the markup when it was last compiled. Classes
   introduced after that build (notably the v1.4 BAC card rewrite) are simply
   absent, so the browser drops them silently. Until tailwind.css is
   regenerated these are hand-authored here. app.css loads after tailwind.css,
   so nothing below shadows a real Tailwind rule — every selector here is
   one that tailwind.css does not define at all.
   ========================================================================== */

/* layout / alignment */
.items-baseline { align-items: baseline; }
.h-auto { height: auto; }
.list-none { list-style-type: none; }
.select-none { -webkit-user-select: none; user-select: none; }
.cursor-not-allowed { cursor: not-allowed; }
.max-h-48 { max-height: 12rem; }
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* spacing */
.my-2 { margin-top: .5rem; margin-bottom: .5rem; }
.mt-1\.5 { margin-top: .375rem; }
.ml-1\.5 { margin-left: .375rem; }
.ml-6 { margin-left: 1.5rem; }
.mr-2 { margin-right: .5rem; }
.pt-1 { padding-top: .25rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.gap-x-3 { -moz-column-gap: .75rem; column-gap: .75rem; }
.gap-y-1 { row-gap: .25rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.125rem * (1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.125rem * var(--tw-space-y-reverse));
}

/* typography */
.text-base { font-size: 1rem; line-height: 1.5rem; }

/* colours — accent = emerald ramp, matching the compiled accent-400/500/600 */
.text-accent-200 { color: #a7f3d0; }
.text-accent-300 { color: #6ee7b7; }
.text-accent-300\/90 { color: rgba(110, 231, 183, .9); }
.text-emerald-400 { color: #34d399; }
.text-sky-300 { color: #D68A57; }
.text-sky-400 { color: #C4703A; }
.text-amber-200\/90 { color: rgba(253, 230, 138, .9); }
.text-amber-300\/80 { color: rgba(252, 211, 77, .8); }
.text-slate-700 { color: #3A3631; }
.bg-sky-600 { background-color: #9C5526; }
.bg-sky-500\/20 { background-color: rgba(181,101,45, .2); }
.bg-slate-700\/70 { background-color: rgba(58,54,49, .7); }
.border-sky-500\/30 { border-color: rgba(181,101,45, .3); }
.border-slate-700\/80 { border-color: rgba(58,54,49, .8); }
.border-slate-800\/60 { border-color: rgba(42,39,35, .6); }
.hover\:bg-sky-500:hover { background-color: #B5652D; }

/* responsive variants */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:max-w-xs { max-width: 20rem; }
  .sm\:w-auto { width: auto; }
}
@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
}

/* Inventory cards are <button> elements, and the inventory grid stretches every
   card to the height of the tallest one in its row. A button whose box is
   taller than its content vertically CENTRES that content — so a card with
   fewer rows (the BAC card) floats its content to the middle, which reads as
   excess space above the title.

   Verified in Chromium: with the default button layout the BAC card sits 23.6px
   below its own top edge while a full-height peptide card sits at 17px — 6.6px
   of phantom "header space", mirrored by the same gap underneath.

   NOTE: display:block does NOT defeat this; the centring survives it. Making
   the button an explicit column flex container with justify-content:flex-start
   is what actually top-aligns the content while keeping cards equal height.
   (align-self:start also top-aligns but lets cards size naturally, giving a
   ragged row, so it is not used here.)

   Side effect: flex layout suppresses margin collapsing between the card's
   child blocks, adding ~4px to card height uniformly. That is intentional and
   applies to every card equally. */
#inventoryGrid > button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Clinician-report lab grouping (v1.4). Marker rows are grouped by Quest
   panel / functional area; these style the spanning subheader row and the
   chart-section headings. Deliberately greyscale-safe and print-exact: the
   report gets photocopied, so the group boundary must survive losing colour. */
.cr-table tr.cr-group-row td {
  background: #DCD9D3;
  border-top: 2px solid #A39F97;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  box-shadow: none;
}
.cr-table tr.cr-group-row td strong { color: #1F1D1A; }
.cr-chart-group {
  margin: 1.1rem 0 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #BDB9B1;
  font-size: 0.9rem;
  color: #1F1D1A;
}
@media print {
  .cr-table tr.cr-group-row td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cr-table tr.cr-group-row { break-inside: avoid; break-after: avoid; }
  .cr-chart-group { break-after: avoid; }
}

/* Clinician-report "Change" column: delta vs the prior result for that marker.
   Kept narrow so adding a seventh column does not squeeze the marker names, and
   the "vs <date>" line is set small since it is reference detail rather than the
   value itself. */
.cr-table td.cr-change { white-space: nowrap; }
.cr-table .cr-change-prev { font-size: 0.7rem; }

/* Utilities introduced by the CSV import preview (v1.4). Same situation as the
   block above: css/tailwind.css is a pruned build and does not contain these. */
.max-w-5xl { max-width: 64rem; }
.max-h-\[55vh\] { max-height: 55vh; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.leading-none { line-height: 1; }
.accent-emerald-500 { accent-color: #10b981; }
.hover\:text-slate-200:hover { color: #DCD9D3; }
@media (min-width: 640px) {
  .sm\:p-6 { padding: 1.5rem; }
}

/* Clinician-report protocol table: start/end/cycle columns (v1.4).
   A protocol row whose window has closed or not yet opened is greyed rather
   than hidden — the fact that a compound was stopped last week, or starts next
   week, is clinically relevant context. Kept legible in greyscale print, where
   a colour cue alone would vanish. */
.cr-table tr.cr-row-inactive td { color: #77726A; }
.cr-table tr.cr-row-inactive td strong { color: #4E4943; font-weight: 600; }
.cr-table .cr-phase { font-size: 0.7rem; display: inline-block; }
@media print {
  .cr-table tr.cr-row-inactive td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Peptide enrichment panel (v1.4): cautions bullet marker. */
.text-amber-400\/70 { color: rgba(251, 191, 36, .7); }

/* PK route-basis mismatch warning (v1.4). */
.text-amber-300\/90 { color: rgba(252, 211, 77, .9); }

/* Orders tab (v1.5): grid/layout utilities absent from the pruned tailwind.css
   build. Added here per the check-classes.js convention rather than left
   undefined, since the stale tailwind.css cannot be regenerated offline. */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.max-w-2xl { max-width: 42rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Orders import (v1.5): disabled-state cursor for the Import button. The
   opacity variant already exists in the pruned tailwind build; this one does
   not, and check-classes.js correctly flagged it. */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Peptide KB editor (v1.6-r2): utilities absent from the pruned tailwind.css
   build. Added here per the check-classes.js convention rather than left
   undefined — the stale tailwind.css still cannot be regenerated offline.
   amber = manual-pricing warning, accent = user-added badge. */
.w-1\/2 { width: 50%; }
.bg-amber-900\/20 { background-color: rgba(120, 53, 15, .2); }
.border-amber-700\/50 { border-color: rgba(180, 83, 9, .5); }
.border-amber-700\/60 { border-color: rgba(180, 83, 9, .6); }
.border-accent-600\/60 { border-color: rgba(5, 150, 105, .6); }

/* Chart point tooltips (v1.6-r21).
   HTML overlay rather than SVG text: constant size at every chart scale, and
   styled with the same tokens as cards and chips elsewhere in the app. */
.pl-chart-pt { cursor: pointer; }
.pl-chart-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: #1F1D1A;
  border: 1px solid #3A3631;
  border-radius: 0.75rem;
  padding: 0.5rem 0.7rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: system-ui, -apple-system, sans-serif;
  white-space: nowrap;
}
.pl-chart-tip-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.pl-chart-tip-meta {
  font-size: 0.75rem;
  color: #A39F97;
  line-height: 1.35;
  margin-top: 0.1rem;
}

/* v1.6-r24: primary at 80% — the accent-600/80 equivalent existed in the
   pruned tailwind build but the primary one does not. */
.bg-primary-600\/80 { background-color: rgba(156,85,38, .8); }

/* MFA modal (v1.6-r31): utilities absent from the pruned tailwind build.
   bg-white is the QR quiet zone — scanners need light around the code. */
.bg-white { background-color: #ffffff; }
.break-all { word-break: break-all; }
.tracking-widest { letter-spacing: 0.1em; }
.pl-mfa-qr svg, .pl-mfa-qr img { width: 11rem; height: 11rem; image-rendering: pixelated; }
.gap-2\.5 { gap: 0.625rem; }

/* ===== Clinician report: per-marker result history (v1.8-r34) ===== */
/* The summary table says where a marker is now; this says how it got there.
   Printed output, so every state is carried by text as well as colour. */
.cr-lab-history { margin-top: 1.25rem; }
.cr-lab-history h2 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  color: #1F1D1A;
}
/* A marker absent from the newest panel: shown, but never dressed up as
   current. */
.cr-row-stale { opacity: 0.88; }
.cr-stale-note { font-size: 0.68rem; font-style: italic; }

/* v1.8-r35: peptide sub-rows in the 12-month use table. The peptide name is a
   spanning group header (cr-group-row, already styled); each protocol phase is
   indented beneath it. */
.cr-table td.cr-subrow { padding-left: 1.1rem; }
.cr-lab-chart { break-inside: avoid; page-break-inside: avoid; }

/* v1.8-r37: researcher-reported monthly outcomes in the clinician report. */
.cr-checkin { margin: 0 0 0.8rem; break-inside: avoid; page-break-inside: avoid; }
.cr-checkin h3 { font-size: 0.85rem; margin: 0 0 0.25rem; color: #1F1D1A; }
.cr-checkin-note { font-size: 0.75rem; margin: 0.3rem 0 0; color: #3A3631; }

/* v1.8-r43: dosing corrections. cr-flag-out marks the amount actually given
   against what the protocol called for. */
.cr-flag-out { color: #b45309; font-weight: 600; }

/* Dose shortfall warning (v1.8-r54).
 *
 * .pl-hero-units sets color:#D68A57, and app.css loads AFTER tailwind.css — so
 * a Tailwind text-amber-* utility on the same element loses at equal
 * specificity and the warning rendered in the ordinary blue. A safety message
 * that does not look like a warning is not a warning.
 *
 * Two classes, so it beats the base rule without !important. */
.pl-hero-units.pl-dose-short {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 0.5rem;
  padding: 0.35rem 0.55rem;
  margin-top: 0.35rem;
}
.pl-dose-short-inline { color: #fcd34d; font-weight: 600; }

/* v1.8-r61: printing-report is set on <body> for the duration of a report
   print. The existing @media print rules already hide app chrome, so this is
   only a hook for anything that needs to know a print is in progress. */
body.printing-report { }

/* v1.9-r20: split Today hero — prepare and take columns */
.pl-hero-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .pl-hero-grid { grid-template-columns: 1fr 1fr; } }
.pl-hero-col { background: rgba(31,29,26, 0.55); border: 1px solid rgba(58,54,49, 0.6); border-radius: 0.75rem; padding: 0.9rem 1rem; }
.pl-hero-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pl-hero-col-title { font-weight: 600; font-size: 0.95rem; color: #DCD9D3; }
.pl-hero-col-count { margin-left: auto; font-size: 0.72rem; padding: 2px 10px; border-radius: 9999px; }
.pl-hero-count-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.pl-hero-count-ok { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.pl-hero-item { padding: 9px 0; border-bottom: 1px solid rgba(58,54,49, 0.5); }
.pl-hero-item:last-child { border-bottom: none; }
.pl-hero-item-row { display: flex; align-items: center; gap: 10px; }
.pl-hero-item-main { min-width: 0; flex: 1; }
.pl-hero-item-units { font-size: 0.75rem; color: #A39F97; margin-top: 4px; }
.pl-hero-col-empty { font-size: 0.8rem; color: #77726A; padding: 8px 0; }

/* v1.9-r23: the hero CTA was sized for the old single flip card; inside the
   split columns' rows it read as chunky. Scoped down to fit the row type. */
.pl-hero-item .pl-hero-cta { font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.9rem; border-radius: 0.6rem; box-shadow: none; }
.pl-hero-item .pl-hero-skip { font-size: 0.8rem; padding: 0.45rem 0.7rem; min-height: 0; }
.pl-hero-dispose { font-size: 0.8rem; padding: 0.45rem 0.9rem; border-radius: 0.6rem; }

/* v1.9-r26: hero column empty states */
.pl-hero-empty { text-align: center; padding: 1.1rem 0.5rem 0.6rem; }
.pl-hero-empty-title { font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; }
.pl-hero-empty-sub { font-size: 0.72rem; color: #77726A; margin-top: 0.15rem; }

/* ==========================================================================
   v1.91-r1 — mobile pass 1
   ========================================================================== */

/* (A) iOS zoom-on-focus: Safari auto-zooms the viewport when a focused
 * control's font-size is under 16px, and does not cleanly zoom back. Every
 * text control in the app is text-sm (14px) or text-xs (12px), so on phones
 * we floor them at 16px. Class-qualified selectors (0,1,1) out-rank the
 * Tailwind size utilities (0,1,0) without !important; the bare element
 * selectors catch any future unclassed control (browser default is 16px
 * anyway). Nothing in the tree renders controls above 16px (audited r1),
 * so this floor can never shrink a control. Line-height matches text-base
 * metrics so taller glyphs don't clip in py-2.5 boxes. */
@media (max-width: 767px) {
  input, select, textarea,
  input.text-sm, select.text-sm, textarea.text-sm,
  input.text-xs, select.text-xs, textarea.text-xs {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* (D) Tap targets: v1.9-r25 deliberately released the 44px min-height on
 * skip buttons inside hero rows (min-height: 0) to keep desktop hero rows
 * compact. On touch screens 44px is the floor we want back. Scoped to the
 * mobile breakpoint so r25's desktop intent is untouched; source order
 * after the r25 rule means equal specificity resolves our way. */
@media (max-width: 767px) {
  .pl-hero-item .pl-hero-skip { min-height: 44px; }
}

/* v1.91-r5 — mobile Today: promoted hero + compact sections. The container is
 * pl-mobile-only, so none of this needs media scoping; it simply never shows
 * on desktop. */
/* v1.91-r9: display MUST NOT be set here. This class co-locates with
 * pl-mobile-only, whose display:none (defined earlier in the file) was being
 * overridden by source order — the mobile layout rendered on desktop/iPad
 * alongside the split columns. Any display value for co-located classes
 * belongs inside the mobile breakpoint only. */
@media (max-width: 767px) {
  .pl-hero-mobile { display: block; }
}
.pl-hero-mobile .pl-hero-col { margin-top: 0.8rem; }
.pl-hero-promo .pl-hero-actions { width: 100%; }
.pl-hero-promo .pl-hero-cta { flex: 1 1 auto; min-height: 54px; font-size: 1rem; font-weight: 700; }
.pl-hero-promo .pl-hero-skip { min-height: 44px; }
.pl-hero-promo .pl-hero-dispose { min-height: 44px; }
.pl-hero-progress { font-size: 0.72rem; color: #A39F97; margin: 0.55rem 0.15rem 0; letter-spacing: 0.01em; }

/* v1.91-r6 — Inventory dashboard mobile rows (urgency-first, concept C) */
.pl-invrow {
  background: rgba(31,29,26,0.72);
  border: 1px solid #2A2723;
  border-left: 3px solid #2A2723;
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.65rem;
}
.pl-invrow-warn { border-left-color: #f59e0b; background: rgba(69,26,3,0.12); }
.pl-invrow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.pl-invrow-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.pl-invrow-days { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.pl-invrow-date { font-size: 0.68rem; color: #77726A; }
.pl-invrow-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.pl-invrow-chip { background: #2A2723; border-radius: 0.4rem; padding: 0.15rem 0.45rem; font-size: 0.72rem; color: #BDB9B1; }
.pl-invrow-bar { height: 5px; background: #2A2723; border-radius: 999px; overflow: hidden; margin-top: 0.55rem; }
.pl-invrow-bar i { display: block; height: 100%; background: #34d399; border-radius: 999px; }
.pl-invrow-bar .pl-invrow-bar-warn { background: #f59e0b; }
.pl-invrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; font-size: 0.74rem; color: #A39F97; margin-top: 0.5rem; }
.pl-invrow-vendor {
  margin-left: auto;
  font-size: 0.74rem; font-weight: 600; color: #D68A57;
  background: rgba(156,85,38,0.18); border-radius: 0.55rem;
  padding: 0.4rem 0.65rem; min-height: 32px; display: inline-flex; align-items: center;
  white-space: nowrap;
}

/* v1.91-r7 — T2 page-owned mobile header + account sheet */
/* v1.91-r9: same cascade-order defect as pl-hero-mobile — display scoped to
 * the breakpoint so pl-mobile-only's none wins on desktop. */
.pl-mhead { align-items: flex-start; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.9rem; }
@media (max-width: 767px) {
  .pl-mhead { display: flex; }
}
.pl-mhead-text { min-width: 0; }
.pl-mhead-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #D68A57; }
.pl-mhead-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; color: #F2F1ED; line-height: 1.2; }
.pl-mhead-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(196,112,58,0.22); color: #C4703A;
  border: 1px solid rgba(196,112,58,0.3);
  font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pl-mhead-avatar:active { background: rgba(196,112,58,0.35); }
.pl-acct-head { display: flex; flex-direction: column; padding: 0.65rem 1rem 0.5rem; }
.pl-acct-name { font-size: 0.95rem; font-weight: 700; color: #EAE8E3; }
.pl-acct-email { font-size: 0.72rem; color: #77726A; word-break: break-all; }
@media (max-width: 767px) {
  .pl-desktop-chrome { display: none; } /* full desktop header + researcher row */
}

/* v1.91-r8 — account sheet: researcher quick-switch rows */
.pl-acct-switch { display: block; }
.pl-acct-row { display: flex; align-items: center; gap: 0.6rem; }
.pl-acct-row[disabled] { opacity: 1; cursor: default; }
.pl-acct-row-cur { background: rgba(196,112,58,0.08); }
.pl-acct-row-initial {
  flex: none; width: 28px; height: 28px; border-radius: 9999px;
  background: rgba(196,112,58,0.22); color: #C4703A;
  font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-acct-row-name { flex: 1 1 auto; min-width: 0; text-align: left; }
.pl-acct-row-check { flex: none; color: #C4703A; font-weight: 700; }


/* v1.91-r25 — vial identity chip on Today (name line), pending + drawn */
.pl-vial-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.12rem 0.5rem; margin-left: 0.4rem; border-radius: 0.45rem;
  background: rgba(196,112,58,0.14); color: #D68A57; border: 1px solid rgba(196,112,58,0.38);
  vertical-align: middle; white-space: nowrap;
}
.pl-vial-chip + .pl-vial-chip { margin-left: 0.3rem; }
.pl-vial-chip-lg { font-size: 0.95rem; padding: 0.3rem 0.7rem; margin: 0.35rem 0.4rem 0 0; border-radius: 0.6rem; }

.pl-vial-chip-warn { background: rgba(245,158,11,0.16); color: #fbbf24; border-color: rgba(245,158,11,0.5); } /* v1.91-r27: past BUD */

/* ---- v3.0-r1/r3: RanchStack notice over the login gate --------------- */
.pl-rsnotice { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pl-rsnotice.hidden { display: none; }
.pl-rsnotice-backdrop { position: absolute; inset: 0; background: rgba(31,29,26,0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pl-rsnotice-card { position: relative; width: 100%; max-width: 28rem; max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: #2A2723; color: #F2F1ED; border: 1px solid #3A3631; border-radius: 1.25rem; padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); text-align: center; }
.pl-rsnotice-eyebrow { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #B5652D; font-weight: 600; margin: 0 0 0.35rem; }
.pl-rsnotice-title { font-size: 1.25rem; line-height: 1.25; font-weight: 700; margin: 0 0 0.6rem; }
.pl-rsnotice-name { font-family: 'Bitter', Georgia, serif; font-weight: 800; }
.pl-rsnotice-text { font-size: 0.9rem; line-height: 1.5; color: #BDB9B1; margin: 0 0 1rem; }
.pl-rsnotice-text strong { color: #F2F1ED; font-weight: 600; }
.pl-rsnotice-btn { display: block; width: 100%; padding: 0.75rem; border: 0; border-radius: 0.75rem; background: #B5652D; color: #F2F1ED; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.pl-rsnotice-btn:hover { background: #C4703A; }
@media (min-width: 640px) { .pl-rsnotice-btn { width: auto; min-width: 12rem; margin: 0 auto; } }