/* ============================================================================
 * polish-v4.css — V4 设计品质精修层（2026-10-09，Peter 定：大课堂排布冻结，只做细节精修）
 * ----------------------------------------------------------------------------
 * 原则（硬约束）：
 *   ① **不改排布**：不碰 display / grid-template / flex-direction / width / height /
 *      margin / padding / position / 字号字号级 —— 结构与大课堂排布一律不动。
 *   ② 只做「渲染品质 + 交互态 + 可读性」：字体渲染、数字对齐、焦点态、滚动条、
 *      选中色、禁用态、图片对齐、动效降级。
 *   ③ 一键回退：删掉 index.html 里那一行 <link ... polish-v4.css> 即可，零残留。
 * ========================================================================== */

/* ---------- 1. 字体渲染品质（更「苹果」的清晰度） ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { text-rendering: optimizeLegibility; }

/* 标题用 balance 断行、正文用 pretty：避免「最后一个字单独一行」这类廉价感 */
h1, h2, h3, h4, .section-title, .card h3 { text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }

/* 中文引号/破折号不要被拆到行首（提升中文排版细节） */
p, li, td, th, .muted { line-break: strict; }

/* 长链接、长英文、长数字不撑破容器 */
a, code, pre, .mono { overflow-wrap: anywhere; }

/* ---------- 2. 数字对齐（分数/天数/进度不再跳动） ---------- */
table td, table th, time, .stat .v, .stat .k, [class*="score"], [class*="pct"],
[class*="count"], [class*="num"] { font-variant-numeric: tabular-nums; }

/* ---------- 3. 交互态统一（2.9 层缺失焦点环，这里是最大收益） ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4F6BED;
  outline-offset: 2px;
  border-radius: 14px;
}

/* 键盘可达元素统一过渡（只做过渡，不改尺寸） */
a, button, [role="button"], summary, .nav-item, .nav-btn, .tab, .chip {
  transition: background-color .15s ease-out, color .15s ease-out,
              border-color .15s ease-out, box-shadow .15s ease-out, opacity .15s ease-out;
}

