/* =====================================================================
   hl.312.css —— v3.312「荧光笔」样式（在 311 那份基础上补上编辑器里的颜色覆盖）

   ★ 为什么换文件名（311 → 312）：nginx 对 .css 给的是 `Cache-Control: public, max-age=86400`，
     原地改文件用户那边一天内看不到；**改样式必须换文件名**（这是踩过好几次的老规矩）。

   ★★★ v3.311 的真 bug（业主原话「只能选黄色荧光笔啊其他颜色不行」）：
     编辑器列表里有一条**优先级更高**的老规则 —— `#mlist .mrow mark{background:var(--mark)}`
     （id + class + 元素 = 1,1,1），它压过 `mark.hm-red`（0,1,1）这类规则，
     于是**七种高亮在编辑器里全画成同一个颜色**（`--mark` = 荧光黄）。
     实测（线上真页面，把 mark 分别放进 / 不放进 `#mlist .mrow`）：
       放进编辑器：yellow/red/grey/olive/blue/pink/cyan → **全部 rgb(255,255,125)**
       放在外面：  七个颜色各自正确
     ⇒ 读的时候（`#otree`）是有颜色的，一进编辑器（`#mlist`）就全变黄。
     修法：在**同样的层级**上再压一层（`#mlist .mrow mark.hm-*`），深色主题同样补。
   ===================================================================== */

/* ---------- 1. 默认高亮（无颜色的 `==文字==`）＝ 幕布的荧光黄 ---------- */
:root{--mark:#ffff7d}
[data-theme=dark]{--mark:#55501c}

/* ---------- 2. 七个颜色（名字跟库里一字不差：yellow/red/grey/olive/blue/pink/cyan） ---------- */
mark.hm-yellow{background:#ffff7d}
mark.hm-red{background:#ffbaba}
mark.hm-grey{background:#d0d3d8}
mark.hm-olive{background:#deffba}
mark.hm-blue{background:#baefff}
mark.hm-pink{background:#f8caff}
mark.hm-cyan{background:#c2ffdb}

/* 深色主题：同样 7 个色，压暗到能看清黑底上的字 */
[data-theme=dark] mark.hm-yellow{background:#55501c}
[data-theme=dark] mark.hm-red{background:#522b2b}
[data-theme=dark] mark.hm-grey{background:#3a3f45}
[data-theme=dark] mark.hm-olive{background:#3a4a22}
[data-theme=dark] mark.hm-blue{background:#1c3d4a}
[data-theme=dark] mark.hm-pink{background:#4a2f52}
[data-theme=dark] mark.hm-cyan{background:#1d4434}

/* ---------- 3. ★关键：编辑器列表里的同层级覆盖（`#mlist .mrow mark` 比 `mark.hm-*` 高一级） ---------- */
#mlist .mrow mark.hm-yellow{background:#ffff7d}
#mlist .mrow mark.hm-red{background:#ffbaba}
#mlist .mrow mark.hm-grey{background:#d0d3d8}
#mlist .mrow mark.hm-olive{background:#deffba}
#mlist .mrow mark.hm-blue{background:#baefff}
#mlist .mrow mark.hm-pink{background:#f8caff}
#mlist .mrow mark.hm-cyan{background:#c2ffdb}

[data-theme=dark] #mlist .mrow mark.hm-yellow{background:#55501c}
[data-theme=dark] #mlist .mrow mark.hm-red{background:#522b2b}
[data-theme=dark] #mlist .mrow mark.hm-grey{background:#3a3f45}
[data-theme=dark] #mlist .mrow mark.hm-olive{background:#3a4a22}
[data-theme=dark] #mlist .mrow mark.hm-blue{background:#1c3d4a}
[data-theme=dark] #mlist .mrow mark.hm-pink{background:#4a2f52}
[data-theme=dark] #mlist .mrow mark.hm-cyan{background:#1d4434}

/* ---------- 4. ⋮ 菜单里那一排色块 ---------- */
/* 跟上面「字体颜色」那排同样大（17px），但圆角大一点、留一条淡边，
   一眼能看出「这是底色」而不是「这是字色」。斜杠格＝清除。 */
#mbmenu .sw i.hlc{width:17px;height:17px;border-radius:5px;border:1px solid rgba(0,0,0,.14);cursor:pointer;display:inline-block;margin:0 1px}
#mbmenu .sw i.hlc:hover{transform:scale(1.14)}
#mbmenu .sw i.hlnone,
#hlpick .hlnone{background:#fff;background-image:linear-gradient(45deg,transparent 44%,#c2c8d0 44%,#c2c8d0 56%,transparent 56%)}
[data-theme=dark] #mbmenu .sw i.hlnone,
[data-theme=dark] #hlpick .hlnone{background:#1b1f24;background-image:linear-gradient(45deg,transparent 44%,#6b7480 44%,#6b7480 56%,transparent 56%)}

/* ---------- 5. 选中文字浮条 / 多选条上「🖍▾」弹出的小色板 ---------- */
/* 位置由 JS 算（贴着按钮、夹在视口里）；这里只管长相。 */
#hlpick{position:fixed;left:0;top:0;z-index:10012;display:flex;align-items:center;gap:6px;
  padding:7px 9px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);font-size:13px;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#hlpick .hlpk-lbl{color:var(--sub);font-size:12px;margin-right:2px;white-space:nowrap}
#hlpick .hlc{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.14);cursor:pointer;
  display:inline-block;flex:0 0 auto}
#hlpick .hlc:hover{transform:scale(1.12)}

/* 手机：手指点得住（28px），间隔也拉开一点 */
html.phone #hlpick{gap:8px;padding:9px 11px}
html.phone #hlpick .hlc{width:28px;height:28px;border-radius:8px}
html.phone #mbmenu .sw i.hlc{width:20px;height:20px;border-radius:6px}