/* ============================================================
   比赛详情页 ·「基本信息」页签面板样式（.mdb-*）
   ------------------------------------------------------------
   令牌与 legacy.css / site.css 一致（4/8/12/16 间距、4px 圆角、HSL 变量）
   仅作用于 md-panel-basic 内部。

   【统一表格形式】历史交锋 / 最近战绩 / 后续赛程用同一套表格：
     .mdb-tbl    表容器
     .mdb-mrow   行（.mrow-10 = 比赛行 10 列；.mrow-4 = 赛程行 4 列）
     .mdb-mrow.mhead  表头行
   比赛行列定义：日期 赛事 主队 比分 客队 半场 盘口 赢输走 总进球 结果
   主队名右对齐、客队名左对齐 → 比分天然落在两队正中间。

   【结果配色】赢方 = 红 + 加粗；输方 = 蓝；平 / 走 = 黑、不加粗。
   （这一条覆盖了全站「胜红 / 平橙 / 负绿」的默认语义，是本面板的专门约定，见 STANDARDS.md）
   ============================================================ */

/* 本面板的「输」用蓝色（全站 --lose 是绿色），只在这里生效 */
.md-root { --mdb-lose: 217 91% 55%; }

/* 页签切换时内容高度变化会导致滚动条出现/消失、居中容器整体横移；
   固定滚动条槽位消除漂移 */
html { scrollbar-gutter: stable; }

/* 事实区：等宽均分单排，项间竖分隔线；窄屏自然两列换行 */
.mdb-facts{display:flex;flex-wrap:wrap}
.mdb-facts .it{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 16px;border-left:1px solid hsl(var(--border))}
.mdb-facts .it:first-child{padding-left:0;border-left:0}
.mdb-facts .it:last-child{padding-right:0}
.mdb-facts .k{font-size:12px;color:hsl(var(--muted-foreground));white-space:nowrap}
.mdb-facts .v{font-size:15px;font-weight:600;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdb-facts .v small{font-size:12px;font-weight:500;color:hsl(var(--muted-foreground))}

/* 简报块（内嵌于基本信息卡） */
.mdb-brief-wrap{margin-top:14px;padding-top:14px;border-top:1px solid hsl(var(--border))}
.mdb-brief-label{font-size:14px;font-weight:600;line-height:1.2;padding-left:12px;border-left:3px solid hsl(var(--brand));margin-bottom:8px}
.mdb-brief{font-size:14px;line-height:1.9;color:hsl(var(--foreground))}

/* 小节标题行（历史交锋 / 最近战绩 / 后续赛程 的统计说明） */
.mdb-subline{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:600;color:hsl(var(--foreground));margin-bottom:8px}
.mdb-subline b{font-weight:700}
/* 最近战绩：两队**左右并排**（原有版式，别改成上下堆叠）；后续赛程维持上下两块 */
.mdb-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mdb-blk+.mdb-blk{margin-top:16px}
.mdb-duo .mdb-blk+.mdb-blk{margin-top:0}

/* ---- 统一表格 ---- */
.mdb-tbl{display:flex;flex-direction:column}
.mdb-mrow{display:grid;gap:8px;align-items:center;height:32px;font-size:14px}
.mdb-mrow+.mdb-mrow{border-top:1px solid hsl(var(--border))}
.mrow-10{grid-template-columns:54px 60px minmax(0,1fr) 48px minmax(0,1fr) 40px 46px 46px 52px 36px}
.mrow-4{grid-template-columns:56px 72px minmax(0,1fr) 52px}
.mhead{height:28px;font-size:12px;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));border-top:0}
/* 表头与数据行同列同对齐（主队右、客队左、比分居中） */
.mdb-mrow .d{font-size:11px;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdb-mrow .lg{font-size:12px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdb-mrow .hm{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
.mdb-mrow .aw{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:10px}
.mdb-mrow .sc{text-align:center;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.mdb-mrow .half{font-size:12px;color:hsl(var(--muted-foreground));text-align:center}
.mdb-mrow .hc,.mdb-mrow .hl,.mdb-mrow .tg{text-align:center}
.mdb-mrow .tg{font-size:12px;color:hsl(var(--muted-foreground))}
.mdb-mrow .bdg{text-align:right}
.mdb-mrow .fx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdb-mrow .gap{font-size:12px;color:hsl(var(--muted-foreground));text-align:right;white-space:nowrap}

/* 胜平负 / 赢输走 徽标：赢=红加粗、输=蓝、平（走）=黑不加粗 */
.mdb-res{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;border-radius:4px;font-size:12px;padding:0 6px}
.mdb-res.w{background:hsl(var(--win) / .1);color:hsl(var(--win));font-weight:700}
.mdb-res.l{background:hsl(var(--mdb-lose) / .1);color:hsl(var(--mdb-lose));font-weight:400}
.mdb-res.d{background:hsl(var(--muted) / .7);color:hsl(var(--foreground));font-weight:400}

/* 盘口值（按该行所属球队视角：让/受/平手；空数据 --） */
.mdb-hcap{color:hsl(var(--muted-foreground));font-size:12px;white-space:nowrap}
.mdb-hcap.none{letter-spacing:1px}
.muted{color:hsl(var(--muted-foreground))}

/* 半宽块（左右并排的最近战绩）里的同一套 10 列表格：
   列**不变**，只是整体收窄 —— 字号 11px、列间距 3px，队名列各拿约 112px。
   实测（1440 宽）：卡片内容宽 1168 → 每个子块 576，扣卡片内边距 16×2 = 544；
   定宽列 50+46+34+28+38+34+38+24 = 292 + 9×3 gap = 319 → 两个队名列各约 112px。 */
@media (min-width:721px){
  .mdb-duo .mdb-mrow{gap:3px;font-size:11px}
  .mdb-duo .mrow-10{grid-template-columns:50px 46px minmax(0,1fr) 34px minmax(0,1fr) 28px 38px 34px 38px 24px}
  .mdb-duo .mdb-mrow .hm{padding-right:6px}
  .mdb-duo .mdb-mrow .aw{padding-left:6px}
  .mdb-duo .mdb-mrow .half,.mdb-duo .mdb-mrow .tg,.mdb-duo .mdb-mrow .d,.mdb-duo .mdb-mrow .lg{font-size:11px}
  .mdb-duo .mdb-res{min-width:22px;padding:0 4px;height:18px}
}

@media (max-width:720px){
  .mdb-duo{grid-template-columns:1fr}
  .mdb-facts .it{flex:1 1 40%;border-left:0;padding:0 16px 0 0}
  .mdb-facts .it:nth-child(2n){padding-right:0}
  .mdb-facts .it:nth-child(2n+1){padding-right:12px}
  /* 窄屏：日期/赛事/半场/盘口/赢输走/总进球收掉，只留 主队 比分 客队 结果 */
  .mdb-mrow{gap:6px;font-size:13px}
  .mrow-10{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 32px}
  .mdb-mrow .d,.mdb-mrow .lg,.mdb-mrow .half,.mdb-mrow .hc,.mdb-mrow .hl,.mdb-mrow .tg{display:none}
  .mrow-4{grid-template-columns:52px 60px minmax(0,1fr) 44px}
}
