/* ============================================================
   PATH:
   /software/stormy-titans-v1/assets/css/addendum.css

   STORMY TITANS™ — CONSOLIDATED CSS ADDENDUM — 002-R36

   PURPOSE
   Consolidate the historical post-app.css revision stylesheets into
   one file while preserving their original cascade/load order.

   IMPORTANT
   - This first consolidation pass intentionally makes NO styling
     changes and performs NO selector deduplication.
   - Former filenames are preserved as section comments.
   - app.css remains the foundational/base stylesheet.
   - New surgical overrides should be added only AFTER the historical
     sections below, so their cascade position is explicit.
   ============================================================ */

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r5-home-profile.css
   ============================================================ */

/* ============================================================
   STORMY TITANS™ — HOME / PROFILE / VISIBLE-VIEWPORT FIX — R5
   ============================================================ */

:root{
  --st-vvh:100dvh;
  --st-vvtop:0px;
  --st-lake-top:92px;
  --st-lake-bottom-gap:12px;
}

/* Safari/iPhone: lake menus must end inside the *visible* viewport,
   not beneath Safari's tab/address controls. */
.lake-reveal{
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(
    var(--st-vvh, 100dvh)
    - var(--st-lake-top)
    - var(--st-lake-bottom-gap)
    - env(safe-area-inset-bottom)
  ) !important;
}
.lake-reveal .lake-scroll,
.lake-reveal .lake-you-links{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.lake-training .training-brand,
.lake-you .you-card,
.lake-reveal .lake-titlebar,
.lake-reveal .lake-admin-links{
  flex:0 0 auto;
}
.you-profile-image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.super-admin-avatar{position:relative}
.header-profile-image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.super-admin-check{
  position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:#d71920;color:#fff;border:2px solid #fff;
  font-style:normal;font-size:.72rem;font-weight:1000;line-height:1
}

/* ---------------- HOME ---------------- */
.home-welcome{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.26)
}
.home-welcome strong{font-size:1rem}
.home-membership{margin-top:2px;color:var(--muted);font-size:.78rem}
.compact{padding:.55rem .7rem!important;min-height:auto!important}

.character-strip{
  display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.character-strip::-webkit-scrollbar{display:none}
.strip-character{
  flex:0 0 78px;text-align:center;color:#fff!important;text-decoration:none!important;
  font-size:.72rem;overflow:hidden
}
.strip-avatar{
  width:72px;height:72px;border:1px solid rgba(255,255,255,.65);border-radius:8px;
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#173b5d,#071c2e);margin:0 auto 5px
}
.strip-avatar img{width:100%;height:100%;object-fit:cover}
.strip-avatar b{font-size:1.45rem}
.strip-avatar em{
  position:absolute;right:2px;bottom:2px;background:var(--cyan);color:#00253a;
  border:1px solid #fff;border-radius:8px;padding:1px 4px;font-size:.55rem;font-style:normal;font-weight:1000
}
.presence-dot{
  position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;
  background:#26b85a;border:2px solid #fff;z-index:3
}

.home-quick-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  padding:12px;margin:0 0 14px;border:1px solid #36536a;border-radius:10px;
  background:rgba(255,255,255,.045)
}
.home-quick-grid a{
  min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:8px 4px;border:1px solid rgba(255,255,255,.20);border-radius:8px;
  background:rgba(255,255,255,.06);color:#fff!important;text-decoration:none!important;text-align:center
}
.home-quick-grid a span{font-size:1.25rem}
.home-quick-grid a b{font-size:.72rem}

