/* ============================================================
   STORMY TITANS™ — SUPER SAFE ZONE — 002-R7

   Full name:
   “Super Safe, iPhone Safe, Fat-Fingers,
    iPhone-in-a-Rugged-Case Safe Zone”

   PRINCIPLE
   Full-width visual canvas; narrower interaction canvas.

   The page/header/dock backgrounds may still run edge-to-edge.
   Important controls sit farther inward for:
   - iPhone hardware safe areas / Dynamic Island / camera housing
   - landscape safe-area intrusions
   - rugged cases that make edges feel thicker
   - thumb/finger occlusion near edges
   - fat-finger tolerance
   - calmer desktop composition on very wide screens
   ============================================================ */

:root{
  --st-super-safe-mobile-inset: 22px;
  --st-super-safe-tablet-inset: 32px;
  --st-super-safe-desktop-inset: 48px;
  --st-super-safe-max-width: 1180px;
}

/* Reusable inner interaction canvas. */
.st-super-safe-zone{
  box-sizing:border-box;
  width:min(
    calc(
      100% -
      max(var(--st-super-safe-desktop-inset), env(safe-area-inset-left)) -
      max(var(--st-super-safe-desktop-inset), env(safe-area-inset-right))
    ),
    var(--st-super-safe-max-width)
  );
  margin-inline:auto;
  min-width:0;
}

/* ------------------------------------------------------------
   HEADER
   Keep the blue bar full width; move all five active controls in.
   ------------------------------------------------------------ */
.stormy-head{
  display:block !important;
  width:100%;
  box-sizing:border-box;
  padding-inline:0 !important;
}

.stormy-head-inner{
  height:100%;
  display:grid;
  grid-template-columns:56px minmax(82px,1fr) 56px minmax(82px,1fr) 56px;
  align-items:center;
  gap:4px;
}

/* ------------------------------------------------------------
   MOBILE DOCK
   Keep dock background edge-to-edge; move tappable items inward.
   ------------------------------------------------------------ */
.mobile-dock{
  box-sizing:border-box;
  padding-left:0 !important;
  padding-right:0 !important;
}

.mobile-dock-inner{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:0;
}

.mobile-dock-inner > a{
  min-width:0;
}

/* ------------------------------------------------------------
   LAKE REVEALS
   The menus themselves stay inside the same safe horizontal region.
   This complements the prior visible-viewport vertical safety fix.
   ------------------------------------------------------------ */
@media (max-width:700px){
  :root{
    --st-super-safe-current-inset: var(--st-super-safe-mobile-inset);
  }

  .st-super-safe-zone{
    width:auto;
    margin-left:max(var(--st-super-safe-current-inset), env(safe-area-inset-left));
    margin-right:max(var(--st-super-safe-current-inset), env(safe-area-inset-right));
  }

  .stormy-head-inner{
    grid-template-columns:44px minmax(64px,1fr) 44px minmax(64px,1fr) 46px;
    gap:2px;
  }

  /* Lake Reveal panes can still be large, but their outer edges do not
     sit beneath the physical/case edge of the phone. */
  .lake-options{
    left:max(var(--st-super-safe-current-inset), env(safe-area-inset-left)) !important;
    width:min(
      390px,
      calc(
        100vw -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-left)) -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-right))
      )
    ) !important;
  }

  .lake-you{
    right:max(var(--st-super-safe-current-inset), env(safe-area-inset-right)) !important;
    width:min(
      370px,
      calc(
        100vw -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-left)) -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-right))
      )
    ) !important;
  }

  .lake-training{
    width:min(
      350px,
      calc(
        100vw -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-left)) -
        max(var(--st-super-safe-current-inset), env(safe-area-inset-right))
      )
    ) !important;
  }

  /* Reusable opt-in utility for any page-level button/tile row that
     later needs the same edge protection without narrowing its panel. */
  .st-super-safe-actions{
    margin-left:max(var(--st-super-safe-current-inset), env(safe-area-inset-left));
    margin-right:max(var(--st-super-safe-current-inset), env(safe-area-inset-right));
  }
}

@media (min-width:701px) and (max-width:1100px){
  :root{
    --st-super-safe-current-inset: var(--st-super-safe-tablet-inset);
  }

  .st-super-safe-zone{
    width:calc(100% - (var(--st-super-safe-current-inset) * 2));
    max-width:var(--st-super-safe-max-width);
  }
}

@media (min-width:1101px){
  :root{
    --st-super-safe-current-inset: var(--st-super-safe-desktop-inset);
  }

  .st-super-safe-zone{
    width:min(
      calc(100% - (var(--st-super-safe-current-inset) * 2)),
      var(--st-super-safe-max-width)
    );
  }
}

/* ============================================================
   R7-L1 — LEFT-SIDE ALIGNMENT REFINEMENT
   Hamburger's visible left edge and Options Lake Reveal share
   one canonical left boundary. Right/You side intentionally
   unchanged for the next refinement pass.
   ============================================================ */
:root{
  --st-super-safe-left-mobile:22px;
  --st-super-safe-left-tablet:22px;
  --st-super-safe-left-desktop:48px;
}

/* The first header trigger should hug the left edge of its safe-zone
   grid cell instead of visually floating toward the cell center. */
.food-trigger{
  justify-self:start !important;
  margin-left:0 !important;
}

@media (max-width:700px){
  .lake-options{
    left:max(var(--st-super-safe-left-mobile), env(safe-area-inset-left)) !important;
  }
}

@media (min-width:701px) and (max-width:1100px){
  /* Landscape iPhone / tablet-width Safari: bring the left interaction
     boundary inward less aggressively than the general tablet zone. */
  .stormy-head-inner{
    margin-left:max(var(--st-super-safe-left-tablet), env(safe-area-inset-left)) !important;
  }
  .lake-options{
    left:max(var(--st-super-safe-left-tablet), env(safe-area-inset-left)) !important;
    width:min(
      390px,
      calc(100vw - max(var(--st-super-safe-left-tablet), env(safe-area-inset-left)) - var(--st-super-safe-tablet-inset))
    ) !important;
  }
}

@media (min-width:1101px){
  .lake-options{
    left:max(var(--st-super-safe-left-desktop), env(safe-area-inset-left)) !important;
  }
}