/* ═══════════════════════════════════════════════════════════════════
   迭代 19 · 「按你此刻的处境选一条路」做成四扇能看出来的门
   ───────────────────────────────────────────────────────────────────
   量出来的问题：首屏之后连续四屏亮点像素只有 0.47–0.83%，是全页最弱的
   一段，而这一段里最要紧的就是这一块 —— 它是整页**最主要的导航**，
   四类访客四条路，功能上比任何一块都重要。

   可它现在渲染成四行纯文字：序号是暗金虚影、说明是灰字、
   「看方法 →」被甩到右边七百像素外、只有 11px。
   **看不出这四行是能点的门**。而这一块要是没被当成门，
   「按你此刻的处境选一条路」这个前提整个落空。

   这一版让每一行都长得像一扇门：
     ① 序号放大成版面的节奏，不再是可有可无的虚影
     ② 标题提一档，说明收窄到读得舒服的行宽
     ③ 右边那句话变成一个有边框的「去」的按钮，一眼是控件不是标注
     ④ 整行有静态可点线索（左侧一道待亮的金线 + 按钮边框），
        不依赖鼠标悬停 —— 手机上没有 hover，静态就得看得出来
     ⑤ 悬停 / 键盘聚焦时整行抬起、金线亮、按钮填实

   一个字没改，链接一条没动，只改这一块的版面。
   ═══════════════════════════════════════════════════════════════════ */

html body .qroute__list{
  border-top:1px solid var(--xh-hair)}

html body .qroute__row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(20px,3vw,54px);
  padding:clamp(22px,2.6vw,34px) clamp(16px,1.8vw,26px)
          clamp(22px,2.6vw,34px) clamp(14px,1.8vw,24px)!important;
  border-bottom:1px solid var(--xh-hair)!important;
  border-left:2px solid transparent;
  text-decoration:none;
  transition:background .38s cubic-bezier(.16,1,.3,1),
             border-left-color .38s cubic-bezier(.16,1,.3,1),
             transform .38s cubic-bezier(.16,1,.3,1)}

/* ① 序号：这一块的节奏靠它 */
html body .qroute__no{
  font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(34px,4.4vw,68px)!important;
  line-height:1;letter-spacing:-.01em;
  color:var(--xh-gold-lo)!important;
  transition:color .38s cubic-bezier(.16,1,.3,1)}

/* ② 标题和说明 */
html body .qroute__txt{display:block;min-width:0}
html body .qroute__txt b{
  display:block;margin-bottom:8px;
  font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(19px,2vw,27px)!important;line-height:1.4;
  color:var(--xh-fg0)!important;
  word-break:auto-phrase}
html body .qroute__txt > span{
  display:block;max-width:62ch;
  font-size:clamp(13.5px,1.1vw,15px)!important;
  line-height:1.8!important;
  color:var(--xh-fg2)!important;
  word-break:auto-phrase}

/* ③ 右边那句话变成一个看得出来是控件的按钮 */
html body .qroute__go{
  flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px clamp(16px,1.6vw,22px)!important;
  border:1px solid var(--xh-hair)!important;
  border-radius:2px;
  font-size:clamp(12.5px,1vw,13.5px)!important;
  letter-spacing:.02em;
  color:var(--xh-fg1)!important;
  background:transparent;
  /* 四个按钮同宽，才像一列控件，而不是四条长短不一的标注 */
  /* 下限要高过最长的那条标签「4 个 Demo →」(实测 134px)，否则它会被自己的
     内容撑宽，四个就不齐了 */
  min-width:clamp(112px,10vw,142px);justify-content:center;
  transition:background .38s cubic-bezier(.16,1,.3,1),
             border-color .38s,color .38s,transform .38s cubic-bezier(.16,1,.3,1)}

/* ⑤ 悬停 / 键盘聚焦：整行醒过来 */
html body .qroute__row:hover,
html body .qroute__row:focus-visible{
  background:var(--xh-bg3)!important;
  border-left-color:var(--xh-gold)!important;
  transform:translateX(3px)}
html body .qroute__row:hover .qroute__no,
html body .qroute__row:focus-visible .qroute__no{
  color:var(--xh-gold-hi)!important}
html body .qroute__row:hover .qroute__go,
html body .qroute__row:focus-visible .qroute__go{
  background:var(--xh-gold)!important;
  border-color:var(--xh-gold)!important;
  color:#17120A!important;
  transform:translateX(4px)}
html body .qroute__row:focus-visible{
  outline:1px solid var(--xh-gold);outline-offset:3px}

/* ── 窄屏：序号退到标题上方，按钮落到整行下面撑满 ─────────────────── */
@media (max-width:820px){
  html body .qroute__row{
    grid-template-columns:auto minmax(0,1fr)!important;
    column-gap:clamp(14px,3vw,20px);
    row-gap:clamp(14px,3vw,18px);
    align-items:start}
  html body .qroute__no{
    font-size:clamp(28px,8vw,40px)!important;
    padding-top:2px}
  html body .qroute__go{
    grid-column:1 / -1;
    justify-content:center;
    padding:13px 18px!important}
}