/* ==========================================================================
   iOS 窗口层（v7.5.0）—— 用户中心 = 「窗口内多屏 + iOS 导航栏 + 折叠大标题」
   --------------------------------------------------------------------------
   **唯一真源是实验版** `ui-v7-mono`：
     · 结构 / 类名 / 行高 / 圆角 / 动效   ← ui-v7-mono/js/demo.js
         buildIosScreen() / profileRow() / meContent() / settingsContent() / bindIosScreen()
     · 样式                              ← ui-v7-mono/css/mono.css
         第 6 节  分段控件（.tabs / .tab）
         第 13 节 iOS Switch（.ios-switch*）
         第 14 节 iOS 分组列表（.ios-group / .ios-list-row*）
         第 15 节 iOS 导航栏 + 折叠大标题（.ios-screen* / .ios-navbar* / .ios-large-title）
         第 16 节 账户窗口（.me-win* / .me-profile* / .ios-section-title / .ios-value）
   下面这些规则是从 mono.css **原样搬过来的**（数值、顺序、注释里的坑都一样），
   只在三处做了「站点兼容」处理，每处都单独标了 `站点兼容`，方便日后对照：
     ① apple-ui.css（本文件之前加载）里 .ios-group / .ios-list-row / .ios-switch 早有一套
        写法，属性冲突时**以 Demo 版为准**；
     ② 站点已有的 .ios-list-row__icon / .me-avatar-btn / .me-field 等**保留不动**；
     ③ 窗口内的滚动容器是 .ios-screen__scroll（Demo 的桌面窗口用的是 .me-win__scroll）。

   结构（由 core/accountWindow.js 生成）：
     .me-win（可拖动）
       ├ .me-win__head   手柄 + 标题（随屏变化）+ 完成
       └ .ios-screen
          ├ .ios-screen__scroll
          │  ├ .ios-navbar（返回 ‹ + 标题 + 完成）
          │  ├ h2.ios-large-title   ← 34px/700/-0.028em，滚动时只淡出 + 上移（不改高度）
          │  └ .ios-screen__content ← Inset Grouped List
   ========================================================================== */

/* ==========================================================================
   一、分段控件：iOS UISegmentedControl 的黑白版（mono.css 第 6 节）
   ========================================================================== */
