/* ── 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

   2026-08-02: Zone 4 (the sticky footer these three lived in) is gone —
   its buttons moved into the Zone 1 hero-actions row and Next-in-series
   moved into Zone 3 body. Renamed accordingly (see UI refact strategy,
   point 1):
     .detail-panel__footer-primary   →   .detail-panel__hero-buttons-primary
     .detail-panel__footer-media     →   .detail-panel__hero-buttons-media
     .detail-panel__footer-secondary →   .detail-panel__hero-buttons-secondary
     .detail-panel__footer-series    →   .detail-panel__next-series
     .detail-footer-icon-btn         →   .detail-hero-icon-btn

   2026-08-02 (same day, follow-up round): Done/Try another/Timer/Voice
   record relocated a second time, out of the hero row entirely and into
   their own floating FABs, so hero-buttons-primary/-media no longer exist:
     .detail-panel__hero-buttons-primary  →   .detail-panel__floating-group (+ .detail-fab-icon-btn)
     .detail-panel__hero-buttons-media    →   .detail-panel__floating-group
   .detail-panel__hero-buttons-secondary and .detail-hero-icon-btn are
   unchanged and still current — Share/Copy link/Print stayed in the hero
   row.
───────────────────────────────────────────────────────────────────────────── */

/* ── 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)   */
  /* 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.
     2026-08-02: femte raden (footer) borttagen tillsammans med Zone 4 —
     body (1fr) tar nu hela det kvarvarande utrymmet ända ner. Motsvarar
     exakt vad @media print redan gjorde här (se botten av filen) — den
     regeln är nu en no-op eftersom basregeln redan matchar den. */
  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;
  overflow-x: hidden;  /* bugfix 2026-07-30: overflow-y:auto alone left
    overflow-x computing to "auto" too (per spec, when only one axis is
    set to auto/scroll/hidden, the other axis's computed overflow also
    becomes auto rather than staying visible) — so ANY child wider than
    the body, whatever the cause (long unbroken credit text, an iframe
    embed, a Leaflet map, a future content-block type), made this
    scrollable sideways. .detail-panel's own overflow:hidden (above) only
    stops the whole PANEL from overflowing the page; it does nothing for
    scrolling that happens inside this body once you're already in it.
    Verified with Playwright: before this line, a deliberately-injected
    2000px-wide child made body.scrollWidth (2462px) exceed clientWidth
    (900px) and body.scrollLeft was genuinely settable to a nonzero value
    — i.e. real, working sideways scroll, not just a measurement quirk. */
  -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 */
}

/* Next-in-series — 2026-08-02: moved here from the old Zone 4 sticky footer,
   which no longer exists (see grid-template-rows above). Still navigation
   rather than content, but it now sits at the natural end of the activity
   in the scrollable body instead of being pinned behind Done/Timer/Share
   the whole time. */
.detail-panel__next-series {
  width: 100%;
  margin-top: 2px;
}

/* ── Zone 1 hero: media carousel (image / gallery / video) ────────────────
   2026-08-02: HeroImage, Activity.Images (gallery) and youtube content
   blocks now render through one carousel here instead of three separate,
   mostly mutually-exclusive paths (see ActivityDetail.razor: HeroMediaItems).
   Structurally fixed as its own grid row (not scrollable), so it stays in
   view without needing position:sticky. ── */
.detail-panel__hero {
  position: relative;
}

.detail-panel__hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.detail-panel__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* Caption/credit — reuses ImageGalleryCaptionBar (gallery.css) for its
   render logic (nothing shown when both Caption and Credit are empty), but
   overrides its text colour here: that component assumes a plain light
   background below a thumbnail, while this overlays an arbitrary photo, so
   it needs the same dark-gradient + light-text treatment GalleryLightbox
   already uses for the same reason. */
.detail-panel__hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px 14px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.detail-panel__hero-caption .image-gallery__caption-text {
  color: rgba(255,255,255,0.9);
}
.detail-panel__hero-caption .image-gallery__credit {
  color: rgba(255,255,255,0.65);
}

/* Prev/next — always visible, not hidden-until-desktop like
   GalleryLightbox's arrows: this is the primary, always-on-screen way to
   browse an activity's media rather than an optional zoom-in overlay, so
   mobile shouldn't lose them in favour of swipe-only. */
