/* ==========================================================================
   栏目导航 · 左栏「栏目树」（`app\widgets\school\ColumnNavWidget` 自带样式）
   落点：web/static/widgets/css/portal_column_nav.css
   由件在 `run()` 里经 `BaseWidget::$cssFiles` → `afterRun()` 注册 ⇒ 被任何主题模板
   单独调用时也自带样式，不依赖页面级 CSS（与 `portal_article_list.css` 同一口径）。

   ── 设计口径（2026-10-04 frontend-design 两轮走查后定稿）──
   **整列只用一种竖线语言**，三笔承担全部层级/位置信息，于是不做底色块、不做箭头图标：
     · 子栏目左侧 1px **层级导线** + 一小段指向文字的 **接入线**（`├─` 的读法）—— 读"它属于谁"；
     · 当前栏目左侧 2px **主色竖条**（`box-shadow: inset`，**整项等高**）—— 读"我在哪"。

   ── 精修（第二轮，逐条对着实测像素改的）──
   1. **对齐**：标题文字与顶级栏目文字同一条左边缘（标题也吃 12px 左内边距；
      实测改前标题 144 / 项文字 156 ⇒ 差 12px）。
   2. **节奏靠行高差，不靠缩进堆**：顶级项 `padding-block: 9px`（行高 39px，舒展），
      子项 `6px`（行高 30px，紧凑成一束）⇒ 父项与子项的"块感"不同，层级不必细看。
   3. **色阶不作为层级主力**：`--c-text-secondary`(#5a6675) 与 `--c-text-tertiary`(#5f6d80)
      **实测几乎同色**（主题覆写后同样接近）⇒ 子项仍用 tertiary 只是语义正确，
      真正的层级信息交给**字号(12/14) + 缩进(14px/级) + 导线**；别指望颜色能分层。
   4. **当前项竖条与项等高**（`inset 2px 0 0`，随 6px 圆角自然收口）—— 不再是"文字块高 22px
      居中的一小截"，也就不会有上下对不齐的像素误差。
   5. 窄屏（横排）把这三笔换成：导线/接入线隐藏、子项用前缀圆点、当前项改底边 2px 下划线
      （与门户页头导航 `.portal-nav__list li.is-on` 同一语言），并把行高统一回 8px 保住触控高度。

   ⚠ 层级缩进/导线位置都由模板写在元素上的 `--ph-lvl` 算（0 = 顶级，深度不限）：
     文字起点 = `12px + 14px × --ph-lvl`；导线在"子项文字左缘 − 7px"处，接入线从导线接到文字左缘。
   ⚠ `.ph-cnav__list { gap: 0 }`：导线是"每项各画一段"，留缝会变成虚线（项间距交给各自 padding）。
   ========================================================================== */

.ph-cnav {
    min-width: 0;
    /* ── 2026-10-08：整列加**淡底面板**（用户口径"门户的栏目页左侧栏目列表也要加上背景色"）──
       与实验中心域的左栏导航（`portal/labs.css` 的 `.ph-labs-cn`）**同款规格**：
       白底 + 12px 圆角 + 16px 内边距。页面底是 `--c-bg`(#f6f8fb)，白块放上去自然分界。
       ⚠ 只给**容器**一层底色（"这是一列导航"），不是把每项做成卡片。
       ⚠ 内边距 16px 之后，标题与各级栏目的左缘要**重新对齐**（见下面两处 `padding-left`）。 */
    padding: var(--sp-4, 16px);
    border-radius: var(--radius-md, 12px);
    background-color: var(--c-surface);
    /* 层级的"线"色：白底比门户的灰底更"吃"浅色 ⇒ 14% → **16%**（照抄 14% 会淡到看不清，
       而这一列的全部层级信息都压在它身上）。 */
    --ph-cnav-rule: color-mix(in srgb, var(--c-text) 16%, transparent);
}

/* 标题：与右栏 `.ph-sec__head` 同一道细线。
   ⚠ 水平内边距 **12px，与栏目项的基础内边距同值** —— 两条左缘才落在同一条竖线上
     （2026-10-08 用户口径"左侧栏目列表中 item 文字左右有适当留白"：文字不能贴着面板内容边缘，
       所以标题与项都保留这 12px；面板自身的 16px 内边距是"面板内边距"，两者是两回事）。 */
