/* ============================================================
   body / hub.css  —  聚合首页专用（/body/）
   ------------------------------------------------------------
   版式取器械读数屏：暗面板、超大 DIN 数字读数靠右、一根细负荷条、
   留白给足。五个聚合页里唯一安静的一个 —— 元素少、对比低、
   橙红只出现在「在动的量」上。

   和另外三页的硬区别（别写串）：
     quiz    实心块 + 硬投影 + hover 位移
     fortune 罗马数字 + 发丝刻线 + 零色块
     anime   空心描边数字 + 2px 实黑线 + 一处玫红满灌
     这里    暗底 + 右侧大号读数 + 负荷条，靠留白不靠线

   负荷条不是装饰：宽度 = 分钟数 / 3 分钟满刻度，刻度写在标签里。

   命名全部带 con- 前缀。body/skin.css 已经占了 .panel .deck .gauge
   .g-fill .g-track .big .count .row .note .reads .week .plan .run
   .unit .chip .chips .sr .num —— 一个都不能碰。
   ============================================================ */

.con {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: grid;
  gap: var(--sp-7);
}

/* ---- 报头 ------------------------------------------------- */
.con-top { display: grid; gap: var(--sp-4); }

.con-kicker {
  margin: 0;
  display: flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.con-kicker .icon { width: 1.1em; height: 1.1em; color: var(--accent); }

.con-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.con-h1 em { font-style: normal; color: var(--accent); }

.con-lede { margin: 0; max-width: var(--measure); color: var(--muted); }

/* ---- 分节标题 --------------------------------------------- */
.con-h2 {
  margin: 0 0 var(--sp-5);
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.con-h2 .icon { width: 1.05em; height: 1.05em; color: var(--accent-soft); }

/* .con-part 把标题和它下面的东西锁进同一节：.con 是 grid，
   直接子元素之间会吃一次 gap，标题再带 margin 就离得太远。 */
.con-part { display: block; }

/* ---- 读数单元（主推块和货架行共用）-----------------------------
   一条读数 = 大号数字 + 小字说明（+ 可选的负荷条）。
   min-width:2ch 是按 .con-fig 自己的字号算的，所以三条读数的数字
   右对齐能对齐，不用在外层 grid 上写死一个 rem 列宽。 */
.con-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}
.con-fig {
  min-width: 2ch;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) ease;
}
.con-cap {
  flex: 1 1 8rem;
  font-size: var(--step--1);
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.con-cap b { font-weight: 600; color: var(--accent-soft); }

/* 负荷条：宽度 = 分钟数 / 3 分钟满刻度。轨道自己就把刻度画出来 ——
   两道缺口把整条切成三格，一格一分钟，所以不用在旁边拿文字解释。
   有边框有高度它才是表，只画一根实线会被当成给上面那行文字加的下划线。
   ::after 排在 <i> 后面，缺口盖在橙红填充上面，正是要的效果。 */
.con-bar {
  flex: 1 0 100%;
  position: relative;
  height: 6px;
  margin-top: var(--sp-1);
  background: var(--rule);
  border: 1px solid var(--faint);
}
.con-bar i { display: block; height: 100%; background: var(--accent); }
.con-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right,
    transparent 0 calc(100% / 3 - 1px), var(--paper) calc(100% / 3 - 1px) calc(100% / 3));
}

/* ---- 主推位：CH 01 面板 ------------------------------------ */
.con-main {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) ease;
}
.con-main:hover { border-color: var(--accent-soft); }
.con-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.con-main-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.con-main-ch, .con-ch {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--dur) ease;
}
/* 标签只描边不灌色 —— 满灌那一手是 anime 那页的重音，这页不抢。 */
.con-main-tag {
  margin-left: auto;
  padding: .25em .7em;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.con-main-body { display: grid; gap: var(--sp-3); }
.con-main-name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.con-main-what { max-width: var(--measure); color: var(--muted); }

.con-main-read { display: grid; gap: var(--sp-4); align-content: start; }

.con-main-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background var(--dur) ease, color var(--dur) ease;
}
.con-main-go .icon { width: 1.1em; height: 1.1em; }
.con-main:hover .con-main-go { background: var(--accent); color: var(--accent-ink); }

/* ---- 货架：其余频道 ---------------------------------------- */
.con-list { list-style: none; margin: 0; padding: 0; }
.con-row + .con-row { border-top: 1px solid var(--rule); }

.con-row > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
  padding: var(--sp-5) var(--sp-4);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease;
}
/* hover 不位移、不长边线：整行浅浅抬起，读数点亮成橙红。
   全网络只有这一页有大号读数，「数字亮起来」认得出是这一页。 */
