@import url("./theme-tokens.css?v=20260925-2");

/*
 * Shared Product Design mobile shell
 *
 * All reviewed pages use one fixed-height iPhone 15 presentation. The width
 * is derived from the measured screen and shell heights in mobile-shell.js;
 * page styles consume --mobile-shell-content-width instead of carrying a
 * page-specific fixed-width canvas.
 */
:root {
  /* H_screen = 760px; H_shell = 778px. iPhone 15 ratios: 1179:2556 and
     71.6:147.6. The 4px content inset accounts for the screen border and the
     existing one-pixel centering gutter on each side. */
  --mobile-shell-screen-width: 350.56px;
  --mobile-shell-shell-width: 364.98px;
  --mobile-shell-frame-inset: 6.21px;
  --mobile-shell-content-width: 346.56px;
  --mobile-shell-height: 760px;
  --mobile-shell-statusbar-height: 25px;
  --mobile-shell-bottom-height: 62px;
  --mobile-shell-chrome-alpha: 0;
  --mobile-shell-chrome-blur: 0px;
}

body.mobile-shell {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--wm-color-ink);
  background: var(--wm-color-app-bg);
}

body.mobile-shell .device-stage {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
  justify-content: center;
  padding: 24px max(0px, calc((100vw - var(--mobile-shell-shell-width)) / 2)) 32px;
}

body.mobile-shell .device-frame {
  position: relative;
  width: var(--mobile-shell-shell-width);
  height: calc(var(--mobile-shell-height) + 18px);
  padding: 9px var(--mobile-shell-frame-inset);
  background: var(--wm-color-app-bg);
  border: 1px solid var(--wm-color-line-strong);
  border-radius: 38px;
  box-shadow: 0 19px 42px rgba(var(--wm-action-rgb), .14), 0 2px 8px rgba(var(--wm-ink-rgb), .08);
}

body.mobile-shell .device-frame::before {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 68px;
  height: 6px;
  content: "";
  background: var(--wm-color-primary-soft-strong);
  border-radius: 999px;
  transform: translateX(-50%);
}

body.mobile-shell .device-screen {
  position: relative;
  width: var(--mobile-shell-screen-width);
  overflow: hidden;
  height: var(--mobile-shell-height);
  min-height: 0;
  background: var(--canvas, var(--wm-color-canvas));
  border: 1px solid rgba(var(--wm-primary-rgb), .22);
  border-radius: 30px;
  --chrome-alpha: var(--mobile-shell-chrome-alpha);
  --chrome-blur: var(--mobile-shell-chrome-blur);
}

body.mobile-shell .device-statusbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 12;
  display: flex;
  width: var(--mobile-shell-content-width);
  height: var(--mobile-shell-statusbar-height);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 5px 18px 0;
  color: var(--ink, var(--wm-color-ink));
  background: rgba(255, 255, 255, var(--chrome-alpha));
  backdrop-filter: blur(var(--chrome-blur));
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .86);
  transition: background-color .05s linear, box-shadow .05s linear;
}

body.mobile-shell .device-time { display: block; }

body.mobile-shell .device-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 10px;
}

body.mobile-shell .device-signal {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  width: 10px;
  height: 10px;
}

body.mobile-shell .device-signal i {
  display: block;
  width: 2px;
  background: var(--ink, var(--wm-color-ink));
  border-radius: 2px;
}

body.mobile-shell .device-signal i:nth-child(1) { height: 3px; }
body.mobile-shell .device-signal i:nth-child(2) { height: 5px; }
body.mobile-shell .device-signal i:nth-child(3) { height: 7px; }
body.mobile-shell .device-signal i:nth-child(4) { height: 9px; }

body.mobile-shell .device-wifi {
  position: relative;
  display: block;
  width: 13px;
  height: 10px;
  overflow: hidden;
}

body.mobile-shell .device-wifi::before,
body.mobile-shell .device-wifi::after {
  position: absolute;
  left: 50%;
  content: "";
  border: 1.4px solid var(--ink, var(--wm-color-ink));
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}

body.mobile-shell .device-wifi::before { top: 0; width: 13px; height: 9px; }
body.mobile-shell .device-wifi::after { top: 3px; width: 7px; height: 5px; }

body.mobile-shell .device-wifi i {
  position: absolute;
  right: 5px;
  bottom: 0;
  display: block;
  width: 3px;
  height: 3px;
  background: var(--ink, var(--wm-color-ink));
  border-radius: 50%;
}

body.mobile-shell .device-battery {
  position: relative;
  display: block;
  width: 16px;
  height: 9px;
  border: 1.2px solid var(--ink, var(--wm-color-ink));
  border-radius: 2px;
}

body.mobile-shell .device-battery::after {
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 3px;
  content: "";
  background: var(--ink, var(--wm-color-ink));
  border-radius: 0 1px 1px 0;
}

body.mobile-shell .device-battery i {
  display: block;
  width: 10px;
  height: 5px;
  margin: 1px;
  background: var(--ink, var(--wm-color-ink));
  border-radius: 1px;
}

body.mobile-shell .reference-page {
  height: calc(100% - var(--mobile-shell-statusbar-height));
  margin-top: var(--mobile-shell-statusbar-height);
}

body.mobile-shell .reference-scroll,
body.mobile-shell .ranking-main,
body.mobile-shell .group-main {
  scrollbar-width: none;
  overscroll-behavior: contain;
}

body.mobile-shell .reference-scroll::-webkit-scrollbar,
body.mobile-shell .ranking-main::-webkit-scrollbar,
body.mobile-shell .group-main::-webkit-scrollbar { display: none; }

body.mobile-shell .ranking-topbar,
body.mobile-shell .group-topbar {
  background: rgba(255, 255, 255, var(--chrome-alpha));
  border-bottom-color: rgba(var(--wm-primary-rgb), calc(var(--chrome-alpha) * .2));
  backdrop-filter: blur(var(--chrome-blur));
  box-shadow: 0 2px 10px rgba(var(--wm-ink-rgb), calc(var(--chrome-alpha) * .08));
  text-shadow: 0 1px 8px rgba(255, 255, 255, .86);
  transition: background-color .05s linear, border-color .05s linear, box-shadow .05s linear;
}

body.mobile-shell .mobile-bottom-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  width: var(--mobile-shell-content-width);
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -3px 12px rgba(var(--wm-ink-rgb), .06);
}

body.mobile-shell .mobile-bottom-nav > img {
  display: block;
  width: 100%;
  height: auto;
}

body.mobile-shell .mobile-bottom-hit {
  position: absolute;
  top: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 2;
  display: block;
  width: 25%;
  padding: 0;
  background: transparent;
  border: 0;
}

body.mobile-shell .mobile-bottom-hit--home { left: 0; }
body.mobile-shell .mobile-bottom-hit--group { left: 25%; }
body.mobile-shell .mobile-bottom-hit--after { left: 50%; }
body.mobile-shell .mobile-bottom-hit--mine { left: 75%; }

body.mobile-shell .device-screen[data-shell-bottom-nav="hidden"] .mobile-bottom-nav {
  display: none;
}