/* today.css — surface-specific styling for the fused daily hub.
   Layers over celestium-brand.css tokens + dash/style.css (cards, buttons,
   header/footer). Only the pieces the /today surface adds live here. */

.sky-line {
  font-family: var(--cel-font-display);
  font-size: 1.35rem;
  color: var(--cel-gilt);
  margin: 4px 0 6px;
}
.narrative { margin: 0; }

.moment-verdict {
  font-family: var(--cel-font-display);
  font-size: 1.2rem;
  color: var(--cel-gold);
  margin: 4px 0 6px;
}
.action-step { margin: 4px 0 10px; }

/* Native <details> as the "tap for depth" / "full ritual" disclosure. */
details { margin-top: 6px; }
details > summary {
  cursor: pointer;
  color: var(--cel-gold);
  font-size: 0.9rem;
  list-style: none;
  padding: 6px 0;
  border-top: var(--cel-rule);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--cel-gold-shadow); }
details[open] > summary::before { content: '▾ '; }

#ritual-steps { margin: 8px 0 0; padding-left: 1.2em; }
#ritual-steps li { margin: 4px 0; }
#ritual-intention { font-style: italic; margin: 8px 0 0; }

#depth-full .tech {
  padding: 8px 0;
  border-top: var(--cel-rule);
}
#depth-full .tech:first-child { border-top: none; }
#depth-full .tech-name { color: var(--cel-gold); font-size: 0.9rem; }

.upsell { padding: 12px 0 4px; }
.upsell p { margin: 0 0 10px; }

/* ── Bento grid (assay lattice_compass_web_design) ─────────────────────────
   Asymmetric tiles; hierarchy is encoded in span (the hero outweighs its
   neighbors), not in a linear stack. Reflows to a single hero-first column
   ≤768px (BS-2), so mobile never regresses to the equal-weight scroll. */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.bento > .card { margin: 0; }              /* grid gap owns spacing, not card margins */
.t-hero { grid-column: span 2; grid-row: span 2; }
.t-wheel { grid-column: span 2; grid-row: span 2; }
.t-half { grid-column: span 2; }
.t-full { grid-column: span 4; }

/* The live sky wheel — a square visual anchor beside the hero. */
.t-wheel { display: flex; flex-direction: column; }
.t-wheel .wheel { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 8px auto 0; align-self: center; }
.t-wheel .wheel svg { display: block; width: 100%; height: 100%; }

/* Motion controls — play/scrub the sky's approximate near-term drift. */
.wheel-ctl { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; margin: 10px auto 0; }
.wheel-play {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cel-gold-shadow); border-radius: 50%;
  background: var(--cel-navy); color: var(--cel-gold);
  font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.wheel-play:hover, .wheel-play:focus-visible { outline: none; border-color: var(--cel-gold); }
.wheel-scrub {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; background: var(--cel-gold-shadow); border-radius: 2px; cursor: pointer;
}
.wheel-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--cel-gold); cursor: pointer;
}
.wheel-scrub::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--cel-gold); cursor: pointer;
}
.wheel-scrub:focus-visible { outline: none; }
.wheel-scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cel-gold) 40%, transparent); }
.wheel-offset {
  flex: none; min-width: 34px; text-align: right;
  color: var(--cel-gilt); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.wheel-note { max-width: 320px; margin: 6px auto 0; font-size: 0.72rem; text-align: center; }

@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento > * { grid-column: auto; grid-row: auto; }   /* stack in DOM order, hero first */
}

/* The HERO — today's verdict fused with the day's delta. Carries the most
   visual weight (gilt border + subtle wash); the ≤2-hero-tile restraint (BS-1)
   keeps it the single anchor. */
.card.t-hero {
  border-color: var(--cel-gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cel-gold) 6%, var(--cel-navy)) 0%, var(--cel-navy) 60%);
}
/* The delta — "what just shifted", the open loop. A mirror, not an alarm (BS-3). */
.hero-delta {
  font-size: 0.98rem;
  color: var(--cel-gilt);
  margin: 2px 0 8px;
  padding-left: 12px;
  border-left: 2px solid var(--cel-gold);
}
.dyn-sect { margin: 4px 0 10px; font-size: 0.85rem; font-style: italic; }
.dyn-aspects { display: flex; flex-direction: column; }