.home-account-panel{
  margin-bottom:16px;border:1px solid #36536a;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.035)
}
.home-account-panel>header,.home-section-head,.st-profile-module>header{
  background:linear-gradient(90deg,#173e67,#2e6b9d,#173e67);
  color:#fff;padding:8px 10px;font-size:.83rem;font-weight:900
}
.account-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#36536a}
.account-summary-grid>div{background:#0d273c;padding:10px}
.account-summary-grid small{display:block;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em}
.account-summary-grid b{display:block;margin-top:3px;font-size:.82rem}
.home-account-actions{display:flex;gap:8px;flex-wrap:wrap;padding:10px}

.home-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;border-radius:7px}
.home-section-head span{font-size:.68rem;color:#d8f5ff;text-transform:uppercase;letter-spacing:.08em}

.character-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.character-card{min-width:0;border:1px solid #36536a;border-radius:8px;overflow:hidden;background:#fff;color:#071521}
.character-image{display:block;position:relative;aspect-ratio:4/5;background:linear-gradient(145deg,#173b5d,#071c2e);overflow:hidden}
.character-image img{width:100%;height:100%;object-fit:cover}
.character-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-size:3rem;font-weight:900}
.character-ai-tag{position:absolute;right:5px;top:5px;background:#00cfff;color:#00253a;border:1px solid #fff;border-radius:8px;padding:2px 5px;font-size:.58rem;font-weight:1000}
.character-card-body{padding:7px}
.character-name{display:block;color:#0b67a1!important;font-weight:900;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-card-body small{display:block;color:#64727d;font-size:.65rem;margin-top:2px}
.character-card-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px}
.character-card-actions a{display:grid;place-items:center;border:1px solid #dde3e7;border-radius:4px;padding:4px;text-decoration:none!important}

.universe-feature{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:20px 0;padding:18px;border:1px solid #3e6f91;border-radius:10px;
  background:linear-gradient(110deg,rgba(0,207,255,.08),rgba(255,255,255,.02))
}
.universe-feature small{display:block;color:var(--cyan);letter-spacing:.12em;font-weight:900}
.universe-feature strong{display:block;font-size:1.25rem;margin:3px 0}
.universe-feature p{margin:5px 0 0;color:var(--muted);font-size:.85rem}

/* ---------------- PROFILE ---------------- */
.st-profile-view{max-width:760px;margin-inline:auto}
.st-profile-idbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:7px 10px;margin-bottom:10px;border-radius:6px;
  background:linear-gradient(90deg,#173e67,#2d6897);font-size:.82rem
}
.st-profile-idbar span{color:#d9effc}.st-profile-idbar em{margin-left:auto;color:var(--cyan);font-style:normal;font-weight:900}
.st-profile-hero{display:grid;grid-template-columns:minmax(180px,360px) 1fr;gap:12px;align-items:start}
.st-profile-photo-wrap{position:relative;max-width:360px}
.st-profile-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid #fff;border-radius:9px;background:#081a28}
.st-profile-placeholder{display:grid;place-items:center;font-size:5rem;background:linear-gradient(145deg,#173b5d,#071c2e)}
.st-profile-actions{display:grid;gap:7px}
.st-profile-actionbar{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0;border:1px solid #36536a;border-radius:7px;overflow:hidden}
.st-profile-actionbar a{display:grid;place-items:center;min-height:42px;background:#fff;color:#60717c!important;text-decoration:none!important;border-right:1px solid #e1e5e8}
.st-profile-actionbar a:last-child{border-right:0}
.super-admin-badge{position:absolute;right:-7px;bottom:-7px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d71920;color:#fff;border:3px solid #fff;font-weight:1000;font-size:1.3rem}
.ai-badge{position:absolute;left:5px;bottom:5px;padding:4px 7px;border-radius:10px;background:#00cfff;color:#002b40;font-weight:1000;border:2px solid #fff}

.st-profile-module{margin:0 0 11px;border:1px solid #36536a;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.03)}
.st-profile-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
.st-profile-photo-grid img,.st-photo-placeholder{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px}
.st-photo-placeholder{display:grid;place-items:center;background:#102c43;color:#d4eaf7;font-size:1rem;text-decoration:none!important}
.st-profile-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:8px}
.st-profile-detail-grid>div{padding:9px;background:rgba(255,255,255,.06);border-radius:5px}
.st-profile-detail-grid small{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em}
.st-profile-detail-grid b{display:block;margin-top:3px;font-size:.82rem}
.st-profile-copy{padding:12px;font-size:.88rem;line-height:1.55}
.st-social-list{margin:0;padding-left:1.2rem}
.public-id-list{display:grid;gap:6px}.public-id-list>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media(max-width:700px){
  :root{--st-lake-top:80px;--st-lake-bottom-gap:8px}
  .home-welcome{padding-inline:4px}
  .home-quick-grid{grid-template-columns:repeat(4,1fr);gap:5px;padding:8px}
  .home-quick-grid a{min-height:66px;padding:5px 2px}
  .account-summary-grid{grid-template-columns:repeat(2,1fr)}
  .character-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .character-card-body{padding:6px}
  .universe-feature{align-items:flex-start;padding:12px}
  .st-profile-hero{grid-template-columns:1fr}
  .st-profile-photo-wrap{width:min(100%,360px);margin-inline:auto}
  .st-profile-actions{grid-template-columns:repeat(2,1fr)}
  .st-profile-detail-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:390px){
  .home-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .home-quick-grid a b{font-size:.64rem}
  .st-profile-detail-grid{gap:4px;padding:6px}
  .st-profile-detail-grid>div{padding:7px}
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r6-profile-gallery.css
   ============================================================ */

/* ============================================================
   STORMY TITANS™ PROFILE FULL EDIT + IMAGE GALLERY — 002-R6
   ============================================================ */

.profile-edit-r6,
.r6-profile-view{max-width:820px;margin-inline:auto}

.profile-edit-idbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 10px;padding:7px 10px;border-radius:6px;
  background:linear-gradient(90deg,#173e67,#2d6897);
  color:#fff;font-size:.82rem
}
.profile-edit-idbar span{color:#d9effc}
.profile-edit-idbar em{margin-left:auto;color:var(--cyan);font-style:normal;font-weight:900}

.profile-edit-form{display:grid;gap:10px}
.edit-module{
  border:1px solid #36536a;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.035);margin:0 0 10px
}
.edit-module>header{
  padding:8px 10px;background:linear-gradient(90deg,#173e67,#2e6b9d,#173e67);
  color:#fff;font-size:.82rem;font-weight:900
}
.edit-module>label,
.edit-module>.edit-grid,
.edit-module>.edit-photo-row,
.edit-module>.gallery-upload-form,
.edit-module>p,
.edit-module>form{margin:10px}

.edit-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
.edit-grid label,
.edit-module>label{display:block;font-size:.76rem;font-weight:800}
.edit-grid input,
.edit-module input[type="text"],
.edit-module input[type="email"],
.edit-module input[type="date"],
.edit-module textarea{
  width:100%;margin-top:4px
}
.edit-photo-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start}
.edit-primary-photo{
  width:150px;aspect-ratio:1/1;border:2px solid #fff;border-radius:9px;overflow:hidden;
  display:grid;place-items:center;background:linear-gradient(145deg,#173b5d,#071c2e);
  font-size:2.5rem;font-weight:900
}
.edit-primary-photo img{width:100%;height:100%;object-fit:cover}

.edit-gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
  padding:10px
}
.edit-gallery-item{
  display:block;border:1px solid #36536a;border-radius:7px;overflow:hidden;
  background:#0b2234
}
.edit-gallery-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.edit-gallery-item span{
  display:flex;align-items:center;gap:5px;padding:6px;font-size:.72rem
}

.r6-profile-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;padding:8px
}
.r6-gallery-thumb,
.r6-gallery-add{
  position:relative;display:block;width:100%;aspect-ratio:1/1;border:1px solid #36536a;
  border-radius:6px;overflow:hidden;background:#102c43;color:#fff;cursor:pointer;padding:0
}
.r6-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.r6-gallery-thumb span{
  position:absolute;left:4px;bottom:4px;padding:2px 5px;border-radius:7px;
  background:rgba(0,0,0,.68);color:#fff;font-size:.58rem;font-weight:900
}
.r6-gallery-add{
  display:grid;place-items:center;text-decoration:none!important;font-size:2rem
}
.r6-chip-list{display:flex;gap:7px;flex-wrap:wrap;padding:10px}
.r6-chip-list span{
  padding:5px 8px;border:1px solid #3d718f;border-radius:14px;
  background:rgba(0,207,255,.06);font-size:.75rem
}

.private-profile-module>header{display:flex;justify-content:space-between}
.private-profile-module>header span{
  color:#ffd5d5;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em
}

.r6-gallery-lightbox[hidden]{display:none}
.r6-gallery-lightbox{
  position:fixed;inset:0;z-index:2147483646;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.92)
}
.r6-gallery-lightbox img{
  max-width:min(96vw,1100px);max-height:90dvh;object-fit:contain;
  border:2px solid #fff;border-radius:8px
}
.r6-gallery-close{
  position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));
  z-index:2147483647;width:46px;height:46px;border-radius:50%;
  border:1px solid #fff;background:#0b2b45;color:#fff;font-size:1.8rem;cursor:pointer
}
body.gallery-open{overflow:hidden}

@media(max-width:700px){
  .edit-grid{grid-template-columns:1fr}
  .edit-photo-row{grid-template-columns:105px minmax(0,1fr)}
  .edit-primary-photo{width:105px}
  .edit-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:7px;gap:5px}
  .r6-profile-gallery{grid-template-columns:repeat(3,minmax(0,1fr));padding:6px;gap:5px}
}

@media(max-width:390px){
  .edit-photo-row{grid-template-columns:90px minmax(0,1fr);gap:9px}
  .edit-primary-photo{width:90px}
  .edit-gallery-grid,
  .r6-profile-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r7-super-safe-zone.css
   ============================================================ */
/* ============================================================
   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;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r8-profile-image-view.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — PROFILE IMAGE VIEW REFINEMENT — 002-R8

   GOALS
   1) Letterbox artwork instead of cropping it.
   2) Center gallery lightbox images inside the visible iPhone viewport.
   3) Re-home the orphan blue divider into the top header treatment.
   ============================================================ */

/* ------------------------------------------------------------
   PRIMARY PROFILE ART
   The artwork itself is never cropped merely to fill the frame.
   Black negative space becomes the intentional letterbox.
   ------------------------------------------------------------ */
.st-profile-photo{
  box-sizing:border-box !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
  padding:6px !important;
}

/* Keep placeholders visually unchanged. */
.st-profile-placeholder{
  padding:0 !important;
}

/* ------------------------------------------------------------
   PROFILE PHOTO ROW / GALLERY THUMBNAILS
   Preserve complete artwork in the small preview tiles too.
   ------------------------------------------------------------ */
.r6-gallery-thumb{
  background:#000 !important;
}

.r6-gallery-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}

/* Edit-profile previews should use the same no-crop rule. */
.edit-primary-photo{
  background:#000 !important;
}

.edit-primary-photo img,
.edit-gallery-item img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}

/* ------------------------------------------------------------
   FULL-SCREEN GALLERY VIEWER
   Use the visible viewport and device safe-area insets.
   Do not allow portrait art to wander beyond the right edge.
   ------------------------------------------------------------ */
.r6-gallery-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483646 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;
  width:100vw !important;
  height:var(--st-vvh, 100dvh) !important;
  max-width:100vw !important;
  max-height:var(--st-vvh, 100dvh) !important;

  padding-top:max(18px, env(safe-area-inset-top)) !important;
  padding-right:max(18px, env(safe-area-inset-right)) !important;
  padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
  padding-left:max(18px, env(safe-area-inset-left)) !important;

  overflow:hidden !important;
  background:#000 !important;
}

.r6-gallery-lightbox[hidden]{
  display:none !important;
}

.r6-gallery-lightbox img{
  display:block !important;
  position:static !important;

  width:auto !important;
  height:auto !important;

  max-width:calc(
    100vw
    - max(18px, env(safe-area-inset-left))
    - max(18px, env(safe-area-inset-right))
  ) !important;

  max-height:calc(
    var(--st-vvh, 100dvh)
    - max(18px, env(safe-area-inset-top))
    - max(18px, env(safe-area-inset-bottom))
  ) !important;

  margin:auto !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
  object-position:center center !important;

  background:#000 !important;
  border:2px solid #fff !important;
  border-radius:8px !important;
}

/* Close control remains inside the real hardware-safe corner. */
.r6-gallery-close{
  right:max(14px, env(safe-area-inset-right)) !important;
  top:calc(max(14px, env(safe-area-inset-top)) + var(--st-vvtop, 0px)) !important;
}

/* ------------------------------------------------------------
   TOP HEADER DIVIDER
   The old standalone .head-divider could appear as a floating
   thick blue stripe while the page scrolled. Remove that free-
   floating element and make the separator part of the header.
   ------------------------------------------------------------ */
.head-divider{
  display:none !important;
}

.stormy-head{
  border-bottom:2px solid rgba(82, 160, 213, .72) !important;
}

/* ------------------------------------------------------------
   MOBILE TUNING
   Slightly more internal black breathing room around artwork
   where rounded profile frames are most visually aggressive.
   ------------------------------------------------------------ */
@media (max-width:700px){
  .st-profile-photo{
    padding:8px !important;
  }

  .r6-gallery-lightbox{
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
  }

  .r6-gallery-lightbox img{
    max-width:calc(
      100vw
      - max(14px, env(safe-area-inset-left))
      - max(14px, env(safe-area-inset-right))
    ) !important;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r9-mobile-avatar-circle.css
   ============================================================ */
/* STORMY TITANS™ — MOBILE AVATAR CIRCLE REFINEMENT — 002-R9 */
.avatar-button{box-sizing:border-box!important;aspect-ratio:1/1!important;border-radius:50%!important;overflow:visible!important}
.avatar-button .header-profile-image{display:block!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;max-width:100%!important;max-height:100%!important;min-width:0!important;min-height:0!important;object-fit:cover!important;object-position:center center!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important}
.you-avatar{aspect-ratio:1/1!important;border-radius:50%!important}
.you-avatar .you-profile-image{display:block!important;width:100%!important;height:100%!important;aspect-ratio:1/1!important;object-fit:cover!important;object-position:center center!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important}
.avatar-button.super-admin-avatar,.you-avatar.super-admin-avatar{overflow:visible!important}
@media(max-width:700px){.avatar-button{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important}.avatar-button .header-profile-image{width:46px!important;height:46px!important;flex:0 0 46px!important}}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r10-global-content-boundary.css
   ============================================================ */
/* ============================================================
   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)
    );
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r10_1-you-right-edge.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — YOU PROFILE RIGHT-EDGE REFINEMENT — 002-R10.1

   Purpose:
   Make the visible You/Profile image obey the same right boundary as
   the main global content column. R9's mobile rule forced the inner
   image to 46px inside a 46px border-box button, allowing the photo
   itself to overflow the button's inner content box.
   ============================================================ */

/* The button remains the canonical right-edge object. */
.stormy-head-inner > .avatar-button{
  justify-self:end !important;
  margin-right:0 !important;
  transform:none !important;
  box-sizing:border-box !important;
}

/* The photo must fit INSIDE that button instead of matching its outer
   border-box dimension. This makes the photo's visible right edge obey
   the same global boundary as the rest of the application. */
.avatar-button .header-profile-image{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  flex:none !important;
  box-sizing:border-box !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:50% !important;
  clip-path:circle(50% at 50% 50%) !important;
}

/* R9 explicitly set the mobile image itself to 46x46. Override only
   that inner-image sizing while preserving the 46px avatar button. */
@media (max-width:700px){
  .avatar-button .header-profile-image{
    width:100% !important;
    height:100% !important;
    flex:none !important;
  }
}

/* The red Super Admin badge remains intentionally overlaid. It does not
   participate in the header/content alignment measurement. */
.super-admin-check{
  pointer-events:none;
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r13-mobile-dock-structure.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — MOBILE DOCK STRUCTURE FIX — 002-R13

   Root cause addressed:
   app.css originally made .mobile-dock itself the five-column grid.
   The newer layout correctly places a Super Safe/global-width wrapper
   (.mobile-dock-inner) inside .mobile-dock. Therefore the OUTER dock
   must be the full-width fixed background and the INNER wrapper must
   be the only five-column grid.
   ============================================================ */

@media (max-width:700px){
  /* Full-bleed fixed banner only. It has ONE child: .mobile-dock-inner. */
  .mobile-dock{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:100 !important;

    display:block !important;
    grid-template-columns:none !important;
    grid-auto-flow:initial !important;

    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:7px 0 calc(7px + env(safe-area-inset-bottom)) !important;

    background:linear-gradient(180deg,#0b4c7d,#063b64) !important;
    border-top:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 -6px 20px rgba(0,0,0,.28) !important;
    overflow:visible !important;
  }

  /* This is the one and only dock grid. */
  .mobile-dock > .mobile-dock-inner{
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:1fr !important;
    grid-auto-flow:row !important;

    align-items:stretch !important;
    justify-items:stretch !important;
    gap:0 !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;

    /* Same left/right boundary as the rest of Stormy Titans. */
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:var(--st-global-edge,22px) !important;
    margin-right:var(--st-global-edge,22px) !important;
    padding:0 !important;
  }

  /* Each shortcut occupies one independent equal-width cell. */
  .mobile-dock > .mobile-dock-inner > a{
    box-sizing:border-box !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    float:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:58px !important;

    margin:0 !important;
    padding:5px 2px !important;

    color:#fff !important;
    text-align:center !important;
    text-decoration:none !important;
    overflow:hidden !important;
  }

  .mobile-dock > .mobile-dock-inner > a > span{
    position:static !important;
    display:block !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
    font-size:1.35rem !important;
    line-height:1.15 !important;
    flex:0 0 auto !important;
  }

  .mobile-dock > .mobile-dock-inner > a > b{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 1px !important;
    transform:none !important;

    font-size:.72rem !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:center !important;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r14-admin-menu-privilege.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — SUPER ADMIN MENU PRIVILEGE MARKERS — 002-R14

   VISUAL AUDIT RULE
   - Regular destination: normal icon.
   - Super Admin-only destination: same icon + red circular check badge.
   - Regular users do not receive admin-only menu items at all.
   - The red check is a visual indicator, NOT the security boundary.
   ============================================================ */

.lake-item-icon.admin-privilege-icon,
.admin-inline-icon,
.mobile-dock .admin-privilege-icon{
  position:relative !important;
  overflow:visible !important;
}

.lake-item-icon-glyph{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}

.menu-admin-check{
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#d71920;
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  font-style:normal;
  font-size:.68rem;
  line-height:1;
  font-weight:1000;
  z-index:4;
  pointer-events:none;
}

.admin-only-item .lake-item-label{
  font-weight:900;
}

.admin-inline-link{
  display:flex !important;
  align-items:center;
  gap:8px;
}

.admin-inline-icon{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  min-height:30px;
  font-size:1.1rem;
}

.mobile-dock .admin-privilege-icon{
  display:inline-block;
}

/* Editor-only visual cue. */
.admin-checkline{
  color:#ffd7d7;
  font-weight:900;
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r15-pending-badge-inline.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — PENDING BADGE INLINE REFINEMENT — 002-R15

   PURPOSE
   Keep the not-ready state badge on the same row as the menu label
   in mobile Lake Reveal menus, and rename it from "Not Enabled"
   to the more concise "Pending".
   ============================================================ */

/* Preserve the three-column Lake Reveal row:
   icon | label | state badge */
.lake-item{
  grid-template-columns:44px minmax(0,1fr) auto !important;
  align-items:center !important;
}

/* Keep the state badge in the third column on the same line. */
.lake-item-state{
  grid-column:3 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:end !important;
  white-space:nowrap !important;
  margin:0 !important;
}

/* Prevent the label from forcing the badge onto another row. */
.lake-item-label{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* The old <=390px rule in app.css moved the state badge to row 2.
   Override it explicitly so compact phones remain single-height. */
@media (max-width:390px){
  .lake-item{
    grid-template-columns:40px minmax(0,1fr) auto !important;
  }

  .lake-item-state{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
}

/* Slightly tighten the badge for narrow mobile screens. */
@media (max-width:700px){
  .lake-item-state{
    font-size:.62rem !important;
    padding:2px 5px !important;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r16-lake-reveal-marquee.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — LAKE REVEAL MARQUEE STYLE — CORRECTED 002-R16

   IMPORTANT:
   This is a CSS-only visual overlay on the known-good R15 structure.
   No Lake Reveal markup is restructured.
   ============================================================ */

:root{
  --st-options-accent:#ffe000;
  --st-options-glow:rgba(255,224,0,.50);
  --st-you-accent:#67ff66;
  --st-you-glow:rgba(103,255,102,.50);
}

/* Invisible outside-click catcher: retain behavior, remove dimming. */
.lake-backdrop,
.lake-backdrop.open{
  background:transparent !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Circular menu openers. */
.food-trigger,
.stormy-head .avatar-button{
  box-sizing:border-box !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
}

.food-trigger{
  border:2px solid var(--st-options-accent) !important;
  background:rgba(6,25,40,.78) !important;
  box-shadow:
    0 0 0 2px rgba(255,224,0,.10),
    0 0 12px var(--st-options-glow) !important;
}

.stormy-head .avatar-button{
  border:2px solid var(--st-you-accent) !important;
  box-shadow:
    0 0 0 2px rgba(103,255,102,.10),
    0 0 12px var(--st-you-glow) !important;
}

/* Shared Lake Reveal appearance. */
.lake-reveal{
  background:linear-gradient(180deg,#0a263c,#071c2e) !important;
  color:#fff !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* Keep interior dark and consistent. */
.lake-category-items,
.lake-item,
.you-card,
.lake-admin-links{
  background:#0a263c !important;
  color:#fff !important;
}

.lake-item{
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}

.lake-item:hover,
.lake-item:focus-visible{
  background:#10334e !important;
  color:#fff !important;
}

.lake-item-label{color:#fff !important}
.you-balance{color:#d9effc !important}
.lake-admin-links a{color:#d9effc !important}

/* Accent frames. */
.lake-options{
  border:2px solid var(--st-options-accent) !important;
  box-shadow:
    0 0 0 1px rgba(255,224,0,.10),
    0 0 14px var(--st-options-glow),
    0 14px 32px rgba(0,0,0,.36) !important;
}

.lake-you{
  border:2px solid var(--st-you-accent) !important;
  box-shadow:
    0 0 0 1px rgba(103,255,102,.10),
    0 0 14px var(--st-you-glow),
    0 14px 32px rgba(0,0,0,.36) !important;
}

/* Pointer tabs: use pseudo-elements without changing markup. */
.lake-options::before,
.lake-you::before{
  content:"";
  position:absolute;
  top:-9px;
  width:16px;
  height:16px;
  background:#0a263c;
  transform:rotate(45deg);
  z-index:1;
}

.lake-options::before{
  left:28px;
  border-left:2px solid var(--st-options-accent);
  border-top:2px solid var(--st-options-accent);
}

.lake-you::before{
  right:28px;
  border-left:2px solid var(--st-you-accent);
  border-top:2px solid var(--st-you-accent);
}

/* Restore overflow visibility only where needed for pointer tab,
   while inner scrolling remains controlled by existing R5/R7 rules. */
.lake-options,
.lake-you{
  overflow:visible !important;
}

.lake-options .lake-scroll,
.lake-you .lake-you-links{
  overflow:auto !important;
  border-radius:0 0 12px 12px;
}

/* Mobile geometry: narrower and shorter, with deliberate space above dock. */
@media (max-width:700px){
  .lake-options,
  .lake-you{
    top:80px !important;
    width:min(330px,calc(100vw - 44px)) !important;
    max-height:calc(
      var(--st-vvh,100dvh)
      - 80px
      - 118px
      - env(safe-area-inset-bottom)
    ) !important;
  }

  .lake-options{
    left:max(22px,env(safe-area-inset-left)) !important;
  }

  .lake-you{
    right:max(22px,env(safe-area-inset-right)) !important;
  }
}

/* Tablet/desktop compact floating treatment. */
@media (min-width:701px){
  .food-trigger,
  .stormy-head .avatar-button{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }

  .lake-options{width:min(380px,36vw) !important}
  .lake-you{width:min(360px,34vw) !important}
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r17-training.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — TRAINING SINGLE-PAGE EXPERIENCE — 002-R17

   DESIGN SYSTEM NOTE
   This page deliberately uses a consistent spacing scale so sections,
   buttons, rails, and panel interiors do not visually "run into" edges.
   ============================================================ */

:root{
  --st-training-yellow:#ffe000;
  --st-training-ink:#071521;
  --st-space-1:4px;
  --st-space-2:8px;
  --st-space-3:12px;
  --st-space-4:16px;
  --st-space-5:20px;
  --st-space-6:24px;
}

/* HOME: Training is yellow only while actively pressed. */
.home-quick-grid a[href$="/training/"]:active,
.home-quick-grid a[href*="/training/"]:active{
  background:var(--st-training-yellow) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink) !important;
  box-shadow:0 0 14px rgba(255,224,0,.38);
}
.home-quick-grid a[href$="/training/"]:active b,
.home-quick-grid a[href*="/training/"]:active b{
  color:var(--st-training-ink) !important;
}

/* TRAINING PAGE */
.training-page{
  display:grid;
  gap:var(--st-space-4);
  padding-bottom:var(--st-space-5);
}

.training-page h2,
.training-page p{
  margin-top:0;
}

.training-hero-panel,
.training-section{
  border:1px solid #36536a;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}

.training-hero-panel{
  background:#000;
}

.training-hero-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
}

.training-character-rail,
.training-module-rail,
.training-resource-rail{
  display:flex;
  gap:var(--st-space-3);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.training-character-rail::-webkit-scrollbar,
.training-module-rail::-webkit-scrollbar,
.training-resource-rail::-webkit-scrollbar{display:none}

.training-character-rail{
  padding:0 var(--st-space-1);
}
.training-character{
  flex:0 0 78px;
  display:grid;
  gap:6px;
  text-align:center;
  color:#fff !important;
  text-decoration:none !important;
  font-size:.72rem;
}
.training-character-image{
  width:72px;height:72px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.65);
  border-radius:8px;
  background:linear-gradient(145deg,#173b5d,#071c2e);
  margin-inline:auto;
}
.training-character-image img{width:100%;height:100%;object-fit:cover}

/* Same square destinations as Home, with disciplined gutters. */
.training-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--st-space-2);
  padding:var(--st-space-3);
  border:1px solid #36536a;
  border-radius:10px;
  background:rgba(255,255,255,.045);
}
.training-quick-grid a{
  min-height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:var(--st-space-2) var(--st-space-1);
  border:1px solid rgba(255,255,255,.20);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff !important;
  text-decoration:none !important;
  text-align:center;
}
.training-quick-grid a span{font-size:1.25rem}
.training-quick-grid a b{font-size:.72rem}

/* Persistent active Training tile on Training itself. */
.training-quick-grid a.is-active-training,
.training-quick-grid a[aria-current="page"]{
  background:var(--st-training-yellow) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink) !important;
  box-shadow:0 0 14px rgba(255,224,0,.36);
}
.training-quick-grid a.is-active-training b,
.training-quick-grid a[aria-current="page"] b{
  color:var(--st-training-ink) !important;
}

.training-section{
  padding:var(--st-space-4);
}

.training-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--st-space-3);
  margin-bottom:var(--st-space-3);
}
.training-section-head small,
.training-eyebrow{
  display:block;
  color:var(--st-training-yellow);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.training-section-head h2{
  margin:2px 0 0;
  font-size:1rem;
}
.training-section-head a{
  flex:0 0 auto;
  text-decoration:none;
  font-weight:800;
}

.training-module-rail{
  margin-inline:calc(var(--st-space-4) * -1);
  padding:0 var(--st-space-4) var(--st-space-1);
}
.training-module-card{
  flex:0 0 190px;
  scroll-snap-align:start;
  overflow:hidden;
  border:1px solid #315b79;
  border-radius:8px;
  background:#081f32;
  color:#fff !important;
  text-decoration:none !important;
}
.training-module-card.is-current{
  border-color:var(--st-training-yellow);
  box-shadow:0 0 12px rgba(255,224,0,.30);
}
.training-module-art{
  min-height:104px;
  position:relative;
  display:grid;
  align-content:start;
  gap:3px;
  padding:var(--st-space-3);
  background:linear-gradient(145deg,#0b3556,#061827);
}
.training-module-series{
  color:#9edfff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.training-module-art strong{
  max-width:130px;
  font-size:.92rem;
}
.training-module-icon{
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:2rem;
  opacity:.72;
}
.training-module-meta{
  display:grid;
  gap:4px;
  padding:var(--st-space-3);
}
.training-module-meta b{font-size:.82rem}
.training-module-meta small{color:var(--muted)}
.training-module-card.is-current .training-module-meta b{
  color:var(--st-training-yellow);
}
.training-mini-progress{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#415166;
}
.training-mini-progress i{
  display:block;
  width:0;
  height:100%;
  background:var(--st-training-yellow);
}

.training-current-module{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:var(--st-space-4);
  align-items:stretch;
}
.training-current-copy{
  display:flex;
  flex-direction:column;
  padding:var(--st-space-1) 0;
}
.training-current-copy h2{
  margin:4px 0;
}
.training-series{
  font-weight:800;
  color:#d9effc;
  margin-bottom:var(--st-space-3);
}
.training-current-copy>p:last-of-type{
  color:var(--muted);
  line-height:1.5;
  margin-bottom:var(--st-space-4);
}
.training-current-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--st-space-2);
  margin-top:auto;
  padding-top:var(--st-space-2);
}
.training-current-actions .btn{
  min-height:44px;
  margin:0;
}
.training-resume{
  border-color:#fff27a !important;
  background:var(--st-training-yellow) !important;
  color:var(--st-training-ink) !important;
}

.training-player-shell{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  overflow:hidden;
  border:1px solid #2f668a;
  border-radius:8px;
  background:#000;
}
.training-current-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
}
.training-video-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:6px;
  padding:var(--st-space-4);
  text-align:center;
  background:#000;
  color:#fff;
}
.training-video-empty span{color:var(--muted);font-size:.82rem}

.training-resource-rail{
  margin-inline:calc(var(--st-space-4) * -1);
  padding:0 var(--st-space-4) var(--st-space-1);
}
.training-resource-card{
  flex:0 0 190px;
  min-height:96px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:start;
  gap:var(--st-space-2);
  padding:var(--st-space-3);
  border:1px solid #315b79;
  border-radius:8px;
  background:#081f32;
  color:#fff !important;
  text-decoration:none !important;
}
.training-resource-icon{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  font-size:1.55rem;
}
.training-resource-card span:last-child{display:grid;gap:5px}
.training-resource-card b{font-size:.78rem}
.training-resource-card small{color:#c6d6e1;line-height:1.3}

/* Tablet/mobile */
@media(max-width:700px){
  .training-page{gap:var(--st-space-3);padding-bottom:var(--st-space-4)}
  .training-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px}
  .training-quick-grid a{min-height:66px;padding:5px 2px}
  .training-section{padding:var(--st-space-3)}
  .training-section-head{margin-bottom:var(--st-space-3)}
  .training-module-rail,
  .training-resource-rail{
    margin-inline:calc(var(--st-space-3) * -1);
    padding-inline:var(--st-space-3);
  }
  .training-current-module{
    grid-template-columns:1fr;
    gap:var(--st-space-3);
  }
  .training-current-copy{padding:0}
  .training-player-shell{order:-1}
  .training-current-actions{
    padding-bottom:var(--st-space-1);
  }
  .training-module-card{flex-basis:165px}
  .training-resource-card{flex-basis:170px}
}
@media(max-width:390px){
  .training-quick-grid a b{font-size:.64rem}
  .training-section{padding:10px}
  .training-module-rail,
  .training-resource-rail{
    margin-inline:-10px;
    padding-inline:10px;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r18-browser-surround.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — BROWSER SURROUND COLOR REFINEMENT — 002-R18

   Extends the canonical Stormy Titans navy into the outer browser-adjacent
   canvas and mobile safe-area backing regions where iOS Safari permits it.

   Canonical app.css color:
     --bg: #071a2b;
   ============================================================ */

:root{
  --st-browser-surround:#071a2b;
}

html{
  background-color:var(--st-browser-surround) !important;
  min-height:100% !important;
}

body{
  background-color:var(--st-browser-surround) !important;
  min-height:100% !important;
}

/* Back the hardware-safe top and bottom areas with the same navy. */
body::before,
body::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  pointer-events:none;
  z-index:-1;
  background:var(--st-browser-surround);
}

body::before{
  top:0;
  height:max(env(safe-area-inset-top),1px);
}

body::after{
  bottom:0;
  height:max(env(safe-area-inset-bottom),1px);
}

/* Avoid a mismatched canvas showing under the fixed dock. */
@media (max-width:700px){
  body:not(.public-body){
    background-color:var(--st-browser-surround) !important;
  }

  .mobile-dock{
    background-color:var(--st-browser-surround);
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r21-home-menu-visual-polish.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — HOME + LAKE REVEAL VISUAL POLISH — 002-R21
   ============================================================ */

/* 1) HOME LARGE CHARACTER CARDS — letterbox complete artwork. */
.character-image{
  background:#000 !important;
}
.character-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
  padding:6px !important;
}
@media(max-width:700px){
  .character-image img{padding:8px !important;}
}

/* 2) LAKE REVEALS
   Outer shell must stay overflow:visible so the glow and boat-load tab
   survive. Clip/round the INNER surfaces instead. */
.lake-options,
.lake-you{
  overflow:visible !important;
  isolation:isolate;
}
.lake-options > .lake-titlebar,
.lake-you > .lake-titlebar{
  border-radius:12px 12px 0 0 !important;
  overflow:hidden !important;
}
.lake-options > .lake-scroll{
  border-radius:0 0 12px 12px !important;
  overflow:auto !important;
  background:#0a263c !important;
}
.lake-options > .lake-scroll > :last-child{
  border-radius:0 0 10px 10px !important;
  overflow:hidden !important;
}
.lake-you > .you-card{
  overflow:hidden !important;
}
.lake-you > .lake-you-links{
  background:#0a263c !important;
  overflow:auto !important;
}
.lake-you > .lake-admin-links:last-child,
.lake-you > .lake-you-links:last-child{
  border-radius:0 0 12px 12px !important;
  overflow:hidden !important;
}
.lake-options::before,
.lake-you::before{
  z-index:2 !important;
}

/* 3) MOBILE YOU/PROFILE CIRCLE
   Settle the R9/R10.1/R16 cascade at the end of the stack. */
@media(max-width:700px){
  .stormy-head .avatar-button{
    box-sizing:border-box !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    padding:2px !important;
    margin:0 !important;
    border-radius:50% !important;
    overflow:visible !important;
    align-self:center !important;
    transform:none !important;
    line-height:1 !important;
  }

  .stormy-head .avatar-button .header-profile-image{
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:50% !important;
    clip-path:circle(50% at 50% 50%) !important;
    transform:none !important;
  }

  .stormy-head .avatar-button .super-admin-check{
    right:-4px !important;
    bottom:-4px !important;
    transform:none !important;
  }
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r23-lake-touch-scroll.css
   ============================================================ */
/* ============================================================
   STORMY TITANS™ — LAKE REVEAL TOUCH + SCROLL FIX — 002-R23-FIX

   Confirmed issue in R23:
   body.st-lake-open used touch-action:none. On iOS, touch-action is
   resolved through the ancestor chain, so that blocked pan gestures
   even when .lake-you-links itself declared touch-action:pan-y.

   This correction:
   - keeps page-behind scroll locked with overflow:hidden;
   - DOES NOT disable touch gestures on the body;
   - gives the mobile Lake Reveal a definite height, not merely max-height;
   - makes the You links / Options scroll wrapper the actual scrollport.
   ============================================================ */

.lake-reveal.open{
  pointer-events:auto !important;
}

/* Keep menu controls hit-testable. */
.lake-reveal.open .lake-titlebar,
.lake-reveal.open .lake-scroll,
.lake-reveal.open .you-card,
.lake-reveal.open .lake-you-links,
.lake-reveal.open .lake-admin-links,
.lake-reveal.open a,
.lake-reveal.open button{
  pointer-events:auto !important;
}

/* Page behind the menu is locked, but touch-action is intentionally NOT
   disabled because that would also prevent descendant touch scrolling. */
body.st-lake-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

/* ---------------- You Lake Reveal ---------------- */
.lake-you.open{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.lake-you.open > .lake-titlebar,
.lake-you.open > .you-card,
.lake-you.open > .lake-admin-links{
  flex:0 0 auto !important;
}

.lake-you.open > .lake-you-links{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
}

/* ---------------- Options Lake Reveal ---------------- */
.lake-options.open{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.lake-options.open > .lake-titlebar{
  flex:0 0 auto !important;
}

.lake-options.open > .lake-scroll{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
}

/* iPhone/mobile: max-height alone is insufficient to create a reliable
   flex scrollport when the content determines the parent's auto height.
   Give the open Lake Reveal an actual bounded height. */
@media(max-width:700px){
  .lake-you.open,
  .lake-options.open{
    height:calc(
      var(--st-vvh,100dvh)
      - 80px
      - 118px
      - env(safe-area-inset-bottom)
    ) !important;

    max-height:calc(
      var(--st-vvh,100dvh)
      - 80px
      - 118px
      - env(safe-area-inset-bottom)
    ) !important;

    min-height:0 !important;
  }
}

/* ============================================================
   R23 DESKTOP CORRECTION
   Desktop Lake Reveals use natural document height.
   The fixed-height flex scrollport behavior is mobile-only.
   ============================================================ */

@media(min-width:701px){

  .lake-options.open,
  .lake-you.open{
    display:block !important;
  }

  .lake-options.open > .lake-scroll{
    max-height:calc(min(72vh,700px) - 48px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .lake-you.open > .lake-you-links{
    max-height:calc(min(72vh,700px) - 146px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

}
/* ============================================================
   R23 DESKTOP SCROLLBAR STABILITY
   Keep the desktop viewport width stable while a Lake Reveal
   is open. Mobile retains the original page-behind scroll lock.
   ============================================================ */

@media(min-width:701px){

  html{
    overflow-y:scroll;
  }

  body.st-lake-open{
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overscroll-behavior:auto !important;
  }

}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r24-home-strip-presence-dot.css
   ============================================================ */
/* STORMY TITANS — HOME TOP CHARACTER STRIP PRESENCE DOT — 002-R24
   Only the first/top Home character strip is affected.
   Larger Story Universe character cards are intentionally untouched. */

.strip-avatar .presence-dot {
    top: auto !important;
    left: auto !important;
    right: 6px !important;
    bottom: 6px !important;
}

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r25-home-ai-badge-browser-tint.css
   ============================================================ */
/* ============================================================
   PATH:
   /software/stormy-titans-v1/assets/css/r25-home-ai-badge-browser-tint.css

   STORMY TITANS™ — R25 PLACEHOLDER — 002-R25

   PURPOSE
   Preserve the historical R25 revision slot in the stylesheet
   chain without changing the current Stormy Titans appearance.

   NOTES
   - The former Home AI badge treatment is intentionally inactive.
   - The current browser-surround tint must remain unchanged.
   - Future tint work may be moved into this revision deliberately,
     but only after comparing against the current R26 appearance.
   - Do not add active AI badge styling here unless that feature is
     intentionally restored.
   ============================================================ */

/*
 * PLACEHOLDER ONLY.
 *
 * No active CSS rules in R25.
 *
 * Browser tinting is currently controlled by later/current styles,
 * including R26. Preserve the existing visual result.
 */

/* ============================================================
   FORMER FILE: /software/stormy-titans-v1/assets/css/r26-browser-tint-header-line.css
   ============================================================ */
/* 002-R26 — exact colors/treatment reused from mobile dock */
:root{--st-browser-surround:#0b4c7d}
html,body,body.st-app-body{background-color:#0b4c7d !important}
body::before,body.st-app-body::before{background:#0b4c7d !important}
body::after,body.st-app-body::after{background:#063b64 !important}
.stormy-head{border-top:1px solid rgba(255,255,255,.65) !important}

/* ============================================================
   R38 — OPTIONS TITLEBAR UTILITIES + LANGUAGE TAKEOVER

   PURPOSE
   - Add white square borders to ↑ / 🇺🇸 / × controls.
   - Highlight the Language button yellow while active.
   - Style the full Language Menu takeover inside Options.
   ============================================================ */

.lake-options-titlebar{
  gap:10px;
}

.lake-options-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lake-titlebar-tools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.lake-titlebar .lake-title-tool{
  box-sizing:border-box !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;

  margin:0 !important;
  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid #fff !important;
  border-radius:3px !important;

  background:transparent !important;
  color:#fff !important;

  text-decoration:none !important;
  font-weight:900 !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.lake-titlebar .lake-exit-tool{
  font-size:1.4rem !important;
}

.lake-titlebar .lake-language-tool{
  font-size:1.18rem !important;
}

.lake-titlebar .lake-close-tool{
  font-size:1.6rem !important;
}

/* Same active yellow recipe as the Training button. */
.lake-titlebar .lake-language-tool.is-active{
  background:var(--st-training-yellow,#ffe000) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink,#071521) !important;
  box-shadow:0 0 14px rgba(255,224,0,.36) !important;
}

.lake-language-view[hidden],
.lake-options-view[hidden]{
  display:none !important;
}

.lake-language-view{
  min-height:100%;
  background:#0a263c;
}

.lake-language-list{
  display:grid;
}

.lake-language-item{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;

  padding:8px 12px;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.12);

  background:#0a263c;
  color:#fff;

  text-align:left;
  cursor:pointer;
}

.lake-language-item:hover,
.lake-language-item:focus-visible{
  background:#10334e;
}

.lake-language-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;

  border-radius:50%;
  background:#3379ac;

  color:#fff;
  font-size:1.15rem;
}

.lake-language-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
}

.lake-language-code{
  color:#a9bfd0;
  font-size:.7rem;
  white-space:nowrap;
}

.lake-language-empty{
  padding:18px;
  text-align:center;
}

@media(max-width:390px){
  .lake-options-titlebar{
    padding-left:10px !important;
    padding-right:8px !important;
  }

  .lake-titlebar-tools{
    gap:4px;
  }

  .lake-titlebar .lake-title-tool{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

/* ============================================================
   R40 — HEADER WORDMARK TIGHTENING

   PURPOSE
   Bring STORMY and TITANS closer to the center Sigil without
   moving the outer Options opener or Account avatar controls.
   ============================================================ */

.stormy-head-inner > .stormy-word:nth-child(2){
  justify-self:end !important;
  margin-right:4px !important;
}

.stormy-head-inner > .stormy-word:nth-child(4){
  justify-self:start !important;
  margin-left:4px !important;
}

@media(max-width:700px){
  .stormy-head-inner > .stormy-word:nth-child(2){
    margin-right:2px !important;
  }

  .stormy-head-inner > .stormy-word:nth-child(4){
    margin-left:2px !important;
  }
}

/* ============================================================
   R39.2 RECOVERY — ACCOUNT MENU SECURITY CONTROL

   PURPOSE
   Restore the Security Settings titlebar control after recovery
   of addendum.css.

   - Lock and Close controls use matching square dimensions.
   - Security takeover is hidden until activated.
   - Active Lock uses the canonical Training yellow treatment.
   ============================================================ */

.lake-you-titlebar{
  gap:10px;
}

.lake-you-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lake-you-titlebar .lake-security-tool,
.lake-you-titlebar .lake-close-tool{
  box-sizing:border-box !important;

  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  max-width:36px !important;
  max-height:36px !important;

  flex:0 0 36px !important;

  margin:0 !important;
  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid #fff !important;
  border-radius:3px !important;

  background:transparent !important;
  color:#fff !important;

  line-height:1 !important;
}

.lake-you-titlebar .lake-security-tool{
  font-size:1rem !important;
  cursor:pointer !important;
}

.lake-you-titlebar .lake-close-tool{
  font-size:1.6rem !important;
}

/* Same active yellow treatment used by Training. */
.lake-you-titlebar .lake-security-tool.is-active{
  background:var(--st-training-yellow,#ffe000) !important;
  border-color:#fff27a !important;
  color:var(--st-training-ink,#071521) !important;
  box-shadow:0 0 14px rgba(255,224,0,.36) !important;
}

.lake-you-normal-view[hidden],
.lake-security-view[hidden]{
  display:none !important;
}

.lake-you-normal-view,
.lake-security-view{
  min-height:0;
}

.lake-security-view{
  background:#0a263c;
}

.lake-security-links{
  background:#0a263c !important;
}

.lake-security-empty{
  padding:18px;
  text-align:center;
}

@media(max-width:390px){
  .lake-you-titlebar{
    padding-left:10px !important;
    padding-right:8px !important;
  }

  .lake-you-titlebar .lake-security-tool,
  .lake-you-titlebar .lake-close-tool{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    flex-basis:34px !important;
  }
}

/* ============================================================
   R40.1 — YOU / SECURITY TAKEOVER SCROLL CONTAINMENT

   PURPOSE
   Restore proper internal scrolling after the R39 Security
   takeover introduced wrapper views around Account Menu content.

   The Lake Reveal stays inside the visible viewport while the
   Account Menu or Security Settings content scrolls internally.
   ============================================================ */

.lake-you.open{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:visible !important;
}

.lake-you.open > .lake-titlebar{
  flex:0 0 auto !important;
}

/* Both takeover modes occupy the remaining Lake height. */
.lake-you.open > .lake-you-normal-view,
.lake-you.open > .lake-security-view{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
}

/* Normal Account Menu becomes its own flex stack:
   fixed member card + internally scrolling links. */
.lake-you-normal-view:not([hidden]){
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.lake-you-normal-view > .you-card{
  flex:0 0 auto !important;
}

.lake-you-normal-view > .lake-you-links{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
}

/* Security takeover uses the same bounded scrolling behavior. */
.lake-security-view:not([hidden]){
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

.lake-security-view > .lake-security-links{
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
}

/* Preserve hidden takeover state despite the flex rules above. */
.lake-you-normal-view[hidden],
.lake-security-view[hidden]{
  display:none !important;
}