.ph-cnav__title {
    padding: 0 var(--sp-3, 12px) var(--sp-3, 12px);
    border-bottom: 1px solid var(--c-divider);
    font-size: var(--fs-sm, 14px);
    font-weight: var(--fw-semibold, 600);
    line-height: 1.4;
    color: var(--c-text);
}

.ph-cnav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--sp-2, 8px);
}

.ph-cnav__item {
    --ph-lvl: 0;
    position: relative;
    display: block;
    /* 左右各 12px：文字**不贴**项（以及面板内容区）的边缘；hover / 当前项的圆角底块也有呼吸。
       左内边距 = `12px + 14px × lvl`（基础 12px 保证顶级项与标题左缘对齐，缩进只叠层级那一份）。
       行高 39px（顶级，舒展）与子项的 30px 形成"块感"差。 */
    padding: 9px var(--sp-3, 12px) 9px calc(var(--sp-3, 12px) + 14px * var(--ph-lvl));
    border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-sm, 14px);
    line-height: 1.5;
    color: var(--c-text-secondary);
    transition: color var(--dur-fast, .14s) var(--ease-out, ease),
                background-color var(--dur-fast, .14s) var(--ease-out, ease);
}
/* hover：只做"文字转主色 + 极轻底"（底是临时反馈；当前项用竖条 ⇒ 两者不会看混） */
.ph-cnav__item:hover { color: var(--c-primary-text); background-color: var(--c-primary-softer); }
.ph-cnav__item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* 子栏目：更紧的一束（行高 30px）+ 1px 层级导线 + 一段接入线（`├─` 的读法） */
.ph-cnav__item--sub {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--fs-xs, 12px);
    color: var(--c-text-tertiary);
}
/* 导线：贯穿该级所有兄弟（所以列表不能有 gap）。
   位置 = "本项文字左缘 − 7px"；文字左缘是 `12px + 14px × lvl` ⇒ 导线 = `12px + 14px × (lvl − 1) + 7px`。 */
.ph-cnav__item--sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sp-3, 12px) + 14px * (var(--ph-lvl) - 1) + 7px);
    width: 1px;
    background-color: var(--ph-cnav-rule);
}
/* 接入线：从导线指向本项文字（5px，末端留 2px 呼吸），落在项的垂直中心 ⇒ 读作 `├─ 文字` */
.ph-cnav__item--sub::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--sp-3, 12px) + 14px * (var(--ph-lvl) - 1) + 7px);
    width: 5px;
    height: 1px;
    background-color: var(--ph-cnav-rule);
}

/* 当前栏目：左侧 2px 主色竖条，**与整项等高**（随 6px 圆角自然收口）；不用底色 ⇒ 与 hover 区分 */
.ph-cnav__item.is-on {
    color: var(--c-primary-text);
    font-weight: var(--fw-medium);
    box-shadow: inset 2px 0 0 var(--c-primary);
}

/* 当前栏目的**祖先**：只主色字（比当前项弱一档，比普通项强一档） */
.ph-cnav__item.is-in-path { color: var(--c-primary-text); }

/* 窄屏：左栏折到列表上方并**横排**（页面级 `.ph-news` 负责折叠，件负责横排的外观）。
   横排里"上下级"读不出来 ⇒ 三笔换成：导线/接入线隐藏、子项前缀圆点、当前项底边下划线；
   行高统一回 8px（保住触控高度）。 */
@media (max-width: 1024px) {
    .ph-cnav__list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1, 4px); }
    .ph-cnav__item { padding: var(--sp-2, 8px) var(--sp-3, 12px); }
    .ph-cnav__item--sub { padding: var(--sp-2, 8px) var(--sp-3, 12px); }
    .ph-cnav__item--sub::before {
        content: '';
        position: static;
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-right: 6px;
        border-radius: 50%;
        background-color: currentColor;
        vertical-align: middle;
        opacity: .7;
    }
    .ph-cnav__item--sub::after { display: none; }
    .ph-cnav__item.is-on { border-radius: 0; box-shadow: inset 0 -2px 0 var(--c-primary); }
}