/* The journal's Trails page (doc 13 "Trails"; src/ui/journal-trails.js). The Trails tab spans the
   whole row above the six sections, so every row stays full. From a 1100 px window the panel widens
   and the three trails sit side by side; below that, three tabs show one at a time. Each trail has a
   quiet tint: moss for the naturalist, sea blue for the beachcomber, earth brown for the shaper.
   The stops themselves use journal.css's trail styles. */

.ebb-journal__tab.is-wide { grid-column: 1 / -1; }
@media (max-width: 480px) {
  /* Seven tabs: Trails across the top, then three even rows of two (journal.css widens an odd last one). */
  .ebb-journal__nav .ebb-journal__tab:last-child:nth-child(odd):not(.is-wide) { grid-column: auto; }
}
.ebb-journal.is-wide { width: min(800px, calc(100vw - 2 * var(--jr-edge))); }

.ebb-trails { display: grid; gap: 14px; min-width: 0; }
.ebb-trails.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: start; }
/* Side by side, the trails share their rows (title, what it is about, the count, the intro, the
   line of stops), so each row starts level across all three whatever its words' length. */
.ebb-trails.is-wide .ebb-trails__col { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
.ebb-trails__col { --tr: var(--jr-moss); --tr-wash: rgba(95, 127, 91, 0.16); min-width: 0; padding-top: 8px; border-top: 4px solid var(--tr); }
[data-tint='naturalist'] { --tr: var(--jr-moss); --tr-wash: rgba(95, 127, 91, 0.16); }
[data-tint='beach'] { --tr: #4F7B92; --tr-wash: rgba(79, 123, 146, 0.16); }
[data-tint='shape'] { --tr: #8A6A4E; --tr-wash: rgba(138, 106, 78, 0.16); }
.ebb-trails__col .ebb-trail__title { margin-top: 2px; }
.ebb-trails__sub { margin: 0; }
.ebb-trails__count { margin: 2px 0 6px; font-weight: 800; font-size: calc(16px * var(--text-scale, 1)); color: var(--tr); }
.ebb-trails__col .ebb-trail__stop.is-station .ebb-trail__dot { background: var(--tr-wash); color: var(--tr); }
.ebb-trails__col .ebb-trail__stop.is-pencil .ebb-trail__dot { background: var(--jr-paper); color: var(--jr-pencil); }

/* Each tab as wide as its word, the spare room shared out, so "Beachcomber" never breaks. */
.ebb-trails__tabs { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.ebb-trails__tab {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 8px;
  border: 1.5px solid var(--jr-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--jr-ink);
  font: 800 calc(16px * var(--text-scale, 1))/1.2 var(--font-ui);
  overflow-wrap: normal;
  cursor: pointer;
}
.ebb-trails__tab:hover { border-color: var(--tr); }
.ebb-trails__tab[aria-pressed='true'] { background: var(--tr); border-color: var(--tr); color: var(--jr-paper); }
.ebb-trails__tab:focus-visible { outline: 3px solid var(--tr); outline-offset: 2px; }
:root.ebb-text-large .ebb-trails__tabs { grid-template-columns: minmax(0, 1fr); }