/* ============================================================================
   Seal 控件层 · assets/css/ui.css
   ----------------------------------------------------------------------------
   首页 / 帮助中心 / 后台 / 文件管理器 四页共用这一份，并且在各页 <style> 之前引入。
   这里只放「尺度 + 行为」：圆角、高度、内距、过渡、按下、焦点、禁用、折叠机制。
   颜色一律引用各页自己的 var(--…)，所以四页的主题互不影响。

   为什么要单独一份：以前这四页各自写了一遍控件高度、各自写了一遍展开动画，
   靠人工「改一处同步四处」维持一致 —— 那才是"拼凑感"的根。现在这些只有一份。
   ============================================================================ */

/* ---------------------------------------------------------------- 1. 尺度 */
:root{
  /* 圆角阶梯 */
  --r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  /* 卡片：一层底色 + 一圈发丝描边 + 一点顶面高光（--card-shadow 由各页按主题给） */
  --card-r:16px;--card-r-row:14px;--card-r-mini:12px;--card-pad:22px;
  /* 控件：高度走 8pt 网格；移动端触控目标见 --ctl-h-touch（iOS 44pt） */
  --ctl-h-sm:32px;--ctl-h:38px;--ctl-h-lg:46px;--ctl-h-touch:44px;
  --ctl-pad:18px;--ctl-r:10px;--press:.975;
  /* 动效 */
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.32,.72,0,1);
  --dur-1:.18s;--dur-2:.32s;
  /* 焦点：按钮/输入框用 box-shadow 环，行/链接用 outline 线。
     main.php 里对应的名字叫 --accent-soft，所以带一层 fallback。 */
  --focus-ring:0 0 0 3.5px var(--accent-glow,var(--accent-soft));
  --focus-line:2px solid var(--accent);
  /* 控件共用的过渡：hover 只变色 —— 不位移、不发光（"跳一下"最显廉价） */
  --ctl-t:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);
}

/* ------------------------------------------------------- 2. 交互基线（全站） */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:var(--accent-text)}

/* 键盘焦点环：全站同一个。
   🔴 这里绝不写 border-radius —— 焦点规则里带圆角会改掉被聚焦元素自己的圆角（老 bug）。 */
:where(a,button,summary,[tabindex]):focus-visible{outline:var(--focus-line);outline-offset:2px}
/* 列表里的整行 / 胶囊：环往里收，跟着行本身的形状走 */
:where(.fold-head,.tab,.chip,.crumb,.act,.pill):focus-visible{outline-offset:-3px}

/* 禁用语义：原生 disabled 和 aria-disabled 走同一套，别再各页各写一个 */
:where(button,a,input,select,textarea)[disabled],
:where(button,a)[aria-disabled="true"]{opacity:.45;pointer-events:none;cursor:not-allowed;transform:none}
/* 按下：iOS 式按压反馈，全站同一个缩放量 */
:where(button,a,[role="button"]):active{transform:scale(var(--press))}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ------------------------------------------- 3. 原生折叠：全站唯一的展开机制
   一组 = 一张卡（.fold-group），一行 = <details class="fold"> + <summary class="fold-head">。
   开合状态、键盘、读屏全部由浏览器负责 —— 页面里一行折叠 JS 都不需要。

   · 互斥（一次只开一节）  → <details class="fold" name="xxx">
   · 允许多条同时展开      → 不加 name
   · 展开动画             → ::details-content 的 block-size 过渡（不写死 max-height，
                            内容多长都不会被截断，也不用猜一个"够大"的值）
   · 收起后内容自动摘出无障碍树、也不可聚焦，不需要再手写 visibility 兜底        */
.fold-group{background:var(--card-bg,var(--bg-elevated));border:1px solid var(--border);border-radius:var(--card-r);box-shadow:var(--card-shadow,none);overflow:hidden}
.fold{interpolate-size:allow-keywords}
.fold::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-2) var(--ease),content-visibility var(--dur-2) allow-discrete}
.fold[open]::details-content{block-size:auto}

.fold-head{position:relative;list-style:none;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.fold-head:hover{background:var(--bg-hover)}
.fold-head:active{background:var(--accent-glow)}
.fold-head::-webkit-details-marker{display:none}
.fold-head::marker{content:''}
/* 行间发丝线：左端缩进由 --fold-line-in 决定（有图标的行缩到图标右边、与标题对齐；
   没图标的行缩到内距）。和 iOS 分组列表一样，线条不横穿整张卡。 */
.fold-group > .fold + .fold > .fold-head::before{content:'';position:absolute;left:var(--fold-line-in,var(--ctl-pad));right:0;top:0;height:1px;background:var(--border)}
/* 展开的内容与标题之间也来一条，层次才清楚 */
.fold-body{position:relative}
.fold-body::before{content:'';position:absolute;left:var(--fold-line-in,var(--ctl-pad));right:0;top:0;height:1px;background:var(--border)}

/* chevron：纯 CSS 两条边（别用 › 字符，换个字体就歪）。
   收起指右、展开指下 —— 全站同一个几何、同一个时长。 */
.fold-chev{flex:none;width:8px;height:8px;margin-right:2px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.fold[open] > .fold-head .fold-chev{transform:rotate(45deg);border-color:var(--accent)}

/* ------------------------------------------------------------ 4. 共用原子 */
/* 图标按钮（首页 / 帮助中心的深色切换）：同名同形，几何只在这里定义一次。
   颜色（--text-secondary / hover 的 --text）也一致，所以整条搬进来，页面不再各写一遍。 */
.theme-btn{flex:none;width:var(--ctl-h-sm);height:var(--ctl-h-sm);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ctl-r);color:var(--text-secondary);transition:var(--ctl-t)}
.theme-btn:hover{background:var(--bg-hover);color:var(--text)}

/* ------------------------------------------------------------ 5. 默认头像占位 */
/* 拿不到真实头像时统一用它：灰底圆 + 人像剪影。
   几何按 viewBox 0 0 40 40 画满整圆，外层靠 border-radius:50% + overflow:hidden 裁形，
   所以 26 / 34 / 38 / 46px 各处共用一个尺寸、不会变形。
   登录层 / QQ 输入框 / 讨论区 / 我的消息 / 后台 全都用这个，别再各画一套。 */
.av-ph{display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--text-tertiary);background:var(--bg-hover)}
.av-ph svg{width:100%;height:100%;display:block}