.detail-panel__hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.detail-panel__hero-arrow:hover  { background: rgba(255,255,255,0.95); }
.detail-panel__hero-arrow:active { transform: translateY(-50%) scale(0.9); }
.detail-panel__hero-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.detail-panel__hero-arrow--prev { left: 10px; }
.detail-panel__hero-arrow--next { right: 10px; }

.detail-panel__hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.detail-panel__hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.2s;
}
.detail-panel__hero-dot--active {
  background: #fff;
}

/* ── Hero action row: favourite/close + share/copy/print ──────────────────
   2026-08-02: Done/Try another/Timer/Voice record moved out of this row
   into .detail-panel__floating-actions below, as individual floating FABs
   — this row now only holds the quieter utility actions plus favourite/
   close. Kept the left+right bound and flex-wrap anyway even though it's
   far less likely to need it now: costs nothing and still protects
   against a pack enabling both share and print together on a narrow
   phone. ── */
.detail-panel__hero-actions {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.detail-panel__hero-buttons-secondary {
  display: flex;
  gap: 8px;
}

/* Shared shape for share/copy/print — same 36px round style as the hero
   fav/close buttons below. Only sets size/shape; each button keeps its
   own colour rules (.share-btn etc.) untouched. */
.detail-hero-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;
}

/* .detail-close-btn's own shape rule lives in ui.css and predates this row
   having more than two children (fav+close only); it has no flex-shrink of
   its own, so add it here rather than in the shared rule — it only matters
   in this wrapping-row context. */
.detail-panel__hero-actions .detail-close-btn {
  flex: none;
}

.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);
  flex: none;
}

.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); }

/* ── Floating action buttons: Done / Try another / Timer / Voice record ───
   2026-08-02: same visual family as the add-activity FAB
   (.fab-add-activity, ui.css) — round, elevated, floats over the content —
   so the actions that matter while actually doing an activity stay
   prominent instead of sharing a crowded row with the quieter utility
   icons above.

   position:absolute (not fixed) against #detail-panel-inner on purpose —
   see the comment above .detail-panel__floating-actions in
   ActivityDetail.razor for why: the panel's entrance animation leaves a
   non-"none" transform on it after finishing (animation-fill-mode:both in
   the slide-in keyframes), which makes it the containing block for
   position:fixed descendants too, not just absolute ones — so relying on
   fixed here would end up positioned relative to the panel by accident
   rather than on purpose. #detail-panel-inner (.detail-panel) is already
   position:relative in ui.css, and its own padding-bottom (safe-area-
   aware, ~48-72px) is why bottom:12px below lands the cluster a
   comfortable distance above the true bottom edge rather than flush
   against it — no extra math needed on top of padding that already
   existed. Horizontal placement doesn't have the same wrinkle: .detail-panel
   has no left/right padding, so right:12px lines up with the visual edge
   directly. ── */
.detail-panel__floating-actions {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 250;   /* above .detail-overlay (200), below GalleryLightbox (800) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.detail-panel__floating-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Shared shape for Done/Try another specifically — bigger than the hero
   row's icon buttons, matching .fab-add-activity's scale (52px) since
   these are genuine FABs now, not compact row icons. Timer/voice-record
   don't need this: .timer-fab / .voice-fab (ui.css) are already
   self-contained round buttons (44px) with their own background, so they
   drop into .detail-panel__floating-group as-is. */
.detail-fab-icon-btn {
  width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform 0.15s ease;
}
.detail-fab-icon-btn:active { transform: scale(0.92); }

/* ── 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 interactive elements ─────────────────────────────────────── */
@media print {
  /* Done (.btn-done, inside the second floating-group) stays visible so a
     printed activity still shows its checkbox-like state — matches the
     original rule's exact nuance (only ever hid .btn-secondary, never
     Done), just re-scoped: Try another/Timer/Voice record are targeted by
     their own classes rather than "the whole group", since Done now
     shares a group with Try another instead of its own. */
  .detail-panel__floating-group .btn-secondary,
  .detail-panel__floating-group .timer-fab,
  .detail-panel__floating-group .voice-fab-group,
  .detail-panel__hero-buttons-secondary,
  .detail-panel__hero-fav,
  .detail-panel__hero-arrow,
  .detail-panel__hero-dots,
  .detail-panel__next-series,
  .detail-close-btn,
  .speech-btn--icon {
    display: none !important;
  }
}