/* TRAINING — the section's nav bars
   ────────────────────────────────────────────────────────────────────────────
   Scoped to .traintop / .trainnav rather than .topbar / .sitebar, for the same
   reason the climbing bar is: the pages this drops onto already define headers
   of their own and the bar has to land on all of them without a fight.

   The shape is deliberately the climbing section's — same heights, same sticky
   behaviour, same sideways scroll on a phone — because they are two rooms in
   one house and a bar that moves when you cross between them reads as a
   different site. Only the accent differs: the training room is Strava orange
   where climbing is clay. */

/* ── the terminal bar, then this section's own bar underneath ── */
.traintop{background:var(--brand-bar);color:#fff2ec}
.traintop .inner{max-width:1060px;margin:0 auto;padding:.55rem 1.5rem;display:flex;align-items:center;gap:.6rem}
.traintop a{text-decoration:none}
.traintop .brand{color:#fff;font-weight:800;letter-spacing:.16em;font-size:.78rem}
.traintop .up{margin-left:auto;color:#ffd9c9;font-size:.78rem}

.trainnav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.trainnav .inner{max-width:1060px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:.3rem}
.trainnav .mark{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;margin-right:1.2rem;color:var(--ink);
                text-decoration:none}
/* text-decoration is set here rather than left to each page: three of these
   pages style `a` globally and the others do not, which is exactly how the
   climbing bar came out underlined on half its pages before it was fixed. */
.trainnav a{color:var(--soft);font-weight:600;font-size:.92rem;padding:.9rem .85rem;display:block;
           text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.trainnav a:hover{color:var(--ink);text-decoration:none}
.trainnav a.on{color:var(--ink);border-bottom-color:var(--brand)}

@media(max-width:820px){
  /* Four tabs and a wordmark will not fit 375px, so the bar scrolls — and it
     scrolls visibly. The wordmark stays put to give the tabs something to sit
     against, and the right edge fades so there is a sign that more exists. */
  .trainnav .inner{padding:0 .85rem;gap:0;overflow-x:auto;scrollbar-width:none;
                  -webkit-overflow-scrolling:touch}
  .trainnav .inner::-webkit-scrollbar{display:none}
  .trainnav .mark{font-size:.98rem;margin-right:.5rem;position:sticky;left:0;
                 background:var(--card);padding-right:.4rem;z-index:1}
  .trainnav a{padding:.8rem .45rem;font-size:.88rem;white-space:nowrap}
  .trainnav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2.2rem;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),var(--card))}
}