.tabs {
  background: var(--bg-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.tab {
  border-radius: 7px;
  font-weight: 550;
  color: var(--text-secondary);
}
.tab:hover { background: transparent; color: var(--text-primary); }
.tab.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 列表里放分段控件（我的 → 主题 / 行规分总览；系统设置 → 外观） */
.ios-list-row .tabs { margin-left: auto; }

/* Demo 的分段控件比站点默认的小一号（vendor-base.css: min-height 32px / padding 0 12px），
   放进 44pt 的列表行才不会被撑高。display 显式用 inline-flex：站点 components.css 里是
   flex（会随行宽拉伸），Demo 里是 inline-flex（按内容宽度）。 */
.ios-list-row .tabs {
  display: inline-flex;
  flex: none;
}
.ios-list-row .tabs .tab {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* ==========================================================================
   二、iOS 开关（Switch 51×31，mono.css 第 13 节）
   --------------------------------------------------------------------------
   ⚠️ 用 `~`（一般兄弟）而不是 `+`（相邻兄弟）：这样 input 放在 label 里
   任何位置都能匹配 —— 之前用 `+` 且把 input 放在 track 后面，点击永远不生效。
   ========================================================================== */
.ios-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 站点兼容：apple-ui.css 把 .ios-switch 写成「独立 51×31 控件」（width/height 打在 label 上），
   Demo 里它是「一行列表 + 右侧开关」，不还原这两个尺寸整行会被压成 51px 宽。 */
.ios-switch {
  width: auto;
  height: auto;
}
.ios-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ios-switch__track {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 1px var(--border-default);
  transition: background-color var(--m-sheet) var(--ease-ios), box-shadow var(--m-hover) var(--ease-standard);
}
.ios-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: var(--radius-full);
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform var(--m-sheet) var(--ease-ios);
}
.ios-switch input:checked ~ .ios-switch__track {
  background: var(--success);
  box-shadow: none;
}
.ios-switch input:checked ~ .ios-switch__track .ios-switch__knob { transform: translateX(20px); }
.ios-switch input:focus-visible ~ .ios-switch__track {
  box-shadow: 0 0 0 1px var(--border-default), 0 0 0 4px var(--shadow-focus);
}
.ios-switch input:disabled ~ .ios-switch__track { opacity: 0.45; }
.ios-switch input:disabled ~ .ios-switch__track .ios-switch__knob { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }
.ios-switch__label { font-size: var(--text-md); color: var(--text-primary); }
.ios-switch__hint { display: block; font-size: var(--text-sm); color: var(--text-tertiary); }

/* 站点兼容：站点旧的 .ios-switch__track 用 ::after 画滑块，Demo 用的是显式
   <span class="ios-switch__knob">，两套同时存在会出现两个白圆点，这里关掉旧的。 */
.ios-switch__track::after { content: none; }

/* ==========================================================================
   三、iOS 分组列表（Inset Grouped List，mono.css 第 14 节）
   ========================================================================== */
.ios-group {
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.ios-group + .ios-group { margin-top: var(--space-4); }

.ios-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;                    /* iOS 最小行高 44pt */
  padding: 10px var(--space-4);
  background: transparent;
  text-align: left;
  color: var(--text-primary);
  font-size: var(--text-md);
  transition: background-color var(--m-hover) var(--ease-standard);
}
.ios-list-row + .ios-list-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-4);
  right: 0;
  height: var(--hairline);
  background: var(--border-subtle);
}
.ios-list-row:active { background: var(--bg-hover); }
.ios-list-row--destructive { color: var(--danger); }
.ios-list-row__text { flex: 1 1 auto; min-width: 0; }
.ios-list-row__value { font-size: var(--text-md); color: var(--text-tertiary); }
.ios-list-row__chevron { flex-shrink: 0; color: var(--text-tertiary); }
.ios-group__header {
  padding: var(--space-2) var(--space-4) 6px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.ios-group__footer {
  padding: 6px var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.45;
}

/* 站点兼容：apple-ui.css 早先用 border-top 画行间线（首行不画），
   Demo 用的是「从左侧 16px 起」的 ::before 发丝线。两条并存会叠成一条更粗的线。 */
.ios-list-row + .ios-list-row { border-top: 0; }
/* 站点兼容：apple-ui.css 的 row 是 cursor: default，Demo 里可点的行要给手型 */
a.ios-list-row,
button.ios-list-row {
  cursor: pointer;
  transition: background-color var(--m-hover) var(--ease-standard);
}
button.ios-list-row { font-family: var(--font-sans); }

/* ==========================================================================
   四、iOS 导航栏 + 折叠大标题（mono.css 第 15 节）
   ========================================================================== */
.ios-screen {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-app);
  overflow: hidden;
}
.ios-screen__scroll {
  height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ios-navbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-3);
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m-hover) var(--ease-standard);
}
.ios-navbar.is-scrolled { border-bottom-color: var(--border-subtle); }

/* 导航栏里的小标题：滚过大标题后才淡入（iOS 的做法） */
.ios-navbar__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--m-hover) var(--ease-standard), transform var(--m-hover) var(--ease-standard);
}
.ios-navbar.is-scrolled .ios-navbar__title { opacity: 1; transform: none; }

/* 返回键（iOS 的「‹ 上一级」） */
.ios-navbar__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 0 var(--space-2) 0 0;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  background: none;
  border: 0;
  cursor: pointer;
}
.ios-navbar__back:hover { opacity: 0.6; }

