/* ==================================================================
   使用指南页版面优化（2026-09-19）
   适用：guides/page.php 渲染的 4 篇指南 + guides.php 索引页 + guitar-chords.php
        （三者 <main> 都带 .guide-page，故共用本文件）

   版面问题的完整排查（两轮，务必连起来看）
   ----------------------------------------------------------------
   第一轮（2026-09-19 上午）：改成 1fr 1fr + align-items:start，
     以为解决了「同一行两个 section 被拉等高」。错。
   第二轮（用户反馈「右侧这么多空白」后重测）：

   .tuner-content 原为 1fr 1fr 双列（来自 tuner.css）。实测该页几何：
     行1 [#0 文字卡 422px] [      空 422px      ]  ← 空白 A
     行2 [#1 大表格 ======= 860px =======]        ← 被 1/-1 挤成独占整行
     行3 [#2 文字卡 422px] [      空 422px      ]  ← 空白 B
     行4/5 [related 全宽]

   空白 A/B 的直接成因：给表格节声明 grid-column:1/-1 后，一行放不下
     「422 + 860」，表格被推到下一行，留下它的弟兄独占一行 → 另一半空。

   而**即便不做 1/-1**、让表格留在单列（422px），一行变成
     「矮卡 454px + 高表 1420px」，行高取 max=1420，矮卡下方仍空 966px。

   → 结论：只要正文是两列，这两种空白都无法根除。
     唯一干净解是**单列**：每个 section 独占整行，横向无伙伴，右侧必然无空白。

   第三轮（用户截图显示「卡片只占左侧，右边一大片空」后重测）：
     真正的主因既不是两列、也不是 :has()，而是 tuner.css:397

         .guide-content { max-width: 860px; }     ← 2026-09 加的"阅读栏宽"限制

     它把正文卡死在 860px，而外层 .tuner-shell 是 1240px，于是右侧固定空 ~380px。
     实测（本机 1400 与 2835 视口两次，结论一致）：
       视口 1400 → shell w=1240 / content w=860 / 正文 section 宽 [422, 860, 422, 860, 860]
       视口 2835 → shell w=1240 / content w=860（同样卡在 860，与视口无关）

     **这是三个叠加的问题，必须逐个拆开看：**
       A) .guide-content max-width:860px  → 右侧固定空白 380px（主因）
       B) 1fr 1fr 两列 + :has() 跨列      → 同排兄弟独行，留下 422px 空洞
       C) align-items 只能防"拉高"        → 消除不了横向空白区域

   修法：
     1) 解除 860px 上限，让正文铺满 shell（width:100%;max-width:none）
     2) .guide-content 改 display:block（单列）——根治 B
     3) 绿色系统统一配色、卡片化、表格样式
     4) 移除 :has() / grid-column 跨列规则
   ================================================================== */

.guide-page{
  --tn-green:#0f7a5f; --tn-green-ink:#0b3d30; --tn-green-soft:#e8f4f0;
  --tn-green-line:#cfe6de; --tn-border:#e6e9e7; --tn-muted:#6b7a74;
  background:var(--music-bg);
}
.guide-page .tuner-shell{
  /* 实测：tuner.css:3 定义 .tuner-shell{width:min(1200px,100%)}，
     而 960px 那条是 body.tuning-active 限定的，与本页无关——
     所以之前的"被 960 卡住"是误判。
     真正的现象是：内容容器固定 1240px 居中，而 header/footer 是全宽，
     在 2835px 视口下两侧各空 ~797px，看起来就是"右侧一大片空白"。
     修法：把容器上限提上去，宽屏下充分利用空间。 */
  width:100%;
  max-width:1680px;
}

/* 头部 */
.guide-page .guide-title{margin:0 0 18px}
.guide-page .guide-title h1{
  margin:0 0 8px;color:var(--tn-green-ink);
  font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.03em;
}
.guide-page .guide-title p{margin:0;max-width:860px;color:var(--tn-muted);font-size:15px;line-height:1.6}

