/* ======================================================================================================
   V7-HEADER
   File:    sdx-stage.css
   Path:    /assets/css/partials/sdx-stage.css
   Version: v3.2.1
   Issued:  2026-04-02
   Author:  Buktika Webdesk (Binka)
   Purpose: Site-wide surface renderer stylesheet. Supersedes sdx-floating-panel.css v1.1.0.
            Owns all visual rules for .sdx-stage, .sdx-stage-backdrop, and all child elements.
            Supports two modes driven by .is-modal class set from JSON config:
              panel mode  — side drawer, slides in from right (default, existing behaviour)
              modal mode  — centred overlay, expands from centre, backdrop visible
            No .page-* scope. No pillar tokens. Token consumer only.
   License: © Buktika, 2026. All rights reserved.
   ISO Reference: ISO 27001, ISO 9241-110
   Source Naming Standard: Buktika v7.1 (ISO Aligned)

   Surface tokens:
     Background: var(--sdx-color-ui-popup-surface) = #123543 — theme-independent deep teal.
     Text:       #ffffff — PERMANENT EXCEPTION. White on #123543. No token maps to this value.
     Border:     rgba(245, 176, 20, 0.28) — amber at 28% opacity.
     Shadow:     rgba(0, 0, 0, 0.55) — PERMANENT EXCEPTION per DOC-03 Amendment v2.2.0 §1.
     Backdrop:   rgba(0, 0, 0, 0.62) — PERMANENT EXCEPTION. Modal overlay. No token.

   Theme invariance:
     This component is ALWAYS dark. No [data-theme="dark"] override block exists
     or is permitted. var(--sdx-color-ui-popup-surface) = #123543 is always-dark by design.
     HARD RULE: Do NOT add any [data-theme="dark"] rule for .sdx-stage.

   !important:
     Zero instances permitted.

   Load order (consuming pages):
     global.css → themes.css → partials/footer.css →
     partials/sdx-stage.css → [page].css → extras

   Spec amendments pending:
     DOC-03 §2 origin table: SDXStage not yet registered.
     www-A §3: /assets/data/stages/ not yet in directory tree.

   ChangeLog:
     v3.2.0 (2026-04-02): Config-driven mobile modal sizing.
       ADDED  CSS variable hooks for mobile modal height, width, max-width,
              min-height, max-height, bottom offset, and border-radius.
       CHANGED  Mobile bottom-sheet geometry is no longer hardcoded only in the
                shared stylesheet. Stage JSON may now tune its mobile sheet
                height so short card sets do not open too low in the viewport.
     v3.1.0 (2026-04-01): Lede margin fix.
       ADDED  .vm-card-lede margin-bottom: 0.5rem in modal context.
              Creates breathing room between description text and Detail → foot divider.
     v3.0.9 (2026-04-01): Card border token + Detail → divider spacing.
       CHANGED  Card border: mama-gold 45% → livingtower-warm-sand 45%, transparent.
                #cdb182 confirmed by owner. Closest token: --sdx-color-livingtower-warm-sand (#c4b89a).
                color-mix at 45% lands within 5% of the confirmed value. No hardcoded hex.
       ADDED    .vm-card-foot padding-top: 1rem. Divider line was sitting flush against
                the body text above. 1rem creates the necessary breathing room.
     v3.0.8 (2026-04-01): Card grid refinements.
       CHANGED  gap: 1.25rem → 1.5rem. More breathing room between cards.
       ADDED    Card border: 1px solid color-mix(mama-gold 45%, transparent). Dark mustard edge.
       ADDED    Card shadow: var(--card-shadow-hover) at rest. Deeper shadow on hover.
       CHANGED  Orphan card: grid-column:1/2 (left) → grid-column:1/-1 + justify-self:center
                + width:calc((100% - 1.5rem) / 2). Lone card is now exactly one column wide,
                centered in the modal. Mobile: reset to full width.
     v3.0.7 (2026-04-01): Modal border formalised to design tokens.
       CHANGED  border: 1.5px amber → 1rem solid color-mix(page-primary 95%, black).
                Thick pillar-coloured frame confirmed by owner. Token-based not hardcoded.
                1rem maps to ~16px at default font size. color-mix darkens page-primary
                slightly for depth without introducing a new colour.
       CHANGED  border-radius: 0.875rem → 1.875rem. Thick border needs generous radius
                to avoid sharp inner corners. Inner effective radius = 1.875 - 1 = 0.875rem
                which matches var(--radius) on the cards inside.
       CHANGED  .sdx-modal-title border-bottom: amber → color-mix(page-primary 30%).
                Title divider now reads from the same pillar language as the outer frame.
     v3.0.6 (2026-04-01): Modal surface refinement + card equalisation.
       ADDED    pointer-events:none to .sdx-stage-backdrop default state.
       CHANGED  .sdx-modal background: color-mix(page-bg 97%, transparent) + backdrop-filter:blur(4px).
                Creates soft atmospheric lifted-sheet feel. Near-opaque, not clinical.
       ADDED    Card equalisation: align-items:stretch on grid. vm-trigger-card flex column
                with height:100% + overflow:hidden (channel bar bleed fix).
                vm-card-inner flex column + vm-card-foot margin-top:auto pushes Detail → down.
       ADDED    overflow:hidden on card — clips channel bar to card border-radius.
     v3.0.5 (2026-04-01): Modal redesigned as light content sheet.
       CHANGED  .sdx-modal background: var(--sdx-color-ui-popup-surface) → var(--page-bg).
                Modal is a content surface, not a tool surface. The panel is the tool.
       CHANGED  .sdx-modal color: #ffffff (hardcoded) → var(--fg). Responds to theme.
       CHANGED  .sdx-modal border: 1px solid rgba amber → 1.5px, slightly more visible.
       CHANGED  .sdx-modal box-shadow: deeper, warmer — lifted sheet feel.
       CHANGED  .sdx-modal-title color: #ffffff → var(--fg).
       CHANGED  .sdx-modal-title border-bottom: amber at 0.15 → 0.4 opacity, 2px weight.
       CHANGED  .sdx-modal-close: uses var(--card) + var(--border) + var(--fg) — themed.
       ADDED    Orphan card rule: last card in odd set stays in left column (grid-column: 1/2).
                Prevents lone card spanning full modal width.
       ADDED    Modal dark mode note: page tokens resolve automatically via themes.css.
     v3.0.4 (2026-04-01): z-index raised above header.
       .sdx-stage: 500 → 950. .sdx-modal: 500 → 950. .sdx-stage-backdrop: 499 → 949.
       Root cause: header nav z-index is 900. Panel at 500 went visually behind the
       header when dragged near the top. Close button was unreachable because the
       header intercepted clicks. 950 sits above header (900) and below utility
       panel (1001).
     v3.0.3 (2026-03-31): Scale replaced with translateY rise animation.
       scale(0.88) → scale(1) animation replaced with translateY(0.75rem) → translateY(0).
       Reason: scale() changes getBoundingClientRect().height by 12%, distorting the
       header-aware centering calculation in sdx-stage.js v3.0.3. translateY does not
       affect layout dimensions. Rise + fade is also more premium/considered for Greta.
       Mobile sheet: opacity set to 1 (no fade), transform-only transition retained.
     v3.0.2 (2026-03-31): Modal layout and animation refinement.
       .sdx-modal CSS added — separate class for dynamically created modal element.
       Modal has own positioning, animation, inner, title, close button, and slot rules.
       .is-modal modifier on .sdx-stage fully removed — no modal CSS touches the panel.
       Panel CSS unchanged from sdx-floating-panel.css v1.1.0 behaviour.
     v2.2.0-test (2026-03-31): .is-modal block removed — test version, superseded by v3.0.0.
     v2.1.0 (2026-03-31): Backdrop CSS cleanup — superseded by v3.0.0.
     v2.0.0 (2026-03-31): RENAMED AND EXTENDED from sdx-floating-panel.css v1.1.0.
   ====================================================================================================== */

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
/* Created dynamically by sdx-stage.js only when a modal opens.               */
/* Removed from the DOM entirely on close.                                     */
/* Never exists in the DOM when no modal is open.                              */

