/* ============================================================
   premium.css — Playtypus ActivityDetail premium layer
   Sprint 1 + Sprint 2 (playtypus-activitydetail-strategi.md, 2026-07-01)
   Load LAST in index.html, after ui.css / detail-zones.css / feel.css.
   BEM selectors match existing architecture. No specificity hacks.

   Scope: A1, A2, A3, A4, A5, A6, A7, A8, A9, B1, B3.
   NOT included (Sprint 3/4, not requested): A10, B2, B4, C1-C3.
   The height:100% → auto grid bug (9.2) was fixed directly in
   detail-zones.css, not overridden here — it's a bugfix in the
   source file, not a premium-layer addition.
   ============================================================ */

/* ── A1: Title typography ──────────────────────────────────── */
.detail-panel__identity .detail-panel__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ── A2: Handle ────────────────────────────────────────────── */
.detail-panel__handle {
  width: 48px;
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  margin: 14px auto 0;
  transition: background 200ms ease;
}
.detail-panel:hover .detail-panel__handle {
  background: var(--color-text-muted);
}

/* ── A3: Status chips ──────────────────────────────────────── */
.detail-panel__chips .meta-chip--green {
  background: color-mix(in srgb, var(--color-done, #22c55e) 12%, transparent);
  color: color-mix(in srgb, var(--color-done, #22c55e) 75%, #000);
  border-color: color-mix(in srgb, var(--color-done, #22c55e) 25%, transparent);
  font-weight: 600;
}

/* ── A4: Done button as CTA ────────────────────────────────── */
.btn-done {
  background: color-mix(in srgb, var(--color-done, #22c55e) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-done, #22c55e) 30%, transparent);
  color: color-mix(in srgb, var(--color-done, #22c55e) 65%, #000);
}
.btn-done:hover {
  background: color-mix(in srgb, var(--color-done, #22c55e) 22%, var(--color-surface));
}
.btn-done--active {
  background: var(--color-done, #22c55e);
  border-color: var(--color-done, #22c55e);
  color: #fff;
}

/* ── A5: Step connector line ───────────────────────────────── */
.steps-list__item:not(:last-child) {
  position: relative;
}
.steps-list__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: -8px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 20%, transparent)
  );
  border-radius: 1px;
}

/* ── A6: Body scroll hint ──────────────────────────────────── */
.detail-panel__body::after {
  content: '';
  position: sticky;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
  display: block;
  margin-top: -40px;
}

/* ── A7: Footer depth separation ───────────────────────────── */
.detail-panel__footer {
  position: relative;
}
.detail-panel__footer::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to top, var(--color-surface), transparent);
  pointer-events: none;
}

/* ── A8: Section title anchor ──────────────────────────────── */
.detail-section__title {
  padding-left: 10px;
  border-left: 2.5px solid var(--color-primary);
}

/* ── A9: Spring animation ──────────────────────────────────── */
@keyframes slideUpSpring {
  0%   { transform: translateY(100%); opacity: 0; }
  60%  { transform: translateY(-3%);  opacity: 1; }
  80%  { transform: translateY(1%); }
  100% { transform: translateY(0);    opacity: 1; }
}
.detail-panel {
  --detail-animation: slideUpSpring 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── B1: Category-colored hero ─────────────────────────────────────────────
   Covers both the legacy taxonomy (movement/creative/calm/social — matches
   the existing .category-chip--* classes in ui.css) AND the taxonomy
   actually used by the demo pack (move/calm/think/create). This is a
   pragmatic patch, not the real fix — see "Kvarstående observation" in
   playtypus-activitydetail-strategi.md for the proper long-term solution
   (a color field on CategoryConfig in pack.config.json).
   ────────────────────────────────────────────────────────────────────── */
.detail-panel__hero[data-category="movement"],
.detail-panel__hero[data-category="move"] {
  background: color-mix(in srgb, var(--color-cat-movement, #3B82F6) 12%, var(--color-surface-alt));
}
.detail-panel__hero[data-category="creative"],
.detail-panel__hero[data-category="create"] {
  background: color-mix(in srgb, var(--color-cat-creative, #EC4899) 12%, var(--color-surface-alt));
}
.detail-panel__hero[data-category="calm"] {
  background: color-mix(in srgb, var(--color-cat-calm, #8B5CF6) 12%, var(--color-surface-alt));
}
.detail-panel__hero[data-category="social"] {
  background: color-mix(in srgb, var(--color-cat-social, #F59E0B) 12%, var(--color-surface-alt));
}
.detail-panel__hero[data-category="think"] {
  background: color-mix(in srgb, var(--color-cat-think, #F59E0B) 12%, var(--color-surface-alt));
}

.detail-panel__hero[data-category="movement"] .detail-panel__emoji,
.detail-panel__hero[data-category="move"] .detail-panel__emoji {
  filter: drop-shadow(0 4px 16px rgba(59, 130, 246, 0.3));
}
.detail-panel__hero[data-category="creative"] .detail-panel__emoji,
.detail-panel__hero[data-category="create"] .detail-panel__emoji {
  filter: drop-shadow(0 4px 16px rgba(236, 72, 153, 0.3));
}
.detail-panel__hero[data-category="calm"] .detail-panel__emoji {
  filter: drop-shadow(0 4px 16px rgba(139, 92, 246, 0.3));
}
.detail-panel__hero[data-category="social"] .detail-panel__emoji {
  filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.3));
}
.detail-panel__hero[data-category="think"] .detail-panel__emoji {
  filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.3));
}

/* ── B3: Close button hierarchy ──────────────────────────────────────────
   Dark/frosted close button vs light/frosted fav button — clearer
   hierarchy between the destructive-ish "close" action and the
   preference "favourite" action. Both already render SVG icons in
   ActivityDetail.razor; only the styling changes here.
   ────────────────────────────────────────────────────────────────────── */
.detail-close-btn {
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail-close-btn:hover {
  background: rgba(0, 0, 0, 0.72);
}
.detail-panel__hero-fav {
  background: rgba(255, 255, 255, 0.9);
}

/* ── Prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .detail-panel { --detail-animation: none; }
}