.asp { padding: 11px 0; border-top: var(--cel-rule); }
.asp:first-child { border-top: none; padding-top: 4px; }
.asp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.asp-title {
  font-family: var(--cel-font-display);
  font-size: 1.08rem;
  color: var(--cel-gilt);
}
.asp.hard .asp-title { color: var(--cel-gold); }
.asp-meta {
  color: var(--cel-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.asp-int { margin: 5px 0 0; font-size: 0.92rem; color: var(--cel-ivory); }

/* The universal sky debrief (chartless). */
.sky-events { list-style: none; margin: 6px 0 8px; padding: 0; }
.sky-events li { margin: 5px 0; font-size: 0.95rem; }
.sky-retro { margin: 0 0 4px; font-size: 0.9rem; }

.positions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 14px;
  margin: 10px 0;
}
.pos { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.pos-p { color: var(--cel-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pos-v { color: var(--cel-ivory); font-size: 0.85rem; }
.retro { color: var(--cel-gilt); font-size: 0.85em; }

.sky-power { margin: 8px 0 4px; }
.ph-title { color: var(--cel-gold); font-size: 0.9rem; margin-bottom: 4px; }
.ph { display: flex; gap: 10px; padding: 3px 0; font-size: 0.85rem; }
.ph-when { color: var(--cel-gilt); white-space: nowrap; min-width: 92px; }
.ph-what { color: var(--cel-ivory); }

/* Personalize nudge — the conversion hinge (shown until birth is set). */
.card.nudge { border-color: var(--cel-gold); background: var(--cel-navy); }
.nudge-lead { margin: 0 0 10px; }
#account-nudge { text-decoration: none; }

/* Wisdom Traditions — distinct live-draw cards. */
.trad-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.trad-result { margin-top: 8px; }
.trad-card { padding: 10px 0; border-top: var(--cel-rule); }
.trad-card:first-child { border-top: none; }
.trad-name { color: var(--cel-gold); font-family: var(--cel-font-display); font-size: 1.05rem; }
.trad-kw { color: var(--cel-gilt); font-size: 0.8rem; margin: 4px 0; }
.trad-body { margin: 6px 0 0; font-size: 0.92rem; }
.trad-card.synthesis { border-top: 1px solid var(--cel-gold); margin-top: 12px; padding-top: 12px; }
.trad-card.synthesis .trad-name { color: var(--cel-gilt); }

/* Rolling two-week strip. */
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  padding: 8px 6px;
  border: 1px solid var(--cel-gold-shadow);
  border-radius: 8px;
  background: var(--cel-navy);
}
.chip.today { border-color: var(--cel-gold); }
.chip .d { color: var(--cel-muted); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; }
.chip .m { color: var(--cel-ivory); font-size: 0.8rem; }
.chip .r { color: var(--cel-gilt); font-size: 0.7rem; }

.patterns { margin-top: 10px; }
.pattern-row { padding: 8px 0; border-top: var(--cel-rule); }
.pattern-row:first-child { border-top: none; }
.pattern-row .p-transit { color: var(--cel-gold); }
.pattern-row .p-meta { color: var(--cel-muted); font-size: 0.78rem; }

/* Personalize form. */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 4px; }
#personalize input {
  background: var(--cel-navy);
  border: 1px solid var(--cel-gold-shadow);
  border-radius: 8px;
  color: var(--cel-ivory);
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
  width: 100%;
}
#personalize input::placeholder { color: var(--cel-muted); opacity: 0.75; }
#personalize input:focus { outline: none; border-color: var(--cel-gold); }

/* Journal inputs (scoped so they never leak into Clerk's DOM). */
#journal input[type="text"], #journal select {
  background: var(--cel-navy);
  border: 1px solid var(--cel-gold-shadow);
  border-radius: 8px;
  color: var(--cel-ivory);
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
}
#journal input[type="text"] { flex: 1; min-width: 180px; }
#journal input[type="text"]::placeholder { color: var(--cel-muted); opacity: 0.75; }
#journal input:focus, #journal select:focus { outline: none; border-color: var(--cel-gold); }

/* Header actions — share button + account chip, right-aligned in the header. */
.header-actions { display: flex; align-items: center; gap: 10px; }
#share-today { padding: 6px 14px; font-size: 0.9rem; }