/* 媒体星图（王牌一·媒体视图）—— `/dossier/map/`
 *
 * ## 配色：舞台写死夜空，其余只用 token（2026-08-27 复评后改）
 * 第一版把舞台做成 var(--paper) 的米白印张，理由是「整页就是这张图，写死深色
 * 会突兀」。实看推翻了它：事件宇宙（main.css 的 .uni-*）已经立了先例——
 * 亮页面上嵌一块深色「窗外」，正是全站宇宙视觉的记忆点；而米白版的圆点图
 * 跟它并排就是同一个站里两张「宇宙」两张脸。所以舞台跟 .uni-wrap 用**同一段
 * 写死的夜空渐变，两种主题下恒定**（这也是事件宇宙的既有决定，不是新开的口子）；
 * 舞台**外**的一切（图例、表格、说明）仍然只用 token、跟主题翻面。
 *   舞台 = #1A1712→#12100C（照抄 .uni-wrap，两张宇宙一个夜空）
 *   星   = var(--gold-bright) 发光（夜空里的金要亮一档才立得住）
 *   连线 = 低透明度的金（夜空上 --ink-4 的灰线几乎不可见）
 *
 * ## 亮度编码：单色明暗，不做红绿
 * `--mm-glow` 是节点内联传进来的 0.35~1.0，编码质量分均值。**刻意不用 --green /
 * --red 做色阶**：媒体档案那页写死了「这里没有可信度评分，也永远不会有」，
 * 给每家媒体染上红绿就是当场推翻那句话。理由完整版在 media_map._brightness。
 *
 * ## 全程无 JS
 * 悬停卡走纯 CSS :hover / :focus-within。脚本被 CSP 挡掉、或者用户关了 JS，
 * 这张图照样完整可用——每颗星是真的 <a>。
 *
 * ## 窄屏
 * <560px 直接把 SVG 收起来只留表格：1000 宽的 viewBox 缩到 350px 时，
 * 标签糊成一片、命中区不到 20px。与其给一张点不中的图，不如给一张点得中的表。
 */

.mm-scope { padding-bottom: var(--sp-8); }

/* ── 导语 ───────────────────────────────────────────────────────────── */
.mm-lede {
    padding: var(--sp-6);
    margin: var(--sp-6) 0 var(--sp-4);
}
.mm-lede .sv-acad { margin-top: var(--sp-3); }
.mm-lede a { color: var(--gold-text); }

/* ── 演示降级开关 ───────────────────────────────────────────────────── */
.mm-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: var(--paper-2);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}
.mm-switch-now strong { color: var(--ink); }
/* 44px 可点高度：这是答辩现场要按的那一枚，不能小 */
.mm-switch-go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-3);
    color: var(--gold-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
}
.mm-switch-go:hover { background: var(--card); text-decoration: underline; }

/* ── 星图 ───────────────────────────────────────────────────────────── */
.mm-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.mm-head { margin-bottom: var(--sp-3); }
.mm-title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.mm-sub {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.9;
    color: var(--ink-3);
}
.mm-sub strong { color: var(--ink-2); }

.mm-stage {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    /* 夜空：主渐变照抄 .uni-wrap（两张宇宙一个天）；上面再铺两层极淡的远星
       （纯 radial-gradient，无图片资源），让空旷的角落也像天空而不像留白。 */
    background:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(240,192,64,.28) 0, transparent 100%),
        radial-gradient(1px 1px at 78% 12%, rgba(240,192,64,.20) 0, transparent 100%),
        radial-gradient(1px 1px at 88% 62%, rgba(240,192,64,.16) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 32% 82%, rgba(240,192,64,.18) 0, transparent 100%),
        radial-gradient(1px 1px at 58% 38%, rgba(240,192,64,.14) 0, transparent 100%),
        linear-gradient(180deg, #1A1712 0%, #12100C 100%);
    /* 不写 overflow:hidden —— 悬停卡贴着画布边缘时会被裁掉一角。
       几何已经在 media_map._hover_card 里夹回画布内，这里不需要再兜一次。 */
}
.mm-sky {
    display: block;
    width: 100%;
    height: auto;      /* 跟着 viewBox 等比，永远不会横向溢出 */
    overflow: visible;
}

/* 连线：夜空上的金线。灰的 --ink-4 在深底上几乎不可见，而这张图的论点
   恰恰长在线上（谁和谁写得像）——线必须被看见，但不能亮过星。 */
.mm-edge {
    stroke: #D9A514;
    stroke-opacity: .30;
    stroke-linecap: round;
    fill: none;
}

/* 命中区：透明大圆，先于视觉半径接住 hover / 点击 */
.mm-hit { fill: transparent; }

/* 光晕与星核。--mm-glow 由节点内联传入（0.35~1.0 = 质量分均值）。
   夜空版用亮金 + drop-shadow 的辉光：星要「发光」而不是「涂色」。 */
