/* =========================================================
   FILE: /css/legacy/fgh.flyout.css
   FGH v2 — FLYOUT VIEWER
   PHASE 3 NORMALIZATION (SEMANTIC-FIRST)

   Change:
   - Semantic .ui-* selectors are now PRIMARY owners.
   - Legacy selectors retained as passive aliases.
   - No behavior or visual changes.
========================================================= */

/* =========================================================
   FLYOUT SHELL
   (viewport stage sizing)
   ========================================================= */

.ui-flyout-shell,
.flyout-shell {
  /* IMPORTANT:
     Do NOT force viewport height here.
     Flyout window height is owned by content + resize logic. */
  /* min-height: 100vh; */

  display: flex;
  justify-content: center;

  /* IMPORTANT:
     Prevent cross-axis stretch from forcing panel to viewport height. */
  align-items: flex-start;
}

/* =========================================================
   FLYOUT CONTENT AREA
========================================================= */

.ui-flyout-area,
#flyout-area {
  width: 100%;
  max-width: 900px;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.ui-flyout-close,
#flyout-close {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #5a3418;
  opacity: 0.6;
}

.ui-flyout-close:hover,
#flyout-close:hover {
  opacity: 1;
}

/* =========================================================
   FLYOUT PANEL — establish block formatting context
   Ensures parchment sizes AFTER content height resolves
   ========================================================= */

.ui-flyout-area.panel-post {
  display: block; /* break flex-item sizing behavior */
  align-self: stretch; /* keep width behavior inside flex shell */
}

/* =========================================================
   FLYOUT PANEL — VIEWPORT BREATHING ROOM
   ========================================================= */
.panel-flyout {
  position: relative;
}

/* =========================================================
   FLYOUT — PARCHMENT BREATHING ROOM
   (flyout owns its own inset)
   ========================================================= */

.panel-flyout.panel-surface-owner .fgh-parchment-surface {
  top: 2rem;
  bottom: 2rem;
  left: 0;
  right: 0;

  height: auto; /* allow slices to resolve correctly */
}

/* =========================================================
   FLYOUT — RAIL OFFSET FROM TOP SLICE
   (reading plane sits below parchment edge)
   ========================================================= */

.panel-flyout.panel-surface-owner .fgh-content-rail {
  margin-top: 2rem;
  margin-bottom: 2rem;

  padding-left: 2rem;
  padding-right: 2rem;
}