/* ============ HOME WELCOME PANEL ============
   Greeting, a gentle message about today, the Daily Rituals tiles and the
   illustration (scripts/hero-art.js). Colors are the --hero-* and --art-*
   tokens in styles/themes.css. Laid out by the panel's own width (container
   query): on phones the picture sits small beside the greeting so the ritual
   tiles stay on the first screen; wider panels give it the right-hand column. */
.fs-hero {
  container-type: inline-size;
  position: relative; overflow: hidden;
  background: var(--hero-bg, var(--surface));
  border: 1px solid var(--hero-border, var(--border));
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}
.fs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas: "text art" "foot foot";
  gap: 12px 12px;
  align-items: center;
  padding: 18px;
}
.fs-hero__text { grid-area: text; min-width: 0; }
.fs-hero__art { grid-area: art; line-height: 0; }
.fs-hero__art svg { width: 100%; height: auto; display: block; }
.fs-hero__foot { grid-area: foot; min-width: 0; }
.fs-hero__eyebrow {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--hero-eyebrow-bg, var(--surface-alt)); color: var(--hero-eyebrow-text, var(--text));
  font-size: 0.75rem; font-weight: 700; letter-spacing: .02em;
}
.fs-hero__title { margin-top: 8px; font-size: 1.625rem; line-height: 1.15; color: var(--heading); overflow-wrap: anywhere; }
.fs-hero__line { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
/* The ritual tiles inside the panel: no second card around them */
.fs-hero .rituals-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
@container (min-width: 600px) {
  .fs-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 16px 24px; padding: 24px 28px; }
  .fs-hero__title { font-size: 2.125rem; }
  .fs-hero__line { font-size: 1rem; }
}
/* Wide enough for the two ritual tiles to sit beside the picture without squeezing (at 880–1099px their titles wrapped) */
@container (min-width: 1100px) {
  .fs-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-areas: "text art" "foot art"; }
  .fs-hero__art { align-self: end; }
}
@media print {
  .fs-hero { background: #fff; border-color: #ddd; }
  .fs-hero__art { display: none; }
  .fs-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "foot"; }
}

/* Illustration fills (classes, not fill attributes — see hero-art.js) */
.fh-glow { fill: var(--art-glow); }
.fh-moon { fill: var(--art-moon); }
.fh-spark { fill: var(--art-spark); } .fh-spark--soft { opacity: .55; }
.fh-shadow { fill: var(--art-shadow); opacity: .08; }
.fh-leg { fill: none; stroke: var(--art-frame); stroke-width: 5; stroke-linecap: round; }
.fh-leg--back { opacity: .55; }
.fh-frame { fill: var(--art-frame); }
.fh-board { fill: var(--art-board); }
.fh-page { fill: var(--art-page); }
.fh-pic1 { fill: var(--art-pic1); } .fh-pic2 { fill: var(--art-pic2); } .fh-pic3 { fill: var(--art-pic3); }
.fh-pic-detail { fill: var(--art-page); opacity: .7; }
.fh-pin { fill: var(--art-pin); }
.fh-note { fill: var(--art-note); }
.fh-scribble { fill: var(--art-ink); opacity: .3; }
.fh-cover { fill: var(--art-cover); }
.fh-spine { fill: var(--art-ink); opacity: .08; }
.fh-line { fill: var(--art-ink); opacity: .16; }
.fh-pen { fill: var(--art-pen); }
.fh-pen-tip { fill: var(--art-ink); opacity: .6; }
.fh-plate { fill: var(--art-frame); opacity: .6; }
.fh-candle { fill: var(--art-candle); }
.fh-candle-top { fill: var(--art-ink); opacity: .12; }
.fh-wick { fill: var(--art-ink); opacity: .7; }
.fh-flame { fill: var(--art-flame); transform-box: fill-box; transform-origin: 50% 100%; animation: fhFlicker 3.2s ease-in-out infinite; }
.fh-flame-glow { fill: var(--art-flame); opacity: .22; }
.fh-crystal { fill: var(--art-crystal); }
.fh-crystal2 { fill: var(--art-crystal2); }
.fh-facet { fill: none; stroke: var(--art-page); stroke-width: 1.5; opacity: .5; }
@keyframes fhFlicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  30% { transform: scale(.94, 1.06) rotate(-2deg); }
  60% { transform: scale(1.04, .95) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .fh-flame { animation: none; } }
/* Inside the panel the small label sits on the gradient's tinted end: full-strength text there. */
.fs-hero .rituals-head .section-label { color: var(--text); }