/* ── 索引页共用设计语言：首屏 + 职业花名册 ────────────────────────────
 * 2026-09-07 从宏首页抽出来，供 5 个索引页共用：
 *   /wow/en（BiS 职业格）· /wow/en/macros · /wow/en/talents ·
 *   /wow/en/rotation · /wow/en/farming
 * ⛔ 别在某一页再抄一份 —— 同一份东西被五个渲染器各画各的，正是站上栽过的坑。
 * ⛔ 也别去改 wow_en.css 里的 .gi-related / .gi-link-grid：那套还有别的页面在用。
 *
 * 取向：向游戏内的宏/天赋编辑框借语言 —— 等宽字、羊皮纸色正文、职业色细亮边。
 * ⛔ 改这个文件后必须跑 scripts/gi_css_brace_check.py：
 *    多一个 } 会静默废掉它后面的全部规则。
 */

.gi-rs-wide{max-width:1180px;margin:0 auto;padding:26px 20px 70px}

/* ── 首屏 ───────────────────────────────────────────────────────── */
.gi-rs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,468px);gap:52px;align-items:center;margin:18px 0 52px}
.gi-rs-hero.solo{grid-template-columns:1fr;gap:0}
/* 覆盖面小字用等宽 —— 这一行是左栏的锚点。
   ⛔ 别扩成「大数字 + 小标签」的三栏统计条，那是模板答案。 */
.gi-rs-eyebrow{font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;font-size:11.5px;letter-spacing:.1em;color:#6f7890;margin:0 0 14px}
.gi-rs-eyebrow b{color:#c8aa6e;font-weight:600}
.gi-rs-hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.08;color:#f2f5fa;margin:0 0 16px;letter-spacing:-.02em}
.gi-rs-hero .gi-rs-lede{color:#aab2c2;font-size:1.05rem;line-height:1.7;margin:0;max-width:42ch}
.gi-rs-hero.solo .gi-rs-lede{max-width:60ch}
.gi-rs-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* ── 样本框：游戏里的宏/天赋编辑框就是深底 + 细边 + 等宽羊皮纸色字 ── */
.gi-rs-frame{position:relative;border:1px solid #2a3040;border-radius:12px;background:#0b0e14;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.gi-rs-frame::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cc,#c8aa6e),transparent 78%)}
.gi-rs-frame-bar{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid #1e2431;background:linear-gradient(180deg,rgba(255,255,255,.045),transparent)}
.gi-rs-frame-ic{width:22px;height:22px;border-radius:5px;flex:none;border:1px solid rgba(255,255,255,.16)}
.gi-rs-frame-t{font-size:12.5px;font-weight:700;color:var(--cc,#c8aa6e);letter-spacing:.01em}
.gi-rs-frame-n{margin-left:auto;font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;font-size:11px;color:#6f7890;letter-spacing:.04em}
.gi-rs-frame-n b{color:#a8b2c6;font-weight:600}
.gi-rs-frame pre{margin:0;padding:18px 18px 20px;font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;font-size:13.5px;line-height:1.85;color:#f0e6c8;white-space:pre-wrap;word-break:break-all}
.gi-rs-frame pre.tight{font-size:11.5px;line-height:1.7;max-height:132px;overflow:hidden}
.gi-rs-frame-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid #1e2431}
.gi-rs-frame-foot a{font-size:12.5px;color:#c8aa6e;text-decoration:none}
.gi-rs-frame-foot a:hover{text-decoration:underline}
.gi-rs-cap{font-size:11.5px;color:#6f7890}

/* 起手序列样本：编号 + 技能名，一步一行 */
.gi-rs-steps{margin:0;padding:14px 16px 16px;list-style:none;counter-reset:s}
.gi-rs-steps li{display:flex;align-items:center;gap:11px;padding:5px 0;color:#dfe5f0;font-size:13px}
.gi-rs-steps li::before{counter-increment:s;content:counter(s);flex:none;width:19px;height:19px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:#8b95a8;display:flex;align-items:center;justify-content:center}
.gi-rs-steps li img{width:20px;height:20px;border-radius:5px;flex:none;border:1px solid rgba(255,255,255,.1)}

/* ── 职业花名册 ──────────────────────────────────────────────────
   ⛔ align-items:start 是关键：不加的话同一行会被最高的卡片撑齐，
      德鲁伊 4 个专精会把只有 3 个的卡片底部拉出一大块空白。 */
.gi-rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start;margin:0 0 20px}
.gi-rs-cls{background:#12151d;border:1px solid #1e2431;border-radius:14px;overflow:hidden;transition:border-color .18s}
.gi-rs-cls:hover{border-color:color-mix(in srgb,var(--cc) 40%,#1e2431)}
.gi-rs-cls-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #1e2431;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 13%,transparent),transparent 72%)}
.gi-rs-cls-h img{width:24px;height:24px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.14)}
.gi-rs-cls-h .nm{font-size:13.5px;font-weight:800;color:var(--cc);letter-spacing:.01em}
.gi-rs-cls-h .sub{margin-left:auto;font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;font-size:11px;color:#5f6879}

/* 专精用「行」不用「胶囊」：行会自己对齐成一列，胶囊换行后参差不齐 */
.gi-rs-sp{display:flex;align-items:center;gap:10px;padding:8px 14px;color:#c5cddb;text-decoration:none;border-top:1px solid rgba(255,255,255,.04)}
.gi-rs-sp:first-of-type{border-top:0}
.gi-rs-sp:hover{background:color-mix(in srgb,var(--cc) 9%,transparent);color:#fff}
.gi-rs-sp img{width:20px;height:20px;border-radius:5px;flex:none;border:1px solid rgba(255,255,255,.1)}
.gi-rs-sp .nm{font-size:.92rem}
.gi-rs-sp .n{margin-left:auto;font-family:ui-monospace,Consolas,"SFMono-Regular",monospace;font-size:11.5px;color:#5f6879;letter-spacing:.03em}
.gi-rs-sp:hover .n{color:#8b95a8}
.gi-rs-sp .ar{color:#4a5365;font-size:12px}
.gi-rs-sp:hover .ar{color:var(--cc)}
/* 整张卡片就是一个链接时（刷本规划：一个职业一页，没有逐专精入口） */
.gi-rs-cls.link{display:block;color:inherit;text-decoration:none}
.gi-rs-cls-body{padding:10px 14px 12px;font-size:12.5px;line-height:1.6;color:#8a93a6}

/* ── 分节 ───────────────────────────────────────────────────────── */
.gi-rs-rule{margin:44px 0 0;border:0;border-top:1px solid #1e2431}
.gi-rs-sec-eyebrow{margin:26px 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6f7890}
.gi-rs-updated{margin:6px 0 0;font-size:12px;color:#6f7890}

@media(max-width:820px){
  .gi-rs-hero{grid-template-columns:1fr;gap:26px}
  .gi-rs-hero .gi-rs-lede{max-width:none}
}