/* ============================================================
   STORMY TITANS™ — GLOBAL CONTENT BOUNDARY — 002-R10

   One horizontal geometry for the app:
   - full-width visual/background canvas
   - one centered content / interaction boundary
   - hamburger aligns to the content's left edge
   - You avatar aligns to the content's right edge
   - main content, dock controls and Lake Reveals share those edges
   ============================================================ */

:root{
  --st-global-content-max:1080px;
  --st-global-desktop-inset:32px;
  --st-global-tablet-inset:28px;
  --st-global-mobile-inset:22px;
  --st-global-current-inset:var(--st-global-desktop-inset);

  /* This is the actual left/right content boundary measured from viewport edges. */
  --st-global-edge:max(
    var(--st-global-current-inset),
    calc((100vw - var(--st-global-content-max)) / 2)
  );
}

/* Canonical shared content / interaction zone. */
.st-global-content-zone{
  box-sizing:border-box !important;
  width:auto !important;
  max-width:none !important;
  margin-left:var(--st-global-edge) !important;
  margin-right:var(--st-global-edge) !important;
  min-width:0 !important;
}

/* ------------------------------------------------------------
   HEADER
   Background remains full bleed. Controls use the global boundary.
   ------------------------------------------------------------ */
.stormy-head{
  width:100% !important;
}

.stormy-head-inner{
  /* Override the older independent Super Safe width calculation. */
  width:auto !important;
  max-width:none !important;
  margin-left:var(--st-global-edge) !important;
  margin-right:var(--st-global-edge) !important;
}

/* The outer edges of the actual controls become the canonical edges. */
.stormy-head-inner > .food-trigger{
  justify-self:start !important;
  margin-left:0 !important;
  transform:none !important;
}

.stormy-head-inner > .avatar-button{
  justify-self:end !important;
  margin-right:0 !important;
  transform:none !important;
}

/* ------------------------------------------------------------
   MAIN APP CONTENT
   The page body now uses the exact same edges as the header.
   This intentionally overrides app.css's independent .shell width.
   ------------------------------------------------------------ */
main.shell.st-global-content-zone{
  width:auto !important;
  max-width:none !important;
  margin-left:var(--st-global-edge) !important;
  margin-right:var(--st-global-edge) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Reusable opt-in for future content/action surfaces. */
.st-super-safe-actions,
.st-global-actions{
  box-sizing:border-box;
  margin-left:var(--st-global-edge) !important;
  margin-right:var(--st-global-edge) !important;
}

/* ------------------------------------------------------------
   LAKE REVEALS
   Options starts on the same left boundary as the hamburger/content.
   You ends on the same right boundary as the avatar/content.
   ------------------------------------------------------------ */
.lake-options{
  left:var(--st-global-edge) !important;
  right:auto !important;
  width:min(430px, calc(100vw - (2 * var(--st-global-edge)))) !important;
  max-width:calc(100vw - (2 * var(--st-global-edge))) !important;
}

.lake-you{
  right:var(--st-global-edge) !important;
  left:auto !important;
  width:min(390px, calc(100vw - (2 * var(--st-global-edge)))) !important;
  max-width:calc(100vw - (2 * var(--st-global-edge))) !important;
}

/* Training remains centered, but cannot escape the shared content boundary. */
.lake-training{
  max-width:calc(100vw - (2 * var(--st-global-edge))) !important;
}

/* ------------------------------------------------------------
   MOBILE DOCK
   Dock color/background remains edge-to-edge. Clickable items line up
   with the same content boundary as header and page body.
   ------------------------------------------------------------ */
.mobile-dock{
  width:100% !important;
}

.mobile-dock-inner{
  width:auto !important;
  max-width:none !important;
  margin-left:var(--st-global-edge) !important;
  margin-right:var(--st-global-edge) !important;
}

/* ------------------------------------------------------------
   FOOTER
   Footer background can remain full width; its actual content aligns.
   ------------------------------------------------------------ */
.site-foot{
  box-sizing:border-box;
}

.site-foot-inner{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ------------------------------------------------------------
   RESPONSIVE SUPER SAFE GEOMETRY
   Hardware safe areas can only make the boundary safer, never narrower.
   ------------------------------------------------------------ */
@media (max-width:900px){
  :root{
    --st-global-current-inset:max(
      var(--st-global-tablet-inset),
      env(safe-area-inset-left),
      env(safe-area-inset-right)
    );
  }
}

@media (max-width:700px){
  :root{
    --st-global-current-inset:max(
      var(--st-global-mobile-inset),
      env(safe-area-inset-left),
      env(safe-area-inset-right)
    );
  }

  /* Keep five header controls workable inside the narrower common zone. */
  .stormy-head-inner{
    grid-template-columns:46px minmax(58px,1fr) 42px minmax(58px,1fr) 46px !important;
    gap:2px !important;
  }
}

/* Landscape iPhone: hardware/case edge becomes especially important. */
@media (max-height:500px) and (orientation:landscape){
  :root{
    --st-global-current-inset:max(
      24px,
      env(safe-area-inset-left),
      env(safe-area-inset-right)
    );
  }
}