/* 详情浮层(团队 / JD)—— @modal 插槽外框。
   设计系统 §5 modal:backdrop rgba(15,23,42,0.38)+blur(8px),容器 r-3xl(24)
   squircle + shadow-modal + .22s rise,ease cubic-bezier(.2,0,0,1)。
   z-index 90:高于 sidebar(30),低于「发信号」弹窗(.us-modal-backdrop=100,portal
   到 body),保证浮层里的 JD 点发信号时弹窗能正确叠在浮层之上。 */

.ov-root {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: rgba(15, 23, 42, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: ov-fade-in 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.ov-root.is-active {
  display: flex;
}
@keyframes ov-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ov-dialog {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: min(880px, calc(100dvh - 96px));
  background: #ffffff;
  border-radius: 24px;
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: ov-rise 0.22s cubic-bezier(0.2, 0, 0, 1);
}
/* tabIndex=-1 + 打开时 .focus() 把焦点移进浮层(a11y);容器本身不显示聚焦轮廓。 */
.ov-dialog:focus {
  outline: none;
}
@keyframes ov-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 内容滚动区。position:relative + z-index:0 自建 stacking context,把团队/JD
   内容里那些高 z-index 的吸顶 nav / 内嵌元素都圈在内层,不会盖过 .ov-chrome。 */
.ov-scroll {
  position: relative;
  z-index: 0;
  height: 100%;
  overflow-y: auto;
  /* 禁止横向滚动:团队/JD 整页里有按视口宽度(100vw)铺的装饰元素(如吸顶 nav
     的 .t4-nav::after 分隔线),在窄面板里会顶出横向滚动条。clip 裁掉、不创建
     横向滚动容器。JD 的 .jd-page 自己已经 overflow-x:clip,这里给团队的内层
     滚动容器 .t4-scroll 也补上。 */
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ov-scroll .t4-scroll {
  overflow-x: clip;
}
/* JD 整页 min-height:100vh 是给独立页视口用的,塞进面板会撑出空白 —— 改成填满
   滚动区即可。 */
.ov-scroll .jd-page {
  min-height: 100%;
}
/* JD 在浮层里:整页版顶 padding 只有 56px,配独立页那个 fixed 返回按钮够用;但浮层
   顶栏(返回 + ⤢/✕,约 64px)会贴住 JD 标题,太挤。补到 96px 让标题落在顶栏下方、
   留出呼吸间距(和团队页 topcard 的 96px 上边距对齐)。 */
.ov-scroll .jd-main {
  padding-top: 96px;
}
/* 浮层里收紧底部留白 —— 独立整页保留原间距(120 + 32 给整页呼吸感),浮层面板
   不需要那么空,各砍一半(120→60、32→16),滚到底的空白减少 ~50%。 */
.ov-scroll .t4-doc {
  padding-bottom: 60px;
}
.ov-scroll .ft-icp {
  padding-bottom: 16px;
}
/* 吸顶时,团队的「最近新闻/创始团队」吸顶 nav 与左上「返回」、右上 ⤢/✕ 对齐到
   同一条水平中线:三组各自垂直居中在 64px 高的顶栏里 —— chrome 是 top:14 + 高36,
   中线在 32px(=64/2);nav-inner 用 64px 高 + align-items:center,中线同样 32px。 */
.ov-scroll .t4-nav-inner {
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

/* 浮层里隐藏团队/JD 页自带的固定按钮:
   - .t4-back-btn / .jd-back-btn:position:fixed 会被 .ov-root 的 backdrop-filter
     锚到视口角(逃出面板),而且是裸 <Link href="/">,点了会重置首页滚动 ——
     正是本功能要避免的。浮层用自己的 .ov-back(走 scroll-preserving 的 close)。
   - .t4-owner-edit:固定在右上角,会和 .ov-chrome 撞;浮层里先收起,owner 可在
     整页(全屏展开 / 直链)编辑。 */
.ov-scroll .t4-back-btn,
.ov-scroll .t4-owner-edit,
.ov-scroll .jd-back-btn {
  display: none;
}

/* 左上角返回 —— 钉在面板左上(对称于右上 chrome),内容滚动时不动。
   team:← 返回到找工地图(走 close,保留首页滚动);JD:← 返回(router.back 回团队)。 */
.ov-back {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 10;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  /* 参考 App Store 返回按钮:纯白底、无描边、靠重阴影撑起层次(也契合设计系统
     §1.4 白底+阴影、不用 border)。 */
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.15s cubic-bezier(0.2, 0, 0, 1),
    background 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.ov-back svg {
  color: #86868b;
  flex: 0 0 auto;
}
.ov-back:hover {
  background: #fafafa;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 10px 28px rgba(0, 0, 0, 0.18);
}
.ov-back:active {
  transform: scale(0.97);
}

/* 右上角 chrome —— 全屏 / 关闭。钉在容器右上,内容滚动时不动。 */
.ov-chrome {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ov-btn {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* 圆形 + 浅灰底 + 深色图标 + EFEFEF@0.5 描边。 */
  border: 1px solid rgba(239, 239, 239, 0.5);
  border-radius: 999px;
  cursor: pointer;
  color: #1d1d1f;
  background: #f0f0f0;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.ov-btn:hover {
  background: #e6e6e6;
}
.ov-btn:active {
  transform: scale(0.94);
}

/* 移动端(≤720)—— 浮层铺满成整屏 sheet,首页仍在背后保留滚动位置。 */
@media (max-width: 720px) {
  .ov-root {
    padding: 0;
  }
  .ov-dialog {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ov-root,
  .ov-dialog {
    animation: none;
  }
  .ov-btn {
    transition: none;
  }
}