/* ==========================================================================
   Constellation Stack + Format Preference — luminous-branching-compass S2.
   --------------------------------------------------------------------------
   Three concerns share this file because they ship together:

     1. Constellation/supporting-media format picker (FFAFormatPref)
        — 2-choice grid (List / Carousel). Renders inline in Settings AND
        inside the popup-mode Control Panel surface.

     2. Constellation drill-stack BACK-SLOT popup (ConstellationStack)
        — 2x2 grid: Back, Back to origin, Quit, Done.

     3. Format-driven layout swaps for the two consumer surfaces:
        - Mobile constellation connections list (.se-overlay.se-fmt-carousel)
        - Play Story scaffold middle/bottom panel (.mpl-carousel-wrap.mpl-fmt-list)

   The picker + back-slot styles deliberately mirror the FFANarrator popup
   visual language so the Control Panel popup-mode surface feels consistent
   across all consumer slots.
   ========================================================================== */

/* ── Format picker (2-choice) ─────────────────────────────────────────── */

.ffa-fmt-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ffa-fmt-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  min-height: 72px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.ffa-fmt-choice:hover         { border-color: #c4b5fd; }
.ffa-fmt-choice:active        { transform: scale(0.98); }
.ffa-fmt-choice:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ffa-fmt-choice-title    { font-size: calc(15px * var(--type-scale, 1)); font-weight: 700; letter-spacing: 0.01em; }
.ffa-fmt-choice-subtitle { font-size: calc(12px * var(--type-scale, 1)); color: #6b7280; line-height: 1.35; }
.ffa-fmt-choice-selected {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
.ffa-fmt-choice-selected .ffa-fmt-choice-title { color: #5b21b6; }

/* Settings row layout — mirrors .ffa-narr-settings-row */
.ffa-fmt-settings-row {
  margin: 1rem 0 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
}
.ffa-fmt-settings-row h3 {
  margin: 0 0 0.25rem 0;
  font-size: calc(16px * var(--type-scale, 1)); font-weight: 700; color: #1f2937;
}
.ffa-fmt-settings-row p.ffa-fmt-settings-hint {
  margin: 0 0 0.75rem 0;
  font-size: calc(13px * var(--type-scale, 1)); color: #6b7280; line-height: 1.4;
}
.ffa-fmt-settings-row .ffa-fmt-popup-grid { max-width: 480px; }

/* ── Stack back-slot popup ──────────────────────────────────────────── */

.ffa-stack-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4338CA;
}
.ffa-stack-back-subtitle {
  margin: 0 0 14px 0;
  font-size: calc(13px * var(--type-scale, 1));
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}
.ffa-stack-back-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ffa-stack-back-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  min-height: 72px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.ffa-stack-back-choice:hover         { border-color: #c4b5fd; }
.ffa-stack-back-choice:active        { transform: scale(0.98); }
.ffa-stack-back-choice:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ffa-stack-back-choice-title    { font-size: calc(15px * var(--type-scale, 1)); font-weight: 700; letter-spacing: 0.01em; }
.ffa-stack-back-choice-subtitle { font-size: calc(12px * var(--type-scale, 1)); color: #6b7280; line-height: 1.35; }
/* "Done" = primary action — give it the gradient treatment so it reads as the
   "I'm finished here" affordance vs "Quit" which is the bail-out. */
.ffa-stack-back-choice[data-stack-action="done"] {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
.ffa-stack-back-choice[data-stack-action="done"] .ffa-stack-back-choice-title {
  color: #5b21b6;
}

/* ── Mobile constellation: list (default) vs carousel layout ──
   The .se-fmt-list and .se-fmt-carousel classes are toggled on .se-overlay
   by show-edges-modal.js :: sesApplyFormatPref(). Only the connections list
   layout differs — anchor card and toolbar are unchanged. Mobile-only.
   ----------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* List mode is the default — no overrides needed; the existing
     .se-drawer-list rules already produce a vertical scroll list. */

  /* Carousel mode: flip the connections list to horizontal scroll-snap.
     Each .se-list-item becomes a full-width card that snaps one-at-a-time. */
  .se-overlay.se-fmt-carousel .se-drawer-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;   /* snap to the gutter, not the glass (Greg G-163) */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 12px;
  }
  .se-overlay.se-fmt-carousel .se-drawer-list::-webkit-scrollbar {
    display: none;
  }
  .se-overlay.se-fmt-carousel .se-list-item {
    flex: 0 0 calc(100% - 24px);
    max-width: calc(100% - 24px);
    scroll-snap-align: start;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border-bottom: none;
    background: rgba(28, 28, 48, 0.65);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .se-overlay.se-fmt-carousel .se-list-thumb-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .se-overlay.se-fmt-carousel .se-list-thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
  .se-overlay.se-fmt-carousel .se-list-info { width: 100%; }
  .se-overlay.se-fmt-carousel .se-list-title { white-space: normal; }
  .se-overlay.se-fmt-carousel .se-list-strength {
    width: 100%;
  }
}

/* ── Play Story scaffold supporting media: list mode ──
   The .mpl-fmt-list class is toggled on .mpl-carousel-wrap by
   mobile-carousel.js :: _applyFormat(). Default (no class or
   .mpl-fmt-carousel) preserves the existing horizontal carousel.
   ----------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mpl-carousel-wrap.mpl-fmt-list {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .mpl-carousel-wrap.mpl-fmt-list > .media-item,
  .mpl-carousel-wrap.mpl-fmt-list > .mpl-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 64px;
    min-width: 0;
    scroll-snap-align: start;
    border-radius: 10px;
    background: #1a1a1e;
  }
  .mpl-carousel-wrap.mpl-fmt-list > .mpl-card img,
  .mpl-carousel-wrap.mpl-fmt-list > .mpl-card video {
    object-fit: cover;
  }
  .mpl-carousel-wrap.mpl-fmt-list > .mpl-card .mpl-card-badge {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 12px;
  }
}

/* ── Desktop fallback: format picker + settings row remain visible.
   Stack popup-mode is mobile-only (toolkit short-circuits desktop) so the
   back-slot popup never shows on desktop — but the styles above are scoped
   to .ffa-stack-back-* selectors so they have no desktop side effects. ── */

/* ── Constellation MCP popups (qpk S3 D1/D2) ─────────────────────────────
   Shared visual language for the three mobile-only popups that surface out
   of the Constellation MCP slots: Zoom (resolution slider), Filters
   (predicate color toggles), Thread (shared-person selector). Subtitle +
   card styles mirror the FFANarrator popup family so Control Panel popups
   feel consistent across consumers.
   --------------------------------------------------------------------- */

.ses-popup-subtitle {
    margin: 0 0 14px 0;
    font-size: calc(13px * var(--type-scale, 1));
    color: #6b7280;
    line-height: 1.4;
    text-align: center;
}

/* Zoom popup — single slider row + visible/total count. */
.ses-zoom-popup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px 10px 2px;
}
.ses-zoom-popup-slider {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: #7c3aed;
}
.ses-zoom-popup-value {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 600;
    color: #5b21b6;
}
.ses-zoom-popup-count {
    font-size: calc(13px * var(--type-scale, 1));
    color: #6b7280;
    text-align: center;
}
.ses-zoom-popup-count .ses-zoom-popup-visible {
    font-weight: 700;
    color: #1f2937;
}

/* Filters popup — predicate color chip grid. Two columns on narrow, wraps
   gracefully when many predicates present. */
.ses-filter-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.ses-filter-popup-chip {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: calc(13px * var(--type-scale, 1));
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.ses-filter-popup-chip:active { transform: scale(0.98); }
.ses-filter-popup-chip:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ses-filter-popup-chip.active {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    color: #5b21b6;
}
.ses-filter-popup-chip:not(.active) { opacity: 0.55; }
.ses-filter-popup-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.ses-filter-popup-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* Thread popup — scrollable person list, single column. */
.ses-thread-popup-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ses-thread-popup-item {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.ses-thread-popup-item:active { transform: scale(0.99); }
.ses-thread-popup-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ses-thread-popup-item.active {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    color: #5b21b6;
}
.ses-thread-popup-count {
    flex: 0 0 auto;
    font-size: calc(12px * var(--type-scale, 1));
    font-weight: 700;
    color: #6b7280;
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.ses-thread-popup-item.active .ses-thread-popup-count {
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.18);
}

/* Mobile hides the retired desktop-only top-bar controls. The drawer list
   button is unused on mobile (drawer is forced open by sesRenderMobileList).
   Capture + maximize + the toolbar spacer relocate to MCP slots; hide here
   so the top bar stays compact. Back + close + the two content rows
   (.se-toolbar-controls/.se-toolbar-threads/.se-toolbar-analyze) stay. */
@media (max-width: 767px) {
    .se-overlay.se-mobile .se-toolbar-spacer,
    .se-overlay.se-mobile .se-toolbar-capture,
    .se-overlay.se-mobile .se-toolbar-list-btn,
    .se-overlay.se-mobile .se-toolbar-maximize { display: none !important; }
}