/* 链接下划线更精致 */
a { text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---------- 4. 禁用态可见且统一 ---------- */
button:disabled, button[disabled],
input:disabled, select:disabled, textarea:disabled,
[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* 输入光标用主色 */
input, select, textarea { caret-color: #4F6BED; }

/* ---------- 5. 选中文字 / 拖拽 ---------- */
::selection { background: rgba(79, 107, 237, .18); color: inherit; }
[draggable="true"] { -webkit-user-drag: element; }

/* ---------- 6. 图片/视频对齐（不改变尺寸规则） ---------- */
img, video, canvas { max-width: 100%; }
img { object-fit: cover; }
/* 头像类圆形元素：避免非方形图被拉变形 */
[class*="avatar"], [class*="Avatar"] { object-fit: cover; }

/* ---------- 7. 滚动条统一（更细、低对比，不再有系统灰块） ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .20) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: 14px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .30); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 8. 焦点不被容器裁切（横向滚动区常见问题） ---------- */
*:focus-visible { scroll-margin: 8px; }

/* ---------- 9. 动效降级（无障碍；保留功能性反馈） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 10. 打印/导出时的干净版式（归档与交付物截图） ---------- */
@media print {
  .nav, .fde-appbar, .nav-btn, .toast, [class*="modal"], [class*="Modal"] { display: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: 12px; color: #666; }
}

/* ============================================================================
 * 第 2 批 · 缺陷修正（2026-10-09）—— 只修"不该发生的问题"，不做风格偏好
 * 仍然不碰：display/grid/flex 方向/宽高/内外边距/字号/position
 * ========================================================================== */

/* 2-1 表单控件字体必须继承（老代码里 button/input 不继承 → 同一行两种字体，最显廉价） */
button, input, select, textarea, optgroup { font-family: inherit; }
button { font-size: inherit; }

/* 2-2 textarea 只允许纵向拉伸 —— 横拉会直接破版（这是缺陷，不是偏好） */
textarea { resize: vertical; }

/* 2-3 [hidden] 必须真的隐藏（有些旧 CSS 的 display 覆盖了 hidden 属性 → 元素没藏住） */
[hidden] { display: none !important; }

/* 2-4 鼠标点击不再残留焦点圈，键盘操作仍然有（更接近原生体验） */
:focus:not(:focus-visible) { outline: none; }

/* 2-5 搜索框统一外观（去掉 WebKit 默认的放大镜与自带圆角/取消按钮样式差异） */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; }

/* 2-6 图标不被挤压（flex 行内 svg 被压扁是常见破相） */
svg { flex: none; }

/* 2-7 破图不再留白块（加载失败也有底，不出现"洞"） */
img { background-color: #F5F5F7; }

/* 2-8 长内容一律可在容器内换行（防溢出；不改容器宽度） */
li, dd, td, th, .card, .panel, .muted { overflow-wrap: break-word; }

/* 2-9 表单在 Safari/iOS 上的小细节：数字输入不出现上下箭头、日期控件统一 */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 2-10 表格默认样式兜底：不撑破容器（只加最大宽度约束，不改列宽） */
table { max-width: 100%; }

/* 2-11 页脚文字对比度（截图复核：原页脚小字过浅，8–11px 灰字在白底上低于 AA 4.5:1）
       只加深颜色，字号/间距/位置一律不动 */
footer, .footer, .site-footer, .fde-footer { color: #6E6E73; }
footer a, .footer a, .site-footer a { color: #4F6BED; }

/* 2-12 工具页二级导航的父分类标签（截图复核：它带底色+描边+小圆角，紧挨真正的筛选胶囊，
       看起来像"一个被压小的按钮"。改成明确的文字标签：去掉底色与描边，右侧加细分隔线。
       位置与行高由同行更高的筛选按钮决定，因此不会改变排布。 */
.tool-nav-child-label {
  background: none;
  border: 0;
  border-right: 1px solid var(--border-subtle, #E8E8ED);
  border-radius: 0;
  padding: 0 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-4, #8E8E93);
}

/* 说明：截图里右下角浮动入口会盖住卡片右下角的展开箭头，但它是固定定位的悬浮入口、
   页面滚动即可移开，属正常 FAB 行为 —— 为避免"猜类名改布局"，这里不做处理。 */

/* ============================================================================
 * B1-5 四宽度抽检修复（2026-10-09）—— 只修「横向溢出」，不动桌面排布
 *
 * 实测（320px，iframe 真机量测）：
 *   #/knowledge  DOC=365（+45）  元凶：.u1-pos-summary 被挤出视口（在 .prep-progress-bar 内）
 *   #/jobs       DOC=364（+44）  元凶：.jt-seg-inner 宽 326px 且不换行
 *   #/hall / #/tools / #/growth  0 溢出（其余 offenders 均为 off-canvas 浮窗与装饰光斑，属正常）
 * 原则：仅 ≤480 生效；只做「换行 / 可横向滑动 / 允许收缩」，不改宽高、字号、间距与层级。
 * ========================================================================== */
@media (max-width: 480px) {
  /* 1) 大课堂：≤480 让「学习前准备 + 五维自测」这一条整体纵向堆叠。
     实测元凶是孙级元素：.u1-pos-summary > .prep-progress-bar > div > div（5px 进度条
     带 min-width:30px 且父级 nowrap，被挤出到 365px）。所以必须让**全链**允许收缩，
     光改子级无效（上一版就是这么失败的）。桌面 >480 完全不受影响。 */
  .prep-split { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .prep-split > * { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; }
  .prep-split .prep-progress-bar,
  .prep-split .prep-progress-bar * { min-width: 0 !important; max-width: 100% !important; }
  .prep-split .prep-progress-bar { flex-wrap: wrap !important; height: auto !important; row-gap: 8px !important; }
  .prep-split .prep-progress-bar > div { flex-wrap: wrap !important; min-width: 0 !important; }
  .prep-split .prep-progress-bar button { flex: 0 0 auto !important; }
  .prep-split .u1-pos-summary,
  .prep-split .u1-hero,
  .prep-split .u1-hero-line { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; }
  .prep-split .u1-hero b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

  /* 2) 招聘页：分段控件在窄屏改为「可横向滑动」，保住胶囊形态不裂成两行 */
  .jt-seg { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .jt-seg-inner { max-width: none !important; }
  .jt-seg::-webkit-scrollbar { height: 0; }

  /* 4) 自习室子标签（组队大厅/活动招募/视频课程/专业导师）窄屏可横滑。
        实测元凶：.fde-subtabs 固定 429px 宽 → 320 视口把文档撑到 445（溢出 125px）。 */
  .fde-subtabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
  .fde-subtabs::-webkit-scrollbar { height: 0; }

  /* 3) 职位卡窄屏：真因实测——卡片内宽 206px，薪资徽标 .fde-jc-sal 独占 124px（nowrap），
        标题列只剩 68px，"Forward"(≈72px) 就被从单词中间劈开（Forwar / d）。
        修法：窄屏让标题独占整行、薪资换到下一行 → 标题拿回 206px，按单词正常折行。
        （注意：只加 overflow-wrap 是无效的 —— 计算值本来就是 break-word，问题在列宽。） */
  .fde-job-card .fde-jc-top { flex-wrap: wrap !important; row-gap: 4px !important; }
  .fde-job-card .fde-jc-top > div:first-child { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .fde-job-card .fde-jc-sal { flex: 0 0 auto !important; }
  .fde-job-card, .fde-job-card * { overflow-wrap: break-word !important; word-break: normal !important; }
}

/* ============================================================
 * 苹果风基线对齐（Peter 2026-10-12「立即改正」· CTO 落地）
 *   依据 notes/设计铁律-全站苹果风.md：卡片圆角 14–16px
 *   这些组件的 24px 圆角来自**打包产物**（不在源码 CSS 里）⇒ 在源码层定向覆盖，不改生成物。
 * ============================================================ */
/* A45（2026-10-13）：把字面 16px 收敛成**语义令牌**（同一个圆角以前写在三处：产物 CSS / index.html 内联 / 这里，
   靠 !important 抢）。**值不变**（--fde-r-lg 定义见 shell.css:82 = 16px；带 16px 兜底防变量缺失）= 零视觉变化。
   回退：把这两行改回字面 `16px` 即可。 */
.tool-card,.resource-modal-container{ border-radius: var(--fde-r-lg, 14px) !important; }
.p9-card,.p9-card-h,.jp-card{ border-radius: var(--fde-r-lg, 14px) !important; }
/* A45 方案 A（CTO 2026-10-13 批）：**改令牌、不打特异性官司**。
   实测（CDP getMatchedStylesForNode）：赢家是 `clib-design-system.css` 里
   `[class*="card"]:not(…)×8 → var(--r-xl) !important`（特异性 ≈(0,9,0)），所以上面那两条 `.tool-card`(0,1,0)
   即使带 !important 也压不住。这里**只在这两个组件家族内**把 `--r-xl` 降到卡片规范值
   ⇒ 那条规则自己算出 16px；**全局 `--r-xl:24px` 一行不动**。回退：删这一行即可。 */
.tool-card,.p9-card,.p9-card-h{ --r-xl: var(--fde-r-lg, 16px); }