/* ==========================================================================
   组织档案（archive/organization/）—— 组织名录导航页
   --------------------------------------------------------------------------
   版式：面包屑 + 页标题 → 分类标题（官方组织 / 半官方组织 / 非官方组织）→
   官方组织里「最高权力机构」单独置顶一块，下面接 15 个第一层分支权力机构的卡片网格；
   另两类（半官方 / 非官方）的名录其实齐全，只是这份本地缓存损坏、又连不上星域网重新取，
   所以那两块是「数据损坏」（.org-broken，错误红标题），等修好再换成同样的卡片网格。
   视觉沿用站内那套：玻璃面板（半透明底 + 1px 淡描边 + 面板圆角），
   金色只当强调态（hover / 键盘聚焦）与标题色（见 DESIGN.md 第三节），不做大块填色。
   控件圆角与颜色一律取 global.css 的 --ctl-* 令牌，不另立新值。
   ========================================================================== */

.org-section {
    position: relative;
    z-index: 1;

    /* 同 .archive-section：main 是竖排 flex 容器，带 auto margin 的 flex 项
       不会被拉伸、宽度会退化成 fit-content；写死 100% 才是
       「铺满可用宽度、超过上限才居中」。 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 60px 80px;
}

/* ── 页标题 ── */
.org-head {
    margin-bottom: 34px;
}

.org-head h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: 6px;
    color: #FFD700;
}

.org-sub {
    margin: 8px 0 0;
    font-size: 12px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.35);
}

.org-lead {
    margin: 18px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.72);
}

/* ── 最高权力机构：单独置顶一块 ──
   和下面 15 张卡片同一种玻璃面板，只靠「标签 + 更大的尺寸 + 金色标题」拉开层级；
   不靠默认态的金色描边/金色底（那正是 DESIGN.md 里说的"金色不做默认态"）。 */
.org-supreme {
    display: block;
    position: relative;
    padding: 34px 32px;
    margin-bottom: 46px;
    color: #fff;
    text-decoration: none;

    background: rgba(20, 20, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ctl-panel-radius);
    backdrop-filter: blur(8px);

    transition: var(--ctl-transition),
                box-shadow 0.3s ease;
}

.org-supreme__tag {
    display: inline-block;
    padding: 3px 9px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ctl-radius);
}

.org-supreme__name {
    margin: 16px 0 0;
    font-size: 26px;
    letter-spacing: 4px;
    color: #FFD700;
}

.org-supreme__en {
    margin: 8px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.org-supreme__desc {
    margin: 14px 0 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

/* 「查看档案 ›」：卡片上唯一的一句提示，只在最高权力机构这块出现 */
.org-card__go {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    transition: var(--ctl-transition);
}

.org-supreme:hover .org-card__go,
.org-supreme:focus-visible .org-card__go {
    color: #FFD700;
}

/* ── 隐藏入口（彩蛋）：议会卡 + 讨论组卡 + 右侧小切换按钮 ──
   两张卡叠在同一格里：谁不 hidden 谁露脸，格子的高度由露脸那张决定。
   拖部门卡经过时，卡片边缘按被拖部门的颜色高亮（--drag-color，不是金色）。 */
.org-supreme-slot {
    position: relative;
    display: grid;
    margin-bottom: 46px;
}

.org-supreme-slot .org-supreme {
    grid-area: 1 / 1;
    margin-bottom: 0;               /* 间距挪到 slot 上，按钮才能居中于卡片 */
}

.org-supreme[hidden] {
    display: none;
}

/* 讨论组那张：标签用错误红，提示这是机密条目 */
.org-supreme--dgam .org-supreme__tag {
    color: rgba(255, 107, 107, 0.75);
    border-color: rgba(255, 107, 107, 0.3);
}

/* 拖动经过：描边 + 外发光都用那个部门的颜色 */
.org-supreme-slot.is-drag-over .org-supreme {
    border-color: var(--drag-color, rgba(255, 255, 255, 0.3));
    box-shadow: 0 0 0 1px var(--drag-color, rgba(255, 255, 255, 0.3)),
                0 0 26px -8px var(--drag-color, rgba(255, 255, 255, 0.3));
}

/* 小切换按钮：贴在卡片右侧（半个压在边缘上） */
.org-switch {
    position: absolute;
    top: 50%;
    right: -14px;
    z-index: 2;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;

    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(18, 18, 42, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: var(--ctl-transition);
    animation: org-switch-in 0.35s ease;
}

.org-switch:hover,
.org-switch:focus-visible {
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.55);
}

.org-switch:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.55);
    outline-offset: 2px;
}

