/* 320 FM F2.3.10 — unified public shell + safe gutters
   1480px is the actual visible content width. The shell adds a controlled
   horizontal gutter without pushing route content directly against the edge. */
:root{
  --f2-content-max:1480px;
  --f2-shell-gutter:24px;
  --f2-shell-outer-max:calc(var(--f2-content-max) + (var(--f2-shell-gutter) * 2));
}

/* One geometry for header, public content and persistent player.
   box-sizing keeps the inner visible content at exactly 1480px on large screens. */
.f2-header .f2-header-inner,
.f2-header .shell.topin,
main.shell.main,
main.shell.main:has(.f2-home),
main.shell.main.f2-main-residents,
#live-player .fm-player-shell.shell{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--f2-shell-outer-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--f2-shell-gutter)!important;
  padding-right:var(--f2-shell-gutter)!important;
}

/* Route templates fill the inner 1480px content canvas. They must not add a
   second horizontal max-width or remove the shell's safe gutter. */
main.shell.main>.f2-page,
main.shell.main>.f2-residents-page,
main.shell.main>.f2-resident-detail,
main.shell.main.f2-main-residents>.f2-page,
main.shell.main.f2-main-residents>.f2-residents-page,
main.shell.main.f2-main-residents>.f2-resident-detail{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Homepage panels may remain visually large, but their content follows the
   same inner axes as all other public routes. */
.f2-home,
.f2-home .f2-panel,
.f2-home .f2-footer{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-left:0!important;
  margin-right:0!important;
}

/* Defensive normalization for route wrappers that have legacy width rules. */
.f2-page,
.f2-residents-page,
.f2-resident-detail{
  box-sizing:border-box;
}

@media(max-width:820px){
  :root{--f2-shell-gutter:16px}
  .f2-page{padding-top:38px;padding-bottom:86px}
}
@media(max-width:520px){
  :root{--f2-shell-gutter:12px}
}