.mm-glow {
    fill: #FFD866;
    opacity: calc(var(--mm-glow, .6) * .20);
}
.mm-core {
    fill: #FFD866;
    opacity: calc(.5 + var(--mm-glow, .6) * .5);
    filter: drop-shadow(0 0 6px rgba(255, 216, 102, .55));
    transition: opacity .18s ease;
}
/* 样本少的虚线环：标出来，不藏起来 */
.mm-thin-ring {
    fill: none;
    stroke: rgba(255, 216, 102, .5);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
}

.mm-label {
    /* 夜空上的星名：取 .uni-lead 同一档的暖白，压在辉光和连线上都读得清 */
    fill: #D8D0BE;
    font-size: 19px;
    font-weight: 600;
    /* SVG 里的文字不继承页面字体栈，显式给一次，免得中文掉进衬线兜底 */
    font-family: inherit;
    paint-order: stroke;
    /* 描边取夜空底色：标签压到连线上时仍然读得清 */
    stroke: #12100C;
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}

.mm-star { cursor: pointer; transition: opacity .14s ease; }
/* 悬停某一颗时其余淡出。两个作用：
   ① SVG 没有 z-index，绘制顺序就是文档顺序，所以悬停卡一定会被排在它后面的
      某几颗星压住（选位已经在 media_map._hover_card 里挑了遮挡最少的一侧，
      但图中间密集处躲不干净）——淡出让被压的那一角不再碍事；
   ② 顺带把「这一颗和谁连着」从一团线里挑出来，本来就该这样读。 */