/* [hidden] 的 display:none 会被上面的 display:flex 盖掉，显式写一条 */
.org-switch[hidden] {
    display: none;
}

@keyframes org-switch-in {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.7);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* 隐藏入口的三张部门卡：高亮 = 描边（+一点辉光）转成该部门自己的颜色。
   · is-dragging —— 正被抓着拖的那一张
   · is-collected —— 已经拖上去过的那一张（彩蛋发现前一张一张攒；发现后三张都亮）
   都带上 :hover 的同款写法：否则会输给下面 .org-card:hover 的金色描边，
   指针划过高亮卡时颜色会跳成金色。 */
.org-card.is-dragging,
.org-card.is-dragging:hover,
.org-card.is-collected,
.org-card.is-collected:hover {
    border-color: var(--dept-color, rgba(255, 255, 255, 0.16));
    box-shadow: 0 0 22px -12px var(--dept-color, rgba(255, 255, 255, 0.16));
}

.org-card.is-dragging .org-card__no,
.org-card.is-collected .org-card__no {
    color: var(--dept-color, rgba(255, 255, 255, 0.5));
}

/* ── 分类标题：官方组织 / 半官方组织 / 非官方组织 ──
   一条细分隔线 + 金色标题，是这一页最外层的分组。
   第一类紧跟在页头后面，用相邻选择器压掉那条上间距。 */
.org-group-head {
    margin: 56px 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 20px;
    letter-spacing: 5px;
    color: #FFD700;
}

.org-head + .org-group-head {
    margin-top: 0;
}

.org-group-head__en {
    margin-left: 14px;
    font-size: 12px;
    font-weight: 400;               /* h2 本身是 700，英文名跟着细一档 */
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
}

/* ── 层级小标题：第一层分支权力机构 ──
   比分类标题弱一档（不加金色、不画线），给下面的卡片网格当标签用。 */
.org-tier-head {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
}

.org-tier-head__en {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.32);
}

/* ── 数据损坏的分类：内容其实都有，只是这份本地缓存坏了、又连不上星域网重新取 ──
   所以它不是「空」而是「读不出来」：实线面板 + 错误红标题（与「档案」总览页的
   「拒绝访问」同一支颜色语义），说明压淡。
   修好/连上之后：把这块换成 <div class="org-grid"> + 若干 .org-card
   （照官方组织那 15 张的样子抄），需要分层就在网格前面再补一个 .org-tier-head 小标题。 */
.org-broken {
    padding: 26px 24px;
    text-align: center;

    background: rgba(20, 20, 50, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ctl-panel-radius);
}

.org-broken__title {
    margin: 0;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--ctl-err);
}

.org-broken__desc {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
}

.org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.org-card {
    position: relative;
    display: block;
    padding: 26px 24px;

    color: #fff;
    text-decoration: none;          /* 整块可点，别在标题上再画一条下划线 */

    background: rgba(20, 20, 50, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ctl-panel-radius);
    backdrop-filter: blur(8px);

    transition: var(--ctl-transition),
                box-shadow 0.3s ease;
}

/* 强调态：金色描边 + 阴影加深，不做位移
   （全站可点击卡片统一如此 —— 档案主页的 .archive-card 就只有描边/阴影，见 DESIGN.md 第五节）。
   键盘聚焦给同等的强调，另加一圈金色轮廓。 */
.org-card:hover,
.org-card:focus-visible,
.org-supreme:hover,
.org-supreme:focus-visible {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.org-card:focus-visible,
.org-supreme:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.55);
    outline-offset: 3px;
}

/* 部门代号：右上角的小读数（RES / ADM / …），等宽 —— 用站的 Sarasa Mono（design 里"读数"那一类） */
.org-card__no {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: "Sarasa Mono", "Sarasa", monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.28);
    transition: var(--ctl-transition);
}

.org-card:hover .org-card__no,
.org-card:focus-visible .org-card__no {
    color: var(--ctl-fg-hover);
}

.org-card h4 {
    margin: 0 0 10px;
    padding-right: 34px;            /* 给右上角的代号让位 */
    font-size: 17px;
    letter-spacing: 2px;
}

.org-card__en {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
}

.org-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

/* 「减少动态效果」：不要过渡 */
@media (prefers-reduced-motion: reduce) {
    .org-card,
    .org-supreme,
    .org-card__no,
    .org-card__go {
        transition: none;
    }
}