/* 正文：两列 + 顶部对齐（★关键修复） */
.guide-page .guide-content{
  display:block;                  /* ← 单列：无横向伙伴 */
  width:100%;
  max-width:none;                 /* ← 解除 tuner.css:397 的 860px 上限 */
  margin:20px 0 0;
}
.guide-page .guide-content>section{
  padding:22px 24px;margin:0 0 16px;border:1px solid var(--tn-border);border-radius:14px;
  background:#fff;box-shadow:0 1px 2px rgba(16,40,32,.04);min-width:0;
}
.guide-page .guide-content>section:last-child{margin-bottom:0}
/* 含表格/大图的节独占整行：长表在窄列里会横向挤压、行高暴涨 */
.guide-page .guide-content h2{
  margin:0 0 12px;color:var(--tn-green-ink);font-size:18px;font-weight:800;
  display:flex;align-items:center;gap:9px;
}
.guide-page .guide-content h2:before{
  content:"";width:4px;height:17px;border-radius:2px;background:var(--tn-green);flex:none;
}
.guide-page .guide-content p{margin:0 0 11px;max-width:860px;color:#4a5a54;font-size:14px;line-height:1.8}
.guide-page .guide-content p:last-child{margin-bottom:0}
.guide-page .guide-content strong{color:var(--tn-green-ink)}

/* 表格（调弦对照表等） */
.guide-page .guide-content table{
  width:100%;max-width:100%;border-collapse:separate;border-spacing:0;
  font-size:13.5px;font-variant-numeric:tabular-nums;
  border:1px solid var(--tn-border);border-radius:11px;overflow:hidden;
}
.guide-page .guide-content thead th{
  padding:10px 12px;text-align:left;font-weight:750;
  color:var(--tn-green-ink);background:var(--tn-green-soft);
  border-bottom:1px solid var(--tn-green-line);white-space:nowrap;
}
.guide-page .guide-content tbody td{
  padding:9px 12px;color:#42524c;border-bottom:1px solid #f1f4f2;
}
.guide-page .guide-content tbody tr:last-child td{border-bottom:0}
.guide-page .guide-content tbody tr:nth-child(even) td{background:#fafcfb}
.guide-page .guide-content table code{
  padding:1px 6px;border-radius:6px;background:var(--tn-green-soft);
  color:var(--tn-green-ink);font-size:12.5px;
}

/* 列表 */
.guide-page .guide-content ul,
.guide-page .guide-content ol{margin:0 0 11px;padding-left:1.3em;max-width:860px;color:#4a5a54;font-size:14px;line-height:1.8}
.guide-page .guide-content li{margin:5px 0}
.guide-page .guide-content li::marker{color:var(--tn-green)}

/* 相关工具 / 更多指南 */
.guide-page .related-tuners{padding:20px 22px;border:1px solid var(--tn-border);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(16,40,32,.04)}
.guide-page .related-tuners h2{margin:0 0 12px;color:var(--tn-green-ink);font-size:16px;font-weight:800}
.guide-page .related-tuners>div{display:flex;gap:9px;flex-wrap:wrap}
.guide-page .related-tuners a{
  padding:9px 14px;border:1px solid var(--tn-green-line);border-radius:9px;
  background:#f7fbfa;color:var(--tn-green);font-size:13.5px;font-weight:650;
  text-decoration:none;transition:background-color .15s ease,border-color .15s ease;
}
.guide-page .related-tuners a:hover{background:var(--tn-green-soft);border-color:var(--tn-green)}

/* 指南索引页（guides.php） */
.guide-page .guide-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.guide-page .guide-index-card{
  display:flex;flex-direction:column;gap:8px;padding:22px;
  border:1px solid var(--tn-border);border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(16,40,32,.04);text-decoration:none;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.guide-page .guide-index-card:hover{
  border-color:var(--tn-green);background:var(--tn-green-soft);
  box-shadow:0 6px 18px rgba(15,122,95,.12);transform:translateY(-1px);
}
.guide-page .guide-index-title{color:var(--tn-green-ink);font-size:17px;font-weight:800;line-height:1.4}
.guide-page .guide-index-desc{color:var(--tn-muted);font-size:13.5px;line-height:1.7}
.guide-page .guide-index-more{margin-top:auto;color:var(--tn-green);font-size:13px;font-weight:750}

/* 响应用 */
@media(max-width:900px){
  .guide-page .guide-index{grid-template-columns:1fr}
}
@media(max-width:560px){
  .guide-page .guide-content>section{padding:18px}
  .guide-page .guide-title h1{font-size:26px}
  .guide-page .guide-content table{font-size:12.5px}
  .guide-page .guide-content thead th,
  .guide-page .guide-content tbody td{padding:8px 9px}
}
@media print{
  .guide-page .guide-content>section{break-inside:avoid}
  .guide-page .related-tuners{display:none}
}

/* DARKMODE_AUDIT_20260924: guide surfaces and table contrast */
html[data-theme="dark"] .guide-page {
  --tn-green: #6eddb8;
  --tn-green-ink: #d7f5ea;
  --tn-green-soft: #193b33;
  --tn-green-line: #2b6253;
  --tn-border: rgba(255,255,255,.14);
  --tn-muted: #a8b3c0;
  --music-bg: #10151c;
  color: #e8eef5;
}
html[data-theme="dark"] .guide-page .guide-content>section,
html[data-theme="dark"] .guide-page .related-tuners,
html[data-theme="dark"] .guide-page .guide-index-card {
  background: #182230 !important;
  border-color: var(--tn-border) !important;
  color: #e8eef5 !important;
}
html[data-theme="dark"] .guide-page .guide-content :is(p,ul,ol,tbody td) {
  color: #c5d0dc !important;
}
html[data-theme="dark"] .guide-page .guide-content :is(h2,strong) {
  color: var(--tn-green-ink) !important;
}
html[data-theme="dark"] .guide-page .guide-content thead th {
  background: var(--tn-green-soft) !important;
  border-color: var(--tn-green-line) !important;
  color: var(--tn-green-ink) !important;
}
html[data-theme="dark"] .guide-page .guide-content tbody td {
  background: #182230 !important;
  border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="dark"] .guide-page .guide-content tbody tr:nth-child(even) td {
  background: #1a2433 !important;
}
html[data-theme="dark"] .guide-page .guide-content table code {
  background: #193b33 !important;
  color: #d7f5ea !important;
}
html[data-theme="dark"] .guide-page .related-tuners a {
  background: #1a2433;
  border-color: var(--tn-green-line);
  color: #9fe6cb;
}


/* DARKMODE_AUDIT_20260924_FIX3: remaining dark guide emphasis text */
html[data-theme="dark"] .guide-page .guide-content :is(b,figcaption) {
  color: #d7f5ea !important;
}