.mm-stars:hover .mm-star:not(:hover),
.mm-stars:focus-within .mm-star:not(:focus) { opacity: .18; }
.mm-star:hover .mm-core,
.mm-star:focus .mm-core { opacity: 1; }
.mm-star:hover .mm-label,
.mm-star:focus .mm-label { fill: #F5EFDF; }
/* 键盘可达：Tab 到某颗星要看得见落点 */
.mm-star:focus { outline: none; }
.mm-star:focus .mm-glow {
    stroke: #FFD866;
    stroke-width: 2;
    opacity: .7;
}

/* ── 悬停卡（纯 CSS）───────────────────────────────────────────────── */
.mm-card {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}
.mm-star:hover .mm-card,
.mm-star:focus .mm-card { opacity: 1; }
/* 悬停卡开在夜空里，配色照抄事件宇宙的 .uni-tip（深底浅字），不跟页面主题走 */
.mm-card-bg {
    fill: rgba(20, 17, 13, .96);
    stroke: rgba(255, 216, 102, .35);
    stroke-width: 1;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}
.mm-card-t { font-family: inherit; }
.mm-card-t.mm-hd { fill: #F5EFDF; font-size: 20px; font-weight: 700; }
.mm-card-t.mm-sub { fill: #A89F8C; font-size: 15px; }
.mm-card-t.mm-row { fill: #D8D0BE; font-size: 17px; }
.mm-card-t.mm-warn { fill: #E07A5F; font-size: 15px; }

/* 减少动效：把所有过渡关掉，悬停卡直接切换显隐 */
@media (prefers-reduced-motion: reduce) {
    .mm-card, .mm-core, .mm-star { transition: none; }
}

/* ── 图例 ───────────────────────────────────────────────────────────── */
.mm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}
.mm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mm-legend .mm-k {
    display: inline-block;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
}
.mm-k-big { width: 13px; height: 13px; }
.mm-k-small { width: 7px; height: 7px; margin-right: 3px; }
.mm-k-bright { width: 11px; height: 11px; opacity: 1; }
.mm-k-dim { width: 11px; height: 11px; opacity: .42; margin-right: 3px; }
/* 选择器要压过上面的 `.mm-legend .mm-k`（那条给了 background:var(--gold)），
   否则这一枚会画成实心金点，而它要说的恰恰是「空心虚线环」。 */
.mm-legend .mm-k-ring {
    width: 12px; height: 12px;
    background: transparent;
    border: 1.5px dashed var(--ink-4);
}
/* 图例的线钥匙跟着真线走（真线已是金色），别让图例描述一条不存在的灰线 */
.mm-legend .mm-k-line {
    display: inline-block;
    width: 18px;
    border-radius: 2px;
    background: var(--gold);
    flex: none;
}
.mm-k-thick { height: 4px; }
.mm-k-thinline { height: 1px; margin-right: 3px; }

.mm-narrow-note {
    display: none;      /* 只在窄屏出现，见页尾断点 */
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

/* ── 空态 / 降级说明 ────────────────────────────────────────────────── */
.mm-empty {
    border: 1px dashed var(--line);
    border-radius: var(--r);
    background: var(--paper-2);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
    text-align: center;
}
.mm-empty-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--sp-2);
}
.mm-empty p {
    max-width: 44em;
    margin: 0 auto;
    font-size: var(--fs-sm);
    line-height: 1.9;
    color: var(--ink-3);
}

/* ── 区块标题 ───────────────────────────────────────────────────────── */
.mm-sec-h {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--ink);
}

/* ── 最相似的几对 ───────────────────────────────────────────────────── */
.mm-pairs {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.mm-pair-list { list-style: none; margin: 0; padding: 0; }
.mm-pair-list li {
    display: grid;
    grid-template-columns: minmax(11em, auto) 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
}
.mm-pair-list li:last-child { border-bottom: 0; }
.mm-pair-who { font-size: var(--fs-sm); }
/* 表里/列表里的媒体名是主要的跳转目标，给足 44px 的可点高度 */
.mm-pair-who a {
    display: inline-block;
    padding: 12px 2px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}
.mm-pair-who a:hover { color: var(--gold-text); }
.mm-pair-x { color: var(--ink-4); margin: 0 4px; }
.mm-pair-bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--paper-2);
    overflow: hidden;
}
.mm-pair-bar i {
    display: block;
    height: 100%;
    background: var(--gold);
    border-radius: 3px;
}
.mm-pair-n {
    font-size: var(--fs-xs);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mm-caveat {
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--paper-2);
    font-size: var(--fs-sm);
    line-height: 1.95;
    color: var(--ink-2);
}
.mm-caveat strong { color: var(--ink); }

/* ── 表格版 ─────────────────────────────────────────────────────────── */
.mm-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
/* 宽表在自己的容器里横滚，**页面 body 永远不横向溢出**。
   tabindex=0（模板里给的）让它键盘也能滚——一个只有鼠标能滚的区域，
   对只用键盘的人等于那几列不存在。 */
.mm-table-scroll { overflow-x: auto; }
.mm-table-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    min-width: 520px;      /* 低于这个宽度就让它在容器内横滚，别把字挤成竖条 */
}
.mm-cap {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.9;
    color: var(--ink-3);
}
/* 只在真的滚得动的窄屏上提示，宽屏上说「可左右滑动」是句废话 */
.mm-scroll-hint { display: none; }
.mm-table th, .mm-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.mm-table thead th {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    font-weight: 600;
    border-bottom: 2px solid var(--ink);
    white-space: nowrap;
}
.mm-table tbody tr:hover { background: var(--paper-2); }
.mm-num { text-align: right; font-variant-numeric: tabular-nums; }
.mm-table td.mm-num { color: var(--ink-2); }
.mm-td-name { font-weight: 600; }
.mm-td-name a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;      /* 整行的主跳转目标，够手指点 */
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}
.mm-td-name a:hover { color: var(--gold-text); }
.mm-thin-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px dashed var(--ink-4);
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-3);
    white-space: nowrap;
}
.mm-td-sim { color: var(--ink-2); }
.mm-sim { display: inline-block; margin-right: var(--sp-3); white-space: nowrap; }
.mm-sim a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--line); }
.mm-sim a:hover { color: var(--gold-text); }
.mm-na { color: var(--ink-4); }

/* ── 方法与口径 ─────────────────────────────────────────────────────── */
.mm-method {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.mm-method-list {
    margin: 0;
    padding-left: 1.4em;
    font-size: var(--fs-sm);
    line-height: 1.95;
    color: var(--ink-3);
}
.mm-method-list li { margin-bottom: var(--sp-3); }
.mm-method-list li:last-child { margin-bottom: 0; }
.mm-method-list b { color: var(--ink); font-weight: 700; }
.mm-method-list strong { color: var(--ink-2); }
.mm-stamp {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    line-height: 1.9;
    color: var(--ink-4);
}

/* ── 页脚导航 ───────────────────────────────────────────────────────── */
.mm-back {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    margin-top: var(--sp-6);
}
.mm-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gold-text);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.mm-back a:hover { text-decoration: underline; }

/* ── 窄屏：图收起，表接手 ───────────────────────────────────────────── */
@media (max-width: 559px) {
    .mm-lede, .mm-wrap, .mm-pairs, .mm-table-wrap, .mm-method { padding: var(--sp-4); }
    /* 390px 上 1000 宽的 viewBox 缩到 0.35 倍：标签糊成一片、命中区不到 20px。
       与其给一张点不中的图，不如把同一份数据交给下面那张点得中的表。 */
    .mm-stage, .mm-legend { display: none; }
    .mm-narrow-note { display: block; }
    .mm-pair-list li {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .mm-pair-n { text-align: left; }
    .mm-switch { flex-direction: column; align-items: flex-start; }
    .mm-scroll-hint { display: inline; color: var(--ink-4); }
}