/* ==========================================================================
   组织详情页（archive/organization/cam.html 及以后各部自己的页）
   --------------------------------------------------------------------------
   版式：面包屑 → 页头（机构类别小标签 + 金色标题 + 英文名 + 一句简介）→
   若干分区面板（标题 + 内容）。容器用 .org-section + .org-section--doc（与总览页同宽），
   所以面包屑、页头、间距都与总览页完全同源；正文行宽跟着面板。
   分区里的内容用普通 <p> / <ul> / <ol>（样式在下面 .org-block 里统一给），
   成员名录用 .org-crews（一张 grid，3 列 × 4 行，一列一支舰队）+ .org-member（每人一张卡，整卡可点），
   点了从底部弹「成员数据库拒绝访问」的提示条（.org-toast，逻辑在 assets/js/org-member.js）。
   新页面的骨架阶段可以先用 .org-ph 占位块把位置占住。
   ========================================================================== */

/* 详情页容器：与总览页共用同一个页面框（max-width 沿用 .org-section 的 1200px），
   面包屑、页头才会和上一级「组织档案」停在同一左边缘；正文跟着面板宽度走。 */
.org-section--doc {
    max-width: 1200px;
}

/* 机构类别小标签（最高权力机构 / 第一层分支权力机构 …），与 .org-supreme__tag 同款 */
.org-tag {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ctl-radius);
}

/* 一个分区 = 一块面板（标题 + 内容），与「关于」页的卡片同一套材质 */
.org-block {
    padding: 26px 28px;
    margin-bottom: 18px;

    background: rgba(20, 20, 50, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ctl-panel-radius);
    backdrop-filter: blur(8px);
}

.org-block:last-child {
    margin-bottom: 0;
}

.org-block__head {
    margin: 0 0 16px;
    font-size: 16px;
    letter-spacing: 2px;
    color: #FFD700;
}

.org-block__en {
    margin-left: 12px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
}

/* 占位块：**新页面骨架阶段**用 —— 这一节还没写内容时先用虚线占住位置。
   CAM 页已经填满；后面各部详情页先摆这个，写完再把整块换成真内容（段落 / 列表 / 卡片网格）。 */
.org-ph {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 18px 20px;

    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.32);

    background: rgba(255, 255, 255, 0.012);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: var(--ctl-radius);
}

/* ==========================================================================
   部门组织页（科研部 res.html 及以后各部自己的页）
   --------------------------------------------------------------------------
   版式尽量和 CAM / DGAM 保持同一套：面包屑 → 页头 → 分区面板。
   页头：机构类别小标签（贴左）+ 居中的 620px 列（白色题图 / 一句简介）；下面固定三块：
   概要（归属 / 部长 / 副部长 / 总部位置）→ 详情（功能、职责等普通段落）
   → 下属（一个局一张卡：名称 / 简介 / 局长 / 副局长 / 总局位置）。
   ========================================================================== */

/* ── 题图 ──
   源图 assets/img/Deptlogo/title_Dept.*.png 是 4000×1000 的黑稿 + 透明底，
   直接 <img> 贴出来在近黑底上等于看不见 —— 照导航栏 .logo__mark 的做法当 mask：
   只取形状，颜色交给 background-color（白色，和导航栏 logo 同一支）。
   题图本身就是本页的 <h1>，真正的标题文字放在里面的 .org-sr-only 里。
   每个部门一条 .org-title--<代号> 规则，只填 --org-title-image。
   ⚠️ 变量里的 url() 是按**使用它的样式表**（本文件，assets/css/archive/）解析的，
   所以这里写 ../../img/…，而不是页面视角的 ../../assets/img/…（实测会变成
   assets/assets/img/…，图加载失败 → mask 整块透明，题图就"消失"了）。 */
.org-title {
    display: block;
    width: min(100%, 620px);
    aspect-ratio: 4 / 1;
    background-color: #fff;
    -webkit-mask: var(--org-title-image) center / contain no-repeat;
            mask: var(--org-title-image) center / contain no-repeat;
}

/* 题图居中，并和下面的面板留一点距离。
   （.org-head h1 的 margin:0 权重更高，所以这里带上 .org-head 前缀。） */
.org-head .org-title {
    margin: 0 auto 20px;
}

.org-title--res {
    --org-title-image: url("../../img/Deptlogo/title_Dept.RES.png");
}

/* 部门页页头：题图 / 一句简介放进同一个 620px 的列里，整列居中；
   小标签不在这个列里，按 CAM 的位置独立贴左（和面包屑同一条竖线）。 */
.org-hero {
    width: min(100%, 620px);
    margin: 0 auto;
}

.org-hero .org-lead {
    max-width: none;              /* 跟列同宽，不再用 720px 的阅读宽度 */
    margin: 18px 0 0;
}

