/* ── 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   →   .detail-panel__description (now in Zone 3 body, scrolls — see 2026-07-10 note below)
     .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 — 2026-07-10: moved from Zone 2 (Identity, fixed) to Zone 3
   (Body, scrollable) so a long intro doesn't push the fixed header taller
   and crowd out the scrolling area. Margin reset to 0 since .detail-panel__body's
   own gap (16px) now handles spacing, not the identity zone's 6px gap. */
.detail-panel__description {
  margin: 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) ──────────────────────
   2026-07-09: was two stacked full-width rows (Done+TryAgain, then
   Share+Copy+Print) — fine for labelled buttons, but it ate a lot of
   vertical space on phones. Every action button here is now an icon-only
   circle (.detail-footer-icon-btn below), so both groups fit on one row
   at any width. This replaces the old D9 (10.13) desktop-only "row on
   wide screens, stack on mobile" media query in premium-desktop.css,
   which is no longer needed now that there's nothing wide left to stack. ── */
.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: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Primary group: Done + Try another */
.detail-panel__footer-primary {
  display: flex;
  gap: 8px;
}

/* Media group: Timer + voice record — 2026-07-10. Both used to be bulky
   full-width widgets in the scrollable body; now they're round buttons
   (.timer-fab / .voice-fab, see ui.css) living here, same family as the
   icon buttons on either side but a touch bigger to hold ticking numbers /
   a live elapsed label. Wraps onto its own line with the rest of the
   footer via flex-wrap on .detail-panel__footer if the row gets tight. */
.detail-panel__footer-media {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

/* Shared shape for every footer action button — same 36px round style as
   the hero fav/close buttons (Zone 1 above), just reused down here. Only
   sets size/shape; each button keeps its own colour rules (.btn-done /
   .btn-done--active / .btn-secondary / .share-btn) untouched, so state
   colours (e.g. green once marked done) still apply exactly as before. */
.detail-footer-icon-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  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-media,
  .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 */
  }
}