/* Laptop fit: scales the member console down on laptop-sized viewports.
   The persistent shell, the page root and Element's CSS-centred overlays are
   zoomed by the same factor so the fixed offsets (50px top bar, 180/200px
   navigation) stay aligned. Anything else appended to <body> keeps its size:
   popper.js, captcha widgets and html2pdf position themselves in screen pixels,
   which a zoomed ancestor would scale a second time. laptopFit.js bridges the
   widgets inside the zoomed area that mix screen and CSS pixels. */
:root { --ax-fit: 1; }
@media (min-width: 769px) and (max-width: 1680px), (min-width: 769px) and (max-height: 900px) {
  :root { --ax-fit: .9; }
}
@media (min-width: 769px) and (max-width: 1536px), (min-width: 769px) and (max-height: 800px) {
  :root { --ax-fit: .85; }
}
@media (min-width: 769px) and (max-width: 1366px), (min-width: 769px) and (max-height: 700px) {
  :root { --ax-fit: .8; }
}
/* 1366x768 panels at 100% scaling render small text soft; keep text at >= 90%. */
@media (min-width: 769px) and (max-width: 1536px) and (max-resolution: 1.2dppx),
       (min-width: 769px) and (max-height: 800px) and (max-resolution: 1.2dppx) {
  :root { --ax-fit: .9; }
}

html.ax-console body > #ax-persistent-shell,
html.ax-console body > :has(.el-main, el-main),
html.ax-console body > .ax-page-stage,
html.ax-console body > :is(.el-dialog__wrapper, .el-message-box__wrapper, .el-drawer__wrapper, .el-message, .el-notification) {
  zoom: var(--ax-fit);
}
/* Pages are built off-screen in the stage before being moved into <body>;
   give them the same layout width they will have once attached. */
html.ax-console .ax-page-stage { width: calc(100vw / var(--ax-fit)); }
/* Inside a zoomed box 100vh is scaled too; divide it back out so the
   navigation still reaches the bottom edge. */
html.ax-console body .el-aside,
html.ax-console body .member-home > .el-container > .el-aside {
  height: calc(100vh / var(--ax-fit) - 50px) !important;
}

/* Account panel behind the avatar: compact, two-column menu, and never taller
   than the space under the top bar (it scrolls instead of leaving the screen). */
@media (min-width: 601px) {
  html.ax-console .ax-user-panel {
    top: 44px;
    width: 360px;
    max-height: calc(100vh / var(--ax-fit) - 56px);
    padding: 16px 18px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html.ax-console .ax-up-name strong { font-size: 17px; line-height: 24px; }
  html.ax-console .ax-up-badge { padding: 1px 8px; font-size: 12px; line-height: 18px; }
  html.ax-console .ax-up-id { margin: 6px 0 12px; font-size: 13px; line-height: 20px; }
  html.ax-console .ax-up-wallet { padding: 12px 16px 0; }
  html.ax-console .ax-up-wallet-main { padding-bottom: 10px; }
  html.ax-console .ax-up-wallet-label { font-size: 13px; line-height: 20px; }
  html.ax-console .ax-up-balance { margin-top: 2px; font-size: 22px; line-height: 30px; }
  html.ax-console .ax-user-panel .ax-up-recharge { min-width: 64px; height: 32px; padding: 0 14px; font-size: 13px; }
  html.ax-console .ax-up-wallet-foot { padding: 8px 0 10px; font-size: 12px; line-height: 18px; }
  html.ax-console .ax-up-stats { padding: 12px 0; }
  html.ax-console .ax-user-panel .ax-up-stats a { gap: 2px; }
  html.ax-console .ax-up-stats b { font-size: 18px; line-height: 24px; }
  html.ax-console .ax-up-stats span { font-size: 12px; line-height: 18px; }
  html.ax-console .ax-up-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 4px 0; }
  html.ax-console .ax-up-group:last-child { grid-template-columns: 1fr; }
  html.ax-console .ax-user-panel .ax-up-item { gap: 10px; height: 34px; font-size: 13px; white-space: nowrap; }
  html.ax-console .ax-up-ico { width: 16px; height: 16px; }
}