/* 只给读屏 / 搜索引擎看的文字（题图 h1 的可访问名称） */
.org-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── 概要（以及局卡里的字段）：一行一项 ──
   标签列按最长的那一项撑开（max-content），值在右边，长地址自然折行。 */
.org-meta {
    display: grid;
    gap: 10px;
    margin: 0;
}

.org-meta__row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
}

.org-meta dt {
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.45);
}

.org-meta dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.82);
}

/* 人名：本该链到人员档案，但人员数据库损坏 —— 做成链接样式的按钮，
   点击由 org-member.js 从底部弹提示条。font: inherit 用来盖掉按钮的 UA 字体。 */
.org-person {
    font: inherit;
    letter-spacing: inherit;
    color: rgba(255, 255, 255, 0.92);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 215, 0, 0.35);
    text-underline-offset: 3px;
    transition: var(--ctl-transition), text-decoration-color var(--ctl-ease);
}

.org-person:hover,
.org-person:focus-visible {
    color: var(--ctl-fg-hover);
    text-decoration-color: currentColor;
}

.org-person:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.55);
    outline-offset: 2px;
}

/* ── 下属：一个局一张卡 ──
   局不在创建范围内，不单独建页；卡里只放名称、简介、局长、副局长、总局位置。 */
.org-units {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 18px;
}

.org-unit {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ctl-radius);
}

.org-unit__head {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.92);
}

/* 局简介：.org-block p 是后代选择器，会盖到卡里的段落，所以这条多带一层 .org-block */
.org-block .org-unit__desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.72);
}

/* 局卡里的三项：贴到卡片底部（同一行的卡对齐），上面一条细线，和简介分开 */
.org-unit .org-meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
}

.org-unit .org-meta__row {
    gap: 12px;
}

.org-unit .org-meta dd {
    font-size: 13px;
}

/* ── 分区里的正文 / 列表 / 说明 ── */
.org-block p {
    margin: 0 0 1em;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.72);
}

.org-block p:last-child {
    margin-bottom: 0;
}

/* 全站 `*` 规则把 padding 清零了，列表缩进要补回来 */
.org-block ul,
.org-block ol {
    margin: 0;
    padding-left: 1.4em;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.72);
}

.org-block li {
    margin-bottom: 6px;
}

.org-block li:last-child {
    margin-bottom: 0;
}

.org-block li::marker {
    color: rgba(255, 215, 0, 0.5);
}

/* 分区里的二级小标题（例如「流程」）：上面留点空，别贴着上一段 */
.org-block .org-tier-head {
    margin: 22px 0 14px;
}

/* ── 成员名录：3 列 × 4 位，一列一支舰队 ──
   议员之间是平等的（不编号、不排序），每人一张卡：姓名在上、职务在下。
   ⚠️ 用的是**一张** grid，而不是三个列容器：列头 + 4 行卡片都写在同一张网格里，
   `grid-auto-flow: column` 按列填（一列 5 个），行高由该行最高的那一格决定 ——
   于是三列的列头、第一张卡、第二张卡…天然在同一水平线上，
   不会因为"某列英文名折成两行 / 某个名字更长"而错位。
   卡是一个“名称索引”，点一下本该打开那个人的人员档案；hover / 键盘聚焦时姓名转金。
   人员数据库当前数据损坏、拒绝访问，点了会从底部弹出错误提示（见下面 .org-toast）。 */
.org-crews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto repeat(4, auto);
    grid-auto-flow: column;
    gap: 12px 20px;
    margin-top: 22px;
}

/* DGAM 那种「六支舰队并列、各一名成员」的排法：仍是三列，每列两支舰队 ——
   列头 + 卡 + 列头 + 卡（共四行）。六支舰队等权重，不按名义上的隶属关系嵌套。 */
.org-crews--pairs {
    grid-template-rows: auto auto auto auto;
}

/* 列头：舰队名在上、英文名另起一行（列窄，挤一行会折得很难看）。
   align-self:start 让三列的列头都从该行的顶边开始 —— 于是三个中文舰队名在同一水平线上，
   英文名折成两行的那一列只是把行撑高，下面的第一张卡照样三列对齐。 */
.org-crews .org-tier-head {
    margin: 0;
    align-self: start;
}

.org-crews .org-tier-head__en {
    display: block;
    margin: 4px 0 0;
}

/* 一张人名卡（按钮）：它直接是网格项，所以同一行的卡片高度自动一致 */
.org-member {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;

    width: 100%;
    margin: 0;
    padding: 13px 15px;

    font: inherit;                   /* 盖掉按钮的 UA 字体/字号 */
    text-align: left;
    color: inherit;
    text-decoration: none;           /* 作为人员档案链接时不要默认下划线 */
    cursor: pointer;

    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ctl-radius);
    transition: var(--ctl-transition), background-color 0.25s ease;
}

