:root {
      --background: #ffffff;
      --menu-background: #ffffff;
      --icon-color: #000000;
      --brand-color: #000000;
      --accent: #f4c430;
      --accent-soft: #fff4bf;
      --on-accent: #000000;
      --flyout-background: var(--accent);
      --floating-shadow: 0 5px 14px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 6%);
      --menu-width: 390px;
      --menu-height: 76px;
      --menu-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color-scheme: light;
      background: var(--background);
    }
    /* Transparent top navigation with a left-aligned black wordmark. */
    .app-header {
      padding-top: env(safe-area-inset-top, 0px);
      background: transparent;
    }

    .top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 76px;
      padding: 20px max(24px, env(safe-area-inset-right, 0px)) 20px max(24px, env(safe-area-inset-left, 0px));
      background: transparent;
      border: 0;
      box-shadow: none;
      text-align: left;
    }

    .app-title {
      margin: 0;
      color: var(--brand-color);
      font-size: clamp(26px, 4.5vw, 32px);
      font-weight: 850;
      line-height: 1;
      letter-spacing: -1.25px;
    }

    .profile-button {
      display: grid;
      place-items: center;
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--menu-background);
      color: var(--icon-color);
      cursor: pointer;
      appearance: none;
      touch-action: manipulation;
    }

    /* Full-height account drawer that slides in from the right edge. */
    .profile-control {
      position: relative;
      z-index: 20;
      flex: 0 0 40px;
    }

    .profile-menu {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(340px, calc(100vw - 40px));
      max-width: none;
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      margin: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0;
      border: 0;
      border-radius: 24px 0 0 24px;
      background: var(--flyout-background);
      color: var(--on-accent);
      box-shadow: -8px 0 32px rgb(0 0 0 / 18%);
    }

    .profile-menu[open] { display: flex; flex-direction: column; }
    .profile-menu::backdrop { background: rgb(0 0 0 / 35%); }
    html.drawer-open,
    html.drawer-open body { overflow: hidden; overscroll-behavior: none; }

    .profile-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 20px 22px 26px;
      border-bottom: 1px solid rgb(0 0 0 / 12%);
    }

    .profile-drawer-header h2 { margin: 0; font-size: 24px; font-weight: 600; }
    .profile-drawer-links { display: grid; gap: 5px; padding: 20px 14px; }

    .profile-drawer-close {
      display: grid;
      place-items: center;
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid rgb(0 0 0 / 16%);
      border-radius: 50%;
      background: rgb(0 0 0 / 5%);
      color: var(--on-accent);
      cursor: pointer;
      touch-action: manipulation;
    }

    .profile-drawer-close:hover { background: rgb(0 0 0 / 10%); }
    .profile-drawer-close:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 3px; }

    @keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
    @keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
    @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }

    @media (prefers-reduced-motion: no-preference) {
      .profile-menu[open] { animation: drawer-in 240ms cubic-bezier(.2, .8, .2, 1) both; }
      .profile-menu[open]::backdrop { animation: backdrop-in 240ms ease both; }
      .profile-menu[open].is-closing { animation: drawer-out 180ms ease-in both; }
      .profile-menu[open].is-closing::backdrop { animation: backdrop-out 180ms ease both; }
    }

    .profile-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--on-accent);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      cursor: pointer;
      touch-action: manipulation;
    }

    .profile-menu-item:hover,
    .profile-menu-item:focus { background: rgb(0 0 0 / 8%); }

    .profile-menu-item:focus-visible {
      outline: 2px solid var(--on-accent);
      outline-offset: -3px;
    }

    .profile-menu-item svg,
    .profile-drawer-close svg {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    /* Floating white menu. Keeps clear of the phone's home indicator. */
    .bottom-menu {
      position: fixed;
      z-index: 10;
      left: 50%;
      bottom: var(--menu-bottom);
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
      width: min(var(--menu-width), calc(100% - 36px));
      min-height: var(--menu-height);
      padding: 8px 12px;
      border-radius: 28px;
      background: var(--menu-background);
      box-shadow: var(--floating-shadow);
    }

    .menu-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-width: 44px;
      height: 56px;
      margin: 0;
      padding: 0 0 3px;
      border: 0;
      border-radius: 17px;
      background: transparent;
      color: var(--icon-color);
      cursor: pointer;
      appearance: none;
      touch-action: manipulation;
    }

    .menu-button svg,
    .profile-button svg {
      display: block;
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .profile-button svg {
      width: 22px;
      height: 22px;
    }

    /* Yellow highlights identify the selected icon. */
    .menu-button::after {
      content: "";
      position: absolute;
      bottom: 4px;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      transform: translateX(-50%);
      opacity: 0;
    }

    .menu-button[aria-pressed="true"] { background: var(--accent-soft); }
    .menu-button[aria-pressed="true"]::after { opacity: 1; }

    .menu-button:focus-visible,
    .profile-button:focus-visible {
      outline: 2px solid var(--icon-color);
      outline-offset: -3px;
    }

    @media (hover: hover) {
      .menu-button:hover { background: var(--accent-soft); }
    }

    @media (max-width: 360px) {
      .bottom-menu { width: calc(100% - 28px); padding-inline: 9px; }
      .top-nav { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
    }
  

/* Explicit dimensions override the shared forms' 48px minimum height. */
#pen-navigation { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
#pen-navigation .profile-drawer-close {
  box-sizing:border-box; width:44px; height:44px; min-width:44px; min-height:44px;
  max-width:44px; max-height:44px; flex:0 0 44px; aspect-ratio:1;
  padding:0; margin:0; border-radius:50%; appearance:none; line-height:1;
}
#pen-navigation .app-header {display:block;border:0;padding-bottom:0}
#pen-navigation .top-nav {margin:0 auto;max-width:1000px;flex-wrap:nowrap}
#pen-navigation .bottom-menu {margin:0}
#pen-navigation .profile-drawer-header {position:sticky;top:0;z-index:1;background:var(--flyout-background);padding:18px 20px 18px 24px;border-bottom:1px solid rgb(0 0 0 / 12%)}
#pen-navigation .profile-drawer-header h2 {font-size:24px;margin:0}
#pen-navigation .profile-drawer-links {display:grid;margin:0;padding:12px;gap:2px}
#pen-navigation .profile-menu-item {margin:0;border:0;width:100%;min-height:48px;flex:none;text-align:left;text-decoration:none;padding:12px 14px;font-weight:500}
#pen-navigation .profile-menu-item span {font:inherit;letter-spacing:normal;color:inherit}
#pen-navigation .profile-menu-item[href] {padding-left:14px}
#pen-navigation .profile-menu-item[href="national.html?view=teams"] {border-top:1px solid rgb(0 0 0 / 12%);border-radius:0;margin-top:8px;padding-top:18px}
#pen-navigation .drawer-context {padding:0 26px 18px}
#pen-navigation .drawer-context select {font-size:14px;background:#fff9df}
#pen-navigation #logout {margin:0 24px 24px;width:calc(100% - 48px);background:transparent;border:1px solid #171717;flex-shrink:0}
#pen-navigation [hidden] {display:none!important}