.ios-navbar__action {
  margin-left: auto;
  min-height: 30px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.ios-navbar__action:hover { opacity: 0.6; }

.ios-large-title {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--text-primary);
  transition: opacity var(--m-hover) var(--ease-standard), transform var(--m-hover) var(--ease-standard);
}
/*
   ⚠️ 大标题**只淡出/上移，不改高度**。
   之前写成 height:0 + padding:0 收起，滚动时内容变矮 → scrollTop 被浏览器夹回 0
   → is-scrolled 翻回 false → 大标题又展开 → 内容又变高 → 再滚……形成「一滚就被拉回去」
   的抖动死循环。真实 iOS 里大标题本来就在滚动内容里、随内容自然滚走，所以这里只做视觉收起。
*/
.ios-screen.is-scrolled .ios-large-title {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.ios-screen__content { padding: 0 var(--space-4) var(--space-4); }

/* 列表选中态：iOS 用淡灰 pill */
.ios-list-row.is-selected {
  background: var(--bg-active);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   五、窗口（.me-win，mono.css 第 16 节）
   --------------------------------------------------------------------------
   一个窗口同时承载多块 iOS 屏幕（我的 / 我的账号 / 修改密码 / 偏好设置 / 系统设置…）：
     · 标题栏可拖动（把手 + 标题 + 完成），完成 = 关闭窗口
     · 内容区是一块 iOS 屏幕：折叠大标题 + Inset Grouped List + iOS Switch
     · 子屏在**同一个窗口里**从右侧滑入，返回键逐级 pop（不叠第二个窗）
   ========================================================================== */
.me-win {
  position: fixed;
  z-index: var(--z-modal);
  width: 392px;
  max-width: calc(100vw - var(--space-6));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-default);
  background: var(--bg-glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: me-win-in var(--m-panel-in) var(--ease-ios) both;
}
.me-win.is-dragging { animation: none; }
/* 入场动画播完锁死，拖动/置顶都不会重播（与名片窗口同一个坑） */
.me-win.is-entered { animation: none; }
.me-win.is-leaving { animation: me-win-out var(--m-panel-out) var(--ease-standard) both; }

@keyframes me-win-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes me-win-out {
  from { opacity: 1; }
  to { opacity: 0; transform: scale(0.99); }
}

/* 标题栏 = 拖动把手；右侧「完成」是文字按钮（也是关闭） */
.me-win__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
}
.me-win.is-dragging .me-win__head { cursor: grabbing; }
.me-win__grip { display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; }
.me-win__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-win__done {
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  background: var(--bg-hover);
  transition: background-color var(--m-hover) var(--ease-standard), opacity var(--m-hover) var(--ease-standard);
}
.me-win__done:hover { background: var(--bg-active); }
.me-win__done:active { opacity: 0.6; }

/* 隐藏的文件选择器（头像上传用，站点既有类） */
.me-win__file { display: none; }

/* ---------- 窗口里的那块 iOS 屏幕：撑满剩余高度，滚动交给 .ios-screen__scroll ---------- */
/* 站点兼容：Demo 的桌面窗口把内容直接塞进 .me-win__scroll；本站结构是 .me-win > .ios-screen，
   所以这里把 .ios-screen 变成 flex 列容器并去掉它自己那层描边（外面已经是窗口了）。 */
.me-win > .ios-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.me-win .ios-screen__scroll {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* 屏幕栈转场：子屏从右侧滑入、返回时反向滑出（时长/曲线用 iOS 的 --m-sheet / --ease-ios） */
.ios-screen--push { animation: ios-screen-push var(--m-sheet) var(--ease-ios) both; }
.ios-screen--pop { animation: ios-screen-pop var(--m-sheet) var(--ease-ios) both; }

@keyframes ios-screen-push {
  from { opacity: 0.25; transform: translateX(32%); }
  to { opacity: 1; transform: none; }
}
@keyframes ios-screen-pop {
  from { opacity: 0.25; transform: translateX(-22%); }
  to { opacity: 1; transform: none; }
}

/* Demo：窗口里的大标题顶部内边距、分组左右内缩 16px（与 .ios-section-title / .me-profile 对齐） */
.me-win .ios-large-title { padding-top: var(--space-3); }
.me-win .ios-group { margin: 0 var(--space-4) var(--space-3); }
/* 内容区不再自己加左右内边距：分组与小标题各自内缩 16px，和 Demo 的视觉一致 */
.me-win .ios-screen__content { padding: 0 0 var(--space-4); }

/* ---------- 个人信息头（头像 + 姓名 + 角色 · 学号 + 徽标） ---------- */
.me-profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
.me-profile__name { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.018em; }
.me-profile__meta { margin-top: 2px; font-size: var(--text-sm); color: var(--text-tertiary); }
.me-profile__tags { display: flex; gap: 6px; margin-top: var(--space-2); }

/* 分组小标题（iOS 的 section header） */
.ios-section-title {
  padding: var(--space-4) var(--space-4) 6px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* 行内右侧的次要文字（值 / 状态） */
.ios-value { font-size: var(--text-md); color: var(--text-tertiary); }

/* ==========================================================================
   六、深色 / 浅色
   --------------------------------------------------------------------------
   Demo 用的就是站点同名字令（--bg-muted / --border-subtle / --text-* / --space-*），
   上面的规则在两种主题下都直接可用。这里只补两处「深色下对比度不够」的地方。
   ========================================================================== */
[data-theme='dark'] .ios-switch__track { background: var(--bg-active); }
[data-theme='dark'] .ios-switch__track .ios-switch__knob { background: #f4f5f8; }
[data-theme='dark'] .tab.is-active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }