/* CAMPAIGN P-HOME (modal worker, corrected by owner-requested follow-up
   "Correct the Public Homepage Modal Implementation"): makes the existing
   .tab-window tab mechanism (About Us / Terms of Service / Go Premium /
   My Account / Contact / file previews) behave like a real dimmed,
   top-layer, CENTERED modal dialog rather than a full-height, right-edge
   sliding drawer.

   CORRECTION NOTE: the original version of this file kept style.css's
   base .tab-window geometry (position:fixed; right:0; top:0; bottom:0;
   min-width:750px when .active) and only added a backdrop behind it --
   visually this rendered as a large white panel covering most of the
   screen's height, not a contained floating dialog, even though the
   homepage was technically still visible (and dimmed) to its left. The
   owner correctly rejected this as "a large white side drawer that
   covers most of the screen, rather than a floating modal." This
   section now fully overrides style.css's .tab-window/.tab-window.active
   positioning/sizing rules (same selector, same specificity, this file
   loads after style.css so these declarations win without !important)
   to produce a true centered, constrained modal box instead. */

/* Backdrop: dims (and optionally blurs) the homepage behind the dialog.
   Sits just under .tab-window.active. The full homepage -- including the
   upload card and background image -- remains visible and unmoved behind
   this backdrop; nothing in this file repositions or clips any homepage
   element other than .tab-window itself. */
.tab-window-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(10, 10, 10, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tab-window-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .tab-window-backdrop.active {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* The modal box itself: centered via fixed positioning + transform,
   constrained to ~760px max width and 85vh max height, with a 16px
   viewport margin on narrow screens so it never touches the edges.
   Overrides style.css's right:0/top:0/bottom:0/min-width:750px drawer
   geometry entirely. display:flex + flex-direction:column (instead of
   style.css's display:flex + justify-content:center, which centered
   .tab children horizontally inside a full-height band) lets the inner
   .tab panel become the one scrolling region, sized to fill whatever
   height remains below the close-btn/hr header area. */
.tab-window {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.97);
  width: calc(100% - 32px);
  max-width: 760px;
  min-width: 0;
  max-height: 85vh;
  border-left: none;
  border-radius: 14px;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.tab-window.active {
  width: calc(100% - 32px);
  min-width: 0;
  max-width: 760px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.45);
}

/* Narrower viewport margin on small screens, still centered, still with
   a clear gap from the viewport edge (directive: "appropriate viewport
   margins" on mobile/tablet). Also cancels style.css's own <=768px rule
   (min-width/max-width:100%, margin-top:50px), which was written for the
   old edge-to-edge drawer and would otherwise fight this centered layout. */
@media (max-width: 768px) {
  .tab-window,
  .tab-window.active {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-width: 0;
    margin-top: 0;
    max-height: 85vh;
  }
}

/* The .tab panel (close-btn/hr stay fixed at the top via their own
   absolute positioning, unaffected) is the actual scroll container:
   long page content scrolls INSIDE the modal, never the homepage behind
   it. flex:1 lets it fill the remaining height under the ~35px header
   strip up to the modal's own max-height, min-height:0 is required for
   a flex child to actually become scrollable instead of overflowing its
   flex container. */
.tab-window .tab {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 56px 32px 28px 32px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-window .tab.large,
.tab-window .tab.extra-large {
  max-width: none;
}
@media (max-width: 768px) {
  .tab-window .tab {
    padding: 52px 20px 20px 20px;
  }
}

/* Prevent background scrolling while the modal is open (toggled by
   script.js's Tabs.open()/close() alongside the existing inert toggle --
   inert alone does not stop wheel/touch scrolling of a still-visible,
   non-inert document). */
html.phome-modal-open,
body.phome-modal-open {
  overflow: hidden;
  height: 100%;
}

/* Visible, high-contrast focus ring inside the dialog for keyboard users,
   since the focus trap (script.js) relies on this being obvious. */
.tab-window a:focus-visible,
.tab-window button:focus-visible,
.tab-window input:focus-visible,
.tab-window textarea:focus-visible,
.tab-window select:focus-visible,
.tab-window [tabindex]:focus-visible {
  outline: 3px solid #2e63d6;
  outline-offset: 2px;
}

/* .tab-window itself is given tabindex="-1" (static markup) so it can receive
   programmatic focus on open without being in the normal Tab order; suppress
   the default focus ring browsers would otherwise draw on the whole panel. */
.tab-window:focus {
  outline: none;
}

/* Elements made inert while the dialog is open (see Tabs.open in script.js)
   should never show as interactive/focusable to sighted mouse users either. */
[inert] {
  cursor: default;
}

/* Close button sits above the now-scrollable .tab content (not merely
   inert, but genuinely above the content with correct paint order --
   confirmed via stress-testing with injected long content); give it a
   solid background so scrolled text doesn't visually crowd it, matching
   a common modal-close convention. */
.tab-window .close-btn {
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}