/* ──────────────────────────────────────────────────────────────────────
   Today Ghost Empty State (project-051)
   Renders a phantom-preview dashboard inside .today-bento when the user
   has zero compounds. All ghost content is opacity-dimmed and marked
   inert + aria-hidden so screen readers and keyboard focus skip it.
   The single overlaid CTA card is the only interactive element.
   ────────────────────────────────────────────────────────────────────── */

/* Bento goes relative when in ghost mode so absolute children anchor inside */
.today-bento[data-ghost="true"],
.today-bento[data-ghost="leaving"] {
  position: relative;
}

/* Dim every direct content child of the three bento columns.
   project-051 Debug Round 3: .today-sparkline removed from this list — the
   new horizontal purple-to-cyan gradient stroke (with per-segment opacity
   stops 0.15 / 0.50 / 0.30) now carries dimming intrinsically. Multiplying
   by parent 0.35 here previously reintroduced the "too dim to see" defect. */
.today-bento[data-ghost="true"] .doses-wrap > .ghost-row,
.today-bento[data-ghost="true"] .symptom-card > *:not(.section-title) {
  opacity: 0.35;
  pointer-events: none;
}

/* Dose-card ghost rows render as opacity-dimmed real cards */
.today-bento[data-ghost="true"] .doses-wrap .dose-card.ghost-row {
  opacity: 0.35;
  pointer-events: none;
}

/* Section titles in dimmed cards stay readable */
.today-bento[data-ghost="true"] .symptom-card .section-title,
.today-bento[data-ghost="true"] .doses-wrap .section-title,
.today-bento[data-ghost="true"] .sparkline-card .sparkline-header {
  opacity: 1;
}

/* Suppress the existing sparkline-no-dose-cta when ghost is active */
.today-bento[data-ghost="true"] .sparkline-no-dose-cta,
.today-bento[data-ghost="leaving"] .sparkline-no-dose-cta {
  display: none !important;
}

/* "EXAMPLE PREVIEW" badge */
.today-ghost-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
   Inline ghost CTA (project-051 Debug Round 2 — recoloured in R3)
   A single inline button appended to .doses-wrap after the three ghost
   rows. project-051 Debug Round 3: this is now the orange anchor on the
   home page (the Today-header CTA was removed end-to-end). Filled orange
   on a column of three dimmed rows — opacity contrast + saturation carry
   the hierarchy. No animation, no pulse — the button is mounted on first
   render and stays static.
   ────────────────────────────────────────────────────────────────────── */

.today-ghost-inline-cta {
  display: block;
  margin: 16px auto 0;       /* margin-top from last ghost row; auto centers desktop */
  height: 40px;
  padding: 0 20px;
  background: var(--hgh);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);

  /* Belt-and-suspenders opacity override against the parent
     .today-bento[data-ghost="true"] dim selectors. The button is appended
     as a non-ghost sibling and must render at full opacity to act as the
     visual anchor in a column of phantoms. */
  opacity: 1;
}

.today-ghost-inline-cta:hover {
  background: color-mix(in srgb, var(--hgh) 90%, white 10%);
}

.today-ghost-inline-cta:active {
  transform: scale(0.97);
}

.today-ghost-inline-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--field-ring);
}

/* Mobile: full-width inside the now-single-column doses-wrap, 44px tap target */
@media (max-width: 960px) {
  .today-ghost-inline-cta {
    display: block;
    width: 100%;
    height: 44px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Unlock transition (0 compounds → 1 compound) */
.today-bento[data-ghost="leaving"] .ghost-row,
.today-bento[data-ghost="leaving"] .today-sparkline {
  animation: today-ghost-leave 240ms ease-out forwards;
}
.today-bento[data-ghost="leaving"] .ghost-row:nth-child(2) { animation-delay: 60ms; }
.today-bento[data-ghost="leaving"] .ghost-row:nth-child(3) { animation-delay: 120ms; }
.today-bento[data-ghost="leaving"] .today-ghost-inline-cta {
  animation: today-ghost-cta-leave 200ms ease-out forwards;
}
@keyframes today-ghost-leave {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes today-ghost-cta-leave {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .today-bento[data-ghost="leaving"] .ghost-row,
  .today-bento[data-ghost="leaving"] .today-sparkline,
  .today-bento[data-ghost="leaving"] .today-ghost-inline-cta {
    animation: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
  }
}