/* 强调态：描边转金 + 底色微亮，不做位移（全站可点卡片统一如此） */
.org-member:hover,
.org-member:focus-visible {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.4);
}

.org-member:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.55);
    outline-offset: 2px;
}

.org-member__name {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.25s ease;
}

/* 「名称索引亮起」：hover / 键盘聚焦时姓名转金 */
.org-member:hover .org-member__name,
.org-member:focus-visible .org-member__name {
    color: #FFD700;
}

.org-member__role {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
}

/* ── 错误提示：从底部弹起的小窗 ──
   点成员名字时弹（人员数据库拒绝访问）。DOM 与行为在 assets/js/org-member.js；
   形式照彩蛋页那个「彩蛋已发现」的提示条（同位置、同动画、同玻璃面板与配色），
   只是把金色换成错误红：描边、小方点转红，文字仍是提示条那支亮白。 */
.org-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 210;

    max-width: calc(100vw - 48px);
    padding: 12px 20px;

    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);      /* 与彩蛋提示条同一支文字色 */

    background: rgba(18, 18, 42, 0.97);
    border: 1px solid rgba(255, 107, 107, 0.4);   /* 彩蛋提示条是金描边，这里换成错误红 */
    border-radius: var(--ctl-panel-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.org-toast.is-in {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* 小方点：与加载屏"这一步已完成"、彩蛋提示条那个金点是同一套，这里换成错误红 */
.org-toast__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 1px;
    background: var(--ctl-err);
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.85);
    vertical-align: 1px;
}

/* 彩蛋提示条（DGAM 页那种「彩蛋已发现：…」）：同一条提示条、同一套动画，
   只把强调色换回金色 —— 发现彩蛋是好事，报错才是红的那一支。 */
.org-toast--egg {
    border-color: rgba(255, 215, 0, 0.4);
}

.org-toast--egg .org-toast__dot {
    background: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.85);
}

/* 「减少动态效果」：提示条不滑动，直接出现 */
@media (prefers-reduced-motion: reduce) {
    .org-toast,
    .org-toast.is-in {
        transition: none;
    }
}

/* ── 移动端：单列、收窄内边距 ── */
@media (max-width: 768px) {

    .org-section {
        padding: 96px 18px 56px;
    }

    .org-head {
        margin-bottom: 26px;
    }

    .org-head h1 {
        font-size: 24px;
        letter-spacing: 4px;
    }

    /* 详情页的英文全名很长，窄屏上把 4px 字距收到 2px，不然会碎成两行 */
    .org-section--doc .org-sub {
        letter-spacing: 2px;
    }

    .org-supreme {
        padding: 26px 20px;
        margin-bottom: 34px;
    }

    .org-supreme__name {
        margin-top: 14px;
        font-size: 20px;
        letter-spacing: 2px;
    }

    .org-group-head {
        margin: 44px 0 20px;
        font-size: 17px;
        letter-spacing: 4px;
    }

    .org-tier-head {
        font-size: 13px;
    }

    .org-broken {
        padding: 24px 18px;
    }

    .org-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .org-card {
        padding: 22px 18px;
    }

    .org-card__no {
        top: 18px;
        right: 18px;
    }

    .org-tag {
        margin-bottom: 12px;
    }

    /* 部门页：题图窄屏别挤太高；简介标签列收窄；局卡单列 */
    .org-head .org-title {
        margin: 0 auto 16px;
    }

    .org-meta__row {
        gap: 12px;
    }

    .org-units {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .org-unit {
        padding: 18px 16px;
    }

    .org-block {
        padding: 22px 18px;
        margin-bottom: 14px;
    }

    .org-block__head {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    /* 窄屏：三列拆成一列（列头 + 4 张卡，按舰队一块一块往下排） */
    .org-crews {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 10px;
        margin-top: 18px;
    }

    .org-crews .org-tier-head {
        margin-top: 10px;
    }

    .org-crews .org-tier-head:first-child {
        margin-top: 0;
    }

    .org-member {
        padding: 12px 14px;
    }

    .org-member__name {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .org-block .org-tier-head {
        margin: 18px 0 12px;
    }

    .org-ph {
        min-height: 72px;
        padding: 16px 14px;
    }

    /* 提示条：窄屏上贴边一点，别顶到屏幕两侧 */
    .org-toast {
        bottom: 18px;
        max-width: calc(100vw - 24px);
        padding: 11px 16px;
    }
}