/* ── detail-zones.css ──────────────────────────────────────────────────────
   New zone layout for ActivityDetail.
   Add <link rel="stylesheet" href="_content/Playtypus.Core/css/detail-zones.css">
   in App.razor (or equivalent) AFTER the existing ui.css link so these rules
   take precedence where they overlap.

   Class mapping vs old structure:
     OLD                           NEW
     .detail-panel__content    →   .detail-panel__body (+ .detail-panel__identity)
     .detail-panel__meta-row   →   .detail-panel__identity-meta
     .detail-panel__desc-row   →   inline in .detail-panel__identity
     .detail-action-row        →   .detail-panel__footer-primary
     .detail-share-row         →   .detail-panel__footer-secondary
     (scrolled next-series)    →   .detail-panel__footer-series
───────────────────────────────────────────────────────────────────────────── */

/* ── Panel: switch from flex-column to named grid rows ──────────────────── */
.detail-panel {
  display: grid;
  grid-template-rows:
    auto          /* handle           */
    auto          /* hero             */
    auto          /* identity         */
    1fr           /* body (scrolls)   */
    auto;         /* footer (sticky)  */
  /* height:auto (var: 100%) — 1fr räknar fritt utrymme som noll i en auto-hög
     container, så korta aktiviteter (utan props/steg/timer) krymper panelen
     till sitt eget innehåll istället för att alltid rendera på 92dvh med
     tomrum i body. max-height (satt i ui.css: 92dvh) sätter fortfarande taket
     och tvingar fram scroll för långa aktiviteter. Se strategidokumentets
     avsnitt 9.2. */
  height: auto;
  max-height: 100%;
  overflow: hidden;   /* body handles its own scroll */
}

/* ── Zone 2: Identity ────────────────────────────────────────────────────── */
.detail-panel__identity {
  padding: 14px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Title row: title left, TTS icon-button right */
.detail-panel__title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.detail-panel__title-row .detail-panel__title {
  flex: 1;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary, #1a1a1a);
}

/* Category + level chips – purely descriptive, no actions */
.detail-panel__identity-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Description */
.detail-panel__description {
  margin: 2px 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--color-text-secondary, #555);
}

/* Quick-fact chip row */
.detail-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* Inline notices (safety, updated-since-done) */
.safety-note,
.update-banner {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.safety-note {
  background: var(--color-warning-bg, #fff8e1);
  color: var(--color-warning-text, #7a5a00);
}

.update-banner {
  background: var(--color-info-bg, #e8f4fd);
  color: var(--color-info-text, #1565c0);
}

.safety-note__icon,
.update-banner__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Zone 3: Body (scrollable) ───────────────────────────────────────────── */
.detail-panel__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sections inside body keep their existing styling; only the outer wrapper changes */
.detail-panel__body > .detail-section {
  margin: 0;   /* gap handles spacing; remove any top/bottom margins */
}

/* ── Zone 4: Footer (sticky at bottom of the panel) ─────────────────────── */
.detail-panel__footer {
  border-top: 1.5px solid var(--color-border, rgba(0,0,0,0.09));
  background: var(--color-surface, #fff);
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Primary row: Done (dominant) + Try another (secondary) */
.detail-panel__footer-primary {
  display: flex;
  gap: 8px;
}

.detail-panel__footer-primary .btn-done {
  flex: 1;           /* Done button fills available width */
}

.detail-panel__footer-primary .btn-secondary {
  flex-shrink: 0;
}

/* Secondary row: Share + Copy link + Print */
.detail-panel__footer-secondary {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Series navigation strip */
.detail-panel__footer-series {
  width: 100%;
  margin-top: 2px;
}

/* ── Hero overlay: fav button ────────────────────────────────────────────── */
.detail-panel__hero-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Position hero relative so hero-actions can be absolute */
.detail-panel__hero {
  position: relative;
}

.detail-panel__hero-fav {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.detail-panel__hero-fav--active {
  color: var(--color-accent, #e0055a);
  background: rgba(255,255,255,0.95);
}

.detail-panel__hero-fav:hover  { background: rgba(255,255,255,0.95); }
.detail-panel__hero-fav:active { transform: scale(0.88); }

/* ── Speech icon-button ──────────────────────────────────────────────────── */
.speech-btn--icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.speech-btn--icon:hover {
  opacity: 1;
  background: var(--color-hover-bg, rgba(0,0,0,0.06));
}

.speech-btn--icon.speech-btn--active {
  opacity: 1;
  color: var(--color-accent, #e0055a);
}

/* Muted indicator when TTS unsupported */
.speech-btn--unavailable {
  opacity: 0.3;
  font-size: 0.9rem;
  cursor: default;
}

/* ── Activity row: chevron (added in stripped version) ───────────────────── */
.activity-row__chevron {
  font-size: 1.3rem;
  color: var(--color-text-tertiary, #bbb);
  flex-shrink: 0;
  align-self: center;
  padding-left: 4px;
}

/* ── Print: hide footer interactive elements ─────────────────────────────── */
@media print {
  .detail-panel__footer-secondary,
  .detail-panel__footer-primary .btn-secondary,
  .detail-panel__footer-series,
  .detail-panel__hero-fav,
  .detail-close-btn,
  .speech-btn--icon {
    display: none !important;
  }

  .detail-panel {
    grid-template-rows: auto auto auto 1fr;  /* no footer row needed */
  }
}