/* ── Hero landing ─────────────────────────────────────────────────────────
   Shown instead of chat on first load. Uses the exact same drawer-splash
   template every tool intro uses (.drawer-splash / .ds-* classes, defined
   in css/drawer-splash.css) — same skeleton, same content amount (eyebrow,
   h1, description, 3-item checklist, single CTA) — so it's visually
   identical in structure to every other tool's intro screen. Only
   hero-specific additions live here: the wrapper that gives .drawer-splash
   something to fill, the clickable live-status checklist row, and the
   bot-mark art tile in place of the white emoji card. */

.hero-landing {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* styles.css sets #messages/#composer to display:flex explicitly, which
   (being an author rule) beats the browser's default [hidden]{display:none}
   UA rule — so the plain `hidden` attribute alone was NOT hiding them. That
   left both empty #messages and the composer bar rendered underneath the
   hero, stealing half of .main's flex height (each flex:1) and squashing
   .hero-landing into roughly half the space it needs — the "letterboxed",
   clipped-content bug. Force it here with matching specificity. */
#messages[hidden], #composer[hidden] { display: none !important; }

/* .drawer-splash is position:absolute so it needs a sized, positioned
   ancestor — .hero-landing plays that role here (same as .assess-panel
   does for a tool drawer). No [hidden] logic needed: unlike a one-time
   tool splash, this is the permanent home screen until "Open Frankie
   Chat" is pressed. */
.hero-splash { position: absolute; }

/* First checklist row shows the live brain-check status (mirrored from the
   topbar's #statusBtnLabel by js/hero-landing.js) and opens the same status
   dropdown on click. */
#heroStatusRow { cursor: pointer; }
#heroStatusRow:hover { color: #fff; }

/* Bot-mark art tile — takes the place of the white ds-art card the tool
   splashes use, since Frankie's own mark is a self-contained gradient
   tile (matches .botmark in the sidebar), not an emoji on a white card. */
.hero-art {
  background: linear-gradient(135deg, #1d64a7, #2bb9e7);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art svg { width: 55%; height: 55%; }