.con-row > a:hover, .con-row > a:focus-visible { background: var(--raise); }
.con-row > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.con-row > a:hover .con-fig, .con-row > a:focus-visible .con-fig { color: var(--accent); }
.con-row > a:hover .con-ch, .con-row > a:focus-visible .con-ch { color: var(--accent-soft); }

.con-row-main { display: grid; gap: var(--sp-2); }
.con-row-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.015em;
}
.con-row-what { max-width: var(--measure); color: var(--muted); font-size: var(--step-0); }

.con-row-read { grid-column: 2; display: grid; gap: var(--sp-3); align-content: start; }
.con-row-read .con-fig { font-size: var(--step-2); }

/* 箭头只在宽屏出现（那里才有独立的一列）。窄屏和中屏整行本来就是
   链接，硬塞进两列网格只会压在标题上。 */
.con-go { display: none; width: 1.2em; height: 1.2em; color: var(--faint); transition: color var(--dur) ease; }
.con-row > a:hover .con-go { color: var(--accent); }

/* ---- 延伸阅读：两篇，无编号，和上面的频道表分得开 ---------- */
.con-reads { display: grid; gap: var(--sp-5); }
.con-read {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.con-read:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.con-read-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur) ease;
}
.con-read:hover .con-read-name { text-decoration-color: var(--accent); }
.con-read-what { color: var(--muted); font-size: var(--step-0); }
.con-read-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.con-read-go .icon { width: 1.1em; height: 1.1em; }

/* ---- 说明段 ----------------------------------------------- */
.con-notes { display: grid; gap: var(--sp-5); }
.con-note h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}
.con-note p { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.65; }
.con-note a { color: var(--accent); text-underline-offset: 3px; }

/* ---- 宽屏：正文栏被 --measure 锁住，右边不能整列空着 --------
   读数立成右列、报头分两栏、阅读和说明各排两栏。上一版 quiz 就栽在
   「断言全过、构建全绿、右边空一半」，所以这一段是必须的。 */
@media (min-width: 64rem) {
  .con-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--sp-7); align-items: end; }
  .con-kicker { grid-column: 1 / -1; }
  .con-lede { padding-left: var(--sp-5); border-left: 1px solid var(--rule); }

  .con-main { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--sp-7); padding: var(--sp-6); }
  .con-main-head { grid-column: 1 / -1; }
  .con-main-body { grid-column: 1; grid-row: 2 / span 2; }
  /* 读数靠右单列，一根竖线隔开 —— 器械屏上的读数栏就长这样。
     按钮压在这一列的底部：右列只有三条读数会在下面空掉一大块，
     让按钮去坐住那个底边，顺便读起来是「先看读数再按键」。 */
  .con-main-read {
    grid-column: 2; grid-row: 2;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--rule);
  }
  .con-main-go {
    grid-column: 2; grid-row: 3;
    align-self: end;
    justify-self: stretch;
    justify-content: center;
  }

  .con-row > a { grid-template-columns: auto minmax(0, 1fr) 17rem auto; align-items: start; padding: var(--sp-5) var(--sp-4); }
  /* 这一格自己是 grid 容器，垂直居中要用 align-self 从外层给，
     内部的 align-content 管不到它在行里的位置。 */
  .con-row-read {
    grid-column: 3; grid-row: 1;
    align-self: center;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--rule);
  }
  .con-go { display: block; grid-column: 4; grid-row: 1; align-self: center; }

  .con-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  /* 两篇的标题行数不一样，正文起点就会错开一行。subgrid 让两栏共用
     同一套行高，标题 / 正文 /「读它」三条基线各自对齐。 */
  @supports (grid-template-rows: subgrid) {
    .con-reads { grid-template-rows: auto; }
    .con-read { grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
  .con-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}

/* ---- 窄屏 ------------------------------------------------- */
@media (max-width: 40rem) {
  .con { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-6); }

  /* 主推块必须留在首屏里：买量进来的人第一眼要看见能点的东西。 */
  .con-main { padding: var(--sp-4); gap: var(--sp-4); }
  .con-main-name { font-size: var(--step-2); }
  .con-main-go { justify-self: stretch; justify-content: center; }

  .con-row > a { padding: var(--sp-4) var(--sp-2); gap: var(--sp-3) var(--sp-4); }
  .con-fig, .con-row-read .con-fig { font-size: var(--step-2); }
}

/* 这一页的动效只有颜色和底色，本来就没有位移，关掉过渡即可，
   静态版面完全不变。 */
@media (prefers-reduced-motion: reduce) {
  .con-main, .con-main-go, .con-row > a, .con-fig, .con-ch, .con-go, .con-read-name { transition: none; }
}