/* CLIMBING — the section's nav bars
   ────────────────────────────────────────────────────────────────────────────
   Scoped to .climbtop / .climbnav rather than .topbar / .sitebar, because the
   log, the gallery and the woodshed each already define a .topbar of their own
   and this has to be droppable onto all three without a fight. */

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

.climbnav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.climbnav .inner{max-width:1060px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:.3rem}
.climbnav .mark{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;margin-right:1.2rem;color:var(--ink)}
/* text-decoration lives here rather than in each page's own `a` rule: the log
   and the room page set it globally and add.html, board.html and gallery.html
   do not, so the same bar came out underlined on three of six pages. */
.climbnav 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}
.climbnav a:hover{color:var(--ink);text-decoration:none}
.climbnav a.on{color:var(--ink);border-bottom-color:var(--clay)}
/* Add is his tab and nobody else's, and on a phone it is the last one on a bar
   that scrolls — so it is coloured, which is enough to recognise from the sliver
   of it showing past the fade. */
.climbnav a.mine{color:var(--clay);font-weight:700}
.climbnav a.mine:hover{color:var(--clay)}


@media(max-width:820px){
  /* The tabs and the wordmark will not fit 375px, so the bar scrolls — but it
     scrolls VISIBLY. The first version hid the scrollbar and dropped the
     wordmark, which left the tabs floating with nothing to sit against and no
     sign that a sixth one existed at all. The wordmark stays put, the tabs
     tighten, and the right edge fades so you can see there is more.

     Add used to be a `.right` link that this block set to display:none — so the
     one tab that exists for logging a day at a crag was the one tab missing on
     the phone in the car park. It is an ordinary tab now and it scrolls with
     the rest. */
  .climbnav{position:sticky;top:0}
  .climbnav .inner{padding:0 .85rem;gap:0;overflow-x:auto;scrollbar-width:none;
                  -webkit-overflow-scrolling:touch}
  .climbnav .inner::-webkit-scrollbar{display:none}
  .climbnav .mark{font-size:.98rem;margin-right:.5rem;position:sticky;left:0;
                 background:var(--card);padding-right:.4rem;z-index:1}
  .climbnav a{padding:.8rem .45rem;font-size:.88rem;white-space:nowrap}
  .climbnav::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))}
}