.sdx-stage-backdrop {
  position:       fixed;
  inset:          0;
  z-index:        1049;
  background:     rgba(0, 0, 0, 0.62);   /* permanent exception — modal overlay */
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.22s ease;
}

.sdx-stage-backdrop.is-open {
  opacity:        1;
  pointer-events: auto;
}

/* ── Stage shell — panel mode (default) ───────────────────────────────────── */
/* Slides in from the right. Position controlled by JS on open (top).          */
/* --stage-width set by JS from JSON config. Defaults to 22rem (panel).        */

.sdx-stage {
  --stage-width: 22rem;

  position:       fixed;
  right:          1rem;
  top:            0;             /* overridden by JS on open in panel mode */
  height:         auto;
  max-height:     80vh;
  width:          var(--stage-width);
  max-width:      85vw;
  z-index:        1050;
  overflow-y:     auto;
  padding:        0;
  margin:         0;

  background:     var(--sdx-color-ui-popup-surface);
  color:          #ffffff;       /* permanent exception — white on #123543 */
  border:         1px solid rgba(245, 176, 20, 0.28);
  border-radius:  0.75rem;
  box-shadow:     -0.25rem 0 2rem rgba(0, 0, 0, 0.55);   /* permanent exception */

  pointer-events: none;
  transform:      translateX(110%);
  visibility:     hidden;
  transition:     transform 0.25s ease, visibility 0s ease 0.25s;
}

