/* ==========================================================================
   rill — the public trail page (/trail#trail=…, a published one at /t/<id>)
   and the curator page (/c/<pubkey>, the .cp- rules at the end).
   loaded after styles.css (tokens, font, buttons, tags, circles, toast).
   every rule here is scoped to body.trailpage or a .tp- / .cp- class, so
   nothing leaks into the home page.
   ========================================================================== */

body.trailpage { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.trailpage main { flex: 1 0 auto; display: flex; flex-direction: column; }
.tp-grid, .tp-error { flex: 1 0 auto; }

/* ---------- top bar ---------- */
/* the home page lets the map show through its bar until you scroll (site.js): here it is always solid */
.trailpage .tp-nav { background: var(--paper); border-bottom-color: var(--hair); }
/* the page below runs edge to edge (no --maxw column): so does the bar, or its ends drift off the page's past 1680px */
.trailpage .tp-nav .nav__inner { max-width: none; }
.tp-nav__open {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 0;
  font-size: 13px; letter-spacing: .06em; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.tp-nav__open:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ---------- layout: phones + tablets stack (title, map, note, route) ---------- */
.tp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "map" "note" "panel";
}
.tp-head { grid-area: head; padding: 22px var(--gutter) 18px; min-width: 0; }
.tp-map { grid-area: map; min-width: 0; }
.tp-note { grid-area: note; min-width: 0; }
.tp-panel { grid-area: panel; min-width: 0; padding: 22px var(--gutter) 48px; }
.tp-head > *, .tp-note, .tp-panel > * { max-width: 820px; }

/* ---------- header ---------- */
.tp-kicker { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.tp-kicker__dot { width: 7px; height: 7px; border-radius: 50%; border: 1.2px solid var(--accent); flex: none; }
.tp-title {
  margin-top: 10px;
  font-size: clamp(21px, 2.3vw, 32px); font-weight: 400; line-height: 1.22; letter-spacing: .02em;
  overflow-wrap: anywhere; text-wrap: balance;
}
html:not(.js) .tp-meta { display: none; }
.tp-meta { margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tp-grid.is-pending .tp-title { color: var(--ink-2); }
/* a published trail: its curator, views, follow */
.tp-curator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.tp-curator__line { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tp-curator__key { color: var(--ink); border-bottom: 1px solid var(--ink); transition: color .15s, border-color .15s; }
.tp-curator__key:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tp-curator__views::before { content: " · "; color: var(--ink-3); }
.tp-curator__views:empty::before { content: none; }
.tp-curator__acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tp-curator__acts:not(:has(> :not([hidden]))) { display: none; }
.tp-follow, .tp-boost { min-height: 30px; }
.tp-boost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-follow.is-on { border-color: var(--accent); color: var(--accent); }
.tp-follow.is-on:hover { background: var(--accent); color: #fff; }
.tp-follow[aria-busy="true"] { opacity: .6; cursor: progress; }
/* who made it: rill's page, anyone's trail */
.tp-by { margin-top: 6px; font-size: 12px; line-height: 1.55; letter-spacing: .03em; color: var(--ink-2); max-width: 62ch; }
.tp-warn {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; max-width: 62ch;
  font-size: 12.5px; line-height: 1.55; letter-spacing: .03em; color: var(--accent);
}
.tp-warn__mark {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px;
  border: 1px solid var(--accent); border-radius: 50%; font-size: 11px; font-weight: 500;
}
.tp-noscript { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.tp-noscript a { border-bottom: 1px solid var(--ink); }
.tp-note {
  padding: 18px var(--gutter) 0;
  font-size: 13.5px; line-height: 1.7; color: var(--ink); max-width: calc(820px + 2 * var(--gutter));
  white-space: pre-line; overflow-wrap: anywhere;
}

/* ---------- map ---------- */
.tp-map {
  position: relative; overflow: hidden; background: var(--paper);
  height: 56vh; height: 56svh; min-height: 300px; max-height: 720px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
#tp-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; user-select: none; -webkit-user-select: none;
}
#tp-canvas:active { cursor: grabbing; }
#tp-canvas:focus { outline: none; }
#tp-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }   /* inset: the map clips its overflow */

.tp-loading {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 6px 12px; background: var(--paper);
  font-size: 12px; letter-spacing: .08em; color: var(--ink-2); white-space: nowrap;
}
.tp-loading__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .tp-loading__dot { animation: tp-blink 1.1s ease-in-out infinite; }
}
@keyframes tp-blink { 50% { opacity: .25; } }
.tp-loading.is-error { color: var(--ink); border: 1px solid var(--ink); white-space: normal; text-align: center; line-height: 1.5; }
/* the map could not be drawn: a line saying so instead of an empty box */
.tp-grid.no-map .tp-map { height: auto; min-height: 0; padding: 16px var(--gutter); }
.tp-grid.no-map #tp-canvas { display: none; }
.tp-grid.no-map .tp-loading { position: static; transform: none; max-width: none; justify-content: center; }
/* without javascript there is no trail to show: just the line saying why */
html:not(.js) .tp-map, html:not(.js) .tp-panel { display: none; }

.tp-zoom, .tp-walk { position: absolute; bottom: 24px; z-index: 3; display: flex; background: var(--paper); }
.tp-zoom { left: 24px; }
.tp-walk { right: 24px; }
.tp-grid.no-map .tp-zoom, .tp-grid.no-map .tp-walk { display: none; }
.tp-zoom button, .tp-walk button {
  display: grid; place-items: center; width: 36px; height: 34px;
  border: 1px solid var(--ink); background: var(--paper); font-size: 16px; line-height: 1;
  transition: background-color .15s, color .15s;
}
.tp-zoom button + button { border-left: 0; }
@media (hover: hover) {
  .tp-zoom button:hover, .tp-walk button:hover { background: var(--ink); color: var(--paper); }
}
.tp-zoom svg path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; }
.tp-walk__step {
  display: grid; place-items: center; min-width: 9.5ch; padding: 0 10px;
  border-block: 1px solid var(--ink);
  font-size: 12.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tp-walk.is-walking .tp-walk__step { color: var(--accent); }
.tp-walk button[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.tp-walk button[aria-disabled="true"]:hover { background: var(--paper); color: var(--ink-3); }
.tp-zoom button:focus-visible, .tp-walk button:focus-visible { outline-offset: -4px; }

/* ---------- actions ---------- */
.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-actions .btn { min-height: 40px; }
.tp-actions .btn--ink:hover { color: #fff; }
.tp-actions [aria-busy="true"] { opacity: .6; cursor: progress; }
.tp-more { margin-top: 14px; }
.tp-more .arrow-link { border-bottom: 1px solid transparent; }
.tp-more .arrow-link:hover { color: var(--accent); }
.tp-fine { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); letter-spacing: .04em; max-width: 58ch; }
.tp-grid.is-pending .tp-panel { visibility: hidden; }
.tp-clip { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------- the route ---------- */
.tp-route { margin-top: 36px; }
.tp-route__head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; }
.tp-route__title { font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.tp-route__rule { flex: 1; min-width: 16px; height: 1px; background: var(--hair); }
.tp-stops { border-top: 1px solid var(--ink); counter-reset: none; }
.tp-stops:focus { outline: none; }
.tp-stops:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.tp-stop {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 16px 0 17px; border-bottom: 1px solid var(--hair);
}
/* the route between the numbers */
.tp-stop:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 46px; bottom: -17px; width: 0;
  border-left: 1px solid var(--hair);
}
.tp-stop__n { position: relative; z-index: 1; transition: background-color .2s, border-color .2s, color .2s; }
.tp-stop__body { min-width: 0; padding-top: 4px; }
.tp-stop__go {
  text-align: left; font-size: 14.5px; line-height: 1.4; letter-spacing: .03em;
  border-bottom: 1px solid transparent; overflow-wrap: anywhere; transition: color .15s, border-color .15s;
}
.tp-stop__go:hover { border-bottom-color: currentColor; }
.tp-stop__coll { margin-top: 2px; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); overflow-wrap: anywhere; }
.tp-stop__note { margin-top: 7px; font-size: 12.5px; line-height: 1.65; color: var(--ink); max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.tp-stop__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 7px; }
.tp-stop__host { min-width: 0; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); overflow-wrap: anywhere; }
.tp-stop__arrow { color: var(--ink-3); }
.tp-stop__open {
  flex: none; padding-bottom: 1px; font-size: 13px; line-height: 1.3; letter-spacing: .04em; white-space: nowrap;
  border-bottom: 1px solid var(--ink); transition: color .15s, border-color .15s;
}
.tp-stop__open:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tp-stop__open.is-off { border-bottom: 0; color: var(--ink-2); }
/* the stop you are on: accent number, title and tick (like the detail card) */
.tp-stop.is-current::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 30px; height: 2px; background: var(--accent);
}
.tp-stop.is-current .tp-stop__n { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-stop.is-current .tp-stop__go { color: var(--accent); }

/* ---------- broken / missing link ---------- */
.tp-error { width: 100%; max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 14vh, 150px) var(--gutter) clamp(72px, 14vh, 150px); }
.tp-error__mark { width: 120px; height: 48px; overflow: visible; }
.tp-error__mark path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.tp-error__mark .route--gap { stroke: var(--ink-3); stroke-dasharray: 2 5; }
.tp-error__mark circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.tp-error__title { margin-top: 28px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; letter-spacing: .02em; text-wrap: balance; }
.tp-error__title:focus { outline: none; }
.tp-error__detail { margin-top: 14px; max-width: 58ch; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.tp-error .btn { margin-top: 30px; }

/* ---------- what is rill + footer ---------- */
.tp-about {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  padding: 30px var(--gutter); border-top: 1px solid var(--ink);
}
.tp-about__line { font-size: 14px; line-height: 1.6; max-width: 62ch; }
.tp-about__go { flex: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.tp-about__go:hover { color: var(--accent); border-bottom-color: var(--accent); }

.tp-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 16px var(--gutter) 28px; border-top: 1px solid var(--hair);
}
.tp-foot__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.tp-foot__ticker { color: var(--ink); }
.tp-foot i { font-style: normal; color: var(--ink-3); }
.tp-ca {
  font: inherit; letter-spacing: .06em; text-transform: none; color: inherit;   /* base58 is case-sensitive: never uppercase an address */
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.tp-ca:hover { color: var(--accent); border-bottom-color: currentColor; }
.tp-foot__note { font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }

/* ---------- desktop: map left (~60%), trail on the right ---------- */
@media (min-width: 1024px) {
  .tp-grid {
    grid-template-columns: minmax(0, 1fr) clamp(380px, 40%, 640px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "map head" "map note" "map panel";
  }
  .tp-map {
    grid-row: 1 / -1; align-self: start;
    position: sticky; top: var(--nav-h);
    height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
    min-height: 520px; max-height: none; border: 0;
  }
  .tp-head, .tp-note, .tp-panel { border-left: 1px solid var(--ink); padding-left: 36px; padding-right: var(--gutter); }
  .tp-head { padding-top: 36px; padding-bottom: 0; }
  .tp-note { padding-top: 16px; }
  .tp-panel { padding-top: 26px; padding-bottom: 56px; }
  .tp-zoom { left: 28px; bottom: 28px; }
  .tp-walk { right: 28px; bottom: 28px; }
  /* the toast sits under the route column, clear of the map's walk controls */
  body.trailpage.has-bar .toast {
    left: calc(100% - clamp(380px, 40%, 640px) / 2);
    max-width: calc(clamp(380px, 40%, 640px) - 48px);
  }
}

/* without javascript only the header shows: one column, no rule beside an empty map */
@media (min-width: 1024px) {
  html:not(.js) .tp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head"; }
  html:not(.js) .tp-head { border-left: 0; padding-left: var(--gutter); padding-bottom: 48px; }
}
/* 1024–1099: the route head has no room for the hint next to "the route" */
@media (min-width: 1024px) and (max-width: 1099px) {
  .tp-route__hint { display: none; }
}

/* a narrow right column: save on its own row, copy + post under it */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tp-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .tp-actions__save { grid-column: 1 / -1; }
}

/* ---------- phones: the actions stick to the bottom ---------- */
@media (max-width: 720px) {
  .tp-head { padding-top: 18px; padding-bottom: 16px; }
  .tp-zoom { left: var(--gutter); bottom: 14px; }
  .tp-walk { right: var(--gutter); bottom: 14px; }
  .tp-panel { padding-top: 18px; }
  /* a portrait phone: the plate is ~2:1 and framed by its width, so a map
     much taller than it is wide is mostly empty paper */
  .tp-map { height: min(56svh, 100vw); }
  .tp-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-wrap: nowrap; gap: 6px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--ink);
  }
  .tp-actions .btn { min-height: 44px; padding: 0 9px; font-size: 12px; letter-spacing: .03em; }
  .tp-actions__save { flex: 1 1 auto; }
  /* the actions sit in the bar: "open in the full atlas" and the fine print
     open the panel, then the route (in document order, so tab order matches) */
  .tp-more { margin-top: 0; }
  .tp-route { margin-top: 26px; }
  .tp-route__hint { display: none; }
  body.trailpage.has-bar { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  /* a control focused under the bar scrolls clear of it */
  html:has(body.trailpage.has-bar) { scroll-padding-bottom: calc(77px + env(safe-area-inset-bottom)); }
  body.trailpage.has-bar .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .tp-stop { column-gap: 12px; }
  .tp-about { padding-block: 26px; }
}
@media (max-width: 389px) {
  .tp-copy__more { display: none; }
}

/* ---------- touch: 44px targets ---------- */
@media (pointer: coarse) {
  .tp-zoom button, .tp-walk button { width: 44px; height: 44px; }
  /* a taller hit area that leaves the underline where it is */
  .tp-stop__go, .tp-stop__open, .tp-nav__open, .tp-more .arrow-link, .tp-about__go, .tp-ca { position: relative; }
  .tp-stop__go::after, .tp-stop__open::after, .tp-nav__open::after, .tp-more .arrow-link::after, .tp-about__go::after, .tp-ca::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
}
/* a tap leaves :hover behind on touch screens: underline on hover only where there is one */
@media (hover: none) {
  .tp-stop__go:hover, .tp-nav__open:hover, .tp-ca:hover { border-bottom-color: transparent; }
}

@media print {
  .tp-map, .tp-actions, .tp-more, .trailpage .toast { display: none !important; }
}

/* ==========================================================================
   the curator page (curator/index.html, js/curator.js): body.trailpage.curatorpage
   ========================================================================== */
.cp { width: 100%; }
.cp-view { flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.cp-head { padding: clamp(36px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.cp-title {
  margin-top: 14px; font-size: clamp(34px, 5.2vw, 64px); font-weight: 300; line-height: 1.05; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.cp-view.is-loading .cp-title { color: var(--ink-2); }
.cp-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; }
.cp-key__full { min-width: 0; font-size: 12.5px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-2); word-break: break-all; font-variant-numeric: tabular-nums; }
.cp-key__copy { font-size: 12px; letter-spacing: .06em; border-bottom-color: var(--ink); }
.cp-stats {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ink);
}
.cp-counts { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 5vw, 64px); margin: 0; }
.cp-counts > div { min-width: 0; }
.cp-counts dt { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cp-counts dd { margin: 6px 0 0; font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-follow { display: flex; align-items: center; gap: 12px; }
.cp-follow .btn { min-width: 150px; min-height: 42px; }
.cp-follow .btn.is-on { border-color: var(--accent); color: var(--accent); background: var(--paper); }
.cp-follow .btn.is-on:hover { background: var(--accent); color: #fff; }
.cp-follow .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.cp-you { font-size: 12px; letter-spacing: .06em; color: var(--accent); }
/* your @name, on your own page (js/burn.js name picker) */
.cp-name {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hair);
}
.cp-name[hidden] { display: none; }
.cp-name__label { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cp-name__label span { text-transform: none; letter-spacing: .06em; }
.cp-name__now { margin-top: 8px; font-size: 13px; line-height: 1.55; letter-spacing: .03em; color: var(--ink-2); max-width: 48ch; }
.cp-name__now strong { font-weight: 400; color: var(--accent); }
.cp-name__pick { width: min(100%, 380px); }
@media (max-width: 720px) { .cp-name__pick { width: 100%; } }
.cp-honest {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; max-width: 70ch;
  font-size: 12.5px; line-height: 1.6; letter-spacing: .03em; color: var(--ink-2);
}
.cp-honest .tp-warn__mark { border-color: var(--ink-3); color: var(--ink-2); }
.cp-trails { min-width: 0; }
.cp-loading { display: flex; align-items: center; gap: 10px; padding: 28px 0; border-top: 1px solid var(--ink); font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.cp-loading[hidden] { display: none; }
.cp-list[hidden] { display: none; }
.cp-trail__name { border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.cp-trail__name:hover { border-bottom-color: currentColor; }
.cp-trail__date { font-variant-numeric: tabular-nums; }
.cp-unpublish:hover { color: var(--accent); }
.cp-trails .empty { border-top: 1px solid var(--ink); }
/* four cards a row like the featured trails on the home page; the fifth starts a new row */
.cp-list .ftrail:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.cp-list .ftrail:nth-child(n+5) { border-top: 1px solid var(--hair); }
@media (max-width: 1180px) {
  .cp-list .ftrail:nth-child(4n+1) { border-left: 1px solid var(--hair); padding-left: 24px; }
  .cp-list .ftrail:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .cp-list .ftrail, .cp-list .ftrail:nth-child(4n+1), .cp-list .ftrail:nth-child(2n+1) { padding: 18px 0 20px; border-left: 0; }
  .cp-follow, .cp-follow .btn { width: 100%; }
  .cp-key__full { font-size: 11px; letter-spacing: 0; }
  .cp-stats { align-items: stretch; }
}