/* Final Control Center PWA shell polish.
   Keep iPhone safe-area chrome outside the app header, strengthen typography,
   and preserve the Midnight Blue shell/light-card contrast used across Ethen Norton. */

:root{
  --en-midnight:#12264a;
  --en-midnight-line:#29466f;
}

html:has(body.control-center){
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--en-midnight);
}

body.control-center{
  width:100%;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  margin:0;
  padding-top:env(safe-area-inset-top,0px);
  overflow:hidden;
  background:var(--en-midnight);
}

/* The safe area is its own solid Midnight Blue strip; the header begins below
   the iOS status/Dynamic Island area instead of bleeding into it. */
.control-center .hub-header{
  position:relative;
  top:auto;
  flex:0 0 auto;
  width:100%;
  min-height:76px;
  padding:14px max(24px,calc((100vw - 1152px)/2));
  background:var(--en-midnight);
  border-bottom:1px solid var(--en-midnight-line);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.control-center .hub-header .brand{
  font-weight:700;
  letter-spacing:-.02em;
}
.control-center .hub-header .brand>span:last-child{font-weight:700}
.control-center .hub-header .brand small{
  font-weight:500;
  letter-spacing:0;
}
.control-center .hub-header .brand-mark{font-weight:700}
.control-center #hub-menu{font-weight:700}

/* Use the available Poppins bold weight intentionally rather than relying on
   500/600 interpolation for key UI hierarchy. */
.control-center .auth-card .eyebrow,
.control-center .heading h1,
.control-center .auth-card h1,
.control-center .panel h2,
.control-center .section-heading h2,
.control-center .site-card h3,
.control-center .metrics span,
.control-center button.primary,
.control-center .badge{
  font-weight:700;
}
.control-center .intro,
.control-center label,
.control-center .site-detail strong{font-weight:500}
.control-center .metrics strong{font-weight:700}

.control-center main{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  background:var(--en-midnight);
}

/* Keep the footer visually closer to the content while leaving enough room
   above the iPhone home indicator. */
.control-center main>footer{
  margin-top:14px;
  padding-top:10px;
  padding-bottom:max(32px,calc(20px + env(safe-area-inset-bottom,0px)));
  color:#c7d3e4;
}

@media(max-width:600px){
  body.control-center{
    /* A little more breathing room than the status-bar inset alone provides. */
    padding-top:max(22px,calc(env(safe-area-inset-top,0px) + 12px));
  }
  .control-center .hub-header{
    min-height:70px;
    padding:11px max(16px,env(safe-area-inset-left,0px)) 12px max(16px,env(safe-area-inset-right,0px));
  }
  .control-center .hub-header .brand{
    gap:10px;
    font-size:15px;
  }
  .control-center .hub-header .brand-mark{
    width:38px;
    height:38px;
    font-size:14px;
  }
  .control-center .hub-header .brand small{
    margin-top:2px;
    font-size:11px;
  }
  .control-center #hub-menu{
    min-height:44px;
    padding:9px 13px;
    font-size:13px;
  }

  /* Keep a guaranteed Midnight Blue gutter between the app header and first card. */
  .control-center main{
    padding-top:20px!important;
    scroll-padding-top:20px;
  }
  .control-center .auth-card{
    margin-top:0!important;
    scroll-margin-top:20px;
  }
  .control-center .auth-card h1{font-weight:700}
  .control-center .eyebrow{font-weight:700}
  .control-center main>footer{
    margin-top:10px;
    padding-bottom:max(38px,calc(24px + env(safe-area-inset-bottom,0px)));
  }
}

/* Short iPhone landscape and zoomed accessibility layouts retain the same
   compact shell instead of falling back to oversized desktop spacing. */
@media(max-height:600px) and (orientation:landscape){
  body.control-center{
    padding-top:max(12px,calc(env(safe-area-inset-top,0px) + 6px));
  }
  .control-center .hub-header{
    min-height:58px;
    padding:7px max(18px,env(safe-area-inset-left,0px)) 8px max(18px,env(safe-area-inset-right,0px));
  }
  .control-center .hub-header .brand{gap:9px;font-size:14px}
  .control-center .hub-header .brand-mark{width:36px;height:36px;font-size:13px}
  .control-center .hub-header .brand small{font-size:10px;margin-top:1px}
  .control-center #hub-menu{min-height:42px;padding:8px 12px;font-size:12px}
  .control-center main{padding-top:14px!important}
  .control-center .auth-card{margin-top:0!important}
  .control-center main>footer{padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
}