/* ════════════════════════════════════════════════════════════════════
   SymposiON · panels.css   —  reusable panel + avatar blocks
   Token-driven (with fallbacks) so a panel adopts whatever palette or
   season class is active on an ancestor. Pairs with identity.css,
   palettes.css / theme-obsidian.css, animations.css.

   Blocks:
     .sym-hero-panel     feature / announcement hero
     .sym-empty          empty-state & "coming soon"
     .sym-streak         streak / daily-progress strip
     .sym-event-card     daily challenge / seasonal event card
     .sym-stat-row       compact stat tiles
     .sym-avatar*        selectable profile-seal + picker grid
   ════════════════════════════════════════════════════════════════════ */

.sym-panel {
  background: var(--sym-bg-card, #1A130C);
  border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent));
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO PANEL — eyebrow · title · copy · CTA, with a faint watermark glyph
───────────────────────────────────────────────────────────────────── */
.sym-hero-panel {
  display: flex; align-items: center; gap: 32px;
  min-height: 220px; padding: 44px 50px;
  background:
    radial-gradient(ellipse 70% 120% at 88% 50%, color-mix(in srgb, var(--sym-terra, #D97B5C) 14%, transparent), transparent 62%),
    var(--sym-bg-card, #1A130C);
  border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent)); position: relative; overflow: hidden;
}
.sym-hero-panel .sym-hero-copy { position: relative; z-index: 2; max-width: 60%; }
.sym-hero-panel .eyebrow { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--sym-terra, #D97B5C); margin: 0 0 14px; }
.sym-hero-panel h3 { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-weight: 500; font-size: 44px; line-height: 1.02; margin: 0 0 14px; color: var(--sym-fg, #F0EBE0); }
.sym-hero-panel h3 b { color: var(--sym-terra, #D97B5C); font-weight: 600; }
.sym-hero-panel p { font-size: 14px; line-height: 1.65; color: var(--sym-fg-muted, #867660); margin: 0 0 22px; max-width: 420px; }
.sym-hero-panel .sym-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--sym-terra, #D97B5C); color: #1A1208;
  font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase;
  padding: 13px 22px; text-decoration: none; cursor: pointer;
  transition: transform .25s, filter .25s, box-shadow .25s; border: none;
}
.sym-hero-panel .sym-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 24px color-mix(in srgb, var(--sym-terra, #D97B5C) 35%, transparent); }
.sym-hero-panel .sym-hero-art {
  position: absolute; right: -24px; bottom: -28px; width: 240px; height: 240px;
  color: var(--sym-gold, #C4A448); opacity: .1; z-index: 1; pointer-events: none;
}
.sym-hero-panel .sym-hero-art svg { width: 100%; height: 100%; }

/* A second, smaller floating glyph for depth (optional) */
.sym-hero-panel .sym-hero-orb {
  position: absolute; right: 14%; top: 50%; transform: translateY(-50%);
  width: 150px; height: 150px; color: var(--sym-terra, #D97B5C); opacity: .5; z-index: 1; pointer-events: none;
}
.sym-hero-panel .sym-hero-orb svg { width: 100%; height: 100%; }

/* ─────────────────────────────────────────────────────────────────────
   EMPTY STATE / COMING SOON
───────────────────────────────────────────────────────────────────── */
.sym-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 56px 40px;
  background: var(--sym-bg-card, #1A130C); border: 1px dashed color-mix(in srgb, var(--sym-gold, #C4A448) 26%, transparent);
}
.sym-empty .sym-empty-art { width: 72px; height: 72px; color: var(--sym-gold, #C4A448); opacity: .55; }
.sym-empty .sym-empty-art svg { width: 100%; height: 100%; }
.sym-empty h4 { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-weight: 500; font-size: 26px; margin: 0; color: var(--sym-fg, #F0EBE0); }
.sym-empty p { font-size: 13.5px; line-height: 1.6; color: var(--sym-fg-muted, #867660); margin: 0; max-width: 340px; }
.sym-empty .sym-tag {
  font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sym-terra, #D97B5C); border: 1px solid color-mix(in srgb, var(--sym-terra, #D97B5C) 40%, transparent);
  padding: 6px 12px; margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   STREAK / DAILY PROGRESS STRIP
───────────────────────────────────────────────────────────────────── */
.sym-streak {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 26px; background: var(--sym-bg-card, #1A130C); border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent));
}
.sym-streak .sym-streak-flame { width: 46px; height: 46px; color: var(--sym-terra, #D97B5C); flex-shrink: 0; }
.sym-streak .sym-streak-flame svg { width: 100%; height: 100%; }
.sym-streak .sym-streak-count { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--sym-fg, #F0EBE0); }
.sym-streak .sym-streak-count small { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--sym-fg-muted, #867660); display: block; margin-top: 6px; font-weight: 500; }
.sym-streak .sym-streak-days { display: flex; gap: 7px; margin-left: auto; }
.sym-streak .sym-streak-days span {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent)); font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 9px; color: var(--sym-fg-muted, #867660);
}
.sym-streak .sym-streak-days span.on {
  background: color-mix(in srgb, var(--sym-terra, #D97B5C) 16%, transparent);
  border-color: var(--sym-terra, #D97B5C); color: var(--sym-terra, #D97B5C);
}
.sym-streak .sym-streak-days span.today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sym-gold, #C4A448) 40%, transparent); }

/* ─────────────────────────────────────────────────────────────────────
   EVENT / DAILY-CHALLENGE CARD
───────────────────────────────────────────────────────────────────── */
.sym-event-card {
  position: relative; overflow: hidden; border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent));
  background: var(--sym-bg-card, #1A130C); padding: 26px 26px 22px; min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  transition: border-color .3s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.sym-event-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sym-gold, #C4A448) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--sym-gold, #C4A448) 22%, transparent); }
.sym-event-card .sym-event-art { position: absolute; right: -18px; top: -16px; width: 130px; height: 130px; color: var(--sym-gold, #C4A448); opacity: .14; pointer-events: none; }
.sym-event-card .sym-event-art svg { width: 100%; height: 100%; }
.sym-event-card .sym-event-badge {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sym-terra, #D97B5C); background: color-mix(in srgb, var(--sym-terra, #D97B5C) 14%, transparent);
  padding: 5px 10px;
}
.sym-event-card .eyebrow { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--sym-fg-muted, #867660); position: relative; }
.sym-event-card h4 { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-weight: 500; font-size: 25px; line-height: 1.05; margin: 4px 0 6px; color: var(--sym-fg, #F0EBE0); position: relative; }
.sym-event-card .sym-event-meta { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 10px; letter-spacing: .5px; color: var(--sym-fg-muted, #867660); position: relative; }

/* ─────────────────────────────────────────────────────────────────────
   STAT TILES
───────────────────────────────────────────────────────────────────── */
.sym-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.sym-stat {
  background: var(--sym-bg-card, #1A130C); border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent)); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.sym-stat .v { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--sym-gold, #C4A448); }
.sym-stat .l { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sym-fg-muted, #867660); }

/* ─────────────────────────────────────────────────────────────────────
   AVATAR SEAL + PICKER
───────────────────────────────────────────────────────────────────── */
.sym-avatar {
  width: 96px; height: 96px; border-radius: 50%; position: relative;
  display: grid; place-items: center; color: var(--sym-gold, #C4A448);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--sym-gold, #C4A448) 8%, transparent), transparent 70%);
}
.sym-avatar svg { width: 100%; height: 100%; display: block; }

/* category tints — apply alongside .sym-avatar */
.sym-avatar.cat-myth    { color: var(--sym-terra, #D97B5C); }
.sym-avatar.cat-history { color: var(--sym-sage, #6A8752); }
.sym-avatar.cat-roman   { color: var(--sym-aegean, #5E8B96); }

.sym-avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px;
}
.sym-avatar-pick {
  appearance: none; background: var(--sym-bg-card, #1A130C); border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent));
  padding: 12px 10px 9px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s, background .25s;
}
.sym-avatar-pick:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sym-gold, #C4A448) 45%, transparent); }
.sym-avatar-pick .sym-avatar { width: 64px; height: 64px; }
.sym-avatar-pick .nm { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 13px; color: var(--sym-fg, #F0EBE0); line-height: 1.1; text-align: center; }
.sym-avatar-pick .gr { font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 8px; letter-spacing: 1px; color: var(--sym-fg-muted, #867660); text-align: center; }
.sym-avatar-pick[aria-pressed="true"], .sym-avatar-pick.is-selected {
  border-color: var(--sym-gold, #C4A448);
  background: color-mix(in srgb, var(--sym-gold, #C4A448) 10%, var(--sym-bg-card, #1A130C));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sym-gold, #C4A448) 40%, transparent);
}
.sym-avatar-pick[aria-pressed="true"]::after, .sym-avatar-pick.is-selected::after {
  content: "✓"; position: absolute; top: 6px; right: 8px;
  font-family: var(--sym-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 11px; color: var(--sym-gold, #C4A448);
}

/* tiny inline avatar for nav / headers */
.sym-avatar-sm { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--sym-hairline, color-mix(in srgb, var(--sym-gold,#C4A448) 16%, transparent)); color: var(--sym-gold, #C4A448); overflow: hidden; }
.sym-avatar-sm svg { width: 100%; height: 100%; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sym-hero-panel { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .sym-hero-panel .sym-hero-copy { max-width: 100%; }
  .sym-hero-panel h3 { font-size: 34px; }
  .sym-streak { flex-wrap: wrap; }
  .sym-streak .sym-streak-days { margin-left: 0; }
}