/* Panel mode open state */
.sdx-stage.is-open:not(.is-modal) {
  transform:      translateX(0);
  visibility:     visible;
  pointer-events: auto;
  transition:     transform 0.25s ease, visibility 0s ease 0s;
}

/* ── Inner wrapper ────────────────────────────────────────────────────────── */
/* Drag handle in panel mode. Not draggable in modal mode (cursor:default).    */

.sdx-stage-inner {
  position:       relative;
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  cursor:         move;   /* panel mode drag signal */
  user-select:    none;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.sdx-stage-title {
  font-size:      var(--body);
  font-weight:    700;
  color:          #ffffff;   /* permanent exception */
  margin:         0;
  padding-right:  2.5rem;
  padding-bottom: 1rem;
  border-bottom:  1px solid rgba(245, 176, 20, 0.15);
}

/* ── Close button ─────────────────────────────────────────────────────────── */

.sdx-stage-close {
  position:        absolute;
  top:             0.9rem;
  right:           0.95rem;
  background:      rgba(255, 255, 255, 0.94);
  border:          1px solid rgba(18, 53, 67, 0.12);
  color:           transparent;
  font-size:       0;
  line-height:     1;
  cursor:          pointer;   /* direct class rule — overrides inherited cursor:move */
  padding:         0;
  width:           2rem;
  height:          2rem;
  border-radius:   999px;
  box-shadow:      0 0.25rem 0.625rem rgba(0, 0, 0, 0.18);   /* permanent exception */
  transition:      background-color 0.15s ease, box-shadow 0.15s ease;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sdx-stage-close::before,
.sdx-stage-close::after {
  content:          "";
  position:         absolute;
  width:            0.95rem;
  height:           2px;
  border-radius:    999px;
  background:       #123543;
  left:             50%;
  top:              50%;
  transform-origin: center;
}

.sdx-stage-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sdx-stage-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sdx-stage-close:hover {
  background:  #ffffff;
  box-shadow:  0 0.375rem 0.875rem rgba(0, 0, 0, 0.24);   /* permanent exception */
}

.sdx-stage-close:focus-visible {
  outline:        2px solid rgba(245, 176, 20, 0.6);
  outline-offset: 2px;
}

/* ── Content slot ─────────────────────────────────────────────────────────── */

.sdx-stage-slot {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Dynamic plugin slot zone — wraps each named slot's rendered HTML */
.sdx-stage-slot-zone {
  width: 100%;
}

/* ── Accordion sections (partial plugin pattern) ──────────────────────────── */

.sdx-stage-section {
  border-top:  1px solid rgba(245, 176, 20, 0.12);
  padding-top: 1rem;
}

.sdx-stage-section:first-of-type {
  border-top:  none;
  padding-top: 0;
}

.sdx-stage-section > summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  cursor:          pointer;
  font-weight:     700;
  font-size:       var(--body);
  color:           rgba(245, 176, 20, 0.9);
  list-style:      none;
  padding:         0.625rem 0;
  user-select:     none;
}

.sdx-stage-section > summary::-webkit-details-marker {
  display: none;
}

/* + / - indicator — ASCII only. Unicode minus encodes incorrectly in some
   editors producing garbled output. Confirmed root cause documented in
   sdx-floating-panel.css v1.0.0. */
.sdx-stage-section > summary::after {
  content:     "+";
  font-weight: 800;
  font-size:   1rem;
  flex-shrink: 0;
}

.sdx-stage-section[open] > summary::after {
  content: "-";
}

/* ── Sub-heading ──────────────────────────────────────────────────────────── */

.sdx-stage-subhead {
  font-size:   var(--body);
  font-weight: 700;
  color:       #ffffff;   /* permanent exception */
  margin:      0.75rem 0 0.375rem;
}

/* ── Lists ────────────────────────────────────────────────────────────────── */

.sdx-stage-steps,
.sdx-stage-list {
  margin:       0.5rem 0 0;
  padding-left: 1.5rem;
  color:        #ffffff;   /* permanent exception */
}

.sdx-stage-steps li,
.sdx-stage-list li {
  margin-bottom: 0.5rem;
  font-size:     var(--body);
  line-height:   1.5;
}

.sdx-stage-list strong {
  color: rgba(245, 176, 20, 0.95);
}

/* ── Prose paragraphs ─────────────────────────────────────────────────────── */

.sdx-stage-slot p,
.sdx-stage-slot-para {
  color:       #ffffff;   /* permanent exception */
  font-size:   var(--body);
  line-height: 1.55;
  margin:      0.5rem 0 0;
}

/* ── Footer row in content partials ──────────────────────────────────────── */

.sdx-stage-footer {
  margin-top: 0.75rem;
}

.sdx-stage-link {
  color:                 rgba(245, 176, 20, 0.9);
  font-size:             var(--small);
  text-decoration:       underline;
  text-underline-offset: 0.125rem;
}

.sdx-stage-link:hover {
  color: rgba(245, 176, 20, 1);
}

/* ── Modal surface (.sdx-modal) ───────────────────────────────────────────── */
/* Created dynamically by sdx-stage.js on modal open. Removed on close.       */
/* Never exists in the DOM at boot — zero compositor layer risk to MapLibre.   */
/* Separate element and separate class from .sdx-stage (panel). No sharing.   */
/*                                                                              */
/* Surface intent: content sheet, not tool surface.                            */
/* The panel (.sdx-stage) is a tool — dark, always-dark, #123543.              */
/* The modal carries content cards — it must feel like a sheet of paper        */
/* lifted from the globe. Light background. Dark text. Warm, not clinical.     */
/* The amber border is the single thread tying it to the BKT language.         */

.sdx-modal {
  --modal-width: 72rem;   /* overridden by JS from config.width */

  position:       fixed;
  left:           50%;
  top:            50%;
  width:          var(--modal-width);
  max-width:      92vw;
  max-height:     90vh;
  z-index:        1050;
  overflow-y:     auto;

  /* Soft atmospheric surface — warm, lifted from the globe.
     color-mix gives us a near-opaque page-bg with a breath of transparency.
     backdrop-filter blurs the overlay behind, reinforcing the lifted-sheet feel.
     The globe is visible around the modal edges through the backdrop. */
  background:     color-mix(in srgb, var(--page-bg) 97%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:          var(--fg);
  border:         1rem solid color-mix(in srgb, var(--page-primary) 95%, black);
  border-radius:  1.875rem;
  box-shadow:     0 2rem 5rem rgba(0, 0, 0, 0.5),
                  0 0 0 1px rgba(245, 176, 20, 0.08);   /* permanent exception */

  transform:      translate(-50%, -50%) translateY(0.75rem);
  opacity:        0;
  transition:     transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.65s ease;
}

.sdx-modal.is-open {
  transform: translate(-50%, -50%) translateY(0);
  opacity:   1;
}

.sdx-modal-inner {
  position:       relative;
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.sdx-modal-title {
  font-size:      var(--h3);
  font-weight:    700;
  color:          var(--fg);
  margin:         0;
  padding-right:  2.5rem;
  padding-bottom: 1rem;
  border-bottom:  2px solid color-mix(in srgb, var(--page-primary) 30%, transparent);
}

.sdx-modal-close {
  position:        absolute;
  top:             0.9rem;
  right:           0.95rem;
  background:      var(--card);
  border:          1px solid var(--border);
  color:           transparent;
  font-size:       0;
  line-height:     1;
  cursor:          pointer;
  padding:         0;
  width:           2rem;
  height:          2rem;
  border-radius:   999px;
  box-shadow:      0 0.25rem 0.625rem rgba(0, 0, 0, 0.12);   /* permanent exception */
  transition:      background-color 0.15s ease, box-shadow 0.15s ease;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sdx-modal-close::before,
.sdx-modal-close::after {
  content:          "";
  position:         absolute;
  width:            0.95rem;
  height:           2px;
  border-radius:    999px;
  background:       var(--fg);
  left:             50%;
  top:              50%;
  transform-origin: center;
}

.sdx-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sdx-modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.sdx-modal-close:hover {
  background: var(--card);
  box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.18);   /* permanent exception */
}

.sdx-modal-close:focus-visible {
  outline:        2px solid rgba(245, 176, 20, 0.6);
  outline-offset: 2px;
}

.sdx-modal-slot {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Slot zones rendered by dynamic plugin */
.sdx-modal-slot .sdx-stage-slot-zone {
  width: 100%;
}

/* Trigger card grid — 2-column layout inside modal. */
.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   1.5rem;
  padding:               0.25rem 0;
  align-items:           stretch;
}

/* Card equalisation — cards fill their grid cell vertically. */
.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > a.vm-trigger-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;   /* clips channel bar to card border-radius */
  border:         1px solid color-mix(in srgb, var(--sdx-color-livingtower-warm-sand) 45%, transparent);
  box-shadow:     var(--card-shadow-hover);
}

.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > a.vm-trigger-card:hover {
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16), 0 4px 8px rgba(15, 23, 42, 0.10);   /* permanent exception */
}

/* Push Detail → to the bottom of every card */
.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > a.vm-trigger-card .vm-card-inner {
  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
}

.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > a.vm-trigger-card .vm-card-lede {
  margin-bottom: 0.5rem;
}

.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > a.vm-trigger-card .vm-card-foot {
  margin-top:  auto;
  padding-top: 1rem;   /* space between body text and the Detail → divider line */
}

/* Orphan card — centered at single-column width.
   grid-column: 1/-1 spans the full row. justify-self + width
   constrain it to exactly one column's width, centered. */
.sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > *:nth-child(odd):last-child {
  grid-column:  1 / -1;
  justify-self: center;
  width:        calc((100% - 1.5rem) / 2);
}

/* Mobile: full-width sheet sliding up from bottom */
@media (max-width: 48rem) {
  .sdx-modal {
    left:          0;
    top:           auto;
    bottom:        var(--modal-mobile-bottom, 0);
    right:         0;
    width:         var(--modal-mobile-width, 100%);
    height:        var(--modal-mobile-height, auto);
    max-width:     var(--modal-mobile-max-width, 100%);
    min-height:    var(--modal-mobile-min-height, 0);
    max-height:    var(--modal-mobile-max-height, 88vh);
    border-radius: var(--modal-mobile-border-radius, 1rem 1rem 0 0);
    transform:     translateY(100%);
    opacity:       1;
    transition:    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sdx-modal.is-open {
    transform: translateY(0);
  }

  /* Cards collapse to single column on mobile */
  .sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] {
    grid-template-columns: 1fr;
  }

  /* Orphan rule not needed at single column — reset centering */
  .sdx-modal-slot .sdx-stage-slot-zone[data-slot="cards"] > *:nth-child(odd):last-child {
    grid-column:  1 / -1;
    justify-self: stretch;
    width:        100%;
  }
}

/* ── Modal dark mode ──────────────────────────────────────────────────────── */
/* Modal uses page tokens (var(--page-bg), var(--fg), var(--card), var(--border))
   which already resolve correctly in dark mode via themes.css alias layer.
   No explicit dark mode block needed — tokens handle it. */

/* ── Theme-invariant guard ────────────────────────────────────────────────── */
/* HARD RULE: No [data-theme="dark"] block may follow this comment.            */
/* var(--sdx-color-ui-popup-surface) = #123543 is always-dark by design.       */
/* The stage (panel) does not respond to the page theme toggle.                */
/* The modal uses page tokens and responds to theme automatically.             */