/*
 * 全站公共 token —— 由各页面共同加载，页面自己的 CSS 在其后覆盖。
 *
 * 这里只放**各页面本来就已经一致**的变量（同名同值）。
 * 有页面间差异的（例如深色主题的 --bg/--surface、胶囊页两套 --capsule-rose）
 * 一律不放进来，避免把有意为之的差异抹平。
 *
 * 来源：本批把重复定义从各页 CSS 收敛到此（见 ops/ 下的检查脚本验证）。
 */

:root {
  --accent-pink: #e8a0b4;
  --accent-wine: #8e4565;
  --bg-warm: #faf5ef;
  --canvas: #f8f4f1;
  --charcoal: #3a3236;
  --gold-soft: #f2e8d5;
  --radius: 16px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --shadow-md: 0 8px 24px rgba(58, 50, 54, 0.08);
  --soft-gray: #c4b8b8;
}

/* ── 滚动条 ────────────────────────────────────────────────────────────
   全站统一为「细圆角胶囊」：默认很淡，悬停/拖动时才明显。
   放在公共层是为了避免各页各写一套（此前 base.css 与 capsule.css 各有一份，
   颜色还不一致，capsule 那份用的还是压深前的旧亮粉）。
   宽度留 12px 便于点中，靠透明边框 + background-clip 把视觉收细到约 4px。
   注：iOS Safari 平时不显示滚动条，这里主要影响 Mac 桌面端；Firefox 走 scrollbar-* 属性。 */
:root {
    --scroll-thumb: rgba(180, 89, 98, .30);
    --scroll-thumb-hover: rgba(180, 89, 98, .58);
    --scroll-thumb-active: rgba(180, 89, 98, .72);
}
html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background: var(--scroll-thumb-active);
    background-clip: padding-box;
}

/* ── 键盘焦点（全站共享层）─────────────────────────────────────────────
   给站内所有交互元素一条统一的键盘焦点框，补上「只有元素级 :focus 规则、
   组件级没写」的缺口（ops/check-css-audit.py 的焦点缺口清单）。

   只写 :focus-visible —— 只有键盘 Tab / 辅助技术触发时才画框，鼠标点击
   不会出现焦点框；`:focus` 一律保持原样，不动任何既有规则。

   元素部分包在 :where() 里，本身不贡献特异性：整条规则特异性只有 0-1-0，
   低于各页现有写法（`button:focus-visible` = 0-1-1、`.组件:focus-visible`
   = 0-2-0），也低于任何 `outline: none` 的组件级规则，所以页面自己的焦点
   样式永远优先。例如 css/dashboard.css 的
   `.account-menu__item:focus-visible { outline: none }`（改用背景色示意）
   不受影响。

   outline 不参与盒模型、不占布局空间、不触发重排，因此不会改变任何页面的
   尺寸、换行或滚动范围（ops/check-mobile-overflow.py 不受影响）。

   颜色只用站内 token：--rose（各页各自定义）。common.css 本身不声明 --rose，
   所以退到本文件已有的 --accent-wine，保证 offline.html 这类没定义 --rose
   的页面也有焦点框，不引入新色值。 */
:where(button, a, input, textarea, select, [role="button"]):focus-visible {
    outline: 2px solid var(--rose, var(--accent-wine));
    outline-offset: 2px;
}

/* 【关键】触摸设备上不要留焦点圈。
   :focus-visible 本来是给键盘用户的，但移动端浏览器在"点过按钮"之后会长时间保持匹配，
   于是按钮上留下一个粉色外圈（用户看到的"一直亮着/像被选中"）。触摸设备没有键盘 Tab，
   不需要这个圈，所以在这里关掉；鼠标与键盘设备完全不受影响。 */
@media (hover: none) {
  :where(button, a, input, textarea, select, [role="button"]):focus-visible {
    outline: none !important;
  }
}

/* ②③ 弹层打开时锁住背景滚动。
   爱情清单 / 时间纪：新建约定后键盘弹起，背后的列表还能跟着滑。
   用 :has 精确限定"弹层处于打开状态"（这些页面打开时会把 aria-hidden 置为 false），
   没打开就完全不影响页面滚动。 */
body:has(.sheet-backdrop[aria-hidden="false"]),
body:has(.sheet-backdrop.open),
body:has(.sheet-backdrop.show) {
  overflow: hidden;
}

/* 【加强】弹层打开时锁住"背景"滚动，而不只是 body。
   爱情清单 / 时间纪的列表是内层滚动容器，只把 body 的 overflow 关掉挡不住它，
   所以这里连 touch-action 一起关掉（触摸滚动整体停住），再单独把弹层自己放开可滚。
   .sheet 是站内弹层的滚动容器（moments-v2.css 里就是 overflow:auto），这里明确还给它可以滚。 */
body:has(.sheet-backdrop.open),
body:has(.sheet-backdrop[aria-hidden="false"]) {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}
body:has(.sheet-backdrop.open) .sheet,
body:has(.sheet-backdrop[aria-hidden="false"]) .sheet {
  touch-action: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 弹层：锁背景 + 头部固定（全站通用）───────────────────────
   ① 背景锁：js/popup-lock.js 给 <html> 加 .w2c-locked，body 变成固定定位（JS 会补上负 top
      以保留滚动位置），整页冻住 —— 内层滚动容器也一起冻住，弹层自己照常可滚。
   ② 头部固定：弹窗的标题与关闭按钮不跟着表单滚。站内几种弹层用的是不同的头部类名，
      这里一次覆盖（.sheet-head / .dlg-head / .dialog-head / .modal-header）。 */
html.w2c-locked, html.w2c-locked body { overflow: hidden !important; }
html.w2c-locked body { position: fixed; left: 0; right: 0; width: 100%; }

.sheet-head, .dlg-head, .dialog-head, .modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper, #fffdfb);
}
/* 关键：弹层自己那圈上内边距会让滚动的内容从头部上方露出来（"滑上去还能看见"✗）。
   把上内边距交给头部自己承担 —— 头部贴到弹层最上沿，滑上去的内容就被它挡住了。
   只在弹层里确实有这种头部时生效，避免影响没有头部结构的弹层。 */
.sheet:has(> .sheet-head),
.modal-container:has(> .modal-header) {
  padding-top: 0;
}
.sheet-head, .dlg-head, .dialog-head, .modal-header {
  padding-top: 18px;
}

/* 「该设备已下线」弹窗（js/auth.js）—— 站内自绘，避免被送去人机验证页 */
#w2cKicked { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.w2c-kicked__mask { position: absolute; inset: 0; background: rgba(47, 35, 41, .5); backdrop-filter: blur(3px); }
.w2c-kicked__card {
  position: relative; width: 100%; max-width: 340px; box-sizing: border-box;
  background: var(--paper, #fffdfb); border-radius: 16px; padding: 24px 20px 18px; text-align: center;
  box-shadow: 0 16px 40px rgba(80, 62, 72, .22);
}
.w2c-kicked__face { margin: 0 0 2px; font-size: 34px; line-height: 1; }
.w2c-kicked__title { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #503e48; }
.w2c-kicked__copy { margin: 0 0 18px; font-size: 13px; line-height: 1.75; color: #99858f; }
.w2c-kicked__btn {
  width: 100%; min-height: 46px; border: 0; border-radius: 12px;
  background: #b33e63; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}